UI Ux

backend/main.py

@@ -2,7 +2,7 @@ from fastapi import FastAPI, File, UploadFile, Form, HTTPException, Request
 from fastapi.responses import HTMLResponse, JSONResponse
 from fastapi.staticfiles import StaticFiles
 from fastapi.templating import Jinja2Templates
-from typing import List, Optional
+from typing import List, Optional, Dict
 from pydantic import BaseModel
 import os
 import requests
@@ -30,14 +30,19 @@ BASE_DIR = os.path.dirname(os.path.abspath(__file__))
 # Adjust paths to go one level up from backend to find templates/static
 TEMPLATE_DIR = os.path.join(os.path.dirname(BASE_DIR), "templates")
 STATIC_DIR = os.path.join(os.path.dirname(BASE_DIR), "static")
+UPLOADS_DIR = os.path.join(os.path.dirname(BASE_DIR), "uploads")
+
+# Ensure uploads directory exists
+os.makedirs(UPLOADS_DIR, exist_ok=True)
 
 # --- Initialize FastAPI ---
-app = FastAPI()
+app = FastAPI(title="Tarjama Translation API")
 app.mount("/static", StaticFiles(directory=STATIC_DIR), name="static")
 templates = Jinja2Templates(directory=TEMPLATE_DIR)
 
 # --- Language mapping ---
 LANGUAGE_MAP = {
+    "ar": "Arabic",
     "en": "English",
     "fr": "French",
     "es": "Spanish", 
@@ -49,7 +54,16 @@ LANGUAGE_MAP = {
     "pt": "Portuguese",
     "tr": "Turkish",
     "ko": "Korean",
-    "it": "Italian"
+    "it": "Italian",
+    "nl": "Dutch",
+    "sv": "Swedish",
+    "fi": "Finnish",
+    "pl": "Polish",
+    "he": "Hebrew",
+    "id": "Indonesian",
+    "uk": "Ukrainian",
+    "cs": "Czech",
+    "auto": "Detect Language"
 }
 
 # --- Set cache directory to a writeable location ---
@@ -59,19 +73,75 @@ os.environ['TRANSFORMERS_CACHE'] = '/tmp/transformers_cache'
 os.environ['HF_HOME'] = '/tmp/hf_home'
 os.environ['XDG_CACHE_HOME'] = '/tmp/cache'
 
-# --- Global model and tokenizer variables ---
-translator = None
-tokenizer = None
-model = None
+# --- Global model variables ---
+# Store multiple translation models to support various language pairs
+translation_models: Dict[str, Dict] = {
+    "en-ar": {
+        "model": None,
+        "tokenizer": None,
+        "translator": None,
+        "model_name": "Helsinki-NLP/opus-mt-en-ar",
+    },
+    "ar-en": {
+        "model": None,
+        "tokenizer": None, 
+        "translator": None,
+        "model_name": "Helsinki-NLP/opus-mt-ar-en",
+    },
+    # Add more language pair models
+    "en-fr": {
+        "model": None,
+        "tokenizer": None,
+        "translator": None,
+        "model_name": "Helsinki-NLP/opus-mt-en-fr",
+    },
+    "fr-en": {
+        "model": None,
+        "tokenizer": None,
+        "translator": None,
+        "model_name": "Helsinki-NLP/opus-mt-fr-en",
+    },
+    "en-es": {
+        "model": None,
+        "tokenizer": None,
+        "translator": None,
+        "model_name": "Helsinki-NLP/opus-mt-en-es",
+    },
+    "es-en": {
+        "model": None,
+        "tokenizer": None,
+        "translator": None,
+        "model_name": "Helsinki-NLP/opus-mt-es-en",
+    },
+    "en-de": {
+        "model": None,
+        "tokenizer": None,
+        "translator": None,
+        "model_name": "Helsinki-NLP/opus-mt-en-de",
+    },
+    "de-en": {
+        "model": None,
+        "tokenizer": None,
+        "translator": None,
+        "model_name": "Helsinki-NLP/opus-mt-de-en",
+    },
+    # Can add more language pairs here as needed
+}
+
 model_initialization_attempts = 0
 max_model_initialization_attempts = 3
 last_initialization_attempt = 0
 initialization_cooldown = 300  # 5 minutes cooldown between retry attempts
 
 # --- Model initialization function ---
-def initialize_model():
-    """Initialize the translation model and tokenizer."""
-    global translator, tokenizer, model, model_initialization_attempts, last_initialization_attempt
+def initialize_model(language_pair: str):
+    """Initialize a specific translation model and tokenizer for a language pair."""
+    global translation_models, model_initialization_attempts, last_initialization_attempt
+    
+    # If language pair doesn't exist, return False
+    if language_pair not in translation_models:
+        print(f"Unsupported language pair: {language_pair}")
+        return False
     
     # Check if we've exceeded maximum attempts and if enough time has passed since last attempt
     current_time = time.time()
@@ -85,10 +155,10 @@ def initialize_model():
     last_initialization_attempt = current_time
     
     try:
-        print(f"Initializing model and tokenizer (attempt {model_initialization_attempts})...")
+        model_info = translation_models[language_pair]
+        model_name = model_info["model_name"]
         
-        # Use a smaller, faster model
-        model_name = "Helsinki-NLP/opus-mt-en-ar"  # Much smaller English-to-Arabic model
+        print(f"Initializing model and tokenizer for {language_pair} using {model_name} (attempt {model_initialization_attempts})...")
         
         # Check for available device - properly detect CPU/GPU
         device = "cpu"  # Default to CPU which is more reliable
@@ -98,7 +168,6 @@ def initialize_model():
         print(f"Device set to use: {device}")
         
         # Load the tokenizer with explicit cache directory
-        print(f"Loading tokenizer from {model_name}...")
         try:
             tokenizer = AutoTokenizer.from_pretrained(
                 model_name, 
@@ -107,15 +176,15 @@ def initialize_model():
                 local_files_only=False
             )
             if tokenizer is None:
-                print("Failed to load tokenizer")
+                print(f"Failed to load tokenizer for {language_pair}")
                 return False
-            print("Tokenizer loaded successfully")
+            print(f"Tokenizer for {language_pair} loaded successfully")
+            translation_models[language_pair]["tokenizer"] = tokenizer
         except Exception as e:
-            print(f"Error loading tokenizer: {e}")
+            print(f"Error loading tokenizer for {language_pair}: {e}")
             return False
         
         # Load the model with explicit device placement
-        print(f"Loading model from {model_name}...")
         try:
             model = AutoModelForSeq2SeqLM.from_pretrained(
                 model_name,
@@ -125,14 +194,14 @@ def initialize_model():
             )
             # Move model to device after loading
             model = model.to(device)
-            print(f"Model loaded with PyTorch and moved to {device}")
+            print(f"Model for {language_pair} loaded with PyTorch and moved to {device}")
+            translation_models[language_pair]["model"] = model
         except Exception as e:
-            print(f"Error loading model: {e}")
-            print("Model initialization failed")
+            print(f"Error loading model for {language_pair}: {e}")
+            print(f"Model initialization for {language_pair} failed")
             return False
         
         # Create a pipeline with the loaded model and tokenizer
-        print("Creating translation pipeline...")
         try:
             # Create the pipeline with explicit model and tokenizer
             translator = pipeline(
@@ -144,79 +213,175 @@ def initialize_model():
             )
             
             if translator is None:
-                print("Failed to create translator pipeline")
+                print(f"Failed to create translator pipeline for {language_pair}")
                 return False
                 
             # Test the model with a simple translation to verify it works
-            test_result = translator("hello world", max_length=128)
-            print(f"Model test result: {test_result}")
+            source_lang, target_lang = language_pair.split('-')
+            test_text = "hello world" if source_lang == "en" else "مرحبا بالعالم"
+            test_result = translator(test_text, max_length=128)
+            print(f"Model test result for {language_pair}: {test_result}")
             if not test_result or not isinstance(test_result, list) or len(test_result) == 0:
-                print("Model test failed: Invalid output format")
+                print(f"Model test for {language_pair} failed: Invalid output format")
                 return False
             
+            translation_models[language_pair]["translator"] = translator
+            
             # Success - reset the attempt counter
             model_initialization_attempts = 0
-            print(f"Model {model_name} successfully initialized and tested")
+            print(f"Model {model_name} for {language_pair} successfully initialized and tested")
             return True
         except Exception as inner_e:
-            print(f"Error creating translation pipeline: {inner_e}")
+            print(f"Error creating translation pipeline for {language_pair}: {inner_e}")
             traceback.print_exc()
             return False
     except Exception as e:
-        print(f"Critical error initializing model: {e}")
+        print(f"Critical error initializing model for {language_pair}: {e}")
         traceback.print_exc()
         return False
 
+# --- Get appropriate language pair for translation ---
+def get_language_pair(source_lang: str, target_lang: str):
+    """Determine the appropriate language pair and direction for translation."""
+    # Handle auto-detection case (fallback to online services)
+    if source_lang == "auto":
+        return None
+    
+    # Check if we have a direct model for this language pair
+    pair_key = f"{source_lang}-{target_lang}"
+    if pair_key in translation_models:
+        return pair_key
+        
+    # No direct model available
+    return None
+
+# --- Language detection function ---
+def detect_language(text: str) -> str:
+    """Detect the language of the input text and return the language code."""
+    try:
+        # Try to use langdetect library if available
+        from langdetect import detect
+        
+        try:
+            detected_lang = detect(text)
+            print(f"Language detected using langdetect: {detected_lang}")
+            
+            # Map langdetect specific codes to our standard codes
+            lang_map = {
+                "ar": "ar", "en": "en", "fr": "fr", "es": "es", "de": "de",
+                "zh-cn": "zh", "zh-tw": "zh", "ru": "ru", "ja": "ja", 
+                "hi": "hi", "pt": "pt", "tr": "tr", "ko": "ko",
+                "it": "it", "nl": "nl", "sv": "sv", "fi": "fi",
+                "pl": "pl", "he": "he", "id": "id", "uk": "uk", "cs": "cs"
+            }
+            
+            # Return the mapped language or default to English if not in our supported languages
+            return lang_map.get(detected_lang, "en")
+        except Exception as e:
+            print(f"Error with langdetect: {e}")
+            # Fall back to basic detection
+    except ImportError:
+        print("langdetect library not available, using basic detection")
+    
+    # Basic fallback detection based on character ranges
+    if len(text) < 10:  # Need reasonable amount of text
+        return "en"  # Default to English for very short texts
+    
+    # Count characters in different Unicode ranges
+    arabic_count = sum(1 for c in text if '\u0600' <= c <= '\u06FF')
+    chinese_count = sum(1 for c in text if '\u4e00' <= c <= '\u9fff')
+    japanese_count = sum(1 for c in text if '\u3040' <= c <= '\u30ff')
+    cyrillic_count = sum(1 for c in text if '\u0400' <= c <= '\u04FF')
+    hebrew_count = sum(1 for c in text if '\u0590' <= c <= '\u05FF')
+    
+    # Determine ratios
+    text_len = len(text)
+    arabic_ratio = arabic_count / text_len
+    chinese_ratio = chinese_count / text_len
+    japanese_ratio = japanese_count / text_len
+    cyrillic_ratio = cyrillic_count / text_len
+    hebrew_ratio = hebrew_count / text_len
+    
+    # Make decision based on highest ratio
+    if arabic_ratio > 0.3:
+        return "ar"
+    elif chinese_ratio > 0.3:
+        return "zh"
+    elif japanese_ratio > 0.3:
+        return "ja"
+    elif cyrillic_ratio > 0.3:
+        return "ru"
+    elif hebrew_ratio > 0.3:
+        return "he"
+    
+    # Default to English for Latin scripts (could be any European language)
+    return "en"
+
 # --- Translation Function ---
 def translate_text(text, source_lang, target_lang):
     """Translate text using local model or fallback to online services."""
-    global translator, tokenizer, model
+    if not text:
+        return ""
     
     print(f"Translation Request - Source Lang: {source_lang}, Target Lang: {target_lang}")
     
-    # Check if model is initialized, if not try to initialize it
-    if not model or not tokenizer or not translator:
-        success = initialize_model()
-        if not success:
-            print("Local model initialization failed, using fallback translation")
-            return use_fallback_translation(text, source_lang, target_lang)
+    # Get the appropriate language pair for local translation
+    language_pair = get_language_pair(source_lang, target_lang)
     
-    try:
-        # Ensure only the raw text is sent to the Helsinki model
-        text_to_translate = text 
-        print(f"Translating text (first 50 chars): {text_to_translate[:50]}...") # Log the actual text being sent
+    # If we have a supported local model for this language pair
+    if language_pair and language_pair in translation_models:
+        model_info = translation_models[language_pair]
+        translator = model_info["translator"]
         
-        # Use a more reliable timeout approach with concurrent.futures
-        with concurrent.futures.ThreadPoolExecutor() as executor:
-            future = executor.submit(
-                lambda: translator(
-                    text_to_translate, # Pass only the raw text
-                    max_length=768
-                )[0]["translation_text"]
-            )
+        # Check if model is initialized, if not try to initialize it
+        if not translator:
+            success = initialize_model(language_pair)
+            if not success:
+                print(f"Local model initialization for {language_pair} failed, using fallback translation")
+                return use_fallback_translation(text, source_lang, target_lang)
+            # Get the translator after initialization
+            translator = translation_models[language_pair]["translator"]
+        
+        try:
+            # Ensure only the raw text is sent to the model
+            text_to_translate = text 
+            print(f"Translating text with local model (first 50 chars): {text_to_translate[:50]}...") 
             
-            try:
-                # Set a reasonable timeout
-                result = future.result(timeout=10)
-                
-                # Post-process the result for Arabic cultural adaptation if needed
-                if target_lang == "ar":
-                    result = culturally_adapt_arabic(result)
+            # Use a more reliable timeout approach with concurrent.futures
+            with concurrent.futures.ThreadPoolExecutor() as executor:
+                future = executor.submit(
+                    lambda: translator(
+                        text_to_translate,
+                        max_length=768
+                    )[0]["translation_text"]
+                )
                 
-                print(f"Translation successful (first 50 chars): {result[:50]}...")
-                return result
-            except concurrent.futures.TimeoutError:
-                print(f"Model inference timed out after 10 seconds, falling back to online translation")
-                return use_fallback_translation(text, source_lang, target_lang)
-            except Exception as e:
-                print(f"Error during model inference: {e}")
-                # If the model failed during inference, try to re-initialize it for next time
-                # but use fallback for this request
-                initialize_model()
-                return use_fallback_translation(text, source_lang, target_lang)
-    except Exception as e:
-        print(f"Error using local model: {e}")
-        traceback.print_exc()
+                try:
+                    # Set a reasonable timeout
+                    result = future.result(timeout=15)
+                    
+                    # Post-process the result for cultural adaptation if needed
+                    if target_lang == "ar":
+                        result = culturally_adapt_arabic(result)
+                    
+                    print(f"Translation successful (first 50 chars): {result[:50]}...")
+                    return result
+                except concurrent.futures.TimeoutError:
+                    print(f"Model inference timed out after 15 seconds, falling back to online translation")
+                    return use_fallback_translation(text, source_lang, target_lang)
+                except Exception as e:
+                    print(f"Error during model inference: {e}")
+                    # If the model failed during inference, try to re-initialize it for next time
+                    # but use fallback for this request
+                    initialize_model(language_pair)
+                    return use_fallback_translation(text, source_lang, target_lang)
+        except Exception as e:
+            print(f"Error using local model for {language_pair}: {e}")
+            traceback.print_exc()
+            return use_fallback_translation(text, source_lang, target_lang)
+    else:
+        # No local model for this language pair, use online services
+        print(f"No local model for {source_lang} to {target_lang}, using fallback translation")
         return use_fallback_translation(text, source_lang, target_lang)
 
 def culturally_adapt_arabic(text: str) -> str:
@@ -238,31 +403,39 @@ def culturally_adapt_arabic(text: str) -> str:
     return text
 
 # --- Function to check model status and trigger re-initialization if needed ---
-def check_and_reinitialize_model():
+def check_and_reinitialize_model(language_pair: str):
     """Check if model needs to be reinitialized and do so if necessary"""
-    global translator, model, tokenizer
+    global translation_models
+    
+    if language_pair not in translation_models:
+        print(f"Unsupported language pair: {language_pair}")
+        return False
+    
+    model_info = translation_models[language_pair]
+    translator = model_info["translator"]
     
     try:
         # If model isn't initialized yet, try to initialize it
-        if not model or not tokenizer or not translator:
-            print("Model not initialized. Attempting initialization...")
-            return initialize_model()
+        if not translator:
+            print(f"Model for {language_pair} not initialized. Attempting initialization...")
+            return initialize_model(language_pair)
             
         # Test the existing model with a simple translation
-        test_text = "hello"
+        source_lang, target_lang = language_pair.split('-')
+        test_text = "hello" if source_lang == "en" else "مرحبا"
         result = translator(test_text, max_length=128)
         
         # If we got a valid result, model is working fine
         if result and isinstance(result, list) and len(result) > 0:
-            print("Model check: Model is functioning correctly.")
+            print(f"Model check for {language_pair}: Model is functioning correctly.")
             return True
         else:
-            print("Model check: Model returned invalid result. Reinitializing...")
-            return initialize_model()
+            print(f"Model check for {language_pair}: Model returned invalid result. Reinitializing...")
+            return initialize_model(language_pair)
     except Exception as e:
-        print(f"Error checking model status: {e}")
+        print(f"Error checking model status for {language_pair}: {e}")
         print("Model may be in a bad state. Attempting reinitialization...")
-        return initialize_model()
+        return initialize_model(language_pair)
 
 def use_fallback_translation(text, source_lang, target_lang):
     """Use various fallback online translation services."""
@@ -286,7 +459,7 @@ def use_fallback_translation(text, source_lang, target_lang):
         "https://libretranslate.de/translate",
         "https://translate.argosopentech.com/translate",
         "https://translate.fedilab.app/translate",
-        "https://trans.zillyhuhn.com/translate"  # Additional server
+        "https://trans.zillyhuhn.com/translate"
     ]
     
     # Try each LibreTranslate server with increased timeout
