Babel Fish AI का लॉन्च: Chrome एक्सटेंशन जो ट्रांसक्रिप्शन और अनुवाद वाली आवाज प्रदान करता है

Jls -

Babel Fish AI, एक व्यक्तिगत प्रोजेक्ट, एक अभिनव Chrome एक्सटेंशन है जो अत्यधिक सटीकता के साथ आवाज को टेक्स्ट में बदलता है, साथ ही एक स्वत: अनुवाद विकल्प भी प्रदान करता है। इसे विश्वसनीय और विज्ञापन मुक्त बनाने के लिए डिज़ाइन किया गया है, और यह OpenAI के Whisper API के माध्यम से गुणवत्तापूर्ण आवाज ट्रांसक्रिप्शन प्रदान करता है। मैंने इस एक्सटेंशन को आंशिक रूप से एक व्यक्तिगत आवश्यकता के जवाब में बनाया ताकि आईए के साथ संवाद करना सरल हो सके, अपनी क्वेरी को डिक्टेट करके।
आप इसे केवल ट्रांसक्रिप्शन के लिए उपयोग कर सकते हैं या बहुभाषी संचार को सरल बनाने के लिए अनुवाद को सक्रिय कर सकते हैं।
यह Roo Code का परीक्षण करने का भी एक आदर्श अवसर था, जो एक AI-सहायता प्राप्त विकास उपकरण है।

1. प्रस्तुति

Babel Fish AI एक व्यक्तिगत प्रोजेक्ट है, जिसे Claude, Gemini और OpenAI जैसी AI का सहारा लेकर Roo Code के माध्यम से विकसित किया गया है।
इसके सहज इंटरफ़ेस और अनुकूलन योग्य सेटिंग्स की बदौलत, Babel Fish AI तेज और सटीक ट्रांसक्रिप्शन प्रदान करता है, साथ ही भाषा संबंधी बाधाओं को दूर करने के लिए तुरंत अनुवाद विकल्प भी प्रदान करता है।

2. सुविधाएँ और विकल्प

  • उन्नत वॉयस ट्रांसक्रिप्शन :

    • माइक्रोफोन के माध्यम से उच्च गुणवत्ता वाला ऑडियो कैप्चर करता है।
    • OpenAI के Whisper API द्वारा ट्रांसक्रिप्शन किया जाता है, जिसे सक्रिय फ़ील्ड में स्वचालित रूप से डाला जाता है या डायलॉग विंडो में प्रदर्शित किया जाता है।

  • वैकल्पिक स्वत: अनुवाद :

    • ट्रांसक्रिप्शन किए गए टेक्स्ट का तेज और प्रामाणिक अनुवाद, जिसे आवश्यकतानुसार सक्रिय किया जा सकता है।
    • केवल ट्रांसक्रिप्शन के लिए एक्सटेंशन का उपयोग करने की संभावना।

  • पूर्ण बहुभाषाई समर्थन : Babel Fish AI वॉयस इनपुट को संसाधित करता है और टेक्स्ट को विभिन्न भाषाओं में प्रदर्शित करता है, जिससे इसका अंतरराष्ट्रीय उपयोग बढ़ जाता है।
    समर्थित भाषाएँ: 🇸🇦 अरबी, 🇩🇪 जर्मन, 🇺🇸 अंग्रेजी, 🇪🇸 स्पेनिश, 🇫🇷 फ्रेंच, 🇮🇳 हिंदी, 🇮🇹 इतालवी, 🇯🇵 जापानी, 🇰🇷 कोरियाई, 🇳🇱 डच, 🇵🇱 पोलिश, 🇵🇹 पुर्तगाली, 🇷🇴 रोमानियाई, 🇸🇪 स्वीडिश, 🇨🇳 चीनी।

  • सहज और अनुकूलन योग्य इंटरफ़ेस :

    • सक्रिय इनपुट क्षेत्र या डायलॉग विंडो में डिस्प्ले के बीच चयन।
    • त्वरित दृश्य प्रतिक्रिया के लिए कस्टमाइजेबल स्टेटस बैनर (रंग, अपारदर्शिता, अवधि)।

  • उन्नत विकल्प :

    • विशेषज्ञ मोड जो विस्तृत कॉन्फ़िगरेशन प्रदान करता है (API की URLs, डोमेनवार पैरामीटर आदि)।
    • एक सुविधाजनक विकल्प पृष्ठ के माध्यम से एक्सटेंशन की सेटिंग्स तक पहुंच।

