Szukaj
blogia

Premiera Babel Fish AI : rozszerzenie Chrome do transkrypcji i tłumaczenia mowy

jls /
Transcription Traduction IA Extension Chrome Innovation Multilangue
Premiera Babel Fish AI : rozszerzenie Chrome do transkrypcji i tłumaczenia mowy

Babel Fish AI, projekt osobisty, to innowacyjne rozszerzenie Chrome, które przekształca mowę w tekst z wyjątkową precyzją, oferując jednocześnie opcję automatycznego tłumaczenia. Zaprojektowane, by być niezawodne i bez reklam, dostarcza wysokiej jakości transkrypcję głosu za pośrednictwem API Whisper od OpenAI. Stworzyłem to rozszerzenie częściowo z potrzeby osobistej: uproszczenia komunikacji z SI poprzez dyktowanie zapytań. Możesz używać go wyłącznie do transkrypcji lub włączyć tłumaczenie, aby ułatwić komunikację wielojęzyczną. To była też idealna okazja, by przetestować Roo Code, narzędzie do wspomaganego przez SI rozwoju.

1. Prezentacja

Babel Fish AI to projekt osobisty, rozwijany przy wsparciu SI takich jak Claude, Gemini i OpenAI za pośrednictwem Roo Code. Dzięki intuicyjnemu interfejsowi i konfigurowalnym ustawieniom, Babel Fish AI umożliwia uzyskanie szybkiej i precyzyjnej transkrypcji, z opcją natychmiastowego tłumaczenia, by pokonać bariery językowe.

2. Funkcje i opcje

  • Zaawansowana transkrypcja mowy :

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

  • Opcjonalne automatyczne tłumaczenie :

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

  • Pełne wsparcie wielojęzyczne : Babel Fish AI przetwarza wejście głosowe i wyświetla tekst w różnych językach, co rozszerza jego zastosowanie międzynarodowe.
    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 konfigurowalny interfejs :

    • Wybór między wstawianiem do aktywnego pola tekstowego a wyświetlaniem w oknie dialogowym.
    • Personalizowany pasek stanu (kolor, przezroczystość, czas trwania) zapewniający natychmiastową informację zwrotną.

  • Opcje zaawansowane :

    • Tryb eksperta oferujący szczegółową konfigurację (adresy URL API, parametry per domena itd.).
    • Ustawienia rozszerzenia dostępne przez wygodną stronę opcji.

3. Za kulisami rozwoju: moja przygoda z SI i Roo Code

Babel Fish AI to nie tylko rozszerzenie Chrome — to także efekt pasjonujących eksperymentów z sztuczną inteligencją i innowacyjnym narzędziem: Roo Code.

Opowiem, jak zamieniłem pomysł w rzeczywistość, korzystając z mocy kilku modeli SI i unikalnego środowiska deweloperskiego.

3.1. Roo Code: mój towarzysz programowania z SI

Roo Code to coś więcej niż zwykłe rozszerzenie VS Code. To prawdziwy autonomiczny agent kodowania, który wspiera pracę. Wyobraź sobie pilota SI, który potrafi:

  • Komunikować się w języku naturalnym.
  • Czytać i zapisywać pliki bezpośrednio w twoim obszarze roboczym.
  • Uruchamiać polecenia terminala.
  • Integruje się z różnymi API (OpenAI, Google Gemini itp.).
  • Dostosowywać swoją “osobowość” dzięki “trybom spersonalizowanym”.

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

3.2. Obsada SI w unikalnym projekcie

Zwróciłem się do prawdziwego panelu SI, każda z nich z własnymi mocnymi i słabymi stronami:

  • 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 wniósł coś istotnego.
  • Gemini (modele darmowe): Ich bezpłatność była dużym atutem, choć musiałem żonglować limitami (na szczęście Roo Code automatycznie obsługuje powtórne próby w razie niepowodzenia!).

