بحث
blogia

إطلاق Babel Fish AI : إضافة Chrome للتفريغ الصوتي والترجمة

jls /
Transcription Traduction IA Extension Chrome Innovation Multilangue
إطلاق Babel Fish AI : إضافة Chrome للتفريغ الصوتي والترجمة

Babel Fish AI، مشروع شخصي، هي إضافة مبتكرة لمتصفح Chrome تحول الصوت إلى نص بدقة استثنائية، مع خيار للترجمة التلقائية. مصممة لتكون موثوقة وخالية من الإعلانات، توفر تفريغًا صوتيًا عالي الجودة عبر واجهة برمجة تطبيقات Whisper من OpenAI. أنشأت هذه الإضافة جزئيًا لتلبية حاجة شخصية: تبسيط التواصل مع أنظمة الذكاء الاصطناعي من خلال إملاء الاستعلامات. يمكنك استخدامها حصريًا للتفريغ أو تفعيل الترجمة لتسهيل التواصل متعدد اللغات. كانت أيضًا فرصة مثالية لاختبار Roo Code، أداة تطوير بمساعدة الذكاء الاصطناعي.

1. Présentation

Babel Fish AI هو مشروع شخصي، تم تطويره بمساندة ذكاءات اصطناعية مثل Claude و Gemini و OpenAI عبر Roo Code. بفضل واجهته البديهية وإعداداته القابلة للتخصيص، تتيح Babel Fish AI الحصول على تفريغ سريع ودقيق، مع خيار ترجمة فوري لتجاوز الحواجز اللغوية.

2. Fonctionnalités et Options

  • التفريغ الصوتي المتقدم :

    • التقاط صوت بجودة عالية عبر الميكروفون.
    • التفريغ يتم عبر واجهة برمجة تطبيقات Whisper من OpenAI، مع الإدراج التلقائي في الحقل النشط أو العرض في نافذة حوار.

  • الترجمة التلقائية الاختيارية :

    • ترجمة سريعة وموثوقة للنص المفروغ، قابلة للتفعيل حسب الحاجة.
    • إمكانية استخدام الإضافة للتفريغ فقط دون الترجمة.

  • دعم متعدد اللغات الكامل : Babel Fish AI تعالج الإدخال الصوتي وتعرض النص بعدة لغات، مما يوسع من استخدامها دوليًا.
    اللغات المدعومة: 🇸🇦 العربية، 🇩🇪 الألمانية، 🇺🇸 الإنجليزية، 🇪🇸 الإسبانية، 🇫🇷 الفرنسية، 🇮🇳 الهندية، 🇮🇹 الإيطالية، 🇯🇵 اليابانية، 🇰🇷 الكورية، 🇳🇱 الهولندية، 🇵🇱 البولندية، 🇵🇹 البرتغالية، 🇷🇴 الرومانية، 🇸🇪 السويدية، 🇨🇳 الصينية.

  • واجهة بديهية وقابلة للتخصيص :

    • خيار العرض داخل حقل الإدخال النشط أو في نافذة حوار.
    • شريط حالة قابل للتخصيص (اللون، الشفافية، المدة) لتغذية بصرية فورية.

  • خيارات متقدمة :

    • وضع خبير يوفر إعدادات مفصلة (عناوين URL لواجهات البرمجة، معلمات حسب النطاق، إلخ).
    • إعدادات الإضافة متاحة عبر صفحة خيارات سهلة الاستخدام.

3. Dans les Coulisses du Développement : Mon Aventure avec l’IA et Roo Code

Babel Fish AI ليست مجرد إضافة لمتصفح Chrome، بل هي ثمرة تجربة مثيرة مع الذكاء الاصطناعي وأداة مبتكرة: Roo Code.

اسمحوا لي أن أخبركم كيف حوّلت فكرة إلى واقع مستندًا إلى قوة عدة ذكاءات اصطناعية وبيئة تطوير فريدة.

3.1. Roo Code : Mon Compagnon de Codage IA