3. डेवलपमेंट के पर्दे के पीछे: AI और Roo Code के साथ मेरी यात्रा

Babel Fish AI केवल एक Chrome एक्सटेंशन नहीं है, यह आर्टिफिशियल इंटेलिजेंस और एक अभिनव उपकरण, Roo Code, के साथ एक रोमांचक प्रयोग का भी फल है।

मुझे बताने दीजिए कि कैसे मैंने एक विचार को वास्तविकता में बदला, कई AI की शक्ति और एक अनूठे विकास वातावरण का सहारा लेकर।

3.1. Roo Code : मेरा AI कोडिंग साथी

Roo Code केवल एक साधारण VS Code एक्सटेंशन से कहीं अधिक है। यह एक सच्चा स्वतंत्र कोडिंग एजेंट है जो आपके काम में आपकी मदद करता है। कल्पना कीजिए एक AI सहपाठी की जो सक्षम हो:

  • स्वाभाविक भाषा में संवाद करना।
  • आपके वर्कस्पेस में सीधे फाइलों को पढ़ना और लिखना।
  • टर्मिनल कमांड्स चलाना।
  • विभिन्न API (OpenAI, Google Gemini, आदि) के साथ एकीकृत होना।
  • “कस्टम मोड्स” के माध्यम से अपनी “व्यक्तित्व” को अनुकूलित करना।

Babel Fish AI को विकसित करने के लिए, मैंने Roo Code का एक ऑर्केस्ट्रा कंडक्टर की तरह उपयोग किया, जिसने विभिन्न AI को एक्सटेंशन के निर्माण में सहयोग करने के लिए मार्गदर्शित किया।

3.2. एक अनूठे प्रोजेक्ट के लिए AI का पैनल

मैंने विभिन्न AI का एक वास्तविक पैनल बुलाया, जिनमें से प्रत्येक की अपनी ताकत और कमजोरियाँ थीं:

  • o3-mini, Claude 3.5 Sonnet, Gemini (exp 1206, 1.5 pro exp 0827, Flash Think), GPT-4o : ये मॉडल मेरे मुख्य सहयोगी रहे, और प्रत्येक ने अपना योगदान दिया।
  • Gemini (मुफ्त मॉडल) : इनकी मुफ्त उपलब्धता एक बड़ा लाभ रही, भले ही मुझे कोटा के साथ जूझना पड़ा (सौभाग्य से, Roo Code विफलताओं की स्थिति में बार-बार प्रयासों का प्रबंधन करता है!)।

3.3. बाधाओं को पार करना: चुनौतियों भरी यात्रा (और समाधान भी!)

डेवलपमेंट की राह आसान नहीं थी। मुझे कई चुनौतियों का सामना करना पड़ा, जैसे:

  • माइक्रोफोन एक्सेस और अनुमतियाँ : शुरुआत में, माइक्रोफोन एक्सेस की अनुमति प्राप्त करना असंभव था! AI इस बात पर जोर दे रहे थे कि “माइक्रोफोन” की अनुमति जो Chrome के Manifest V3 में नहीं है, जोड़ी जानी चाहिए। मुझे आधिकारिक दस्तावेज़ीकरण में गहराई से जाना पड़ा और उसे Claude 3.5 Sonnet को देना पड़ा ताकि वह समाधान खोज सके।

  • API कुंजी का सुरक्षित भंडारण : एक और समस्या यह थी कि Chrome में OpenAI की API कुंजी को सुरक्षित रूप से कैसे स्टोर और पुनःप्राप्त किया जाए? मैंने आधिकारिक दस्तावेज़ीकरण Gemini को प्रदान किया, जिसने मुझे Chrome स्टोरेज के साथ इंटरैक्ट करने के लिए उचित कोड प्रस्तावित किया।

3.4. सहयोग और प्रयोग: सफलता की कुंजी

मैंने विकल्पों और स्थानीयकरण के लिए लगभग सभी AI का उपयोग किया, और साथ ही Roo Code का परीक्षण भी किया।

