AI-Translator

A simple AI-powered text translator built with Google Gemini 2.5 Flash Lite, Cloudflare Workers and deployed on Cloudflare Pages.

Translates text from English to 3 languages like

1. French
2. Spanish
3. Japanese

Built with simple HTML5, CSS3, JavaScript, Gemini API and Cloudflare Worker & pages.

Let's Try in Live :)

Video

ai-translator.mov

Image

Features

• Uses Google Gemini 2.5 Flash Lite API.

• Runs on Cloudflare's global network—low latency worldwide.

• Real-time translation without page reloads.

• Simple UI - Input text, select target languages, click translate.

• Responsive Design - Works seamlessly on desktop, tablet, and mobile.

• Modern UI - Clean and intuitive user interface.

• No Backend Server - Serverless Worker handles API calls securely.

Learnings

• Learned how to setup Worker to protect API Keys.

• Learned how to deploy to Cloudflare pages.

• Learned about CORS (Cross Origin Resource Sharing).

• Practiced Error handling if incase any error occurs during API Calls.

• Practiced fetching data from APIs and rendering it dynamically on the DOM.

• Practiced more CSS flexbox.

Live demo

View Live :)

Prerequisites

Before you begin, ensure you have the following installed:

• Node.js (v16 or higher)
• npm or yarn
• An API key for AI translation service (e.g., OpenAI, Google Gemini API)

Installation

1. Clone the repository

   git clone https://github.com/yourusername/ai-translator.git
   cd ai-translator

2. Install dependencies

   npm install
   # or
   yarn install

3. Set up secret key

    npx wrangler secret put GEMINI_API_KEY
   

4. Run the development server

   npx wrangler dev
   # or
   yarn dev

   Open http://localhost:3000 to view it in your browser.

Deployment

This project is deployed on Cloudflare Pages. To deploy your own instance:

1. Connect your repository to Cloudflare Pages

   • Log in to Cloudflare Dashboard
   • Navigate to Pages
   • Click "Create a project"
   • Connect your Git repository

2. Configure build settings

   • Build command: ''
   • Build output directory: ''

3. Deploy

   • Push to your main branch to trigger automatic deployment

Technology Stack

Frontend - HTML5 + Vanilla JavaScript + CSS (Cloudflare Pages)

Backend - Cloudflare Workers + @google/genai SDK

AI Model - Google Gemini 2.5 Flash Lite

Deployment - Wrangler CLI + Cloudflare Pages

Secrets - Cloudflare Worker Secrets (GEMINI_API_KEY)

Acknowledgments

• Google Studio API.
• Cloudflare Worker and pages.

---