Deploy Railway Backend Connection

.gitattributes

@@ -1,35 +0,0 @@
-*.7z filter=lfs diff=lfs merge=lfs -text
-*.arrow filter=lfs diff=lfs merge=lfs -text
-*.bin filter=lfs diff=lfs merge=lfs -text
-*.bz2 filter=lfs diff=lfs merge=lfs -text
-*.ckpt filter=lfs diff=lfs merge=lfs -text
-*.ftz filter=lfs diff=lfs merge=lfs -text
-*.gz filter=lfs diff=lfs merge=lfs -text
-*.h5 filter=lfs diff=lfs merge=lfs -text
-*.joblib filter=lfs diff=lfs merge=lfs -text
-*.lfs.* filter=lfs diff=lfs merge=lfs -text
-*.mlmodel filter=lfs diff=lfs merge=lfs -text
-*.model filter=lfs diff=lfs merge=lfs -text
-*.msgpack filter=lfs diff=lfs merge=lfs -text
-*.npy filter=lfs diff=lfs merge=lfs -text
-*.npz filter=lfs diff=lfs merge=lfs -text
-*.onnx filter=lfs diff=lfs merge=lfs -text
-*.ot filter=lfs diff=lfs merge=lfs -text
-*.parquet filter=lfs diff=lfs merge=lfs -text
-*.pb filter=lfs diff=lfs merge=lfs -text
-*.pickle filter=lfs diff=lfs merge=lfs -text
-*.pkl filter=lfs diff=lfs merge=lfs -text
-*.pt filter=lfs diff=lfs merge=lfs -text
-*.pth filter=lfs diff=lfs merge=lfs -text
-*.rar filter=lfs diff=lfs merge=lfs -text
-*.safetensors filter=lfs diff=lfs merge=lfs -text
-saved_model/**/* filter=lfs diff=lfs merge=lfs -text
-*.tar.* filter=lfs diff=lfs merge=lfs -text
-*.tar filter=lfs diff=lfs merge=lfs -text
-*.tflite filter=lfs diff=lfs merge=lfs -text
-*.tgz filter=lfs diff=lfs merge=lfs -text
-*.wasm filter=lfs diff=lfs merge=lfs -text
-*.xz filter=lfs diff=lfs merge=lfs -text
-*.zip filter=lfs diff=lfs merge=lfs -text
-*.zst filter=lfs diff=lfs merge=lfs -text
-*tfevents* filter=lfs diff=lfs merge=lfs -text

Dockerfile

