williampepple1/ibani-ai

# Ibani Translator A modern, AI-powered translation web application for translating English to Ibani language. Built with React, TypeScript, and Tailwind CSS for the frontend, and FastAPI with a Marian MT model for the backend. ## ✨ Features - **Single Translation**: Translate individual English texts to Ibani - **Batch Translation**: Translate multiple texts at once - **Translation History**: Keep track of your translations with local storage - **Advanced Options**: Customize translation parameters (max_length, num_beams) - **Export to CSV**: Download batch translations as CSV files - **Real-time Status**: Monitor API connectivity and health - **Modern UI**: Beautiful, responsive interface with smooth animations - **TypeScript**: Full type safety throughout the application - **Framework Agnostic**: Frontend works with any backend API implementation ## 🚀 Quick Start ### Prerequisites - Node.js 18+ and npm - Access to the Ibani Translation API endpoint ### 1. Install Dependencies ```bash npm install ``` ### 2. Configure API Endpoint Create a `.env` file in the root directory: ```bash cp env.template .env ``` Edit `.env` and set your API endpoint: ``` VITE_API_BASE_URL=localhost ``` Or for production: ``` VITE_API_BASE_URL=your-api-endpoint.com ``` > **Note:** If you don't create a `.env` file, the app will default to `localhost` ### 3. Start the Development Server ```bash npm run dev ``` The app will be available at `localhost` ## 🛠️ Development ### Available Scripts - `npm run dev` - Start development server - `npm run build` - Build for production - `npm run preview` - Preview production build - `npm run lint` - Run ESLint ### Project Structure ``` ibani-ai/ ├── src/ │ ├── components/ # React components │ │ ├── Header.tsx │ │ ├── StatusIndicator.tsx │ │ ├── SingleTranslator.tsx │ │ ├── BatchTranslator.tsx │ │ └── TranslationHistory.tsx │ ├── services/ …