DEV Community: admin@adawati.app

لماذا تحتاج تطبيقات الجداول إلى بريدي الإلكتروني؟ قمت ببرمجة بديل 100% Client-Side 📅🚀

admin@adawati.app — Mon, 27 Apr 2026 09:32:42 +0000

لنكن صريحين. هل حاولت يوماً البحث عن تطبيق ويب بسيط لإنشاء جدول محاضرات أسبوعي؟

عادةً ستواجه أحد هذين السيناريوهين:

قالب إكسل (Excel) قديم ومزعج جداً عند التصفح من الجوال.

تطبيق "حديث" يطلب بريدك الإلكتروني، ويجبرك على تفعيل الحساب، ثم يفاجئك بـ Paywall (اشتراك مدفوع) فقط لكي تقوم بتصدير جدولك كصورة.

كل هذا العناء من أجل ترتيب 5 أو 6 مواد جامعية خلال الأسبوع!

كمطور، وجدت هذا الأمر غير منطقي. تطبيق الجداول الأسبوعية لا يحتاج إلى Backend ثقيل، أو نظام مصادقة (Auth)، أو قاعدة بيانات. لذلك، قررت بناء صانع الجداول الجامعية لمنصة أدواتي — أداة سريعة جداً، تعمل 100% في متصفح العميل (Client-Side) بدون أي سيرفرات خلفية.

إليكم كيف قمت ببنائها والتحديات التقنية التي تجاوزتها باستخدام الـ Web APIs القياسية. 🛠️

🚫 نهج "اللا قاعدة بيانات" (إدارة الحالة محلياً)
عندما تبني تطبيقاً بدون قاعدة بيانات، السؤال الأول الذي يتبادر للذهن هو: كيف نحفظ بيانات المستخدم حتى لا يفقدها إذا قام بتحديث الصفحة (Refresh)؟

اعتمدت بشكل كبير على واجهة localStorage API.
كلما قام المستخدم بإضافة مادة، يقوم التطبيق بتحديث مصفوفة (Array) تمثل الجدول، ويحولها إلى نص باستخدام JSON.stringify، ثم يحفظها محلياً. وعند تحميل الـ DOM، يتحقق التطبيق من الـ localStorage، ويقرأ الـ JSON، ويحدث واجهة المستخدم (UI) في أجزاء من الثانية.

النتيجة؟ يحصل المستخدم على تجربة "الحفظ التلقائي" (Auto-save) المطابقة تماماً للتطبيقات السحابية، ولكن جدوله الأكاديمي لا يغادر جهازه الفعلي أبداً. خصوصية مطلقة، وتكلفة سيرفرات 0$ بالنسبة لي كمطور.

⏱️ اكتشاف التعارض الزمني في المتصفح
إذا أضفت محاضرة يوم الإثنين من الساعة 09:00 إلى 10:30، لا ينبغي أن يسمح لك النظام بإضافة محاضرة أخرى يوم الإثنين تبدأ الساعة 10:00.

بدلاً من إرسال طلب HTTP إلى السيرفر للتحقق من هذا التعارض الزمني، كتبت خوارزمية تحقق خفيفة تعمل مباشرة في المتصفح.
لتسهيل العمليات الحسابية، يحول التطبيق جميع الأوقات إلى "دقائق من منتصف الليل". وقبل حقن المادة الجديدة في الـ DOM، تمر الخوارزمية على المواد الموجودة في نفس اليوم وتتحقق من شرط التداخل الزمني:

وقت البداية الجديد < وقت النهاية الموجود && وقت النهاية الجديد > وقت البداية الموجود

إذا تحقق الشرط، تظهر واجهة المستخدم تحذيراً فورياً. وبسبب عدم وجود تأخير في الشبكة (Zero Network Latency)، فإن الاستجابة تكون أسرع من البرق.

🖼️ التحدي الأخير: تحويل الـ DOM إلى صورة PNG عالية الدقة
الميزة الأولى التي يطلبها الطلاب هي القدرة على تحميل جدولهم كصورة لاستخدامها كخلفية لشاشة القفل في هواتفهم الذكية.