@@ -302,8 +475,8 @@ def use_fallback_translation(text, source_lang, target_lang):
                 "target": target_lang
             }
             
-            # Use a longer timeout for the request (8 seconds instead of 5)
-            response = requests.post(server, json=payload, headers=headers, timeout=8)
+            # Use a longer timeout for the request
+            response = requests.post(server, json=payload, headers=headers, timeout=10)
             
             if response.status_code == 200:
                 result = response.json()
@@ -399,10 +572,13 @@ async def read_root(request: Request):
     """Serves the main HTML page."""
     return templates.TemplateResponse("index.html", {"request": request})
 
+@app.get("/api/languages")
+async def get_languages():
+    """Return the list of supported languages."""
+    return {"languages": LANGUAGE_MAP}
+
 @app.post("/translate/text")
 async def translate_text_endpoint(request: TranslationRequest):
-    global translator, model, tokenizer
-    
     print("[DEBUG] /translate/text endpoint called")
     try:
         # Explicitly extract fields from request to ensure they exist
@@ -412,6 +588,13 @@ async def translate_text_endpoint(request: TranslationRequest):
         
         print(f"[DEBUG] Received request: source_lang={source_lang}, target_lang={target_lang}, text={text[:50]}")
         
+        # Handle automatic language detection
+        detected_source_lang = None
+        if source_lang == "auto":
+            detected_source_lang = detect_language(text)
+            print(f"[DEBUG] Detected language: {detected_source_lang}")
+            source_lang = detected_source_lang
+        
         # Call our culturally-aware translate_text function
         translation_result = translate_text(text, source_lang, target_lang)
         
