Upload 14 files

app.py

@@ -0,0 +1,7 @@
+import os
+from translator.app import app
+
+# For Hugging Face Spaces deployment
+if __name__ == "__main__":
+    port = int(os.environ.get("PORT", 7860))
+    app.run(host="0.0.0.0", port=port, debug=False)

main.py

@@ -0,0 +1,19 @@
+import os
+import gc
+from translator.app import app
+
+# For Hugging Face Spaces deployment
+os.environ['MALLOC_TRIM_THRESHOLD_'] = '65536'
+
+if __name__ == '__main__':
+    print("Starting LinguaSync Translator for Hugging Face Spaces...")
+    
+    # Force garbage collection
+    gc.collect()
+    
+    # Set environment for Hugging Face Spaces
+    if os.environ.get("SPACE_ID"):
+        print("Running in Hugging Face Spaces environment")
+    
+    port = int(os.environ.get("PORT", 7860))
+    app.run(host="0.0.0.0", port=port, debug=False, threaded=True)

requirements.txt

@@ -0,0 +1,6 @@
+flask>=2.3.2
+torch>=2.0.1
+transformers>=4.30.2
+sentencepiece>=0.1.99
+numpy>=1.24.3
+tqdm>=4.65.0

runtime.txt

@@ -0,0 +1 @@
+python-3.10.11

static/style.css

@@ -0,0 +1,199 @@
+/* Additional custom styles for the translator app */
+
+/* Fix for textarea and text input fields */
+textarea.form-control {
+    white-space: normal !important; 
+    word-wrap: break-word !important;
+    overflow-wrap: break-word !important;
+    resize: vertical !important;
+}
+
+#translationResult p {
+    white-space: pre-wrap !important;
+    word-wrap: break-word !important;
+    overflow-wrap: break-word !important;
+}
+
+/* Improve UI aesthetics */
+.translator-card {
+    transition: all 0.3s ease;
+    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08) !important;
+}
+
+.translator-card:hover {
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12) !important;
+    transform: translateY(-2px);
+}
+
+/* Improve focus states for accessibility */
+.form-control:focus, .form-select:focus, .btn:focus {
+    box-shadow: 0 0 0 0.25rem rgba(99, 102, 241, 0.25) !important;
+}
+
+/* Add subtle hover effects to buttons */
+.btn:hover {
+    transform: translateY(-1px);
+    transition: all 0.2s ease;
+}
+
+/* Animated typing effect for the logo */
+.typing-animation {
+    border-right: .15em solid var(--primary-color);
+    white-space: nowrap;
+    margin: 0 auto;
+    letter-spacing: .15em;
+    animation: 
+        typing 3.5s steps(30, end),
+        blink-caret .75s step-end infinite;
+    display: inline-block;
+}
+
+@keyframes typing {
+    from { width: 0 }
+    to { width: 100% }
+}
+
+@keyframes blink-caret {
+    from, to { border-color: transparent }
+    50% { border-color: var(--primary-color); }
+}
+
+/* Tooltip styling */
+.custom-tooltip {
+    position: relative;
+    display: inline-block;
+}
+
+.custom-tooltip .tooltiptext {
+    visibility: hidden;
+    width: 120px;
+    background-color: #555;
+    color: #fff;
+    text-align: center;
+    border-radius: 6px;
+    padding: 5px;
+    position: absolute;
+    z-index: 1;
+    bottom: 125%;
+    left: 50%;
+    margin-left: -60px;
+    opacity: 0;
+    transition: opacity 0.3s;
+}
+
+.custom-tooltip:hover .tooltiptext {
+    visibility: visible;
+    opacity: 1;
+}
+
+/* Language badge styling */
+.lang-badge {
+    border-radius: 50%;
+    width: 30px;
+    height: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: bold;
+    margin-right: 5px;
+}
+
+/* History item hover effect */
+.list-group-item {
+    transition: all 0.3s ease;
+}
+
+.list-group-item:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+/* Progress bar pulsating effect */
+@keyframes pulse {
+    0% { opacity: 0.6; }
+    50% { opacity: 1; }
+    100% { opacity: 0.6; }
+}
+
+.progress-bar {
+    animation: pulse 1.5s infinite;
+}
+
+/* Responsive adjustments */
+@media (max-width: 992px) {
+    .container {
+        padding: 15px;
+    }
+    
+    .typing-animation {
+        letter-spacing: 0.1em;
+    }
+}
+
+@media (max-width: 768px) {
+    .container {
+        padding: 12px;
+    }
+    
+    h1 {
+        font-size: 1.5rem;
+    }
+    
+    .form-control, .form-select {
+        font-size: 14px;
+    }
+    
+    .typing-animation {
+        letter-spacing: 0.05em;
+        animation: none; /* Disable typing animation on mobile */
+    }
+    
+    .custom-tooltip .tooltiptext {
+        width: 100px;
+        margin-left: -50px;
+    }
+    
+    .lang-badge {
+        width: 24px;
+        height: 24px;
+        font-size: 12px;
+    }
+}
+
+@media (max-width: 576px) {
+    .container {
+        padding: 10px;
+    }
+    
+    h1 {
+        font-size: 1.3rem;
+    }
+    
+    .form-control, .form-select {
+        font-size: 13px;
+    }
+    
+    .lang-badge {
+        width: 20px;
+        height: 20px;
+        font-size: 10px;
+        margin-right: 2px;
+    }
+    
+    .custom-tooltip .tooltiptext {
+        display: none; /* Hide tooltips on very small screens */
+    }
+}
+
+/* Fix touch interactions on mobile devices */
+@media (hover: none) {
+    .list-group-item:hover {
+        transform: none;
+        box-shadow: none;
+    }
+    
+    .custom-tooltip:hover .tooltiptext {
+        visibility: hidden;
+        opacity: 0;
+    }
+}

translator/__init__.py

@@ -0,0 +1 @@
+# This file makes the translator directory a package

translator/app.py

@@ -0,0 +1,72 @@
+from flask import Flask, render_template, request, jsonify, redirect, url_for
+import os
+import platform
+import sys
+from .translator import Translator
+
+# Create Flask application
+app = Flask(__name__, static_folder='static', static_url_path='/static')
+translator = None  # Initialize lazily to improve startup time
+
+# Configure for Hugging Face Spaces
+is_hf_spaces = os.environ.get('SPACE_ID') is not None
+app.config['HF_SPACES'] = is_hf_spaces
+
+# Print diagnostic information on startup
+print(f"Starting LinguaSync Translator for {'Hugging Face Spaces' if is_hf_spaces else 'local development'}")
+print(f"Python version: {platform.python_version()}")
+print(f"Platform: {platform.system()} {platform.release()}")
+
+# Lazy initialization of translator
+def get_translator():
+    global translator
+    if translator is None:
+        print("Initializing translator...")
+        translator = Translator()
+    return translator
+
+@app.route('/')
+def index():
+    translator_instance = get_translator()
+    languages = translator_instance.get_available_languages()
+    return render_template('index.html', languages=languages)
+
+@app.route('/translate', methods=['POST'])
+def translate_text():
+    translator_instance = get_translator()
+    text = request.form.get('text', '')
+    source_lang = request.form.get('source_lang', 'hi')
+    target_lang = request.form.get('target_lang', 'en')
+    
+    if not text:
+        return jsonify({'status': 'completed', 'translation': ''})
+    
+    # Start the translation process asynchronously
+    result = translator_instance.translate(text, source_lang, target_lang)
+    return jsonify(result)
+
+@app.route('/translation_status', methods=['GET'])
+def translation_status():
+    translator_instance = get_translator()
+    task_id = request.args.get('task_id', '')
+    
+    if not task_id:
+        return jsonify({'status': 'error', 'message': 'No task ID provided'})
+    
+    # Check the status of the translation
+    result = translator_instance.get_translation_result(task_id)
+    return jsonify(result)
+
+@app.route('/health', methods=['GET'])
+def health_check():
+    """Health check endpoint for monitoring"""
+    translator_instance = get_translator()
+    health_data = {
+        'status': 'ok',
+        'languages_available': list(translator_instance.languages.keys()),
+        'platform': 'Hugging Face Spaces' if app.config.get('HF_SPACES') else 'Local'
+    }
+    return jsonify(health_data)
+
+if __name__ == '__main__':
+    app.run(debug=True)

translator/static/style.css