تحويل تصميم HTML/CSS معقد (Grids, Flexbox, ونصوص مخصصة) إلى صورة قابلة للتحميل أمر صعب برمجياً. استخدمت Canvas API لأخذ "لقطة" (Snapshot) للـ DOM.
لكن إذا قمت بذلك من قبل، فستعرف أن الصورة الناتجة غالباً ما تكون ضبابية (Blurry)، خاصة على شاشات الهواتف الحديثة (Retina Displays).

الحل التقني: قمت برمجياً بإجبار الـ Canvas على التصيير (Render) بدقة 3x (ثلاثة أضعاف الدقة العادية) قبل إنشاء رابط البيانات (Base64 data URL). النتيجة هي صورة PNG فائقة الدقة يتم تحميلها مباشرة لجهاز المستخدم بدون أي طلب للسيرفر.

👉 جربها بنفسك!
إذا كنت تريد أن ترى مدى سلاسة تطبيقات الـ Client-side 100%، جرب بناء جدول سريع (وحاول أن تتعمد إحداث تعارض زمني لتختبر سرعة الخوارزمية) من هنا:
صانع الجداول الجامعية - أدواتي

سؤال لمجتمع المطورين: هل سبق لكم العمل بمكتبات تحويل الـ DOM إلى صور (مثل html2canvas)؟ وكيف تعاملتم مع مشكلة النصوص الضبابية أو اختلافات الـ CSS بين المتصفحات؟ شاركوني تجاربكم في التعليقات! 👇

Why do scheduling apps need my email? I built a 100% Client-Side Timetable Builder instead 📅🚀

admin@adawati.app — Mon, 27 Apr 2026 09:24:06 +0000

Let’s be honest. Have you ever tried to find a simple web app to build a weekly schedule or timetable?

You usually encounter two scenarios:

It’s a clunky Excel template that looks terrible on mobile.

It’s a "modern" app that demands your email, makes you verify your account, and then throws a paywall at you just to export your schedule.

All of this just to map out 5 or 6 university courses across a week!

As a developer, I found this ridiculous. A timetable app doesn't need a heavy backend, user authentication, or a database. So, I decided to build the Adawati Timetable Builder — a blazing fast, 100% client-side scheduling tool with zero backend.

Here is how I built it and the technical hurdles I bypassed using standard web APIs. 🛠️

🚫 The "No-Database" Approach (State Persistence)
When you build an app without a database, the immediate question is: How do we save the user's data so they don't lose it on refresh?

I heavily relied on the localStorage API.
Whenever a user adds a course, the app updates an array of objects representing the schedule, stringifies it, and saves it locally. When the DOM loads, it checks localStorage, parses the JSON, and hydrates the UI instantly.

The result? The user gets an "auto-save" experience identical to a cloud app, but their academic schedule never leaves their physical device. Absolute privacy, and $0 server costs for me.

⏱️ Detecting Time Conflicts in the Browser
If you add a class on Monday from 09:00 to 10:30, you shouldn't be able to add another Monday class at 10:00.

Instead of sending an HTTP request to a server to validate this payload, I wrote a lightweight validation engine that runs in the browser.
To make the math easy, the app converts all times into "minutes from midnight". Before a new course is injected into the DOM, the algorithm loops through the existing courses for that day and checks for overlaps:

New Start Time < Existing End Time && New End Time > Existing Start Time

If it returns true, the UI instantly throws a warning. Because there is no network latency, the feedback is lightning-fast.

🖼️ The Final Boss: DOM to High-Res PNG
The number one feature students want is the ability to download their timetable to use as a phone lock screen.

Converting a complex HTML/CSS layout (grids, flexbox, text) into a downloadable image is notoriously tricky. I used the Canvas API to take a "snapshot" of the DOM.
However, if you've ever done this, you know the exported image often looks blurry, especially on Retina displays.

The fix: I programmatically forced the Canvas to render at 3x the normal resolution before generating the Base64 data URL. The result is a beautifully crisp PNG that downloads directly to the user's device without a single server round-trip.

👉 Try it out yourself!
If you want to see how smooth a 100% client-side app can feel, try building a quick schedule (and try to trigger the time conflict warning) here:
Adawati Timetable Builder

