Uruchomienie Babel Fish AI: Rozszerzenie Chrome do Transkrypcji i Tłumaczenia Mowy

Jls -

Babel Fish AI, projekt osobisty, to nowatorskie rozszerzenie Chrome, które przekształca mowę na tekst z wyjątkową precyzją, oferując jednocześnie możliwość automatycznego tłumaczenia. Zaprojektowane tak, aby było niezawodne i wolne od reklam, zapewnia wysokiej jakości transkrypcję głosową dzięki API Whisper firmy OpenAI. Stworzyłem to rozszerzenie częściowo, aby odpowiedzieć na osobistą potrzebę: uproszczenie komunikacji z AI poprzez dyktowanie moich zapytań. Możesz korzystać z niego wyłącznie do transkrypcji lub aktywować tłumaczenie, aby ułatwić komunikację wielojęzyczną. Była to również idealna okazja do przetestowania Roo Code, narzędzia wspomaganego przez AI.

1. Prezentacja

Babel Fish AI to projekt osobisty, rozwijany przy wsparciu AI takich jak Claude, Gemini i OpenAI za pośrednictwem Roo Code. Dzięki intuicyjnemu interfejsowi oraz możliwości dostosowania konfiguracji, Babel Fish AI umożliwia uzyskanie szybkiej i precyzyjnej transkrypcji, z opcją natychmiastowego tłumaczenia, pomagając przełamać bariery językowe.

2. Funkcje i Opcje

  • Zaawansowana Transkrypcja Mowy:

    • Nagrywanie dźwięku w wysokiej jakości za pomocą mikrofonu.
    • Transkrypcja wykonywana przez API Whisper firmy OpenAI, z automatycznym wstawieniem do aktywnego pola lub wyświetleniem w oknie dialogowym.

  • Opcjonalne Automatyczne Tłumaczenie:

    • Szybkie i wierne tłumaczenie transkrybowanego tekstu, aktywowane w razie potrzeby.
    • Możliwość korzystania z rozszerzenia wyłącznie do transkrypcji.

  • Pełne Wsparcie Wielojęzyczne: Babel Fish AI przetwarza mowę i wyświetla tekst w różnych językach, co zwiększa jego międzynarodowe zastosowanie.
    Obsługiwane języki: 🇸🇦 Arabski, 🇩🇪 Niemiecki, 🇺🇸 Angielski, 🇪🇸 Hiszpański, 🇫🇷 Francuski, 🇮🇳 Hindi, 🇮🇹 Włoski, 🇯🇵 Japoński, 🇰🇷 Koreański, 🇳🇱 Niderlandzki, 🇵🇱 Polski, 🇵🇹 Portugalski, 🇷🇴 Rumuński, 🇸🇪 Szwedzki, 🇨🇳 Chiński.

  • Intuicyjny i Personalizowany Interfejs:

    • Wybór między wyświetlaniem w aktywnym polu tekstowym a oknem dialogowym.
    • Pasek statusu, który można dostosować (kolor, przezroczystość, czas wyświetlania) dla szybkiej wizualnej informacji zwrotnej.

  • Zaawansowane Opcje:

    • Tryb ekspercki oferujący szczegółową konfigurację (URL-e API, parametry dla poszczególnych domen itp.).
    • Ustawienia rozszerzenia dostępne poprzez przyjazną stronę opcji.

3. Za kulisami Rozwoju: Moja Przygoda z AI i Roo Code

Babel Fish AI to nie tylko rozszerzenie Chrome, ale również owoc pasjonujących eksperymentów z sztuczną inteligencją i innowacyjnym narzędziem: Roo Code.

Pozwól, że opowiem Ci, jak przekształciłem pomysł w rzeczywistość, opierając się na sile kilku AI oraz unikalnym środowisku programistycznym.

3.1. Roo Code: Mój Towarzysz w Programowaniu z AI

