feat: add export TXT/SRT/PDF, language detection, translate, shimmer animation

backend/app.py

@@ -2,33 +2,30 @@
 # ---------------------------------------------------------
 # THE SERVER — manages all API routes
 #
-# Changes for HF Spaces deployment:
-#   - Port changed from 5000 to 7860 (HF requirement)
-#   - HOST set to 0.0.0.0 (accepts external connections)
-#   - Added /health endpoint for HF to check app is alive
-#   - Serves frontend files directly from Flask
-#     (no separate frontend server needed on HF)
+# Routes:
+#   GET  /              → serves frontend index.html
+#   GET  /health        → health check
+#   POST /transcribe    → audio → text (any language)
+#   POST /translate     → text → translated text
+#   GET  /languages     → returns all supported languages
 # ---------------------------------------------------------
 
 import os
 from flask import Flask, request, jsonify, send_from_directory
 from flask_cors import CORS
 from transcriber import transcribe_audio
+from translator import translate_text, get_supported_languages
 
 app = Flask(__name__)
 CORS(app)
 
-# Paths
-BASE_DIR    = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
+BASE_DIR      = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
 UPLOAD_FOLDER = os.path.join(BASE_DIR, "uploads")
 FRONTEND_DIR  = os.path.join(BASE_DIR, "frontend")
 os.makedirs(UPLOAD_FOLDER, exist_ok=True)
 
 
-# ── Serve frontend files ───────────────────────────────────
-# On HF Spaces, Flask serves both the API AND the frontend HTML
-# So visiting the Space URL shows the VoiceScript UI directly
-
+# ── Serve frontend ─────────────────────────────────────────
 @app.route("/")
 def index():
     return send_from_directory(FRONTEND_DIR, "index.html")
@@ -38,31 +35,93 @@ def frontend_files(filename):
     return send_from_directory(FRONTEND_DIR, filename)
 
 
-# ── Health check — HF uses this to verify app is running ──
+# ── Health check ───────────────────────────────────────────
 @app.route("/health")
 def health():
     return jsonify({"status": "ok", "app": "VoiceScript"})
 
 
-# ── Main transcription endpoint ────────────────────────────
+# ── Get supported languages ────────────────────────────────
+# Frontend calls this on load to populate the language dropdown
+@app.route("/languages", methods=["GET"])
+def languages():
+    return jsonify({
+        "success": True,
+        "languages": get_supported_languages()
+    })
+
+
+# ── Transcribe audio ───────────────────────────────────────
+# mode = "transcribe"  → transcribe in original language
+# mode = "translate"   → transcribe ANY language → English
 @app.route("/transcribe", methods=["POST"])
 def transcribe():
     if "audio" not in request.files:
         return jsonify({"success": False, "error": "No audio file received."}), 400
 
     audio_file = request.files["audio"]
-
     if audio_file.filename == "":
         return jsonify({"success": False, "error": "Empty filename."}), 400
 
+    # Get mode from form data — default is "transcribe"
+    # "translate_to_english" mode tells Whisper to output English
+    # regardless of what language was spoken
+    mode = request.form.get("mode", "transcribe")
+
     file_path = os.path.join(UPLOAD_FOLDER, "temp_audio")
     audio_file.save(file_path)
 
-    result = transcribe_audio(file_path)
+    result = transcribe_audio(file_path, mode=mode)
 
     if os.path.exists(file_path):
         os.remove(file_path)
 
+    # Format segments into clean timestamped lines for frontend
+    # Each segment: { start, end, text }
+    # We convert seconds → [MM:SS] format here in backend
+    if result.get("success") and result.get("segments"):
+        timestamped = []
+        for seg in result["segments"]:
+            start_sec = int(seg.get("start", 0))
+            end_sec   = int(seg.get("end", 0))
+            text      = seg.get("text", "").strip()
+            if text:
+                start_fmt = f"{start_sec // 60:02d}:{start_sec % 60:02d}"
+                end_fmt   = f"{end_sec   // 60:02d}:{end_sec   % 60:02d}"
+                timestamped.append({
+                    "start"     : start_sec,
+                    "end"       : end_sec,
+                    "start_fmt" : start_fmt,
+                    "end_fmt"   : end_fmt,
+                    "text"      : text
+                })
+        result["timestamped"] = timestamped
+        # Remove raw segments from response (too heavy)
+        del result["segments"]
+
+    return jsonify(result)
+
+
+# ── Translate transcript ───────────────────────────────────
+# Takes existing transcript text + target language code
+# Returns translated text
+@app.route("/translate", methods=["POST"])
+def translate():
+    data = request.get_json()
+
+    if not data:
+        return jsonify({"success": False, "error": "No data received."}), 400
+
+    text = data.get("text", "").strip()
+    target_lang = data.get("target_language", "")
+
+    if not text:
+        return jsonify({"success": False, "error": "No text to translate."}), 400
+
+    if not target_lang:
+        return jsonify({"success": False, "error": "No target language specified."}), 400
+
+    result = translate_text(text, target_lang)
     return jsonify(result)
 
 

backend/transcriber.py

@@ -185,7 +185,7 @@ def convert_to_whisper_wav(input_path, output_path):
 # STEP 3 — WHISPER TRANSCRIPTION (medium model, all settings maxed)
 # ═══════════════════════════════════════════════════════════
 
-def transcribe_with_whisper(wav_path, duration_secs):
+def transcribe_with_whisper(wav_path, duration_secs, mode="transcribe"):
     """
     Runs Whisper medium with every accuracy setting maximized.
 
@@ -232,20 +232,51 @@ def transcribe_with_whisper(wav_path, duration_secs):
     print(f"[INFO] ESTIMATED TIME : ~{est_time}s")
     print(f"[INFO] ─────────────────────────────────────────")
 
-    result = model.transcribe(
-        wav_path,
-        language                   = "en",
-        fp16                       = False,
-        task                       = "transcribe",
-        beam_size                  = 5,
-        best_of                    = 5,
-        temperature                = 0,
-        patience                   = 2,
-        condition_on_previous_text = True,
-        no_speech_threshold        = 0.25,
-        compression_ratio_threshold= 2.6,
-        word_timestamps            = True,
-    )
+    # mode="translate_to_english" → Whisper auto-detects language, outputs English
+    # mode="transcribe"           → Standard English transcription
+    whisper_task = "translate"  if mode == "translate_to_english" else "transcribe"
+    whisper_lang = None         if mode == "translate_to_english" else "en"
+
+    if mode == "translate_to_english":
+        print(f"[INFO] MODE: Multilingual → English translation")
+        print(f"[INFO] Whisper will auto-detect language and output English")
+    else:
+        print(f"[INFO] MODE: Standard English transcription")
+
+    # Translation mode needs different settings than transcription mode.
+    # The tensor size mismatch error happens because patience=2 and best_of=5
+    # conflict with Whisper's internal beam search in translation mode.
+    # Fix: use safer/simpler settings for translation, full settings for transcription.
+    if mode == "translate_to_english":
+        result = model.transcribe(
+            wav_path,
+            language                   = whisper_lang,   # None = auto-detect
+            fp16                       = False,
+            task                       = "translate",    # translate any language → English
+            beam_size                  = 5,
+            temperature                = 0,
+            condition_on_previous_text = True,
+            no_speech_threshold        = 0.25,
+            compression_ratio_threshold= 2.6,
+            word_timestamps            = True,
+            # NOTE: patience and best_of are intentionally excluded in translate mode
+            # They cause "Sizes of tensors must match" error with task="translate"
+        )
+    else:
+        result = model.transcribe(
+            wav_path,
+            language                   = "en",
+            fp16                       = False,
+            task                       = "transcribe",
+            beam_size                  = 5,
+            best_of                    = 5,
+            temperature                = 0,
+            patience                   = 2,
+            condition_on_previous_text = True,
+            no_speech_threshold        = 0.25,
+            compression_ratio_threshold= 2.6,
+            word_timestamps            = True,
+        )
 
     # Build clean transcript from segments
     segments = result.get("segments", [])
@@ -259,8 +290,30 @@ def transcribe_with_whisper(wav_path, duration_secs):
     full_text  = " ".join(lines).strip()
     word_count = len(full_text.split())
 
+    # Extract detected language from Whisper result
+    detected_lang = result.get("language", "unknown")
     print(f"[INFO] Transcription complete: {word_count} words from {len(segments)} segments")
-    return full_text
+    print(f"[INFO] Detected language: {detected_lang}")
+
+    # Format segments with timestamps right here
+    # Each segment gets start_fmt and end_fmt so frontend can use immediately
+    formatted = []
+    for seg in segments:
+        start_sec = int(seg.get("start", 0))
+        end_sec   = int(seg.get("end",   0))
+        seg_text  = seg.get("text", "").strip()
+        if not seg_text:
+            continue
+        formatted.append({
+            "start"    : start_sec,
+            "end"      : end_sec,
+            "start_fmt": f"{start_sec // 60:02d}:{start_sec % 60:02d}",
+            "end_fmt"  : f"{end_sec   // 60:02d}:{end_sec   % 60:02d}",
+            "text"     : seg_text
+        })
+
+    print(f"[INFO] {len(formatted)} formatted segments ready for frontend")
+    return {"text": full_text, "detected_language": detected_lang, "segments": formatted}
 
 
 # ═══════════════════════════════════════��═══════════════════
@@ -314,12 +367,15 @@ def _cleanup(paths):
 # MAIN — called by app.py for every transcription request
 # ═══════════════════════════════════════════════════════════
 
-def transcribe_audio(file_path):
+def transcribe_audio(file_path, mode="transcribe"):
     """
     Full beast mode pipeline:
       1. Preprocess (convert + normalize)
       2. Vocal isolation via demucs (if available)
       3. Whisper medium with max accuracy settings