इन विशिष्ट चुनौतियों के अलावा, मैंने यह भी किया:

  • वास्तविक परिस्थितियों में Roo Code का परीक्षण करना : Babel Fish AI का विकास इस वादे वाले टूल का परीक्षण करने का अवसर भी था।
  • आइकन और पृष्ठभूमि चित्र का निर्माण : DALL-E 3 (जो OpenAI में एकीकृत है) की मदद से, मैंने एक्सटेंशन के लिए एक अनूठी विज़ुअल पहचान बनाई।
  • स्टेटस बैनर को अनुकूलित करना : मैंने GIMP का उपयोग करके छवि से रंग निकाले, फिर AI से बैनर के रंगों को सेट करने वाले विकल्पों का कोड बनाने के लिए अनुरोध किया।
  • इंटरफ़ेस का विभिन्न भाषाओं में अनुवाद करना : मैंने Roo Code के माध्यम से _locales फाइलें जनरेट करने और विकल्पों का अनुवाद विभिन्न भाषाओं में करने के लिए AI की शक्ति का उपयोग किया, जिससे काफी समय बचा।
  • ड्रॉपडाउन मेनू का निर्माण : AI ने सब कुछ जनरेट कर दिया, जिससे अत्यधिक समय की बचत हुई।
  • विकल्पों के HTML रेंडरिंग का प्रबंधन : AI के साथ समन्वय में।

3.5. सामने आई कठिनाइयाँ

  • Google Chat के लिए एक iframe में टेक्स्ट इंजेक्शन की समस्या: एक अपवाद जोड़ा गया, और मैंने डिफ़ॉल्ट पॉप-अप छोड़ दिया।
  • विशेषज्ञ मोड और अनुमतियाँ: API URLs को बदलने की अनुमति देने के लिए, मुझे manifest में सभी होस्ट्स को अनुमति देनी पड़ी। यह लगता है कि Chrome के कठोर ब्राउज़िंग मोड के साथ समस्या पैदा करता है, और फिलहाल मुझे इसका कोई समाधान नहीं दिख रहा (यदि किसी के पास कोई विचार हो, तो मैं सुनने को तैयार हूँ!)।

4. Babel Fish AI क्यों? एक आवश्यकता से जन्मा एक्सटेंशन

तकनीकी विवरण में जाने से पहले, यह समझना महत्वपूर्ण है कि मैंने Babel Fish AI क्यों बनाया। यह सभी एक व्यक्तिगत आवश्यकता से शुरू हुआ था:

  • लंबे प्रॉम्प्ट टाइप करने से त्रासदी : मैं चाह रहा था कि मैं AI से अधिक प्राकृतिक तरीके से संवाद कर सकूँ, सीधे उनसे बात करके।
  • असंतोषजनक ट्रांसक्रिप्शन : जिन ट्रांसक्रिप्शन एक्सटेंशन का मैंने परीक्षण किया था, वे निराशाजनक थे।
  • पारदर्शिता की इच्छा : मैं एक ऐसा ओपन सोर्स एक्सटेंशन चाहता था, जिसमें न तो विज्ञापन हों और इसका कोड मेरे नियंत्रण में हो।

इस प्रकार, Babel Fish AI मेरी अपनी आवश्यकताओं के अनुरूप एक ऐसा उपकरण बनाने की विचारधारा से जन्मा, साथ ही समुदाय के लिए भी उपयोगी साबित हो।

5. कोड और तकनीकी विवरण पर नज़र

Babel Fish AI एक विशिष्ट Chrome एक्सटेंशन आर्किटेक्चर पर आधारित है, जिसमें OpenAI API के उपयोग से जुड़ी कुछ विशेषताएँ शामिल हैं।

यहाँ मुख्य घटकों का एक अवलोकन प्रस्तुत है:

5.1. सामान्य संरचना