3.3. Pokonywanie przeszkód: droga pełna wyzwań (i rozwiązań!)

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

  • Dostęp do mikrofonu i uprawnienia: Na początku niemożliwe było uzyskanie zgody na dostęp do mikrofonu! Modele SI nalegały na dodanie uprawnienia “microphone”, które nie istnieje w Manifeście V3 Chrome. Musiałem zagłębić się w oficjalną dokumentację i przekazać ją Claude 3.5 Sonnet, aby znalazł rozwiązanie.

  • Bezpieczne przechowywanie klucza API: Kolejna łamigłówka: jak bezpiecznie przechowywać i pobierać klucz API OpenAI w Chrome? Przekazałem dokumentację Gemini, który zaproponował odpowiedni kod do interakcji z magazynem Chrome.

3.4. Współpraca i eksperymentowanie: klucz do sukcesu

Korzystałem z wielu SI do opcji i lokalizacji, i chciałem przetestować Roo Code.

Poza wymienionymi wyzwaniami udało mi się:

  • Przetestować Roo Code w realnych warunkach: Rozwój Babel Fish AI był także okazją, by sprawdzić to obiecujące narzędzie.
  • Wygenerować ikonę i grafikę tła: Dzięki DALL-E 3 (zintegrowanemu z OpenAI) stworzyłem unikalną tożsamość wizualną rozszerzenia.
  • Spersonalizować pasek statusu: Użyłem GIMP-a do wydobycia kolorów z obrazu, a potem poprosiłem SI o zakodowanie części opcji umożliwiającej konfigurację kolorów paska.
  • Przetłumaczyć interfejs na wiele języków: Wykorzystałem moc SI przez Roo Code, aby wygenerować pliki lokalizacyjne (_locales) i przetłumaczyć opcje na liczne języki — ogromna oszczędność czasu!
  • Utworzyć menu rozwijane: SI wygenerowała wszystko, co znacząco przyspieszyło pracę.
  • Zarządzać renderowaniem HTML opcji: we współpracy z SI.

3.5 Trudności napotkane

  • Problem z wstrzykiwaniem tekstu do iframe dla Google Chat: dodano wyjątek i zostawiłem domyślne okienko pop-up.
  • Tryb eksperta i uprawnienia: Aby umożliwić zmianę adresów URL API, musiałem zezwolić na wszystkie hosty w manifeście. Wygląda to na problem z zaostrzoną nawigacją Chrome i na razie nie widzę rozwiązania (jeśli ktoś ma pomysł, chętnie skorzystam!).

4. Dlaczego Babel Fish AI? Rozszerzenie powstałe z potrzeby

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

  • Zmęczenie pisaniem długich promptów: Chciałem móc komunikować się z SI w bardziej naturalny sposób, mówiąc do nich bezpośrednio.
  • Słabe transkrypcje: Rozszerzenia do transkrypcji, które testowałem, były rozczarowujące.
  • Chęć przejrzystości: Chciałem rozszerzenia open source, bez reklam i którego kod dobrze znam.

Babel Fish AI powstało więc z potrzeby stworzenia narzędzia odpowiadającego moim własnym wymaganiom, a jednocześnie przydatnego dla społeczności.

5. Zbliżenie na kod i szczegóły techniczne

Babel Fish AI opiera się na typowej architekturze rozszerzenia Chrome, z kilkoma specyfikami związanymi z użyciem 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ółpracują ze sobą:

  • manifest.json : Główny plik konfiguracyjny rozszerzenia. Definiuje uprawnienia, skrypty, zasoby dostępne itd.
  • background.js : Service worker działający w tle. Zarządza zdarzeniami (kliknięcie ikony, skróty klawiaturowe), wstrzykuje content script jeśli to konieczne i komunikuje się z content script.
  • content.js : Skrypt wstrzykiwany na strony. Interaguje bezpośrednio z DOM, przechwytuje audio z mikrofonu, wywołuje API transkrypcji i tłumaczenia oraz wyświetla wyniki.
  • src/utils/api.js : Zawiera funkcje wywołujące API Whisper od OpenAI (transkrypcja).
  • src/utils/translation.js : Zawiera funkcje wywołujące API GPT od OpenAI (tłumaczenie).
  • src/utils/ui.js : Zawiera funkcje pomocnicze do obsługi interfejsu (pasek, okno dialogowe, przycisk kopiowania).
  • src/constants.js : Definiuje stałe dla konfiguracji, stanów, akcji itd.
  • src/pages/options/ : Zawiera pliki dla strony opcji rozszerzenia (HTML, CSS, JavaScript).

5.2. manifest.json