+
+    mode = "transcribe"           → standard English transcription
+    mode = "translate_to_english" → any language audio → English text
     """
 
     uploads_dir  = os.path.dirname(file_path)
@@ -360,14 +416,19 @@ def transcribe_audio(file_path):
 
         # ── Step 3: Transcribe ────────────────────────
         if WHISPER_AVAILABLE:
-            text   = transcribe_with_whisper(audio_for_whisper, duration_secs)
-            engine = f"Whisper {WHISPER_MODEL_SIZE}"
+            whisper_result  = transcribe_with_whisper(audio_for_whisper, duration_secs, mode=mode)
+            text            = whisper_result["text"]
+            detected_lang   = whisper_result["detected_language"]
+            segments        = whisper_result["segments"]
+            engine          = f"Whisper {WHISPER_MODEL_SIZE}" + (" (Multilingual→EN)" if mode == "translate_to_english" else "")
             if is_demucs_available():
                 engine += " + Demucs vocal isolation"
         else:
             print("[INFO] Whisper not installed — using Google fallback")
-            text   = transcribe_with_google_fallback(audio_for_whisper, duration_ms)
-            engine = "Google Speech Recognition"
+            text          = transcribe_with_google_fallback(audio_for_whisper, duration_ms)
+            detected_lang = "unknown"
+            segments      = []
+            engine        = "Google Speech Recognition"
 
         print("[INFO] === PIPELINE COMPLETE ===")
 
@@ -385,10 +446,46 @@ def transcribe_audio(file_path):
 
     word_count = len(text.split())
 
+    # Language code → full name mapping for display
+    lang_names = {
+        "en": "English", "hi": "Hindi", "de": "German", "fr": "French",
+        "es": "Spanish", "it": "Italian", "pt": "Portuguese", "ru": "Russian",
+        "ja": "Japanese", "ko": "Korean", "zh": "Chinese", "ar": "Arabic",
+        "nl": "Dutch", "pl": "Polish", "tr": "Turkish", "sv": "Swedish",
+        "da": "Danish", "fi": "Finnish", "nb": "Norwegian", "uk": "Ukrainian",
+        "cs": "Czech", "ro": "Romanian", "hu": "Hungarian", "el": "Greek",
+        "he": "Hebrew", "th": "Thai", "vi": "Vietnamese", "id": "Indonesian",
+        "ms": "Malay", "bn": "Bengali", "ur": "Urdu", "fa": "Persian",
+        "ta": "Tamil", "te": "Telugu", "ml": "Malayalam", "kn": "Kannada",
+    }
+    detected_lang_name = lang_names.get(detected_lang, detected_lang.upper() if detected_lang != "unknown" else "Unknown")
+
+    # Format segments here — convert raw Whisper segments to clean
+    # { start_fmt, end_fmt, text } objects for the frontend
+    formatted_segments = []
+    for seg in segments:
+        start_sec = int(seg.get("start", 0))
+        end_sec   = int(seg.get("end",   0))
+        seg_text  = seg.get("text", "").strip()
+        if not seg_text:
+            continue
+        formatted_segments.append({
+            "start"    : start_sec,
+            "end"      : end_sec,
+            "start_fmt": f"{start_sec // 60:02d}:{start_sec % 60:02d}",
+            "end_fmt"  : f"{end_sec   // 60:02d}:{end_sec   % 60:02d}",
+            "text"     : seg_text
+        })
+
+    print(f"[INFO] Returning {len(formatted_segments)} formatted segments to frontend")
+
     return {
-        "success"   : True,
-        "transcript": text,
-        "duration"  : round(duration_secs, 1),
-        "word_count": word_count,
-        "engine"    : engine
+        "success"               : True,
+        "transcript"            : text,
+        "duration"              : round(duration_secs, 1),
+        "word_count"            : word_count,
+        "engine"                : engine,
+        "detected_language"     : detected_lang,
+        "detected_language_name": detected_lang_name,
+        "segments"              : formatted_segments
     }

backend/translator.py

@@ -0,0 +1,159 @@
+# translator.py
+# ---------------------------------------------------------
+# THIS FILE HAS ONE JOB:
+#   Take a text + target language → return translated text
+#
+# We use deep-translator library which is:
+#   - 100% free, no API key needed
+#   - Supports 100+ languages
+#   - Uses Google Translate engine under the hood
+#   - Simple and reliable
+# ---------------------------------------------------------
+
+from deep_translator import GoogleTranslator
+
+# All supported languages with their display names and codes
+# Code is what Google Translate uses internally
+SUPPORTED_LANGUAGES = {
+    "af": "Afrikaans",
+    "sq": "Albanian",
+    "ar": "Arabic",
+    "bn": "Bengali",
+    "bs": "Bosnian",
+    "bg": "Bulgarian",
+    "zh-CN": "Chinese (Simplified)",
+    "zh-TW": "Chinese (Traditional)",
+    "hr": "Croatian",
+    "cs": "Czech",
+    "da": "Danish",
+    "nl": "Dutch",
+    "en": "English",
+    "et": "Estonian",
+    "fi": "Finnish",
+    "fr": "French",
+    "de": "German",
+    "el": "Greek",
+    "gu": "Gujarati",
+    "hi": "Hindi",
+    "hu": "Hungarian",
+    "id": "Indonesian",
+    "it": "Italian",
+    "ja": "Japanese",
+    "kn": "Kannada",
+    "ko": "Korean",
+    "lv": "Latvian",
+    "lt": "Lithuanian",
+    "ms": "Malay",
+    "ml": "Malayalam",
+    "mr": "Marathi",
+    "ne": "Nepali",
+    "no": "Norwegian",
+    "fa": "Persian",
+    "pl": "Polish",
+    "pt": "Portuguese",
+    "pa": "Punjabi",
+    "ro": "Romanian",
+    "ru": "Russian",
+    "sr": "Serbian",
+    "si": "Sinhala",
+    "sk": "Slovak",
+    "sl": "Slovenian",
+    "es": "Spanish",
+    "sw": "Swahili",
+    "sv": "Swedish",
+    "tl": "Filipino",
+    "ta": "Tamil",
+    "te": "Telugu",
+    "th": "Thai",
+    "tr": "Turkish",
+    "uk": "Ukrainian",
+    "ur": "Urdu",
+    "vi": "Vietnamese",
+    "cy": "Welsh",
+}
+
+
+def translate_text(text, target_language_code):
+    """
+    Translates text to the target language.
+
+    text                — the transcript string to translate
+    target_language_code — e.g. "hi" for Hindi, "fr" for French
+
+    Returns a dict with success status and translated text.
+    """
+
+    # Validate the language code
+    if target_language_code not in SUPPORTED_LANGUAGES:
+        return {
+            "success": False,
+            "error": f"Unsupported language code: {target_language_code}"
+        }
+
+    try:
+        print(f"[INFO] Translating to {SUPPORTED_LANGUAGES[target_language_code]}...")
+
+        # GoogleTranslator takes source and target language
+        # source="auto" means it detects the input language automatically
+        translator = GoogleTranslator(
+            source="auto",
+            target=target_language_code
+        )
+
+        # Google Translate has a ~5000 character limit per request
+        # For long transcripts we split into chunks and translate each
+        if len(text) <= 4500:
+            translated = translator.translate(text)
+        else:
+            translated = translate_long_text(text, target_language_code)
+
+        print(f"[INFO] Translation complete!")
+
+        return {
+            "success": True,
+            "translated": translated,
+            "language": SUPPORTED_LANGUAGES[target_language_code],
+            "language_code": target_language_code
+        }
+
+    except Exception as e:
+        return {
+            "success": False,
+            "error": f"Translation failed: {str(e)}"
+        }
+
+
+def translate_long_text(text, target_language_code):
+    """
+    Splits long text into chunks of ~4500 chars,
+    translates each chunk, then joins them back together.
+    """
+    # Split by sentences (periods) to avoid cutting mid-sentence
+    sentences = text.replace(". ", ".|").split("|")
+    chunks = []
+    current_chunk = ""
+
+    for sentence in sentences:
+        if len(current_chunk) + len(sentence) < 4500:
+            current_chunk += sentence + " "
+        else:
+            chunks.append(current_chunk.strip())
+            current_chunk = sentence + " "
+
+    if current_chunk:
+        chunks.append(current_chunk.strip())
+
+    # Translate each chunk
+    translator = GoogleTranslator(source="auto", target=target_language_code)
+    translated_chunks = []
+
+    for i, chunk in enumerate(chunks):
+        print(f"[INFO] Translating chunk {i+1}/{len(chunks)}...")
+        translated_chunks.append(translator.translate(chunk))
+
+    return " ".join(translated_chunks)
+
+
+def get_supported_languages():
+    """Returns the full list of supported languages for the frontend."""
+    return SUPPORTED_LANGUAGES

frontend/app.js

@@ -1,30 +1,71 @@
 /*
-  app.js
-  ---------------------------------------------------------
-  UPDATED FOR HUGGING FACE DEPLOYMENT:
-
-  When running locally:  API_URL = "http://localhost:7860"
-  When running on HF:    API_URL = ""  (empty = same server)
-
-  Because on HF Spaces, Flask serves BOTH the frontend HTML
-  AND the /transcribe API from the same server. So we use
-  a relative URL — no need to hardcode any domain.
-  ---------------------------------------------------------
+  app.js — VoiceScript
+  Full frontend logic: upload, record, transcribe, translate, timestamps
 */
 
-// Empty string "" means "same server this page is served from"
-// Works both locally (localhost:7860) and on HF Spaces URL
 const API_URL = "";
 
-// ── Variables to track recording state ────────────────────
-let mediaRecorder = null;
-let audioChunks = [];
-let timerInterval = null;
-let secondsElapsed = 0;
+// ── Global state ───────────────────────────────────────────
+let mediaRecorder    = null;
+let audioChunks      = [];
+let timerInterval    = null;
+let secondsElapsed   = 0;
+let currentMode      = "transcribe";
+let lastTranscript   = "";
+let lastSegments     = [];
+let timestampsShowing = false;
+
+// Loading messages that rotate while processing
+const loadingMessages = [
+  "Starting beast mode pipeline...",
+  "Converting audio format...",
+  "Demucs isolating vocals from background...",
+  "Whisper AI transcribing clean vocals...",
+  "Almost there — processing final segments...",
+  "Finalizing transcript..."
+];
+let loadingMsgInterval = null;
+
+
+// ═══════════════════════════════════════════════════════════
+// INIT — runs on page load
+// ═══════════════════════════════════════════════════════════
+
+async function loadLanguages() {
+  try {
+    const response = await fetch(`${API_URL}/languages`);
+    const data     = await response.json();
+    if (data.success) {
+      const select = document.getElementById("lang-select");
+      const sorted = Object.entries(data.languages).sort((a, b) => a[1].localeCompare(b[1]));
+      sorted.forEach(([code, name]) => {
+        const opt   = document.createElement("option");
+        opt.value   = code;
+        opt.textContent = name;
+        select.appendChild(opt);
+      });
+    }
+  } catch (e) {
+    console.log("Languages not loaded yet — server may be starting");
+  }
+}
+
+loadLanguages();
 
 
 // ═══════════════════════════════════════════════════════════
-// SECTION 1: FILE UPLOAD
+// MODE TOGGLE (Transcribe / Any Language → English)
+// ═══════════════════════════════════════════════════════════
+
+function setMode(mode) {
+  currentMode = mode;
+  document.getElementById("mode-transcribe").classList.toggle("active", mode === "transcribe");
+  document.getElementById("mode-translate").classList.toggle("active", mode === "translate_to_english");
+}
+
+
+// ═══════════════════════════════════════════════════════════
+// FILE UPLOAD
 // ═══════════════════════════════════════════════════════════
 
 document.getElementById("audio-file-input").addEventListener("change", function () {
@@ -37,7 +78,7 @@ document.getElementById("audio-file-input").addEventListener("change", function
 
 async function uploadAndTranscribe() {
   const fileInput = document.getElementById("audio-file-input");
-  const file = fileInput.files[0];
+  const file      = fileInput.files[0];
 
   if (!file) {
     alert("Please select an audio file first!");
@@ -46,18 +87,17 @@ async function uploadAndTranscribe() {
 
   const formData = new FormData();
   formData.append("audio", file);
+  formData.append("mode",  currentMode);
 
   showLoading();
 
   try {
     const response = await fetch(`${API_URL}/transcribe`, {
       method: "POST",
-      body: formData,
+      body:   formData,
     });
-
     const result = await response.json();
     handleResult(result);
-
   } catch (error) {
     showError("Could not connect to backend. Is the server running? (python backend/app.py)");
   }
@@ -65,19 +105,15 @@ async function uploadAndTranscribe() {
 
 
 // ═══════════════════════════════════════════════════════════
-// SECTION 2: MICROPHONE RECORDING
+// MICROPHONE RECORDING
 // ═══════════════════════════════════════════════════════════
 
 async function startRecording() {
   try {
-    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-
-    const mimeType = MediaRecorder.isTypeSupported("audio/webm")
-      ? "audio/webm"
-      : "audio/ogg";
-    mediaRecorder = new MediaRecorder(stream, { mimeType });
-
-    audioChunks = [];
+    const stream   = await navigator.mediaDevices.getUserMedia({ audio: true });
+    const mimeType = MediaRecorder.isTypeSupported("audio/webm") ? "audio/webm" : "audio/ogg";
+    mediaRecorder  = new MediaRecorder(stream, { mimeType });
+    audioChunks    = [];
 
     mediaRecorder.ondataavailable = (event) => {
       if (event.data.size > 0) audioChunks.push(event.data);
@@ -90,12 +126,10 @@ async function startRecording() {
     };
 
     mediaRecorder.start();
-
     document.body.classList.add("recording");
     document.getElementById("record-status").textContent = "Recording...";
     document.getElementById("start-btn").disabled = true;
-    document.getElementById("stop-btn").disabled = false;
-
+    document.getElementById("stop-btn").disabled  = false;
     startTimer();
 
   } catch (error) {
@@ -107,25 +141,24 @@ function stopRecording() {
   if (mediaRecorder && mediaRecorder.state !== "inactive") {
     mediaRecorder.stop();
   }
-
   document.body.classList.remove("recording");
   document.getElementById("record-status").textContent = "Processing...";
   document.getElementById("start-btn").disabled = false;
-  document.getElementById("stop-btn").disabled = true;
-
+  document.getElementById("stop-btn").disabled  = true;
   stopTimer();
   showLoading();
 }
 
 async function sendAudioToBackend(audioBlob) {
   const formData = new FormData();
-  const ext = audioBlob.type.includes("ogg") ? "ogg" : "webm";
+  const ext      = audioBlob.type.includes("ogg") ? "ogg" : "webm";
   formData.append("audio", audioBlob, `recording.${ext}`);
+  formData.append("mode",  currentMode);
 
   try {
     const response = await fetch(`${API_URL}/transcribe`, {
       method: "POST",
-      body: formData,
+      body:   formData,
     });
     const result = await response.json();
     handleResult(result);
@@ -138,72 +171,99 @@ async function sendAudioToBackend(audioBlob) {
 
 
 // ═══════════════════════════════════════════════════════════
-// SECTION 3: SHOWING RESULTS
+// RESULT HANDLING
 // ═══════════════════════════════════════════════════════════
 
 function handleResult(result) {
   hideLoading();
   if (result.success) {
-    showTranscript(result.transcript, result.duration, result.chunks);
+    lastSegments = result.segments || [];
+    showTranscript(
+      result.transcript,
+      result.duration,
+      result.word_count,
+      result.detected_language_name
+    );
   } else {
     showError(result.error);
   }
 }
 
-function showTranscript(text, duration, chunks) {
+function showTranscript(text, duration, wordCount, detectedLang) {
+  // Show result section
   document.getElementById("results-section").classList.add("visible");
   document.getElementById("result-box").classList.add("visible");
   document.getElementById("error-box").classList.remove("visible");
+
+  // Set plain transcript text
   document.getElementById("transcript-text").textContent = text;
+  document.getElementById("transcript-text").style.display = "block";
 
-  const wordCount = text.trim().split(/\s+/).length;
-  let meta = `${wordCount} words`;
+  // Reset timestamps view
+  document.getElementById("timestamps-view").style.display = "none";
+  timestampsShowing = false;
+
+  // Word count + duration meta
+  let meta = `${wordCount || text.trim().split(/\s+/).length} words`;
   if (duration) meta += ` · ${duration}s audio`;
-  if (chunks && chunks > 1) meta += ` · ${chunks} chunks processed`;
   document.getElementById("word-count").textContent = meta;
 
+  // Language badge
+  const langBadge = document.getElementById("lang-badge");
+  if (detectedLang && detectedLang !== "Unknown") {
+    langBadge.textContent    = "🌐 " + detectedLang + " detected";
+    langBadge.style.display  = "inline-block";
+  } else {
+    langBadge.style.display  = "none";
+  }
+
+  // Timestamps button — show only if we have segments
+  const tsBtn = document.getElementById("timestamps-btn");
+  if (lastSegments.length > 0) {
+    tsBtn.style.display = "inline-block";
+    tsBtn.textContent   = "Show Timestamps";
+    tsBtn.classList.remove("active");
+  } else {
+    tsBtn.style.display = "none";
+  }
+
+  // Store for translation
+  lastTranscript = text;
+  document.getElementById("translated-box").classList.remove("visible");
+  document.getElementById("translate-panel").classList.add("visible");
+
   document.getElementById("results-section").scrollIntoView({ behavior: "smooth" });
 }
 
 function showError(message) {
   document.getElementById("results-section").classList.add("visible");
   document.getElementById("result-box").classList.remove("visible");
-  const errorBox = document.getElementById("error-box");
   document.getElementById("error-text").textContent = message;
-  errorBox.classList.add("visible");
+  document.getElementById("error-box").classList.add("visible");
   document.getElementById("results-section").scrollIntoView({ behavior: "smooth" });
 }
 
-// Rotating messages so user knows pipeline is actively working
-const loadingMessages = [
-  'Starting beast mode pipeline...',
-  'Converting audio format...',
-  'Demucs isolating vocals from background...',
-  'Whisper AI transcribing clean vocals...',
-  'Almost there — processing final segments...',
-  'Finalizing transcript...'
-];
-let loadingMsgInterval = null;
-
 function showLoading() {
+  document.getElementById("results-section").classList.add("visible");
+  document.getElementById("loading-state").classList.add("visible");
+  document.getElementById("result-box").classList.remove("visible");
+  document.getElementById("error-box").classList.remove("visible");
+
   let msgIndex = 0;
-  const msgEl = document.getElementById("loading-msg");
+  const msgEl  = document.getElementById("loading-msg");
   if (msgEl) msgEl.textContent = loadingMessages[0];
   loadingMsgInterval = setInterval(() => {
     msgIndex = (msgIndex + 1) % loadingMessages.length;
     if (msgEl) msgEl.textContent = loadingMessages[msgIndex];
   }, 4000);
-
-  document.getElementById("results-section").classList.add("visible");
-  document.getElementById("loading-state").classList.add("visible");
-  document.getElementById("result-box").classList.remove("visible");
-  document.getElementById("error-box").classList.remove("visible");
 }
 
 function hideLoading() {
-  if (loadingMsgInterval) { clearInterval(loadingMsgInterval); loadingMsgInterval = null; }
-
   document.getElementById("loading-state").classList.remove("visible");
+  if (loadingMsgInterval) {
+    clearInterval(loadingMsgInterval);
+    loadingMsgInterval = null;
+  }
 }
 
 function clearResults() {
@@ -212,13 +272,206 @@ function clearResults() {
   document.getElementById("error-box").classList.remove("visible");
   document.getElementById("loading-state").classList.remove("visible");
   document.getElementById("transcript-text").textContent = "";
+  document.getElementById("translate-panel").classList.remove("visible");
+  document.getElementById("translated-box").classList.remove("visible");
+  document.getElementById("timestamps-view").innerHTML = "";
+  lastTranscript  = "";
+  lastSegments    = [];
+  timestampsShowing = false;
 }
 
 
 // ═══════════════════════════════════════════════════════════
-// SECTION 4: UTILITIES
+// TIMESTAMPS
 // ═══════════════════════════════════════════════════════════
 
+function toggleTimestamps() {
+  timestampsShowing = !timestampsShowing;
+  const btn       = document.getElementById("timestamps-btn");
+  const plainView = document.getElementById("transcript-text");
+  const tsView    = document.getElementById("timestamps-view");
+
+  if (timestampsShowing) {
+    // Build the timestamped lines
+    tsView.innerHTML = "";
+    lastSegments.forEach(seg => {
+      const line       = document.createElement("div");
+      line.className   = "ts-line";
+      line.innerHTML   = `<span class="ts-badge">${seg.start_fmt}</span><span class="ts-text">${seg.text}</span>`;
+      tsView.appendChild(line);
+    });
+
+    plainView.style.display = "none";
+    tsView.style.display    = "flex";
+    btn.textContent         = "Hide Timestamps";
+    btn.classList.add("active");
+  } else {
+    plainView.style.display = "block";
+    tsView.style.display    = "none";
+    btn.textContent         = "Show Timestamps";
+    btn.classList.remove("active");
+  }
+}
+
+
+// ═══════════════════════════════════════════════════════════
+// TRANSLATION
+// ═══════════════════════════════════════════════════════════
+
+async function translateTranscript() {
+  const langSelect = document.getElementById("lang-select");
+  const targetLang = langSelect.value;
+
+  if (!targetLang) {
+    alert("Please select a language first!");
+    return;
+  }
+  if (!lastTranscript) {
+    alert("No transcript to translate. Please transcribe audio first.");
+    return;
+  }
+
+  const btn      = document.getElementById("translate-btn");
+  btn.textContent = "Translating...";
+  btn.disabled    = true;
+
+  try {
+    const response = await fetch(`${API_URL}/translate`, {
+      method:  "POST",
+      headers: { "Content-Type": "application/json" },
+      body:    JSON.stringify({ text: lastTranscript, target_language: targetLang })
+    });
+    const result = await response.json();
+
+    if (result.success) {
+      document.getElementById("translated-text").textContent      = result.translated;
+      document.getElementById("translated-lang-label").textContent = "Translated to " + result.language;
+      document.getElementById("translated-box").classList.add("visible");
+      document.getElementById("translated-box").scrollIntoView({ behavior: "smooth" });
+    } else {
+      alert("Translation failed: " + result.error);
+    }
+  } catch (error) {
+    alert("Could not connect to translation service. Is the server running?");
+  }
+
+  btn.textContent = "Translate";
+  btn.disabled    = false;
+}
+
+function copyTranslation() {
+  const text = document.getElementById("translated-text").textContent;
+  navigator.clipboard.writeText(text).then(() => {
+    const btns = document.querySelectorAll(".btn-copy");
+    if (btns[1]) {
+      btns[1].textContent = "Copied!";
+      setTimeout(() => btns[1].textContent = "Copy", 2000);
+    }
+  });
+}
+
+
+// ═══════════════════════════════════════════════════════════
+// UTILITIES
+// ═══════════════════════════════════════════════════════════
+
+// ═══════════════════════════════════════════════════════════
+// EXPORT FUNCTIONS — TXT, SRT, PDF
+// ═══════════════════════════════════════════════════════════
+
+function downloadFile(filename, content, mimeType) {
+  const blob = new Blob([content], { type: mimeType });
+  const url  = URL.createObjectURL(blob);
+  const a    = document.createElement("a");
+  a.href     = url;
+  a.download = filename;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  URL.revokeObjectURL(url);
+}
+
+function exportTXT() {
+  if (!lastTranscript) { alert("No transcript to export!"); return; }
+  const now     = new Date();
+  const dateStr = now.toLocaleDateString("en-IN", { day:"2-digit", month:"short", year:"numeric" });
+  const words   = lastTranscript.trim().split(/\s+/).length;
+  const content = [
+    "VoiceScript — Transcript Export",
+    "================================",
+    "Date  : " + dateStr,
+    "Words : " + words,
+    "",
+    "TRANSCRIPT",
+    "----------",
+    lastTranscript,
+    "",
+    "--------------------------------",
+    "Exported by VoiceScript · AI Speech Recognition",
+    "https://huggingface.co/spaces/Tusharz/VoiceScript"
+  ].join("\n");
+  downloadFile("VoiceScript_Transcript.txt", content, "text/plain");
+}
+
+function secondsToSRT(totalSeconds) {
+  const h  = Math.floor(totalSeconds / 3600);
+  const m  = Math.floor((totalSeconds % 3600) / 60);
+  const s  = Math.floor(totalSeconds % 60);
+  return String(h).padStart(2,"0") + ":" + String(m).padStart(2,"0") + ":" + String(s).padStart(2,"0") + ",000";
+}
+
+function exportSRT() {
+  if (!lastTranscript) { alert("No transcript to export!"); return; }
+  let srtContent = "";
+
+  if (lastSegments && lastSegments.length > 0) {
+    lastSegments.forEach(function(seg, i) {
+      srtContent += (i + 1) + "\n" + secondsToSRT(seg.start) + " --> " + secondsToSRT(seg.end) + "\n" + seg.text + "\n\n";
+    });
+  } else {
+    const words = lastTranscript.trim().split(/\s+/);
+    const size  = 10;
+    let idx = 1;
+    for (let i = 0; i < words.length; i += size) {
+      const chunk = words.slice(i, i + size).join(" ");
+      srtContent += idx + "\n" + secondsToSRT((idx-1)*5) + " --> " + secondsToSRT(idx*5) + "\n" + chunk + "\n\n";
+      idx++;
+    }
+  }
+  downloadFile("VoiceScript_Subtitles.srt", srtContent, "text/plain");
+}
+
+function exportPDF() {
+  if (!lastTranscript) { alert("No transcript to export!"); return; }
+  const now     = new Date();
+  const dateStr = now.toLocaleDateString("en-IN", { day:"2-digit", month:"long", year:"numeric" });
+  const words   = lastTranscript.trim().split(/\s+/).length;
+
+  const printHTML = "<!DOCTYPE html><html><head><meta charset='UTF-8'/><title>VoiceScript Transcript</title>"
+    + "<style>"
+    + "body{font-family:Georgia,serif;color:#1a1a2e;padding:60px;max-width:800px;margin:0 auto;line-height:1.8}"
+    + ".brand{font-family:Arial,sans-serif;font-size:13px;font-weight:700;color:#6366f1;letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px}"
+    + "h1{font-size:28px;color:#1a1a2e;margin-bottom:8px}"
+    + ".header{border-bottom:3px solid #6366f1;padding-bottom:20px;margin-bottom:32px}"
+    + ".meta{font-size:13px;color:#666;font-family:Arial,sans-serif}"
+    + ".body{font-size:16px;line-height:2;text-align:justify;margin-bottom:40px}"
+    + ".footer{border-top:1px solid #ddd;padding-top:16px;font-size:12px;color:#999;font-family:Arial,sans-serif;text-align:center}"
+    + "</style></head><body>"
+    + "<div class='header'><div class='brand'>VoiceScript — AI Speech Recognition</div>"
+    + "<h1>Transcript</h1>"
+    + "<div class='meta'>Generated on " + dateStr + " &nbsp;·&nbsp; " + words + " words</div></div>"
+    + "<div class='body'>" + lastTranscript.replace(/\n/g, "<br/>") + "</div>"
+    + "<div class='footer'>Transcribed by VoiceScript · Powered by OpenAI Whisper + Facebook Demucs<br/>"
+    + "huggingface.co/spaces/Tusharz/VoiceScript</div>"
+    + "</body></html>";
+
+  const win = window.open("", "_blank");
+  win.document.write(printHTML);
+  win.document.close();
+  win.focus();
+  setTimeout(function() { win.print(); }, 600);
+}
+
 function copyTranscript() {
   const text = document.getElementById("transcript-text").textContent;
   navigator.clipboard.writeText(text).then(() => {
@@ -230,7 +483,7 @@ function copyTranscript() {
 
 function startTimer() {
   secondsElapsed = 0;
-  timerInterval = setInterval(() => {
+  timerInterval  = setInterval(() => {
     secondsElapsed++;
     const mins = String(Math.floor(secondsElapsed / 60)).padStart(2, "0");
     const secs = String(secondsElapsed % 60).padStart(2, "0");
@@ -244,26 +497,23 @@ function stopTimer() {
   secondsElapsed = 0;
 }
 
-// Drag and drop support
+// Drag and drop
 const dropZone = document.getElementById("drop-zone");
-
 dropZone.addEventListener("dragover", (e) => {
   e.preventDefault();
   dropZone.style.borderColor = "#6366f1";
 });
-
 dropZone.addEventListener("dragleave", () => {
   dropZone.style.borderColor = "";
 });
-
 dropZone.addEventListener("drop", (e) => {
   e.preventDefault();
   dropZone.style.borderColor = "";
   const file = e.dataTransfer.files[0];
   if (file) {
-    const dataTransfer = new DataTransfer();
-    dataTransfer.items.add(file);
-    document.getElementById("audio-file-input").files = dataTransfer.files;
+    const dt = new DataTransfer();
+    dt.items.add(file);
+    document.getElementById("audio-file-input").files = dt.files;
     document.getElementById("file-name-display").textContent = file.name;
     document.getElementById("drop-text").textContent = "File selected:";
   }

frontend/index.html

@@ -30,33 +30,62 @@
   <!-- ── HEADER ───────────────────────────────────────── -->
   <header class="header">
     <div class="header-inner">
+      <!-- Logo -->
       <div class="logo">
-        <!-- SVG waveform icon — represents audio/sound -->
-        <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
-          <rect width="32" height="32" rx="8" fill="#6366f1"/>
-          <rect x="6"  y="12" width="3" height="8"  rx="1.5" fill="white"/>
-          <rect x="11" y="8"  width="3" height="16" rx="1.5" fill="white"/>
-          <rect x="16" y="5"  width="3" height="22" rx="1.5" fill="white"/>
-          <rect x="21" y="9"  width="3" height="14" rx="1.5" fill="white"/>
-          <rect x="26" y="13" width="3" height="6"  rx="1.5" fill="white"/>
-        </svg>
-        <span>VoiceScript</span>
+        <div class="logo-icon">
+          <svg width="20" height="20" viewBox="0 0 32 32" fill="none">
+            <rect x="6"  y="12" width="3" height="8"  rx="1.5" fill="white" opacity="0.7"/>
+            <rect x="11" y="8"  width="3" height="16" rx="1.5" fill="white"/>
+            <rect x="16" y="5"  width="3" height="22" rx="1.5" fill="white"/>
+            <rect x="21" y="9"  width="3" height="14" rx="1.5" fill="white" opacity="0.9"/>
+            <rect x="26" y="13" width="3" height="6"  rx="1.5" fill="white" opacity="0.6"/>
+          </svg>
+        </div>
+        <span class="logo-text">VoiceScript</span>
+        <span class="logo-version">v2.0</span>
+      </div>
+
+      <!-- Nav right -->
+      <div class="header-right">
+        <div class="header-status">
+          <span class="status-dot"></span>
+          <span class="status-text">Model ready</span>
+        </div>
+        <a href="https://github.com/TUSHARTAMRAKAR/VoiceScript" target="_blank" class="header-link">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0112 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z"/></svg>
+          GitHub
+        </a>
+        <a href="https://huggingface.co/spaces/Tusharz/VoiceScript" target="_blank" class="header-btn-live">
+          🤗 Live Demo
+        </a>
       </div>
-      <div class="header-badge">AI Powered</div>
     </div>
   </header>
 
   <!-- ── MAIN CONTENT ─────────────────────────────────── -->
   <main class="main">
 
-    <!-- Hero section — the big intro text -->
+    <!-- Hero section -->
     <section class="hero">
+      <div class="hero-eyebrow">
+        <span class="eyebrow-dot"></span>
+        <span>Powered by OpenAI Whisper + Facebook Demucs</span>
+      </div>
       <h1 class="hero-title">
-        Turn your voice<br/>into <span class="accent">text instantly</span>
+        Turn your voice<br/>into <span class="accent" id="hero-accent">text instantly</span>
       </h1>
-      <p class="hero-sub">
+      <p class="hero-sub" id="hero-sub">
         Upload an audio file or record live — our AI transcribes it in seconds.
       </p>
+      <div class="hero-stats">
+        <div class="stat"><span class="stat-num">99+</span><span class="stat-label">Languages</span></div>
+        <div class="stat-divider"></div>
+        <div class="stat"><span class="stat-num">∞</span><span class="stat-label">Audio Length</span></div>
+        <div class="stat-divider"></div>
+        <div class="stat"><span class="stat-num">100%</span><span class="stat-label">Private</span></div>
+        <div class="stat-divider"></div>
+        <div class="stat"><span class="stat-num">Free</span><span class="stat-label">Forever</span></div>
+      </div>
     </section>
 
     <!-- ── TWO CARDS: Upload + Record ───────────────── -->
@@ -84,6 +113,16 @@
           <span id="file-name-display" class="file-name-display"></span>
         </div>
 
+        <!-- Mode toggle: Transcribe vs Translate to English -->
+        <div class="mode-toggle" id="mode-toggle">
+          <button class="mode-btn active" id="mode-transcribe" onclick="setMode('transcribe')">
+            Transcribe
+          </button>
+          <button class="mode-btn" id="mode-translate" onclick="setMode('translate_to_english')">
+            Any Language → English
+          </button>
+        </div>
+
         <!-- Button to send the file to backend -->
         <button class="btn btn-primary" id="upload-btn" onclick="uploadAndTranscribe()">
           Transcribe File
@@ -143,19 +182,96 @@
       <div class="result-box" id="result-box">
         <div class="result-header">
           <h3>Transcript</h3>
-          <!-- Copy to clipboard button -->
-          <button class="btn-copy" id="copy-btn" onclick="copyTranscript()">
-            Copy Text
-          </button>
+          <div class="result-header-right">
+            <!-- Detected language badge -->
+            <span class="lang-badge" id="lang-badge" style="display:none;"></span>
+            <!-- Timestamps toggle -->
+            <button class="btn-timestamps" id="timestamps-btn" onclick="toggleTimestamps()" style="display:none;">
+              Show Timestamps
+            </button>
+            <!-- Copy to clipboard button -->
+            <button class="btn-copy" id="copy-btn" onclick="copyTranscript()">
+              Copy Text
+            </button>
+          </div>
         </div>
-        <!-- The actual transcript text appears here -->
+
+        <!-- Plain transcript view (default) -->
         <p class="transcript-text" id="transcript-text"></p>
 
+        <!-- Timestamped transcript view (shown when timestamps toggled on) -->
+        <div class="timestamps-view" id="timestamps-view" style="display:none;"></div>
+
         <!-- Word count info -->
         <div class="result-meta">
           <span id="word-count"></span>
           <button class="btn-clear" onclick="clearResults()">Clear</button>
         </div>
+
+        <!-- Export section -->
+        <div class="export-section">
+          <div class="export-header">
+            <span class="export-label">⬇ Download Transcript</span>
+            <span class="export-hint">Choose your format</span>
+          </div>
+          <div class="export-btns">
+
+            <button class="btn-export btn-export-txt" onclick="exportTXT()">
+              <div class="export-icon">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
+              </div>
+              <div class="export-info">
+                <span class="export-name">Plain Text</span>
+                <span class="export-ext">.txt</span>
+              </div>
+            </button>
+
+            <button class="btn-export btn-export-srt" onclick="exportSRT()">
+              <div class="export-icon">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="2" width="20" height="20" rx="3"/><path d="M7 8h10M7 12h10M7 16h6"/></svg>
+              </div>
+              <div class="export-info">
+                <span class="export-name">Subtitles</span>
+                <span class="export-ext">.srt</span>
+              </div>
+            </button>
+
+            <button class="btn-export btn-export-pdf" onclick="exportPDF()">
+              <div class="export-icon">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/><path d="M9 13h1a1 1 0 010 2H9v-3m5 0h1.5a1.5 1.5 0 010 3H14v-3m4 0v4"/></svg>
+              </div>
+              <div class="export-info">
+                <span class="export-name">Document</span>
+                <span class="export-ext">.pdf</span>
+              </div>
+            </button>
+
+          </div>
+        </div>
+      </div>
+
+      <!-- Translate panel — shown after transcription -->
+      <div class="translate-panel" id="translate-panel">
+        <div class="translate-header">
+          <span class="translate-title">Translate Transcript</span>
+          <span class="translate-hint">Powered by Google Translate</span>
+        </div>
+        <div class="translate-controls">
+          <select class="lang-select" id="lang-select">
+            <option value="">Select language...</option>
+          </select>
+          <button class="btn btn-translate" id="translate-btn" onclick="translateTranscript()">
+            Translate
+          </button>
+        </div>
+        <!-- Translated result -->
+        <div class="translated-box" id="translated-box">
+          <div class="translated-header">
+            <span id="translated-lang-label">Translation</span>
+            <button class="btn-copy" onclick="copyTranslation()">Copy</button>
+          </div>
+          <p class="transcript-text" id="translated-text"></p>
+        </div>
       </div>
 
       <!-- Error box — shown if something goes wrong -->
@@ -169,24 +285,61 @@
 
   <!-- ── FOOTER ────────────────────────────────────────── -->
   <footer class="footer">
+    <div class="footer-inner">
+
+      <!-- Left: branding -->
+      <div class="footer-brand">
+        <div class="footer-logo">
+          <div class="logo-icon" style="width:28px;height:28px;">
+            <svg width="16" height="16" viewBox="0 0 32 32" fill="none">
+              <rect x="6"  y="12" width="3" height="8"  rx="1.5" fill="white" opacity="0.7"/>
+              <rect x="11" y="8"  width="3" height="16" rx="1.5" fill="white"/>
+              <rect x="16" y="5"  width="3" height="22" rx="1.5" fill="white"/>
+              <rect x="21" y="9"  width="3" height="14" rx="1.5" fill="white" opacity="0.9"/>
+              <rect x="26" y="13" width="3" height="6"  rx="1.5" fill="white" opacity="0.6"/>
+            </svg>
+          </div>
+          <span class="logo-text" style="font-size:16px;">VoiceScript</span>
+        </div>
+        <p class="footer-tagline">AI-powered speech recognition,<br/>built by Tushar Tamrakar.</p>
+        <p class="footer-by">Made with ❤️ · <a href="https://github.com/TUSHARTAMRAKAR" target="_blank" class="footer-a">@TUSHARTAMRAKAR</a></p>
+      </div>
 
-    <!-- Tech stack badges -->
-    <div class="footer-stack">
-      <span class="stack-badge badge-python">Python 3</span>
-      <span class="stack-badge badge-flask">Flask</span>
-      <span class="stack-badge badge-js">JavaScript</span>
-      <span class="stack-badge badge-whisper">Whisper AI</span>
-      <span class="stack-badge badge-demucs">Demucs</span>
-      <span class="stack-badge badge-pydub">pydub</span>
-      <span class="stack-badge badge-ffmpeg">ffmpeg</span>
-    </div>
-
-    <p class="footer-desc">
-      Speech-to-text powered by OpenAI Whisper · Vocal isolation by Facebook Demucs · Audio processing by pydub + ffmpeg
-    </p>
+      <!-- Center: stack -->
+      <div class="footer-center">
+        <p class="footer-stack-label">Built with</p>
+        <div class="footer-stack">
+          <span class="stack-badge badge-python">Python 3</span>
+          <span class="stack-badge badge-flask">Flask</span>
+          <span class="stack-badge badge-js">JavaScript</span>
+          <span class="stack-badge badge-whisper">Whisper AI</span>
+          <span class="stack-badge badge-demucs">Demucs</span>
+          <span class="stack-badge badge-pydub">pydub</span>
+          <span class="stack-badge badge-ffmpeg">ffmpeg</span>
+        </div>
+      </div>
 
-    <p class="footer-by">By Tushar ❤️</p>
+      <!-- Right: links -->
+      <div class="footer-links">
+        <p class="footer-stack-label">Links</p>
+        <a href="https://github.com/TUSHARTAMRAKAR/VoiceScript" target="_blank" class="footer-link-item">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0112 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z"/></svg>
+          GitHub Repository
+        </a>
+        <a href="https://huggingface.co/spaces/Tusharz/VoiceScript" target="_blank" class="footer-link-item">
+          🤗 Live on Hugging Face
+        </a>
+        <a href="mailto:tushartamrakar2003@gmail.com" class="footer-link-item">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+          Contact
+        </a>
+      </div>
 
+    </div>
+    <div class="footer-bottom">
+      <span>© 2026 VoiceScript · MIT License</span>
+      <span>Speech-to-text powered by OpenAI Whisper · Vocal isolation by Facebook Demucs</span>
+    </div>
   </footer>
 
 

frontend/style.css

@@ -113,10 +113,27 @@ body {
   margin-bottom: 16px;
 }
 
-/* The "text instantly" part — glowing accent color */
+/* The "text instantly" part — infinite shimmer animation */
 .accent {
-  color: var(--accent-light);
   position: relative;
+  background: linear-gradient(
+    90deg,
+    #818cf8 0%,
+    #c084fc 25%,
+    #f472b6 50%,
+    #c084fc 75%,
+    #818cf8 100%
+  );
+  background-size: 200% auto;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  animation: shimmer 3s linear infinite;
+}
+
+@keyframes shimmer {
+  0%   { background-position: 0%   center; }
+  100% { background-position: 200% center; }
 }
 
 .hero-sub {
@@ -469,3 +486,591 @@ body.recording .record-timer { color: var(--text-1); }
   letter-spacing: 0.01em;
 }
 .footer-by .heart { color: #f472b6; }
+
+/* ── MODE TOGGLE ──────────────────────────────────────────*/
+.mode-toggle {
+  display: flex;
+  background: var(--bg-card-2);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 4px;
+  gap: 4px;
+}
+
+.mode-btn {
+  flex: 1;
+  padding: 8px 10px;
+  border: none;
+  border-radius: 7px;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  background: transparent;
+  color: var(--text-3);
+  transition: all 0.2s;
+  font-family: 'Inter', sans-serif;
+}
+
+.mode-btn.active {
+  background: var(--accent);
+  color: white;
+}
+
+.mode-btn:hover:not(.active) {
+  color: var(--text-2);
+  background: rgba(255,255,255,0.05);
+}
+
+/* ── TRANSLATE PANEL ──────────────────────────────────────*/
+.translate-panel {
+  display: none;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 24px;
+  margin-top: 16px;
+}
+
+.translate-panel.visible { display: block; }
+
+.translate-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.translate-title {
+  font-family: 'Space Grotesk', sans-serif;
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text-1);
+}
+
+.translate-hint {
+  font-size: 11px;
+  color: var(--text-3);
+  background: var(--bg-card-2);
+  padding: 3px 10px;
+  border-radius: 20px;
+  border: 1px solid var(--border);
+}
+
+.translate-controls {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 16px;
+}
+
+.lang-select {
+  flex: 1;
+  padding: 10px 14px;
+  background: var(--bg-card-2);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  color: var(--text-1);
+  font-size: 14px;
+  font-family: 'Inter', sans-serif;
+  cursor: pointer;
+  outline: none;
+  transition: border-color 0.2s;
+}
+
+.lang-select:focus { border-color: var(--accent); }
+.lang-select option { background: var(--bg-card); }
+
+.btn-translate {
+  padding: 10px 20px;
+  background: linear-gradient(135deg, var(--accent), var(--accent-light));
+  color: white;
+  border: none;
+  border-radius: 10px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: opacity 0.2s, transform 0.2s;
+  font-family: 'Inter', sans-serif;
+  white-space: nowrap;
+}
+
+.btn-translate:hover { opacity: 0.9; transform: translateY(-1px); }
+.btn-translate:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
+
+.translated-box {
+  display: none;
+  background: var(--bg-card-2);
+  border: 1px solid rgba(99,102,241,0.25);
+  border-radius: 10px;
+  padding: 20px;
+}
+
+.translated-box.visible { display: block; }
+
+.translated-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid var(--border);
+}
+
+#translated-lang-label {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--accent-light);
+}
+
+/* ── LANGUAGE BADGE ───────────────────────────────────────*/
+.result-header-right {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.lang-badge {
+  font-size: 12px;
+  font-weight: 600;
+  padding: 4px 12px;
+  border-radius: 20px;
+  background: rgba(99,102,241,0.15);
+  color: var(--accent-light);
+  border: 1px solid rgba(99,102,241,0.3);
+  letter-spacing: 0.02em;
+}
+
+/* ── TIMESTAMPS BUTTON ────────────────────────────────────*/
+.btn-timestamps {
+  padding: 5px 12px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: transparent;
+  color: var(--text-2);
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+  font-family: 'Inter', sans-serif;
+}
+.btn-timestamps:hover { border-color: var(--accent); color: var(--accent-light); }
+.btn-timestamps.active { background: var(--accent-glow); border-color: var(--accent); color: var(--accent-light); }
+
+/* ── TIMESTAMPS VIEW ────────────────────────��─────────────*/
+.timestamps-view {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.ts-line {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  padding: 8px 10px;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.ts-line:hover { background: var(--bg-card-2); }
+
+.ts-badge {
+  font-family: 'Space Grotesk', monospace;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--accent-light);
+  background: var(--accent-glow);
+  border: 1px solid rgba(99,102,241,0.2);
+  padding: 2px 8px;
+  border-radius: 6px;
+  white-space: nowrap;
+  flex-shrink: 0;
+  margin-top: 2px;
+  letter-spacing: 0.03em;
+}
+
+.ts-text {
+  font-size: 15px;
+  color: var(--text-1);
+  line-height: 1.6;
+}
+
+/* ── TIMESTAMPS ───────────────────────────────────────────*/
+.btn-timestamps {
+  padding: 5px 12px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: transparent;
+  color: var(--text-2);
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+  font-family: 'Inter', sans-serif;
+  white-space: nowrap;
+}
+.btn-timestamps:hover { border-color: var(--accent); color: var(--accent-light); }
+.btn-timestamps.active { background: var(--accent-glow); border-color: var(--accent); color: var(--accent-light); }
+
+.timestamps-view {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.ts-line {
+  display: flex;
+  gap: 14px;
+  align-items: flex-start;
+  padding: 8px 10px;
+  border-radius: 8px;
+  transition: background 0.15s;
+  cursor: default;
+}
+.ts-line:hover { background: var(--bg-card-2); }
+
+.ts-badge {
+  font-family: 'Space Grotesk', monospace;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--accent-light);
+  background: var(--accent-glow);
+  border: 1px solid rgba(99,102,241,0.25);
+  border-radius: 6px;
+  padding: 3px 8px;
+  white-space: nowrap;
+  flex-shrink: 0;
+  margin-top: 2px;
+  min-width: 52px;
+  text-align: center;
+}
+
+.ts-text {
+  font-size: 15px;
+  color: var(--text-1);
+  line-height: 1.6;
+}
+
+/* ═══════════════════════════════════════════════════════════
+   PREMIUM UI UPGRADE
+   ═══════════════════════════════════════════════════════════ */
+
+/* ── HEADER UPGRADE ─────────────────────────────────────── */
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.header-status {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: var(--text-3);
+}
+
+.status-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--success);
+  box-shadow: 0 0 6px var(--success);
+  animation: pulse-dot 2s ease-in-out infinite;
+}
+
+@keyframes pulse-dot {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50%       { opacity: 0.6; transform: scale(0.85); }
+}
+
+.status-text { color: var(--text-3); font-size: 12px; }
+
+.header-link {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  color: var(--text-2);
+  text-decoration: none;
+  padding: 6px 12px;
+  border-radius: 8px;
+  border: 1px solid var(--border);
+  transition: all 0.2s;
+}
+.header-link:hover { color: var(--text-1); border-color: var(--text-3); }
+
+.header-btn-live {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  font-weight: 600;
+  color: white;
+  text-decoration: none;
+  padding: 7px 14px;
+  border-radius: 8px;
+  background: linear-gradient(135deg, #6366f1, #818cf8);
+  transition: all 0.2s;
+  box-shadow: 0 2px 12px rgba(99,102,241,0.3);
+}
+.header-btn-live:hover { transform: translateY(-1px); box-shadow: 0 4px 20px rgba(99,102,241,0.45); }
+
+.logo-icon {
+  width: 34px;
+  height: 34px;
+  background: linear-gradient(135deg, #6366f1, #4f46e5);
+  border-radius: 9px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 2px 10px rgba(99,102,241,0.35);
+}
+
+.logo-text { font-family: 'Space Grotesk', sans-serif; font-size: 20px; font-weight: 700; color: var(--text-1); }
+.logo-version { font-size: 10px; font-weight: 600; color: var(--accent-light); background: var(--accent-glow); border: 1px solid rgba(99,102,241,0.3); padding: 1px 6px; border-radius: 20px; align-self: flex-start; margin-top: 4px; }
+
+/* ── HERO UPGRADE ─────────────────────────────────────── */
+.hero-eyebrow {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--accent-light);
+  background: var(--accent-glow);
+  border: 1px solid rgba(99,102,241,0.25);
+  padding: 6px 14px;
+  border-radius: 20px;
+  margin-bottom: 24px;
+  letter-spacing: 0.02em;
+}
+
+.eyebrow-dot {
+  width: 6px;
+  height: 6px;
+  background: var(--accent-light);
+  border-radius: 50%;
+  animation: pulse-dot 2s ease-in-out infinite;
+}
+
+/* Animated typewriter subtitle */
+.hero-sub {
+  overflow: hidden;
+  border-right: 2px solid var(--accent-light);
+  white-space: nowrap;
+  animation: typing 3.5s steps(60, end), blink-caret 0.75s step-end infinite;
+  animation-fill-mode: forwards;
+  max-width: 520px;
+  margin: 0 auto 32px;
+}
+
+@keyframes typing {
+  from { width: 0; }
+  to   { width: 100%; }
+}
+@keyframes blink-caret {
+  from, to { border-color: transparent; }
+  50%       { border-color: var(--accent-light); }
+}
+
+/* Stats row */
+.hero-stats {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0;
+  margin-top: 8px;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  padding: 16px 32px;
+  width: fit-content;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.stat {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 3px;
+  padding: 0 24px;
+}
+
+.stat-num {
+  font-family: 'Space Grotesk', sans-serif;
+  font-size: 22px;
+  font-weight: 700;
+  color: var(--text-1);
+  background: linear-gradient(135deg, var(--accent-light), #c7d2fe);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.stat-label { font-size: 11px; color: var(--text-3); font-weight: 500; letter-spacing: 0.04em; }
+.stat-divider { width: 1px; height: 32px; background: var(--border); }
+
+/* ── EXPORT BUTTONS UPGRADE ──────────────────────────── */
+.export-section {
+  margin-top: 20px;
+  padding-top: 20px;
+  border-top: 1px solid var(--border);
+}
+
+.export-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.export-label {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-2);
+  letter-spacing: 0.02em;
+}
+
+.export-hint { font-size: 11px; color: var(--text-3); }
+
+.export-btns {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.btn-export {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 20px;
+  border-radius: 12px;
+  font-size: 13px;
+  cursor: pointer;
+  border: 1px solid var(--border);
+  background: var(--bg-card-2);
+  transition: all 0.2s;
+  font-family: 'Inter', sans-serif;
+  flex: 1;
+  min-width: 120px;
+}
+
+.export-icon {
+  width: 36px;
+  height: 36px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: transform 0.2s;
+}
+
+.btn-export:hover .export-icon { transform: scale(1.1); }
+.btn-export:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
+
+.export-info { display: flex; flex-direction: column; gap: 2px; }
+.export-name { font-size: 13px; font-weight: 600; color: var(--text-1); }
+.export-ext  { font-size: 11px; color: var(--text-3); font-family: var(--font-mono, monospace); }
+
+.btn-export-txt  { border-color: rgba(99,102,241,0.25); }
+.btn-export-txt .export-icon { background: rgba(99,102,241,0.12); color: #a5b4fc; }
+.btn-export-txt:hover  { border-color: #6366f1; background: rgba(99,102,241,0.06); }
+.btn-export-txt .export-name { color: #a5b4fc; }
+
+.btn-export-srt  { border-color: rgba(16,185,129,0.25); }
+.btn-export-srt .export-icon { background: rgba(16,185,129,0.12); color: #6ee7b7; }
+.btn-export-srt:hover  { border-color: #10b981; background: rgba(16,185,129,0.06); }
+.btn-export-srt .export-name { color: #6ee7b7; }
+
+.btn-export-pdf  { border-color: rgba(239,68,68,0.25); }
+.btn-export-pdf .export-icon { background: rgba(239,68,68,0.12); color: #fca5a5; }
+.btn-export-pdf:hover  { border-color: #ef4444; background: rgba(239,68,68,0.06); }
+.btn-export-pdf .export-name { color: #fca5a5; }
+
+/* ── FOOTER UPGRADE ──────────────────────────────────── */
+.footer {
+  border-top: 1px solid var(--border);
+  padding: 0;
+  background: var(--bg-card);
+}
+
+.footer-inner {
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 48px 24px 40px;
+  display: grid;
+  grid-template-columns: 1.5fr 1fr 1fr;
+  gap: 40px;
+}
+
+@media (max-width: 640px) {
+  .footer-inner { grid-template-columns: 1fr; gap: 28px; }
+  .hero-stats { flex-wrap: wrap; padding: 14px 16px; }
+  .stat { padding: 0 12px; }
+  .header-link { display: none; }
+}
+
+.footer-brand { display: flex; flex-direction: column; gap: 12px; }
+.footer-logo  { display: flex; align-items: center; gap: 10px; }
+
+.footer-tagline {
+  font-size: 13px;
+  color: var(--text-3);
+  line-height: 1.7;
+}
+
+.footer-by {
+  font-size: 13px;
+  color: var(--text-3);
+}
+
+.footer-a {
+  color: var(--accent-light);
+  text-decoration: none;
+}
+.footer-a:hover { text-decoration: underline; }
+
+.footer-stack-label {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--text-3);
+  margin-bottom: 12px;
+}
+
+.footer-stack {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.footer-links { display: flex; flex-direction: column; gap: 10px; }
+
+.footer-link-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  color: var(--text-2);
+  text-decoration: none;
+  transition: color 0.2s;
+}
+.footer-link-item:hover { color: var(--accent-light); }
+
+.footer-bottom {
+  border-top: 1px solid var(--border);
+  padding: 16px 24px;
+  max-width: 960px;
+  margin: 0 auto;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 11px;
+  color: var(--text-3);
+  flex-wrap: wrap;
+  gap: 8px;
+}

requirements.txt

@@ -1,6 +1,3 @@
-# requirements.txt
-# Install with: pip install -r requirements.txt
-
 flask==3.0.3
 flask-cors==4.0.1
 SpeechRecognition==3.11.0
@@ -8,3 +5,4 @@ pydub==0.25.1
 openai-whisper
 numpy
 demucs
+deep-translator==1.11.4