Question for the dev community: Have you ever worked with DOM-to-Image libraries (like html2canvas)? How did you handle the blurry text issue or CSS cross-browser quirks? Let me know in the comments! 👇

الخلل البرمجي والرياضي في طرق تحويل المعدل الجامعي للطلاب المبتعثين

admin@adawati.app — Thu, 23 Apr 2026 20:15:41 +0000

كطلاب في تخصصات علوم الحاسب والهندسة، أو كمطورين نسعى للتقديم على برامج الماجستير في الخارج أو التدريب في الشركات التقنية العالمية، غالباً ما نصطدم بمتطلب أساسي في استمارات القبول:

"أدخل معدلك التراكمي على مقياس 4.0"

بما أن معظم جامعاتنا العربية (في السعودية والخليج) تعتمد نظام 5.0 أو النسبة المئوية، فإن أول حل يتبادر لذهن المبرمج هو استخدام دالة رياضية خطية بسيطة للتحويل: (4.5 / 5.0) * 4.0 = 3.6.

هذا الخطأ الرياضي قد يكلفك فرصة القبول!

المشكلة: المقاييس الأكاديمية ليست خطية (Non-Linear)

أنظمة التقييم الأكاديمي لا تعمل بنظام النسبة والتناسب المباشر. في نظام 5.0، تقدير (B+) يمنحك 4.5 نقطة. لكن في نظام 4.0، نفس التقدير (B+) يعادل 3.5 نقطة وليس 3.6. استخدام القسمة المباشرة يخفض من قيمة معدلك الحقيقي ويجعلك تتراجع في أنظمة الفرز الآلي (ATS) الخاصة بالجامعات والشركات.

الحل التقني: محول درجات يعتمد على مصفوفة معتمدة

لحل هذه الفجوة، قمنا بهندسة أداة محول الدرجات من منصة أدواتي.

الأداة لا تعتمد على القسمة، بل تتضمن مصفوفة برمجية (Matrix) مبنية على لوائح تحويل الدرجات الرسمية (مثل جداول WES ووزارة التعليم). بمجرد إدخال معدلك، تقوم الأداة بإرجاع قيمتك بدقة عبر 4 أنظمة في نفس اللحظة:

مقياس 5.0
مقياس 4.0
النسبة المئوية (%)
التقدير الحرفي

لماذا صممناها لتعمل من جهة العميل (Client-Side)؟

كمهندسين ومطورين، الخصوصية لدينا خط أحمر. السجلات الأكاديمية تعتبر بيانات حساسة جداً. لذلك، اتخذنا قراراً هندسياً بأن نجعل الأداة تعمل بالكامل داخل المتصفح.

بدون خوادم (Zero Server Logs): حساب الدرجات يتم عبر JavaScript في جهازك المحلي.
سرعة لحظية: عدم وجود طلبات (API Calls) للخادم يعني أن النتائج تظهر بمجرد كتابة الرقم.
أمان 100%: لا يتم إرسال أو تخزين أي درجة في قواعد بياناتنا.

جرب الأداة الآن

إذا كنت تجهز سيرتك الذاتية أو أوراق الابتعاث، لا تعتمد على التخمين.

🔗 استخدم محول الدرجات الأكاديمي مجاناً من هنا

(ملاحظة للمطورين: منصة "أدواتي" تحتوي أيضاً على أدوات لمعالجة الـ PDF تفاعلياً داخل المتصفح، وأدوات ذكاء اصطناعي لتفريغ المحاضرات. يسعدني جداً سماع رأيكم في الواجهة البرمجية وتجربة المستخدم في التعليقات!)

Why Linear Math is Ruining Your GPA Conversion (And the Client-Side Tool I Built to Fix It)

admin@adawati.app — Thu, 23 Apr 2026 20:13:58 +0000

If you’re an international CS student or software engineer applying for grad school, scholarships, or internships at global tech companies, you’ve hit this wall:

"Please enter your GPA on a 4.0 scale."

If your university uses a 5.0 scale or a Percentage (%) system, your first instinct as a programmer is probably to write a quick script or use linear math to cross-multiply.
For example: (4.5 / 5.0) * 4.0 = 3.6.

Stop right there. That math is fatally flawed.