@@ -0,0 +1,436 @@
+/* Copy of main style.css for app-level static directory */
+
+/* Magic UI Styles */
+:root {
+    --gradient-start: #6366f1;
+    --gradient-mid: #8b5cf6;
+    --gradient-end: #d946ef;
+    --shadow-color: rgba(99, 102, 241, 0.2);
+    --glow-color: rgba(139, 92, 246, 0.6);
+}
+
+/* Enhanced translator card */
+.magic-card {
+    border-radius: 20px;
+    overflow: hidden;
+    transition: all 0.5s ease;
+    box-shadow: 0 10px 40px var(--shadow-color) !important;
+    border: none;
+    margin: 20px 0;
+}
+
+.magic-card:hover {
+    box-shadow: 0 15px 60px var(--shadow-color) !important;
+    transform: translateY(-5px);
+}
+
+.card-header.bg-gradient {
+    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-mid), var(--gradient-end));
+    padding: 20px;
+    border: none;
+}
+
+/* Professional buttons */
+.btn-primary {
+    background-color: #4361ee;
+    color: white;
+    border: none;
+    position: relative;
+    transition: all 0.3s ease;
+}
+
+.btn-primary:hover, .btn-primary:focus {
+    background-color: #3a56d4;
+    color: white;
+    box-shadow: 0 2px 5px rgba(67, 97, 238, 0.2);
+    transform: translateY(-1px);
+}
+
+/* Translate button special effect */
+.translate-btn {
+    font-weight: 500;
+    letter-spacing: 0.3px;
+}
+
+/* Swap button animation */
+.swap-btn {
+    transition: all 0.3s ease;
+    background-color: #f8f9fa;
+    border: 1px solid #e9ecef;
+    color: #495057;
+}
+
+.swap-btn:hover {
+    background-color: #e9ecef;
+    transform: scale(1.05);
+}
+
+/* Enhanced form controls */
+.enhanced-select {
+    border: 2px solid #e2e8f0;
+    padding: 12px 45px 12px 20px;
+    border-radius: 12px;
+    font-weight: 500;
+    background-image: none;
+    transition: all 0.3s ease;
+}
+
+.enhanced-select:focus {
+    border-color: var(--gradient-mid);
+    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.25);
+}
+
+.language-select-icon {
+    top: 50%;
+    right: 18px;
+    transform: translateY(-50%);
+    color: var(--gradient-mid);
+}
+
+/* Magic textarea */
+.magic-textarea {
+    border: 2px solid #e2e8f0;
+    border-radius: 15px;
+    transition: all 0.3s ease;
+    font-size: 1.05rem;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05) !important;
+}
+
+.magic-textarea:focus {
+    border-color: var(--gradient-mid);
+    box-shadow: 0 5px 25px rgba(139, 92, 246, 0.15) !important;
+}
+
+.text-input-decoration {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    background: radial-gradient(circle, rgba(139, 92, 246, 0.1) 0%, rgba(139, 92, 246, 0) 70%);
+    pointer-events: none;
+}
+
+/* Translation result container */
+.result-container {
+    background: linear-gradient(to right bottom, #ffffff, #f9fafb);
+    border: none;
+    border-radius: 15px;
+    padding: 25px;
+    min-height: 150px;
+    position: relative;
+    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05) !important;
+}
+
+.translation-indicator {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    opacity: 0.7;
+}
+
+/* Progress bar */
+.progress {
+    background-color: #f0f3f8;
+}
+
+.progress-bar {
+    animation: progress-pulse 1.5s infinite;
+}
+
+@keyframes progress-pulse {
+    0% { opacity: 0.8; }
+    50% { opacity: 1; }
+    100% { opacity: 0.8; }
+}
+
+/* Feature cards */
+.feature-card {
+    border-radius: 16px;
+    overflow: hidden;
+    transition: all 0.3s ease;
+}
+
+.feature-card:hover {
+    transform: translateY(-10px);
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
+}
+
+.feature-icon {
+    width: 80px;
+    height: 80px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 20px;
+    transition: all 0.3s ease;
+}
+
+.feature-card:hover .feature-icon {
+    transform: scale(1.1);
+}
+
+/* Custom language select styling */
+.language-select-wrapper {
+    display: block;
+    position: relative;
+}
+
+.language-select-icon {
+    top: 50%;
+    right: 12px;
+    transform: translateY(-50%);
+    pointer-events: none;
+    color: var(--primary-color);
+}
+
+.language-select-wrapper select {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    padding-right: 30px; /* Space for the icon */
+    cursor: pointer;
+    background-color: white;
+    border-color: var(--border-color);
+    transition: all 0.2s;
+}
+
+.language-select-wrapper select:hover {
+    border-color: var(--primary-color);
+}
+
+.language-select-wrapper select:focus {
+    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
+    border-color: var(--primary-color);
+    outline: none;
+}
+
+.highlight-select {
+    animation: pulse-border 0.8s ease;
+}
+
+@keyframes pulse-border {
+    0% { border-color: var(--border-color); }
+    50% { border-color: var(--primary-color); }
+    100% { border-color: var(--border-color); }
+}
+
+/* Fix select option styles */
+.form-select option {
+    padding: 10px;
+    font-size: 0.95rem;
+}
+
+/* Fix for textarea and text input fields */
+textarea.form-control {
+    white-space: normal !important; 
+    word-wrap: break-word !important;
+    overflow-wrap: break-word !important;
+    resize: vertical !important;
+}
+
+#translationResult p {
+    white-space: pre-wrap !important;
+    word-wrap: break-word !important;
+    overflow-wrap: break-word !important;
+}
+
+/* Improve UI aesthetics */
+.translator-card {
+    transition: all 0.3s ease;
+    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08) !important;
+}
+
+.translator-card:hover {
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12) !important;
+    transform: translateY(-2px);
+}
+
+/* Improve focus states for accessibility */
+.form-control:focus, .form-select:focus, .btn:focus {
+    box-shadow: 0 0 0 0.25rem rgba(99, 102, 241, 0.25) !important;
+}
+
+/* Add subtle hover effects to buttons */
+.btn:hover {
+    transform: translateY(-1px);
+    transition: all 0.2s ease;
+}
+
+/* Action buttons styling */
+.action-btn {
+    background-color: #f8f9fa;
+    border: 1px solid #e9ecef;
+    color: #495057;
+    transition: all 0.2s ease;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+}
+
+.action-btn:hover {
+    background-color: #e9ecef;
+    color: #212529;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
+}
+
+/* Animated typing effect for the logo */
+.typing-animation {
+    border-right: .15em solid var(--primary-color);
+    white-space: nowrap;
+    margin: 0 auto;
+    letter-spacing: .15em;
+    animation: 
+        typing 3.5s steps(30, end),
+        blink-caret .75s step-end infinite;
+    display: inline-block;
+}
+
+@keyframes typing {
+    from { width: 0 }
+    to { width: 100% }
+}
+
+@keyframes blink-caret {
+    from, to { border-color: transparent }
+    50% { border-color: var(--primary-color); }
+}
+
+/* Tooltip styling */
+.custom-tooltip {
+    position: relative;
+    display: inline-block;
+}
+
+.custom-tooltip .tooltiptext {
+    visibility: hidden;
+    width: 120px;
+    background-color: #555;
+    color: #fff;
+    text-align: center;
+    border-radius: 6px;
+    padding: 5px;
+    position: absolute;
+    z-index: 1;
+    bottom: 125%;
+    left: 50%;
+    margin-left: -60px;
+    opacity: 0;
+    transition: opacity 0.3s;
+}
+
+.custom-tooltip:hover .tooltiptext {
+    visibility: visible;
+    opacity: 1;
+}
+
+/* Language badge styling */
+.lang-badge {
+    border-radius: 50%;
+    width: 30px;
+    height: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: bold;
+    margin-right: 5px;
+}
+
+/* History item hover effect */
+.list-group-item {
+    transition: all 0.3s ease;
+}
+
+.list-group-item:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+/* Progress bar pulsating effect */
+@keyframes pulse {
+    0% { opacity: 0.6; }
+    50% { opacity: 1; }
+    100% { opacity: 0.6; }
+}
+
+.progress-bar {
+    animation: pulse 1.5s infinite;
+}
+
+/* Responsive adjustments */
+@media (max-width: 992px) {
+    .container {
+        padding: 15px;
+    }
+    
+    .typing-animation {
+        letter-spacing: 0.1em;
+    }
+}
+
+@media (max-width: 768px) {
+    .container {
+        padding: 12px;
+    }
+    
+    h1 {
+        font-size: 1.5rem;
+    }
+    
+    .form-control, .form-select {
+        font-size: 14px;
+    }
+    
+    .typing-animation {
+        letter-spacing: 0.05em;
+        animation: none; /* Disable typing animation on mobile */
+    }
+    
+    .custom-tooltip .tooltiptext {
+        width: 100px;
+        margin-left: -50px;
+    }
+    
+    .lang-badge {
+        width: 24px;
+        height: 24px;
+        font-size: 12px;
+    }
+}
+
+@media (max-width: 576px) {
+    .container {
+        padding: 10px;
+    }
+    
+    h1 {
+        font-size: 1.3rem;
+    }
+    
+    .form-control, .form-select {
+        font-size: 13px;
+    }
+    
+    .lang-badge {
+        width: 20px;
+        height: 20px;
+        font-size: 10px;
+        margin-right: 2px;
+    }
+    
+    .custom-tooltip .tooltiptext {
+        display: none; /* Hide tooltips on very small screens */
+    }
+}
+
+/* Fix touch interactions on mobile devices */
+@media (hover: none) {
+    .list-group-item:hover {
+        transform: none;
+        box-shadow: none;
+    }
+    
+    .custom-tooltip:hover .tooltiptext {
+        visibility: hidden;
+        opacity: 0;
+    }
+}