Roo Code to znacznie więcej niż tylko rozszerzenie VS Code. To prawdziwy autonomiczny agent programistyczny, który wspiera Cię w Twojej pracy. Wyobraź sobie pomocnika AI, który potrafi:

  • Komunikować się w języku naturalnym.
  • Odczytywać i zapisywać pliki bezpośrednio w Twojej przestrzeni roboczej.
  • Wykonywać polecenia terminala.
  • Integrację z różnymi API (OpenAI, Google Gemini itp.).
  • Dostosowywać swoją “osobowość” dzięki “trybom personalizowanym”.

Do tworzenia Babel Fish AI użyłem Roo Code jak dyrygenta, kierując różnymi AI, aby współpracowały przy tworzeniu rozszerzenia.

3.2. Zespół AI dla Unikalnego Projektu

Skorzystałem z prawdziwego panelu AI, z których każda miała swoje mocne i słabe strony:

  • o3-mini, Claude 3.5 Sonnet, Gemini (exp 1206, 1.5 pro exp 0827, Flash Think), GPT-4o : Te modele były moimi głównymi współpracownikami, każdy dodając swoją cegiełkę do budowli.
  • Gemini (modele darmowe) : Ich bezpłatność była ogromnym atutem, mimo że musiałem radzić sobie z limitami (na szczęście, Roo Code obsługuje powtarzanie prób w razie niepowodzenia!).

3.3. Pokonywanie Przeszkód: Droga Pełna Trudności (i Rozwiązań!)

Rozwój nie był usłany różami. Napotkałem na kilka wyzwań, w tym:

  • Dostęp do Mikrofonu i Uprawnienia: Na początku nie udało się uzyskać zgody na dostęp do mikrofonu! AI nalegały, aby dodać uprawnienie “microphone”, które nie istnieje w Manifeście V3 dla Chrome. Musiałem zagłębić się w dokumentację oficjalną i przekazać ją do Claude 3.5 Sonnet, aby znalazł rozwiązanie.

  • Bezpieczne Przechowywanie Klucza API: Kolejna zagwozdka: jak bezpiecznie przechowywać i pobierać klucz API OpenAI w Chrome? Przekazałem oficjalną dokumentację do Gemini, który zdołał zaproponować mi odpowiedni kod do interakcji z przechowywaniem w Chrome.

3.4. Współpraca i Eksperymentowanie: Klucz do Sukcesu

Używałem różnych AI do opcji i lokalizacji, a także chciałem przetestować Roo Code.

Oprócz specyficznych wyzwań, udało mi się:

  • Przetestować Roo Code w Warunkach Rzeczywistych: Rozwój Babel Fish AI był również okazją do sprawdzenia tego obiecującego narzędzia.
  • Wygenerować ikonę i tło: Dzięki DALL-E 3 (zintegrowanemu z OpenAI) udało mi się stworzyć unikalną tożsamość wizualną dla rozszerzenia.
  • Dostosować Pasek Wyświetlania: Użyłem GIMP-a, aby wyodrębnić kolory z obrazu, a następnie poprosiłem AI o napisanie części opcji umożliwiającej konfigurację kolorów paska.
  • Przetłumaczyć Interfejs na Wiele Języków: Wykorzystałem siłę AI poprzez Roo Code do wygenerowania plików lokalizacyjnych (_locales) i przetłumaczenia opcji na wiele języków, co zaoszczędziło mnóstwo czasu!
  • Stworzenie menu rozwijanych: AI wygenerowało wszystko, co przyniosło ogromną oszczędność czasu.
  • Zarządzanie renderowaniem HTML opcji: We współpracy z AI.

3.5 Napotkane Trudności

  • Problem z wstrzykiwaniem tekstu do iframe w Google Chat: Dodano wyjątek i pozostawiłem domyślne okienko dialogowe.
  • Tryb Ekspert i uprawnienia: Aby umożliwić zmianę URL-i API, musiałem autoryzować wszystkie hosty w manifeście. Wydaje się, że sprawia to problem z wzmocnioną nawigacją w Chrome i na razie nie widzę rozwiązania (jeśli ktoś ma pomysł, proszę daj znać!).

4. Dlaczego Babel Fish AI? Rozszerzenie zrodzone z Potrzeby