@@ -424,7 +607,17 @@ async def translate_text_endpoint(request: TranslationRequest):
             )
             
         print(f"[DEBUG] Translation successful: {translation_result[:100]}...")
-        return {"success": True, "translated_text": translation_result}
+        
+        # Include detected language in response if auto-detection was used
+        response_data = {
+            "success": True,
+            "translated_text": translation_result
+        }
+        
+        if detected_source_lang:
+            response_data["detected_source_lang"] = detected_source_lang
+            
+        return response_data
     
     except Exception as e:
         print(f"Critical error in translate_text_endpoint: {str(e)}")
@@ -441,35 +634,80 @@ async def translate_document_endpoint(
     target_lang: str = Form("ar")
 ):
     """Translates text extracted from an uploaded document."""
-    print("[DEBUG] /translate/document endpoint called (Updated Code Check)") # Added log
+    print("[DEBUG] /translate/document endpoint called") 
     try:
         # Extract text directly from the uploaded file
         print(f"[DEBUG] Processing file: {file.filename}, Source: {source_lang}, Target: {target_lang}")
-        extracted_text = await extract_text_from_file(file)
         
-        if not extracted_text:
-            print("[DEBUG] No text extracted from document.")
-            raise HTTPException(status_code=400, detail="Could not extract any text from the document.")
+        # Extract text from document
+        extracted_text = await extract_text_from_file(file)
+        if not extracted_text or extracted_text.strip() == "":
+            return JSONResponse(
+                status_code=400,
+                content={"success": False, "error": "Could not extract text from document"}
+            )
+            
+        # Handle automatic language detection
+        detected_source_lang = None
+        if source_lang == "auto":
+            detected_source_lang = detect_language(extracted_text)
+            print(f"[DEBUG] Detected document language: {detected_source_lang}")
+            source_lang = detected_source_lang
 
-        # Translate the extracted text using the updated translate_text function
-        print("[DEBUG] Calling translate_text for document content...")
+        # Translate the extracted text
         translated_text = translate_text(extracted_text, source_lang, target_lang)
-
-        print(f"[DEBUG] Document translation successful. Returning result for {file.filename}")
-        return JSONResponse(content={
+        
+        # Prepare response
+        response = {
+            "success": True,
             "original_filename": file.filename,
-            "detected_source_lang": source_lang, # Assuming source_lang is detected or provided correctly
+            "original_text": extracted_text[:2000] + ("..." if len(extracted_text) > 2000 else ""),
             "translated_text": translated_text
-        })
-
-    except HTTPException as http_exc:
-        # Re-raise HTTPExceptions directly
-        raise http_exc
+        }
+        
+        # Include detected language in response if auto-detection was used
+        if detected_source_lang:
+            response["detected_source_lang"] = detected_source_lang
+            
+        return response
+        
+    except HTTPException as e:
+        # Re-raise HTTP exceptions
+        raise e
     except Exception as e:
-        print(f"Document translation error: {e}")
+        print(f"Error in document translation: {str(e)}")
         traceback.print_exc()
-        # Return a generic error response
-        raise HTTPException(status_code=500, detail=f"Document translation error: {str(e)}")
+        return JSONResponse(
+            status_code=500,
+            content={"success": False, "error": f"Document translation failed: {str(e)}"}
+        )
+
+# Initialize models during startup
+@app.on_event("startup")
+async def startup_event():
+    """Initialize models during application startup."""
+    # Initial model loading for the most common language pairs
+    # We load them asynchronously to not block the startup
+    try:
+        # Try to initialize English-to-Arabic model
+        initialize_model("en-ar")
+    except Exception as e:
+        print(f"Error initializing en-ar model at startup: {e}")
+    
+    try:
+        # Try to initialize Arabic-to-English model 
+        initialize_model("ar-en")
+    except Exception as e:
+        print(f"Error initializing ar-en model at startup: {e}")
+        
+    # Initialize additional models for common language pairs
+    # These will be initialized in the background without blocking startup
+    common_pairs = ["en-fr", "fr-en", "en-es", "es-en"]
+    for pair in common_pairs:
+        try:
+            initialize_model(pair)
+        except Exception as e:
+            print(f"Error initializing {pair} model at startup: {e}")
 
 # --- Run the server (for local development) ---
 if __name__ == "__main__":

static/script.js