The Problem: Academic Scales are Non-Linear

Unlike straightforward data conversions, academic grading scales are heavily weighted and non-linear. In a 5.0 system, a (B+) is typically 4.5 points. However, on the US 4.0 scale, a (B+) drops to 3.5 points, not 3.6.

Using simple linear conversion actually undervalues your academic performance, potentially costing you a spot in a competitive Master's program or bypassing the ATS (Applicant Tracking System) filters for junior developer roles.

The Solution: A Privacy-First Grade Converter

I got tired of seeing brilliant students get rejected due to bad math, so my team and I built the Adawati Grade Converter.

Instead of linear math, the tool uses the official conversion brackets (like those from WES and Ministries of Education) to map your exact letter grade equivalent across four different systems simultaneously:

GPA 5.0 Scale
GPA 4.0 Scale
Percentage (%)
Letter Grade (A, B, C...)

The Developer Angle: Why We Built It Client-Side

As developers, we are naturally paranoid about our data. Academic transcripts are highly sensitive.

We engineered the Adawati Grade Converter to be 100% Client-Side.

Zero Server Logs: Your grades are processed entirely within your browser's DOM using JavaScript.
No Databases: We don't send a single byte of your academic data to our servers.
Instant Speed: Because there are no API calls to a backend, the conversion matrix updates in real-time as you type.

Test It Out

If you are preparing your resume or grad school applications, don't guess your GPA. Do it the right way.

🔗 Try the Adawati Grade Converter Here (Free & No Ads)

(P.S. We also built a suite of client-side PDF tools and an AI Audio-to-Text transcriber on the same platform. Let me know what you think of the UI/UX in the comments!)

Building a Bulletproof GPA Calculator: Battling JavaScript Floating Point Math 🧮💥

admin@adawati.app — Thu, 23 Apr 2026 16:26:46 +0000

Let’s talk about building calculators in JavaScript. On the surface, it sounds like a beginner's project: Just multiply Grade Points by Credit Hours, sum them up, and divide by the total. Easy, right?

Well, that's what I thought until I decided to build a comprehensive, dual-scale (4.0 & 5.0) University GPA Calculator for Adawati.app.

It quickly turned into a lesson in why JavaScript math can be a developer's worst enemy when absolute precision is required. Here is how I built a robust, 100% client-side GPA engine without a backend.

🛑 The Core Problem: The 0.1 + 0.2 Nightmare
As we all know, JavaScript uses double-precision 64-bit format IEEE 754 values. This means doing something as simple as summing up quality points can sometimes result in 3.1000000000000005.

When you are dealing with a student's GPA—where the difference between a 3.99 and a 4.00 dictates whether they graduate with Honors—rounding errors are unacceptable.

To solve this, I couldn't rely on raw float addition. Instead, I structured the calculation pipeline to multiply values by an order of magnitude (e.g., 100), perform the integer math, and then divide back down just before rendering the final result.

⚙️ Managing Dual Grading Scales (The Smart Way)
Most universities in the US use a 4.0 scale, but in the Middle East, the 5.0 scale is heavily prevalent. I didn’t want to write two separate calculation engines.

Instead, I created a unified state dictionary. The core logic remains identical, but the grade-to-point mapping acts as a configuration object that swaps out dynamically when the user toggles the scale button.

JavaScript
// A simplified example of the state mapping
const scaleMappings = {
"5.0": { "A+": 5.0, "A": 4.75, "B+": 4.5 /* ... / },
"4.0": { "A+": 4.0, "A": 4.0, "B+": 3.5 / ... */ }
};
This keeps the logic completely decoupled from the UI and makes adding future scales (like the UK grading system) incredibly easy.

🔮 The Cumulative "What-If" Engine
The real value of a GPA tool is the "What-If" simulator—allowing students to see how next semester's grades will impact their overall standing.

This required combining historical data (Previous GPA × Previous Hours) with the active DOM inputs (Current Courses). Because I wanted this to be a zero-latency tool, the entire reactivity happens directly in the browser. The moment a user selects an A- from a dropdown, the DOM fires an event that updates the total quality points and recalculates the cumulative GPA instantly, without a single server request.