Roo Code هو أكثر من مجرد إضافة لـ VS Code. إنه “وكيل ترميز مستقل” يساعدك في عملك. تخيل مساعد طيار ذكي قادر على:

  • التواصل بلغة طبيعية.
  • قراءة وكتابة الملفات مباشرة في مساحة عملك.
  • تنفيذ أوامر الطرفية.
  • الاندماج مع واجهات برمجة تطبيقات مختلفة (OpenAI، Google Gemini، إلخ).
  • تكييف “شخصيته” عبر “أنماط مخصصة”.

لاستخدام Roo Code في تطوير Babel Fish AI، استعملته كقائد أوركسترا، موجِّهًا عدة ذكاءات اصطناعية للتعاون في إنشاء الإضافة.

3.2. Un Casting d’IA pour un Projet Unique

اعتمدت على مجموعة من الذكاءات الاصطناعية، كل منها بطاقاته ومحدودياته:

  • o3-mini, Claude 3.5 Sonnet, Gemini (exp 1206, 1.5 pro exp 0827, Flash Think), GPT-4o: كانت هذه النماذج المتعاونين الأساسيين، كل واحد أضاف ما لديه للمشروع.
  • Gemini (النماذج المجانية): كانت مجانية النماذج ميزة كبيرة، رغم أنني اضطررت للتعامل مع حدود الحصص (لحسن الحظ، Roo Code يتعامل مع المحاولات المتكررة عند الفشل!).

3.3. Surmonter les Obstacles : Un Parcours Semé d’Embûches (et de Solutions !)

لم يكن التطوير طريقًا مفروشًا بالورود. واجهت عدة تحديات، من بينها:

  • الوصول إلى الميكروفون والصلاحيات: في البداية، كان من المستحيل الحصول على إذن الوصول إلى الميكروفون! كانت الذكاءات الاصطناعية تصر على إضافة إذن “microphone” الذي لا وجود له في Manifest V3 لكروم. اضطررت للغوص في الوثائق الرسمية وتزويد Claude 3.5 Sonnet بها ليجد الحل.
  • تخزين مفتاح API بشكل آمن: لغز آخر: كيف نخزن ونسترجع مفتاح OpenAI API بأمان داخل Chrome؟ قدمت الوثائق الرسمية لـ Gemini، وتمكن من اقتراح الكود المناسب للتعامل مع تخزين Chrome.

3.4. Collaboration et Expérimentation : La Clé du Succès

استخدمت مختلف الذكاءات الاصطناعية للخيارات والتوطينات، وأردت اختبار Roo Code.

بعيدًا عن هذه التحديات المحددة، استطعت:

  • اختبار Roo Code في ظروف حقيقية: كان تطوير Babel Fish AI فرصة لاختبار هذه الأداة الواعدة.
  • توليد الأيقونة وصورة الخلفية: بفضل DALL-E 3 (المدمج في OpenAI)، تمكنت من إنشاء هوية بصرية فريدة للإضافة.
  • تخصيص شريط العرض: استخدمت GIMP لاستخراج ألوان الصورة، ثم طلبت من الذكاء الاصطناعي ترميز جزء خيارات إعداد ألوان الشريط.
  • ترجمة الواجهة إلى عدة لغات: استفدت من قوة الذكاء الاصطناعي عبر Roo Code لتوليد ملفات التوطين (_locales) ولترجمة الخيارات لعدد كبير من اللغات — موفِّر كبير للوقت!
  • إنشاء القوائم المنسدلة: أنشأها الذكاء الاصطناعي بالكامل، موفِّرًا وقتًا هائلاً.
  • إدارة عرض HTML لصفحة الخيارات: تم ذلك بتعاون مع الذكاء الاصطناعي.

3.5 Difficultés rencontrées

  • مشكلة حقن النص داخل iframe لـ Google Chat: تمت إضافة استثناء، وتركت نافذة منبثقة افتراضية.
  • وضع الخبير والصلاحيات: للسماح بتغيير عناوين URL لواجهات البرمجة، اضطررت إلى السماح بجميع المضيفين في المانيفست. يبدو أن هذا يسبب مشكلة مع التصفح المعزز في Chrome، ولا أرى حلًا حاليًا (إذا لدى أحدكم فكرة، فأنا مهتم!).