Zanim przejdziemy do technicznych szczegółów, ważne jest zrozumienie, dlaczego stworzyłem Babel Fish AI. Wszystko zaczęło się od osobistej potrzeby:

  • Męczliwość pisania długich promptów: Chciałem móc komunikować się z AI w sposób bardziej naturalny, mówiąc do nich bezpośrednio.
  • Przeciętne transkrypcje: Rozszerzenia do transkrypcji, które testowałem, były rozczarowujące.
  • Dążenie do przejrzystości: Chciałem, aby rozszerzenie było open source, bez reklam i z pełną kontrolą nad kodem.

Babel Fish AI powstało z chęci stworzenia narzędzia, które odpowiadałoby na moje własne potrzeby, a jednocześnie byłoby przydatne dla społeczności.

5. Przybliżenie Kodu i Szczegóły Techniczne

Babel Fish AI zbudowane jest na typowej architekturze rozszerzenia Chrome, z kilkoma specyficznymi elementami związanymi z wykorzystaniem API OpenAI.

Oto przegląd głównych komponentów:

5.1. Ogólna Architektura

Rozszerzenie składa się z kilku plików JavaScript, które współdziałają ze sobą:

  • manifest.json: Główny plik konfiguracyjny rozszerzenia. Definiuje uprawnienia, skrypty, dostępne zasoby itp.
  • background.js: Service worker, który działa w tle. Zarządza zdarzeniami (kliknięcie w ikonę, skróty klawiszowe), wstrzykuje content script w razie potrzeby i komunikuje się z content script.
  • content.js: Skrypt wstrzykiwany na strony internetowe. Interaguje bezpośrednio z DOM, nagrywa dźwięk z mikrofonu, wywołuje API transkrypcji i tłumaczenia oraz wyświetla wyniki.
  • src/utils/api.js: Zawiera funkcje do wywoływania API Whisper firmy OpenAI (transkrypcja).
  • src/utils/translation.js: Zawiera funkcje do wywoływania API GPT firmy OpenAI (tłumaczenie).
  • src/utils/ui.js: Zawiera funkcje użytkowe do zarządzania interfejsem użytkownika (baner, okno dialogowe, przycisk kopiowania).
  • src/constants.js: Definiuje stałe używane w konfiguracji, stany, akcje itp.
  • src/pages/options/: Zawiera pliki do strony opcji rozszerzenia (HTML, CSS, JavaScript).

5.2. manifest.json

Plik manifest.json korzysta z wersji 3 manifestu. Deklaruje następujące uprawnienia:

  • activeTab : Dostęp do aktywnej karty.
  • storage: Do przechowywania klucza API oraz opcji rozszerzenia.
  • commands: Do definiowania skrótów klawiszowych.
  • scripting: Do wstrzykiwania content script.
  • host_permissions: https://api.openai.com/* do wywołań API oraz https://*/*, co jest niezbędne w trybie eksperckim, aby umożliwić użytkownikowi określenie własnych URL-i API.

content_scripts są wstrzykiwane we wszystkie adresy URL (<all_urls>) i uruchamiane na końcu ładowania dokumentu ("run_at": "document_end"). Skrypt w tle jest deklarowany jako service worker typu modułowego ("type": "module").

5.3. background.js

Skrypt background.js pełni kilka ról:

  • Wstrzykiwanie content script: Jeśli content script nie został jeszcze wstrzyknięty, background.js wstrzykuje go podczas interakcji (kliknięcie w ikonę lub skrót klawiszowy).
  • Zarządzanie zdarzeniami: Nasłuchuje zdarzeń chrome.runtime.onMessage (wiadomości z content script), chrome.action.onClicked (kliknięcie w ikonę) oraz chrome.commands.onCommand (skróty klawiszowe).
  • Komunikacja z content script: Wysyła wiadomości do content script, aby rozpocząć lub zakończyć nagrywanie ({ action: ACTIONS.TOGGLE }).
  • Aktualizacja ikony: Aktualizuje odznakę ikony rozszerzenia, aby wskazać stan nagrywania (w trakcie, zatrzymane, błąd).

5.4. content.js

