Skip to content

README.md

Latest commit

 

History

History
291 lines (206 loc) · 9.48 KB

README.md

File metadata and controls

291 lines (206 loc) · 9.48 KB
Raw

Code Translation

A full-stack code translation application that converts code between programming languages using AI. The system integrates a FastAPI backend, alongside a modern React + Vite + Tailwind CSS frontend for an intuitive translation experience.

Table of Contents

Project Overview

The Code Translation application demonstrates how large language models can be used to translate code between different programming languages. It accepts source code in one language, processes it and returns translated code in the target language. This project integrates seamlessly with cloud-hosted APIs or local model endpoints, offering flexibility for research, enterprise, or educational use.

Features

Backend

  • Code translation between 6 languages (Java, C, C++, Python, Rust, Go)
  • PDF code extraction with pattern recognition
  • Enterprise inference endpoints
  • Token-based authentication for inference API
  • Comprehensive error handling and logging
  • File validation and size limits
  • CORS enabled for web integration
  • Health check endpoints
  • Modular architecture (config + models + services)

Frontend

  • Side-by-side code comparison interface
  • Language selection dropdowns (6 languages)
  • PDF file upload with drag-and-drop support
  • Real-time character counter with limits
  • Modern, responsive design with Tailwind CSS
  • Built with Vite for fast development
  • Live status updates
  • Copy to clipboard functionality
  • Mobile-friendly

Architecture

Below is the architecture as it consists of a server that waits for code input or PDF uploads. Once code is provided, the server calls the CodeLlama model to translate the code to the target language.

  graph TB
      subgraph "User Interface"
          A[React Frontend<br/>Port 3000]
          A1[Code Input]
          A2[PDF Upload]
          A3[Language Selection]
      end

      subgraph "FastAPI Backend"
          B[API Server<br/>Port 5001]
          C[PDF Service]
          D[API Client]
      end

      subgraph "External Services"
          E[CodeLlama-34b Model]
      end

      A1 --> B
      A2 --> B
      A3 --> B
      B --> C
      C -->|Extracted Code| B
      B --> D
      D -->|Translate Code + Token| E
      E -->|Translated Code| D
      D --> B
      B --> A

      style A fill:#e1f5ff
      style B fill:#fff4e1
      style E fill:#e1ffe1
Loading

This application is built with enterprise inference capabilities using token-based authentication and CodeLlama-34b-instruct for code translation.

Service Components:

  1. React Web UI (Port 3000) - Provides side-by-side code comparison interface with language selection, PDF upload, and real-time translation results

  2. FastAPI Backend (Port 5001) - Handles code validation, PDF extraction, inference API authentication, and orchestrates code translation through CodeLlama model

Typical Flow:

  1. User enters code or uploads a PDF through the web UI.
  2. The backend validates the input and extracts code if needed.
  3. The backend authenticates with inference API and calls CodeLlama model.
  4. The model translates the code to the target language.
  5. The translated code is returned and displayed to the user.
  6. User can copy the translated code with one click.

Prerequisites

System Requirements

Before you begin, ensure you have the following installed:

  • Docker and Docker Compose
  • Enterprise Inference endpoint access (token-based authentication, see below for models and configs)

Deploy Required Models

See the table below for supported models, hardware, and gateway configuration.

Model Xeon w/APISIX/Keycloak Xeon w/GenAI Gateway Gaudi w/APISIX/Keycloak Gaudi w/GenAI Gateway
codellama/CodeLlama-34b-Instruct-hf ❌ ❌ ✅ Validated on Dell XE7740 ✅ Validated on Dell XE7740
Qwen/Qwen3-4B-Instruct-2507 ✅ Validated on Dell XE7740 ✅ Validated on Dell XE7740 ❌ ❌

Required API Configuration

For Inference Service (Code Translation):

This application supports multiple inference deployment patterns:

GenAI Gateway: Provide your GenAI Gateway URL and API key

APISIX Gateway: Provide your APISIX Gateway URL and authentication token

Verify Docker Installation

# Check Docker version
docker --version

# Check Docker Compose version
docker compose version

# Verify Docker is running
docker ps

Quick Start Deployment

Clone the Repository

git clone https://github.com/opea-project/Enterprise-Inference.git
cd Enterprise-Inference/sample_solutions/CodeTranslation

Set up the Environment

This application requires an .env file in the root directory for proper configuration. Create it using .env.example with the commands below:

cp .env.example .env

Then modify it as needed, with special consideration to certain environment variables mentioned below. Read through the .env file for full instructions.

Important Configuration Notes:

  • INFERENCE_API_ENDPOINT: Your actual inference service URL (replace https://api.example.com)
    • For APISIX/Keycloak deployments, the model name must be included in the endpoint URL (e.g., https://api.example.com/CodeLlama-34b-Instruct-hf)
  • INFERENCE_API_TOKEN: Your actual pre-generated authentication token
  • INFERENCE_MODEL_NAME: Use the exact model name from your inference service
    • To check available models: curl https://api.example.com/v1/models -H "Authorization: Bearer your-token"
  • LOCAL_URL_ENDPOINT: Only needed if using local domain mapping (i.e. api.example.com mapped to localhost) for Docker containers to resolve correctly.
    • Use the domain name from INFERENCE_API_ENDPOINT without https://
    • For public domains or cloud-hosted endpoints, leave the default value not-needed
  • VERIFY_SSL: Controls SSL certificate verification (default: true)
    • Set to false only for development environments with self-signed certificates
    • Keep as true for production environments

Note: The docker-compose.yaml file automatically loads environment variables from .env for the backend service.

Running the Application

Start both API and UI services together with Docker Compose:

# From the code-translation directory
docker compose up --build

# Or run in detached mode (background)
docker compose up -d --build

The API will be available at: http://localhost:5001
The UI will be available at: http://localhost:3000

View logs:

# All services
docker compose logs -f

# Backend only
docker compose logs -f code-trans-backend

# Frontend only
docker compose logs -f code-trans-frontend

Verify the services are running:

# Check API health
curl http://localhost:5001/health

# Check if containers are running
docker compose ps

User Interface

Using the Application

Make sure you are at the localhost:3000 url

You will be directed to the main page which has each feature

User Interface

The interface provides:

Translate code:

  • Select source language from dropdown (Java, C, C++, Python, Rust, Go)
  • Select target language from dropdown
  • Enter or paste your code in the left textarea
  • Click "Translate Code" button
  • View translated code in the right textarea
  • Click "Copy" to copy the result

Upload a PDF:

  • Scroll to the "Alternative: Upload PDF" section
  • Drag and drop a PDF file, or
  • Click "browse" to select a file
  • Wait for code extraction to complete
  • Extracted code appears in the source code box

UI Configuration

When running with Docker Compose, the UI automatically connects to the backend API. The frontend is available at http://localhost:3000 and the API at http://localhost:5001.

For production deployments, you may want to configure a reverse proxy or update the API URL in the frontend configuration.

Stopping the Application

docker compose down

Troubleshooting

For comprehensive troubleshooting guidance, common issues, and solutions, refer to:

Troubleshooting Guide - TROUBLESHOOTING.md