AI Chat Translator

An AI-powered chat application for language translation built with React, shadcn/ui, and OpenAI API.

Features

• 🌍 Translate word and sentences. Get exmaples on how to use a word
• 🔄 Bidirectional translation (click on selected pair to reverse direction)
• 💬 Chat-based interface for natural conversation
• 🎨 Modern UI with shadcn/ui components
• 📱 Progressive Web App (PWA)
• 🐳 Docker support for easy deployment
• 🔒 Secure server-side API key management
• 💾 Redis-backed data persistence for language pairs

Prerequisites

• Node.js 18+ and npm
• OpenAI API key
• Redis (for data persistence)
• Docker and Docker Compose (for containerized deployment)

Setup

Local Development

This project uses npm workspaces for better dependency management.

1. Install dependencies:

   npm install

   This will install dependencies for both the frontend and server in one command.

2. Configure your OpenAI API key: Create a .env file in the server directory:

   echo "OPENAI_API_KEY=your_openai_api_key_here" > server/.env

3. Start Redis for local development:

   npm run dev:redis

4. Start the application:

   For production-like environment (unified server):

   npm start

   Access at http://localhost:3001

   For development with hot-reload:

   npm run dev:all

   Access at http://localhost:3000

Building for Production

For production build:

npm run build

For local development build:

npm run build:local

The built files will be in the dist directory and served by the Express server.

Publishing to Docker Hub

1. Log in to Docker Hub:

    docker login
   

2. Build, tag and push with your Docker Hub username:

     # Use BuildKit for multi-arch builds
     docker buildx create --use
   
   
     # Helper command: Get all existing tags fo image
     curl -s "https://hub.docker.com/v2/repositories/mauricewipf/ai-chat-translator/tags/?page_size=100" | jq -r '.results[].name'
   
     docker buildx build \
        --platform linux/amd64,linux/arm64 \
        -t mauricewipf/ai-chat-translator:latest \
        -t mauricewipf/ai-chat-translator:0.2.1 \
        --build-arg APP_VERSION=0.2.1 \
        --build-arg GIT_REVISION=$(git rev-parse --short HEAD) \
        --push \
        --provenance=false \
        .
   

3. Others can then pull and use your image:

     docker pull mauricewipf/ai-chat-translator:latest
   

View on Docker Hub: https://hub.docker.com/repository/docker/mauricewipf/ai-chat-translator

4. How to use the image:

     docker run -d \
        --publish 3001:3001 \
        --restart unless-stopped \
        --env OPENAI_API_KEY=YOUR_OPENAI_API_KEY \
        mauricewipf/ai-chat-translator:0.2.0
   

5. Verify the container is running:

     curl http://localhost:3001/api/health
   

   You should see: {"status":"ok"}

Docker Deployment

Docker Compose will automatically start both the application and Redis with persistence enabled.

1. Set your OpenAI API key: Create a .env file in the root directory:

   OPENAI_API_KEY=your_openai_api_key_here

   Or replace "INSERT_DEFAULT_API_KEY_HERE" in docker-compose.yml with your OpenAI API key.

2. Build and run with Docker Compose:

   docker-compose up -d --build

   This will start:

   • Redis container with persistent storage (port 6379)
   • AI Chat Translator application (port 3001)

3. Verify the services are running:

   # Check application health
   curl http://localhost:3001/api/health
   # Should see: {"status":"ok"}
   
   # Check Redis
   docker exec ai-chat-translator-redis redis-cli ping
   # Should see: PONG

4. Access the application: Open your browser and navigate to http://localhost:3001

5. View logs:

   # View all logs
   docker-compose logs -f
   
   # View specific service logs
   docker-compose logs -f ai-chat-translator
   docker-compose logs -f redis

6. Stop the services:

   docker-compose down
   
   # To also remove the Redis data volume
   docker-compose down -v

Deploy on Vercel

License

MIT

Support

For issues and questions, please open an issue on the repository.