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

Jls -

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

1. المقدمة

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

2. الميزات والخيارات

  • التحويل الصوتي المتقدم:

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

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

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

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

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

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

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

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

3. خلف الكواليس: رحلتي مع الذكاء الاصطناعي وRoo Code

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

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

3.1. Roo Code: رفيقي في الترميز بالذكاء الاصطناعي

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

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

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

3.2. فريق من الذكاءات الاصطناعية لمشروع فريد

طلبت المساعدة من مجموعة حقيقية من أنظمة الذكاء الاصطناعي، كل منها له نقاط قوته وضعفه:

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

3.3. تجاوز العقبات: مسيرة مليئة بالتحديات (وحلولها!)

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

  • الوصول إلى الميكروفون والأذونات: في البداية، كان من المستحيل الحصول على إذن الوصول إلى الميكروفون! كانت أنظمة الذكاء الاصطناعي تُصر على إضافة إذن “ميكروفون” غير موجود في Manifest V3 لكروم. اضطررت للغوص في الوثائق الرسمية وتقديمها إلى Claude 3.5 Sonnet ليجد الحل.

  • تخزين آمن لمفتاح API: تحدي آخر كان كيفية تخزين واسترجاع مفتاح API الخاص بـ OpenAI بطريقة آمنة في كروم؟ قدمت الوثائق الرسمية إلى Gemini، الذي تمكن من اقتراح الكود المناسب للتعامل مع تخزين كروم.

3.4. التعاون والتجربة: مفتاح النجاح

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

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

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

3.5. الصعوبات التي تمت مواجهتها

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

4. لماذا Babel Fish AI؟ إضافة وُلدت من حاجة

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

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

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

5. نظرة على الكود والتفاصيل التقنية

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

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

5.1. البنية العامة

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

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

5.2. ملف manifest.json

يستخدم ملف manifest.json النسخة 3 من الـ manifest. ويعلن عن الأذونات التالية:

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

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

5.5. التواصل

يتم التواصل بين الـ background script والـ content script عبر واجهة المراسلة الخاصة بكروم (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 الخاصة بواجهات API في إعدادات الإضافة (وضع الخبراء).

5.7. التخزين

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

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

5.8. واجهة المستخدم

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

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

5.9. إدارة الأخطاء

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

6. الموارد

7. الخاتمة

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

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

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