Initial commit

.gitignore

@@ -0,0 +1,27 @@
+# Byte-compiled / optimized / DLL files
+__pycache__/
+*.py[cod]
+*$py.class
+
+# Virtual environments
+venv/
+env/
+.env
+
+# Output files
+output/*
+!output/.gitkeep
+uploads/*
+!uploads/.gitkeep
+
+# Temporary files
+*.tmp
+*.temp
+
+# IDE
+.vscode/
+.idea/
+
+# OS
+.DS_Store
+Thumbs.db

Dockerfile

@@ -0,0 +1,32 @@
+FROM python:3.10-slim
+
+# Set working directory
+WORKDIR /app
+
+# Install system dependencies (FFmpeg, etc.)
+RUN apt-get update && apt-get install -y \
+    ffmpeg \
+    git \
+    && rm -rf /var/lib/apt/lists/*
+
+# Copy requirements first for caching
+COPY requirements.txt .
+
+# Install Python dependencies
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy application code
+COPY . .
+
+# Create output directory
+RUN mkdir -p /app/output /app/uploads
+
+# Set environment variables
+ENV PYTHONUNBUFFERED=1
+ENV HF_SPACES=1
+
+# Expose port (HF Spaces uses 7860)
+EXPOSE 7860
+
+# Run the application
+CMD ["python", "app.py"]

README.md

@@ -0,0 +1,39 @@
+---
+title: Quran SRT Generator
+emoji: 📖
+colorFrom: green
+colorTo: blue
+sdk: docker
+pinned: false
+license: mit
+---
+
+# Quran SRT Generator
+
+Generate synchronized subtitles (SRT) for Quran recitation videos with multiple language support.
+
+## Features
+
+- **Multiple Languages**: Arabic, English, Turkish, French, Urdu, and more
+- **Multiple Reciters**: 20+ famous Quran reciters
+- **Video Generation**: Create videos with black background and burned-in subtitles
+- **Accurate Timing**: Syncs subtitles with actual audio from AlQuran API
+- **Download Options**: SRT files, JSON timing data, and MP4 videos
+
+## How to Use
+
+1. Select a Surah (chapter)
+2. Choose ayah range (start/end verses)
+3. Select languages for subtitles
+4. Choose a reciter
+5. Click "Generate" and wait for processing
+6. Download your SRT files or video
+
+## Supported Languages
+
+Arabic, English, Turkish, French, German, Spanish, Indonesian, Urdu, Bengali, Russian, Chinese, Japanese, Korean, Malay, Dutch, Italian
+
+## Credits
+
+- Quran text and audio from [AlQuran Cloud API](https://alquran.cloud/)
+- Audio transcription powered by OpenAI Whisper

app.py

@@ -0,0 +1,649 @@
+"""
+Quran SRT Generator - FastAPI Backend
+Hugging Face Spaces Version
+"""
+
+import os
+import asyncio
+import uuid
+import json
+from pathlib import Path
+from typing import Optional, List
+from dataclasses import asdict
+
+from fastapi import FastAPI, UploadFile, File, Form, HTTPException, BackgroundTasks
+from fastapi.staticfiles import StaticFiles
+from fastapi.templating import Jinja2Templates
+from fastapi.responses import FileResponse, HTMLResponse, JSONResponse
+from fastapi.requests import Request
+from pydantic import BaseModel
+
+from src.quran_data import fetch_surah_list, fetch_all_translations, download_full_quran, check_cached_data, set_offline_mode, is_offline_mode
+from src.audio_processor import get_processor, WHISPER_AVAILABLE
+from src.verse_matcher import match_video_to_verses, MatchedVerse
+from src.subtitle_generator import SubtitleGenerator
+from src.video_generator import generate_quran_video, VideoGenerator
+
+# Initialize FastAPI app
+app = FastAPI(
+    title="Quran SRT Generator",
+    description="Generate subtitles for Quran recitation videos with Arabic, English, and Turkish translations",
+    version="1.0.0"
+)
+
+# Setup directories
+BASE_DIR = Path(__file__).parent
+UPLOAD_DIR = BASE_DIR / "uploads"
+OUTPUT_DIR = BASE_DIR / "output"
+STATIC_DIR = BASE_DIR / "static"
+TEMPLATES_DIR = BASE_DIR / "templates"
+
+UPLOAD_DIR.mkdir(exist_ok=True)
+OUTPUT_DIR.mkdir(exist_ok=True)
+STATIC_DIR.mkdir(exist_ok=True)
+
+# Mount static files and templates
+app.mount("/static", StaticFiles(directory=str(STATIC_DIR)), name="static")
+app.mount("/output", StaticFiles(directory=str(OUTPUT_DIR)), name="output")
+templates = Jinja2Templates(directory=str(TEMPLATES_DIR))
+
+# Processing status tracking
+processing_status = {}
+
+
+class ProcessingRequest(BaseModel):
+    surah: int
+    start_ayah: int = 1
+    end_ayah: Optional[int] = None
+    separator: str = " | "
+    languages: List[str] = ["arabic", "english", "turkish"]
+    whisper_model: str = "medium"
+
+
+class ProcessingStatus(BaseModel):
+    task_id: str
+    status: str
+    progress: int
+    message: str
+    output_files: Optional[dict] = None
+    error: Optional[str] = None
+
+
+@app.get("/", response_class=HTMLResponse)
+async def home(request: Request):
+    """Serve the main web interface"""
+    return templates.TemplateResponse("index.html", {
+        "request": request,
+        "whisper_available": WHISPER_AVAILABLE
+    })
+
+
+@app.get("/api/surahs")
+async def get_surahs():
+    """Get list of all surahs"""
+    try:
+        surahs = await fetch_surah_list()
+        return {"success": True, "surahs": surahs}
+    except Exception as e:
+        return {"success": False, "error": str(e)}
+
+
+@app.get("/api/surah/{surah_number}")
+async def get_surah(surah_number: int):
+    """Get surah verses with all translations"""
+    try:
+        verses = await fetch_all_translations(surah_number)
+        return {
+            "success": True,
+            "surah": surah_number,
+            "verses": verses
+        }
+    except Exception as e:
+        return {"success": False, "error": str(e)}
+
+
+@app.get("/api/reciters")
+async def get_reciters():
+    """Get list of available audio reciters"""
+    reciters = [
+        {"identifier": "ar.alafasy", "englishName": "Mishary Rashid Alafasy", "style": "Murattal"},
+        {"identifier": "ar.abdurrahmaansudais", "englishName": "Abdurrahmaan As-Sudais", "style": "Murattal"},
+        {"identifier": "ar.husary", "englishName": "Mahmoud Khalil Al-Husary", "style": "Murattal"},
+        {"identifier": "ar.minshawi", "englishName": "Mohamed Siddiq Al-Minshawi", "style": "Murattal"},
+        {"identifier": "ar.abdulsamad", "englishName": "Abdul Samad", "style": "Murattal"},
+        {"identifier": "ar.shaatree", "englishName": "Abu Bakr Ash-Shaatree", "style": "Murattal"},
+        {"identifier": "ar.ahmedajamy", "englishName": "Ahmed ibn Ali al-Ajamy", "style": "Murattal"},
+        {"identifier": "ar.hudhaify", "englishName": "Ali Al-Hudhaify", "style": "Murattal"},
+        {"identifier": "ar.ibrahimakhbar", "englishName": "Ibrahim Al-Akhdar", "style": "Murattal"},
+        {"identifier": "ar.mahermuaiqly", "englishName": "Maher Al-Muaiqly", "style": "Murattal"},
+        {"identifier": "ar.muhammadayyoub", "englishName": "Muhammad Ayyub", "style": "Murattal"},
+        {"identifier": "ar.muhammadjibreel", "englishName": "Muhammad Jibreel", "style": "Murattal"},
+        {"identifier": "ar.saaborinah", "englishName": "Saad Al-Ghamdi", "style": "Murattal"},
+        {"identifier": "ar.parhizgar", "englishName": "Shahriar Parhizgar", "style": "Murattal"},
+        {"identifier": "ar.aaboromali", "englishName": "Abdullah Awad al-Juhani", "style": "Murattal"},
+        {"identifier": "ar.haborouni", "englishName": "Hani Ar-Rifai", "style": "Murattal"},
+        {"identifier": "ar.abdullahbasfar", "englishName": "Abdullah Basfar", "style": "Murattal"},
+        {"identifier": "ar.ibrahimwalkil", "englishName": "Ibrahim Walk (English)", "style": "Translation"},
+        {"identifier": "ar.husarymujawwad", "englishName": "Al-Husary (Mujawwad)", "style": "Mujawwad"},
+        {"identifier": "ar.minshawimujawwad", "englishName": "Al-Minshawi (Mujawwad)", "style": "Mujawwad"},
+    ]
+    return {"success": True, "reciters": reciters}
+
+
+@app.post("/api/upload")
+async def upload_video(
+    surah: int = Form(...),
+    start_ayah: int = Form(1),
+    end_ayah: Optional[int] = Form(None),
+    separator: str = Form(" | "),
+    languages: str = Form('["arabic", "english"]'),
+    mode: str = Form("video"),
+    model_size: str = Form("medium"),
+    reciter: str = Form("ar.alafasy"),
+    file: Optional[UploadFile] = File(None),
+    image: Optional[UploadFile] = File(None)
+):
+    """Upload video/image and start processing"""
+    try:
+        selected_languages = json.loads(languages)
+    except:
+        selected_languages = ["arabic", "english"]
+
+    task_id = str(uuid.uuid4())
+    upload_path = None
+    image_path = None
+
+    if mode == "video":
+        if not file or not file.filename:
+            raise HTTPException(400, "No video/audio file provided")
+
+        allowed_extensions = {".mp4", ".mkv", ".avi", ".mov", ".webm", ".mp3", ".wav", ".m4a"}
+        file_ext = Path(file.filename).suffix.lower()
+
+        if file_ext not in allowed_extensions:
+            raise HTTPException(400, f"Unsupported file format: {file_ext}")
+
+        upload_path = UPLOAD_DIR / f"{task_id}{file_ext}"
+        try:
+            with open(upload_path, "wb") as f:
+                content = await file.read()
+                f.write(content)
+        except Exception as e:
+            raise HTTPException(500, f"Failed to save file: {e}")
+
+    elif mode == "image":
+        if not image or not image.filename:
+            raise HTTPException(400, "No image file provided")
+
+        allowed_extensions = {".jpg", ".jpeg", ".png", ".webp"}
+        file_ext = Path(image.filename).suffix.lower()
+
+        if file_ext not in allowed_extensions:
+            raise HTTPException(400, f"Unsupported image format: {file_ext}")
+
+        image_path = UPLOAD_DIR / f"{task_id}_bg{file_ext}"
+        try:
+            with open(image_path, "wb") as f:
+                content = await image.read()
+                f.write(content)
+        except Exception as e:
+            raise HTTPException(500, f"Failed to save image: {e}")
+
+    processing_status[task_id] = {
+        "status": "pending",
+        "progress": 0,
+        "message": "Upload complete. Starting processing...",
+        "output_files": None,
+        "error": None,
+        "settings": {
+            "mode": mode,
+            "surah": surah,
+            "start_ayah": start_ayah,
+            "end_ayah": end_ayah,
+            "separator": separator,
+            "languages": selected_languages,
+            "model_size": model_size,
+            "reciter": reciter,
+            "file_path": str(upload_path) if upload_path else None,
+            "image_path": str(image_path) if image_path else None
+        }
+    }
+
+    return {
+        "success": True,
+        "task_id": task_id,
+        "message": "Upload successful. Processing will start shortly."
+    }
+
+
+@app.post("/api/process/{task_id}")
+async def start_processing(task_id: str, background_tasks: BackgroundTasks):
+    """Start processing an uploaded video"""
+    if task_id not in processing_status:
+        raise HTTPException(404, "Task not found")
+
+    status = processing_status[task_id]
+    if status["status"] not in ["pending", "error"]:
+        return {"success": False, "message": "Task already processing or completed"}
+
+    background_tasks.add_task(process_video_task, task_id)
+
+    processing_status[task_id]["status"] = "processing"
+    processing_status[task_id]["message"] = "Processing started..."
+
+    return {"success": True, "message": "Processing started"}
+
+
+async def process_video_task(task_id: str):
+    """Background task to process video"""
+    status = processing_status[task_id]
+    settings = status["settings"]
+    mode = settings.get("mode", "video")
+
+    try:
+        status["progress"] = 10
+        status["message"] = "Loading Quran data..."
+
+        selected_languages = settings.get("languages", ["arabic", "english", "turkish"])
+        verses_data = await fetch_all_translations(settings["surah"], selected_languages)
+
+        if mode == "video":
+            status["progress"] = 20
+            status["message"] = "Extracting audio from video..."
+
+            processor = get_processor(settings.get("model_size", "medium"))
+
+            status["progress"] = 30
+            status["message"] = "Transcribing audio (this may take a few minutes)..."
+
+            loop = asyncio.get_event_loop()
+            transcription = await loop.run_in_executor(
+                None,
+                lambda: processor.transcribe_video(settings["file_path"])
+            )
+
+            segments = processor.get_segments_with_timing(transcription)
+
+            status["progress"] = 70
+            status["message"] = "Matching verses..."
+
+            matched_verses = await match_video_to_verses(
+                segments,
+                surah=settings["surah"],
+                start_ayah=settings["start_ayah"],
+                end_ayah=settings["end_ayah"],
+                languages=selected_languages
+            )
+        else:
+            status["progress"] = 30
+            status["message"] = "Downloading audio from reciter..."
+
+            start_ayah = settings.get("start_ayah", 1)
+            end_ayah = settings.get("end_ayah")
+            reciter = settings.get("reciter", "ar.alafasy")
+
+            video_gen = VideoGenerator(output_dir=str(OUTPUT_DIR))
+            ayah_timings = []
+
+            try:
+                audio_path, ayah_timings = await video_gen.download_surah_audio(
+                    surah=settings["surah"],
+                    reciter=reciter,
+                    start_ayah=start_ayah,
+                    end_ayah=end_ayah
+                )
+            except Exception as e:
+                print(f"Audio download failed: {e}")
+                audio_path = None
+                ayah_timings = []
+
+            status["progress"] = 50
+            status["message"] = "Generating verse timings..."
+
+            filtered_verses = {}
+            for ayah_num, verse in verses_data.items():
+                if ayah_num >= start_ayah:
+                    if end_ayah is None or ayah_num <= end_ayah:
+                        filtered_verses[ayah_num] = verse
+
+            timing_lookup = {t[0]: (t[1], t[2]) for t in ayah_timings}
+
+            matched_verses = []
+            current_time = 0.0
+            default_duration = 5.0
+
+            for ayah_num in sorted(filtered_verses.keys()):
+                verse = filtered_verses[ayah_num]
+
+                if ayah_num in timing_lookup:
+                    start_time, end_time = timing_lookup[ayah_num]
+                else:
+                    start_time = current_time
+                    end_time = current_time + default_duration
+                    current_time = end_time
+
+                extra_translations = {}
+                for lang in selected_languages:
+                    if lang not in ["arabic", "english", "turkish"]:
+                        extra_translations[lang] = verse.get(lang, "")
+
+                matched_verses.append(MatchedVerse(
+                    surah=settings["surah"],
+                    ayah=ayah_num,
+                    arabic=verse.get("arabic", ""),
+                    english=verse.get("english", ""),
+                    turkish=verse.get("turkish", ""),
+                    start_time=start_time,
+                    end_time=end_time,
+                    confidence=1.0,
+                    segment_text="",
+                    translations=extra_translations
+                ))
+
+            status["progress"] = 60
+            status["message"] = f"Generated timing for {len(matched_verses)} verses..."
+            status["audio_path"] = audio_path
+
+        status["progress"] = 90
+        status["message"] = "Generating subtitle files..."
+
+        generator = SubtitleGenerator(
+            output_dir=str(OUTPUT_DIR),
+            separator=settings["separator"],
+            languages=settings.get("languages", ["arabic", "english", "turkish"])
+        )
+
+        base_filename = f"quran_surah{settings['surah']}_{task_id[:8]}"
+        output_files = generator.generate_all(matched_verses, base_filename)
+
+        if mode in ["image", "black"] and status.get("audio_path"):
+            status["progress"] = 95
+            status["message"] = "Generating video with burned-in subtitles..."
+
+            try:
+                video_output = str(OUTPUT_DIR / f"{base_filename}_video.mp4")
+                srt_for_video = output_files.get("srt_combined")
+
+                bg_image = settings.get("image_path") if mode == "image" else None
+
+                video_gen = VideoGenerator(output_dir=str(OUTPUT_DIR))
+                video_path = video_gen.create_video_with_subtitles(
+                    audio_path=status["audio_path"],
+                    srt_path=srt_for_video,
+                    output_path=video_output,
+                    background_image=bg_image
+                )
+
+                output_files["video"] = video_path
+                status["video_file"] = video_path
+            except Exception as e:
+                print(f"Video generation failed: {e}")
+
+        verses_data = []
+        for v in matched_verses:
+            verse_dict = {
+                "surah": v.surah,
+                "ayah": v.ayah,
+                "arabic": v.arabic,
+                "english": v.english,
+                "turkish": v.turkish,
+                "start_time": v.start_time,
+                "end_time": v.end_time,
+                "confidence": v.confidence
+            }
+            if v.translations:
+                for lang, text in v.translations.items():
+                    verse_dict[lang] = text
+            verses_data.append(verse_dict)
+
+        status["progress"] = 100
+        status["status"] = "completed"
+        status["message"] = f"Processing complete! Generated {len(matched_verses)} verse subtitles."
+        status["output_files"] = output_files
+        status["verses"] = verses_data
+        status["video_file"] = settings.get("file_path")
+
+    except Exception as e:
+        status["status"] = "error"
+        status["error"] = str(e)
+        status["message"] = f"Error: {str(e)}"
+
+
+@app.get("/api/status/{task_id}")
+async def get_status(task_id: str):
+    """Get processing status"""
+    if task_id not in processing_status:
+        raise HTTPException(404, "Task not found")
+    return processing_status[task_id]
+
+
+@app.get("/api/download/{task_id}/{file_type}")
+async def download_file(task_id: str, file_type: str):
+    """Download generated file"""
+    if task_id not in processing_status:
+        raise HTTPException(404, "Task not found")
+
+    status = processing_status[task_id]
+    if status["status"] != "completed":
+        raise HTTPException(400, "Processing not complete")
+
+    output_files = status.get("output_files", {})
+
+    if file_type == "srt_combined":
+        file_path = output_files.get("srt_combined")
+    elif file_type == "json":
+        file_path = output_files.get("json")
+    elif file_type == "video":
+        file_path = output_files.get("video")
+        if file_path:
+            return FileResponse(
+                file_path,
+                filename=Path(file_path).name,
+                media_type="video/mp4"
+            )
+    elif file_type.startswith("srt_"):
+        lang = file_type.replace("srt_", "")
+        file_path = output_files.get("srt_separate", {}).get(lang)
+    else:
+        raise HTTPException(400, "Invalid file type")
+
+    if not file_path or not Path(file_path).exists():
+        raise HTTPException(404, "File not found")
+
+    return FileResponse(
+        file_path,
+        filename=Path(file_path).name,
+        media_type="application/octet-stream"
+    )
+
+
+@app.post("/api/download-quran")
+async def download_quran_data(background_tasks: BackgroundTasks):
+    """Download full Quran data for offline use"""
+    background_tasks.add_task(download_full_quran)
+    return {"success": True, "message": "Downloading Quran data in background..."}
+
+
+@app.get("/api/health")
+async def health_check():
+    """Health check endpoint"""
+    return {
+        "status": "healthy",
+        "whisper_available": WHISPER_AVAILABLE,
+        "version": "1.0.0"
+    }
+
+
+@app.get("/api/cache-status")
+async def get_cache_status():
+    """Get information about cached Quran data"""
+    cache_info = check_cached_data()
+    return {
+        "success": True,
+        "offline_mode": is_offline_mode(),
+        "cache": cache_info
+    }
+
+
+@app.post("/api/offline-mode")
+async def toggle_offline_mode(enabled: bool = True):
+    """Toggle offline mode on/off"""
+    set_offline_mode(enabled)
+    return {
+        "success": True,
+        "offline_mode": is_offline_mode(),
+        "message": f"Offline mode {'enabled' if enabled else 'disabled'}"
+    }
+
+
+@app.get("/api/verses/{task_id}")
+async def get_verses(task_id: str):
+    """Get verses data for editing"""
+    if task_id not in processing_status:
+        raise HTTPException(404, "Task not found")
+
+    status = processing_status[task_id]
+    if status["status"] != "completed":
+        raise HTTPException(400, "Processing not complete")
+
+    return {
+        "success": True,
+        "verses": status.get("verses", []),
+        "settings": status.get("settings", {})
+    }
+
+
+class VerseUpdate(BaseModel):
+    index: int
+    start_time: float
+    end_time: float
+
+
+class VersesUpdateRequest(BaseModel):
+    verses: List[VerseUpdate]
+
+
+@app.post("/api/verses/{task_id}/update")
+async def update_verses(task_id: str, request: VersesUpdateRequest):
+    """Update verse timings"""
+    if task_id not in processing_status:
+        raise HTTPException(404, "Task not found")
+
+    status = processing_status[task_id]
+    if status["status"] != "completed":
+        raise HTTPException(400, "Processing not complete")
+
+    verses = status.get("verses", [])
+
+    for update in request.verses:
+        if 0 <= update.index < len(verses):
+            verses[update.index]["start_time"] = update.start_time
+            verses[update.index]["end_time"] = update.end_time
+
+    status["verses"] = verses
+
+    return {"success": True, "message": "Timings updated"}
+
+
+@app.post("/api/regenerate/{task_id}")
+async def regenerate_subtitles(task_id: str):
+    """Regenerate SRT/JSON files with updated timings"""
+    if task_id not in processing_status:
+        raise HTTPException(404, "Task not found")
+
+    status = processing_status[task_id]
+    if status["status"] != "completed":
+        raise HTTPException(400, "Processing not complete")
+
+    verses_data = status.get("verses", [])
+    settings = status.get("settings", {})
+
+    matched_verses = []
+    for v in verses_data:
+        extra_translations = {}
+        for key, value in v.items():
+            if key not in ["surah", "ayah", "arabic", "english", "turkish", "start_time", "end_time", "confidence"]:
+                extra_translations[key] = value
+
+        matched_verses.append(MatchedVerse(
+            surah=v["surah"],
+            ayah=v["ayah"],
+            arabic=v.get("arabic", ""),
+            english=v.get("english", ""),
+            turkish=v.get("turkish", ""),
+            start_time=v["start_time"],
+            end_time=v["end_time"],
+            confidence=v.get("confidence", 1.0),
+            segment_text="",
+            translations=extra_translations if extra_translations else None
+        ))
+
+    generator = SubtitleGenerator(
+        output_dir=str(OUTPUT_DIR),
+        separator=settings.get("separator", " | "),
+        languages=settings.get("languages", ["arabic", "english", "turkish"])
+    )
+
+    base_filename = f"quran_surah{settings['surah']}_{task_id[:8]}"
+    output_files = generator.generate_all(matched_verses, base_filename)
+
+    status["output_files"] = output_files
+
+    return {
+        "success": True,
+        "message": "Subtitles regenerated with updated timings",
+        "output_files": output_files
+    }
+
+
+@app.get("/api/video/{task_id}")
+async def get_video(task_id: str):
+    """Stream video file for preview"""
+    if task_id not in processing_status:
+        raise HTTPException(404, "Task not found")
+
+    status = processing_status[task_id]
+
+    video_path = status.get("video_file")
+    if not video_path or not Path(video_path).exists():
+        output_files = status.get("output_files", {})
+        video_path = output_files.get("video")
+
+    if not video_path or not Path(video_path).exists():
+        raise HTTPException(404, "Video file not found")
+
+    return FileResponse(
+        video_path,
+        media_type="video/mp4",
+        filename=Path(video_path).name
+    )
+
+
+@app.delete("/api/task/{task_id}")
+async def cleanup_task(task_id: str):
+    """Clean up task and delete video file"""
+    if task_id not in processing_status:
+        raise HTTPException(404, "Task not found")
+
+    status = processing_status[task_id]
+    video_path = status.get("video_file")
+
+    if video_path and Path(video_path).exists():
+        try:
+            os.remove(video_path)
+        except:
+            pass
+
+    del processing_status[task_id]
+
+    return {"success": True, "message": "Task cleaned up"}
+
+
+# Run with HF Spaces port (7860)
+if __name__ == "__main__":
+    import uvicorn
+    port = int(os.environ.get("PORT", 7860))
+    print("Starting Quran SRT Generator (HF Spaces)...")
+    print(f"Whisper available: {WHISPER_AVAILABLE}")
+    print(f"\nRunning on port {port}")
+    uvicorn.run(app, host="0.0.0.0", port=port)

requirements.txt

@@ -0,0 +1,19 @@
+# Quran SRT Generator - HF Spaces Dependencies
+
+# Web Framework
+fastapi==0.109.0
+uvicorn[standard]==0.27.0
+python-multipart==0.0.6
+jinja2==3.1.3
+
+# HTTP Client (for Quran API)
+httpx==0.26.0
+
+# Audio Processing (Whisper)
+openai-whisper==20231117
+
+# Utilities
+pydantic==2.5.3
+
+# Additional for production
+aiofiles==23.2.1

src/__init__.py

@@ -0,0 +1,2 @@
+# Quran SRT Generator
+# Core modules for processing Quran recitation videos

src/audio_processor.py

@@ -0,0 +1,247 @@
+"""
+Audio Processor
+Extracts audio from video and transcribes using Whisper
+Optimized for Arabic Quran recitation
+"""
+
+import os
+import subprocess
+import tempfile
+from pathlib import Path
+from typing import Optional, List, Dict
+import json
+
+# Try to import whisper
+try:
+    import whisper
+    WHISPER_AVAILABLE = True
+except ImportError:
+    WHISPER_AVAILABLE = False
+    print("Warning: Whisper not installed. Install with: pip install openai-whisper")
+
+
+class AudioProcessor:
+    def __init__(self, model_size: str = "medium"):
+        """
+        Initialize the audio processor
+
+        Args:
+            model_size: Whisper model size
+                - "tiny": Fastest, least accurate
+                - "base": Fast, basic accuracy
+                - "small": Good balance
+                - "medium": Recommended for Arabic (best balance)
+                - "large": Most accurate, slowest (requires more VRAM)
+        """
+        self.model_size = model_size
+        self.model = None
+        self.temp_dir = Path(tempfile.gettempdir()) / "quran_srt"
+        self.temp_dir.mkdir(exist_ok=True)
+
+    def load_model(self):
+        """Load Whisper model (lazy loading)"""
+        if not WHISPER_AVAILABLE:
+            raise RuntimeError("Whisper is not installed. Run: pip install openai-whisper")
+
+        if self.model is None:
+            print(f"Loading Whisper {self.model_size} model...")
+            self.model = whisper.load_model(self.model_size)
+            print("Model loaded successfully!")
+
+        return self.model
+
+    def extract_audio(self, video_path: str, output_path: Optional[str] = None) -> str:
+        """
+        Extract audio from video file using FFmpeg
+
+        Args:
+            video_path: Path to the video file
+            output_path: Optional output path for audio file
+
+        Returns:
+            Path to the extracted audio file
+        """
+        video_path = Path(video_path)
+
+        if not video_path.exists():
+            raise FileNotFoundError(f"Video file not found: {video_path}")
+
+        if output_path is None:
+            output_path = self.temp_dir / f"{video_path.stem}_audio.wav"
+        else:
+            output_path = Path(output_path)
+
+        # FFmpeg command to extract audio as WAV (16kHz for Whisper)
+        cmd = [
+            "ffmpeg",
+            "-i", str(video_path),
+            "-vn",                    # No video
+            "-acodec", "pcm_s16le",   # PCM format
+            "-ar", "16000",           # 16kHz sample rate (Whisper optimal)
+            "-ac", "1",               # Mono
+            "-y",                     # Overwrite output
+            str(output_path)
+        ]
+
+        try:
+            result = subprocess.run(
+                cmd,
+                capture_output=True,
+                text=True,
+                check=True
+            )
+            print(f"Audio extracted to: {output_path}")
+            return str(output_path)
+
+        except subprocess.CalledProcessError as e:
+            raise RuntimeError(f"FFmpeg error: {e.stderr}")
+        except FileNotFoundError:
+            raise RuntimeError("FFmpeg not found. Please install FFmpeg.")
+
+    def transcribe(
+        self,
+        audio_path: str,
+        language: str = "ar",
+        task: str = "transcribe"
+    ) -> Dict:
+        """
+        Transcribe audio using Whisper
+
+        Args:
+            audio_path: Path to audio file
+            language: Language code ("ar" for Arabic)
+            task: "transcribe" for same language, "translate" for English
+
+        Returns:
+            Transcription result with segments and timestamps
+        """
+        model = self.load_model()
+
+        print(f"Transcribing audio: {audio_path}")
+        print("This may take a few minutes depending on the video length...")
+
+        result = model.transcribe(
+            audio_path,
+            language=language,
+            task=task,
+            word_timestamps=True,      # Get word-level timestamps
+            verbose=False,
+            initial_prompt="بسم الله الرحمن الرحيم",  # Help with Quran context
+        )
+
+        return result
+
+    def transcribe_video(
+        self,
+        video_path: str,
+        language: str = "ar"
+    ) -> Dict:
+        """
+        Full pipeline: extract audio and transcribe
+
+        Args:
+            video_path: Path to video file
+            language: Language code
+
+        Returns:
+            Transcription result with segments
+        """
+        # Extract audio
+        audio_path = self.extract_audio(video_path)
+
+        # Transcribe
+        result = self.transcribe(audio_path, language=language)
+
+        # Clean up temp audio file
+        try:
+            os.remove(audio_path)
+        except:
+            pass
+
+        return result
+
+    def get_segments_with_timing(self, transcription: Dict) -> List[Dict]:
+        """
+        Extract segments with precise timing from transcription
+
+        Args:
+            transcription: Whisper transcription result
+
+        Returns:
+            List of segments with start, end, and text
+        """
+        segments = []
+
+        for segment in transcription.get("segments", []):
+            segments.append({
+                "id": segment.get("id", len(segments)),
+                "start": segment.get("start", 0),
+                "end": segment.get("end", 0),
+                "text": segment.get("text", "").strip(),
+                "words": segment.get("words", []),
+                "confidence": segment.get("avg_logprob", 0)
+            })
+
+        return segments
+
+
+class MockAudioProcessor:
+    """
+    Mock processor for testing without Whisper installed
+    """
+
+    def __init__(self, model_size: str = "medium"):
+        self.model_size = model_size
+
+    def transcribe_video(self, video_path: str, language: str = "ar") -> Dict:
+        """Return mock transcription for testing"""
+        return {
+            "text": "بسم الله الرحمن الرحيم الحمد لله رب العالمين",
+            "segments": [
+                {
+                    "id": 0,
+                    "start": 0.0,
+                    "end": 3.5,
+                    "text": "بسم الله الرحمن الرحيم",
+                    "words": []
+                },
+                {
+                    "id": 1,
+                    "start": 3.5,
+                    "end": 6.0,
+                    "text": "الحمد لله رب العالمين",
+                    "words": []
+                }
+            ],
+            "language": "ar"
+        }
+
+    def get_segments_with_timing(self, transcription: Dict) -> List[Dict]:
+        return transcription.get("segments", [])
+
+
+def get_processor(model_size: str = "medium") -> AudioProcessor:
+    """
+    Get appropriate processor based on Whisper availability
+    """
+    if WHISPER_AVAILABLE:
+        return AudioProcessor(model_size)
+    else:
+        print("Using mock processor (Whisper not installed)")
+        return MockAudioProcessor(model_size)
+
+
+# For testing
+if __name__ == "__main__":
+    processor = get_processor()
+    print(f"Whisper available: {WHISPER_AVAILABLE}")
+    print(f"Processor type: {type(processor).__name__}")
+
+    # Test with mock data
+    if not WHISPER_AVAILABLE:
+        result = processor.transcribe_video("test.mp4")
+        segments = processor.get_segments_with_timing(result)
+
+        print("\nMock transcription result:")
+        for seg in segments:
+            print(f"[{seg['start']:.2f} - {seg['end']:.2f}] {seg['text']}")

src/quran_data.py

@@ -0,0 +1,327 @@
+"""
+Quran Data Handler
+Fetches and caches Quran verses with translations from free APIs
+Primary source: api.alquran.cloud (reliable, no rate limits)
+"""
+
+import os
+import json
+import httpx
+import asyncio
+from pathlib import Path
+from typing import Optional
+
+DATA_DIR = Path(__file__).parent.parent / "data"
+DATA_DIR.mkdir(exist_ok=True)
+
+# API Base URL
+API_BASE = "https://api.alquran.cloud/v1"
+
+# Global offline mode setting
+OFFLINE_MODE = False
+
+
+def set_offline_mode(enabled: bool):
+    """Enable or disable offline mode"""
+    global OFFLINE_MODE
+    OFFLINE_MODE = enabled
+
+
+def is_offline_mode() -> bool:
+    """Check if offline mode is enabled"""
+    return OFFLINE_MODE
+
+
+def check_cached_data() -> dict:
+    """
+    Check what data is available offline
+    Returns dict with cache status
+    """
+    cache_info = {
+        "surah_list": (DATA_DIR / "surah_list.json").exists(),
+        "surahs_cached": [],
+        "languages_cached": {}
+    }
+
+    # Check which surahs are cached for each language
+    for lang in EDITIONS.keys():
+        cache_info["languages_cached"][lang] = []
+        for surah_num in range(1, 115):
+            cache_file = DATA_DIR / f"surah_{surah_num}_{lang}.json"
+            if cache_file.exists():
+                cache_info["languages_cached"][lang].append(surah_num)
+                if surah_num not in cache_info["surahs_cached"]:
+                    cache_info["surahs_cached"].append(surah_num)
+
+    cache_info["total_cached"] = len(cache_info["surahs_cached"])
+    cache_info["is_complete"] = cache_info["total_cached"] == 114
+
+    return cache_info
+
+
+def is_surah_cached(surah: int, languages: list = None) -> bool:
+    """Check if a surah is cached for the specified languages"""
+    if languages is None:
+        languages = ["arabic", "english", "turkish"]
+
+    for lang in languages:
+        cache_file = DATA_DIR / f"surah_{surah}_{lang}.json"
+        if not cache_file.exists():
+            return False
+    return True
+
+# Translation editions (verified high-quality)
+EDITIONS = {
+    "arabic": "quran-uthmani",           # Original Arabic (Uthmani script)
+    "english": "en.sahih",                # Saheeh International
+    "turkish": "tr.diyanet",              # Diyanet Isleri (official Turkish)
+    "urdu": "ur.jalandhry",               # Fateh Muhammad Jalandhry
+    "french": "fr.hamidullah",            # Muhammad Hamidullah
+    "german": "de.aburida",               # Abu Rida Muhammad
+    "indonesian": "id.indonesian",        # Indonesian Ministry of Religious Affairs
+    "spanish": "es.cortes",               # Julio Cortes
+    "russian": "ru.kuliev",               # Elmir Kuliev
+    "bengali": "bn.bengali",              # Muhiuddin Khan
+    "chinese": "zh.majian",               # Ma Jian
+    "dutch": "nl.siregar",                # Sofian Siregar
+    "italian": "it.piccardo",             # Hamza Piccardo
+    "japanese": "ja.japanese",            # Japanese
+    "korean": "ko.korean",                # Korean
+    "malay": "ms.basmeih",                # Abdullah Basmeih
+    "persian": "fa.ansarian",             # Hussain Ansarian
+    "portuguese": "pt.elhayek",           # Samir El-Hayek
+    "swedish": "sv.bernstrom",            # Knut Bernstrom
+    "thai": "th.thai",                    # Thai
+}
+
+# Surah metadata cache
+SURAH_INFO = None
+
+
+async def fetch_surah_list() -> list:
+    """Fetch list of all surahs with metadata"""
+    global SURAH_INFO
+
+    cache_file = DATA_DIR / "surah_list.json"
+
+    if cache_file.exists():
+        with open(cache_file, "r", encoding="utf-8") as f:
+            SURAH_INFO = json.load(f)
+            return SURAH_INFO
+
+    async with httpx.AsyncClient(timeout=30.0) as client:
+        try:
+            response = await client.get(f"{API_BASE}/surah")
+            data = response.json()
+
+            if data.get("status") == "OK":
+                SURAH_INFO = data["data"]
+                with open(cache_file, "w", encoding="utf-8") as f:
+                    json.dump(SURAH_INFO, f, ensure_ascii=False, indent=2)
+                return SURAH_INFO
+        except Exception as e:
+            print(f"Error fetching surah list: {e}")
+
+    return []
+
+
+async def fetch_surah_translation(surah: int, language: str = "arabic") -> Optional[list]:
+    """
+    Fetch entire surah with translation
+    Returns list of verses with text
+    """
+    edition = EDITIONS.get(language, "quran-uthmani")
+    cache_file = DATA_DIR / f"surah_{surah}_{language}.json"
+
+    # Check cache first
+    if cache_file.exists():
+        with open(cache_file, "r", encoding="utf-8") as f:
+            return json.load(f)
+
+    # If offline mode is enabled and no cache, return None
+    if OFFLINE_MODE:
+        print(f"Offline mode: Surah {surah} in {language} not cached")
+        return None
+
+    async with httpx.AsyncClient(timeout=30.0) as client:
+        try:
+            url = f"{API_BASE}/surah/{surah}/{edition}"
+            response = await client.get(url)
+            data = response.json()
+
+            if data.get("status") == "OK":
+                ayahs = data["data"]["ayahs"]
+                verses = []
+                for ayah in ayahs:
+                    verses.append({
+                        "ayah": ayah["numberInSurah"],
+                        "text": ayah["text"]
+                    })
+
+                # Cache the result
+                with open(cache_file, "w", encoding="utf-8") as f:
+                    json.dump(verses, f, ensure_ascii=False, indent=2)
+
+                return verses
+        except Exception as e:
+            print(f"Error fetching surah {surah} in {language}: {e}")
+
+    return None
+
+
+async def fetch_all_translations(surah: int, languages: list = None) -> dict:
+    """
+    Fetch surah in specified languages (default: Arabic, English, Turkish)
+    Returns dict with verses indexed by ayah number
+    """
+    if languages is None:
+        languages = ["arabic", "english", "turkish"]
+
+    results = {}
+
+    # Fetch all requested languages in parallel
+    tasks = {lang: fetch_surah_translation(surah, lang) for lang in languages}
+    translations = await asyncio.gather(*tasks.values())
+
+    # Map results back to language keys
+    for lang, translation in zip(tasks.keys(), translations):
+        if translation:
+            for verse in translation:
+                ayah = verse.get("ayah")
+                if ayah:
+                    if ayah not in results:
+                        results[ayah] = {"ayah": ayah, "surah": surah}
+                    results[ayah][lang] = verse.get("text", "")
+
+    return results
+
+
+async def download_full_quran():
+    """
+    Download entire Quran in all languages for offline use
+    This is optional but recommended for faster processing
+    """
+    print("Downloading Quran data for offline use...")
+
+    surah_list = await fetch_surah_list()
+    total = len(surah_list)
+
+    for i, surah in enumerate(surah_list, 1):
+        surah_num = surah["number"]
+        print(f"Downloading Surah {surah_num}/{total}: {surah['englishName']}...")
+
+        await fetch_all_translations(surah_num)
+
+        # Small delay to be respectful to the API
+        await asyncio.sleep(0.2)
+
+    print("Download complete! Quran data cached locally.")
+
+
+def get_cached_surah(surah: int) -> Optional[dict]:
+    """
+    Get cached surah data if available
+    Returns None if not cached
+    """
+    result = {}
+
+    for lang in ["arabic", "english", "turkish"]:
+        cache_file = DATA_DIR / f"surah_{surah}_{lang}.json"
+        if cache_file.exists():
+            with open(cache_file, "r", encoding="utf-8") as f:
+                verses = json.load(f)
+                for verse in verses:
+                    ayah = verse.get("ayah")
+                    if ayah:
+                        if ayah not in result:
+                            result[ayah] = {"ayah": ayah, "surah": surah}
+                        result[ayah][lang] = verse.get("text", "")
+
+    return result if result else None
+
+
+def search_verse_by_text(arabic_text: str, surah: int) -> Optional[dict]:
+    """
+    Search for a verse by its Arabic text within a surah
+    Uses fuzzy matching for Whisper transcription errors
+    """
+    from difflib import SequenceMatcher
+
+    cached = get_cached_surah(surah)
+    if not cached:
+        return None
+
+    best_match = None
+    best_ratio = 0
+
+    # Clean the input text
+    clean_input = normalize_arabic(arabic_text)
+
+    for ayah, verse in cached.items():
+        if "arabic" in verse:
+            clean_verse = normalize_arabic(verse["arabic"])
+
+            # Calculate similarity
+            ratio = SequenceMatcher(None, clean_input, clean_verse).ratio()
+
+            if ratio > best_ratio and ratio > 0.5:  # Minimum 50% match
+                best_ratio = ratio
+                best_match = verse
+                best_match["match_confidence"] = ratio
+
+    return best_match
+
+
+def normalize_arabic(text: str) -> str:
+    """
+    Normalize Arabic text for comparison
+    Removes diacritics and normalizes characters
+    """
+    # Remove diacritics (tashkeel)
+    diacritics = [
+        '\u064B', '\u064C', '\u064D', '\u064E', '\u064F',
+        '\u0650', '\u0651', '\u0652', '\u0653', '\u0654',
+        '\u0655', '\u0656', '\u0657', '\u0658', '\u0659',
+        '\u065A', '\u065B', '\u065C', '\u065D', '\u065E',
+        '\u065F', '\u0670'
+    ]
+
+    for d in diacritics:
+        text = text.replace(d, '')
+
+    # Normalize alef variations
+    text = text.replace('أ', 'ا')
+    text = text.replace('إ', 'ا')
+    text = text.replace('آ', 'ا')
+    text = text.replace('ٱ', 'ا')
+
+    # Normalize other characters
+    text = text.replace('ة', 'ه')
+    text = text.replace('ى', 'ي')
+
+    # Remove extra spaces
+    text = ' '.join(text.split())
+
+    return text
+
+
+# For testing
+if __name__ == "__main__":
+    async def test():
+        print("Testing Quran Data Handler...")
+
+        # Test fetching surah list
+        surahs = await fetch_surah_list()
+        print(f"Found {len(surahs)} surahs")
+
+        # Test fetching Al-Fatiha in all languages
+        print("\nFetching Al-Fatiha (Surah 1)...")
+        verses = await fetch_all_translations(1)
+
+        for ayah, verse in sorted(verses.items()):
+            print(f"\nAyah {ayah}:")
+            print(f"  AR: {verse.get('arabic', 'N/A')}")
+            print(f"  EN: {verse.get('english', 'N/A')}")
+            print(f"  TR: {verse.get('turkish', 'N/A')}")
+
+    asyncio.run(test())

src/subtitle_generator.py

@@ -0,0 +1,196 @@
+"""
+Subtitle Generator
+Generates SRT and JSON files from matched verses
+Supports multiple languages on the same line with separators
+"""
+
+import json
+from pathlib import Path
+from typing import List, Optional
+from datetime import timedelta
+from dataclasses import asdict
+
+from .verse_matcher import MatchedVerse
+
+
+class SubtitleGenerator:
+    def __init__(
+        self,
+        output_dir: str = "output",
+        separator: str = " | ",
+        languages: List[str] = None
+    ):
+        self.output_dir = Path(output_dir)
+        self.output_dir.mkdir(exist_ok=True)
+        self.separator = separator
+        self.languages = languages or ["arabic", "english", "turkish"]
+
+    def _format_timestamp(self, seconds: float) -> str:
+        td = timedelta(seconds=seconds)
+        total_seconds = int(td.total_seconds())
+        hours = total_seconds // 3600
+        minutes = (total_seconds % 3600) // 60
+        secs = total_seconds % 60
+        milliseconds = int((seconds - int(seconds)) * 1000)
+        return f"{hours:02d}:{minutes:02d}:{secs:02d},{milliseconds:03d}"
+
+    def _format_verse_text(self, verse: MatchedVerse) -> str:
+        parts = []
+
+        # RTL Unicode markers for Arabic text
+        RLE = '\u202B'  # Right-to-Left Embedding
+        PDF = '\u202C'  # Pop Directional Formatting
+
+        for lang in self.languages:
+            if hasattr(verse, 'get_translation'):
+                text = verse.get_translation(lang)
+            else:
+                text = getattr(verse, lang, "")
+            if text:
+                # Wrap Arabic text with RTL markers for proper rendering
+                if lang == "arabic":
+                    text = f"{RLE}{text}{PDF}"
+                parts.append(text)
+
+        return "\n".join(parts)
+
+    def generate_srt(
+        self,
+        verses: List[MatchedVerse],
+        filename: str = "quran_subtitles.srt"
+    ) -> str:
+        output_path = self.output_dir / filename
+        srt_content = []
+
+        for i, verse in enumerate(verses, 1):
+            srt_content.append(str(i))
+            start = self._format_timestamp(verse.start_time)
+            end = self._format_timestamp(verse.end_time)
+            srt_content.append(f"{start} --> {end}")
+            text = self._format_verse_text(verse)
+            srt_content.append(text)
+            srt_content.append("")
+
+        with open(output_path, "w", encoding="utf-8") as f:
+            f.write("\n".join(srt_content))
+
+        print(f"SRT file saved: {output_path}")
+        return str(output_path)
+
+    def generate_srt_separate(
+        self,
+        verses: List[MatchedVerse],
+        base_filename: str = "quran_subtitles"
+    ) -> dict:
+        output_paths = {}
+
+        for lang in self.languages:
+            filename = f"{base_filename}_{lang}.srt"
+            output_path = self.output_dir / filename
+            srt_content = []
+
+            for i, verse in enumerate(verses, 1):
+                srt_content.append(str(i))
+                start = self._format_timestamp(verse.start_time)
+                end = self._format_timestamp(verse.end_time)
+                srt_content.append(f"{start} --> {end}")
+
+                if hasattr(verse, 'get_translation'):
+                    text = verse.get_translation(lang)
+                else:
+                    text = getattr(verse, lang, "")
+                srt_content.append(text)
+                srt_content.append("")
+
+            with open(output_path, "w", encoding="utf-8") as f:
+                f.write("\n".join(srt_content))
+
+            output_paths[lang] = str(output_path)
+            print(f"SRT file saved: {output_path}")
+
+        return output_paths
+
+    def generate_json(
+        self,
+        verses: List[MatchedVerse],
+        filename: str = "quran_timing.json",
+        include_confidence: bool = True
+    ) -> str:
+        output_path = self.output_dir / filename
+
+        data = {
+            "version": "1.0",
+            "generator": "Quran SRT Generator",
+            "total_verses": len(verses),
+            "languages": self.languages,
+            "separator": self.separator,
+            "verses": []
+        }
+
+        for verse in verses:
+            verse_data = {
+                "index": verses.index(verse) + 1,
+                "surah": verse.surah,
+                "ayah": verse.ayah,
+                "timing": {
+                    "start": verse.start_time,
+                    "end": verse.end_time,
+                    "start_formatted": self._format_timestamp(verse.start_time),
+                    "end_formatted": self._format_timestamp(verse.end_time),
+                    "duration": round(verse.end_time - verse.start_time, 3)
+                },
+                "text": {
+                    "arabic": verse.arabic,
+                    "english": verse.english,
+                    "turkish": verse.turkish,
+                    "combined": self._format_verse_text(verse)
+                }
+            }
+
+            if include_confidence:
+                verse_data["confidence"] = round(verse.confidence, 4)
+
+            data["verses"].append(verse_data)
+
+        if verses:
+            data["summary"] = {
+                "surah": verses[0].surah,
+                "first_ayah": min(v.ayah for v in verses),
+                "last_ayah": max(v.ayah for v in verses),
+                "total_duration": round(verses[-1].end_time - verses[0].start_time, 3),
+                "average_verse_duration": round(
+                    sum(v.end_time - v.start_time for v in verses) / len(verses), 3
+                )
+            }
+
+        with open(output_path, "w", encoding="utf-8") as f:
+            json.dump(data, f, ensure_ascii=False, indent=2)
+
+        print(f"JSON file saved: {output_path}")
+        return str(output_path)
+
+    def generate_all(
+        self,
+        verses: List[MatchedVerse],
+        base_filename: str = "quran_subtitles"
+    ) -> dict:
+        outputs = {}
+        outputs["srt_combined"] = self.generate_srt(verses, f"{base_filename}_combined.srt")
+        outputs["srt_separate"] = self.generate_srt_separate(verses, base_filename)
+        outputs["json"] = self.generate_json(verses, f"{base_filename}_timing.json")
+        return outputs
+
+
+def generate_subtitles(
+    verses: List[MatchedVerse],
+    output_dir: str = "output",
+    separator: str = " | ",
+    languages: List[str] = None,
+    base_filename: str = "quran_subtitles"
+) -> dict:
+    generator = SubtitleGenerator(
+        output_dir=output_dir,
+        separator=separator,
+        languages=languages
+    )
+    return generator.generate_all(verses, base_filename)

src/verse_matcher.py

@@ -0,0 +1,398 @@
+"""
+Verse Matcher
+Matches transcribed Arabic text to Quran verses
+Uses fuzzy matching to handle Whisper transcription variations
+"""
+
+import asyncio
+import re
+from difflib import SequenceMatcher
+from typing import List, Dict, Optional, Tuple
+from dataclasses import dataclass
+
+from .quran_data import (
+    fetch_all_translations,
+    normalize_arabic,
+    get_cached_surah,
+    fetch_surah_list
+)
+
+
+@dataclass
+class MatchedVerse:
+    """Represents a matched Quran verse with timing"""
+    surah: int
+    ayah: int
+    arabic: str
+    english: str
+    turkish: str
+    start_time: float
+    end_time: float
+    confidence: float
+    segment_text: str  # Original transcribed text
+    # Additional languages stored as dict
+    translations: dict = None
+
+    def __post_init__(self):
+        if self.translations is None:
+            self.translations = {}
+
+    def get_translation(self, lang: str) -> str:
+        """Get translation for a language"""
+        if lang == "arabic":
+            return self.arabic
+        elif lang == "english":
+            return self.english
+        elif lang == "turkish":
+            return self.turkish
+        return self.translations.get(lang, "")
+
+
+class VerseMatcher:
+    def __init__(self, surah_number: int, start_ayah: int = 1, end_ayah: Optional[int] = None):
+        """
+        Initialize verse matcher for a specific surah range
+
+        Args:
+            surah_number: The surah to match against
+            start_ayah: Starting ayah number
+            end_ayah: Ending ayah number (None for all)
+        """
+        self.surah = surah_number
+        self.start_ayah = start_ayah
+        self.end_ayah = end_ayah
+        self.verses = {}
+        self.verse_list = []  # Ordered list for sequential matching
+
+    async def load_verses(self, languages: List[str] = None):
+        """Load verses from Quran API"""
+        if languages is None:
+            languages = ["arabic", "english", "turkish"]
+
+        print(f"Loading Surah {self.surah} verses...")
+
+        self.verses = await fetch_all_translations(self.surah, languages)
+
+        # Filter by ayah range
+        if self.end_ayah:
+            self.verses = {
+                k: v for k, v in self.verses.items()
+                if self.start_ayah <= k <= self.end_ayah
+            }
+        else:
+            self.verses = {
+                k: v for k, v in self.verses.items()
+                if k >= self.start_ayah
+            }
+
+        # Create ordered list
+        self.verse_list = [
+            self.verses[k] for k in sorted(self.verses.keys())
+        ]
+
+        print(f"Loaded {len(self.verses)} verses")
+        return self.verses
+
+    def _calculate_similarity(self, text1: str, text2: str) -> float:
+        """Calculate similarity ratio between two texts"""
+        norm1 = normalize_arabic(text1)
+        norm2 = normalize_arabic(text2)
+        return SequenceMatcher(None, norm1, norm2).ratio()
+
+    def _find_best_match(self, segment_text: str, search_start: int = 0) -> Tuple[Optional[Dict], float, int]:
+        """
+        Find the best matching verse for a text segment
+
+        Args:
+            segment_text: Transcribed text to match
+            search_start: Start searching from this verse index
+
+        Returns:
+            Tuple of (matched_verse, confidence, verse_index)
+        """
+        best_match = None
+        best_confidence = 0
+        best_index = search_start
+
+        normalized_segment = normalize_arabic(segment_text)
+
+        # Search through verses starting from search_start
+        for i, verse in enumerate(self.verse_list[search_start:], search_start):
+            if "arabic" not in verse:
+                continue
+
+            verse_text = verse["arabic"]
+            normalized_verse = normalize_arabic(verse_text)
+
+            # Calculate different types of matches
+
+            # 1. Full match
+            full_ratio = self._calculate_similarity(segment_text, verse_text)
+
+            # 2. Segment is part of verse
+            if normalized_segment in normalized_verse:
+                partial_ratio = len(normalized_segment) / len(normalized_verse)
+                full_ratio = max(full_ratio, 0.7 + (partial_ratio * 0.3))
+
+            # 3. Verse is part of segment (for combined segments)
+            if normalized_verse in normalized_segment:
+                partial_ratio = len(normalized_verse) / len(normalized_segment)
+                full_ratio = max(full_ratio, 0.6 + (partial_ratio * 0.4))
+
+            # 4. Word overlap
+            segment_words = set(normalized_segment.split())
+            verse_words = set(normalized_verse.split())
+            if segment_words and verse_words:
+                overlap = len(segment_words & verse_words)
+                word_ratio = overlap / max(len(segment_words), len(verse_words))
+                full_ratio = max(full_ratio, word_ratio * 0.8)
+
+            if full_ratio > best_confidence:
+                best_confidence = full_ratio
+                best_match = verse
+                best_index = i
+
+        return best_match, best_confidence, best_index
+
+    def match_segments(
+        self,
+        segments: List[Dict],
+        min_confidence: float = 0.3,
+        languages: List[str] = None
+    ) -> List[MatchedVerse]:
+        """
+        Match transcribed segments to Quran verses
+
+        Args:
+            segments: List of transcribed segments with timing
+            min_confidence: Minimum confidence threshold
+            languages: List of languages to include
+
+        Returns:
+            List of matched verses with timing
+        """
+        if languages is None:
+            languages = ["arabic", "english", "turkish"]
+
+        matched = []
+        current_verse_index = 0
+        pending_segments = []
+
+        for segment in segments:
+            text = segment.get("text", "").strip()
+            if not text:
+                continue
+
+            start_time = segment.get("start", 0)
+            end_time = segment.get("end", 0)
+
+            # Try to match this segment
+            verse, confidence, verse_index = self._find_best_match(
+                text,
+                search_start=current_verse_index
+            )
+
+            if verse and confidence >= min_confidence:
+                # Build extra translations
+                extra_translations = {}
+                for lang in languages:
+                    if lang not in ["arabic", "english", "turkish"]:
+                        extra_translations[lang] = verse.get(lang, "")
+
+                # Good match found
+                matched_verse = MatchedVerse(
+                    surah=verse.get("surah", self.surah),
+                    ayah=verse.get("ayah", 0),
+                    arabic=verse.get("arabic", ""),
+                    english=verse.get("english", ""),
+                    turkish=verse.get("turkish", ""),
+                    start_time=start_time,
+                    end_time=end_time,
+                    confidence=confidence,
+                    segment_text=text,
+                    translations=extra_translations if extra_translations else None
+                )
+                matched.append(matched_verse)
+
+                # Move to next verse for sequential matching
+                current_verse_index = verse_index + 1
+
+            else:
+                # Low confidence - might be partial verse
+                # Try combining with next segment
+                pending_segments.append(segment)
+
+        # Handle any remaining pending segments
+        if pending_segments:
+            combined_text = " ".join(s.get("text", "") for s in pending_segments)
+            verse, confidence, _ = self._find_best_match(combined_text, current_verse_index)
+
+            if verse and confidence >= min_confidence:
+                # Build extra translations
+                extra_translations = {}
+                for lang in languages:
+                    if lang not in ["arabic", "english", "turkish"]:
+                        extra_translations[lang] = verse.get(lang, "")
+
+                matched_verse = MatchedVerse(
+                    surah=verse.get("surah", self.surah),
+                    ayah=verse.get("ayah", 0),
+                    arabic=verse.get("arabic", ""),
+                    english=verse.get("english", ""),
+                    turkish=verse.get("turkish", ""),
+                    start_time=pending_segments[0].get("start", 0),
+                    end_time=pending_segments[-1].get("end", 0),
+                    confidence=confidence,
+                    segment_text=combined_text,
+                    translations=extra_translations if extra_translations else None
+                )
+                matched.append(matched_verse)
+
+        return matched
+
+    def sequential_match(
+        self,
+        segments: List[Dict],
+        languages: List[str] = None,
+        bismillah_included: bool = True
+    ) -> List[MatchedVerse]:
+        """
+        Sequential matching - assumes verses are recited in order
+        This is more accurate for continuous recitation
+
+        Args:
+            segments: Transcribed segments
+            languages: List of languages to include
+            bismillah_included: Whether Bismillah is recited (not for Surah 9)
+
+        Returns:
+            List of matched verses
+        """
+        if languages is None:
+            languages = ["arabic", "english", "turkish"]
+
+        if not self.verse_list:
+            print("No verses loaded. Call load_verses() first.")
+            return []
+
+        matched = []
+        segment_index = 0
+        verse_index = 0
+
+        # Combine all segment text for analysis
+        all_text = " ".join(s.get("text", "") for s in segments)
+        all_text_normalized = normalize_arabic(all_text)
+
+        # Process each verse in order
+        for verse in self.verse_list:
+            if "arabic" not in verse:
+                continue
+
+            verse_text = verse["arabic"]
+            verse_normalized = normalize_arabic(verse_text)
+
+            # Find where this verse appears in the transcription
+            position = all_text_normalized.find(verse_normalized[:20])  # First 20 chars
+
+            # Find corresponding segment
+            best_segment = None
+            best_overlap = 0
+
+            for i, segment in enumerate(segments[segment_index:], segment_index):
+                seg_text = normalize_arabic(segment.get("text", ""))
+
+                # Check overlap with verse
+                overlap = len(set(seg_text.split()) & set(verse_normalized.split()))
+                if overlap > best_overlap:
+                    best_overlap = overlap
+                    best_segment = segment
+                    segment_index = i
+
+            if best_segment:
+                # Build extra translations
+                extra_translations = {}
+                for lang in languages:
+                    if lang not in ["arabic", "english", "turkish"]:
+                        extra_translations[lang] = verse.get(lang, "")
+
+                matched_verse = MatchedVerse(
+                    surah=verse.get("surah", self.surah),
+                    ayah=verse.get("ayah", 0),
+                    arabic=verse_text,
+                    english=verse.get("english", ""),
+                    turkish=verse.get("turkish", ""),
+                    start_time=best_segment.get("start", 0),
+                    end_time=best_segment.get("end", 0),
+                    confidence=0.8,  # Assumed high for sequential
+                    segment_text=best_segment.get("text", ""),
+                    translations=extra_translations if extra_translations else None
+                )
+                matched.append(matched_verse)
+
+        return matched
+
+
+async def match_video_to_verses(
+    segments: List[Dict],
+    surah: int,
+    start_ayah: int = 1,
+    end_ayah: Optional[int] = None,
+    languages: List[str] = None
+) -> List[MatchedVerse]:
+    """
+    Main function to match video segments to Quran verses
+
+    Args:
+        segments: Transcribed segments from Whisper
+        surah: Surah number
+        start_ayah: Starting ayah
+        end_ayah: Ending ayah (None for all)
+        languages: List of languages to include in output
+
+    Returns:
+        List of matched verses with timing
+    """
+    if languages is None:
+        languages = ["arabic", "english", "turkish"]
+
+    matcher = VerseMatcher(surah, start_ayah, end_ayah)
+    await matcher.load_verses(languages)
+
+    # Try sequential matching first (more accurate for recitation)
+    matched = matcher.sequential_match(segments, languages)
+
+    # Fall back to fuzzy matching if sequential didn't work well
+    if len(matched) < len(matcher.verse_list) * 0.5:
+        print("Sequential matching incomplete, trying fuzzy matching...")
+        matched = matcher.match_segments(segments, languages=languages)
+
+    return matched
+
+
+# For testing
+if __name__ == "__main__":
+    async def test():
+        # Mock segments (simulating Whisper output)
+        mock_segments = [
+            {"id": 0, "start": 0.0, "end": 3.5, "text": "بسم الله الرحمن الرحيم"},
+            {"id": 1, "start": 3.5, "end": 6.5, "text": "الحمد لله رب العالمين"},
+            {"id": 2, "start": 6.5, "end": 9.0, "text": "الرحمن الرحيم"},
+            {"id": 3, "start": 9.0, "end": 12.0, "text": "مالك يوم الدين"},
+            {"id": 4, "start": 12.0, "end": 15.5, "text": "اياك نعبد واياك نستعين"},
+            {"id": 5, "start": 15.5, "end": 19.0, "text": "اهدنا الصراط المستقيم"},
+            {"id": 6, "start": 19.0, "end": 25.0, "text": "صراط الذين انعمت عليهم غير المغضوب عليهم ولا الضالين"},
+        ]
+
+        print("Testing Verse Matcher with Al-Fatiha...")
+        matched = await match_video_to_verses(mock_segments, surah=1)
+
+        print(f"\nMatched {len(matched)} verses:\n")
+        for verse in matched:
+            print(f"[{verse.start_time:.1f}s - {verse.end_time:.1f}s] Ayah {verse.ayah}")
+            print(f"  AR: {verse.arabic[:50]}...")
+            print(f"  EN: {verse.english[:50]}...")
+            print(f"  TR: {verse.turkish[:50]}...")
+            print(f"  Confidence: {verse.confidence:.2%}")
+            print()
+
+    asyncio.run(test())

src/video_generator.py

@@ -0,0 +1,263 @@
+"""
+Video Generator
+Creates videos with black screen or image background,
+audio from reciters, and burned-in subtitles
+"""
+
+import os
+import subprocess
+import asyncio
+import httpx
+from pathlib import Path
+from typing import Optional, List
+import tempfile
+
+
+class VideoGenerator:
+    def __init__(self, output_dir: str = "output", temp_dir: str = None):
+        self.output_dir = Path(output_dir)
+        self.output_dir.mkdir(exist_ok=True)
+        self.temp_dir = Path(temp_dir) if temp_dir else Path(tempfile.gettempdir()) / "quran_video"
+        self.temp_dir.mkdir(exist_ok=True)
+
+    async def download_surah_audio(
+        self,
+        surah: int,
+        reciter: str = "ar.alafasy",
+        start_ayah: int = 1,
+        end_ayah: Optional[int] = None
+    ) -> tuple:
+        print(f"Downloading audio for Surah {surah} by {reciter}...")
+        base_url = "https://api.alquran.cloud/v1"
+
+        async with httpx.AsyncClient(timeout=60.0) as client:
+            response = await client.get(f"{base_url}/surah/{surah}")
+            data = response.json()
+
+            if data.get("status") != "OK":
+                raise Exception(f"Failed to get surah info: {data}")
+
+            total_ayahs = data["data"]["numberOfAyahs"]
+            if end_ayah is None:
+                end_ayah = total_ayahs
+
+            audio_files = []
+            ayah_durations = []
+
+            for ayah in range(start_ayah, end_ayah + 1):
+                print(f"  Downloading ayah {ayah}/{end_ayah}...")
+
+                ayah_response = await client.get(
+                    f"{base_url}/ayah/{surah}:{ayah}/{reciter}"
+                )
+                ayah_data = ayah_response.json()
+
+                if ayah_data.get("status") != "OK":
+                    print(f"  Warning: Could not get ayah {ayah}")
+                    continue
+
+                audio_url = ayah_data["data"].get("audio")
+                if not audio_url:
+                    print(f"  Warning: No audio URL for ayah {ayah}")
+                    continue
+
+                audio_response = await client.get(audio_url)
+                audio_path = self.temp_dir / f"ayah_{surah}_{ayah}.mp3"
+
+                with open(audio_path, "wb") as f:
+                    f.write(audio_response.content)
+
+                duration = self.get_audio_duration(str(audio_path))
+                ayah_durations.append((ayah, duration))
+                audio_files.append(str(audio_path))
+
+            if not audio_files:
+                raise Exception("No audio files downloaded")
+
+            ayah_timings = []
+            current_time = 0.0
+            for ayah_num, duration in ayah_durations:
+                start_time = current_time
+                end_time = current_time + duration
+                ayah_timings.append((ayah_num, start_time, end_time))
+                current_time = end_time
+
+            combined_audio = self.temp_dir / f"surah_{surah}_combined.mp3"
+
+            if len(audio_files) == 1:
+                import shutil
+                shutil.copy(audio_files[0], combined_audio)
+            else:
+                concat_list = self.temp_dir / "concat_list.txt"
+                with open(concat_list, "w") as f:
+                    for audio_file in audio_files:
+                        f.write(f"file '{audio_file}'\n")
+
+                cmd = [
+                    "ffmpeg", "-y",
+                    "-f", "concat",
+                    "-safe", "0",
+                    "-i", str(concat_list),
+                    "-c", "copy",
+                    str(combined_audio)
+                ]
+
+                result = subprocess.run(cmd, capture_output=True, text=True)
+                if result.returncode != 0:
+                    print(f"FFmpeg error: {result.stderr}")
+                    raise Exception("Failed to combine audio files")
+
+            print(f"Audio downloaded: {combined_audio}")
+            return str(combined_audio), ayah_timings
+
+    def get_audio_duration(self, audio_path: str) -> float:
+        cmd = [
+            "ffprobe",
+            "-v", "error",
+            "-show_entries", "format=duration",
+            "-of", "default=noprint_wrappers=1:nokey=1",
+            audio_path
+        ]
+        result = subprocess.run(cmd, capture_output=True, text=True)
+        if result.returncode == 0:
+            return float(result.stdout.strip())
+        return 0
+
+    def create_video_with_subtitles(
+        self,
+        audio_path: str,
+        srt_path: str,
+        output_path: str,
+        background_image: Optional[str] = None,
+        resolution: str = "1920x1080",
+        font_size: int = 24,
+        font_color: str = "white",
+        bg_color: str = "black"
+    ) -> str:
+        print(f"Creating video with subtitles...")
+
+        width, height = resolution.split("x")
+        duration = self.get_audio_duration(audio_path)
+
+        alignment = 8  # Top center
+
+        style = (
+            f"FontName=Arial,"
+            f"FontSize={font_size},"
+            f"PrimaryColour=&Hffffff&,"
+            f"OutlineColour=&H000000&,"
+            f"Outline=2,"
+            f"Alignment={alignment},"
+            f"MarginV=30,"
+            f"MarginL=50,"
+            f"MarginR=50,"
+            f"BorderStyle=1"
+        )
+
+        if background_image and Path(background_image).exists():
+            input_args = [
+                "-loop", "1",
+                "-i", background_image,
+                "-i", audio_path,
+            ]
+            filter_complex = (
+                f"[0:v]scale={width}:{height}:force_original_aspect_ratio=decrease,"
+                f"pad={width}:{height}:(ow-iw)/2:(oh-ih)/2:color={bg_color},"
+                f"subtitles='{srt_path.replace(chr(92), '/').replace(':', chr(92)+':')}':force_style='{style}'[v]"
+            )
+        else:
+            input_args = [
+                "-f", "lavfi",
+                "-i", f"color=c={bg_color}:s={resolution}:d={duration}",
+                "-i", audio_path,
+            ]
+            srt_escaped = srt_path.replace("\\", "/").replace(":", "\\:")
+            filter_complex = (
+                f"[0:v]subtitles='{srt_escaped}':force_style='{style}'[v]"
+            )
+
+        cmd = [
+            "ffmpeg", "-y",
+            *input_args,
+            "-filter_complex", filter_complex,
+            "-map", "[v]",
+            "-map", "1:a",
+            "-c:v", "libx264",
+            "-preset", "medium",
+            "-crf", "23",
+            "-c:a", "aac",
+            "-b:a", "192k",
+            "-shortest",
+            "-movflags", "+faststart",
+            output_path
+        ]
+
+        print(f"Running FFmpeg: {' '.join(cmd)}")
+
+        result = subprocess.run(cmd, capture_output=True, text=True)
+        if result.returncode != 0:
+            print(f"FFmpeg error: {result.stderr}")
+            cmd_simple = [
+                "ffmpeg", "-y",
+                "-f", "lavfi",
+                "-i", f"color=c={bg_color}:s={resolution}:d={duration}",
+                "-i", audio_path,
+                "-c:v", "libx264",
+                "-preset", "medium",
+                "-crf", "23",
+                "-c:a", "aac",
+                "-b:a", "192k",
+                "-shortest",
+                "-movflags", "+faststart",
+                output_path
+            ]
+            result = subprocess.run(cmd_simple, capture_output=True, text=True)
+            if result.returncode != 0:
+                raise Exception(f"Failed to create video: {result.stderr}")
+            print("Warning: Created video without burned-in subtitles")
+
+        print(f"Video created: {output_path}")
+        return output_path
+
+    def cleanup_temp_files(self, surah: int = None):
+        try:
+            for f in self.temp_dir.glob("*.mp3"):
+                if surah is None or f"surah_{surah}" in f.name or f"ayah_{surah}_" in f.name:
+                    f.unlink()
+            for f in self.temp_dir.glob("*.txt"):
+                f.unlink()
+        except Exception as e:
+            print(f"Cleanup error: {e}")
+
+
+async def generate_quran_video(
+    surah: int,
+    reciter: str,
+    srt_path: str,
+    output_path: str,
+    start_ayah: int = 1,
+    end_ayah: Optional[int] = None,
+    background_image: Optional[str] = None,
+    output_dir: str = "output"
+) -> str:
+    generator = VideoGenerator(output_dir=output_dir)
+
+    try:
+        audio_path = await generator.download_surah_audio(
+            surah=surah,
+            reciter=reciter,
+            start_ayah=start_ayah,
+            end_ayah=end_ayah
+        )
+
+        video_path = generator.create_video_with_subtitles(
+            audio_path=audio_path,
+            srt_path=srt_path,
+            output_path=output_path,
+            background_image=background_image
+        )
+
+        return video_path
+
+    finally:
+        generator.cleanup_temp_files(surah)

templates/index.html

@@ -0,0 +1,1976 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Quran SRT Generator</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        :root {
+            --primary: #1a5f4a;
+            --primary-light: #2d8a6e;
+            --secondary: #c9a227;
+            --bg-dark: #0f1419;
+            --bg-card: #1a1f26;
+            --bg-input: #0d1117;
+            --text: #e8e8e8;
+            --text-muted: #8b949e;
+            --border: #30363d;
+            --success: #2ea043;
+            --error: #f85149;
+            --warning: #d29922;
+        }
+
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: var(--bg-dark);
+            color: var(--text);
+            min-height: 100vh;
+            line-height: 1.6;
+        }
+
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 2rem;
+        }
+
+        header {
+            text-align: center;
+            margin-bottom: 2rem;
+            padding: 2rem;
+            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
+            border-radius: 16px;
+        }
+
+        header h1 {
+            font-size: 2.5rem;
+            margin-bottom: 0.5rem;
+            color: white;
+        }
+
+        header p {
+            color: rgba(255, 255, 255, 0.85);
+            font-size: 1.1rem;
+        }
+
+        .arabic-text {
+            font-family: 'Traditional Arabic', 'Scheherazade', serif;
+            font-size: 1.8rem;
+            margin-bottom: 1rem;
+            color: var(--secondary);
+        }
+
+        .card {
+            background: var(--bg-card);
+            border: 1px solid var(--border);
+            border-radius: 12px;
+            padding: 1.5rem;
+            margin-bottom: 1.5rem;
+        }
+
+        .card h2 {
+            color: var(--primary-light);
+            margin-bottom: 1rem;
+            font-size: 1.3rem;
+        }
+
+        .form-group {
+            margin-bottom: 1.25rem;
+        }
+
+        label {
+            display: block;
+            margin-bottom: 0.5rem;
+            color: var(--text);
+            font-weight: 500;
+        }
+
+        select, input[type="number"], input[type="text"] {
+            width: 100%;
+            padding: 0.75rem 1rem;
+            background: var(--bg-input);
+            border: 1px solid var(--border);
+            border-radius: 8px;
+            color: var(--text);
+            font-size: 1rem;
+            transition: border-color 0.2s;
+        }
+
+        select:focus, input:focus {
+            outline: none;
+            border-color: var(--primary-light);
+        }
+
+        .row {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 1rem;
+        }
+
+        .row-3 {
+            grid-template-columns: 1fr 1fr 1fr;
+        }
+
+        .upload-area {
+            border: 2px dashed var(--border);
+            border-radius: 12px;
+            padding: 3rem 2rem;
+            text-align: center;
+            cursor: pointer;
+            transition: all 0.3s;
+            background: var(--bg-input);
+        }
+
+        .upload-area:hover, .upload-area.dragover {
+            border-color: var(--primary-light);
+            background: rgba(45, 138, 110, 0.1);
+        }
+
+        .upload-area.has-file {
+            border-color: var(--success);
+            border-style: solid;
+        }
+
+        .upload-icon {
+            font-size: 3rem;
+            margin-bottom: 1rem;
+        }
+
+        .upload-area p {
+            color: var(--text-muted);
+        }
+
+        .file-name {
+            color: var(--success);
+            font-weight: 500;
+            margin-top: 0.5rem;
+        }
+
+        input[type="file"] {
+            display: none;
+        }
+
+        .btn {
+            display: inline-block;
+            padding: 0.875rem 2rem;
+            background: var(--primary);
+            color: white;
+            border: none;
+            border-radius: 8px;
+            font-size: 1rem;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.2s;
+            text-decoration: none;
+        }
+
+        .btn:hover {
+            background: var(--primary-light);
+            transform: translateY(-1px);
+        }
+
+        .btn:disabled {
+            background: var(--border);
+            cursor: not-allowed;
+            transform: none;
+        }
+
+        .btn-block {
+            display: block;
+            width: 100%;
+            text-align: center;
+        }
+
+        .btn-secondary {
+            background: transparent;
+            border: 2px solid var(--primary);
+            color: var(--primary-light);
+        }
+
+        .btn-secondary:hover {
+            background: var(--primary);
+            color: white;
+        }
+
+        .btn-sm {
+            padding: 0.5rem 1rem;
+            font-size: 0.875rem;
+        }
+
+        .btn-warning {
+            background: var(--warning);
+        }
+
+        .btn-warning:hover {
+            background: #e5a922;
+        }
+
+        .progress-container {
+            display: none;
+            margin-top: 1.5rem;
+        }
+
+        .progress-container.show {
+            display: block;
+        }
+
+        .progress-bar {
+            height: 8px;
+            background: var(--border);
+            border-radius: 4px;
+            overflow: hidden;
+            margin-bottom: 0.75rem;
+        }
+
+        .progress-fill {
+            height: 100%;
+            background: linear-gradient(90deg, var(--primary), var(--primary-light));
+            border-radius: 4px;
+            transition: width 0.3s ease;
+            width: 0%;
+        }
+
+        .progress-text {
+            color: var(--text-muted);
+            font-size: 0.9rem;
+        }
+
+        .alert {
+            padding: 1rem 1.25rem;
+            border-radius: 8px;
+            margin-bottom: 1rem;
+        }
+
+        .alert-warning {
+            background: rgba(201, 162, 39, 0.15);
+            border: 1px solid var(--secondary);
+            color: var(--secondary);
+        }
+
+        .alert-error {
+            background: rgba(248, 81, 73, 0.15);
+            border: 1px solid var(--error);
+            color: var(--error);
+        }
+
+        .alert-success {
+            background: rgba(46, 160, 67, 0.15);
+            border: 1px solid var(--success);
+            color: var(--success);
+        }
+
+        /* ================================
+           MODE SELECTOR
+           ================================ */
+
+        .mode-selector {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 1rem;
+            margin-bottom: 1rem;
+        }
+
+        .mode-option input {
+            display: none;
+        }
+
+        .mode-card {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 1.25rem;
+            background: var(--bg-input);
+            border: 2px solid var(--border);
+            border-radius: 12px;
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+
+        .mode-card:hover {
+            border-color: var(--primary);
+        }
+
+        .mode-option input:checked + .mode-card {
+            border-color: var(--primary-light);
+            background: rgba(45, 138, 110, 0.15);
+        }
+
+        .mode-icon {
+            font-size: 2rem;
+            margin-bottom: 0.5rem;
+        }
+
+        .mode-label {
+            font-weight: 600;
+            color: var(--text);
+        }
+
+        .mode-desc {
+            font-size: 0.75rem;
+            color: var(--text-muted);
+            margin-top: 0.25rem;
+        }
+
+        .upload-section {
+            margin-top: 1rem;
+        }
+
+        .info-box {
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+            padding: 1.5rem;
+            background: var(--bg-input);
+            border: 1px solid var(--border);
+            border-radius: 12px;
+        }
+
+        .info-icon {
+            font-size: 2.5rem;
+        }
+
+        .info-box p {
+            color: var(--text-muted);
+        }
+
+        /* ================================
+           CHECKBOX GROUP
+           ================================ */
+
+        .checkbox-group {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 1rem;
+        }
+
+        .checkbox-option {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            padding: 0.75rem 1rem;
+            background: var(--bg-input);
+            border: 1px solid var(--border);
+            border-radius: 8px;
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+
+        .checkbox-option:hover {
+            border-color: var(--primary);
+        }
+
+        .checkbox-option input {
+            width: 18px;
+            height: 18px;
+            accent-color: var(--primary-light);
+        }
+
+        .checkbox-option input:checked + .checkbox-label {
+            color: var(--primary-light);
+        }
+
+        .checkbox-label {
+            font-weight: 500;
+        }
+
+        @media (max-width: 768px) {
+            .mode-selector {
+                grid-template-columns: 1fr;
+            }
+
+            .checkbox-group {
+                flex-direction: column;
+            }
+        }
+
+        /* ================================
+           EDITOR SECTION
+           ================================ */
+
+        .editor-section {
+            display: none;
+        }
+
+        .editor-section.show {
+            display: block;
+        }
+
+        .editor-layout {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 1.5rem;
+        }
+
+        @media (max-width: 1024px) {
+            .editor-layout {
+                grid-template-columns: 1fr;
+            }
+        }
+
+        /* Video Preview */
+        .video-preview {
+            position: sticky;
+            top: 1rem;
+        }
+
+        .video-container {
+            position: relative;
+            background: #000;
+            border-radius: 12px;
+            overflow: hidden;
+        }
+
+        .video-container video {
+            width: 100%;
+            display: block;
+        }
+
+        .subtitle-overlay {
+            position: absolute;
+            bottom: 60px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 90%;
+            text-align: center;
+            padding: 0.75rem 1rem;
+            background: rgba(0, 0, 0, 0.8);
+            border-radius: 8px;
+            font-size: 1rem;
+            line-height: 1.5;
+            pointer-events: none;
+        }
+
+        .subtitle-overlay .arabic {
+            font-family: 'Traditional Arabic', 'Scheherazade', serif;
+            font-size: 1.4rem;
+            color: var(--secondary);
+            margin-bottom: 0.25rem;
+        }
+
+        .subtitle-overlay .english {
+            color: #fff;
+            font-size: 0.95rem;
+        }
+
+        .subtitle-overlay .turkish {
+            color: #aaa;
+            font-size: 0.9rem;
+        }
+
+        .video-controls {
+            display: flex;
+            gap: 0.5rem;
+            margin-top: 1rem;
+            flex-wrap: wrap;
+        }
+
+        .video-controls .btn {
+            flex: 1;
+            min-width: 80px;
+        }
+
+        .current-time {
+            text-align: center;
+            padding: 0.5rem;
+            background: var(--bg-input);
+            border-radius: 8px;
+            font-family: monospace;
+            font-size: 1.2rem;
+            margin-top: 0.5rem;
+        }
+
+        /* Timing Editor */
+        .verse-list {
+            max-height: 600px;
+            overflow-y: auto;
+        }
+
+        .verse-item {
+            background: var(--bg-input);
+            border: 1px solid var(--border);
+            border-radius: 8px;
+            padding: 1rem;
+            margin-bottom: 0.75rem;
+            transition: all 0.2s;
+        }
+
+        .verse-item:hover {
+            border-color: var(--primary);
+        }
+
+        .verse-item.active {
+            border-color: var(--secondary);
+            background: rgba(201, 162, 39, 0.1);
+        }
+
+        .verse-item.editing {
+            border-color: var(--primary-light);
+            box-shadow: 0 0 0 2px rgba(45, 138, 110, 0.3);
+        }
+
+        .verse-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 0.5rem;
+        }
+
+        .verse-number {
+            background: var(--primary);
+            color: white;
+            padding: 0.25rem 0.75rem;
+            border-radius: 20px;
+            font-size: 0.875rem;
+            font-weight: 600;
+        }
+
+        .verse-confidence {
+            font-size: 0.75rem;
+            color: var(--text-muted);
+        }
+
+        .verse-text {
+            font-family: 'Traditional Arabic', 'Scheherazade', serif;
+            font-size: 1.2rem;
+            color: var(--secondary);
+            margin-bottom: 0.5rem;
+            direction: rtl;
+            text-align: right;
+        }
+
+        .verse-translation {
+            font-size: 0.85rem;
+            color: var(--text-muted);
+            margin-bottom: 0.75rem;
+        }
+
+        .timing-inputs {
+            display: grid;
+            grid-template-columns: 1fr 1fr auto;
+            gap: 0.5rem;
+            align-items: end;
+        }
+
+        .timing-inputs label {
+            font-size: 0.75rem;
+            color: var(--text-muted);
+            margin-bottom: 0.25rem;
+        }
+
+        .timing-inputs input {
+            padding: 0.5rem;
+            font-family: monospace;
+            font-size: 0.9rem;
+        }
+
+        .timing-inputs .btn {
+            padding: 0.5rem 0.75rem;
+        }
+
+        /* Download Section */
+        .download-section {
+            margin-top: 1.5rem;
+        }
+
+        .download-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+            gap: 1rem;
+            margin-top: 1rem;
+        }
+
+        .download-btn {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 0.5rem;
+            padding: 1rem;
+            background: var(--bg-input);
+            border: 1px solid var(--border);
+            border-radius: 8px;
+            color: var(--text);
+            text-decoration: none;
+            transition: all 0.2s;
+        }
+
+        .download-btn:hover {
+            border-color: var(--primary-light);
+            background: rgba(45, 138, 110, 0.1);
+        }
+
+        .download-btn .icon {
+            font-size: 1.5rem;
+        }
+
+        /* Features */
+        .features {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 1rem;
+            margin-top: 2rem;
+        }
+
+        .feature {
+            text-align: center;
+            padding: 1.5rem;
+            background: var(--bg-card);
+            border-radius: 12px;
+            border: 1px solid var(--border);
+        }
+
+        .feature-icon {
+            font-size: 2rem;
+            margin-bottom: 0.75rem;
+        }
+
+        .feature h3 {
+            color: var(--primary-light);
+            margin-bottom: 0.5rem;
+        }
+
+        .feature p {
+            color: var(--text-muted);
+            font-size: 0.9rem;
+        }
+
+        footer {
+            text-align: center;
+            padding: 2rem;
+            color: var(--text-muted);
+            font-size: 0.9rem;
+        }
+
+        /* Tabs */
+        .tabs {
+            display: flex;
+            gap: 0.5rem;
+            margin-bottom: 1rem;
+            border-bottom: 1px solid var(--border);
+            padding-bottom: 0.5rem;
+        }
+
+        .tab {
+            padding: 0.5rem 1rem;
+            background: transparent;
+            border: none;
+            color: var(--text-muted);
+            cursor: pointer;
+            border-radius: 8px 8px 0 0;
+            transition: all 0.2s;
+        }
+
+        .tab:hover {
+            color: var(--text);
+            background: var(--bg-input);
+        }
+
+        .tab.active {
+            color: var(--primary-light);
+            background: var(--bg-input);
+            border-bottom: 2px solid var(--primary-light);
+        }
+
+        .hidden {
+            display: none !important;
+        }
+
+        @media (max-width: 768px) {
+            .container {
+                padding: 1rem;
+            }
+
+            header h1 {
+                font-size: 1.8rem;
+            }
+
+            .row, .row-3 {
+                grid-template-columns: 1fr;
+            }
+
+            .features {
+                grid-template-columns: 1fr;
+            }
+
+            .timing-inputs {
+                grid-template-columns: 1fr 1fr;
+            }
+
+            .timing-inputs .btn {
+                grid-column: span 2;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <header>
+            <div class="arabic-text">بِسْمِ اللَّهِ الرَّحْمَٰنِ الرَّحِيمِ</div>
+            <h1>Quran SRT Generator</h1>
+            <p>Generate multilingual subtitles for Quran recitation videos</p>
+        </header>
+
+        {% if not whisper_available %}
+        <div class="alert alert-warning">
+            <strong>Note:</strong> Whisper is not installed. The app will work in demo mode.
+            Install with: <code>pip install openai-whisper</code>
+        </div>
+        {% endif %}
+
+        <!-- UPLOAD SECTION -->
+        <div id="uploadSection">
+            <form id="uploadForm">
+                <div class="card">
+                    <h2>1. Select Surah & Range</h2>
+
+                    <div class="form-group">
+                        <label for="surah">Surah</label>
+                        <select id="surah" name="surah" required>
+                            <option value="">Loading surahs...</option>
+                        </select>
+                    </div>
+
+                    <div class="row">
+                        <div class="form-group">
+                            <label for="startAyah">Start Ayah</label>
+                            <input type="number" id="startAyah" name="start_ayah" value="1" min="1">
+                        </div>
+                        <div class="form-group">
+                            <label for="endAyah">End Ayah (leave empty for all)</label>
+                            <input type="number" id="endAyah" name="end_ayah" min="1">
+                        </div>
+                    </div>
+                </div>
+
+                <div class="card">
+                    <h2>2. Input Mode</h2>
+
+                    <div class="mode-selector">
+                        <label class="mode-option">
+                            <input type="radio" name="inputMode" value="video" checked>
+                            <div class="mode-card">
+                                <span class="mode-icon">🎬</span>
+                                <span class="mode-label">Video/Audio</span>
+                                <span class="mode-desc">Upload existing recitation</span>
+                            </div>
+                        </label>
+                        <label class="mode-option">
+                            <input type="radio" name="inputMode" value="image">
+                            <div class="mode-card">
+                                <span class="mode-icon">🖼️</span>
+                                <span class="mode-label">Image</span>
+                                <span class="mode-desc">Upload background image</span>
+                            </div>
+                        </label>
+                        <label class="mode-option">
+                            <input type="radio" name="inputMode" value="black">
+                            <div class="mode-card">
+                                <span class="mode-icon">⬛</span>
+                                <span class="mode-label">Black Screen</span>
+                                <span class="mode-desc">Plain black background</span>
+                            </div>
+                        </label>
+                    </div>
+
+                    <!-- Video/Audio Upload -->
+                    <div id="videoUploadArea" class="upload-section">
+                        <div class="upload-area" id="uploadArea">
+                            <div class="upload-icon">📁</div>
+                            <p>Drag & drop your video/audio file here</p>
+                            <p>or click to browse</p>
+                            <p class="file-name" id="fileName"></p>
+                            <input type="file" id="fileInput" name="file" accept=".mp4,.mkv,.avi,.mov,.webm,.mp3,.wav,.m4a">
+                        </div>
+                    </div>
+
+                    <!-- Image Upload -->
+                    <div id="imageUploadArea" class="upload-section hidden">
+                        <div class="upload-area" id="imageUpload">
+                            <div class="upload-icon">🖼️</div>
+                            <p>Drag & drop background image</p>
+                            <p>or click to browse</p>
+                            <p class="file-name" id="imageName"></p>
+                            <input type="file" id="imageInput" name="image" accept=".jpg,.jpeg,.png,.webp">
+                        </div>
+                    </div>
+
+                    <!-- Black Screen Info -->
+                    <div id="blackScreenInfo" class="upload-section hidden">
+                        <div class="info-box">
+                            <span class="info-icon">⬛</span>
+                            <p>Video will be generated with a black background</p>
+                        </div>
+                    </div>
+
+                    <!-- Audio Reciter (for image/black modes) -->
+                    <div id="reciterSection" class="hidden" style="margin-top: 1rem;">
+                        <div class="form-group">
+                            <label for="reciter">Audio Reciter</label>
+                            <select id="reciter" name="reciter">
+                                <option value="">Loading reciters...</option>
+                            </select>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="card">
+                    <h2>3. Languages</h2>
+                    <p style="color: var(--text-muted); font-size: 0.9rem; margin-bottom: 1rem;">Select which languages to include in subtitles</p>
+
+                    <div class="checkbox-group" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.75rem;">
+                        <label class="checkbox-option">
+                            <input type="checkbox" name="languages" value="arabic" checked>
+                            <span class="checkbox-label">Arabic (Original)</span>
+                        </label>
+                        <label class="checkbox-option">
+                            <input type="checkbox" name="languages" value="english" checked>
+                            <span class="checkbox-label">English (Saheeh)</span>
+                        </label>
+                        <label class="checkbox-option">
+                            <input type="checkbox" name="languages" value="turkish">
+                            <span class="checkbox-label">Turkish (Diyanet)</span>
+                        </label>
+                        <label class="checkbox-option">
+                            <input type="checkbox" name="languages" value="urdu">
+                            <span class="checkbox-label">Urdu</span>
+                        </label>
+                        <label class="checkbox-option">
+                            <input type="checkbox" name="languages" value="french">
+                            <span class="checkbox-label">French</span>
+                        </label>
+                        <label class="checkbox-option">
+                            <input type="checkbox" name="languages" value="german">
+                            <span class="checkbox-label">German</span>
+                        </label>
+                        <label class="checkbox-option">
+                            <input type="checkbox" name="languages" value="indonesian">
+                            <span class="checkbox-label">Indonesian</span>
+                        </label>
+                        <label class="checkbox-option">
+                            <input type="checkbox" name="languages" value="spanish">
+                            <span class="checkbox-label">Spanish</span>
+                        </label>
+                        <label class="checkbox-option">
+                            <input type="checkbox" name="languages" value="russian">
+                            <span class="checkbox-label">Russian</span>
+                        </label>
+                        <label class="checkbox-option">
+                            <input type="checkbox" name="languages" value="bengali">
+                            <span class="checkbox-label">Bengali</span>
+                        </label>
+                        <label class="checkbox-option">
+                            <input type="checkbox" name="languages" value="chinese">
+                            <span class="checkbox-label">Chinese</span>
+                        </label>
+                        <label class="checkbox-option">
+                            <input type="checkbox" name="languages" value="malay">
+                            <span class="checkbox-label">Malay</span>
+                        </label>
+                        <label class="checkbox-option">
+                            <input type="checkbox" name="languages" value="persian">
+                            <span class="checkbox-label">Persian/Farsi</span>
+                        </label>
+                        <label class="checkbox-option">
+                            <input type="checkbox" name="languages" value="dutch">
+                            <span class="checkbox-label">Dutch</span>
+                        </label>
+                        <label class="checkbox-option">
+                            <input type="checkbox" name="languages" value="italian">
+                            <span class="checkbox-label">Italian</span>
+                        </label>
+                        <label class="checkbox-option">
+                            <input type="checkbox" name="languages" value="portuguese">
+                            <span class="checkbox-label">Portuguese</span>
+                        </label>
+                    </div>
+                </div>
+
+                <div class="card">
+                    <h2>4. Options</h2>
+
+                    <div class="row">
+                        <div class="form-group">
+                            <label for="separator">Language Separator</label>
+                            <input type="text" id="separator" name="separator" value=" | ">
+                        </div>
+                        <div class="form-group" id="whisperModelGroup">
+                            <label for="modelSize">Whisper Model</label>
+                            <select id="modelSize" name="model_size">
+                                <option value="tiny">Tiny (Fastest)</option>
+                                <option value="base">Base (Fast)</option>
+                                <option value="small">Small (Balanced)</option>
+                                <option value="medium" selected>Medium (Recommended)</option>
+                                <option value="large">Large (Most Accurate)</option>
+                            </select>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Offline Mode -->
+                <div class="card">
+                    <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;">
+                        <div>
+                            <h2 style="margin: 0;">Offline Mode</h2>
+                            <p style="color: var(--text-muted); font-size: 0.9rem; margin-top: 0.25rem;">
+                                Download Quran data (~5-10 MB) for faster processing
+                            </p>
+                        </div>
+                        <div style="display: flex; gap: 0.75rem; align-items: center;">
+                            <label class="checkbox-option" style="margin: 0;">
+                                <input type="checkbox" id="offlineModeToggle">
+                                <span class="checkbox-label">Use Offline Only</span>
+                            </label>
+                            <button type="button" class="btn btn-secondary" id="downloadQuranBtn">
+                                Download Quran Data
+                            </button>
+                        </div>
+                    </div>
+                    <div id="cacheStatus" style="margin-top: 1rem; padding: 0.75rem; background: var(--bg-input); border-radius: 8px; display: none;">
+                        <p style="color: var(--text-muted); font-size: 0.9rem;">
+                            <span id="cacheStatusText">Checking cache...</span>
+                        </p>
+                    </div>
+                    <div id="downloadProgress" class="hidden" style="margin-top: 1rem;">
+                        <div class="progress-bar">
+                            <div class="progress-fill" id="quranProgressFill"></div>
+                        </div>
+                        <p class="progress-text" id="quranProgressText">Downloading...</p>
+                    </div>
+                </div>
+
+                <button type="submit" class="btn btn-block" id="submitBtn">
+                    Generate Subtitles
+                </button>
+
+                <div class="progress-container" id="progressContainer">
+                    <div class="progress-bar">
+                        <div class="progress-fill" id="progressFill"></div>
+                    </div>
+                    <p class="progress-text" id="progressText">Uploading...</p>
+                </div>
+            </form>
+        </div>
+
+        <!-- EDITOR SECTION -->
+        <div class="editor-section" id="editorSection">
+            <div class="card">
+                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
+                    <h2 style="margin: 0;">Edit Timing & Preview</h2>
+                    <button class="btn btn-secondary btn-sm" id="backBtn">Back to Upload</button>
+                </div>
+
+                <div class="alert alert-success" id="editorMessage"></div>
+
+                <div class="editor-layout">
+                    <!-- Video Preview -->
+                    <div class="video-preview">
+                        <div class="video-container">
+                            <video id="videoPlayer" controls>
+                                Your browser does not support the video tag.
+                            </video>
+                            <div class="subtitle-overlay" id="subtitleOverlay">
+                                <div class="arabic"></div>
+                                <div class="english"></div>
+                                <div class="turkish"></div>
+                            </div>
+                        </div>
+                        <div class="current-time" id="currentTime">00:00:00.000</div>
+                        <div class="video-controls">
+                            <button class="btn btn-sm" id="seekBack5">-5s</button>
+                            <button class="btn btn-sm" id="seekBack1">-1s</button>
+                            <button class="btn btn-sm btn-secondary" id="playPause">Play</button>
+                            <button class="btn btn-sm" id="seekForward1">+1s</button>
+                            <button class="btn btn-sm" id="seekForward5">+5s</button>
+                        </div>
+                        <div class="video-controls" style="margin-top: 0.5rem;">
+                            <button class="btn btn-sm btn-warning" id="setStartTime">Set Start</button>
+                            <button class="btn btn-sm btn-warning" id="setEndTime">Set End</button>
+                        </div>
+                    </div>
+
+                    <!-- Verse List -->
+                    <div class="timing-editor">
+                        <h3 style="margin-bottom: 1rem;">Verses (click to edit)</h3>
+                        <div class="verse-list" id="verseList">
+                            <!-- Verses will be inserted here -->
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Download Section -->
+            <div class="card download-section">
+                <div style="display: flex; justify-content: space-between; align-items: center;">
+                    <h2 style="margin: 0;">Download Subtitles</h2>
+                    <button class="btn" id="regenerateBtn">Regenerate with New Timings</button>
+                </div>
+
+                <div class="download-grid" id="downloadGrid">
+                    <!-- Downloads will be inserted here -->
+                </div>
+            </div>
+        </div>
+
+        <div class="features" id="featuresSection">
+            <div class="feature">
+                <div class="feature-icon">🌍</div>
+                <h3>3 Languages</h3>
+                <p>Arabic, English & Turkish on one line</p>
+            </div>
+            <div class="feature">
+                <div class="feature-icon">⚡</div>
+                <h3>AI-Powered</h3>
+                <p>OpenAI Whisper for accurate transcription</p>
+            </div>
+            <div class="feature">
+                <div class="feature-icon">📋</div>
+                <h3>JSON Export</h3>
+                <p>Precise timing for video editors</p>
+            </div>
+        </div>
+
+        <footer>
+            <p>Quran SRT Generator - 100% Free & Open Source</p>
+            <p>Translations from trusted sources (Saheeh International, Diyanet)</p>
+        </footer>
+    </div>
+
+    <script>
+        // ================================
+        // STATE
+        // ================================
+        let selectedFile = null;
+        let selectedImage = null;
+        let currentTaskId = null;
+        let statusPollInterval = null;
+        let verses = [];
+        let selectedVerseIndex = null;
+        let currentMode = 'video'; // 'video', 'image', 'black'
+        let surahData = {}; // Store surah info including ayah count
+
+        // ================================
+        // DOM ELEMENTS
+        // ================================
+        const uploadForm = document.getElementById('uploadForm');
+        const uploadArea = document.getElementById('uploadArea');
+        const fileInput = document.getElementById('fileInput');
+        const fileName = document.getElementById('fileName');
+        const surahSelect = document.getElementById('surah');
+        const submitBtn = document.getElementById('submitBtn');
+        const progressContainer = document.getElementById('progressContainer');
+        const progressFill = document.getElementById('progressFill');
+        const progressText = document.getElementById('progressText');
+
+        const uploadSection = document.getElementById('uploadSection');
+        const editorSection = document.getElementById('editorSection');
+        const featuresSection = document.getElementById('featuresSection');
+
+        const videoPlayer = document.getElementById('videoPlayer');
+        const subtitleOverlay = document.getElementById('subtitleOverlay');
+        const currentTimeDisplay = document.getElementById('currentTime');
+        const verseList = document.getElementById('verseList');
+        const downloadGrid = document.getElementById('downloadGrid');
+        const editorMessage = document.getElementById('editorMessage');
+
+        // Mode elements
+        const videoUploadArea = document.getElementById('videoUploadArea');
+        const imageUploadArea = document.getElementById('imageUploadArea');
+        const blackScreenInfo = document.getElementById('blackScreenInfo');
+        const reciterSection = document.getElementById('reciterSection');
+        const whisperModelGroup = document.getElementById('whisperModelGroup');
+        const reciterSelect = document.getElementById('reciter');
+        const imageUpload = document.getElementById('imageUpload');
+        const imageInput = document.getElementById('imageInput');
+        const imageName = document.getElementById('imageName');
+
+        // ================================
+        // INITIALIZATION
+        // ================================
+        async function loadSurahs() {
+            try {
+                const response = await fetch('/api/surahs');
+                const data = await response.json();
+
+                if (data.success) {
+                    surahSelect.innerHTML = '<option value="">Select a Surah</option>';
+                    data.surahs.forEach(surah => {
+                        // Store surah data for ayah validation
+                        surahData[surah.number] = {
+                            name: surah.name,
+                            englishName: surah.englishName,
+                            numberOfAyahs: surah.numberOfAyahs
+                        };
+
+                        const option = document.createElement('option');
+                        option.value = surah.number;
+                        option.textContent = `${surah.number}. ${surah.englishName} (${surah.name}) - ${surah.numberOfAyahs} ayahs`;
+                        surahSelect.appendChild(option);
+                    });
+                }
+            } catch (error) {
+                console.error('Failed to load surahs:', error);
+                surahSelect.innerHTML = '<option value="">Failed to load surahs</option>';
+            }
+        }
+
+        // Update ayah range inputs when surah is selected
+        surahSelect.addEventListener('change', () => {
+            const surahNum = parseInt(surahSelect.value);
+            const startAyah = document.getElementById('startAyah');
+            const endAyah = document.getElementById('endAyah');
+
+            if (surahNum && surahData[surahNum]) {
+                const maxAyahs = surahData[surahNum].numberOfAyahs;
+
+                // Set max values
+                startAyah.max = maxAyahs;
+                endAyah.max = maxAyahs;
+
+                // Set placeholder with max info
+                endAyah.placeholder = `Max: ${maxAyahs}`;
+
+                // Reset values if they exceed max
+                if (parseInt(startAyah.value) > maxAyahs) {
+                    startAyah.value = 1;
+                }
+                if (parseInt(endAyah.value) > maxAyahs) {
+                    endAyah.value = '';
+                }
+
+                // Validate start ayah
+                startAyah.value = Math.max(1, Math.min(parseInt(startAyah.value) || 1, maxAyahs));
+            } else {
+                startAyah.max = '';
+                endAyah.max = '';
+                endAyah.placeholder = '';
+            }
+        });
+
+        // Validate ayah inputs on change
+        document.getElementById('startAyah').addEventListener('change', (e) => {
+            const surahNum = parseInt(surahSelect.value);
+            if (surahNum && surahData[surahNum]) {
+                const max = surahData[surahNum].numberOfAyahs;
+                let val = parseInt(e.target.value) || 1;
+                e.target.value = Math.max(1, Math.min(val, max));
+            }
+        });
+
+        document.getElementById('endAyah').addEventListener('change', (e) => {
+            const surahNum = parseInt(surahSelect.value);
+            if (surahNum && surahData[surahNum]) {
+                const max = surahData[surahNum].numberOfAyahs;
+                const startVal = parseInt(document.getElementById('startAyah').value) || 1;
+                let val = parseInt(e.target.value);
+                if (val) {
+                    e.target.value = Math.max(startVal, Math.min(val, max));
+                }
+            }
+        });
+
+        async function loadReciters() {
+            try {
+                const response = await fetch('/api/reciters');
+                const data = await response.json();
+
+                if (data.success) {
+                    reciterSelect.innerHTML = '';
+                    data.reciters.forEach(reciter => {
+                        const option = document.createElement('option');
+                        option.value = reciter.identifier;
+                        option.textContent = reciter.style
+                            ? `${reciter.englishName} (${reciter.style})`
+                            : reciter.englishName;
+                        reciterSelect.appendChild(option);
+                    });
+                }
+            } catch (error) {
+                console.error('Failed to load reciters:', error);
+                reciterSelect.innerHTML = '<option value="ar.alafasy">Mishary Alafasy</option>';
+            }
+        }
+
+        // ================================
+        // MODE SWITCHING
+        // ================================
+        document.querySelectorAll('input[name="inputMode"]').forEach(radio => {
+            radio.addEventListener('change', (e) => {
+                currentMode = e.target.value;
+                updateModeUI();
+            });
+        });
+
+        function updateModeUI() {
+            // Hide all upload areas
+            videoUploadArea.classList.add('hidden');
+            imageUploadArea.classList.add('hidden');
+            blackScreenInfo.classList.add('hidden');
+            reciterSection.classList.add('hidden');
+            whisperModelGroup.classList.remove('hidden');
+
+            // Show relevant area based on mode
+            if (currentMode === 'video') {
+                videoUploadArea.classList.remove('hidden');
+            } else if (currentMode === 'image') {
+                imageUploadArea.classList.remove('hidden');
+                reciterSection.classList.remove('hidden');
+                whisperModelGroup.classList.add('hidden');
+            } else if (currentMode === 'black') {
+                blackScreenInfo.classList.remove('hidden');
+                reciterSection.classList.remove('hidden');
+                whisperModelGroup.classList.add('hidden');
+            }
+        }
+
+        // ================================
+        // FILE UPLOAD (Video/Audio)
+        // ================================
+        uploadArea.addEventListener('click', () => fileInput.click());
+
+        uploadArea.addEventListener('dragover', (e) => {
+            e.preventDefault();
+            uploadArea.classList.add('dragover');
+        });
+
+        uploadArea.addEventListener('dragleave', () => {
+            uploadArea.classList.remove('dragover');
+        });
+
+        uploadArea.addEventListener('drop', (e) => {
+            e.preventDefault();
+            uploadArea.classList.remove('dragover');
+            const files = e.dataTransfer.files;
+            if (files.length > 0) {
+                handleFile(files[0]);
+            }
+        });
+
+        fileInput.addEventListener('change', (e) => {
+            if (e.target.files.length > 0) {
+                handleFile(e.target.files[0]);
+            }
+        });
+
+        function handleFile(file) {
+            selectedFile = file;
+            fileName.textContent = file.name;
+            uploadArea.classList.add('has-file');
+        }
+
+        // ================================
+        // IMAGE UPLOAD
+        // ================================
+        imageUpload.addEventListener('click', () => imageInput.click());
+
+        imageUpload.addEventListener('dragover', (e) => {
+            e.preventDefault();
+            imageUpload.classList.add('dragover');
+        });
+
+        imageUpload.addEventListener('dragleave', () => {
+            imageUpload.classList.remove('dragover');
+        });
+
+        imageUpload.addEventListener('drop', (e) => {
+            e.preventDefault();
+            imageUpload.classList.remove('dragover');
+            const files = e.dataTransfer.files;
+            if (files.length > 0) {
+                handleImage(files[0]);
+            }
+        });
+
+        imageInput.addEventListener('change', (e) => {
+            if (e.target.files.length > 0) {
+                handleImage(e.target.files[0]);
+            }
+        });
+
+        function handleImage(file) {
+            selectedImage = file;
+            imageName.textContent = file.name;
+            imageUpload.classList.add('has-file');
+        }
+
+        // ================================
+        // LANGUAGE SELECTION
+        // ================================
+        function getSelectedLanguages() {
+            const languages = [];
+            document.querySelectorAll('input[name="languages"]:checked').forEach(cb => {
+                languages.push(cb.value);
+            });
+            return languages;
+        }
+
+        // ================================
+        // OFFLINE MODE & CACHE
+        // ================================
+        async function checkCacheStatus() {
+            try {
+                const response = await fetch('/api/cache-status');
+                const data = await response.json();
+
+                if (data.success) {
+                    const cacheDiv = document.getElementById('cacheStatus');
+                    const cacheText = document.getElementById('cacheStatusText');
+                    const offlineToggle = document.getElementById('offlineModeToggle');
+
+                    cacheDiv.style.display = 'block';
+                    offlineToggle.checked = data.offline_mode;
+
+                    if (data.cache.is_complete) {
+                        cacheText.innerHTML = `<span style="color: var(--success);">All 114 surahs cached.</span> Ready for offline use.`;
+                    } else if (data.cache.total_cached > 0) {
+                        cacheText.innerHTML = `${data.cache.total_cached}/114 surahs cached. <a href="#" onclick="event.preventDefault(); document.getElementById('downloadQuranBtn').click();">Download remaining</a>`;
+                    } else {
+                        cacheText.innerHTML = `No data cached. <a href="#" onclick="event.preventDefault(); document.getElementById('downloadQuranBtn').click();">Download for offline use</a>`;
+                    }
+                }
+            } catch (error) {
+                console.error('Failed to check cache status:', error);
+            }
+        }
+
+        // Toggle offline mode
+        document.getElementById('offlineModeToggle').addEventListener('change', async (e) => {
+            const enabled = e.target.checked;
+            try {
+                const response = await fetch(`/api/offline-mode?enabled=${enabled}`, { method: 'POST' });
+                const data = await response.json();
+
+                if (!data.success) {
+                    e.target.checked = !enabled; // Revert
+                    alert('Failed to toggle offline mode');
+                }
+            } catch (error) {
+                e.target.checked = !enabled; // Revert
+                console.error('Failed to toggle offline mode:', error);
+            }
+        });
+
+        document.getElementById('downloadQuranBtn').addEventListener('click', async () => {
+            const btn = document.getElementById('downloadQuranBtn');
+            const progress = document.getElementById('downloadProgress');
+            const progressFill = document.getElementById('quranProgressFill');
+            const progressText = document.getElementById('quranProgressText');
+
+            btn.disabled = true;
+            btn.textContent = 'Downloading...';
+            progress.classList.remove('hidden');
+
+            try {
+                const response = await fetch('/api/download-quran', { method: 'POST' });
+                const data = await response.json();
+
+                if (data.success) {
+                    // Poll for progress
+                    let percent = 0;
+                    const interval = setInterval(() => {
+                        percent += 2;
+                        if (percent >= 100) {
+                            clearInterval(interval);
+                            progressFill.style.width = '100%';
+                            progressText.textContent = 'Download complete!';
+                            btn.textContent = 'Downloaded';
+                            // Refresh cache status
+                            setTimeout(checkCacheStatus, 1000);
+                        } else {
+                            progressFill.style.width = percent + '%';
+                            progressText.textContent = `Downloading... ${percent}%`;
+                        }
+                    }, 500);
+                }
+            } catch (error) {
+                progressText.textContent = 'Error: ' + error.message;
+                btn.disabled = false;
+                btn.textContent = 'Retry Download';
+            }
+        });
+
+        // ================================
+        // FORM SUBMISSION
+        // ================================
+        uploadForm.addEventListener('submit', async (e) => {
+            e.preventDefault();
+
+            const languages = getSelectedLanguages();
+            if (languages.length === 0) {
+                alert('Please select at least one language');
+                return;
+            }
+
+            // Validate based on mode
+            if (currentMode === 'video' && !selectedFile) {
+                alert('Please select a video or audio file');
+                return;
+            }
+            if (currentMode === 'image' && !selectedImage) {
+                alert('Please select a background image');
+                return;
+            }
+
+            if (!surahSelect.value) {
+                alert('Please select a surah');
+                return;
+            }
+
+            const formData = new FormData();
+            formData.append('mode', currentMode);
+            formData.append('surah', surahSelect.value);
+            formData.append('start_ayah', document.getElementById('startAyah').value || 1);
+            formData.append('end_ayah', document.getElementById('endAyah').value || '');
+            formData.append('separator', document.getElementById('separator').value);
+            formData.append('languages', JSON.stringify(languages));
+
+            if (currentMode === 'video') {
+                formData.append('file', selectedFile);
+                formData.append('model_size', document.getElementById('modelSize').value);
+            } else if (currentMode === 'image') {
+                formData.append('image', selectedImage);
+                formData.append('reciter', reciterSelect.value);
+            } else if (currentMode === 'black') {
+                formData.append('reciter', reciterSelect.value);
+            }
+
+            submitBtn.disabled = true;
+            progressContainer.classList.add('show');
+            updateProgress(0, currentMode === 'video' ? 'Uploading file...' : 'Starting...');
+
+            try {
+                const uploadResponse = await fetch('/api/upload', {
+                    method: 'POST',
+                    body: formData
+                });
+                const uploadData = await uploadResponse.json();
+
+                if (!uploadData.success) {
+                    throw new Error(uploadData.message || 'Upload failed');
+                }
+
+                currentTaskId = uploadData.task_id;
+                updateProgress(5, 'File uploaded. Starting processing...');
+
+                const processResponse = await fetch(`/api/process/${currentTaskId}`, {
+                    method: 'POST'
+                });
+                const processData = await processResponse.json();
+
+                if (!processData.success) {
+                    throw new Error(processData.message || 'Failed to start processing');
+                }
+
+                startStatusPolling();
+
+            } catch (error) {
+                console.error('Error:', error);
+                updateProgress(0, `Error: ${error.message}`);
+                submitBtn.disabled = false;
+            }
+        });
+
+        function startStatusPolling() {
+            statusPollInterval = setInterval(async () => {
+                try {
+                    const response = await fetch(`/api/status/${currentTaskId}`);
+                    const status = await response.json();
+
+                    updateProgress(status.progress, status.message);
+
+                    if (status.status === 'completed') {
+                        clearInterval(statusPollInterval);
+                        showEditor(status);
+                    } else if (status.status === 'error') {
+                        clearInterval(statusPollInterval);
+                        updateProgress(0, `Error: ${status.error}`);
+                        submitBtn.disabled = false;
+                    }
+                } catch (error) {
+                    console.error('Status poll error:', error);
+                }
+            }, 1000);
+        }
+
+        function updateProgress(percent, message) {
+            progressFill.style.width = `${percent}%`;
+            progressText.textContent = message;
+        }
+
+        // ================================
+        // EDITOR
+        // ================================
+        function showEditor(status) {
+            uploadSection.classList.add('hidden');
+            featuresSection.classList.add('hidden');
+            editorSection.classList.add('show');
+            progressContainer.classList.remove('show');
+            submitBtn.disabled = false;
+
+            editorMessage.textContent = status.message;
+            verses = status.verses || [];
+
+            // Check if video is available
+            const settings = status.settings || {};
+            const videoPreview = document.querySelector('.video-preview');
+            const hasVideo = status.video_file || (settings.mode === 'video' && settings.file_path);
+            const hasGeneratedVideo = status.output_files && status.output_files.video;
+
+            // Reset video preview HTML
+            videoPreview.innerHTML = `
+                <div class="video-container">
+                    <video id="videoPlayer" controls>
+                        Your browser does not support the video tag.
+                    </video>
+                    <div class="subtitle-overlay" id="subtitleOverlay">
+                        <div class="arabic"></div>
+                        <div class="english"></div>
+                        <div class="turkish"></div>
+                    </div>
+                </div>
+                <div class="current-time" id="currentTime">00:00:00.000</div>
+                <div class="video-controls">
+                    <button class="btn btn-sm" id="seekBack5">-5s</button>
+                    <button class="btn btn-sm" id="seekBack1">-1s</button>
+                    <button class="btn btn-sm btn-secondary" id="playPause">Play</button>
+                    <button class="btn btn-sm" id="seekForward1">+1s</button>
+                    <button class="btn btn-sm" id="seekForward5">+5s</button>
+                </div>
+                <div class="video-controls" style="margin-top: 0.5rem;">
+                    <button class="btn btn-sm btn-warning" id="setStartTime">Set Start</button>
+                    <button class="btn btn-sm btn-warning" id="setEndTime">Set End</button>
+                </div>
+            `;
+
+            // Re-bind video player reference
+            const newVideoPlayer = document.getElementById('videoPlayer');
+
+            if (hasVideo || hasGeneratedVideo) {
+                // Load video
+                newVideoPlayer.src = `/api/video/${currentTaskId}`;
+                videoPreview.style.display = 'block';
+
+                // Re-setup video event listeners
+                setupVideoControls(newVideoPlayer);
+            } else {
+                // No video available
+                videoPreview.innerHTML = `
+                    <div style="background: var(--bg-input); border-radius: 12px; padding: 3rem; text-align: center;">
+                        <div style="font-size: 3rem; margin-bottom: 1rem;">📋</div>
+                        <p style="color: var(--text-muted);">Video is being generated...</p>
+                        <p style="color: var(--text-muted); font-size: 0.9rem; margin-top: 0.5rem;">If audio download failed, edit timing manually.</p>
+                    </div>
+                `;
+            }
+
+            // Render verse list
+            renderVerseList();
+
+            // Setup download buttons based on selected languages and video availability
+            setupDownloadButtons(settings.languages || ['arabic', 'english', 'turkish'], hasGeneratedVideo);
+        }
+
+        function setupVideoControls(player) {
+            // Time update
+            player.addEventListener('timeupdate', () => {
+                const time = player.currentTime;
+                const hours = Math.floor(time / 3600);
+                const minutes = Math.floor((time % 3600) / 60);
+                const seconds = Math.floor(time % 60);
+                const ms = Math.floor((time % 1) * 1000);
+                document.getElementById('currentTime').textContent =
+                    `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}.${ms.toString().padStart(3, '0')}`;
+
+                updateSubtitleOverlay(time);
+                highlightActiveVerse(time);
+            });
+
+            // Control buttons
+            document.getElementById('playPause').onclick = () => {
+                if (player.paused) {
+                    player.play();
+                    document.getElementById('playPause').textContent = 'Pause';
+                } else {
+                    player.pause();
+                    document.getElementById('playPause').textContent = 'Play';
+                }
+            };
+
+            document.getElementById('seekBack5').onclick = () => {
+                player.currentTime = Math.max(0, player.currentTime - 5);
+            };
+            document.getElementById('seekBack1').onclick = () => {
+                player.currentTime = Math.max(0, player.currentTime - 1);
+            };
+            document.getElementById('seekForward1').onclick = () => {
+                player.currentTime = Math.min(player.duration, player.currentTime + 1);
+            };
+            document.getElementById('seekForward5').onclick = () => {
+                player.currentTime = Math.min(player.duration, player.currentTime + 5);
+            };
+
+            document.getElementById('setStartTime').onclick = () => {
+                if (selectedVerseIndex !== null) {
+                    verses[selectedVerseIndex].start_time = player.currentTime;
+                    const input = document.querySelector(`input[data-index="${selectedVerseIndex}"][data-field="start_time"]`);
+                    if (input) input.value = player.currentTime.toFixed(3);
+                } else {
+                    alert('Please select a verse first');
+                }
+            };
+
+            document.getElementById('setEndTime').onclick = () => {
+                if (selectedVerseIndex !== null) {
+                    verses[selectedVerseIndex].end_time = player.currentTime;
+                    const input = document.querySelector(`input[data-index="${selectedVerseIndex}"][data-field="end_time"]`);
+                    if (input) input.value = player.currentTime.toFixed(3);
+                } else {
+                    alert('Please select a verse first');
+                }
+            };
+        }
+
+        function renderVerseList() {
+            verseList.innerHTML = '';
+
+            verses.forEach((verse, index) => {
+                const item = document.createElement('div');
+                item.className = 'verse-item';
+                item.dataset.index = index;
+
+                item.innerHTML = `
+                    <div class="verse-header">
+                        <span class="verse-number">Ayah ${verse.ayah}</span>
+                        <span class="verse-confidence">${(verse.confidence * 100).toFixed(0)}% match</span>
+                    </div>
+                    <div class="verse-text">${verse.arabic}</div>
+                    <div class="verse-translation">${verse.english}</div>
+                    <div class="timing-inputs">
+                        <div>
+                            <label>Start (seconds)</label>
+                            <input type="number" step="0.001" value="${verse.start_time.toFixed(3)}"
+                                   data-field="start_time" data-index="${index}">
+                        </div>
+                        <div>
+                            <label>End (seconds)</label>
+                            <input type="number" step="0.001" value="${verse.end_time.toFixed(3)}"
+                                   data-field="end_time" data-index="${index}">
+                        </div>
+                        <button class="btn btn-sm" onclick="jumpToVerse(${index})">Jump</button>
+                    </div>
+                `;
+
+                item.addEventListener('click', (e) => {
+                    if (e.target.tagName !== 'INPUT' && e.target.tagName !== 'BUTTON') {
+                        selectVerse(index);
+                    }
+                });
+
+                // Input change handlers
+                item.querySelectorAll('input').forEach(input => {
+                    input.addEventListener('change', (e) => {
+                        const idx = parseInt(e.target.dataset.index);
+                        const field = e.target.dataset.field;
+                        verses[idx][field] = parseFloat(e.target.value);
+                    });
+                });
+
+                verseList.appendChild(item);
+            });
+        }
+
+        function selectVerse(index) {
+            selectedVerseIndex = index;
+
+            // Update UI
+            document.querySelectorAll('.verse-item').forEach((item, i) => {
+                item.classList.toggle('editing', i === index);
+            });
+
+            // Jump to verse
+            jumpToVerse(index);
+        }
+
+        function jumpToVerse(index) {
+            if (verses[index]) {
+                videoPlayer.currentTime = verses[index].start_time;
+            }
+        }
+
+        // ================================
+        // VIDEO PLAYER
+        // ================================
+        videoPlayer.addEventListener('timeupdate', () => {
+            const time = videoPlayer.currentTime;
+
+            // Update time display
+            const hours = Math.floor(time / 3600);
+            const minutes = Math.floor((time % 3600) / 60);
+            const seconds = Math.floor(time % 60);
+            const ms = Math.floor((time % 1) * 1000);
+            currentTimeDisplay.textContent =
+                `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}.${ms.toString().padStart(3, '0')}`;
+
+            // Update subtitle overlay
+            updateSubtitleOverlay(time);
+
+            // Highlight active verse
+            highlightActiveVerse(time);
+        });
+
+        function updateSubtitleOverlay(time) {
+            const activeVerse = verses.find(v => time >= v.start_time && time <= v.end_time);
+
+            if (activeVerse) {
+                subtitleOverlay.style.display = 'block';
+                subtitleOverlay.querySelector('.arabic').textContent = activeVerse.arabic;
+                subtitleOverlay.querySelector('.english').textContent = activeVerse.english;
+                subtitleOverlay.querySelector('.turkish').textContent = activeVerse.turkish;
+            } else {
+                subtitleOverlay.style.display = 'none';
+            }
+        }
+
+        function highlightActiveVerse(time) {
+            document.querySelectorAll('.verse-item').forEach((item, index) => {
+                const verse = verses[index];
+                const isActive = time >= verse.start_time && time <= verse.end_time;
+                item.classList.toggle('active', isActive);
+            });
+        }
+
+        // Video controls
+        document.getElementById('playPause').addEventListener('click', () => {
+            if (videoPlayer.paused) {
+                videoPlayer.play();
+                document.getElementById('playPause').textContent = 'Pause';
+            } else {
+                videoPlayer.pause();
+                document.getElementById('playPause').textContent = 'Play';
+            }
+        });
+
+        document.getElementById('seekBack5').addEventListener('click', () => {
+            videoPlayer.currentTime = Math.max(0, videoPlayer.currentTime - 5);
+        });
+
+        document.getElementById('seekBack1').addEventListener('click', () => {
+            videoPlayer.currentTime = Math.max(0, videoPlayer.currentTime - 1);
+        });
+
+        document.getElementById('seekForward1').addEventListener('click', () => {
+            videoPlayer.currentTime = Math.min(videoPlayer.duration, videoPlayer.currentTime + 1);
+        });
+
+        document.getElementById('seekForward5').addEventListener('click', () => {
+            videoPlayer.currentTime = Math.min(videoPlayer.duration, videoPlayer.currentTime + 5);
+        });
+
+        document.getElementById('setStartTime').addEventListener('click', () => {
+            if (selectedVerseIndex !== null) {
+                verses[selectedVerseIndex].start_time = videoPlayer.currentTime;
+                const input = document.querySelector(`input[data-index="${selectedVerseIndex}"][data-field="start_time"]`);
+                if (input) input.value = videoPlayer.currentTime.toFixed(3);
+            } else {
+                alert('Please select a verse first');
+            }
+        });
+
+        document.getElementById('setEndTime').addEventListener('click', () => {
+            if (selectedVerseIndex !== null) {
+                verses[selectedVerseIndex].end_time = videoPlayer.currentTime;
+                const input = document.querySelector(`input[data-index="${selectedVerseIndex}"][data-field="end_time"]`);
+                if (input) input.value = videoPlayer.currentTime.toFixed(3);
+            } else {
+                alert('Please select a verse first');
+            }
+        });
+
+        // ================================
+        // REGENERATE & DOWNLOAD
+        // ================================
+        document.getElementById('regenerateBtn').addEventListener('click', async () => {
+            const btn = document.getElementById('regenerateBtn');
+            btn.disabled = true;
+            btn.textContent = 'Regenerating...';
+
+            try {
+                // Update verses on server
+                const updates = verses.map((v, i) => ({
+                    index: i,
+                    start_time: v.start_time,
+                    end_time: v.end_time
+                }));
+
+                await fetch(`/api/verses/${currentTaskId}/update`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ verses: updates })
+                });
+
+                // Regenerate files
+                const response = await fetch(`/api/regenerate/${currentTaskId}`, {
+                    method: 'POST'
+                });
+                const data = await response.json();
+
+                if (data.success) {
+                    editorMessage.textContent = 'Subtitles regenerated with updated timings!';
+                    editorMessage.className = 'alert alert-success';
+                } else {
+                    throw new Error(data.message || 'Regeneration failed');
+                }
+
+            } catch (error) {
+                editorMessage.textContent = `Error: ${error.message}`;
+                editorMessage.className = 'alert alert-error';
+            } finally {
+                btn.disabled = false;
+                btn.textContent = 'Regenerate with New Timings';
+            }
+        });
+
+        function setupDownloadButtons(languages, hasVideo = false) {
+            downloadGrid.innerHTML = '';
+
+            // Language display names and icons
+            const langInfo = {
+                'arabic': { label: 'Arabic', icon: 'AR' },
+                'english': { label: 'English', icon: 'EN' },
+                'turkish': { label: 'Turkish', icon: 'TR' },
+                'urdu': { label: 'Urdu', icon: 'UR' },
+                'french': { label: 'French', icon: 'FR' },
+                'german': { label: 'German', icon: 'DE' },
+                'indonesian': { label: 'Indonesian', icon: 'ID' },
+                'spanish': { label: 'Spanish', icon: 'ES' },
+                'russian': { label: 'Russian', icon: 'RU' },
+                'bengali': { label: 'Bengali', icon: 'BN' },
+                'chinese': { label: 'Chinese', icon: 'ZH' },
+                'malay': { label: 'Malay', icon: 'MS' },
+                'persian': { label: 'Persian', icon: 'FA' },
+                'dutch': { label: 'Dutch', icon: 'NL' },
+                'italian': { label: 'Italian', icon: 'IT' },
+                'portuguese': { label: 'Portuguese', icon: 'PT' }
+            };
+
+            const files = [];
+
+            // Add video download if available
+            if (hasVideo) {
+                files.push({
+                    id: 'video',
+                    label: 'Download Video',
+                    icon: '🎬',
+                    desc: 'MP4 with subtitles',
+                    highlight: true
+                });
+            }
+
+            files.push({ id: 'srt_combined', label: 'Combined SRT', icon: '📄', desc: `All ${languages.length} languages` });
+
+            // Add individual language SRT downloads
+            languages.forEach(lang => {
+                const info = langInfo[lang] || { label: lang, icon: lang.substring(0, 2).toUpperCase() };
+                files.push({
+                    id: `srt_${lang}`,
+                    label: `${info.label} SRT`,
+                    icon: info.icon,
+                    desc: `${info.label} only`
+                });
+            });
+
+            // Add JSON timing file
+            files.push({ id: 'json', label: 'JSON Timing', icon: '⏱️', desc: 'For video editors' });
+
+            files.forEach(file => {
+                const btn = document.createElement('a');
+                btn.href = `/api/download/${currentTaskId}/${file.id}`;
+                btn.className = 'download-btn' + (file.highlight ? ' highlight' : '');
+                btn.innerHTML = `
+                    <span class="icon">${file.icon}</span>
+                    <div>
+                        <strong>${file.label}</strong>
+                        <br><small>${file.desc}</small>
+                    </div>
+                `;
+                if (file.highlight) {
+                    btn.style.background = 'linear-gradient(135deg, var(--primary), var(--primary-dark))';
+                    btn.style.color = 'white';
+                }
+                downloadGrid.appendChild(btn);
+            });
+        }
+
+        // ================================
+        // BACK BUTTON
+        // ================================
+        document.getElementById('backBtn').addEventListener('click', () => {
+            if (confirm('Are you sure? Your edited timings will be lost.')) {
+                editorSection.classList.remove('show');
+                uploadSection.classList.remove('hidden');
+                featuresSection.classList.remove('hidden');
+
+                // Cleanup
+                fetch(`/api/task/${currentTaskId}`, { method: 'DELETE' });
+                currentTaskId = null;
+                verses = [];
+                selectedVerseIndex = null;
+                videoPlayer.src = '';
+            }
+        });
+
+        // ================================
+        // KEYBOARD SHORTCUTS
+        // ================================
+        document.addEventListener('keydown', (e) => {
+            if (editorSection.classList.contains('show') && !e.target.matches('input')) {
+                switch(e.key) {
+                    case ' ':
+                        e.preventDefault();
+                        document.getElementById('playPause').click();
+                        break;
+                    case 'ArrowLeft':
+                        e.preventDefault();
+                        videoPlayer.currentTime -= e.shiftKey ? 5 : 1;
+                        break;
+                    case 'ArrowRight':
+                        e.preventDefault();
+                        videoPlayer.currentTime += e.shiftKey ? 5 : 1;
+                        break;
+                    case 'ArrowUp':
+                        e.preventDefault();
+                        if (selectedVerseIndex > 0) selectVerse(selectedVerseIndex - 1);
+                        break;
+                    case 'ArrowDown':
+                        e.preventDefault();
+                        if (selectedVerseIndex < verses.length - 1) selectVerse(selectedVerseIndex + 1);
+                        break;
+                    case 's':
+                        if (e.ctrlKey || e.metaKey) {
+                            e.preventDefault();
+                            document.getElementById('regenerateBtn').click();
+                        } else {
+                            document.getElementById('setStartTime').click();
+                        }
+                        break;
+                    case 'e':
+                        document.getElementById('setEndTime').click();
+                        break;
+                }
+            }
+        });
+
+        // ================================
+        // INITIALIZE
+        // ================================
+        loadSurahs();
+        loadReciters();
+        updateModeUI();
+        checkCacheStatus();
+    </script>
+</body>
+</html>