4. Pourquoi Babel Fish AI ? Une Extension Née d’un Besoin

قبل الخوض في التفاصيل التقنية، من المهم فهم سبب إنشائي لـ Babel Fish AI. كل شيء بدأ من حاجة شخصية:

  • سئمت من كتابة مطالب طويلة: أردت أن أتمكن من التواصل مع الذكاءات الاصطناعية بشكل أكثر طبيعية، بالتحدث إليهم مباشرة.
  • تفريغات متواضعة: الإضافات التي جربتها سابقًا للتفريغ كانت مخيبة للآمال.
  • رغبة في الشفافية: أردت إضافة مفتوحة المصدر، خالية من الإعلانات، وأتحكم في كودها.

Babel Fish AI وُلدت من هذه الرغبة في إنشاء أداة تلبي احتياجاتي الشخصية، وفي الوقت نفسه تفيد المجتمع.

5. Zoom sur le Code et les Détails Techniques

Babel Fish AI مبنية على بنية نموذجية لإضافة Chrome، مع بعض الخصوصيات المرتبطة باستخدام واجهات برمجة OpenAI.

فيما يلي نظرة عامة على المكونات الرئيسية:

5.1. Architecture Générale

تتكون الإضافة من عدة ملفات JavaScript تتفاعل مع بعضها:

  • manifest.json: ملف التهيئة الرئيسي للإضافة. يحدد الصلاحيات، السكربتات، الموارد المتاحة، إلخ.
  • background.js: عامل الخدمة الذي يعمل في الخلفية. يدير الأحداث (النقر على الأيقونة، اختصارات الكيبورد)، يحقن الـ content script إذا لزم، ويتواصل مع الـ content script.
  • content.js: السكربت الذي يُحقن في صفحات الويب. يتفاعل مباشرة مع DOM، يلتقط صوت الميكروفون، يستدعي واجهات برمجة التفريغ والترجمة، ويعرض النتائج.
  • src/utils/api.js: يحتوي على الدوال لاستدعاء واجهة Whisper من OpenAI (التفريغ).
  • src/utils/translation.js: يحتوي على الدوال لاستدعاء واجهة GPT من OpenAI (الترجمة).
  • src/utils/ui.js: يحتوي على دوال مساعدة لإدارة واجهة المستخدم (الشريط، مربع الحوار، زر النسخ).
  • src/constants.js: يحدد ثوابت التهيئة، الحالات، الإجراءات، إلخ.
  • src/pages/options/: يحتوي على ملفات صفحة الخيارات للإضافة (HTML, CSS, JavaScript).

5.2. manifest.json

الملف manifest.json يستخدم الإصدار 3 من المانيفست. يعلن عن الصلاحيات التالية:

  • activeTab : للوصول إلى التبويب النشط.
  • storage: لتخزين مفتاح API وخيارات الإضافة.
  • commands: لتحديد اختصارات الكيبورد.
  • scripting: لحقن الـ content script.
  • host_permissions: https://api.openai.com/* لاستدعاءات واجهات البرمجة، و https://*/* الذي يكون ضروريًا في وضع الخبير للسماح للمستخدم بتحديد عناوين URL لواجهات برمجة مخصصة.

يتم حقن الـ content_scripts في جميع عناوين URL (<all_urls>) وتُنفذ عند نهاية تحميل المستند ("run_at": "document_end"). يتم إعلان background script كعامل خدمة من نوع وحدة ("type": "module").

5.3. background.js

يملك background script عدة أدوار:

  • حقن الـ content script: إذا لم يُحقن content script بالفعل، يقوم background.js بحقنه عند تفاعل (نقر على الأيقونة أو اختصار كيبورد).
  • إدارة الأحداث : يستمع إلى أحداث chrome.runtime.onMessage (رسائل من content script)، chrome.action.onClicked (نقر على الأيقونة) و chrome.commands.onCommand (اختصارات لوحة المفاتيح).
  • التواصل مع الـ content script: يرسل رسائل إلى content script لبدء أو إيقاف التسجيل ({ action: ACTIONS.TOGGLE }).
  • تحديث الأيقونة : يحدث شارة أيقونة الإضافة لتوضيح حالة التسجيل (قيد التشغيل، متوقف، خطأ).