translator/templates/base.html

@@ -0,0 +1,626 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <title>TranslateNow - Professional Translation Platform</title>
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+    <style>
+        :root {
+            --primary-color: #6366f1;
+            --secondary-color: #8b5cf6;
+            --accent-color: #d946ef;
+            --text-color: #1e293b;
+            --light-bg: #f8fafc;
+            --border-color: #e2e8f0;
+            --sidebar-width: 320px;
+            --sidebar-width-mobile: 85vw;
+            --header-height: 64px;
+            --header-height-mobile: 56px;
+            --transition-speed: 0.3s;
+        }
+        
+        body {
+            background: linear-gradient(135deg, #f1f5f9, #f8fafc);
+            min-height: 100vh;
+            font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            color: var(--text-color);
+            margin: 0;
+            padding: 0;
+            overflow-x: hidden;
+            background-attachment: fixed;
+        }
+        
+        .app-container {
+            display: flex;
+            width: 100%;
+            min-height: 100vh;
+            min-height: calc(var(--vh, 1vh) * 100); /* Mobile viewport height fix */
+        }
+        
+        .main-content {
+            flex: 1;
+            padding: 20px;
+            padding-top: var(--header-height);
+            transition: margin var(--transition-speed) ease;
+        }
+        
+        /* Sidebar */
+        .sidebar {
+            width: var(--sidebar-width);
+            background: white;
+            box-shadow: 2px 0 10px rgba(0, 0, 0, 0.05);
+            height: 100vh;
+            position: fixed;
+            top: 0;
+            right: 0;
+            z-index: 1000;
+            transform: translateX(100%);
+            transition: transform var(--transition-speed) ease;
+            overflow-y: auto;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar.open {
+            transform: translateX(0);
+        }
+        
+        .sidebar-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 15px 20px;
+            background: var(--primary-color);
+            color: white;
+            height: var(--header-height);
+        }
+        
+        .sidebar-header h5 {
+            margin: 0;
+            font-weight: 600;
+        }
+        
+        .sidebar-content {
+            flex: 1;
+            padding: 20px;
+            overflow-y: auto;
+        }
+        
+        .sidebar-footer {
+            padding: 15px 20px;
+            border-top: 1px solid var(--border-color);
+            background: white;
+        }
+        
+        /* Header */
+        .app-header {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: var(--header-height);
+            background: linear-gradient(135deg, #ffffff, #f8fafc);
+            display: flex;
+            align-items: center;
+            padding: 0 20px;
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
+            z-index: 990;
+            justify-content: space-between;
+            border-bottom: 1px solid rgba(226, 232, 240, 0.8);
+        }
+        
+        .app-title {
+            display: flex;
+            align-items: center;
+            margin: 0;
+        }
+        
+        .logo-circle {
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color), var(--accent-color));
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-right: 12px;
+            box-shadow: 0 4px 10px rgba(99, 102, 241, 0.3);
+        }
+        
+        .logo-circle i {
+            font-size: 1.3rem;
+            color: white;
+        }
+        
+        .logo-text {
+            background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
+            -webkit-background-clip: text;
+            background-clip: text;
+            -webkit-text-fill-color: transparent;
+            color: transparent;
+            font-weight: 700;
+            letter-spacing: -0.5px;
+            font-size: 1.5rem;
+        }
+        
+        .header-actions {
+            display: flex;
+            gap: 10px;
+        }
+        
+        .magic-btn {
+            background: #4361ee;
+            color: white;
+            border-radius: 50%;
+            width: 42px;
+            height: 42px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            box-shadow: 0 2px 6px rgba(67, 97, 238, 0.2);
+            transition: all 0.3s ease;
+            border: none;
+        }
+        
+        .magic-btn:hover {
+            background: #3a56d4;
+            transform: translateY(-2px);
+            box-shadow: 0 4px 8px rgba(67, 97, 238, 0.3);
+        }
+        
+        @keyframes pulse-glow {
+            0% { box-shadow: 0 4px 10px rgba(99, 102, 241, 0.3); }
+            50% { box-shadow: 0 4px 20px rgba(99, 102, 241, 0.5); }
+            100% { box-shadow: 0 4px 10px rgba(99, 102, 241, 0.3); }
+        }
+        
+        .pulse-animation {
+            animation: pulse-glow 1s ease;
+        }
+        
+        /* Main card */
+        .translator-card {
+            background-color: white;
+            border-radius: 16px;
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
+            overflow: hidden;
+            margin-bottom: 20px;
+            border: none;
+        }
+        
+        .form-group {
+            margin-bottom: 25px;
+        }
+        
+        h1 {
+            color: var(--primary-color);
+            margin-bottom: 20px;
+            font-weight: 700;
+            letter-spacing: -0.5px;
+        }
+        
+        #loadingSpinner {
+            display: none;
+        }
+        
+        #translationResult {
+            margin-top: 15px;
+            padding: 20px;
+            border-radius: 12px;
+            background-color: var(--light-bg);
+            border-left: 4px solid var(--accent-color);
+            min-height: 100px;
+            transition: all 0.3s ease;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+        }
+        
+        .btn {
+            transition: all 0.3s ease;
+            border-radius: 8px;
+            padding: 10px 24px;
+            font-weight: 500;
+        }
+        
+        .btn-primary {
+            background: var(--primary-color);
+            border: none;
+        }
+        
+        .btn-primary:hover {
+            background: var(--secondary-color);
+            transform: translateY(-1px);
+            box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
+        }
+        
+        .form-select, .form-control {
+            border-radius: 8px;
+            border: 1px solid var(--border-color);
+            padding: 12px 16px;
+            transition: all 0.3s ease;
+            font-size: 0.95rem;
+        }
+        
+        .form-select:focus, .form-control:focus {
+            border-color: var(--accent-color);
+            box-shadow: 0 0 0 3px rgba(165, 180, 252, 0.25);
+        }
+        
+        /* Animation for text appearance */
+        @keyframes textAppear {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        
+        #translatedText {
+            animation: textAppear 0.5s ease;
+        }
+        
+        .card {
+            border: none;
+            border-radius: 12px;
+            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
+            overflow: hidden;
+        }
+        
+        .card-header {
+            background-color: white;
+            border-bottom: 1px solid var(--border-color);
+            padding: 15px 20px;
+        }
+        
+        .card-body {
+            padding: 25px;
+        }
+        
+        .list-group-item {
+            border: 1px solid var(--border-color);
+            margin-bottom: 8px;
+            border-radius: 8px !important;
+            transition: all 0.2s ease;
+        }
+        
+        .list-group-item:hover {
+            transform: translateY(-1px);
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+        }
+        
+        .badge {
+            font-weight: 500;
+            padding: 5px 10px;
+        }
+        
+        /* Toggle sidebar button */
+        .toggle-sidebar {
+            background: none;
+            border: none;
+            cursor: pointer;
+            font-size: 1.5rem;
+            color: var(--primary-color);
+            padding: 5px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 8px;
+            transition: all 0.2s;
+            position: relative;
+        }
+        
+        .toggle-sidebar:hover {
+            background: rgba(99, 102, 241, 0.1);
+        }
+        
+        .history-badge {
+            position: absolute;
+            top: -5px;
+            right: -5px;
+            font-size: 0.7rem;
+            padding: 3px 6px;
+            background: var(--primary-color);
+            color: white;
+            border-radius: 10px;
+        }
+        
+        /* Floating action button */
+        .fab {
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--primary-color);
+            color: white;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
+            cursor: pointer;
+            z-index: 900;
+            transition: all 0.3s;
+        }
+        
+        .fab:hover {
+            background: var(--secondary-color);
+            transform: translateY(-3px) scale(1.05);
+            box-shadow: 0 6px 16px rgba(99, 102, 241, 0.5);
+        }
+        
+        .fab i {
+            font-size: 1.5rem;
+        }
+        
+        /* Responsive */
+        @media (max-width: 992px) {
+            .main-content {
+                padding: 15px;
+                padding-top: calc(var(--header-height) + 10px);
+            }
+            
+            .card-body {
+                padding: 20px;
+            }
+            
+            .form-group {
+                margin-bottom: 20px;
+            }
+        }
+        
+        @media (max-width: 768px) {
+            :root {
+                --header-height: var(--header-height-mobile);
+            }
+            
+            .main-content {
+                padding: 12px;
+                padding-top: calc(var(--header-height) + 10px);
+            }
+            
+            .sidebar {
+                width: var(--sidebar-width-mobile);
+            }
+            
+            .app-title span {
+                font-size: 1.1rem;
+            }
+            
+            .app-title i {
+                font-size: 1.3rem;
+            }
+            
+            .form-select, .form-control {
+                padding: 10px 14px;
+                font-size: 0.9rem;
+            }
+            
+            .btn {
+                padding: 8px 16px;
+                font-size: 0.9rem;
+            }
+            
+            h1 {
+                font-size: 1.5rem;
+                margin-bottom: 15px;
+            }
+            
+            .card-body {
+                padding: 15px;
+            }
+            
+            .form-group {
+                margin-bottom: 15px;
+            }
+            
+            #translationResult {
+                min-height: 80px;
+                padding: 15px;
+            }
+            
+            .app-header {
+                padding: 0 15px;
+            }
+        }
+        
+        @media (max-width: 576px) {
+            .main-content {
+                padding: 10px;
+                padding-top: calc(var(--header-height) + 5px);
+            }
+            
+            .sidebar {
+                width: 100%;
+            }
+            
+            .translator-card {
+                border-radius: 12px;
+                margin-bottom: 15px;
+            }
+            
+            .card-body {
+                padding: 12px;
+            }
+            
+            .form-select, .form-control {
+                padding: 8px 12px;
+                font-size: 0.85rem;
+            }
+            
+            .btn {
+                padding: 6px 12px;
+                font-size: 0.85rem;
+            }
+            
+            #translationResult {
+                padding: 12px;
+                min-height: 60px;
+            }
+            
+            .fab {
+                width: 48px;
+                height: 48px;
+                bottom: 15px;
+                right: 15px;
+            }
+            
+            .fab i {
+                font-size: 1.2rem;
+            }
+            
+            footer {
+                font-size: 0.75rem;
+            }
+        }
+        
+        /* Fix for mobile viewport height issues */
+        @supports (-webkit-touch-callout: none) {
+            .app-container, .sidebar {
+                height: -webkit-fill-available;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="app-container">
+        <!-- Header -->
+        <header class="app-header">
+            <h1 class="app-title">
+                <div class="logo-circle"><i class="bi bi-translate"></i></div>
+                <span class="d-none d-sm-inline logo-text">TranslateNow</span>
+                <span class="d-inline d-sm-none logo-text">TN</span>
+            </h1>
+            <div class="header-actions">
+                <button class="toggle-sidebar magic-btn" id="toggleSidebar" title="View translation history">
+                    <i class="bi bi-clock-history"></i>
+                    <span class="history-badge" id="historyCount">0</span>
+                </button>
+            </div>
+        </header>
+        
+        <!-- Main Content Area -->
+        <div class="main-content animate__animated animate__fadeIn" style="transition: all 0.3s ease;">
+            {% block content %}{% endblock %}
+            
+            <footer class="mt-4 pt-3 text-center">
+                <p class="text-muted">© 2025 TranslateNow <span class="d-none d-sm-inline">| <i class="bi bi-heart-fill text-danger"></i> Powered by Hugging Face</span></p>
+            </footer>
+        </div>
+        
+        <!-- Sidebar for History -->
+        <aside class="sidebar" id="sidebar">
+            <div class="sidebar-header">
+                <h5><i class="bi bi-clock-history me-2"></i> Translation History</h5>
+                <button class="btn btn-sm text-white" id="closeSidebar">
+                    <i class="bi bi-x-lg"></i>
+                </button>
+            </div>
+            <div class="sidebar-content">
+                <div id="translationHistory" class="list-group">
+                    <!-- Translation history will be added here -->
+                    <div class="text-center text-muted py-5">
+                        <i class="bi bi-clock-history fs-1 d-block mb-3"></i>
+                        <p>No translation history yet</p>
+                        <p class="small">Your recent translations will appear here</p>
+                    </div>
+                </div>
+            </div>
+            <div class="sidebar-footer">
+                <button class="btn btn-outline-danger btn-sm w-100" id="clearHistoryBtn">
+                    <i class="bi bi-trash"></i> Clear All History
+                </button>
+            </div>
+        </aside>
+        
+        <!-- Floating action button for mobile -->
+        <div class="fab d-md-none" id="mobileSidebarToggle">
+            <i class="bi bi-clock-history"></i>
+        </div>
+    </div>
+    
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+    
+    <script>
+        // Sidebar toggle
+document.addEventListener('DOMContentLoaded', function() {
+    const sidebar = document.getElementById('sidebar');
+    const toggleSidebar = document.getElementById('toggleSidebar');
+    const closeSidebar = document.getElementById('closeSidebar');
+    const mobileSidebarToggle = document.getElementById('mobileSidebarToggle');
+    
+    // Add subtle animation to the logo
+    const logoCircle = document.querySelector('.logo-circle');
+    setInterval(() => {
+        logoCircle.classList.add('pulse-animation');
+        setTimeout(() => logoCircle.classList.remove('pulse-animation'), 1000);
+    }, 3000);
+    
+    toggleSidebar.addEventListener('click', function() {
+        sidebar.classList.toggle('open');
+    });            mobileSidebarToggle.addEventListener('click', function() {
+                sidebar.classList.toggle('open');
+            });
+            
+            closeSidebar.addEventListener('click', function() {
+                sidebar.classList.remove('open');
+            });
+            
+            // Close sidebar when clicking outside
+            document.addEventListener('click', function(event) {
+                if (!sidebar.contains(event.target) && 
+                    event.target !== toggleSidebar && 
+                    event.target !== mobileSidebarToggle &&
+                    !toggleSidebar.contains(event.target) &&
+                    !mobileSidebarToggle.contains(event.target)) {
+                    sidebar.classList.remove('open');
+                }
+            });
+            
+            // Add touch swipe detection for mobile
+            let touchstartX = 0;
+            let touchendX = 0;
+            
+            document.addEventListener('touchstart', e => {
+                touchstartX = e.changedTouches[0].screenX;
+            });
+            
+            document.addEventListener('touchend', e => {
+                touchendX = e.changedTouches[0].screenX;
+                handleSwipe();
+            });
+            
+            function handleSwipe() {
+                const swipeThreshold = 100; // Minimum pixels for swipe detection
+                
+                // Right to left swipe (open sidebar)
+                if (touchendX < touchstartX - swipeThreshold && window.innerWidth <= 768) {
+                    sidebar.classList.add('open');
+                }
+                
+                // Left to right swipe (close sidebar)
+                if (touchendX > touchstartX + swipeThreshold && sidebar.classList.contains('open')) {
+                    sidebar.classList.remove('open');
+                }
+            }
+            
+            // Add viewport height fix for mobile browsers
+            function setAppHeight() {
+                const vh = window.innerHeight * 0.01;
+                document.documentElement.style.setProperty('--vh', `${vh}px`);
+            }
+            
+            // Set initial height
+            setAppHeight();
+            
+            // Reset on resize
+            window.addEventListener('resize', setAppHeight);
+        });
+    </script>
+    
+    {% block scripts %}{% endblock %}
+</body>
+</html>

translator/templates/index.html

@@ -0,0 +1,839 @@
+{% extends "base.html" %}
+
+{% block content %}
+<div class="translator-card magic-card">
+    <div class="card-header bg-gradient">
+        <div class="row align-items-center">
+            <div class="col">
+                <h5 class="mb-0 fw-bold text-white"><i class="bi bi-translate me-2"></i>TranslateNow</h5>
+                <p class="text-white-50 mb-0 small"><i class="bi bi-stars me-1"></i>Professional translation platform</p>
+            </div>
+            <div class="col-auto">
+                <button class="btn btn-sm btn-light px-3 shadow-sm action-btn" id="clearBtn" title="Clear all text">
+                    <i class="bi bi-eraser"></i> Clear
+                </button>
+            </div>
+        </div>
+    </div>
+    <div class="card-body">
+        <div class="row">
+            <div class="col-lg-5 col-md-12 mb-4 mb-lg-0">
+                <div class="form-group">
+                    <div class="d-flex justify-content-between align-items-center">
+                        <label for="sourceLanguage" class="form-label fw-medium">Source Language:</label>
+                        <span class="badge bg-primary bg-opacity-10 text-primary" id="sourceCharCount">0 characters</span>
+                    </div>
+                    <div class="language-select-wrapper position-relative mb-3">
+                        <select class="form-select shadow-sm enhanced-select" id="sourceLanguage">
+                            {% for code, name in languages.items() %}
+                            <option value="{{ code }}" {% if code == 'hi' %}selected{% endif %}>{{ name }}</option>
+                            {% endfor %}
+                        </select>
+                        <div class="language-select-icon position-absolute">
+                            <i class="bi bi-translate"></i>
+                        </div>
+                    </div>
+                </div>
+                <div class="form-group">
+                    <div class="d-flex justify-content-between align-items-center mb-2">
+                        <label for="sourceText" class="form-label fw-medium">Enter text to translate:</label>
+                        <div>
+                            <button class="btn btn-sm btn-light me-1 px-3 action-btn" id="detectLanguageBtn" title="Auto detect language">
+                                <i class="bi bi-magic me-1"></i>Auto-detect
+                            </button>
+                            <button class="btn btn-sm btn-light px-3 action-btn" id="clearSourceBtn" title="Clear text">
+                                <i class="bi bi-x me-1"></i>Clear
+                            </button>
+                        </div>
+                    </div>
+                    <div class="position-relative">
+                        <textarea class="form-control shadow-sm magic-textarea" id="sourceText" rows="8" placeholder="Type or paste your text here..." style="white-space: normal; word-wrap: break-word; resize: vertical; overflow-wrap: break-word; padding: 16px;"></textarea>
+                        <div class="text-input-decoration"></div>
+                    </div>
+                    <div class="d-flex justify-content-end mt-2">
+                        <button class="btn btn-sm btn-light me-2 px-3 action-btn" id="listenSourceBtn" title="Listen">
+                            <i class="bi bi-volume-up"></i> <span class="d-none d-sm-inline">Listen</span>
+                        </button>
+                        <button class="btn btn-sm btn-light px-3 action-btn" id="copySourceBtn" title="Copy to clipboard">
+                            <i class="bi bi-clipboard"></i> <span class="d-none d-sm-inline">Copy</span>
+                        </button>
+                    </div>
+                </div>
+            </div>
+            
+            <div class="col-lg-2 col-md-12 d-flex flex-lg-column flex-row align-items-center justify-content-center mb-4 mb-lg-0">
+                <button class="btn btn-light mb-lg-3 me-3 me-lg-0 shadow-sm rounded-circle p-2 p-sm-3 swap-btn" id="swapBtn" title="Swap languages">
+                    <i class="bi bi-arrow-left-right"></i>
+                </button>
+                <button class="btn btn-primary shadow-sm px-4 px-sm-5 py-2 py-sm-3 rounded fw-medium translate-btn" id="translateBtn">
+                    Translate <i class="bi bi-translate ms-1"></i>
+                </button>
+                <div class="spinner-border text-primary mt-lg-3 ms-3 ms-lg-0" id="loadingSpinner" role="status">
+                    <span class="visually-hidden">Loading...</span>
+                </div>
+                <div class="progress mt-lg-3 mt-0 ms-3 ms-lg-0 w-100 d-none d-lg-block" style="height: 6px; border-radius: 10px; overflow: hidden;">
+                    <div class="progress-bar bg-primary" id="translationProgress" role="progressbar" style="width: 0%"></div>
+                </div>
+                <!-- Mobile progress bar, horizontal orientation -->
+                <div class="progress mt-3 w-100 d-block d-lg-none" style="height: 6px; border-radius: 10px; overflow: hidden;">
+                    <div class="progress-bar bg-primary" id="translationProgressMobile" role="progressbar" style="width: 0%"></div>
+                </div>
+            </div>
+            
+            <div class="col-lg-5 col-md-12">
+                <div class="form-group">
+                    <div class="d-flex justify-content-between align-items-center">
+                        <label for="targetLanguage" class="form-label fw-medium">Target Language:</label>
+                        <span class="badge bg-primary bg-opacity-10 text-primary" id="targetCharCount">0 characters</span>
+                    </div>
+                    <div class="language-select-wrapper position-relative mb-3">
+                        <select class="form-select shadow-sm enhanced-select" id="targetLanguage">
+                            {% for code, name in languages.items() %}
+                            <option value="{{ code }}" {% if code == 'en' %}selected{% endif %}>{{ name }}</option>
+                            {% endfor %}
+                        </select>
+                        <div class="language-select-icon position-absolute">
+                            <i class="bi bi-translate"></i>
+                        </div>
+                    </div>
+                </div>
+                <div class="form-group">
+                    <label for="translatedText" class="form-label fw-medium">Translation:</label>
+                    <div id="translationResult" class="animate__animated shadow-sm result-container">
+                        <div class="translation-indicator"><i class="bi bi-stars text-primary"></i></div>
+                        <p id="translatedText" style="white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word;"></p>
+                    </div>
+                    <div class="d-flex justify-content-end mt-2">
+                        <button class="btn btn-sm btn-light me-2 px-3 action-btn" id="listenTargetBtn" title="Listen">
+                            <i class="bi bi-volume-up"></i> <span class="d-none d-sm-inline">Listen</span>
+                        </button>
+                        <button class="btn btn-sm btn-light me-2 px-3 action-btn" id="copyTargetBtn" title="Copy to clipboard">
+                            <i class="bi bi-clipboard"></i> <span class="d-none d-sm-inline">Copy</span>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Small credits section at the bottom -->
+<div class="text-center mt-3 mb-2">
+    <small class="text-muted">TranslateNow | <i class="bi bi-shield-check text-success me-1"></i>Secure and accurate translations</small>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+let translationInProgress = false;
+let currentTaskId = null;
+let pollingInterval = null;
+let progressInterval = null;
+let typingTimer;
+const doneTypingInterval = 800; // Wait time after typing stops (ms)
+const translationHistory = [];
+const maxHistoryItems = 15;
+
+// Initialize all UI elements and event listeners
+document.addEventListener('DOMContentLoaded', function() {
+    // Initialize character counters
+    updateCharCount('sourceText', 'sourceCharCount');
+    
+    // Auto-translate after typing stops
+    const sourceTextArea = document.getElementById('sourceText');
+    sourceTextArea.addEventListener('keyup', function() {
+        clearTimeout(typingTimer);
+        updateCharCount('sourceText', 'sourceCharCount');
+        if (this.value) {
+            typingTimer = setTimeout(translateText, doneTypingInterval);
+        }
+    });
+    
+    // Stop the timer if the user continues typing
+    sourceTextArea.addEventListener('keydown', function() {
+        clearTimeout(typingTimer);
+    });
+    
+    // Main translation button
+    document.getElementById('translateBtn').addEventListener('click', translateText);
+    
+    // Swap languages button
+    document.getElementById('swapBtn').addEventListener('click', swapLanguages);
+    
+    // Add event listeners for language selects
+    document.getElementById('sourceLanguage').addEventListener('change', function() {
+        // Highlight the dropdown to indicate change
+        this.closest('.language-select-wrapper').classList.add('highlight-select');
+        setTimeout(() => {
+            this.closest('.language-select-wrapper').classList.remove('highlight-select');
+        }, 1000);
+        
+        // Auto-translate if there's text
+        if (document.getElementById('sourceText').value.trim()) {
+            translateText();
+        }
+    });
+    
+    document.getElementById('targetLanguage').addEventListener('change', function() {
+        // Highlight the dropdown to indicate change
+        this.closest('.language-select-wrapper').classList.add('highlight-select');
+        setTimeout(() => {
+            this.closest('.language-select-wrapper').classList.remove('highlight-select');
+        }, 1000);
+        
+        // Auto-translate if there's text
+        if (document.getElementById('sourceText').value.trim()) {
+            translateText();
+        }
+    });
+    
+    // Add event listeners for copy buttons
+    document.getElementById('copySourceBtn').addEventListener('click', function() {
+        copyToClipboard('sourceText');
+    });
+    
+    document.getElementById('copyTargetBtn').addEventListener('click', function() {
+        copyToClipboard('translatedText', true);
+    });
+    
+    // Add event listeners for listen buttons
+    document.getElementById('listenSourceBtn').addEventListener('click', function() {
+        const text = document.getElementById('sourceText').value;
+        const lang = document.getElementById('sourceLanguage').value;
+        speakText(text, lang);
+    });
+    
+    document.getElementById('listenTargetBtn').addEventListener('click', function() {
+        const text = document.getElementById('translatedText').textContent;
+        const lang = document.getElementById('targetLanguage').value;
+        speakText(text, lang);
+    });
+    
+    // Add event listener for clear button
+    document.getElementById('clearBtn').addEventListener('click', clearAll);
+    
+    // Add event listener for clear history button
+    document.getElementById('clearHistoryBtn').addEventListener('click', function() {
+        translationHistory.length = 0;
+        updateHistoryUI();
+        updateHistoryCount();
+        // Show empty state and close sidebar
+        document.getElementById('sidebar').classList.remove('open');
+    });
+    
+    // Clear source text button
+    document.getElementById('clearSourceBtn').addEventListener('click', function() {
+        const textarea = document.getElementById('sourceText');
+        if (!textarea.value.trim()) {
+            return;
+        }
+        
+        textarea.value = '';
+        updateCharCount('sourceText', 'sourceCharCount');
+        pulseEffect('sourceText');
+        
+        // Change button style briefly to show action performed
+        const originalClass = this.className;
+        this.className = 'btn btn-sm btn-danger rounded-pill px-2 py-1';
+        
+        setTimeout(() => {
+            this.className = originalClass;
+            showToast('Text cleared', 'info');
+        }, 300);
+    });
+    
+    // Auto-detect language button (uses basic language detection logic)
+    document.getElementById('detectLanguageBtn').addEventListener('click', function() {
+        const sourceText = document.getElementById('sourceText').value;
+        if (!sourceText.trim()) {
+            showToast('Please enter text to detect language', 'warning');
+            return;
+        }
+        
+        // Show loading effect
+        const originalContent = this.innerHTML;
+        this.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Detecting...';
+        this.disabled = true;
+        this.classList.add('btn-secondary');
+        this.classList.remove('btn-outline-secondary');
+        
+        // Basic language detection based on character sets and patterns
+        setTimeout(() => {
+            let detectedLang = 'en'; // Default to English
+            
+            // Hindi detection - checks for Devanagari Unicode range
+            const hindiPattern = /[\u0900-\u097F]/;
+            if (hindiPattern.test(sourceText)) {
+                detectedLang = 'hi';
+            }
+            // Spanish detection - check for Spanish specific characters and common words
+            else if (/[áéíóúüñ¿¡]/.test(sourceText.toLowerCase()) || 
+                     /\b(el|la|los|las|es|están|hola|gracias|buenos|días|cómo|por|qué)\b/.test(sourceText.toLowerCase())) {
+                detectedLang = 'es';
+            }
+            // German detection - check for German specific characters and common words
+            else if (/[äöüß]/.test(sourceText.toLowerCase()) || 
+                     /\b(der|die|das|und|ist|sind|haben|ich|du|sie|wir|nicht|ein|eine)\b/.test(sourceText.toLowerCase())) {
+                detectedLang = 'de';
+            }
+            // French detection - check for French specific characters and common words
+            else if (/[éèêëàâäæçéèêëîïôœùûüÿ]/.test(sourceText.toLowerCase()) || 
+                     /\b(le|la|les|un|une|des|et|est|sont|je|tu|il|elle|nous|vous|ils|elles|ne|pas)\b/.test(sourceText.toLowerCase())) {
+                detectedLang = 'fr';
+            }
+            
+            document.getElementById('sourceLanguage').value = detectedLang;
+            
+            // Highlight the dropdown to indicate change
+            const sourceSelect = document.getElementById('sourceLanguage').closest('.language-select-wrapper');
+            sourceSelect.classList.add('animate__animated', 'animate__flash');
+            setTimeout(() => sourceSelect.classList.remove('animate__animated', 'animate__flash'), 1000);
+            
+            // Restore button
+            this.innerHTML = originalContent;
+            this.disabled = false;
+            this.classList.remove('btn-secondary');
+            this.classList.add('btn-light');
+            
+            // Show feedback toast
+            const detectedLanguage = document.querySelector(`#sourceLanguage option[value="${detectedLang}"]`).textContent;
+            showToast('Language detected: ' + detectedLanguage, 'success');
+            
+            // Translate if text exists
+            if (sourceText.trim()) {
+                translateText();
+            }
+        }, 800);
+    });
+    
+    // Create toast container
+    createToastContainer();
+    
+    // Load history from local storage if available
+    loadHistory();
+    
+    // Update history count badge
+    updateHistoryCount();
+});
+
+function translateText() {
+    const sourceText = document.getElementById('sourceText').value;
+    const sourceLang = document.getElementById('sourceLanguage').value;
+    const targetLang = document.getElementById('targetLanguage').value;
+    
+    if (!sourceText.trim()) {
+        return;
+    }
+    
+    // Show loading spinner and progress bar
+    document.getElementById('loadingSpinner').style.display = 'inline-block';
+    document.getElementById('translateBtn').style.display = 'none';
+    startProgressAnimation();
+    
+    // Cancel any ongoing translation
+    if (translationInProgress && pollingInterval) {
+        clearInterval(pollingInterval);
+    }
+    
+    // Create form data
+    const formData = new FormData();
+    formData.append('text', sourceText);
+    formData.append('source_lang', sourceLang);
+    formData.append('target_lang', targetLang);
+    
+    // Send translation request
+    fetch('/translate', {
+        method: 'POST',
+        body: formData
+    })
+    .then(response => response.json())
+    .then(data => {
+        translationInProgress = true;
+        currentTaskId = data.task_id;
+        
+        // Set up polling for translation status
+        pollingInterval = setInterval(checkTranslationStatus, 500);
+    })
+    .catch(error => {
+        console.error('Error:', error);
+        document.getElementById('translatedText').textContent = 'An error occurred during translation.';
+        
+        // Hide loading spinner
+        document.getElementById('loadingSpinner').style.display = 'none';
+        document.getElementById('translateBtn').style.display = 'inline-block';
+        stopProgressAnimation();
+        
+        // Show error toast
+        showToast('Translation failed. Please try again.', 'error');
+    });
+}
+
+function checkTranslationStatus() {
+    if (!currentTaskId) return;
+    
+    fetch(`/translation_status?task_id=${currentTaskId}`)
+        .then(response => response.json())
+        .then(data => {
+            if (data.status === 'completed') {
+                // Update the translation result with animation
+                const resultElement = document.getElementById('translationResult');
+                resultElement.classList.add('animate__animated', 'animate__fadeIn');
+                
+                document.getElementById('translatedText').textContent = data.translation;
+                updateCharCount('translatedText', 'targetCharCount', true);
+                
+                // Hide loading spinner
+                document.getElementById('loadingSpinner').style.display = 'none';
+                document.getElementById('translateBtn').style.display = 'inline-block';
+                stopProgressAnimation();
+                
+                // Stop polling
+                clearInterval(pollingInterval);
+                translationInProgress = false;
+                
+                // Add to history
+                const historyItem = {
+                    source: document.getElementById('sourceText').value,
+                    sourceLang: document.getElementById('sourceLanguage').value,
+                    target: data.translation,
+                    targetLang: document.getElementById('targetLanguage').value,
+                    timestamp: new Date()
+                };
+                
+                addToHistory(historyItem);
+                updateHistoryCount();
+                saveHistory();
+                
+                // Show success toast
+                const sourceLang = document.querySelector(`#sourceLanguage option[value="${historyItem.sourceLang}"]`).textContent;
+                const targetLang = document.querySelector(`#targetLanguage option[value="${historyItem.targetLang}"]`).textContent;
+                showToast(`Translated from ${sourceLang} to ${targetLang}`);
+                
+                // Remove animation classes after animation completes
+                setTimeout(() => {
+                    resultElement.classList.remove('animate__animated', 'animate__fadeIn');
+                }, 1000);
+                
+                currentTaskId = null;
+            }
+        })
+        .catch(error => {
+            console.error('Error checking translation status:', error);
+        });
+}
+
+// Add language swap functionality
+function swapLanguages() {
+    const sourceSelect = document.getElementById('sourceLanguage');
+    const targetSelect = document.getElementById('targetLanguage');
+    const sourceText = document.getElementById('sourceText');
+    const translatedText = document.getElementById('translatedText');
+    
+    // Animate the swap
+    const sourceSection = sourceSelect.closest('.col-md-5');
+    const targetSection = targetSelect.closest('.col-md-5');
+    
+    sourceSection.classList.add('animate__animated', 'animate__fadeOut');
+    targetSection.classList.add('animate__animated', 'animate__fadeOut');
+    
+    setTimeout(() => {
+        // Swap the selected languages
+        const tempLang = sourceSelect.value;
+        sourceSelect.value = targetSelect.value;
+        targetSelect.value = tempLang;
+        
+        // Swap the text content
+        const tempText = sourceText.value;
+        sourceText.value = translatedText.textContent;
+        updateCharCount('sourceText', 'sourceCharCount');
+        
+        sourceSection.classList.remove('animate__fadeOut');
+        targetSection.classList.remove('animate__fadeOut');
+        sourceSection.classList.add('animate__fadeIn');
+        targetSection.classList.add('animate__fadeIn');
+        
+        setTimeout(() => {
+            sourceSection.classList.remove('animate__animated', 'animate__fadeIn');
+            targetSection.classList.remove('animate__animated', 'animate__fadeIn');
+            
+            // If we have text to translate after swapping, trigger translation
+            if (sourceText.value.trim()) {
+                translateText();
+            }
+        }, 500);
+    }, 300);
+    
+    // Show toast
+    showToast('Languages swapped');
+}
+
+// Helper function to copy text to clipboard
+function copyToClipboard(elementId, isContent = false) {
+    const text = isContent 
+        ? document.getElementById(elementId).textContent 
+        : document.getElementById(elementId).value;
+        
+    if (!text) return;
+    
+    navigator.clipboard.writeText(text).then(() => {
+        // Show a tooltip or some indicator that text was copied
+        const btn = isContent ? document.getElementById('copyTargetBtn') : document.getElementById('copySourceBtn');
+        const originalHtml = btn.innerHTML;
+        
+        btn.innerHTML = '<i class="bi bi-check2"></i> Copied';
+        btn.classList.add('btn-success');
+        btn.classList.remove('btn-light');
+        btn.classList.remove('btn-outline-primary');
+        
+        setTimeout(() => {
+            btn.innerHTML = originalHtml;
+            btn.classList.remove('btn-success');
+            if (isContent) {
+                btn.classList.add('btn-light');
+            } else {
+                btn.classList.add('btn-light');
+            }
+        }, 1500);
+        
+        // Show toast notification
+        showToast('Text copied to clipboard');
+    }).catch(err => {
+        showToast('Failed to copy text: ' + err, 'error');
+    });
+}
+
+// Helper function for text-to-speech
+function speakText(text, lang) {
+    if (!text || !lang) return;
+    
+    // Stop any ongoing speech
+    if (window.speechSynthesis) {
+        window.speechSynthesis.cancel();
+        
+        const utterance = new SpeechSynthesisUtterance(text);
+        utterance.lang = lang === 'en' ? 'en-US' : 
+                         lang === 'fr' ? 'fr-FR' : 
+                         lang === 'es' ? 'es-ES' : 
+                         lang === 'de' ? 'de-DE' :
+                         lang === 'hi' ? 'hi-IN' : 'en-US';
+        
+        // Show toast notification
+        showToast('Playing audio', 'info');
+        
+        window.speechSynthesis.speak(utterance);
+    } else {
+        showToast('Text-to-speech not supported in your browser', 'warning');
+    }
+}
+
+// Helper function to update character count
+function updateCharCount(textElementId, countElementId, isContent = false) {
+    const text = isContent 
+        ? document.getElementById(textElementId).textContent 
+        : document.getElementById(textElementId).value;
+    const count = text ? text.length : 0;
+    const badge = document.getElementById(countElementId);
+    badge.textContent = `${count} characters`;
+    
+    // Add visual feedback for long texts
+    if (count > 500) {
+        badge.classList.add('bg-warning', 'text-dark');
+        badge.classList.remove('bg-primary', 'bg-opacity-10', 'text-primary');
+    } else {
+        badge.classList.add('bg-primary', 'bg-opacity-10', 'text-primary');
+        badge.classList.remove('bg-warning', 'text-dark');
+    }
+}
+
+// Progress bar animation
+function startProgressAnimation() {
+    const progressBar = document.getElementById('translationProgress');
+    const progressBarMobile = document.getElementById('translationProgressMobile');
+    let width = 0;
+    
+    // Reset progress
+    progressBar.style.width = '0%';
+    progressBarMobile.style.width = '0%';
+    
+    progressInterval = setInterval(() => {
+        if (width >= 90) {
+            clearInterval(progressInterval);
+        } else {
+            width += Math.random() * 3;
+            if (width > 90) width = 90;
+            progressBar.style.width = width + '%';
+            progressBarMobile.style.width = width + '%';
+        }
+    }, 100);
+}
+
+function stopProgressAnimation() {
+    if (progressInterval) {
+        clearInterval(progressInterval);
+    }
+    
+    const progressBar = document.getElementById('translationProgress');
+    const progressBarMobile = document.getElementById('translationProgressMobile');
+    progressBar.style.width = '100%';
+    progressBarMobile.style.width = '100%';
+    
+    setTimeout(() => {
+        progressBar.style.width = '0%';
+        progressBarMobile.style.width = '0%';
+    }, 500);
+}
+
+// Clear all text fields
+function clearAll() {
+    // Animate the clear
+    const sourceText = document.getElementById('sourceText');
+    const translationResult = document.getElementById('translationResult');
+    
+    if (sourceText.value || document.getElementById('translatedText').textContent) {
+        sourceText.classList.add('animate__animated', 'animate__fadeOut');
+        translationResult.classList.add('animate__animated', 'animate__fadeOut');
+        
+        setTimeout(() => {
+            sourceText.value = '';
+            document.getElementById('translatedText').textContent = '';
+            updateCharCount('sourceText', 'sourceCharCount');
+            updateCharCount('translatedText', 'targetCharCount', true);
+            
+            sourceText.classList.remove('animate__fadeOut');
+            translationResult.classList.remove('animate__fadeOut');
+            sourceText.classList.add('animate__fadeIn');
+            translationResult.classList.add('animate__fadeIn');
+            
+            setTimeout(() => {
+                sourceText.classList.remove('animate__animated', 'animate__fadeIn');
+                translationResult.classList.remove('animate__animated', 'animate__fadeIn');
+            }, 500);
+        }, 300);
+        
+        showToast('All text cleared');
+    }
+}
+
+// Translation history management
+function addToHistory(item) {
+    // Add to the beginning of the array
+    translationHistory.unshift(item);
+    
+    // Keep only the maximum number of items
+    if (translationHistory.length > maxHistoryItems) {
+        translationHistory.pop();
+    }
+    
+    updateHistoryUI();
+    
+    // Notify user about history
+    if (translationHistory.length === 1) {
+        // First translation added to history
+        const historyBadge = document.querySelector('.history-badge');
+        historyBadge.classList.add('animate__animated', 'animate__heartBeat');
+        setTimeout(() => {
+            historyBadge.classList.remove('animate__animated', 'animate__heartBeat');
+        }, 1500);
+    }
+}
+
+// Toast notification system
+function createToastContainer() {
+    const toastContainer = document.createElement('div');
+    toastContainer.className = 'position-fixed bottom-0 end-0 p-3';
+    toastContainer.style.zIndex = '1080';
+    toastContainer.id = 'toastContainer';
+    document.body.appendChild(toastContainer);
+}
+
+function showToast(message, type = 'success') {
+    const toastContainer = document.getElementById('toastContainer');
+    const toastId = 'toast-' + Date.now();
+    const bgClass = type === 'success' ? 'bg-success' : 
+                   type === 'error' ? 'bg-danger' : 
+                   type === 'warning' ? 'bg-warning' : 'bg-primary';
+    
+    const toast = document.createElement('div');
+    toast.className = `toast align-items-center ${bgClass} text-white border-0 animate__animated animate__fadeInUp`;
+    toast.id = toastId;
+    toast.setAttribute('role', 'alert');
+    toast.setAttribute('aria-live', 'assertive');
+    toast.setAttribute('aria-atomic', 'true');
+    
+    toast.innerHTML = `
+        <div class="d-flex">
+            <div class="toast-body">
+                ${message}
+            </div>
+            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
+        </div>
+    `;
+    
+    toastContainer.appendChild(toast);
+    
+    // Initialize and show toast
+    const bsToast = new bootstrap.Toast(toast, {
+        autohide: true,
+        delay: 3000
+    });
+    bsToast.show();
+    
+    // Remove from DOM after hiding
+    toast.addEventListener('hidden.bs.toast', function() {
+        toast.remove();
+    });
+}
+
+// Apply pulse animation effect to element
+function pulseEffect(elementId) {
+    const element = document.getElementById(elementId);
+    element.classList.add('animate__animated', 'animate__pulse');
+    
+    setTimeout(() => {
+        element.classList.remove('animate__animated', 'animate__pulse');
+    }, 1000);
+}
+
+// Update history count badge
+function updateHistoryCount() {
+    const historyCount = document.getElementById('historyCount');
+    historyCount.textContent = translationHistory.length;
+    
+    if (translationHistory.length > 0) {
+        historyCount.style.display = 'inline-block';
+    } else {
+        historyCount.style.display = 'none';
+    }
+}
+
+// Save history to local storage
+function saveHistory() {
+    try {
+        localStorage.setItem('translationHistory', JSON.stringify(translationHistory));
+    } catch (e) {
+        console.error('Failed to save history to local storage:', e);
+    }
+}
+
+// Load history from local storage
+function loadHistory() {
+    try {
+        const savedHistory = localStorage.getItem('translationHistory');
+        if (savedHistory) {
+            // Parse the saved history and add timestamps back (as Date objects)
+            const parsedHistory = JSON.parse(savedHistory);
+            parsedHistory.forEach(item => {
+                item.timestamp = new Date(item.timestamp);
+            });
+            
+            // Replace current history with saved history
+            translationHistory.length = 0;
+            translationHistory.push(...parsedHistory);
+            
+            // Update UI
+            updateHistoryUI();
+            updateHistoryCount();
+        }
+    } catch (e) {
+        console.error('Failed to load history from local storage:', e);
+    }
+}
+
+function updateHistoryUI() {
+    const historyContainer = document.getElementById('translationHistory');
+    
+    // Clear current history
+    historyContainer.innerHTML = '';
+    
+    if (translationHistory.length === 0) {
+        historyContainer.innerHTML = `
+            <div class="text-center text-muted py-5">
+                <i class="bi bi-clock-history fs-1 d-block mb-3"></i>
+                <p>No translation history yet</p>
+                <p class="small">Your recent translations will appear here</p>
+            </div>
+        `;
+        return;
+    }
+    
+    translationHistory.forEach((item, index) => {
+        const historyItem = document.createElement('div');
+        historyItem.classList.add('card', 'border-0', 'shadow-sm', 'mb-3', 'animate__animated', 'animate__fadeIn');
+        
+        const sourceLanguageName = document.querySelector(`#sourceLanguage option[value="${item.sourceLang}"]`).textContent;
+        const targetLanguageName = document.querySelector(`#targetLanguage option[value="${item.targetLang}"]`).textContent;
+        
+        const time = new Intl.DateTimeFormat('default', {
+            hour: 'numeric',
+            minute: 'numeric'
+        }).format(item.timestamp);
+        
+        const date = new Intl.DateTimeFormat('default', {
+            year: 'numeric',
+            month: 'short',
+            day: 'numeric'
+        }).format(item.timestamp);
+        
+        historyItem.innerHTML = `
+            <div class="card-header bg-transparent border-0 pb-0">
+                <div class="d-flex justify-content-between align-items-center">
+                    <div>
+                        <span class="badge bg-primary me-1">${sourceLanguageName}</span>
+                        <i class="bi bi-arrow-right small"></i>
+                        <span class="badge bg-primary ms-1">${targetLanguageName}</span>
+                    </div>
+                    <small class="text-muted" title="${date}">${time}</small>
+                </div>
+            </div>
+            <div class="card-body pt-2">
+                <div class="small mb-2">
+                    <div class="text-truncate text-primary fw-medium" title="${item.source}">${item.source}</div>
+                    <div class="text-truncate mt-1" title="${item.target}">${item.target}</div>
+                </div>
+                <div class="d-flex justify-content-between mt-2">
+                    <button class="btn btn-sm btn-primary rounded-pill restore-btn">
+                        <i class="bi bi-arrow-counterclockwise me-1"></i> Use
+                    </button>
+                    <button class="btn btn-sm btn-outline-danger rounded-circle remove-btn">
+                        <i class="bi bi-trash"></i>
+                    </button>
+                </div>
+            </div>
+        `;
+        
+        // Add event listener to restore button
+        historyItem.querySelector('.restore-btn').addEventListener('click', function() {
+            document.getElementById('sourceText').value = item.source;
+            document.getElementById('translatedText').textContent = item.target;
+            document.getElementById('sourceLanguage').value = item.sourceLang;
+            document.getElementById('targetLanguage').value = item.targetLang;
+            updateCharCount('sourceText', 'sourceCharCount');
+            updateCharCount('translatedText', 'targetCharCount', true);
+            
+            // Close sidebar
+            document.getElementById('sidebar').classList.remove('open');
+            
+            // Add highlight effect
+            pulseEffect('sourceText');
+            pulseEffect('translationResult');
+            
+            showToast('Translation restored');
+        });
+        
+        // Add event listener to remove button
+        historyItem.querySelector('.remove-btn').addEventListener('click', function() {
+            historyItem.classList.add('animate__fadeOut');
+            
+            setTimeout(() => {
+                translationHistory.splice(index, 1);
+                updateHistoryUI();
+                updateHistoryCount();
+                saveHistory();
+            }, 500);
+        });
+        
+        historyContainer.appendChild(historyItem);
+    });
+}
+</script>
+{% endblock %}

translator/translator.py

@@ -0,0 +1,189 @@
+from transformers import MarianMTModel, MarianTokenizer
+import torch
+import threading
+import queue
+import time
+import uuid
+
+class Translator:
+    def __init__(self):
+        # Dictionary mapping language pairs to model names
+        self.models = {
+            'en-fr': 'Helsinki-NLP/opus-mt-en-fr',
+            'en-es': 'Helsinki-NLP/opus-mt-en-es',
+            'en-de': 'Helsinki-NLP/opus-mt-en-de',
+            'en-hi': 'Helsinki-NLP/opus-mt-en-hi',
+            'fr-en': 'Helsinki-NLP/opus-mt-fr-en',
+            'es-en': 'Helsinki-NLP/opus-mt-es-en',
+            'de-en': 'Helsinki-NLP/opus-mt-de-en',
+            'hi-en': 'Helsinki-NLP/opus-mt-hi-en',
+            # Add more language pairs as needed
+        }
+        # Cache for loaded models to avoid reloading - limited to 1 model for memory constraints
+        self.loaded_models = {}
+        self.loaded_tokenizers = {}
+        self.max_models_in_memory = 1  # Only keep one model in memory at a time
+        
+        # Available languages
+        self.languages = {
+            'en': 'English',
+            'fr': 'French',
+            'es': 'Spanish',
+            'de': 'German',
+            'hi': 'Hindi',
+            # Add more languages as needed
+        }
+        
+        # For optimized translation
+        self.translation_queue = queue.Queue()
+        self.translation_results = {}
+        self.worker_thread = threading.Thread(target=self._translation_worker, daemon=True)
+        self.worker_thread.start()
+    
+    def get_available_languages(self):
+        """Return available languages"""
+        return self.languages
+    
+    def get_model_name(self, source_lang, target_lang):
+        """Get the appropriate model name for the language pair"""
+        lang_pair = f"{source_lang}-{target_lang}"
+        return self.models.get(lang_pair)
+    
+    def load_model(self, model_name):
+        """Load model and tokenizer if not already loaded, with memory management"""
+        # If the model is already loaded, return it
+        if model_name in self.loaded_models:
+            return self.loaded_models[model_name], self.loaded_tokenizers[model_name]
+        
+        # If we've reached our model limit, clear the oldest model first
+        if len(self.loaded_models) >= self.max_models_in_memory:
+            # Clear all models to conserve memory
+            print(f"Memory limit reached. Clearing models...")
+            self.loaded_models = {}
+            self.loaded_tokenizers = {}
+            # Force garbage collection to free memory
+            import gc
+            gc.collect()
+            torch.cuda.empty_cache() if torch.cuda.is_available() else None
+        
+        # Now load the new model
+        print(f"Loading model: {model_name}")
+        try:
+            # Use more memory-efficient loading options
+            self.loaded_tokenizers[model_name] = MarianTokenizer.from_pretrained(model_name)
+            self.loaded_models[model_name] = MarianMTModel.from_pretrained(
+                model_name, 
+                low_cpu_mem_usage=True,
+                torch_dtype=torch.float16,  # Use half-precision to save memory
+                local_files_only=False,     # Allow downloading if needed
+                force_download=False        # Don't force download if already cached
+            )
+            
+            # Force garbage collection after loading to minimize memory impact
+            import gc
+            gc.collect()
+            
+            return self.loaded_models[model_name], self.loaded_tokenizers[model_name]
+        except Exception as e:
+            print(f"Error loading model {model_name}: {e}")
+            # Make error message more descriptive for debugging
+            import traceback
+            print(f"Detailed error: {traceback.format_exc()}")
+            raise
+    
+    def _translation_worker(self):
+        """Background worker that processes translation requests"""
+        while True:
+            try:
+                # Get a translation task from the queue
+                task_id, text, source_lang, target_lang = self.translation_queue.get()
+                
+                # Process the translation
+                model_name = self.get_model_name(source_lang, target_lang)
+                
+                if not model_name:
+                    self.translation_results[task_id] = f"Translation not available for {source_lang} to {target_lang}"
+                else:
+                    try:
+                        model, tokenizer = self.load_model(model_name)
+                        
+                        # Handle large inputs by chunking if needed
+                        max_length = 512  # Maximum sequence length most models can handle
+                        if len(text) > max_length * 2:  # Rough character to token ratio
+                            # Simple chunking for long texts
+                            chunks = [text[i:i + max_length * 2] for i in range(0, len(text), max_length * 2)]
+                            translated_chunks = []
+                            
+                            for chunk in chunks:
+                                # Process each chunk
+                                inputs = tokenizer(chunk, return_tensors="pt", padding=True, truncation=True, max_length=max_length)
+                                
+                                # Use memory-efficient settings
+                                with torch.no_grad():
+                                    translated = model.generate(
+                                        **inputs,
+                                        num_beams=2,  # Reduce beam size to save memory
+                                        early_stopping=True,
+                                        max_length=max_length
+                                    )
+                                
+                                chunk_text = tokenizer.batch_decode(translated, skip_special_tokens=True)[0]
+                                translated_chunks.append(chunk_text)
+                            
+                            # Join the translated chunks
+                            self.translation_results[task_id] = " ".join(translated_chunks)
+                        else:
+                            # Process as usual for smaller texts
+                            inputs = tokenizer(text, return_tensors="pt", padding=True, truncation=True, max_length=max_length)
+                            
+                            # Generate translation with memory-efficient settings
+                            with torch.no_grad():
+                                translated = model.generate(
+                                    **inputs,
+                                    num_beams=2,  # Reduce beam size to save memory
+                                    early_stopping=True,
+                                    max_length=max_length * 2
+                                )
+                            
+                            # Decode the generated tokens back to text
+                            translated_text = tokenizer.batch_decode(translated, skip_special_tokens=True)
+                            self.translation_results[task_id] = translated_text[0]
+                        
+                        # Clear some memory after translation
+                        import gc
+                        gc.collect()
+                        torch.cuda.empty_cache() if torch.cuda.is_available() else None
+                        
+                    except Exception as e:
+                        print(f"Translation error: {e}")
+                        self.translation_results[task_id] = f"Error translating text: {str(e)[:100]}"
+                
+                # Mark the task as done
+                self.translation_queue.task_done()
+            except Exception as e:
+                print(f"Error in translation worker: {e}")
+                self.translation_results[task_id] = "Server error occurred during translation"
+                self.translation_queue.task_done()
+                # Continue processing other items even if one fails
+                continue
+    
+    def translate(self, text, source_lang, target_lang):
+        """Translate text from source language to target language"""
+        # Generate a unique ID for this translation request
+        task_id = str(uuid.uuid4())
+        
+        # Submit the task to the background worker
+        self.translation_queue.put((task_id, text, source_lang, target_lang))
+        
+        # Return the task ID immediately
+        return {"task_id": task_id, "status": "processing"}
+    
+    def get_translation_result(self, task_id):
+        """Get the result of a translation task by its ID"""
+        if task_id in self.translation_results:
+            result = self.translation_results[task_id]
+            # Clean up after returning the result
+            del self.translation_results[task_id]
+            return {"status": "completed", "translation": result}
+        else:
+            return {"status": "processing"}