Content script jest sercem rozszerzenia. Wykonuje następujące zadania:

  • Inicjalizacja: Inicjuje klucz API oraz opcje kolorów paska z przechowywania Chrome.
  • Nagrywanie dźwięku: Używa API navigator.mediaDevices.getUserMedia, aby uzyskać dostęp do mikrofonu i nagrywać dźwięk.
  • Transkrypcja: Używa funkcji transcribeAudio (src/utils/api.js), aby wysłać dźwięk do API Whisper firmy OpenAI i otrzymać transkrypcję.
  • Tłumaczenie (opcjonalne): Jeśli opcja tłumaczenia jest aktywna, używa funkcji translateText (src/utils/translation.js), aby wysłać przetranskrybowany tekst do API GPT firmy OpenAI i otrzymać tłumaczenie.
  • Wyświetlanie: Wyświetla transkrypcję (oraz tłumaczenie, jeśli dotyczy) albo w aktywnym elemencie strony (jeśli jest to pole tekstowe lub element edytowalny), albo w oknie dialogowym.
  • Zarządzanie banerem: Wyświetla baner statusu na górze strony, aby wskazać stan nagrywania lub wyświetlić komunikaty o błędach.
  • Komunikacja ze background script: Wysyła wiadomości do background script, aby zgłosić rozpoczęcie, zakończenie lub błąd nagrywania.
  • Nasłuchiwanie zmian opcji: Monitoruje zmiany w opcjach rozszerzenia i aktualizuje wyświetlanie zgodnie z nimi.

5.5. Komunikacja

Komunikacja między background script a content script odbywa się za pomocą API komunikacji Chrome (chrome.runtime.sendMessage oraz chrome.runtime.onMessage).

5.6. API

Rozszerzenie wykorzystuje dwa API OpenAI:

  • Whisper : Do transkrypcji mowy. Domyślny URL to https://api.openai.com/v1/audio/transcriptions, a używany model to whisper-1.
  • GPT : Do tłumaczenia (opcjonalnie). Domyślny URL to https://api.openai.com/v1/chat/completions, a używany model to gpt-4o-mini.

URL-e API można zmieniać w opcjach rozszerzenia (tryb ekspercki).

5.7. Przechowywanie

Rozszerzenie używa chrome.storage.sync do przechowywania:

  • Klucza API OpenAI (apiKey).
  • Opcji rozszerzenia (wyświetlanie, tłumaczenie, kolory paska itp.).

5.8. Interfejs Użytkownika

Interfejs użytkownika rozszerzenia jest zarządzany przez kilka funkcji w src/utils/ui.js oraz content.js:

  • Baner: Baner statusu wyświetlany jest na górze strony, aby wskazać stan nagrywania lub wyświetlić komunikaty o błędach. Kolor i przezroczystość banera są konfigurowalne.
  • Okno dialogowe: Transkrypcja (oraz tłumaczenie) mogą być wyświetlane w oknie dialogowym. Czas wyświetlania jest konfigurowalny.
  • Przycisk kopiowania: Przycisk kopiowania jest dodany do okna dialogowego, aby łatwo skopiować przetranskrybowany tekst.

5.9. Zarządzanie Błędami

Błędy są zarządzane centralnie. Komunikaty o błędach są zdefiniowane w src/constants.js (obiekt ERRORS). Błędy są wyświetlane użytkownikowi poprzez baner statusu.

6. Zasoby

7. Podsumowanie

Babel Fish AI oferuje kompleksowe rozwiązanie dla precyzyjnej transkrypcji mowy oraz opcjonalnego tłumaczenia, gwarantując przy tym intuicyjny interfejs i wzmocnione bezpieczeństwo. Dzięki temu rozszerzeniu, doświadczenie przekształcania mowy na tekst jest zoptymalizowane, a bariera językowa zniesiona. Przetestuj Babel Fish AI w Chrome Web Store i odkryj, jak może zmienić Twoją komunikację.

Dziękuję za lekturę i życzę owocnego korzystania z Babel Fish AI!

Ten dokument został przetłumaczony z wersji fr na język pl przy użyciu modelu o3-mini. Aby uzyskać więcej informacji na temat procesu tłumaczenia, odwiedź https://gitlab.com/jls42/ai-powered-markdown-translator