5.4. content.js

يُعد content script قلب الإضافة. يقوم بالمهام التالية:

  • التهيئة : يهيئ مفتاح API وخيارات لون الشريط من تخزين Chrome.
  • التقاط الصوت : يستخدم واجهة navigator.mediaDevices.getUserMedia للوصول إلى الميكروفون وتسجيل الصوت.
  • التفريغ : يستخدم الدالة transcribeAudio (src/utils/api.js) لإرسال الصوت إلى واجهة Whisper من OpenAI والحصول على التفريغ.
  • الترجمة (اختياري) : إذا كان خيار الترجمة مفعلًا، يستخدم الدالة translateText (src/utils/translation.js) لإرسال النص المفروغ إلى واجهة GPT من OpenAI والحصول على الترجمة.
  • العرض : يعرض التفريغ (والترجمة عند الاقتضاء) إما في العنصر النشط في الصفحة (إن كان حقل نصي أو عنصر قابل للتحرير)، أو في مربع حوار.
  • إدارة الشريط : يعرض شريط حالة في أعلى الصفحة لبيان حالة التسجيل أو عرض رسائل الخطأ.
  • التواصل مع الـ background script : يرسل رسائل إلى background script للإشارة إلى بداية التسجيل، نهايته أو حدوث خطأ.
  • الاستماع لتغييرات الخيارات: يراقب التغيرات في إعدادات الإضافة ويحدّث العرض وفقًا لذلك.

5.5. Communication

التواصل بين الـ background script و content script يتم عبر واجهة المراسلة في Chrome (chrome.runtime.sendMessage و chrome.runtime.onMessage).

5.6. API

تستخدم الإضافة واجهتي برمجة من OpenAI:

  • Whisper: للتفريغ الصوتي. عنوان URL الافتراضي هو https://api.openai.com/v1/audio/transcriptions، والنموذج المستخدم هو whisper-1.
  • GPT: للترجمة (اختياري). عنوان URL الافتراضي هو https://api.openai.com/v1/chat/completions، والنموذج المستخدم هو gpt-4o-mini.

يمكن تعديل عناوين URL لواجهات البرمجة في خيارات الإضافة (وضع الخبير).

5.7. Stockage

تستخدم الإضافة chrome.storage.sync لتخزين:

  • مفتاح OpenAI API (apiKey).
  • خيارات الإضافة (العرض، الترجمة، ألوان الشريط، إلخ).

5.8. Interface Utilisateur

تُدار واجهة المستخدم في الإضافة عبر عدة دوال في src/utils/ui.js و content.js:

  • الشريط : شريط حالة يُعرض أعلى الصفحة لبيان حالة التسجيل أو عرض رسائل الخطأ. يمكن تخصيص اللون والشفافية.
  • مربع الحوار : يمكن عرض التفريغ (والترجمة) في مربع حوار. مدة العرض قابلة للتخصيص.
  • زر النسخ : يُضاف زر نسخ إلى مربع الحوار لنسخ النص المفروغ بسهولة.

5.9. Gestion des Erreurs

تُدار الأخطاء بشكل مركزي. رسائل الخطأ معرّفة في src/constants.js (الكائن ERRORS). تُعرض الأخطاء للمستخدم عبر شريط الحالة.

6. Ressources

7. Conclusion

توفر Babel Fish AI حلًا متكاملًا لتفريغ صوتي دقيق وترجمة اختيارية، مع واجهة بديهية وأمان معزز. بفضل هذه الإضافة، تُحسّن تجربة تحويل الصوت إلى نص وتُزال الحواجز اللغوية. جرّب Babel Fish AI على متجر Chrome Web Store واكتشف كيف يمكنها تحويل تواصلك.

شكرًا لقراءتك، واستمتع باستخدام Babel Fish AI!

تمت ترجمة هذا المستند من النسخة fr إلى اللغة ar باستخدام النموذج gpt-5-mini. لمزيد من المعلومات حول عملية الترجمة، راجع https://gitlab.com/jls42/ai-powered-markdown-translator