Add application code and configuration for HF Space

.gitignore

@@ -0,0 +1,26 @@
+# Python
+__pycache__/
+*.pyc
+*.pyo
+*.pyd
+*build*/
+*dist*/
+*.egg-info/
+venv/
+.venv/
+env/
+.env
+*.env.*
+
+# Uploads
+uploads/
+
+# IDE / OS specific
+.vscode/
+.idea/
+*.DS_Store
+Thumbs.db
+
+# Local secrets (if any)
+secrets.yaml
+*.credential

backend

@@ -0,0 +1 @@
+Subproject commit da27106172ae5acc2deda738eee913963fdaac6f

project_details.txt

@@ -0,0 +1,124 @@
+# Deployment Guide: AI Translator on Hugging Face Spaces (Docker)
+
+This guide outlines the steps to deploy the AI Translator web application to Hugging Face (HF) Spaces using Docker.
+
+## Prerequisites
+
+1.  **Docker:** Ensure Docker Desktop (or Docker Engine on Linux) is installed and running on your local machine.
+2.  **Git & Git LFS:** Install Git and Git Large File Storage (LFS) if you plan to use large model files directly in your repository (though it's often better to load them dynamically). Install LFS with `git lfs install`.
+3.  **Hugging Face Account:** You need an account on [huggingface.co](https://huggingface.co/).
+4.  **Hugging Face CLI (Optional but Recommended):** Install the HF command-line interface for easier repository management:
+    ```bash
+    pip install -U huggingface_hub
+    # Login to your account
+    huggingface-cli login
+    ```
+
+## Steps
+
+1.  **Create a Hugging Face Repository:**
+    *   Go to [huggingface.co](https://huggingface.co/) and create a new "Space".
+    *   Give it a name (e.g., `your-username/ai-translator`).
+    *   Select "Docker" as the Space SDK.
+    *   Choose "Public" or "Private" visibility.
+    *   Click "Create Space".
+
+2.  **Prepare Your Local Repository:**
+    *   Make sure your project directory is a Git repository. If not, initialize it:
+        ```bash
+        git init
+        ```
+    *   Create a `.gitignore` file to exclude virtual environments, `uploads`, `__pycache__`, etc. (A basic example is provided below).
+    *   **Crucially**, create a `README.md` file *at the root of your project* (or edit the existing one created by HF) with the following metadata block at the top:
+        ```markdown
+        ---
+        title: AI Translator
+        emoji: 🌍
+        colorFrom: blue
+        colorTo: green
+        sdk: docker
+        app_port: 8000 # Must match the port EXPOSEd in Dockerfile and run by uvicorn
+        # Optional: Specify hardware requirements if needed (default is free CPU)
+        # hardware: cpu-basic # cpu-upgrade, t4-small, t4-medium, a10g-small, etc.
+        # Optional: Add secrets if your app needs API keys (e.g., HF_TOKEN)
+        # secrets:
+        #   - HF_TOKEN
+        ---
+
+        # AI Translator
+
+        This Space hosts an AI-powered web application for translating text and documents to/from Arabic.
+        Built with FastAPI, Docker, and Hugging Face Transformers.
+        ```
+        *   **Important:** Ensure `app_port` matches the port exposed in your `backend/Dockerfile` (which is `8000` in the current setup).
+
+3.  **Clone the HF Space Repository (Optional but Recommended):**
+    *   Cloning ensures you have the correct remote configured. Go to your Space page on HF, click the "Files and versions" tab, then the "Clone repository" button to get the command.
+    *   ```bash
+        # Example:
+        git clone https://huggingface.co/spaces/your-username/ai-translator
+        cd ai-translator
+        ```
+    *   Copy your project files (`backend/`, `static/`, `templates/`, `Dockerfile` at the root, `README.md`, `.gitignore`, etc.) into this cloned directory. *Make sure the `Dockerfile` is at the root level if HF expects it there, or adjust paths in the Dockerfile if it stays in `backend/`.* **Correction:** The current `Dockerfile` assumes it's run from the project root and copies files like `backend/requirements.txt`. Let's keep the `Dockerfile` in the `backend/` directory as initially created and adjust the `README.md` if needed, or adjust the Dockerfile copy paths. *Let's assume the `Dockerfile` stays in `backend/` for now, as created.*
+
+4.  **Add and Commit Files:**
+    *   Stage all your project files:
+        ```bash
+        git add .
+        ```
+    *   Commit the changes:
+        ```bash
+        git commit -m "Initial commit of AI Translator application"
+        ```
+
+5.  **Push to Hugging Face:**
+    *   If you cloned the repository, the remote (`origin`) should already be set.
+    *   If you initialized Git locally, add the HF Space remote:
+        ```bash
+        git remote add origin https://huggingface.co/spaces/your-username/ai-translator
+        ```
+    *   Push your code to the `main` branch on Hugging Face:
+        ```bash
+        git push origin main
+        ```
+
+6.  **Monitor Build Process:**
+    *   Go back to your Space page on Hugging Face.
+    *   The Space will automatically start building the Docker image based on your `backend/Dockerfile`. You can monitor the build logs.
+    *   If the build is successful, the application container will start.
+    *   Any errors during the build (e.g., missing dependencies, Dockerfile syntax errors) or runtime errors (e.g., Python code errors, model loading issues) will appear in the logs.
+
+7.  **Access Your Application:**
+    *   Once the status shows "Running", your application should be accessible at the Space URL (e.g., `https://your-username-ai-translator.hf.space`).
+
+## Basic `.gitignore` Example
+
+Create a file named `.gitignore` in the project root:
+
+```gitignore
+# Python
+__pycache__/
+*.pyc
+*.pyo
+*.pyd
+*build*/
+*dist*/
+*.egg-info/
+venv/
+env/
+.env
+*.env.*
+
+# Uploads
+uploads/
+
+# IDE / OS specific
+.vscode/
+.idea/
+*.DS_Store
+Thumbs.db
+
+# Local secrets (if any)
+secrets.yaml
+*.credential
+```

project_report.md

@@ -0,0 +1,227 @@
+# AI-Powered Translation Web Application - Project Report
+
+**Date:** April 27, 2025
+
+**Author:** [Your Name/Team Name]
+
+## 1. Introduction
+
+This report details the development process of an AI-powered web application designed for translating text and documents between various languages and Arabic (Modern Standard Arabic - Fusha). The application features a RESTful API backend built with FastAPI and a user-friendly frontend using HTML, CSS, and JavaScript. It is designed for deployment on Hugging Face Spaces using Docker.
+
+## 2. Project Objectives
+
+*   Develop a functional web application with AI translation capabilities.
+*   Deploy the application on Hugging Face Spaces using Docker.
+*   Build a RESTful API backend using FastAPI.
+*   Integrate Hugging Face LLMs/models for translation.
+*   Create a user-friendly frontend for interacting with the API.
+*   Support translation for direct text input and uploaded documents (PDF, DOCX, XLSX, PPTX, TXT).
+*   Focus on high-quality Arabic translation, emphasizing meaning and eloquence (Balagha) over literal translation.
+*   Document the development process comprehensively.
+
+## 3. Backend Architecture and API Design
+
+### 3.1. Framework and Language
+
+*   **Framework:** FastAPI
+*   **Language:** Python 3.9+
+
+### 3.2. Directory Structure
+
+```
+/
+|-- backend/
+|   |-- Dockerfile
+|   |-- main.py         # FastAPI application logic, API endpoints
+|   |-- requirements.txt # Python dependencies
+|-- static/
+|   |-- script.js       # Frontend JavaScript
+|   |-- style.css       # Frontend CSS
+|-- templates/
+|   |-- index.html      # Frontend HTML structure
+|-- uploads/            # Temporary storage for uploaded files (created by app)
+|-- project_report.md   # This report
+|-- deployment_guide.md # Deployment instructions
+|-- project_details.txt # Original project requirements
+```
+
+### 3.3. API Endpoints
+
+*   **`GET /`**
+    *   **Description:** Serves the main HTML frontend page (`index.html`).
+    *   **Response:** `HTMLResponse` containing the rendered HTML.
+*   **`POST /translate/text`**
+    *   **Description:** Translates a snippet of text provided in the request body.
+    *   **Request Body (Form Data):**
+        *   `text` (str): The text to translate.
+        *   `source_lang` (str): The source language code (e.g., 'en', 'fr', 'ar'). 'auto' might be supported depending on the model.
+        *   `target_lang` (str): The target language code (currently fixed to 'ar').
+    *   **Response (`JSONResponse`):**
+        *   `translated_text` (str): The translated text.
+        *   `source_lang` (str): The detected or provided source language.
+    *   **Error Responses:** `400 Bad Request` (e.g., missing text), `500 Internal Server Error` (translation failure), `501 Not Implemented` (if required libraries missing).
+*   **`POST /translate/document`**
+    *   **Description:** Uploads a document, extracts its text, and translates it.
+    *   **Request Body (Multipart Form Data):**
+        *   `file` (UploadFile): The document file (.pdf, .docx, .xlsx, .pptx, .txt).
+        *   `source_lang` (str): The source language code.
+        *   `target_lang` (str): The target language code (currently fixed to 'ar').
+    *   **Response (`JSONResponse`):**
+        *   `original_filename` (str): The name of the uploaded file.
+        *   `detected_source_lang` (str): The detected or provided source language.
+        *   `translated_text` (str): The translated text extracted from the document.
+    *   **Error Responses:** `400 Bad Request` (e.g., no file, unsupported file type), `500 Internal Server Error` (extraction or translation failure), `501 Not Implemented` (if required libraries missing).
+
+### 3.4. Dependencies
+
+Key Python libraries used:
+
+*   `fastapi`: Web framework.
+*   `uvicorn`: ASGI server.
+*   `python-multipart`: For handling form data (file uploads).
+*   `jinja2`: For HTML templating.
+*   `transformers`: For interacting with Hugging Face models.
+*   `torch` (or `tensorflow`): Backend for `transformers`.
+*   `sentencepiece`, `sacremoses`: Often required by translation models.
+*   `PyMuPDF`: For PDF text extraction.
+*   `python-docx`: For DOCX text extraction.
+*   `openpyxl`: For XLSX text extraction.
+*   `python-pptx`: For PPTX text extraction.
+
+*(List specific versions from requirements.txt if necessary)*
+
+### 3.5. Data Flow
+
+1.  **User Interaction:** User accesses the web page served by `GET /`.
+2.  **Text Input:** User enters text, selects languages, and submits the text form.
+3.  **Text API Call:** Frontend JS sends a `POST` request to `/translate/text` with form data.
+4.  **Text Backend Processing:** FastAPI receives the request, calls the internal translation function (using the AI model via `transformers`), and returns the result.
+5.  **Document Upload:** User selects a document, selects languages, and submits the document form.
+6.  **Document API Call:** Frontend JS sends a `POST` request to `/translate/document` with multipart form data.
+7.  **Document Backend Processing:** FastAPI receives the file, saves it temporarily, extracts text using appropriate libraries (PyMuPDF, python-docx, etc.), calls the internal translation function, cleans up the temporary file, and returns the result.
+8.  **Response Handling:** Frontend JS receives the JSON response and updates the UI to display the translation or an error message.
+
+## 4. Prompt Engineering and Optimization
+
+### 4.1. Initial Prompt Design
+
+The core requirement is to translate *from* a source language *to* Arabic (MSA Fusha) with a focus on meaning and eloquence (Balagha), avoiding overly literal translations.
+
+The initial prompt structure designed for the `translate_text_internal` function is:
+
+```
+Translate the following text from {source_lang} to Arabic (Modern Standard Arabic - Fusha) precisely. Do not provide a literal translation; focus on conveying the meaning accurately while respecting Arabic eloquence (balagha) by rephrasing if necessary:
+
+{text}
+```
+
+### 4.2. Rationale
+
+*   **Explicit Target:** Specifies "Arabic (Modern Standard Arabic - Fusha)" to guide the model towards the desired dialect and register.
+*   **Precision Instruction:** "precisely" encourages accuracy.
+*   **Constraint against Literal Translation:** "Do not provide a literal translation" directly addresses a potential pitfall.
+*   **Focus on Meaning:** "focus on conveying the meaning accurately" sets the primary goal.
+*   **Eloquence (Balagha):** "respecting Arabic eloquence (balagha)" introduces the key stylistic requirement.
+*   **Mechanism:** "by rephrasing if necessary" suggests *how* to achieve non-literal translation and eloquence.
+*   **Clear Input:** `{text}` placeholder clearly separates the instruction from the input text.
+*   **Source Language Context:** `{source_lang}` provides context, which can be crucial for disambiguation.
+
+### 4.3. Testing and Refinement (Planned/Hypothetical)
+
+*(This section would be filled in after actual model integration and testing)*
+
+*   **Model Selection:** The choice of model (e.g., a fine-tuned NLLB model, AraT5, or a large multilingual model like Qwen or Llama adapted for translation) will significantly impact performance. Initial tests would involve selecting a candidate model from Hugging Face Hub known for strong multilingual or English-Arabic capabilities.
+*   **Baseline Test:** Translate sample sentences/paragraphs using the initial prompt and evaluate the output quality based on accuracy, fluency, and adherence to Balagha principles.
+*   **Prompt Variations:**
+    *   *Simpler Prompts:* Test shorter prompts (e.g., "Translate to eloquent MSA Arabic: {text}") to see if the model can infer the constraints.
+    *   *More Explicit Examples (Few-Shot):* If needed, add examples within the prompt (though this increases complexity and token count): "Translate ... Example: 'Hello world' -> 'مرحباً بالعالم' (eloquent). Input: {text}"
+    *   *Emphasis:* Use different phrasing or emphasis (e.g., "Prioritize conveying the core meaning over word-for-word translation.")
+*   **Parameter Tuning:** Experiment with model generation parameters (e.g., `temperature`, `top_k`, `num_beams` if using beam search) available through the `transformers` pipeline or `generate` method to influence output style and creativity.
+*   **Evaluation Metrics:**
+    *   *Human Evaluation:* Subjective assessment by Arabic speakers focusing on accuracy, naturalness, and eloquence.
+    *   *Automated Metrics (with caution):* BLEU, METEOR scores against reference translations (if available), primarily for tracking relative improvements during iteration, acknowledging their limitations for stylistic nuances like Balagha.
+*   **Final Prompt Justification:** Based on the tests, the prompt that consistently produces the best balance of accurate meaning and desired Arabic style will be chosen. The current prompt is a strong starting point based on explicitly stating all requirements.
+
+## 5. Frontend Design and User Experience
+
+### 5.1. Design Choices
+
+*   **Simplicity:** A clean, uncluttered interface with two main sections: one for text translation and one for document translation.
+*   **Standard HTML Elements:** Uses standard forms, labels, text areas, select dropdowns, and buttons for familiarity.
+*   **Clear Separation:** Distinct forms and result areas for text vs. document translation.
+*   **Feedback:** Provides visual feedback during processing (disabling buttons, changing text) and displays results or errors clearly.
+*   **Responsiveness (Basic):** Includes basic CSS media queries for better usability on smaller screens.
+
+### 5.2. UI/UX Considerations
+
+*   **Workflow:** Intuitive flow – select languages, input text/upload file, click translate, view result.
+*   **Language Selection:** Dropdowns for selecting source and target languages. Includes common languages and an option for Arabic as a source (for potential future reverse translation). 'Auto-Detect' is included but noted as not yet implemented.
+*   **File Input:** Standard file input restricted to supported types (`accept` attribute).
+*   **Error Handling:** Displays clear error messages in a dedicated area if API calls fail or validation issues occur.
+*   **Result Display:** Uses `<pre><code>` for potentially long translated text, preserving formatting and allowing wrapping. Results for Arabic are displayed RTL. Document results include filename and detected source language.
+
+### 5.3. Interactivity (JavaScript)
+
+*   Handles form submissions asynchronously using `fetch`.
+*   Prevents default form submission behavior.
+*   Provides loading state feedback on buttons.
+*   Parses JSON responses from the backend.
+*   Updates the DOM to display translated text or error messages.
+*   Clears previous results/errors before new submissions.
+
+## 6. Deployment and Scalability
+
+### 6.1. Dockerization
+
+*   **Base Image:** Uses an official `python:3.9-slim` image for a smaller footprint.
+*   **Dependency Management:** Copies `requirements.txt` and installs dependencies early to leverage Docker caching.
+*   **Code Copying:** Copies the necessary application code (`backend`, `templates`, `static`) into the container.
+*   **Directory Creation:** Ensures necessary directories (`templates`, `static`, `uploads`) exist within the container.
+*   **Port Exposure:** Exposes port 8000 (used by `uvicorn`).
+*   **Entrypoint:** Uses `uvicorn` to run the FastAPI application (`backend.main:app`), making it accessible on `0.0.0.0`.
+
+*(See `backend/Dockerfile` for the exact implementation)*
+
+### 6.2. Hugging Face Spaces Deployment
+
+*   **Method:** Uses the Docker Space SDK option.
+*   **Configuration:** Requires creating a `README.md` file in the repository root with specific Hugging Face metadata (e.g., `sdk: docker`, `app_port: 8000`).
+*   **Repository:** The project code (including the `Dockerfile` and the `README.md` with HF metadata) needs to be pushed to a Hugging Face Hub repository (either model or space repo).
+*   **Build Process:** Hugging Face Spaces automatically builds the Docker image from the `Dockerfile` in the repository and runs the container.
+
+*(See `deployment_guide.md` for detailed steps)*
+
+### 6.3. Scalability Considerations
+
+*   **Stateless API:** The API endpoints are designed to be stateless (apart from temporary file storage during upload processing), which aids horizontal scaling.
+*   **Model Loading:** The translation model is intended to be loaded once on application startup (currently placeholder) rather than per-request, improving performance. However, large models consume significant memory.
+*   **Hugging Face Spaces Resources:** Scalability on HF Spaces depends on the chosen hardware tier. Free tiers have limited resources (CPU, RAM). Larger models or high traffic may require upgrading to paid tiers.
+*   **Async Processing:** FastAPI's asynchronous nature allows handling multiple requests concurrently, improving I/O bound performance. CPU-bound tasks like translation itself might still block the event loop if not handled carefully (e.g., running in a separate thread pool if necessary, though `transformers` pipelines often manage this).
+*   **Database:** No database is currently used. If user accounts or saved translations were added, a database would be needed, adding another scaling dimension.
+*   **Load Balancing:** For high availability and scaling beyond a single container, a load balancer and multiple container instances would be required (typically managed by orchestration platforms like Kubernetes, which is beyond the basic HF Spaces setup).
+
+## 7. Challenges and Future Work
+
+### 7.1. Challenges
+
+*   **Model Selection:** Finding the optimal balance between translation quality (especially for Balagha), performance (speed/resource usage), and licensing.
+*   **Prompt Engineering:** Iteratively refining the prompt to consistently achieve the desired non-literal, eloquent translation style across diverse inputs.
+*   **Resource Constraints:** Large translation models require significant RAM and potentially GPU resources, which might be limiting on free deployment tiers.
+*   **Document Parsing Robustness:** Handling variations and potential errors in different document formats and encodings.
+*   **Language Detection:** Implementing reliable automatic source language detection if the 'auto' option is fully developed.
+
+### 7.2. Future Work
+
+*   **Implement Actual Translation:** Replace placeholder logic with a real Hugging Face `transformers` pipeline using a selected model.
+*   **Implement Reverse Translation:** Add functionality and models to translate *from* Arabic *to* other languages.
+*   **Improve Error Handling:** Provide more specific user feedback for different error types.
+*   **Add User Accounts:** Allow users to save translation history.
+*   **Implement Language Auto-Detection:** Integrate a library (e.g., `langdetect`, `fasttext`) for the 'auto' source language option.
+*   **Enhance UI/UX:** Improve visual design, add loading indicators, potentially show translation progress for large documents.
+*   **Optimize Performance:** Profile the application and optimize bottlenecks, potentially exploring model quantization or different model architectures if needed.
+*   **Add More Document Types:** Support additional formats if required.
+*   **Testing:** Implement unit and integration tests for backend logic.
+
+## 8. Conclusion
+
+This project successfully lays the foundation for an AI-powered translation web service focusing on high-quality Arabic translation. The FastAPI backend provides a robust API, and the frontend offers a simple interface for text and document translation. Dockerization ensures portability and simplifies deployment to platforms like Hugging Face Spaces. Key next steps involve integrating a suitable translation model and refining the prompt engineering based on real-world testing.

static/script.js

@@ -0,0 +1,113 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const textForm = document.getElementById('text-translation-form');
+    const docForm = document.getElementById('doc-translation-form');
+    const textResultBox = document.getElementById('text-result');
+    const textOutput = document.getElementById('text-output');
+    const docResultBox = document.getElementById('doc-result');
+    const docOutput = document.getElementById('doc-output');
+    const docFilename = document.getElementById('doc-filename');
+    const docSourceLang = document.getElementById('doc-source-lang');
+    const errorMessageDiv = document.getElementById('error-message');
+
+    // Helper function to display errors
+    function displayError(message) {
+        errorMessageDiv.textContent = `Error: ${message}`;
+        errorMessageDiv.style.display = 'block';
+        // Hide result boxes on error
+        textResultBox.style.display = 'none';
+        docResultBox.style.display = 'none';
+    }
+
+    // Helper function to clear errors and results
+    function clearFeedback() {
+        errorMessageDiv.style.display = 'none';
+        errorMessageDiv.textContent = '';
+        textResultBox.style.display = 'none';
+        textOutput.textContent = '';
+        docResultBox.style.display = 'none';
+        docOutput.textContent = '';
+        docFilename.textContent = '';
+        docSourceLang.textContent = '';
+    }
+
+    // Handle Text Translation Form Submission
+    textForm.addEventListener('submit', async (event) => {
+        event.preventDefault();
+        clearFeedback();
+
+        const formData = new FormData(textForm);
+        const button = textForm.querySelector('button');
+        button.disabled = true;
+        button.textContent = 'Translating...';
+
+        try {
+            const response = await fetch('/translate/text', {
+                method: 'POST',
+                body: formData
+            });
+
+            if (!response.ok) {
+                const errorData = await response.json();
+                throw new Error(errorData.detail || `HTTP error! status: ${response.status}`);
+            }
+
+            const result = await response.json();
+            textOutput.textContent = result.translated_text;
+            textResultBox.style.display = 'block';
+            // Optionally update language direction based on result if needed
+            // textResultBox.dir = result.target_lang === 'ar' ? 'rtl' : 'ltr';
+
+        } catch (error) {
+            console.error('Text translation error:', error);
+            displayError(error.message || 'An unexpected error occurred during text translation.');
+        } finally {
+            button.disabled = false;
+            button.textContent = 'Translate Text';
+        }
+    });
+
+    // Handle Document Translation Form Submission
+    docForm.addEventListener('submit', async (event) => {
+        event.preventDefault();
+        clearFeedback();
+
+        const formData = new FormData(docForm);
+        const fileInput = document.getElementById('doc-input');
+        const button = docForm.querySelector('button');
+
+        if (!fileInput.files || fileInput.files.length === 0) {
+            displayError('Please select a document to upload.');
+            return;
+        }
+
+        button.disabled = true;
+        button.textContent = 'Translating...';
+
+        try {
+            const response = await fetch('/translate/document', {
+                method: 'POST',
+                body: formData // FormData handles multipart/form-data automatically
+            });
+
+            if (!response.ok) {
+                const errorData = await response.json();
+                throw new Error(errorData.detail || `HTTP error! status: ${response.status}`);
+            }
+
+            const result = await response.json();
+            docFilename.textContent = result.original_filename || 'N/A';
+            docSourceLang.textContent = result.detected_source_lang || 'N/A';
+            docOutput.textContent = result.translated_text;
+            docResultBox.style.display = 'block';
+            // Optionally update language direction based on result if needed
+            // docResultBox.dir = result.target_lang === 'ar' ? 'rtl' : 'ltr';
+
+        } catch (error) {
+            console.error('Document translation error:', error);
+            displayError(error.message || 'An unexpected error occurred during document translation.');
+        } finally {
+            button.disabled = false;
+            button.textContent = 'Translate Document';
+        }
+    });
+});

static/style.css

@@ -0,0 +1,118 @@
+body {
+    font-family: sans-serif;
+    margin: 20px;
+    background-color: #f4f4f4;
+    line-height: 1.6;
+}
+
+h1 {
+    text-align: center;
+    color: #333;
+}
+
+.container {
+    background: #fff;
+    padding: 20px;
+    margin-bottom: 20px;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+h2 {
+    color: #555;
+    border-bottom: 1px solid #eee;
+    padding-bottom: 10px;
+    margin-top: 0;
+}
+
+.input-group {
+    margin-bottom: 15px;
+}
+
+label {
+    display: block;
+    margin-bottom: 5px;
+    font-weight: bold;
+    color: #333;
+}
+
+select,
+textarea,
+input[type="file"] {
+    width: 100%;
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    box-sizing: border-box; /* Prevents padding from adding to width */
+}
+
+textarea {
+    min-height: 100px;
+    resize: vertical;
+}
+
+button {
+    background-color: #5cb85c;
+    color: white;
+    padding: 10px 15px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 1em;
+    transition: background-color 0.3s ease;
+}
+
+button:hover {
+    background-color: #4cae4c;
+}
+
+.result-box {
+    margin-top: 20px;
+    padding: 15px;
+    background-color: #e9e9e9;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    min-height: 50px;
+}
+
+.result-box h3 {
+    margin-top: 0;
+    color: #333;
+}
+
+pre {
+    white-space: pre-wrap; /* Allows text to wrap */
+    word-wrap: break-word; /* Breaks long words */
+    background: #f9f9f9;
+    padding: 10px;
+    border-radius: 4px;
+}
+
+code {
+    font-family: monospace;
+    font-size: 0.95em;
+}
+
+.error-box {
+    margin-top: 20px;
+    padding: 15px;
+    background-color: #f2dede;
+    border: 1px solid #ebccd1;
+    color: #a94442;
+    border-radius: 4px;
+}
+
+/* RTL support for results */
+[dir="rtl"] {
+    text-align: right;
+}
+
+/* Basic responsiveness */
+@media (max-width: 600px) {
+    body {
+        margin: 10px;
+    }
+    .container {
+        padding: 15px;
+    }
+}

templates/index.html

@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr"> <!- Default to LTR, can be changed dynamically ->
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI Translator</title>
+    <link rel="stylesheet" href="/static/style.css">
+</head>
+<body>
+    <h1>AI Translation Service</h1>
+
+    <div class="container">
+        <h2>Direct Text Translation</h2>
+        <form id="text-translation-form">
+            <div class="input-group">
+                <label for="source-lang-text">Source Language:</label>
+                <select id="source-lang-text" name="source_lang">
+                    <option value="en">English</option>
+                    <option value="fr">French</option>
+                    <option value="es">Spanish</option>
+                    <option value="de">German</option>
+                    <option value="ar">Arabic</option> <!- Added Arabic as source ->
+                    <option value="auto">Auto-Detect (Not implemented)</option>
+                    <!- Add more languages as needed ->
+                </select>
+            </div>
+            <div class="input-group">
+                 <label for="target-lang-text">Target Language:</label>
+                 <select id="target-lang-text" name="target_lang">
+                     <option value="ar">Arabic (MSA Fusha)</option>
+                     <!- Add other target languages if reverse translation is implemented ->
+                     <!- <option value="en">English</option> ->
+                 </select>
+            </div>
+            <textarea id="text-input" name="text" placeholder="Enter text to translate..."></textarea>
+            <button type="submit">Translate Text</button>
+        </form>
+        <div id="text-result" class="result-box" dir="rtl"> <!- Set default to RTL for Arabic output ->
+            <h3>Translation:</h3>
+            <pre><code id="text-output"></code></pre>
+        </div>
+    </div>
+
+    <div class="container">
+        <h2>Document Translation</h2>
+        <form id="doc-translation-form" enctype="multipart/form-data">
+            <div class="input-group">
+                <label for="source-lang-doc">Source Language:</label>
+                <select id="source-lang-doc" name="source_lang">
+                    <option value="en">English</option>
+                    <option value="fr">French</option>
+                    <option value="es">Spanish</option>
+                    <option value="de">German</option>
+                     <option value="ar">Arabic</option> <!- Added Arabic as source ->
+                    <option value="auto">Auto-Detect (Not implemented)</option>
+                    <!- Add more languages as needed ->
+                </select>
+            </div>
+             <div class="input-group">
+                 <label for="target-lang-doc">Target Language:</label>
+                 <select id="target-lang-doc" name="target_lang">
+                     <option value="ar">Arabic (MSA Fusha)</option>
+                      <!- Add other target languages if reverse translation is implemented ->
+                     <!- <option value="en">English</option> ->
+                 </select>
+            </div>
+            <div class="input-group">
+                <label for="doc-input">Upload Document (.pdf, .docx, .xlsx, .pptx, .txt):</label>
+                <input type="file" id="doc-input" name="file" accept=".pdf,.docx,.xlsx,.pptx,.txt">
+            </div>
+            <button type="submit">Translate Document</button>
+        </form>
+        <div id="doc-result" class="result-box" dir="rtl"> <!- Set default to RTL for Arabic output ->
+            <h3>Translation:</h3>
+            <p>Original Filename: <span id="doc-filename"></span></p>
+            <p>Detected Source Language: <span id="doc-source-lang"></span></p>
+            <pre><code id="doc-output"></code></pre>
+        </div>
+    </div>
+
+    <div id="error-message" class="error-box" style="display: none;"></div>
+
+    <script src="/static/script.js"></script>
+</body>
+</html>