Як створити AI-перекладач у браузері за допомогою Google Gemini та React
Привіт, спільното, я Катя — розробниця в міжнародній IT-компанії ELEKS. Працюю як фулстек з глибоким бекграундом у фронтенді — саме там я провела більшість із понад 13 років у веброзробці. Останнім часом мене все більше захоплює штучний інтелект: я поступово вивчаю AI-технології через практичні проєкти, особливо на хакатонах, де є можливість швидко тестувати ідеї й будувати живі прототипи. Це новий, дуже динамічний напрям для мене, і щоразу він відкриває нові горизонти — від промптінгу до інтеграції LLM у реальні UI-застосунки.
У попередній статті я розповідала, як ми з чоловіком створили AI-агента, який працює з базою даних: аналізує запити, генерує англомовні відповіді та використовує LangGraph, Gemini API та SQLite. Це був серйозний і комплексний проєкт, який потребував чіткого розуміння як бекенду, так і LLM.
Але я часто чую запитання: «З чого почати?», «Як спробувати AI, якщо ти звичайний розробник без досвіду в ML?». Тому цього разу — без графів, баз даних і складної логіки. Я вирішила зробити крок назад і показати, як побудувати максимально простий, але корисний AI-застосунок — перекладач, який працює прямо в браузері.
Жодного бекенду. Жодної бази. Лише React, Google Gemini API, голосовий ввід/вивід і трохи UI.
Якщо ви тільки починаєте знайомство з LLM або хочете спробувати інтегрувати AI у власний проєкт — ця стаття саме для вас. Я покажу все покроково: як отримати API-ключ, як скласти промпт, як відправити запит до моделі та вивести результат у застосунку. Стек — простий. Код — живий. Магії — нуль. Усе зрозуміло і прозоро.
Що ми будемо будувати
У цій статті ми крок за кроком створимо простий, але водночас потужний AI-перекладач, який працюватиме повністю у браузері — без серверів, баз даних і складного бекенд-коду.
Що вміє цей застосунок?
- Вводиш текст або говориш в мікрофон. Можна просто набрати фразу або продиктувати її голосом — як тобі зручніше.
- Переклад майже миттєвий. Текст відправляється в модель Gemini, і вона одразу повертає переклад.
- Озвучення перекладу. Можна не тільки прочитати, а й послухати переклад — це класно, коли вчишся або коли руки зайняті.
- Підтримка популярних мов. Вже є 10 основних мов, але за потреби можна легко додати ще.
- Зручний і простий інтерфейс. Зроблено на React, TypeScript і Tailwind — швидко, красиво і зручно.
- Усе працює прямо у браузері. Ніяких твоїх даних на сторонніх серверах — запити йдуть напряму до Google Gemini через офіційний API.
Чому це класно?
- Це ідеальний старт для тих, хто тільки починає розбиратися з AI. Можеш взяти цей проєкт, подивитися як все працює і відразу почати робити свої зміни.
- Я покажу, як правильно складати запити (промпти) і працювати з API — простими словами та покроково.
- Ніяких складних налаштувань серверів чи баз даних — все максимально просто.
- Проєкт легко розширити: додати історію перекладів, різні стилі, кешування та інші корисні фішки.
- Це чудовий спосіб швидко зануритися в AI, зробити щось практичне і корисне, не заглиблюючись у складні технічні моменти.
Трохи про Google Gemini
Google Gemini — це потужна мовна модель від Google, яку можна порівняти з ChatGPT, але з кількома приємними «фішками». Найголовніше — у неї відкритий API, тож можна без проблем звертатись до неї з будь-якого застосунку.
Ще мені дуже подобається, що Gemini буває різних версій: є швидкі (Flash) моделі, які миттєво дають відповідь, і є більш «важкі», які працюють трохи повільніше, зате дуже точно і детально. Завдяки цьому можна вибрати, що саме підходить твоєму проєкту — швидкість або точність.
Ще один плюс — Gemini розроблений Google, тому чудово інтегрується з іншими сервісами компанії, що може бути дуже зручно, якщо ти вже працюєш з їхньою екосистемою.
І ще має офіційний npm-пакет, який полегшує роботу з Gemini API. Тобто не потрібно заморочуватись зі складними налаштуваннями — все зроблено просто і зручно.
Саме тому я обрала Gemini для свого проєкту — це поєднання зручності, швидкості та потужності.
AI для новачків: що треба знати
Якщо ви ніколи не працювали з AI або LLM, ось що потрібно знати:
- Вам не треба бути експертом у машинному навчанні.
- Ви не тренуєте модель, а звертаєтесь до вже готової через API.
- Ваша задача — підготувати промпт — текст, який пояснює моделі, що саме ви хочете отримати.
- AI працює так: ви надсилаєте текст → модель обробляє його → повертає результат.
Простий fetch(), але надзвичайно розумний.
Як запустити цей застосунок
Крок 1. Клонувати репозиторій
git clone https://github.com/KaterynaBabii/ai-gemini-translator.git cd ai-gemini-translator npm install
Крок 2. Отримати API-ключ Google Gemini
- Зайдіть у Google AI Studio.
- Увійдіть у свій Google-акаунт.
- Відкрийте розділ «Get API key».
- Створіть ключ або використайте існуючий.
- Додайте ключ у файл .env в корені проєкту:
REACT_APP_GEMINI_API_KEY=ваш_ключ_тут
Крок 3. Запустити застосунок
npm start
Відкрийте localhost:3000 — і ваш AI-перекладач вже готовий до роботи!
Як це працює всередині
Структура проєкту
src/ ├── components/ # UI-компоненти ├── hooks/ # Кастомні хуки (переклад, голос) ├── helpers/ # Запити до Gemini API └── utils/ # Голосові утиліти
Виклик Gemini API
У файлі src/helpers/index.ts ми ініціалізуємо клієнт:
import { GoogleGenerativeAI } from '@google/generative-ai';
const genAI = new GoogleGenerativeAI(process.env.REACT_APP_GEMINI_API_KEY || '');
const model = genAI.getGenerativeModel({ model: 'gemini-2.5-flash-preview-04-17' });
Потім формуємо промпт для перекладу:
const prompt = `Translate this text from ${sourceLanguage} to ${targetLanguage}: "${inputText}"`;
const result = await model.generateContent(prompt);
return result.response.text();
Які мови підтримуємо
Початково перекладач підтримує 10 мов — вистачить для більшості щоденних задач. Але головне — це те, що ви легко можете розширити список під себе. Вивчаєте японську? А може, хочете тренувати шведську? Просто додайте новий запис у LANGUAGES, і перекладач уже готовий допомагати вам учити нове!
const LANGUAGES = [
…
{code: “sv”, name: “Swedish”}
];
Поради новачкам
- AI — це не страшно. Справді. Це просто ще один інструмент у вашому розробницькому наборі. Щоб з ним працювати, не потрібно знати математику чи мати PhD з машинного навчання. Якщо ви вмієте писати запити до API — ви вже на півдорозі!
- Промпт — це спосіб пояснити моделі, чого ви від неї хочете. Чим точніше й зрозуміліше ви це зробите, тим кращу відповідь отримаєте. Пробуйте різні варіанти, змінюйте формулювання — і ви здивуєтесь, наскільки по-різному може реагувати модель.
- Експериментуйте. Маленькі зміни в тексті промпту можуть суттєво змінити результат. Грайтеся, спостерігайте, тестуйте. Це найкращий спосіб навчитися.
- Не лякайтесь помилок. Якщо щось не працює — відкрийте консоль браузера. У більшості випадків саме там буде підказка, що пішло не так і як це виправити.
- Дбайте про безпеку. API-ключі — це приватна інформація. Ніколи не комітьте їх у GitHub або інші публічні репозиторії. Краще винести їх у .env і читати через змінні середовища.
Що далі
Якщо базовий перекладач уже працює — вітаю! Це крутий старт. Але на цьому можна не зупинятись 🙂
Ось кілька ідей, як розширити функціональність і зробити застосунок ще кориснішим:
- Історія перекладів. Додайте можливість зберігати раніше перекладені фрази, щоб до них можна було швидко повернутись — наприклад, щоб повторити чи використовувати знову.
- Тональність і стиль. Дайте користувачу вибір: формальний чи неформальний переклад, технічний чи розмовний. Це зробить результат набагато природнішим — особливо в реальних сценаріях, як-от email чи презентації.
- Пакетний переклад. Хочете перекласти одразу кілька фраз чи абзаців? Чому б не реалізувати це як список або завантаження файлу — зручно і швидко.
- Офлайн-доступ. Збережіть результати перекладу в локальному кеші, щоб навіть без інтернету можна було побачити останні переклади. Ідеально для подорожей або нестабільного Wi-Fi.
- AI-словник із лінків. Вставляєте посилання на статтю — застосунок сам читає текст, витягує ключові слова і пропонує вам додати їх до словника для вивчення. Особливо корисно, якщо ви вчите нову мову.
- Переклад з картинки. Зробіть можливість завантажити зображення з текстом — і AI сам прочитає його, розпізнає і перекладе. Це зручно для вивіски, скриншоту чи інструкцій.
Для хакатону на Devpost я реалізувала саме таку функціональність — проєкт Smart Translation, який не тільки перекладає та озвучує текст у реальному часі, а й зберігає історію, враховує тон повідомлень, має вбудований словник для вивчення слів з можливістю додати приклади, розбирає статті за лінками для вибору слів, а також працює з текстом на зображеннях. Це був класний досвід, і я рада поділитись простим стартом, з якого все починалось.
Чому я це пишу
Я часто бачу, що багато розробників — особливо з фронтенду — бояться підходити до AI. Мовляв, «це для data science», «я ж не
Цей проєкт — мій спосіб показати, що AI може бути простим, логічним і навіть веселим. Без бекендів, без баз даних, без зайвої магії. Просто ви, браузер і трохи коду.
Для мене це був крок із зони комфорту. AI не був моєю основною спеціалізацією, але чим більше я з ним працюю — тим більше бачу, наскільки це потужний інструмент для розробника. Він не замінює нас — він розширює наші можливості.
Сподіваюся, ця стаття надихне когось зробити свій перший маленький AI-проєкт — просто заради інтересу або щоб протестувати ідею. А далі, повірте, захочеться ще.
Хочеш спробувати?
Якщо вам цікаво, запускайте проєкт, адаптуйте під себе, грайтеся з промптами та діліться враженнями! Мені буде приємно допомогти з питаннями або обговорити ідеї.
Корисні посилання
- Репозиторій GitHub: KaterynaBabii/ai-gemini-translator
- Офіційна документація Gemini: https://ai.google.dev/docs
- Хакатон на Devpost: Devpost AI Hackathon
Sasha Chun
ghost314159
Anton Babaskin
Green Research
Ruvia Ukraine
Kateryna Babii
Volodymyr
Mark Donia
Undisclosed User
Anastasia Kopiika
Maksym
Bogdan Shyiak
Bogdan Shyiak
Maksym
Valentyn Hlyvich
Olexander Smolianinov
Bot Bot
30 коментарів
Додати коментар Підписатись на коментаріВідписатись від коментарів