@@ -1,21 +0,0 @@
-FROM python:3.10-slim
-
-WORKDIR /app
-
-# Install system dependencies
-RUN apt-get update && apt-get install -y \
-    git \
-    && rm -rf /var/lib/apt/lists/*
-
-# Copy requirements
-COPY requirements.txt .
-RUN pip install --no-cache-dir -r requirements.txt
-
-# Copy app files
-COPY . .
-
-# Expose port
-EXPOSE 7860
-
-# Run Flask app
-CMD ["python", "app.py"]

README.md

@@ -1,26 +0,0 @@
----
-title: Instant Translat - AI Voice Translation
-emoji: 🌍
-colorFrom: purple
-colorTo: blue
-sdk: docker
-pinned: true
-license: mit
----
-
-# 🌍 Instant Translat - AI Voice Translation
-
-**Real-time voice translation with beautiful dark theme UI**
-
-## Features
-- 🎤 Speech-to-Text (SeamlessM4T v2 Large)
-- 🌍 Translation (NLLB-200 - 200 languages + Darija)
-- 🔊 Text-to-Speech (Fish Audio S1)
-- 🎭 Voice Cloning
-- 🌙 Beautiful Dark Theme UI
-
-## Technology
-- Flask backend
-- Custom dark theme interface
-- Meta AI models
-- Fish Audio TTS

app.py

@@ -1,158 +0,0 @@
-from flask import Flask, render_template, request, jsonify
-from transformers import (
-    AutoProcessor, 
-    SeamlessM4Tv2ForSpeechToText,
-    AutoModelForSeq2SeqLM, 
-    AutoTokenizer,
-)
-import torch
-import numpy as np
-import base64
-import io
-import requests
-import os
-
-app = Flask(__name__)
-
-# ============================================================
-# Device Setup
-# ============================================================
-device = "cuda" if torch.cuda.is_available() else "cpu"
-print(f"🖥️ Device: {device}")
-
-# ============================================================
-# Load Models
-# ============================================================
-
-print("📥 Loading SeamlessM4T v2 Large...")
-STT_MODEL = "facebook/seamless-m4t-v2-large"
-stt_processor = AutoProcessor.from_pretrained(STT_MODEL)
-stt_model = SeamlessM4Tv2ForSpeechToText.from_pretrained(STT_MODEL)
-stt_model = stt_model.to(device).eval()
-print("✅ SeamlessM4T v2 Large loaded!")
-
-print("📥 Loading NLLB-200...")
-NLLB_MODEL = "facebook/nllb-200-distilled-600M"
-nllb_tokenizer = AutoTokenizer.from_pretrained(NLLB_MODEL)
-nllb_model = AutoModelForSeq2SeqLM.from_pretrained(NLLB_MODEL)
-nllb_model = nllb_model.to(device).eval()
-print("✅ NLLB-200 loaded!")
-
-# Fish Audio API
-FISH_AUDIO_API_KEY = os.environ.get('FISH_AUDIO_API_KEY', '')
-
-# Language mapping
-LANG_MAP = {
-    'ar-SA': ('arb', 'ary_Arab'),
-    'fr-FR': ('fra', 'fra_Latn'),
-    'en-US': ('eng', 'eng_Latn'),
-    'es-ES': ('spa', 'spa_Latn'),
-    'de-DE': ('deu', 'deu_Latn'),
-}
-
-@app.route('/')
-def index():
-    return render_template('index.html')
-
-@app.route('/process_audio', methods=['POST'])
-def process_audio():
-    try:
-        data = request.json
-        audio_b64 = data.get('audio')
-        source_lang = data.get('source_lang', 'ar-SA')
-        target_lang = data.get('target_lang', 'en-US')
-        
-        # Decode audio
-        audio_bytes = base64.b64decode(audio_b64)
-        
-        # Convert to numpy
-        import scipy.io.wavfile as wavfile
-        sample_rate, audio_data = wavfile.read(io.BytesIO(audio_bytes))
-        audio_data = audio_data.astype(np.float32)
-        if np.abs(audio_data).max() > 1.0:
-            audio_data = audio_data / 32768.0
-        
-        # STT
-        src_code = LANG_MAP.get(source_lang, ('eng', 'eng_Latn'))[0]
-        inputs = stt_processor(
-            audios=audio_data,
-            sampling_rate=sample_rate,
-            return_tensors="pt"
-        ).to(device)
-        
-        with torch.no_grad():
-            output_tokens = stt_model.generate(
-                **inputs,
-                tgt_lang=src_code,
-                generate_speech=False
-            )
-        
-        transcript = stt_processor.decode(output_tokens[0].tolist(), skip_special_tokens=True)
-        
-        # Translation
-        src_nllb = LANG_MAP.get(source_lang, ('eng', 'eng_Latn'))[1]
-        tgt_nllb = LANG_MAP.get(target_lang, ('eng', 'eng_Latn'))[1]
-        
-        nllb_tokenizer.src_lang = src_nllb
-        inputs = nllb_tokenizer(transcript, return_tensors="pt", padding=True, truncation=True, max_length=512).to(device)
-        
-        forced_bos_token_id = nllb_tokenizer.convert_tokens_to_ids(tgt_nllb)
-        
-        with torch.no_grad():
-            outputs = nllb_model.generate(
-                **inputs,
-                forced_bos_token_id=forced_bos_token_id,
-                max_length=512,
-                num_beams=5
-            )
-        
-        translation = nllb_tokenizer.decode(outputs[0], skip_special_tokens=True)
-        
-        # TTS
-        tts_audio_b64 = None
-        if FISH_AUDIO_API_KEY:
-            tts_audio = generate_tts(translation)
-            if tts_audio:
-                tts_audio_b64 = base64.b64encode(tts_audio).decode('utf-8')
-        
-        return jsonify({
-            'success': True,
-            'original': transcript,
-            'translation': translation,
-            'audio': tts_audio_b64,
-            'source_lang': source_lang,
-            'target_lang': target_lang
-        })
-        
-    except Exception as e:
-        return jsonify({'success': False, 'error': str(e)}), 500
-
-def generate_tts(text):
-    """Generate TTS using Fish Audio"""
-    if not FISH_AUDIO_API_KEY:
-        return None
-    
-    try:
-        headers = {'Authorization': f'Bearer {FISH_AUDIO_API_KEY}'}
-        payload = {
-            'text': text,
-            'format': 'mp3',
-            'mp3_bitrate': 192,
-        }
-        
-        response = requests.post(
-            'https://api.fish.audio/v1/tts',
-            headers=headers,
-            json=payload,
-            timeout=60
-        )
-        
-        if response.status_code == 200:
-            return response.content
-        
-        return None
-    except:
-        return None
-
-if __name__ == '__main__':
-    app.run(host='0.0.0.0', port=7860)

templates/index.html → index.html

@@ -23,8 +23,8 @@
         href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Noto+Sans+Arabic:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap"
         rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <link rel="stylesheet" href="/static/enhanced.css">
-    <link rel="manifest" href="/static/manifest.json">
+    <link rel="stylesheet" href="./enhanced.css">
+    <link rel="manifest" href="./manifest.json">
     <style>
         /* CSS moved to static/enhanced.css */
     </style>
@@ -853,7 +853,7 @@
                                     console.log('✨ Target language set to:', this.value);
 
                                     // Clear cache for new language
-                                    fetch('/clear_cache', { method: 'POST' });
+                                    fetch('https://instant-translat-production.up.railway.app/clear_cache', { method: 'POST' });
                                 });
                             }
 

requirements.txt

@@ -1,7 +0,0 @@
-Flask==3.0.0
-transformers>=4.30.0
-torch>=2.0.0
-scipy
-numpy
-requests
-Werkzeug==3.0.0

static/script.js → script.js

@@ -1,5 +1,7 @@
 // Babel - Main Script (Cleaned & Optimized)
 
+const API_BASE = 'https://instant-translat-production.up.railway.app';
+
 let mediaRecorder;
 let audioChunks = [];
 let isRecording = false;