🔒 Why Client-Side First?
A key philosophy behind Adawati is privacy. Academic standing is personal data. By executing the complex math entirely within the user's browser, I ensure that their grades are never logged, stored, or transmitted to a server.

👉 Try the Engine
You can test out the live GPA calculator (and try to break the floating-point math) here:
Adawati GPA Calculator

For the Devs: How do you usually handle precise decimal math in JS? Do you use libraries like Big.js or Decimal.js, or do you prefer writing your own helper functions for small-scale applications like this? Let me know! 👇

Stop uploading PDFs to random servers! I built a 100% Client-Side PDF Editor in JS 🛡️📄

admin@adawati.app — Tue, 21 Apr 2026 09:42:39 +0000

Let’s be real for a second. Every time you or a family member needs to merge, split, or compress a PDF, what do you do? You Google "Free PDF Editor," click the first result, and upload your highly sensitive document (like a bank statement, resume, or legal contract) to a random server halfway across the world.

Then you just hope they actually delete it like their privacy policy claims.

As a web developer, I found this absurd. Today's browsers are incredibly powerful, so why are we still relying on backend servers to do basic file manipulation?

To solve this, I built the Adawati PDF Editor — a completely free, zero-latency, and 100% client-side PDF toolkit.

Here is how I bypassed the backend and built this entirely in the browser using JavaScript. 🛠️

🧠 The Magic of ArrayBuffer and Blob
The traditional way of handling files on the web is grabbing a file input, attaching it to a FormData object, and POSTing it to an API.

But with a client-side approach, we don't do that. Instead, when a user selects a PDF, the app uses the FileReader API to read the file directly into the browser's memory as an ArrayBuffer.

By treating the PDF as raw binary data (Uint8Array), the JavaScript engine can parse the document's structure. Whether the user wants to merge two documents, extract specific pages, or compress the file, the app mutates the binary data directly in the browser's memory.

🚀 Zero Latency & No Progress Bars
Because nothing is being uploaded or downloaded from a remote server, the speed is mind-blowing.
Editing a PDF is constrained only by the user's CPU, not their internet connection. There are no "uploading..." spinners or timeout errors for large files.

📥 Downloading Without a Server
How do you serve the modified file back to the user if there is no backend to generate a download link?
You create a Blob!

Once the binary manipulation is complete, the app packages the new Uint8Array into a PDF Blob. Using URL.createObjectURL(), it generates a temporary local URL, attaches it to a hidden tag, and triggers a programmatic click.

The file saves instantly to the user's local machine.

🔒 Privacy by Design
The biggest win here isn't just speed—it’s absolute security. Because the architecture lacks a backend to process the files, it is physically impossible for the documents to be intercepted, stored, or leaked by the platform. You can literally load the page, turn off your Wi-Fi, and edit your PDFs offline.

Try it out!
I built this as part of a larger suite of privacy-first tools for students and professionals. You can test the PDF editor (Merge, Split, Compress, etc.) live here:
👉 Adawati PDF Editor

Question for the dev community: Have you ever had to work with PDFs in your projects? What libraries or approaches did you use? Let me know in the comments! 👇

I got tired of bloated writing apps, so I built a Zero-Latency, Privacy-First Document Editor ⚡

admin@adawati.app — Tue, 14 Apr 2026 10:56:14 +0000

Modern writing tools are amazing, but let’s be honest: they have become incredibly bloated. Opening a simple document today often means loading megabytes of JavaScript, waiting for server syncs, and accepting that every single keystroke is being tracked and stored in a database somewhere.

Sometimes, you just need a fast, clean, and private space to write your thoughts, draft a blog post, or structure a document without the overhead.

That’s exactly why I built Adawati Docs — a lightweight, distraction-free document editor that runs directly in your browser.

You can try it live here: Adawati Docs

🛠️ The Core Philosophy: Speed and Privacy
When designing this editor, I had two strict rules:

Zero Latency: The editor must load instantly. No waiting for spinners or database connections.

Absolute Privacy: What you write is your business. The text should not be sent to any backend server for rendering or storage.

💻 Technical Highlights
To achieve this, I leaned heavily on a Client-Side First architecture. Here is how it works under the hood:

