ShyM4e/translator-to-arabic-darija

# Translator Project – Text & Image to Moroccan Darija A full-stack translation application that converts English text and extracts/translates text from images into Moroccan Darija (Arabic) using Google Gemini AI. Built with Node.js, React, and a browser extension for quick access. --- ## Project Overview This project consists of three main components: 1. **Backend** – Express.js server handling translation requests via the Gemini API 2. **Frontend** – React app for text input, image upload, translation display, and speech synthesis 3. **Extension** – Chrome/Firefox extension offering quick-access translation from the browser sidepanel --- ## Architecture ### Backend (`backend/`) **Entry Point:** `index.js` - Loads environment variables via `env-loader.js` - Initializes Express server on configured `PORT` - Registers translation routes **Routes:** `src/routes/translation.routes.js` - `POST /api/translate` – Translate plain text - `POST /api/translate-image` – Extract text from image and translate **Controllers:** `src/controllers/translation.controllers.js` - Validates incoming requests - Calls translation services - Returns structured JSON responses (`{ success, translation, message }`) - Handles errors with consistent error messages **Services:** `src/services/translation.services.js` - Core integration with Google Gemini AI - Manages text and image payload preparation - Parses API responses - Implements error handling and fallbacks **Config:** `src/config/gemini.js` - Stores Gemini API configuration and initialization **Error Handler:** `src/middleware/error.handler.js` - Global error middleware for Express ### Frontend (`frontend/`) **Main App:** `src/App.js` - React component managing UI state: `inputText`, `translation`, `image`, `imagePreview`, `loadingText`, `loadingImage`, `error` - Reads backend URL from `process.env.REACT_APP_API_BASE_URL` **Key Handlers:** 1. **`handleTranslateText()`** ```javascript // Posts { text: inputText } to /api …