यह एक्सटेंशन कई JavaScript फ़ाइलों से मिलकर बना है जो एक-दूसरे के साथ इंटरैक्ट करती हैं:

  • manifest.json: एक्सटेंशन की मुख्य कॉन्फ़िगरेशन फ़ाइल। यह अनुमतियाँ, स्क्रिप्ट, उपलब्ध संसाधन आदि को परिभाषित करती है।
  • background.js: वह सर्विस वर्कर जो बैकग्राउंड में चलता है। यह घटनाओं (आइकन पर क्लिक, कीबोर्ड शॉर्टकट्स) का प्रबंधन करता है, आवश्यकतानुसार content script इंजेक्ट करता है, और content script के साथ संवाद करता है।
  • content.js: वह स्क्रिप्ट जो वेब पेजों में इंजेक्ट की जाती है। यह सीधे DOM के साथ इंटरैक्ट करता है, माइक्रोफोन से ऑडियो कैप्चर करता है, ट्रांसक्रिप्शन और अनुवाद API को कॉल करता है, और परिणाम प्रदर्शित करता है।
  • src/utils/api.js: OpenAI के Whisper API (ट्रांसक्रिप्शन) को कॉल करने के लिए फ़ंक्शन्स रखता है।
  • src/utils/translation.js: OpenAI के GPT API (अनुवाद) को कॉल करने के लिए फ़ंक्शन्स रखता है।
  • src/utils/ui.js: उपयोगकर्ता इंटरफ़ेस (बैनर, डायलॉग बॉक्स, कॉपी बटन) को प्रबंधित करने के लिए उपयोगी फ़ंक्शन्स प्रदान करता है।
  • src/constants.js: कॉन्फ़िगरेशन, अवस्थाएँ, क्रियाओं आदि के लिए स्थिरांक निर्धारित करता है।
  • src/pages/options/: एक्सटेंशन के विकल्प पृष्ठ (HTML, CSS, JavaScript) के लिए फ़ाइलें रखता है।

5.2. manifest.json

manifest.json फ़ाइल Manifest संस्करण 3 का उपयोग करती है। यह निम्नलिखित अनुमतियों को घोषित करती है:

  • activeTab : सक्रिय टैब तक पहुंच के लिए।
  • storage: API कुंजी और एक्सटेंशन विकल्पों को स्टोर करने के लिए।
  • commands: कीबोर्ड शॉर्टकट्स को परिभाषित करने के लिए।
  • scripting: content script इंजेक्ट करने के लिए।
  • host_permissions: https://api.openai.com/* API कॉल्स के लिए, और https://*/* जो विशेषज्ञ मोड में उपयोगकर्ता को कस्टम API URLs निर्दिष्ट करने की अनुमति देने के लिए आवश्यक है।