Browser as the Backend: Instead of relying on a database to save drafts, the editor leverages local storage mechanisms. Your document lives in your browser's memory. If you close the tab and come back, your work is exactly where you left it—all without a single API call.

Rich Formatting, Zero Bloat: Implementing a rich text editor that supports essential formatting (headings, lists, bolding) without turning the app into a sluggish monster was a challenge. By keeping the DOM manipulations clean and avoiding heavy third-party WYSIWYG dependencies, the typing experience remains buttery smooth.

Exporting Made Simple: Once you are done writing, you need to get your text out efficiently. The tool allows you to format your document and copy it cleanly, preserving the structure so you can paste it directly into your CMS, emails, or markdown files without weird inline CSS issues.

🌍 Fully Localized
Just like the rest of the Adawati platform, I made sure the editor handles both English (LTR) and Arabic (RTL) perfectly. Handling bi-directional text gracefully in an editor requires strict attention to CSS logical properties to ensure the cursor and text alignment don't break when switching languages.

🚀 What's Next?
Building Adawati Docs has been a great exercise in performance optimization and trusting the client's browser capabilities. My next goal is to add direct Markdown-to-PDF exporting entirely on the client-side.

I would love for you to test the editor and try writing your next post or notes on it: Adawati Docs/Editor.

What is your current go-to tool for quick, distraction-free writing? Let me know in the comments!