@@ -1,193 +1,532 @@
 // Wait for the DOM to be fully loaded before attaching event handlers
 window.onload = function() {
-    console.log('Window fully loaded, initializing translation app');
-    
-    // Get form elements ONCE after load
-    const textTranslationForm = document.querySelector('#text-translation-form');
-    const docTranslationForm = document.querySelector('#doc-translation-form');
-    
-    // Get text form OUTPUT elements ONCE
-    const textLoadingElement = document.getElementById('text-loading');
-    const debugElement = document.getElementById('debug-info');
-    const errorElement = document.getElementById('error-message');
-    const textResultBox = document.getElementById('text-result');
-    const textOutputElement = document.getElementById('text-output');
-
-    // Check if essential text elements were found on load (excluding inputs used via FormData)
-    if (!textTranslationForm) { // Only check form itself now
-        console.error('CRITICAL: Text translation form not found on window load!');
-        if (errorElement) {
-            errorElement.textContent = 'Error: Could not find the text translation form element. Check HTML ID.';
-            errorElement.style.display = 'block';
+    console.log('Window fully loaded, initializing Tarjama app');
+    
+    // Get navigation elements
+    const textTabLink = document.querySelector('nav ul li a[href="#text-translation"]');
+    const docTabLink = document.querySelector('nav ul li a[href="#document-translation"]');
+    const textSection = document.getElementById('text-translation');
+    const docSection = document.getElementById('document-translation');
+    
+    // Get form elements
+    const textTranslationForm = document.getElementById('text-translation-form');
+    const docTranslationForm = document.getElementById('doc-translation-form');
+    
+    // UI elements
+    const textInput = document.getElementById('text-input');
+    const textResult = document.getElementById('text-result');
+    const docResult = document.getElementById('document-translation');
+    const textOutput = document.getElementById('text-output');
+    const docOutput = document.getElementById('doc-output');
+    const docInputText = document.getElementById('doc-input-text');
+    const textLoadingIndicator = document.getElementById('text-loading');
+    const docLoadingIndicator = document.getElementById('doc-loading');
+    const errorMessageElement = document.getElementById('error-message');
+    const notificationElement = document.getElementById('notification');
+    const charCountElement = document.getElementById('char-count');
+    const fileNameDisplay = document.getElementById('file-name-display');
+    const docFilename = document.getElementById('doc-filename');
+    const docSourceLang = document.getElementById('doc-source-lang');
+    
+    // Language selectors
+    const sourceLangText = document.getElementById('source-lang-text');
+    const targetLangText = document.getElementById('target-lang-text');
+    const sourceLangDoc = document.getElementById('source-lang-doc');
+    const targetLangDoc = document.getElementById('target-lang-doc');
+    
+    // Get quick phrases elements
+    const quickPhrasesContainer = document.getElementById('quick-phrases');
+    const quickPhraseButtons = document.querySelectorAll('.quick-phrase');
+    
+    // Control buttons
+    const swapLangBtn = document.getElementById('swap-lang-btn');
+    const copyTextBtn = document.getElementById('copy-text-btn');
+    const clearTextBtn = document.getElementById('clear-text-btn');
+    
+    // RTL language handling - list of languages that use RTL
+    const rtlLanguages = ['ar', 'he'];
+    
+    // Tab navigation
+    if (textTabLink && docTabLink && textSection && docSection) {
+        textTabLink.addEventListener('click', function(e) {
+            e.preventDefault();
+            docSection.style.display = 'none';
+            textSection.style.display = 'block';
+            textTabLink.parentElement.classList.add('active');
+            docTabLink.parentElement.classList.remove('active');
+        });
+        
+        docTabLink.addEventListener('click', function(e) {
+            e.preventDefault();
+            textSection.style.display = 'none';
+            docSection.style.display = 'block';
+            docTabLink.parentElement.classList.add('active');
+            textTabLink.parentElement.classList.remove('active');
+        });
+    }
+    
+    // Character count
+    if (textInput && charCountElement) {
+        textInput.addEventListener('input', function() {
+            const charCount = textInput.value.length;
+            charCountElement.textContent = `${charCount}`;
+            
+            // Add warning class if approaching or exceeding character limit
+            if (charCount > 3000) {
+                charCountElement.className = 'char-count-warning';
+            } else if (charCount > 2000) {
+                charCountElement.className = 'char-count-approaching';
+            } else {
+                charCountElement.className = '';
+            }
+        });
+    }
+    
+    // Quick phrases implementation
+    if (quickPhraseButtons && quickPhraseButtons.length > 0) {
+        quickPhraseButtons.forEach(button => {
+            button.addEventListener('click', function(e) {
+                e.preventDefault();
+                const phrase = this.getAttribute('data-phrase');
+                
+                if (phrase && textInput) {
+                    // Insert the phrase at cursor position, or append to end
+                    if (typeof textInput.selectionStart === 'number') {
+                        const startPos = textInput.selectionStart;
+                        const endPos = textInput.selectionEnd;
+                        const currentValue = textInput.value;
+                        const spaceChar = currentValue && currentValue[startPos - 1] !== ' ' ? ' ' : '';
+                        
+                        // Insert phrase at cursor position with space if needed
+                        textInput.value = currentValue.substring(0, startPos) + 
+                                          spaceChar + phrase + 
+                                          currentValue.substring(endPos);
+                                          
+                        // Move cursor after inserted phrase
+                        textInput.selectionStart = startPos + phrase.length + spaceChar.length;
+                        textInput.selectionEnd = textInput.selectionStart;
+                    } else {
+                        // Fallback for browsers that don't support selection
+                        const currentValue = textInput.value;
+                        const spaceChar = currentValue && currentValue[currentValue.length - 1] !== ' ' ? ' ' : '';
+                        textInput.value += spaceChar + phrase;
+                    }
+                    
+                    // Trigger input event to update character count
+                    const inputEvent = new Event('input', { bubbles: true });
+                    textInput.dispatchEvent(inputEvent);
+                    
+                    // Focus back on the input
+                    textInput.focus();
+                }
+            });
+        });
+    }
+    
+    // Language swap functionality
+    if (swapLangBtn && sourceLangText && targetLangText) {
+        swapLangBtn.addEventListener('click', function(e) {
+            e.preventDefault();
+            
+            // Don't swap if source is "auto" (language detection)
+            if (sourceLangText.value === 'auto') {
+                showNotification('Cannot swap when source language is set to auto-detect.');
+                return;
+            }
+            
+            // Store the current values
+            const sourceValue = sourceLangText.value;
+            const targetValue = targetLangText.value;
+            
+            // Swap the values
+            sourceLangText.value = targetValue;
+            targetLangText.value = sourceValue;
+            
+            // If we have translated text, trigger a new translation in the opposite direction
+            if (textOutput.textContent.trim() !== '') {
+                // Update the input with the current output
+                textInput.value = textOutput.textContent;
+                
+                // Update the character count 
+                const inputEvent = new Event('input', { bubbles: true });
+                textInput.dispatchEvent(inputEvent);
+                
+                // Trigger translation
+                const clickEvent = new Event('click');
+                document.querySelector('#translate-text-btn').dispatchEvent(clickEvent);
+            }
+            
+            // Apply RTL styling as needed
+            applyRtlStyling(sourceLangText.value, textInput);
+            applyRtlStyling(targetLangText.value, textOutput);
+        });
+    }
+    
+    // Apply RTL styling based on language
+    function applyRtlStyling(langCode, element) {
+        if (element) {
+            if (rtlLanguages.includes(langCode)) {
+                element.style.direction = 'rtl';
+                element.style.textAlign = 'right';
+            } else {
+                element.style.direction = 'ltr';
+                element.style.textAlign = 'left';
+            }
         }
-        return; 
     }
     
-    // Set up text translation form
-    console.log('Text translation form found on load');
-    textTranslationForm.addEventListener('submit', function(event) {
-        event.preventDefault();
-        console.log('Text translation form submitted');
+    // Handle language change for proper text direction
+    function handleLanguageChange() {
+        // Set text direction based on selected source language
+        if (sourceLangText && textInput) {
+            applyRtlStyling(sourceLangText.value, textInput);
+        }
         
-        // Hide previous results/errors
-        if (textResultBox) textResultBox.style.display = 'none';
-        if (errorElement) errorElement.style.display = 'none';
-        if (debugElement) debugElement.style.display = 'none';
+        // Set text direction based on selected target language
+        if (targetLangText && textOutput) {
+            applyRtlStyling(targetLangText.value, textOutput);
+        }
         
-        // --- Use FormData Approach --- 
-        try {
-            const formData = new FormData(event.target); // event.target is the form
-            
-            // Get values using the 'name' attributes from the HTML
-            const text = formData.get('text') ? formData.get('text').trim() : '';
-            const sourceLangValue = formData.get('source_lang');
-            const targetLangValue = formData.get('target_lang');
+        if (sourceLangDoc && docInputText) {
+            applyRtlStyling(sourceLangDoc.value, docInputText);
+        }
+        
+        if (targetLangDoc && docOutput) {
+            applyRtlStyling(targetLangDoc.value, docOutput);
+        }
+    }
+    
+    // Add event listeners for language changes
+    if (sourceLangText) sourceLangText.addEventListener('change', handleLanguageChange);
+    if (targetLangText) targetLangText.addEventListener('change', handleLanguageChange);
+    if (sourceLangDoc) sourceLangDoc.addEventListener('change', handleLanguageChange);
+    if (targetLangDoc) targetLangDoc.addEventListener('change', handleLanguageChange);
+    
+    // Copy translation to clipboard functionality
+    if (copyTextBtn) {
+        copyTextBtn.addEventListener('click', function() {
+            if (textOutput && textOutput.textContent.trim() !== '') {
+                navigator.clipboard.writeText(textOutput.textContent)
+                    .then(() => {
+                        showNotification('Translation copied to clipboard!');
+                    })
+                    .catch(err => {
+                        console.error('Error copying text: ', err);
+                        showNotification('Failed to copy text. Please try again.');
+                    });
+            }
+        });
+    }
+    
+    // Clear text functionality
+    if (clearTextBtn) {
+        clearTextBtn.addEventListener('click', function() {
+            if (textInput) {
+                textInput.value = '';
+                textOutput.textContent = '';
+                
+                // Update character count
+                const inputEvent = new Event('input', { bubbles: true });
+                textInput.dispatchEvent(inputEvent);
+                
+                // Focus back on the input
+                textInput.focus();
+            }
+        });
+    }
+    
+    // Text translation form submission
+    if (textTranslationForm) {
+        textTranslationForm.addEventListener('submit', function(e) {
+            e.preventDefault();
             
-            console.log('[DEBUG] FormData values - Text:', text, 'Source:', sourceLangValue, 'Target:', targetLangValue);
-
+            const text = textInput.value.trim();
             if (!text) {
-                showError('Please enter text to translate');
+                showNotification('Please enter text to translate.');
                 return;
             }
             
-            if (!sourceLangValue || !targetLangValue) {
-                console.error('Could not read language values from FormData!');
-                showError('Internal error: Language selection missing.');
+            const sourceLang = sourceLangText.value;
+            const targetLang = targetLangText.value;
+            
+            translateText(text, sourceLang, targetLang);
+        });
+    }
+    
+    // Document translation form submission
+    if (docTranslationForm) {
+        docTranslationForm.addEventListener('submit', function(e) {
+            e.preventDefault();
+            
+            const fileInput = document.getElementById('doc-input');
+            if (!fileInput.files || fileInput.files.length === 0) {
+                showNotification('Please select a document to translate.');
                 return;
             }
             
-            // Show loading indicator
-            if (textLoadingElement) textLoadingElement.style.display = 'block';
+            const file = fileInput.files[0];
+            const sourceLang = sourceLangDoc.value;
+            const targetLang = targetLangDoc.value;
             
-            // Create payload
-            const payload = {
+            translateDocument(file, sourceLang, targetLang);
+        });
+    }
+    
+    // File drag and drop 
+    const dropZone = document.getElementById('drop-zone');
+    const fileInput = document.getElementById('doc-input');
+    
+    if (dropZone && fileInput) {
+        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+            dropZone.addEventListener(eventName, preventDefaults, false);
+        });
+        
+        function preventDefaults(e) {
+            e.preventDefault();
+            e.stopPropagation();
+        }
+        
+        ['dragenter', 'dragover'].forEach(eventName => {
+            dropZone.addEventListener(eventName, highlight, false);
+        });
+        
+        ['dragleave', 'drop'].forEach(eventName => {
+            dropZone.addEventListener(eventName, unhighlight, false);
+        });
+        
+        function highlight() {
+            dropZone.classList.add('highlight');
+        }
+        
+        function unhighlight() {
+            dropZone.classList.remove('highlight');
+        }
+        
+        dropZone.addEventListener('drop', handleDrop, false);
+        
+        function handleDrop(e) {
+            const dt = e.dataTransfer;
+            const files = dt.files;
+            
+            if (files && files.length > 0) {
+                fileInput.files = files;
+                const fileName = files[0].name;
+                fileNameDisplay.textContent = fileName;
+                fileNameDisplay.style.display = 'block';
+                docFilename.value = fileName;
+            }
+        }
+        
+        // Handle file selection through the input
+        fileInput.addEventListener('change', function() {
+            if (this.files && this.files.length > 0) {
+                const fileName = this.files[0].name;
+                fileNameDisplay.textContent = fileName;
+                fileNameDisplay.style.display = 'block';
+                docFilename.value = fileName;
+            } else {
+                fileNameDisplay.textContent = '';
+                fileNameDisplay.style.display = 'none';
+                docFilename.value = '';
+            }
+        });
+    }
+    
+    // Text translation function
+    function translateText(text, sourceLang, targetLang) {
+        if (textLoadingIndicator) textLoadingIndicator.style.display = 'block';
+        if (errorMessageElement) errorMessageElement.style.display = 'none';
+        
+        // Call the API
+        fetch('/translate/text', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
                 text: text,
-                source_lang: sourceLangValue,
-                target_lang: targetLangValue
-            };
-            
-            console.log('Sending payload:', payload);
-            
-            // Send API request
-            fetch('/translate/text', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify(payload)
-            })
-            .then(response => {
-                if (!response.ok) throw new Error('Server error: ' + response.status);
-                return response.text(); // Get raw text first
-            })
-            .then(responseText => {
-                console.log('Response received:', responseText);
-                let data;
-                try {
-                    data = JSON.parse(responseText);
-                } catch (error) {
-                    console.error("Failed to parse JSON:", responseText);
-                    throw new Error('Invalid response format from server');
-                }
+                source_lang: sourceLang,
+                target_lang: targetLang
+            }),
+        })
+        .then(response => {
+            if (!response.ok) {
+                throw new Error(`HTTP error! Status: ${response.status}`);
+            }
+            return response.json();
+        })
+        .then(data => {
+            if (textLoadingIndicator) textLoadingIndicator.style.display = 'none';
+            
+            if (data.success === false) {
+                throw new Error(data.error || 'Translation failed with an unknown error');
+            }
+            
+            // Handle language detection result if present
+            if (data.detected_source_lang && sourceLang === 'auto') {
+                showNotification(`Detected language: ${getLanguageName(data.detected_source_lang)}`);
                 
-                if (!data.success || !data.translated_text) {
-                    throw new Error(data.error || 'No translation returned or success flag false');
+                // Optionally update the source language dropdown to show the detected language
+                if (sourceLangText && data.detected_source_lang) {
+                    // Just for UI feedback - no need to change the actual value since 
+                    // we want to keep 'auto' selected for future translations
+                    const detectedOption = Array.from(sourceLangText.options).find(
+                        option => option.value === data.detected_source_lang
+                    );
+                    
+                    if (detectedOption) {
+                        // Visual indication of detected language
+                        sourceLangText.parentElement.setAttribute('data-detected', 
+                            `Detected: ${detectedOption.text}`);
+                    }
                 }
+            }
+            
+            // Show translation result
+            if (textOutput) {
+                textOutput.textContent = data.translated_text;
                 
-                // Show result
-                if (textResultBox && textOutputElement) {
-                    textOutputElement.textContent = data.translated_text;
-                    textResultBox.style.display = 'block';
-                }
-            })
-            .catch(error => {
-                showError(error.message || 'Translation failed');
-                console.error('Error:', error);
-            })
-            .finally(() => {
-                if (textLoadingElement) textLoadingElement.style.display = 'none';
-            });
-
-        } catch (e) {
-            console.error('FATAL: Error processing form data or submitting:', e);
-            showError('Internal error processing form submission. Check console.');
-        }
-        // --- End FormData Approach ---
-    });
-    
-    // Document translation handler
-    if (docTranslationForm) {
-        console.log('Document translation form found on load');
-        docTranslationForm.addEventListener('submit', function(event) {
-            event.preventDefault();
-            console.log('Document translation form submitted');
-            
-            // Clear previous results and errors
-            document.querySelectorAll('#doc-result, #error-message').forEach(el => {
-                if (el) el.style.display = 'none';
-            });
+                // Enable copy button
+                if (copyTextBtn) copyTextBtn.disabled = false;
+                
+                // Apply RTL styling based on target language
+                applyRtlStyling(targetLang, textOutput);
+            }
             
-            // Get form elements
-            const fileInput = docTranslationForm.querySelector('#doc-input');
-            const loadingIndicator = document.querySelector('#doc-loading');
+            // Show the text result container if it was hidden
+            if (textResult) textResult.style.display = 'block';
+        })
+        .catch(error => {
+            console.error('Error during translation:', error);
             
-            if (!fileInput || !fileInput.files || fileInput.files.length === 0) {
-                showError('Please select a document to upload');
-                return;
+            if (textLoadingIndicator) textLoadingIndicator.style.display = 'none';
+            
+            // Show error message
+            if (errorMessageElement) {
+                errorMessageElement.style.display = 'block';
+                errorMessageElement.textContent = `Translation error: ${error.message}`;
+            }
+        });
+    }
+    
+    // Document translation function
+    function translateDocument(file, sourceLang, targetLang) {
+        if (docLoadingIndicator) docLoadingIndicator.style.display = 'block';
+        if (errorMessageElement) errorMessageElement.style.display = 'none';
+        
+        const formData = new FormData();
+        formData.append('file', file);
+        formData.append('source_lang', sourceLang);
+        formData.append('target_lang', targetLang);
+        
+        fetch('/translate/document', {
+            method: 'POST',
+            body: formData,
+        })
+        .then(response => {
+            if (!response.ok) {
+                throw new Error(`HTTP error! Status: ${response.status}`);
             }
+            return response.json();
+        })
+        .then(data => {
+            if (docLoadingIndicator) docLoadingIndicator.style.display = 'none';
             
-            // Show loading indicator
-            if (loadingIndicator) loadingIndicator.style.display = 'block';
+            if (data.success === false) {
+                throw new Error(data.error || 'Document translation failed');
+            }
             
-            // Create form data
-            const formData = new FormData(docTranslationForm);
+            // Handle language detection result if present
+            if (data.detected_source_lang && sourceLang === 'auto') {
+                showNotification(`Detected document language: ${getLanguageName(data.detected_source_lang)}`);
+            }
             
-            // Make API request
-            fetch('/translate/document', {
-                method: 'POST',
-                body: formData
-            })
-            .then(function(response) {
-                if (!response.ok) {
-                    throw new Error(`Server returned ${response.status}`);
-                }
-                return response.json();
-            })
-            .then(function(data) {
-                if (!data.translated_text) {
-                    throw new Error('No translation returned');
-                }
+            // Show the original text
+            if (docInputText) {
+                docInputText.textContent = data.original_text;
                 
-                // Display result
-                const resultBox = document.querySelector('#doc-result');
-                const outputEl = document.querySelector('#doc-output');
-                const filenameEl = document.querySelector('#doc-filename');
-                const sourceLangEl = document.querySelector('#doc-source-lang');
-                
-                if (resultBox && outputEl) {
-                    if (filenameEl) filenameEl.textContent = data.original_filename || 'N/A';
-                    if (sourceLangEl) sourceLangEl.textContent = data.detected_source_lang || 'N/A';
-                    outputEl.textContent = data.translated_text;
-                    resultBox.style.display = 'block';
-                }
-            })
-            .catch(function(error) {
-                showError(error.message);
-            })
-            .finally(function() {
-                if (loadingIndicator) {
-                    loadingIndicator.style.display = 'none';
+                // Apply RTL styling based on source language
+                if (data.detected_source_lang && sourceLang === 'auto') {
+                    applyRtlStyling(data.detected_source_lang, docInputText);
+                } else {
+                    applyRtlStyling(sourceLang, docInputText);
                 }
-            });
+            }
+            
+            // Show the translated text
+            if (docOutput) {
+                docOutput.textContent = data.translated_text;
+                
+                // Apply RTL styling based on target language
+                applyRtlStyling(targetLang, docOutput);
+            }
+            
+            // Show the document result container
+            if (docResult) docResult.style.display = 'block';
+        })
+        .catch(error => {
+            console.error('Error during document translation:', error);
+            
+            if (docLoadingIndicator) docLoadingIndicator.style.display = 'none';
+            
+            // Show error message
+            if (errorMessageElement) {
+                errorMessageElement.style.display = 'block';
+                errorMessageElement.textContent = `Document translation error: ${error.message}`;
+            }
         });
-    } else {
-        console.error('Document translation form not found on load!');
     }
     
-    // Helper function to show errors
-    function showError(message) {
-        if (errorElement) {
-            errorElement.textContent = 'Error: ' + message;
-            errorElement.style.display = 'block';
+    // Helper function to get language name from code
+    function getLanguageName(code) {
+        // Hard-coded mapping for common languages
+        const langMap = {
+            'ar': 'Arabic',
+            'en': 'English', 
+            'fr': 'French',
+            'es': 'Spanish',
+            'de': 'German',
+            'zh': 'Chinese',
+            'ru': 'Russian',
+            'ja': 'Japanese',
+            'hi': 'Hindi',
+            'auto': 'Auto-detect'
+        };
+        
+        // Try to get from our map
+        if (langMap[code]) {
+            return langMap[code];
+        }
+        
+        // Try to get from the select option text
+        if (sourceLangText) {
+            const option = Array.from(sourceLangText.options).find(opt => opt.value === code);
+            if (option) {
+                return option.text;
+            }
+        }
+        
+        // Fallback to code
+        return code;
+    }
+    
+    // Display notification
+    function showNotification(message) {
+        if (notificationElement) {
+            notificationElement.textContent = message;
+            notificationElement.style.display = 'block';
+            notificationElement.classList.add('show');
+            
+            // Hide after 3 seconds
+            setTimeout(() => {
+                notificationElement.classList.remove('show');
+                setTimeout(() => {
+                    notificationElement.style.display = 'none';
+                }, 300);
+            }, 3000);
         }
-        console.error('Error displayed:', message);
     }
+    
+    // Initialize by applying RTL styling based on initial language selection
+    handleLanguageChange();
 };

static/style.css

@@ -1,118 +1,574 @@
+/* Global styles */
+:root {
+    --primary-color: #4285F4;
+    --primary-dark: #3367D6;
+    --secondary-color: #34A853;
+    --accent-color: #FBBC05;
+    --danger-color: #EA4335;
+    --text-dark: #202124;
+    --text-light: #5f6368;
+    --gray-light: #f5f5f5;
+    --gray-medium: #e8eaed;
+    --gray-border: #dadce0;
+    --white: #ffffff;
+    --rtl-dir: rtl;
+    --ltr-dir: ltr;
+    --box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    --border-radius: 8px;
+    --transition-speed: 0.3s;
+    --panel-background: #f8f9fa;
+}
+
+/* Reset and base styles */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
 body {
-    font-family: sans-serif;
-    margin: 20px;
-    background-color: #f4f4f4;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     line-height: 1.6;
+    color: #333;
+    background-color: #f9f9f9;
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
 }
 
-h1 {
-    text-align: center;
+/* Header styles */
+header {
+    background-color: #fff;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    padding: 1rem 2rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.logo {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+}
+
+.logo h1 {
+    font-size: 2rem;
+    font-weight: 700;
+}
+
+.primary-color {
+    color: #4285f4;
+}
+
+.tagline {
+    font-size: 0.9rem;
+    color: #666;
+    margin-top: -5px;
+}
+
+nav ul {
+    display: flex;
+    list-style: none;
+}
+
+nav ul li {
+    margin-left: 1.5rem;
+    position: relative;
+}
+
+nav ul li::after {
+    content: '';
+    display: block;
+    width: 0;
+    height: 3px;
+    background-color: #4285f4;
+    position: absolute;
+    bottom: -10px;
+    left: 0;
+    transition: width 0.3s;
+}
+
+nav ul li.active::after,
+nav ul li:hover::after {
+    width: 100%;
+}
+
+nav a {
     color: #333;
+    text-decoration: none;
+    font-weight: 500;
+    font-size: 1rem;
+    padding: 0.5rem 0;
+    transition: color 0.3s;
 }
 
-.container {
-    background: #fff;
-    padding: 20px;
-    margin-bottom: 20px;
-    border-radius: 8px;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+nav a:hover,
+nav ul li.active a {
+    color: #4285f4;
 }
 
-h2 {
-    color: #555;
+/* Main content styles */
+main {
+    flex: 1;
+    padding: 2rem;
+    max-width: 1200px;
+    margin: 0 auto;
+    width: 100%;
+}
+
+.translation-section {
+    width: 100%;
+}
+
+.hidden {
+    display: none;
+}
+
+.translation-container {
+    background-color: #fff;
+    border-radius: 10px;
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
+    overflow: hidden;
+}
+
+.translation-box {
+    padding: 1.5rem;
+}
+
+/* Language controls */
+.language-controls {
+    display: flex;
+    align-items: center;
     border-bottom: 1px solid #eee;
-    padding-bottom: 10px;
-    margin-top: 0;
+    padding-bottom: 1.5rem;
+    margin-bottom: 1.5rem;
 }
 
-.input-group {
-    margin-bottom: 15px;
+.language-selector {
+    flex: 1;
 }
 
-label {
-    display: block;
-    margin-bottom: 5px;
+.lang-select {
+    width: 100%;
+    padding: 0.8rem;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    font-size: 1rem;
+    background-color: #f9f9f9;
+    cursor: pointer;
+    transition: border-color 0.3s, box-shadow 0.3s;
+    appearance: none;
+    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
+    background-repeat: no-repeat;
+    background-position: right 0.7rem center;
+    background-size: 1em;
+    padding-right: 2.5rem;
+}
+
+.lang-select:focus {
+    outline: none;
+    border-color: #4285f4;
+    box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.25);
+}
+
+.lang-select option {
+    font-size: 0.95rem;
+    padding: 0.5rem;
+}
+
+.lang-select option[value="auto"] {
     font-weight: bold;
-    color: #333;
 }
 
-select,
-textarea,
-input[type="file"] {
+.swap-languages {
+    margin: 0 1.5rem;
+}
+
+.swap-languages button {
+    background-color: #f1f1f1;
+    border: none;
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    cursor: pointer;
+    transition: background-color 0.3s, transform 0.3s;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.swap-languages button:hover {
+    background-color: #e0e0e0;
+    transform: rotate(180deg);
+}
+
+.swap-languages i {
+    font-size: 1.2rem;
+    color: #555;
+}
+
+/* Translation panels */
+.translation-panels {
+    display: flex;
+    gap: 2rem;
+    margin-bottom: 1.5rem;
+}
+
+.panel {
+    flex: 1;
+    border: 1px solid #eee;
+    border-radius: 8px;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+}
+
+.panel-header {
+    background-color: #f9f9f9;
+    padding: 0.8rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid #eee;
+}
+
+.panel-title {
+    font-weight: 600;
+    color: #555;
+}
+
+.panel-actions {
+    display: flex;
+}
+
+.icon-button {
+    background: none;
+    border: none;
+    font-size: 1rem;
+    padding: 0.3rem;
+    cursor: pointer;
+    border-radius: 3px;
+    transition: background-color 0.2s;
+    color: #777;
+}
+
+.icon-button:hover {
+    background-color: #e0e0e0;
+    color: #4285f4;
+}
+
+textarea#text-input {
+    resize: none;
+    border: none;
+    padding: 1rem;
     width: 100%;
-    padding: 10px;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-    box-sizing: border-box; /* Prevents padding from adding to width */
+    height: 200px;
+    font-family: inherit;
+    font-size: 1rem;
+}
+
+textarea#text-input:focus {
+    outline: none;
 }
 
-textarea {
-    min-height: 100px;
-    resize: vertical;
+#text-result,
+.document-content {
+    padding: 1rem;
+    height: 200px;
+    overflow-y: auto;
+    background-color: #fcfcfc;
+    flex: 1;
 }
 
-button {
-    background-color: #5cb85c;
+.panel-footer {
+    padding: 0.8rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: #f9f9f9;
+    border-top: 1px solid #eee;
+}
+
+.char-count {
+    font-size: 0.85rem;
+    color: #777;
+}
+
+.translate-button {
+    background-color: #4285f4;
     color: white;
-    padding: 10px 15px;
     border: none;
-    border-radius: 4px;
+    border-radius: 5px;
+    padding: 0.6rem 1.2rem;
+    font-size: 1rem;
     cursor: pointer;
-    font-size: 1em;
-    transition: background-color 0.3s ease;
+    transition: background-color 0.3s;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
 }
 
-button:hover {
-    background-color: #4cae4c;
+.translate-button:hover {
+    background-color: #3367d6;
 }
 
-.result-box {
-    margin-top: 20px;
-    padding: 15px;
-    background-color: #e9e9e9;
-    border: 1px solid #ddd;
-    border-radius: 4px;
-    min-height: 50px;
+.translate-button:disabled {
+    background-color: #b3b3b3;
+    cursor: not-allowed;
 }
 
-.result-box h3 {
-    margin-top: 0;
-    color: #333;
+/* Document upload area */
+.file-upload-area {
+    border: 2px dashed #ddd;
+    border-radius: 10px;
+    padding: 2.5rem;
+    text-align: center;
+    margin: 2rem 0;
+    transition: border-color 0.3s, background-color 0.3s;
+}
+
+.file-upload-area:hover {
+    background-color: #f9f9f9;
+    border-color: #4285f4;
+}
+
+.file-upload-label {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    cursor: pointer;
+}
+
+.file-upload-label i {
+    font-size: 2.5rem;
+    color: #4285f4;
+    margin-bottom: 1rem;
+}
+
+.file-types {
+    font-size: 0.85rem;
+    color: #777;
+    margin-top: 0.5rem;
+}
+
+input.file-input {
+    display: none;
+}
+
+#file-name-display {
+    margin-top: 1rem;
+    font-size: 0.9rem;
+    color: #4285f4;
+    font-weight: 500;
+}
+
+.document-result-area {
+    margin-top: 2rem;
+}
+
+.document-panels {
+    display: none;
+}
+
+.document-actions {
+    display: flex;
+    justify-content: center;
+    margin-top: 1rem;
+}
+
+.file-info {
+    font-size: 0.85rem;
+    color: #777;
+}
+
+/* Loading indicator */
+.loading-indicator {
+    display: none;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+    text-align: center;
+    color: #555;
 }
 
-pre {
-    white-space: pre-wrap; /* Allows text to wrap */
-    word-wrap: break-word; /* Breaks long words */
-    background: #f9f9f9;
-    padding: 10px;
-    border-radius: 4px;
+.spinner {
+    width: 40px;
+    height: 40px;
+    border: 4px solid rgba(66, 133, 244, 0.2);
+    border-left-color: #4285f4;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+    margin-bottom: 1rem;
+}
+
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
 }
 
-code {
+/* Notification and error messages */
+.notification,
+.error-message {
+    position: fixed;
+    bottom: 2rem;
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 0.8rem 1.5rem;
+    border-radius: 5px;
+    font-weight: 500;
+    z-index: 100;
+    display: none;
+    opacity: 0;
+    transition: opacity 0.3s;
+    max-width: 90%;
+}
+
+.notification {
+    background-color: #4caf50;
+    color: white;
+}
+
+.error-message {
+    background-color: #f44336;
+    color: white;
+}
+
+/* Footer */
+footer {
+    background-color: #333;
+    color: #fff;
+    padding: 1.5rem;
+    text-align: center;
+}
+
+.footer-content p {
+    font-size: 0.9rem;
+    opacity: 0.8;
+}
+
+/* Debug info */
+.debug-info {
+    background-color: #ffe082;
+    color: #333;
+    padding: 1rem;
+    margin: 1rem 0;
+    border-radius: 5px;
     font-family: monospace;
-    font-size: 0.95em;
+    display: none;
+}
+
+/* Quick phrases styles */
+.quick-phrases-container {
+    margin-top: 1.5rem;
+    border-top: 1px solid #eee;
+    padding-top: 1.5rem;
+}
+
+.quick-phrases {
+    margin-bottom: 1.5rem;
+    background-color: var(--panel-background);
+    border-radius: var(--border-radius);
+    padding: 1rem;
+    border: 1px solid var(--gray-border);
 }
 
-.error-box {
-    margin-top: 20px;
-    padding: 15px;
-    background-color: #f2dede;
-    border: 1px solid #ebccd1;
-    color: #a94442;
-    border-radius: 4px;
+.quick-phrases h3 {
+    margin-bottom: 0.8rem;
+    color: var(--text-dark);
+    font-size: 0.95rem;
+    font-weight: 600;
 }
 
-/* RTL support for results */
-[dir="rtl"] {
-    text-align: right;
+.phrases-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
 }
 
-/* Basic responsiveness */
-@media (max-width: 600px) {
-    body {
-        margin: 10px;
+.phrase-btn {
+    background-color: var(--white);
+    border: 1px solid var(--gray-border);
+    border-radius: 20px;
+    padding: 0.4rem 0.8rem;
+    font-size: 0.85rem;
+    cursor: pointer;
+    transition: all var(--transition-speed);
+}
+
+.phrase-btn:hover {
+    background-color: var(--primary-color);
+    color: var(--white);
+    border-color: var(--primary-color);
+}
+
+.phrase-btn.ar {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+/* Auto-detect language badge */
+.detected-language {
+    display: inline-block;
+    background-color: #e8f0fe;
+    color: #1a73e8;
+    padding: 0.2rem 0.5rem;
+    border-radius: 3px;
+    font-size: 0.8rem;
+    margin-left: 0.5rem;
+    font-weight: normal;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+    .translation-panels {
+        flex-direction: column;
+    }
+    
+    header {
+        flex-direction: column;
+        padding: 1rem;
+    }
+    
+    nav ul li {
+        margin-left: 1rem;
+        margin-top: 0.5rem;
+    }
+    
+    .language-controls {
+        flex-direction: column;
+        gap: 1rem;
+        flex-wrap: wrap;
     }
-    .container {
-        padding: 15px;
+    
+    .language-selector {
+        flex-basis: 100%;
     }
+    
+    .swap-languages {
+        margin: 0 auto;
+    }
+    
+    .translation-box {
+        padding: 1rem;
+    }
+    
+    .file-upload-area {
+        padding: 1.5rem;
+    }
+}
+
+/* Animation for loading and transitions */
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+.translated-text {
+    animation: fadeIn 0.4s ease-in-out;
 }

templates/index.html

@@ -1,133 +1,255 @@
 <!DOCTYPE html>
-<html lang="en" dir="ltr"> <!- Default to LTR, can be changed dynamically ->
+<html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>AI Translator</title>
+    <title>Tarjama | Smart Translation Service</title>
     <link rel="stylesheet" href="/static/style.css">
-    <style>
-        /* Add some styling for better visibility of debug and error messages */
-        #error-message {
-            background-color: #ffebee;
-            color: #c62828;
-            padding: 10px;
-            margin: 10px 0;
-            border-radius: 4px;
-            border: 1px solid #ef9a9a;
-            display: none;
-        }
-        #debug-info {
-            background-color: #e3f2fd;
-            color: #1565c0;
-            padding: 10px;
-            margin: 10px 0;
-            border-radius: 4px;
-            border: 1px solid #90caf9;
-            font-family: monospace;
-            white-space: pre-wrap;
-            display: none;
-        }
-        .loading-spinner {
-            margin: 10px 0;
-            padding: 10px;
-            background-color: #e8f5e9;
-            border-radius: 4px;
-            border: 1px solid #a5d6a7;
-            display: none;
-        }
-        .result-box {
-            margin-top: 20px;
-            padding: 15px;
-            background-color: #f5f5f5;
-            border-radius: 4px;
-            display: none;
-        }
-    </style>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.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>
-            <div id="text-loading" class="loading-spinner">Translating...</div>
-            <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>
+    <header>
+        <div class="logo">
+            <h1><span class="primary-color">Tarjama</span></h1>
+            <p class="tagline">Smart Translation</p>
         </div>
-    </div>
+        <nav>
+            <ul>
+                <li class="active"><a href="#text-translation">Text</a></li>
+                <li><a href="#document-translation">Documents</a></li>
+            </ul>
+        </nav>
+    </header>
 
-    <!-- Add debug info container -->
-    <div id="debug-info"></div>
-    <div id="error-message" class="error-box"></div>
+    <main>
+        <section id="text-translation" class="translation-section">
+            <div class="translation-container">
+                <div class="translation-box">
+                    <div class="language-controls">
+                        <div class="language-selector">
+                            <select id="source-lang-text" name="source_lang" class="lang-select">
+                                <option value="auto">Detect Language</option>
+                                <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>
+                                <option value="zh">Chinese</option>
+                                <option value="ru">Russian</option>
+                                <option value="ja">Japanese</option>
+                                <option value="hi">Hindi</option>
+                                <option value="pt">Portuguese</option>
+                                <option value="tr">Turkish</option>
+                                <option value="it">Italian</option>
+                            </select>
+                        </div>
+                        
+                        <div class="swap-languages">
+                            <button type="button" id="swap-languages" aria-label="Swap languages">
+                                <i class="fas fa-exchange-alt"></i>
+                            </button>
+                        </div>
+                        
+                        <div class="language-selector">
+                            <select id="target-lang-text" name="target_lang" class="lang-select">
+                                <option value="ar">Arabic</option>
+                                <option value="en">English</option>
+                                <option value="fr">French</option>
+                                <option value="es">Spanish</option>
+                                <option value="de">German</option>
+                                <option value="zh">Chinese</option>
+                                <option value="ru">Russian</option>
+                                <option value="ja">Japanese</option>
+                                <option value="hi">Hindi</option>
+                                <option value="pt">Portuguese</option>
+                                <option value="tr">Turkish</option>
+                                <option value="it">Italian</option>
+                            </select>
+                        </div>
+                    </div>
+                    
+                    <div class="translation-panels">
+                        <div class="panel source-panel">
+                            <div class="panel-header">
+                                <span class="panel-title">Original Text</span>
+                                <div class="panel-actions">
+                                    <button type="button" id="clear-source" class="icon-button" aria-label="Clear text">
+                                        <i class="fas fa-times"></i>
+                                    </button>
+                                </div>
+                            </div>
+                            <form id="text-translation-form">
+                                <textarea id="text-input" name="text" placeholder="Enter text to translate..." autofocus></textarea>
+                                <div class="panel-footer">
+                                    <div class="char-count"><span id="char-count">0</span> characters</div>
+                                    <button type="submit" class="translate-button">
+                                        <i class="fas fa-language"></i> Translate
+                                    </button>
+                                </div>
+                            </form>
+                        </div>
+                        
+                        <div class="panel target-panel">
+                            <div class="panel-header">
+                                <span class="panel-title">Translation</span>
+                                <div class="panel-actions">
+                                    <button type="button" id="copy-translation" class="icon-button" aria-label="Copy translation">
+                                        <i class="fas fa-copy"></i>
+                                    </button>
+                                </div>
+                            </div>
+                            <div id="text-result">
+                                <pre><code id="text-output"></code></pre>
+                            </div>
+                            <div id="text-loading" class="loading-indicator">
+                                <div class="spinner"></div>
+                                <span>Translating...</span>
+                            </div>
+                        </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>
-            <div class="form-group">
-                <button type="submit" class="btn btn-primary">Translate Document</button>
+                    <!-- Quick phrases section -->
+                    <div class="quick-phrases-container">
+                        <h3>Quick Phrases</h3>
+                        <div class="quick-phrases">
+                            <button type="button" class="phrase-btn" data-phrase="Hello, how are you?" data-auto-translate="true">Hello</button>
+                            <button type="button" class="phrase-btn" data-phrase="Thank you very much" data-auto-translate="true">Thank you</button>
+                            <button type="button" class="phrase-btn" data-phrase="Where is the nearest hospital?" data-auto-translate="true">Emergency</button>
+                            <button type="button" class="phrase-btn" data-phrase="I need help, please" data-auto-translate="true">Help</button>
+                            <button type="button" class="phrase-btn" data-phrase="How much does this cost?" data-auto-translate="true">Price</button>
+                            <button type="button" class="phrase-btn" data-phrase="I don't understand" data-auto-translate="true">Confused</button>
+                        </div>
+                    </div>
+
+                    <!-- Quick Translation Phrases Section -->
+                    <div class="quick-phrases">
+                        <h3>Frequently Used Phrases</h3>
+                        <div class="phrase-buttons">
+                            <button type="button" class="phrase-btn" data-text="Hello, how are you?">Hello, how are you?</button>
+                            <button type="button" class="phrase-btn" data-text="Thank you very much">Thank you very much</button>
+                            <button type="button" class="phrase-btn" data-text="Excuse me, where is...?">Excuse me, where is...?</button>
+                            <button type="button" class="phrase-btn" data-text="I don't understand">I don't understand</button>
+                            <button type="button" class="phrase-btn" data-text="How much does it cost?">How much does it cost?</button>
+                        </div>
+                    </div>
+                </div>
             </div>
-            <div id="doc-loading" class="loading-spinner" style="display: none;">
-                <div class="spinner-border text-primary" role="status">
-                    <span class="sr-only">Loading...</span>
+        </section>
+
+        <section id="document-translation" class="translation-section hidden">
+            <div class="translation-container">
+                <div class="translation-box">
+                    <form id="doc-translation-form" enctype="multipart/form-data">
+                        <div class="language-controls">
+                            <div class="language-selector">
+                                <select id="source-lang-doc" name="source_lang" class="lang-select">
+                                    <option value="auto">Detect Language</option>
+                                    <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>
+                                    <option value="zh">Chinese</option>
+                                    <option value="ru">Russian</option>
+                                    <option value="ja">Japanese</option>
+                                    <option value="hi">Hindi</option>
+                                    <option value="pt">Portuguese</option>
+                                    <option value="tr">Turkish</option>
+                                    <option value="it">Italian</option>
+                                </select>
+                            </div>
+                            
+                            <div class="swap-languages">
+                                <button type="button" id="swap-languages-doc" aria-label="Swap languages">
+                                    <i class="fas fa-exchange-alt"></i>
+                                </button>
+                            </div>
+                            
+                            <div class="language-selector">
+                                <select id="target-lang-doc" name="target_lang" class="lang-select">
+                                    <option value="ar">Arabic</option>
+                                    <option value="en">English</option>
+                                    <option value="fr">French</option>
+                                    <option value="es">Spanish</option>
+                                    <option value="de">German</option>
+                                    <option value="zh">Chinese</option>
+                                    <option value="ru">Russian</option>
+                                    <option value="ja">Japanese</option>
+                                    <option value="hi">Hindi</option>
+                                    <option value="pt">Portuguese</option>
+                                    <option value="tr">Turkish</option>
+                                    <option value="it">Italian</option>
+                                </select>
+                            </div>
+                        </div>
+                        
+                        <div class="file-upload-area">
+                            <label for="doc-input" class="file-upload-label">
+                                <i class="fas fa-cloud-upload-alt"></i>
+                                <span>Choose a file or drag it here</span>
+                                <span class="file-types">(.pdf, .docx, .txt)</span>
+                            </label>
+                            <input type="file" id="doc-input" name="file" accept=".pdf,.docx,.txt" class="file-input">
+                            <div id="file-name-display"></div>
+                        </div>
+                        
+                        <div class="document-actions">
+                            <button type="submit" class="translate-button">
+                                <i class="fas fa-language"></i> Translate Document
+                            </button>
+                        </div>
+                    </form>
+                    
+                    <div id="doc-loading" class="loading-indicator">
+                        <div class="spinner"></div>
+                        <span>Translating document...</span>
+                        <p>This may take a few moments depending on file size.</p>
+                    </div>
+                    
+                    <div class="document-result-area">
+                        <div id="doc-result" class="document-panels">
+                            <div class="panel source-panel">
+                                <div class="panel-header">
+                                    <span class="panel-title">Original Document</span>
+                                    <div class="file-info">
+                                        <span id="doc-filename"></span>
+                                        (<span id="doc-source-lang"></span>)
+                                    </div>
+                                </div>
+                                <div class="document-content">
+                                    <pre><code id="doc-input-text"></code></pre>
+                                </div>
+                            </div>
+                            
+                            <div class="panel target-panel">
+                                <div class="panel-header">
+                                    <span class="panel-title">Translated Document</span>
+                                    <div class="panel-actions">
+                                        <button type="button" id="copy-doc-translation" class="icon-button">
+                                            <i class="fas fa-copy"></i>
+                                        </button>
+                                    </div>
+                                </div>
+                                <div class="document-content">
+                                    <pre><code id="doc-output"></code></pre>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
                 </div>
-                <p>Translating document... This may take a few minutes for large files or first-time use.</p>
             </div>
-        </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>
+        </section>
+    </main>
+    
+    <div id="notification" class="notification"></div>
+    <div id="error-message" class="error-message"></div>
+    <div id="debug-info" class="debug-info"></div>
+    
+    <footer>
+        <div class="footer-content">
+            <p>&copy; 2025 Tarjama - Smart Translation Service</p>
         </div>
-    </div>
+    </footer>
 
     <script src="/static/script.js"></script>
 </body>