content_scripts सभी URLs (<all_urls>) में इंजेक्ट किए जाते हैं और दस्तावेज़ के लोड खत्म होने पर ("run_at": "document_end") निष्पादित होते हैं। background script को module प्रकार के सेवा कार्यकर्ता ("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 एक्सटेंशन का दिल है। यह निम्नलिखित कार्य करता है:

  • प्रारंभिक सेटअप : Chrome स्टोरेज से API कुंजी और बैनर के रंग विकल्पों को इनिशियलाइज़ करता है।
  • ऑडियो कैप्चर : navigator.mediaDevices.getUserMedia API का उपयोग करके माइक्रोफोन से ऑडियो एक्सेस करता है और रिकॉर्ड करता है।
  • ट्रांसक्रिप्शन : OpenAI के Whisper API को ऑडियो भेजने के लिए transcribeAudio (src/utils/api.js) फ़ंक्शन का उपयोग करता है और ट्रांसक्रिप्शन प्राप्त करता है।
  • (वैकल्पिक) अनुवाद : यदि अनुवाद विकल्प सक्रिय है, तो यह OpenAI के GPT API के लिए ट्रांसक्रिप्शन भेजने हेतु translateText (src/utils/translation.js) फ़ंक्शन का उपयोग करता है और अनुवाद प्राप्त करता है।
  • प्रदर्शन : ट्रांसक्रिप्शन (और यदि लागू हो तो अनुवाद) को पृष्ठ के सक्रिय इनपुट क्षेत्र (यदि यह एक टेक्स्ट फ़ील्ड या संक्षेपण योग्य तत्व है) में या डायलॉग बॉक्स में प्रदर्शित करता है।
  • बैनर प्रबंधन : पृष्ठ के शीर्ष पर एक स्टेटस बैनर प्रदर्शित करता है ताकि रिकॉर्डिंग की स्थिति या त्रुटि संदेश दिख सके।
  • background script के साथ संवाद : रिकॉर्डिंग की शुरुआत, अंत या किसी त्रुटि की सूचना के लिए background script को संदेश भेजता है।
  • विकल्प परिवर्तनों की निगरानी : एक्सटेंशन विकल्पों में बदलाव होने पर उसे सुनता है और उसके अनुसार डिस्प्ले अपडेट करता है।

5.5. संवाद

background script और content script के बीच संवाद Chrome की मैसेजिंग API (chrome.runtime.sendMessage और chrome.runtime.onMessage) के माध्यम से होता है।

5.6. API

एक्सटेंशन OpenAI के दो API का उपयोग करता है:

  • Whisper : आवाज ट्रांसक्रिप्शन के लिए। डिफ़ॉल्ट URL है https://api.openai.com/v1/audio/transcriptions, और उपयोग किया गया मॉडल है whisper-1।
  • GPT : (वैकल्पिक) अनुवाद के लिए। डिफ़ॉल्ट URL है https://api.openai.com/v1/chat/completions, और उपयोग किया गया मॉडल है gpt-4o-mini।

API URLs को एक्सटेंशन के विकल्प (विशेषज्ञ मोड) में बदला जा सकता है।

5.7. स्टोरेज

एक्सटेंशन chrome.storage.sync का उपयोग करके स्टोर करता है:

  • OpenAI API कुंजी (apiKey)।
  • एक्सटेंशन के विकल्प (प्रदर्शन, अनुवाद, बैनर के रंग आदि)।

5.8. उपयोगकर्ता इंटरफ़ेस

एक्सटेंशन का यूज़र इंटरफ़ेस src/utils/ui.js और content.js में कई फ़ंक्शन्स द्वारा नियंत्रित किया जाता है:

  • बैनर : एक स्टेटस बैनर पृष्ठ के शीर्ष पर प्रदर्शित किया जाता है ताकि रिकॉर्डिंग की स्थिति या त्रुटि संदेश दिखाए जा सकें। बैनर का रंग और अपारदर्शिता अनुकूलन योग्य हैं।
  • डायलॉग बॉक्स : ट्रांसक्रिप्शन (और अनुवाद) को डायलॉग बॉक्स में प्रदर्शित किया जा सकता है। डिस्प्ले अवधि अनुकूलन योग्य है।
  • कॉपी बटन : एक कॉपी बटन डायलॉग बॉक्स में जोड़ा जाता है ताकि ट्रांसक्रिप्ट किए गए टेक्स्ट को आसानी से कॉपी किया जा सके।

5.9. त्रुटि प्रबंधन

त्रुटियों का केंद्रीकृत रूप से प्रबंधन किया जाता है। त्रुटि संदेश src/constants.js (ERRORS ऑब्जेक्ट) में परिभाषित किए गए हैं। त्रुटियाँ उपयोगकर्ता को स्टेटस बैनर के माध्यम से प्रदर्शित की जाती हैं।

6. संसाधन

7. निष्कर्ष

Babel Fish AI एक पूर्ण समाधान प्रदान करता है जो सटीक वॉयस ट्रांसक्रिप्शन और एक वैकल्पिक अनुवाद सुविधाएं देता है, साथ ही एक सहज इंटरफ़ेस और मजबूत सुरक्षा की गारंटी देता है। इस एक्सटेंशन की मदद से, आवाज से टेक्स्ट में परिवर्तन का अनुभव बेहतर हो जाता है और भाषा संबंधी बाधाएँ दूर हो जाती हैं। Chrome Web Store पर Babel Fish AI का परीक्षण करें और देखें कि यह आपके संचार को कैसे बदल सकता है।

आपकी पढ़ाई के लिए धन्यवाद, और Babel Fish AI का शुभ उपयोग करें!

यह दस्तावेज़ फ्र से hi भाषा में अनुवादित किया गया है o3-mini मॉडल का उपयोग करके. अनुवाद प्रक्रिया के बारे में अधिक जानकारी के लिए, https://gitlab.com/jls42/ai-powered-markdown-translator देखें