How I Built a 100% Client-Side, ATS-Friendly CV Builder (Zero Backend for Ultimate Privacy

admin@adawati.app — Sat, 04 Apr 2026 18:57:05 +0000

Have you ever spent an hour filling out your details on a "free" resume builder, only to be hit with a $15 paywall or a massive, ugly watermark right when you click download?

As an indie developer, I found this practice incredibly frustrating. Beyond the hidden fees, there's a massive privacy concern: why should a random server store my phone number, address, and entire employment history just to generate a PDF?

So, I decided to build my own free alternative on Adawati.app: a fast, ATS-friendly CV builder that operates 100% on the client-side. No backend storage, no hidden fees.

Here is how I approached the technical challenges.

The Core Architecture: Zero Backend The primary goal was privacy. By eliminating the backend from the PDF generation process, the user's sensitive data never leaves their browser.

Instead of sending JSON payloads to a Node.js or Python server to render a PDF using tools like Puppeteer or ReportLab, the entire heavy lifting is done in the DOM.

The ATS (Applicant Tracking System) Challenge A major trap with client-side PDF generation is taking the easy route: converting a DOM element to an HTML canvas (e.g., using html2canvas) and then putting that image into a PDF.

Why is this bad? Because ATS bots cannot read images! If your resume is just a giant image inside a PDF wrapper, you will automatically be rejected by 75% of corporate filtering systems.

The Solution:
I had to ensure the output was a true vector PDF with selectable text. Using client-side libraries that construct the PDF document programmatically ensures that the text layer is preserved. The file remains lightweight, the text is razor-sharp (no pixelation on zoom), and most importantly, an ATS can easily parse the keywords, job titles, and dates.

Handling RTL (Right-to-Left) and Localization
Since the platform targets both Arabic and English speakers, the layout had to mirror perfectly without breaking the PDF generation flow.
Switching between languages triggers a state change that not only flips the CSS (direction: rtl) for the live preview but also maps to the corresponding coordinates and text alignments in the PDF generation logic.
The Result
The final product allows users to:

Type their data and see a Live Preview.

Switch between English and Arabic seamlessly.

Download a clean, ATS-compliant PDF instantly.

You can try the live tool here: Adawati CV Builder. Turn off your Wi-Fi before clicking download if you want to test the "Client-Side only" claim! 😉

What’s Next?
Building tools that respect user privacy shouldn't be the exception; it should be the norm. My next challenge is optimizing the client-side PDF compression.

Have you worked with client-side PDF generation before? What libraries did you find most reliable for handling complex layouts and custom fonts? Let me know in the comments!

🚀 Building a High-Accuracy Arabic OCR Tool: How I Solved the "Image-to-Text" Challenge

admin@adawati.app — Thu, 26 Mar 2026 21:02:43 +0000

Extraction of text from images (OCR) is a solved problem for Latin languages, but for Arabic, it’s a whole different story. As the developer behind Adawati.app, I spent weeks engineering a solution that doesn't just "read" Arabic, but understands its complexity.

The Problem: Why Arabic OCR is Hard
Most open-source OCR engines struggle with Arabic for three reasons:

Cursive Nature: Arabic letters change shape based on their position (Start, Middle, End).

Diacritics & Dots: Small dots and marks can change the entire meaning of a word.

Low-Quality Input: Students often take photos of textbooks in poor lighting or at weird angles.

My Engineering Approach
Instead of just "plugging in" a generic API, I built a pipeline focused on Pre-processing and Contextual Inference.

Image Pre-processing (The Secret Sauce) Before the AI even looks at the image, I apply several filters:

Binarization: Converting the image to high-contrast black and white to eliminate background noise.

Deskewing: Automatically correcting the angle if the photo was taken tilted.

Noise Reduction: Removing "salt and pepper" noise often found in scanned PDFs.

The AI Engine
I utilized state-of-the-art deep learning models specifically fine-tuned for Arabic scripts. These models use CNNs (Convolutional Neural Networks) for visual feature extraction and LSTMs (Long Short-Term Memory) to understand the sequence of characters, ensuring that the connected letters are recognized as a coherent word, not just random symbols.
Privacy-First Architecture
In an era of data harvesting, I made a conscious architectural decision: Zero Retention.

Images are processed in a secure memory buffer.

Once the text is extracted, the image is purged instantly.

No databases, no logs of your documents.

Why I Built This?
I saw students struggling to transcribe their lectures and researchers stuck with non-searchable PDF archives. I wanted to provide a free, fast, and no-login tool that respects their privacy while delivering professional-grade accuracy.

Try it out
If you're a developer interested in Arabic NLP or a student looking for a reliable tool, check it out here:
👉 Image to Text - Arabic OCR Tool

I'd love to hear your feedback on the accuracy, especially with complex fonts or handwritten notes!

Arabic #OCR #AI #WebDev #Productivity #NextJS

title: Building a Free Arabic Speech-to-Text Engine using Hugging Face & Next.js

admin@adawati.app — Wed, 25 Mar 2026 13:06:10 +0000

Hello fellow developers! 👋

Handling audio processing in web applications is always tricky, but when you add Arabic dialects and academic terminology (Arabizi) to the mix, it becomes a real engineering challenge.

Recently, while building Adawati.app (an all-in-one digital workspace for Arab students), I needed to implement a reliable Speech-to-Text (STT) feature for university lectures. Paid APIs like Google Cloud or AWS were either too expensive for a free tool or struggled heavily with local Arabic dialects.

Here is how I engineered a custom, free solution using Hugging Face open-source models.

🛑 The Technical Bottlenecks

Large File Uploads & Timeouts: University lectures are often 1-2 hours long. Sending a 100MB audio file to a server in one go usually results in a 504 Gateway Timeout.
Background Noise: Lecture halls are noisy. Passing raw audio to an AI model drastically reduces transcription accuracy.
Dialect Nuances: Standard Arabic models fail when professors mix English technical terms with local Arabic dialects.

⚙️ The Architecture & Solution

To bypass these issues, I built a pipeline that processes the audio efficiently:

1. Audio Chunking (The Game Changer)
Instead of sending the whole file, I used the Web Audio API on the client-side to split the audio into smaller 30-second chunks before sending them to the backend. This prevents timeouts and allows parallel processing.

2. Pre-processing & Noise Reduction
Before hitting the AI model, the chunks go through a basic noise-reduction filter using FFmpeg to isolate human voice frequencies.

3. Hugging Face Inference
I connected the backend to a fine-tuned Whisper model hosted on Hugging Face, specifically trained on Arabic datasets.

Here is a conceptual snippet of how the chunking logic looks in the backend (Python/FastAPI wrapper):

`python
from pydub import AudioSegment
import requests

def process_large_audio(file_path):
audio = AudioSegment.from_file(file_path)
chunk_length_ms = 30000 # 30 seconds
chunks = [audio[i:i+chunk_length_ms] for i in range(0, len(audio), chunk_length_ms)]

full_transcript = ""

for idx, chunk in enumerate(chunks):
    chunk.export(f"temp_chunk_{idx}.wav", format="wav")
    # Send to Hugging Face API
    transcript = query_huggingface(f"temp_chunk_{idx}.wav")
    full_transcript += transcript + " "

return full_transcript`

🚀 The Live Result
By combining this chunking architecture with Hugging Face models, I managed to create a fast, accurate, and completely free lecture transcription tool without relying on expensive enterprise APIs.

You can test the live implementation and its accuracy with Arabic audio here:
👉 Arabic Audio-to-Text Converter - Adawati

💬 Let's Discuss!
I'm curious to know from the backend engineers here:
How do you handle massive file uploads in your Next.js/Node.js applications? Do you prefer client-side chunking or streaming directly to a cloud bucket (like AWS S3) before processing?

Let me know in the comments!

كيف قمت بحل مشكلة انعكاس الحروف العربية (RTL) عند استخراج

admin@adawati.app — Tue, 24 Mar 2026 14:01:54 +0000

`---
title: "كيف قمت بحل مشكلة انعكاس الحروف العربية (RTL) عند استخراج النصوص من ملفات PDF"
published: true

tags: webdev, pdf, arabic, programming

مرحباً أصدقائي المطورين،

أي شخص حاول التعامل مع ملفات الـ PDF برمجياً لاستخراج النصوص العربية يعرف تماماً هذا الكابوس: تسحب النص فتجده معكوساً (م ر ح ب ا)، أو تجد الحروف متقطعة وغير متصلة.

خلال عملي مؤخراً على بناء أدوات لمعالجة المستندات للطلاب، واجهت هذه المشكلة بعمق. حاولت استخدام مكتبات شهيرة مثل pdf.js أو PyPDF2، لكن النتيجة مع اللغة العربية كانت دائماً كارثية.

🔍 ما هو جذر المشكلة؟

المشكلة تكمن في أن ملفات الـ PDF لا تفهم "الكلمات" أو "الفقرات". هي ببساطة تتعامل مع المستند كـ "لوحة رسم" (Canvas)، وتقوم بوضع كل حرف في إحداثيات (X, Y) محددة. اللغات اللاتينية تُكتب من اليسار لليمين (LTR)، ومحركات الاستخراج تقرأ الإحداثيات بهذا الترتيب. أما العربية (RTL)، فيتم رسمها من اليمين لليسار، وعندما يقرأها المحرك برمجياً من اليسار لليمين، تخرج الكلمة معكوسة!

⚙️ كيف قمت بحلها؟

بدلاً من الاعتماد على القراءة النصية التقليدية للإحداثيات، قمت بدمج مكتبات إعادة التشكيل (Reshaping) وخوارزميات ثنائية الاتجاه (Bidi Algorithm) كطبقة معالجة وسيطة، بالإضافة للاستعانة بنماذج ذكاء اصطناعي عبر Hugging Face متخصصة في الـ OCR لمعالجة الحالات المستعصية.

الفكرة البرمجية المبسطة تعتمد على تمرير النص المستخرج عبر هذه الفلاتر:

`python
import arabic_reshaper
from bidi.algorithm import get_display

def fix_arabic_pdf_text(raw_text):
# 1. إعادة ربط الحروف العربية المتقطعة
reshaped_text = arabic_reshaper.reshape(raw_text)

# 2. تصحيح اتجاه القراءة من اليمين لليسار
bidi_text = get_display(reshaped_text)

return bidi_text`

🚀 النتيجة الحية (التطبيق العملي):
لتسهيل الأمر على الطلاب والزملاء، قمت بدمج هذه الخوارزمية المعقدة في واجهة ويب بسيطة ضمن منصة طورتها مؤخراً.
يمكنكم رؤية النتيجة الحية واختبار سرعة ودقة استخراج النصوص العربية (سواء من ملفات PDF أو الصور) عبر هذه الأداة المجانية:
👉 أداة استخراج النصوص (OCR) - منصة أدواتي
أتمنى أن تفيدكم هذه المقاربة في مشاريعكم القادمة. كيف تتعاملون أنتم مع ملفات الـ PDF العربية في تطبيقاتكم؟