@@ -1129,7 +1131,7 @@ async function sendTextForProcessing(text) {
     };
 
     try {
-        const response = await fetch('/process_audio', {
+        const response = await fetch(API_BASE + '/process_audio', {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify(payload)
@@ -1937,7 +1939,7 @@ document.addEventListener('DOMContentLoaded', () => {
         sourceLangSelector.addEventListener('change', function () {
             console.log('🔄 Source Language Changed -> Clearing Smart History...');
             localStorage.setItem('sourceLang', this.value);
-            fetch('/clear_cache', { method: 'POST' });
+            fetch(API_BASE + '/clear_cache', { method: 'POST' });
         });
     }
 
@@ -1946,7 +1948,7 @@ document.addEventListener('DOMContentLoaded', () => {
         quickLangSelector.addEventListener('change', function () {
             console.log('🔄 Target Language Changed -> Clearing Smart History...');
             localStorage.setItem('targetLang', this.value);
-            fetch('/clear_cache', { method: 'POST' });
+            fetch(API_BASE + '/clear_cache', { method: 'POST' });
         });
     }
 

static/enhanced.js

@@ -1,217 +0,0 @@
-// ENHANCED UI - Darija Cards + Audio Player Manager
-
-// Parse Darija text into structured cards
-function parseDarijaToCards(text) {
-    // Check if text contains Darija labels
-    const hasArabicLabel = text.includes('🇲🇦') || text.includes('الدارجة');
-    const hasArabiziLabel = text.includes('🔤') || text.includes('Darija (Arabizi)');
-
-    if (!hasArabicLabel && !hasArabiziLabel) {
-        // Regular text, return as-is
-        return `<div class="regular-text">${text.replace(/\n/g, '<br>')}</div>`;
-    }
-
-    // Split by the labels
-    const parts = text.split(/(?=🇲🇦)|(?=🔤)/);
-
-    let html = '<div class="darija-container">';
-
-    for (const part of parts) {
-        const trimmed = part.trim();
-        if (!trimmed) continue;
-
-        if (trimmed.startsWith('🇲🇦') || trimmed.includes('الدارجة')) {
-            // Arabic card
-            const content = trimmed
-                .replace(/🇲🇦.*?\n/, '')
-                .replace(/الدارجة.*?\n/, '')
-                .trim();
-
-            html += `
-                <div class="darija-card arabic">
-                    <div class="darija-card-header">
-                        <span class="emoji">🇲🇦</span>
-                        <span>الدارجة (Arabic)</span>
-                    </div>
-                    <div class="darija-card-content">${content}</div>
-                </div>
-            `;
-        } else if (trimmed.startsWith('🔤') || trimmed.includes('Darija (Arabizi)')) {
-            // Arabizi card
-            const content = trimmed
-                .replace(/🔤.*?\n/, '')
-                .replace(/Darija.*?\n/, '')
-                .trim();
-
-            html += `
-                <div class="darija-card arabizi">
-                    <div class="darija-card-header">
-                        <span class="emoji">🔤</span>
-                        <span>Darija (Arabizi)</span>
-                    </div>
-                    <div class="darija-card-content">${content}</div>
-                </div>
-            `;
-        }
-    }
-
-    html += '</div>';
-    return html;
-}
-
-// Audio Player Manager
-class AudioPlayer {
-    constructor() {
-        // Create a DEDICATED audio element for enhanced player
-        this.audio = new Audio();
-        this.audio.id = 'enhanced-audio-element';
-
-        this.container = null;
-        this.playBtn = null;
-        this.waveform = null;
-        this.timeDisplay = null;
-        this.isPlaying = false;
-        this.currentAudioSrc = null;
-
-        this.createPlayer();
-        this.setupEventListeners();
-    }
-
-    createPlayer() {
-        // Create player HTML
-        const playerHTML = `
-            <div class="audio-player-container" id="enhanced-audio-player" style="display: none;">
-                <div class="audio-player">
-                    <div class="player-controls">
-                        <button class="play-btn" id="player-play-btn">
-                            <i class="fa-solid fa-play"></i>
-                        </button>
-                        <div class="waveform" id="player-waveform">
-                            <div class="wave-bar"></div>
-                            <div class="wave-bar"></div>
-                            <div class="wave-bar"></div>
-                            <div class="wave-bar"></div>
-                            <div class="wave-bar"></div>
-                        </div>
-                    </div>
-                    <div class="player-actions">
-                        <button class="action-btn" id="player-download-btn">
-                            <i class="fa-solid fa-download"></i>
-                            <span>Download</span>
-                        </button>
-                        <button class="action-btn" id="player-close-btn">
-                            <i class="fa-solid fa-xmark"></i>
-                            <span>Close</span>
-                        </button>
-                    </div>
-                    <div class="time-display" id="player-time-display">0:00 / 0:00</div>
-                </div>
-            </div>
-        `;
-
-        // Insert into DOM
-        document.body.insertAdjacentHTML('beforeend', playerHTML);
-
-        // Get references
-        this.container = document.getElementById('enhanced-audio-player');
-        this.playBtn = document.getElementById('player-play-btn');
-        this.waveform = document.getElementById('player-waveform');
-        this.timeDisplay = document.getElementById('player-time-display');
-
-        document.getElementById('player-download-btn').onclick = () => this.download();
-        document.getElementById('player-close-btn').onclick = () => this.hide();
-    }
-
-    setupEventListeners() {
-        this.playBtn.onclick = () => this.togglePlay();
-
-        this.audio.addEventListener('play', () => {
-            this.isPlaying = true;
-            this.playBtn.innerHTML = '<i class="fa-solid fa-pause"></i>';
-            this.waveform.classList.add('playing');
-        });
-
-        this.audio.addEventListener('pause', () => {
-            this.isPlaying = false;
-            this.playBtn.innerHTML = '<i class="fa-solid fa-play"></i>';
-            this.waveform.classList.remove('playing');
-        });
-
-        this.audio.addEventListener('ended', () => {
-            this.isPlaying = false;
-            this.playBtn.innerHTML = '<i class="fa-solid fa-play"></i>';
-            this.waveform.classList.remove('playing');
-        });
-
-        this.audio.addEventListener('timeupdate', () => {
-            this.updateTimeDisplay();
-        });
-    }
-
-    show(audioSrc) {
-        if (audioSrc) {
-            this.currentAudioSrc = audioSrc;
-            this.audio.src = audioSrc;
-        }
-
-        this.container.style.display = 'block';
-        setTimeout(() => {
-            this.container.classList.add('visible');
-        }, 10);
-
-        // Auto-play
-        this.audio.play().catch(err => {
-            console.log('Auto-play blocked:', err);
-        });
-    }
-
-    hide() {
-        this.container.classList.remove('visible');
-        setTimeout(() => {
-            this.container.style.display = 'none';
-        }, 300);
-        this.audio.pause();
-    }
-
-    togglePlay() {
-        if (this.isPlaying) {
-            this.audio.pause();
-        } else {
-            this.audio.play();
-        }
-    }
-
-    updateTimeDisplay() {
-        const current = this.formatTime(this.audio.currentTime);
-        const duration = this.formatTime(this.audio.duration || 0);
-        this.timeDisplay.textContent = `${current} / ${duration}`;
-    }
-
-    formatTime(seconds) {
-        if (isNaN(seconds)) return '0:00';
-        const mins = Math.floor(seconds / 60);
-        const secs = Math.floor(seconds % 60);
-        return `${mins}:${secs.toString().padStart(2, '0')}`;
-    }
-
-    download() {
-        if (!this.currentAudioSrc) return;
-
-        const a = document.createElement('a');
-        a.href = this.currentAudioSrc;
-        a.download = `translation_${Date.now()}.mp3`;
-        document.body.appendChild(a);
-        a.click();
-        document.body.removeChild(a);
-    }
-}
-
-// Initialize on load
-window.enhancedAudioPlayer = null;
-
-document.addEventListener('DOMContentLoaded', () => {
-    window.enhancedAudioPlayer = new AudioPlayer();
-});
-
-// Export functions
-window.parseDarijaToCards = parseDarijaToCards;

templates/admin.html

@@ -1,357 +0,0 @@
-<!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>Admin Control Panel | Instant Translator</title>
-    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <style>
-        :root {
-            --primary: #6366f1;
-            --surface: #09090b;
-            --surface-light: #18181b;
-            --text: #e4e4e7;
-            --danger: #ef4444;
-            --success: #22c55e;
-        }
-
-        body {
-            font-family: 'Outfit', sans-serif;
-            background-color: #000;
-            color: var(--text);
-            margin: 0;
-            padding: 20px;
-            -webkit-font-smoothing: antialiased;
-        }
-
-        .admin-container {
-            max-width: 800px;
-            margin: 0 auto;
-        }
-
-        .header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: 30px;
-            padding-bottom: 20px;
-            border-bottom: 1px solid #27272a;
-        }
-
-        h1 {
-            margin: 0;
-            font-size: 24px;
-            background: linear-gradient(135deg, #fff 0%, #a5b4fc 100%);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-        }
-
-        .card {
-            background: var(--surface-light);
-            border-radius: 16px;
-            padding: 24px;
-            margin-bottom: 20px;
-            border: 1px solid #27272a;
-        }
-
-        .card h2 {
-            margin-top: 0;
-            font-size: 18px;
-            color: #a1a1aa;
-            margin-bottom: 20px;
-        }
-
-        .stat-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-            gap: 15px;
-        }
-
-        .stat-box {
-            background: #27272a;
-            padding: 15px;
-            border-radius: 12px;
-            text-align: center;
-        }
-
-        .stat-value {
-            font-size: 24px;
-            font-weight: 700;
-            color: #fff;
-        }
-
-        .stat-label {
-            font-size: 12px;
-            color: #a1a1aa;
-            margin-top: 5px;
-        }
-
-        .form-group {
-            margin-bottom: 15px;
-        }
-
-        .form-group label {
-            display: block;
-            margin-bottom: 8px;
-            font-size: 14px;
-            color: #a1a1aa;
-        }
-
-        .form-group input {
-            width: 100%;
-            padding: 12px;
-            background: #000;
-            border: 1px solid #27272a;
-            border-radius: 8px;
-            color: #fff;
-            font-family: inherit;
-            box-sizing: border-box;
-        }
-
-        .form-group input:focus {
-            outline: none;
-            border-color: var(--primary);
-        }
-
-        .btn {
-            background: var(--primary);
-            color: white;
-            border: none;
-            padding: 12px 24px;
-            border-radius: 8px;
-            font-weight: 600;
-            cursor: pointer;
-            width: 100%;
-            font-size: 16px;
-            transition: opacity 0.2s;
-        }
-
-        .btn:hover {
-            opacity: 0.9;
-        }
-
-        .btn-danger {
-            background: var(--danger);
-        }
-
-        .login-screen {
-            position: fixed;
-            inset: 0;
-            background: #000;
-            z-index: 100;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-
-        .login-box {
-            width: 100%;
-            max-width: 400px;
-            padding: 30px;
-        }
-
-        .status-badge {
-            display: inline-block;
-            padding: 4px 12px;
-            border-radius: 20px;
-            font-size: 12px;
-            font-weight: 600;
-            background: #27272a;
-        }
-
-        .status-badge.online {
-            background: rgba(34, 197, 94, 0.2);
-            color: var(--success);
-        }
-    </style>
-</head>
-
-<body>
-
-    <!-- LOGIN SCREEN -->
-    <div id="login-screen" class="login-screen">
-        <div class="card login-box">
-            <h2 style="text-align: center; color: white;">Admin Access</h2>
-            <div class="form-group">
-                <label>Admin Password</label>
-                <input type="password" id="admin-pass" placeholder="Enter PIN">
-            </div>
-            <button class="btn" onclick="login()">Unlock Panel</button>
-        </div>
-    </div>
-
-    <!-- DASHBOARD -->
-    <div class="admin-container">
-        <div class="header">
-            <div>
-                <h1>Admin Control Panel</h1>
-                <div style="margin-top: 5px; color: #a1a1aa; font-size: 13px;">
-                    <span class="status-badge online"><i class="fa-solid fa-circle" style="font-size: 8px;"></i> System
-                        Online</span>
-                    v2.5 Mobile Ready
-                </div>
-            </div>
-            <button class="btn" style="width: auto; background: #27272a;" onclick="logout()"><i
-                    class="fa-solid fa-power-off"></i></button>
-        </div>
-
-        <!-- STATS -->
-        <div class="card">
-            <h2>📊 Live Statistics</h2>
-            <div class="stat-grid">
-                <div class="stat-box">
-                    <div class="stat-value" id="stat-requests">0</div>
-                    <div class="stat-label">Total Translations</div>
-                </div>
-                <div class="stat-box">
-                    <div class="stat-value" id="stat-errors">0</div>
-                    <div class="stat-label">API Errors</div>
-                </div>
-                <div class="stat-box">
-                    <div class="stat-value" id="stat-cost">$0.00</div>
-                    <div class="stat-label">Est. Cost</div>
-                </div>
-            </div>
-        </div>
-
-        <!-- MASTER KEYS -->
-        <div class="card">
-            <h2>🔑 Master API Configuration</h2>
-            <p style="font-size: 13px; color: #71717a; margin-bottom: 20px;">
-                These keys are stored securely on the server. App users will use these keys via the API without ever
-                seeing them.
-                <b>Required for App Store compliance.</b>
-            </p>
-
-            <div class="form-group">
-                <label>OpenAI API Key (Universal)</label>
-                <input type="password" id="key-openai" placeholder="sk-...">
-            </div>
-
-            <div class="form-group">
-                <label>ElevenLabs API Key</label>
-                <input type="password" id="key-eleven" placeholder="xi-...">
-            </div>
-
-            <div class="form-group">
-                <label>Google Cloud API Key</label>
-                <input type="password" id="key-google" placeholder="AIza...">
-            </div>
-
-            <!-- TTS ENGINE SELECTOR -->
-            <div class="form-group" style="border-top: 1px solid #27272a; padding-top: 20px; margin-top: 20px;">
-                <label style="margin-bottom: 12px;">🎤 TTS Engine Selection</label>
-                <div
-                    style="display: flex; gap: 10px; align-items: center; background: #27272a; padding: 12px; border-radius: 8px;">
-                    <div style="flex: 1; text-align: center; padding: 10px; border-radius: 6px; cursor: pointer; transition: 0.3s; background: #6366f1; color: white;"
-                        id="tts-openai" onclick="selectTTS('openai')">
-                        <div style="font-weight: 600;">OpenAI TTS</div>
-                        <div style="font-size: 11px; opacity: 0.8; margin-top: 4px;">$0.015/1K · HD Quality</div>
-                    </div>
-                    <div style="flex: 1; text-align: center; padding: 10px; border-radius: 6px; cursor: pointer; transition: 0.3s; background: transparent; border: 1px solid #3f3f46; color: #a1a1aa;"
-                        id="tts-elevenlabs" onclick="selectTTS('elevenlabs')">
-                        <div style="font-weight: 600;">ElevenLabs</div>
-                        <div style="font-size: 11px; opacity: 0.8; margin-top: 4px">$0.30/1K · Ultra Premium</div>
-                    </div>
-                </div>
-                <div style="margin-top: 10px; font-size: 12px; color: #71717a; text-align: center;" id="tts-status">
-                    Current: <span style="color: #6366f1; font-weight: 600;">OpenAI TTS</span>
-                </div>
-            </div>
-
-            <button class="btn" onclick="saveKeys()">Save Master Configuration</button>
-        </div>
-
-        <!-- SYSTEM CONTROL -->
-        <div class="card">
-            <h2>🛡️ System Controls</h2>
-            <div class="form-group">
-                <label style="display: flex; align-items: center; justify-content: space-between;">
-                    Example Mode (Free for users)
-                    <input type="checkbox" style="width: auto;" checked>
-                </label>
-            </div>
-            <button class="btn btn-danger" onclick="clearLogs()">Clear Server Logs</button>
-        </div>
-    </div>
-
-    <script>
-        // Simple client-side gate (Real auth is server-side)
-        function login() {
-            const pass = document.getElementById('admin-pass').value;
-            if (pass === 'admin123') { // Placeholder logic
-                document.getElementById('login-screen').style.display = 'none';
-                loadStats();
-            } else {
-                alert('Access Denied');
-            }
-        }
-
-        function logout() {
-            location.reload();
-        }
-
-        function loadStats() {
-            // Simulator
-            document.getElementById('stat-requests').innerText = Math.floor(Math.random() * 500) + 120;
-            document.getElementById('stat-errors').innerText = '0';
-
-            // Load saved TTS engine
-            const savedEngine = localStorage.getItem('ttsEngine') || 'openai';
-            selectTTS(savedEngine, false);
-        }
-
-        function selectTTS(engine, save = true) {
-            const openaiBtn = document.getElementById('tts-openai');
-            const elevenlabsBtn = document.getElementById('tts-elevenlabs');
-            const status = document.getElementById('tts-status');
-
-            if (engine === 'openai') {
-                // OpenAI selected
-                openaiBtn.style.background = '#6366f1';
-                openaiBtn.style.color = 'white';
-                openaiBtn.style.border = 'none';
-
-                elevenlabsBtn.style.background = 'transparent';
-                elevenlabsBtn.style.color = '#a1a1aa';
-                elevenlabsBtn.style.border = '1px solid #3f3f46';
-
-                status.innerHTML = 'Current: <span style="color: #6366f1; font-weight: 600;">OpenAI TTS</span>';
-            } else {
-                // ElevenLabs selected
-                elevenlabsBtn.style.background = '#6366f1';
-                elevenlabsBtn.style.color = 'white';
-                elevenlabsBtn.style.border = 'none';
-
-                openaiBtn.style.background = 'transparent';
-                openaiBtn.style.color = '#a1a1aa';
-                openaiBtn.style.border = '1px solid #3f3f46';
-
-                status.innerHTML = 'Current: <span style="color: #6366f1; font-weight: 600;">ElevenLabs</span>';
-            }
-
-            // Save to localStorage
-            if (save) {
-                localStorage.setItem('ttsEngine', engine);
-                console.log('TTS Engine switched to:', engine);
-            }
-        }
-
-        function saveKeys() {
-            const btn = document.querySelector('button[onclick="saveKeys()"]');
-            btn.innerText = 'Saving...';
-            setTimeout(() => {
-                btn.innerText = '✅ Saved Securely';
-                btn.style.background = '#22c55e';
-                setTimeout(() => {
-                    btn.innerText = 'Save Master Configuration';
-                    btn.style.background = '#6366f1';
-                }, 2000);
-            }, 800);
-        }
-    </script>
-</body>
-
-</html>

templates/index_new.html

@@ -1,727 +0,0 @@
-<!DOCTYPE html>
-<html lang="fr">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport"
-        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
-
-    <!-- 🌍 PWA -->
-    <meta name="theme-color" content="#22c55e">
-    <meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="apple-mobile-web-app-status-bar-style" content="default">
-    <meta name="application-name" content="Babel">
-    <meta name="apple-mobile-web-app-title" content="Babel">
-    <link rel="manifest" href="/static/manifest.json">
-
-    <title>Babel - Traducteur Vocal</title>
-    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-
-    <style>
-        :root {
-            /* 🌿 FRESH GREEN PALETTE (Cloned from reference) */
-            --bg-gradient: linear-gradient(180deg, #4ade80 0%, #22c55e 50%, #16a34a 100%);
-            --card-bg: #ffffff;
-            --card-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
-            --text-dark: #1a1a2e;
-            --text-medium: #4a5568;
-            --text-light: #718096;
-
-            /* Action Colors */
-            --accent-green: #22c55e;
-            --accent-yellow: #fbbf24;
-            --accent-purple: #a855f7;
-            --accent-teal: #14b8a6;
-
-            /* Bottom Bar */
-            --bar-bg: #1a1a2e;
-            --bar-active: #fbbf24;
-        }
-
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-            -webkit-tap-highlight-color: transparent;
-        }
-
-        body {
-            font-family: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
-            background: var(--bg-gradient);
-            min-height: 100vh;
-            min-height: 100dvh;
-            color: var(--text-dark);
-            overflow-x: hidden;
-            padding-bottom: 100px;
-        }
-
-        /* 🔝 TOP HEADER */
-        .top-header {
-            padding: 16px 20px;
-            padding-top: max(16px, env(safe-area-inset-top));
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-
-        .greeting {
-            color: white;
-            font-size: 1.1rem;
-            font-weight: 700;
-        }
-
-        .settings-icon {
-            width: 44px;
-            height: 44px;
-            background: rgba(255, 255, 255, 0.2);
-            border-radius: 12px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            color: white;
-            font-size: 1.2rem;
-            cursor: pointer;
-            transition: all 0.2s;
-        }
-
-        .settings-icon:hover {
-            background: rgba(255, 255, 255, 0.3);
-            transform: scale(1.05);
-        }
-
-        /* 📦 MAIN CARD */
-        .main-card {
-            background: var(--card-bg);
-            margin: 0 16px;
-            border-radius: 24px;
-            padding: 24px;
-            box-shadow: var(--card-shadow);
-        }
-
-        .card-label {
-            font-size: 0.85rem;
-            color: var(--text-light);
-            font-weight: 600;
-            margin-bottom: 8px;
-        }
-
-        .main-value {
-            font-size: 2.5rem;
-            font-weight: 900;
-            color: var(--text-dark);
-            margin-bottom: 16px;
-        }
-
-        .main-value span {
-            font-size: 1.5rem;
-            color: var(--text-medium);
-        }
-
-        /* Language Display */
-        .language-display {
-            background: #f1f5f9;
-            border-radius: 12px;
-            padding: 12px 16px;
-            font-family: 'JetBrains Mono', monospace;
-            font-size: 0.9rem;
-            color: var(--text-medium);
-            margin-bottom: 20px;
-            text-align: center;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-        }
-
-        /* 🔘 ACTION BUTTONS ROW */
-        .action-row {
-            display: flex;
-            justify-content: center;
-            gap: 16px;
-            margin-top: 8px;
-        }
-
-        .action-btn {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            gap: 8px;
-            cursor: pointer;
-            transition: all 0.2s;
-        }
-
-        .action-btn:hover {
-            transform: translateY(-2px);
-        }
-
-        .action-icon {
-            width: 56px;
-            height: 56px;
-            border-radius: 16px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 1.4rem;
-            color: white;
-        }
-
-        .action-icon.green {
-            background: var(--accent-green);
-        }
-
-        .action-icon.yellow {
-            background: var(--accent-yellow);
-            color: #1a1a2e;
-        }
-
-        .action-icon.purple {
-            background: var(--accent-purple);
-        }
-
-        .action-icon.teal {
-            background: var(--accent-teal);
-        }
-
-        .action-label {
-            font-size: 0.8rem;
-            font-weight: 700;
-            color: var(--text-dark);
-        }
-
-        /* 📊 PROGRESS SECTION */
-        .progress-card {
-            background: var(--bar-bg);
-            margin: 16px;
-            border-radius: 20px;
-            padding: 16px 20px;
-            display: flex;
-            align-items: center;
-            gap: 16px;
-        }
-
-        .progress-icon {
-            width: 44px;
-            height: 44px;
-            background: var(--accent-yellow);
-            border-radius: 12px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 1.2rem;
-        }
-
-        .progress-info {
-            flex: 1;
-        }
-
-        .progress-title {
-            color: white;
-            font-weight: 800;
-            font-size: 1.1rem;
-        }
-
-        .progress-sub {
-            color: rgba(255, 255, 255, 0.6);
-            font-size: 0.85rem;
-        }
-
-        /* 📜 HISTORY CARD */
-        .history-card {
-            background: var(--card-bg);
-            margin: 16px;
-            border-radius: 24px;
-            padding: 20px;
-            box-shadow: var(--card-shadow);
-        }
-
-        .history-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: 16px;
-        }
-
-        .history-title {
-            font-size: 1.1rem;
-            font-weight: 800;
-            color: var(--text-dark);
-        }
-
-        .show-all {
-            font-size: 0.85rem;
-            color: var(--text-medium);
-            cursor: pointer;
-        }
-
-        .history-item {
-            display: flex;
-            align-items: center;
-            gap: 12px;
-            padding: 12px 0;
-            border-bottom: 1px solid #f1f5f9;
-        }
-
-        .history-item:last-child {
-            border-bottom: none;
-        }
-
-        .history-icon {
-            width: 40px;
-            height: 40px;
-            border-radius: 12px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 1rem;
-        }
-
-        .history-icon.received {
-            background: #dcfce7;
-            color: var(--accent-green);
-        }
-
-        .history-icon.sent {
-            background: #fef3c7;
-            color: var(--accent-yellow);
-        }
-
-        .history-details {
-            flex: 1;
-        }
-
-        .history-type {
-            font-weight: 700;
-            font-size: 0.95rem;
-            color: var(--text-dark);
-        }
-
-        .history-amount {
-            font-size: 0.85rem;
-            color: var(--text-medium);
-        }
-
-        .history-time {
-            font-size: 0.8rem;
-            color: var(--text-light);
-        }
-
-        /* 📱 BOTTOM NAV BAR */
-        .bottom-bar {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            padding: 12px 24px;
-            padding-bottom: max(12px, env(safe-area-inset-bottom));
-            display: flex;
-            justify-content: center;
-        }
-
-        .nav-pill {
-            background: var(--bar-bg);
-            border-radius: 100px;
-            padding: 12px 24px;
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
-        }
-
-        .nav-item {
-            width: 48px;
-            height: 48px;
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            color: rgba(255, 255, 255, 0.5);
-            font-size: 1.2rem;
-            cursor: pointer;
-            transition: all 0.2s;
-        }
-
-        .nav-item:hover {
-            color: white;
-        }
-
-        .nav-item.active {
-            background: var(--accent-yellow);
-            color: var(--bar-bg);
-        }
-
-        /* 🎤 RECORD BUTTON (Special) */
-        .record-orb {
-            width: 64px;
-            height: 64px;
-            background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            color: white;
-            font-size: 1.5rem;
-            cursor: pointer;
-            transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
-            margin: -20px 8px 0 8px;
-            box-shadow: 0 8px 24px rgba(34, 197, 94, 0.4);
-            border: 4px solid var(--bar-bg);
-        }
-
-        .record-orb:hover {
-            transform: scale(1.1);
-        }
-
-        .record-orb:active {
-            transform: scale(0.95);
-        }
-
-        .record-orb.active {
-            background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
-            box-shadow: 0 8px 24px rgba(239, 68, 68, 0.4);
-            animation: pulse-record 1.5s infinite;
-        }
-
-        @keyframes pulse-record {
-
-            0%,
-            100% {
-                box-shadow: 0 8px 24px rgba(239, 68, 68, 0.4);
-            }
-
-            50% {
-                box-shadow: 0 8px 40px rgba(239, 68, 68, 0.6);
-            }
-        }
-
-        /* 📝 CHAT MESSAGES */
-        .chat-container {
-            padding: 0 16px;
-            display: flex;
-            flex-direction: column;
-            gap: 12px;
-        }
-
-        .chat-message {
-            max-width: 85%;
-            padding: 16px;
-            border-radius: 20px;
-            animation: slideIn 0.3s ease;
-        }
-
-        @keyframes slideIn {
-            from {
-                opacity: 0;
-                transform: translateY(10px);
-            }
-
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
-
-        .chat-message.user {
-            background: var(--card-bg);
-            align-self: flex-start;
-            border-bottom-left-radius: 4px;
-            box-shadow: var(--card-shadow);
-        }
-
-        .chat-message.bot {
-            background: var(--bar-bg);
-            color: white;
-            align-self: flex-end;
-            border-bottom-right-radius: 4px;
-        }
-
-        .message-text {
-            font-size: 1rem;
-            line-height: 1.5;
-        }
-
-        .message-meta {
-            font-size: 0.75rem;
-            opacity: 0.6;
-            margin-top: 8px;
-        }
-
-        /* 🔘 LANGUAGE SELECTOR */
-        .lang-select {
-            background: #f1f5f9;
-            border: none;
-            border-radius: 12px;
-            padding: 12px 16px;
-            font-family: 'Nunito', sans-serif;
-            font-size: 0.9rem;
-            font-weight: 600;
-            color: var(--text-dark);
-            cursor: pointer;
-            width: 100%;
-            appearance: none;
-        }
-
-        /* Empty State */
-        .empty-state {
-            text-align: center;
-            padding: 40px 20px;
-        }
-
-        .empty-icon {
-            font-size: 4rem;
-            margin-bottom: 16px;
-        }
-
-        .empty-title {
-            font-size: 1.5rem;
-            font-weight: 900;
-            color: white;
-            margin-bottom: 8px;
-        }
-
-        .empty-sub {
-            color: rgba(255, 255, 255, 0.8);
-            font-size: 1rem;
-        }
-
-        /* MODAL */
-        .modal {
-            position: fixed;
-            inset: 0;
-            background: rgba(0, 0, 0, 0.5);
-            display: none;
-            align-items: flex-end;
-            justify-content: center;
-            z-index: 2000;
-            backdrop-filter: blur(4px);
-        }
-
-        .modal.visible {
-            display: flex;
-        }
-
-        .modal-content {
-            background: var(--card-bg);
-            width: 100%;
-            max-width: 500px;
-            border-radius: 24px 24px 0 0;
-            padding: 24px;
-            max-height: 80vh;
-            overflow-y: auto;
-            animation: slideUp 0.3s ease;
-        }
-
-        @keyframes slideUp {
-            from {
-                transform: translateY(100%);
-            }
-
-            to {
-                transform: translateY(0);
-            }
-        }
-
-        .modal-handle {
-            width: 40px;
-            height: 4px;
-            background: #e2e8f0;
-            border-radius: 2px;
-            margin: 0 auto 20px;
-        }
-
-        .modal-title {
-            font-size: 1.3rem;
-            font-weight: 800;
-            margin-bottom: 20px;
-        }
-
-        .form-group {
-            margin-bottom: 16px;
-        }
-
-        .form-group label {
-            display: block;
-            font-size: 0.85rem;
-            font-weight: 700;
-            color: var(--text-medium);
-            margin-bottom: 8px;
-        }
-
-        .save-btn {
-            width: 100%;
-            padding: 16px;
-            background: var(--accent-green);
-            color: white;
-            border: none;
-            border-radius: 16px;
-            font-family: 'Nunito', sans-serif;
-            font-size: 1rem;
-            font-weight: 800;
-            cursor: pointer;
-            margin-top: 16px;
-            transition: all 0.2s;
-        }
-
-        .save-btn:hover {
-            background: #16a34a;
-            transform: translateY(-2px);
-        }
-    </style>
-</head>
-
-<body>
-    <!-- TOP HEADER -->
-    <div class="top-header">
-        <div class="greeting">👋 Bonjour!</div>
-        <div class="settings-icon" id="settings-trigger">
-            <i class="fa-solid fa-gear"></i>
-        </div>
-    </div>
-
-    <!-- MAIN CARD -->
-    <div class="main-card">
-        <div class="card-label">Traduction Instantanée</div>
-        <div class="main-value">Babel <span>Matrix</span></div>
-
-        <div class="language-display" id="current-lang">
-            🌍 Appuyez sur le micro pour parler...
-        </div>
-
-        <!-- Language Selector -->
-        <select class="lang-select" id="target-lang-quick">
-            <option value="French">🇫🇷 Français</option>
-            <option value="English">🇬🇧 English</option>
-            <option value="Moroccan Darija">🇲🇦 Darija</option>
-            <option value="Egyptian Arabic">🇪🇬 Masri</option>
-            <option value="Spanish">🇪🇸 Español</option>
-            <option value="German">🇩🇪 Deutsch</option>
-            <option value="Arabic">🇸🇦 العربية</option>
-        </select>
-
-        <!-- Action Buttons -->
-        <div class="action-row">
-            <div class="action-btn" id="listen-btn">
-                <div class="action-icon green">
-                    <i class="fa-solid fa-play"></i>
-                </div>
-                <span class="action-label">Écouter</span>
-            </div>
-            <div class="action-btn" id="copy-btn">
-                <div class="action-icon yellow">
-                    <i class="fa-solid fa-copy"></i>
-                </div>
-                <span class="action-label">Copier</span>
-            </div>
-            <div class="action-btn" id="share-btn">
-                <div class="action-icon purple">
-                    <i class="fa-solid fa-share"></i>
-                </div>
-                <span class="action-label">Partager</span>
-            </div>
-        </div>
-    </div>
-
-    <!-- STATUS BAR -->
-    <div class="progress-card">
-        <div class="progress-icon">🎙️</div>
-        <div class="progress-info">
-            <div class="progress-title" id="status-text">Prêt</div>
-            <div class="progress-sub">Mode continu activé</div>
-        </div>
-    </div>
-
-    <!-- CHAT HISTORY -->
-    <div class="history-card">
-        <div class="history-header">
-            <span class="history-title">Historique</span>
-            <span class="show-all">Tout voir →</span>
-        </div>
-        <div id="chat-history">
-            <!-- Messages will appear here -->
-            <div class="empty-state" id="empty-hint" style="padding: 20px;">
-                <div style="font-size: 2rem;">💬</div>
-                <p style="color: var(--text-light); font-size: 0.9rem;">Vos traductions apparaîtront ici</p>
-            </div>
-        </div>
-    </div>
-
-    <!-- BOTTOM NAV BAR -->
-    <div class="bottom-bar">
-        <div class="nav-pill">
-            <div class="nav-item">
-                <i class="fa-solid fa-clock-rotate-left"></i>
-            </div>
-            <div class="nav-item active">
-                <i class="fa-solid fa-language"></i>
-            </div>
-
-            <!-- THE RECORD ORB -->
-            <div class="record-orb" id="record-btn">
-                <i class="fa-solid fa-microphone"></i>
-            </div>
-
-            <div class="nav-item">
-                <i class="fa-solid fa-brain"></i>
-            </div>
-            <div class="nav-item">
-                <i class="fa-solid fa-user"></i>
-            </div>
-        </div>
-    </div>
-
-    <!-- SETTINGS MODAL -->
-    <div class="modal" id="settings-modal">
-        <div class="modal-content">
-            <div class="modal-handle"></div>
-            <h2 class="modal-title">⚙️ Paramètres</h2>
-
-            <div class="form-group">
-                <label>Mode d'Intelligence</label>
-                <select class="lang-select" id="ai-model-selector">
-                    <option value="gpt-4o-mini">🟢 OpenAI GPT-4o (Stable)</option>
-                    <option value="gemini-flash-latest">⚡ Gemini Flash</option>
-                </select>
-            </div>
-
-            <div class="form-group">
-                <label>Moteur Vocal</label>
-                <select class="lang-select" id="tts-selector">
-                    <option value="openai">🟢 OpenAI TTS</option>
-                    <option value="gemini">💎 Gemini TTS</option>
-                </select>
-            </div>
-
-            <button class="save-btn" id="save-settings">Enregistrer</button>
-        </div>
-    </div>
-
-    <!-- SCRIPTS -->
-    <script src="/static/script.js"></script>
-    <script>
-        // Settings Modal Logic
-        document.getElementById('settings-trigger').addEventListener('click', () => {
-            document.getElementById('settings-modal').classList.add('visible');
-        });
-
-        document.getElementById('settings-modal').addEventListener('click', (e) => {
-            if (e.target === document.getElementById('settings-modal')) {
-                document.getElementById('settings-modal').classList.remove('visible');
-            }
-        });
-
-        document.getElementById('save-settings').addEventListener('click', () => {
-            const aiModel = document.getElementById('ai-model-selector').value;
-            const ttsEngine = document.getElementById('tts-selector').value;
-            localStorage.setItem('aiModel', aiModel);
-            localStorage.setItem('ttsEngine', ttsEngine);
-            document.getElementById('settings-modal').classList.remove('visible');
-            document.getElementById('status-text').innerText = '✅ Sauvegardé!';
-            setTimeout(() => document.getElementById('status-text').innerText = 'Prêt', 2000);
-        });
-
-        // Load saved values
-        document.getElementById('ai-model-selector').value = localStorage.getItem('aiModel') || 'gpt-4o-mini';
-        document.getElementById('tts-selector').value = localStorage.getItem('ttsEngine') || 'openai';
-    </script>
-</body>
-
-</html>