Plik manifest.json używa wersji 3 manifestu. Deklaruje następujące uprawnienia:

  • activeTab : Aby uzyskać dostęp do aktywnej karty.
  • storage: Aby przechowywać klucz API i opcje rozszerzenia.
  • commands: Aby definiować skróty klawiaturowe.
  • scripting: Aby wstrzykiwać content script.
  • host_permissions: https://api.openai.com/* dla wywołań API oraz https://*/*, który jest konieczny w trybie eksperta, aby umożliwić użytkownikowi określenie niestandardowych URL-i API.

content_scripts są wstrzykiwane na wszystkie adresy URL (<all_urls>) i uruchamiają się po załadowaniu dokumentu ("run_at": "document_end"). background script jest zadeklarowany jako service worker typu modułu ("type": "module").

5.3. background.js

background script pełni kilka ról:

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

5.4. content.js

content script to serce rozszerzenia. Wykonuje następujące zadania:

  • Inicjalizacja: Inicjalizuje klucz API i opcje koloru paska ze storage Chrome.
  • Przechwytywanie audio: Używa API navigator.mediaDevices.getUserMedia do dostępu do mikrofonu i nagrywania dźwięku.
  • Transkrypcja: Wykorzystuje funkcję transcribeAudio (src/utils/api.js) do wysyłania audio do API Whisper od OpenAI i uzyskania transkrypcji.
  • Tłumaczenie (opcjonalne): Jeśli opcja tłumaczenia jest włączona, używa funkcji translateText (src/utils/translation.js) do wysłania przetranskrybowanego tekstu do API GPT od OpenAI w celu uzyskania tłumaczenia.
  • Wyświetlanie: Wyświetla transkrypcję (i tłumaczenie, jeśli dotyczy) albo w aktywnym elemencie strony (jeśli to pole tekstowe lub element edytowalny), albo w oknie dialogowym.
  • Zarządzanie paskiem: Wyświetla pasek stanu u góry strony, aby wskazać stan nagrywania lub pokazać komunikaty o błędach.
  • Komunikacja z background script: Wysyła wiadomości do background script informujące o rozpoczęciu, zakończeniu lub błędzie nagrywania.
  • Nasłuch zmian opcji: Reaguje na zmiany w opcjach rozszerzenia i aktualizuje wyświetlanie odpowiednio.

5.5. Komunikacja

Komunikacja między background script i content script odbywa się za pomocą API wiadomości Chrome (chrome.runtime.sendMessage i chrome.runtime.onMessage).

5.6. API

Rozszerzenie korzysta z dwóch 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.

Adresy URL API można zmienić w opcjach rozszerzenia (tryb eksperta).

5.7. Przechowywanie

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

  • Klucza API OpenAI (apiKey).
  • Ustawień rozszerzenia (wyświetlanie, tłumaczenie, kolory paska itd.).

5.8. Interfejs użytkownika

Interfejs użytkownika rozszerzenia jest obsługiwany przez kilka funkcji w src/utils/ui.js i content.js:

  • Pasek stanu : Pasek informujący o stanie nagrywania lub pokazujący komunikaty o błędach jest wyświetlany u góry strony. Kolor i przezroczystość paska są konfigurowalne.
  • Okno dialogowe : Transkrypcja (i tłumaczenie) mogą być pokazane w oknie dialogowym. Czas wyświetlania można dostosować.
  • Przycisk kopiowania : Do okna dialogowego dodany jest przycisk kopiowania, aby łatwo skopiować przetranskrybowany tekst.

5.9. Obsługa błędów

Błędy są obsługiwane centralnie. Komunikaty o błędach są zdefiniowane w src/constants.js (obiekt ERRORS). Błędy są wyświetlane użytkownikowi za pomocą paska stanu.

6. Zasoby

7. Zakończenie

Babel Fish AI oferuje kompleksowe rozwiązanie do precyzyjnej transkrypcji głosu i opcjonalnego tłumaczenia, zapewniając jednocześnie intuicyjny interfejs i zwiększone bezpieczeństwo. Dzięki temu rozszerzeniu doświadczenie konwersji głosu na tekst jest zoptymalizowane, a bariera językowa zniknęła. Wypróbuj Babel Fish AI w Chrome Web Store i przekonaj się, jak może zmienić twoją komunikację.

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

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