Update app.py

app.py

@@ -2,53 +2,76 @@ import os
 import shutil
 import subprocess
 import uuid
+import json
+import asyncio
 from datetime import timedelta
-from fastapi import FastAPI, UploadFile, File
+from typing import List, Optional
+from fastapi import FastAPI, UploadFile, File, Form, Body, HTTPException
 from fastapi.responses import HTMLResponse, FileResponse, JSONResponse
+from fastapi.middleware.cors import CORSMiddleware
 from faster_whisper import WhisperModel
 from pydantic import BaseModel
-from typing import List
 
-app = FastAPI()
+# ==========================================
+# 1. CONFIGURATION & AI SETUP
+# ==========================================
 
-# --- تنظیمات سیستم ---
+app = FastAPI(title="AI Subtitle Studio Pro")
+
+# CORS Setup
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+# Paths
 TEMP_DIR = "temp"
 os.makedirs(TEMP_DIR, exist_ok=True)
 
-# لود مدل هوش مصنوعی
-print("⏳ Loading AI Model...")
+# Load Model (Global)
+print("⚡ [SYSTEM] Initializing AI Neural Network...")
 model = WhisperModel("small", device="cpu", compute_type="int8")
-print("✅ AI Model Loaded!")
+print("✅ [SYSTEM] AI Core Ready.")
 
-# --- مدل‌های ورودی ---
-class Segment(BaseModel):
+# ==========================================
+# 2. DATA MODELS
+# ==========================================
+
+class SubtitleSegment(BaseModel):
+    id: int
     start: float
     end: float
     text: str
 
-class StyleOptions(BaseModel):
+class StyleConfig(BaseModel):
     font: str
-    font_size: int
-    primary_color: str
-    outline_color: str
-    back_type: str
-    outline_width: float
-    margin_v: int
-
-class BurnPayload(BaseModel):
+    fontSize: int
+    primaryColor: str
+    outlineColor: str
+    backType: str  # 'solid', 'transparent', 'outline'
+    outlineWidth: float
+    marginV: int
+    alignment: int # 2=Bottom, 5=Top, 10=Center
+
+class ProcessRequest(BaseModel):
     file_id: str
-    style: StyleOptions
-    segments: List[Segment]
+    segments: List[SubtitleSegment]
+    style: StyleConfig
 
-# --- توابع تبدیل ---
+# ==========================================
+# 3. UTILITY FUNCTIONS
+# ==========================================
 
-def hex_to_ass_color(hex_color, alpha="00"):
+def hex_to_ass(hex_color, alpha="00"):
+    """Converts HEX #RRGGBB to ASS &HABGR"""
     hex_color = hex_color.lstrip('#')
     if len(hex_color) != 6: return "&H00FFFFFF"
     r, g, b = hex_color[0:2], hex_color[2:4], hex_color[4:6]
     return f"&H{alpha}{b}{g}{r}"
 
-def format_timestamp(seconds: float):
+def format_time_ass(seconds: float):
     td = timedelta(seconds=seconds)
     total_seconds = int(td.total_seconds())
     hours = total_seconds // 3600
@@ -57,372 +80,715 @@ def format_timestamp(seconds: float):
     centisecs = int(td.microseconds / 10000)
     return f"{hours:01d}:{minutes:02d}:{secs:02d}.{centisecs:02d}"
 
-def generate_ass_header(style: StyleOptions):
-    font_name = "Vazirmatn" if style.font == "vazir" else "Lalezar"
-    primary_c = hex_to_ass_color(style.primary_color, "00")
+def generate_ass_file(data: ProcessRequest, output_path: str):
+    s = data.style
+    
+    # Mapping fonts
+    font_map = {"vazir": "Vazirmatn", "lalezar": "Lalezar"}
+    font_name = font_map.get(s.font, "Arial")
     
-    border_style = "1"
+    # Colors
+    primary = hex_to_ass(s.primaryColor)
+    outline = hex_to_ass(s.outlineColor)
+    
+    # Background Logic
+    border_style = 1
     back_color = "&H00000000"
-    outline_c = hex_to_ass_color(style.outline_color, "00")
     
-    if style.back_type == "box_transparent":
-        border_style = "3"
-        outline_c = "&H80000000"
-    elif style.back_type == "box_solid":
-        border_style = "3"
-        outline_c = hex_to_ass_color(style.outline_color, "00")
-
+    if s.backType == 'solid':
+        border_style = 3 # Opaque Box
+        outline = hex_to_ass(s.outlineColor, "00") # Fully Opaque
+    elif s.backType == 'transparent':
+        border_style = 3
+        outline = "&H80000000" # 50% Transparent Black
+    else: # Outline only
+        border_style = 1
+        
     header = f"""[Script Info]
 ScriptType: v4.00+
 PlayResX: 1080
 PlayResY: 1920
-WrapStyle: 0
+WrapStyle: 1
 
 [V4+ Styles]
 Format: Name, Fontname, Fontsize, PrimaryColour, SecondaryColour, OutlineColour, BackColour, Bold, Italic, Underline, StrikeOut, ScaleX, ScaleY, Spacing, Angle, BorderStyle, Outline, Shadow, Alignment, MarginL, MarginR, MarginV, Encoding
-Style: Default,{font_name},{style.font_size},{primary_c},&H000000FF,{outline_c},{back_color},1,0,0,0,100,100,0,0,{border_style},{style.outline_width},0,2,10,10,{style.margin_v},1
+Style: Default,{font_name},{s.fontSize},{primary},&H000000FF,{outline},{back_color},1,0,0,0,100,100,0,0,{border_style},{s.outlineWidth},0,{s.alignment},10,10,{s.marginV},1
 
 [Events]
 Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
 """
-    return header
-
-def create_ass_file(payload: BurnPayload, output_path):
-    content = generate_ass_header(payload.style)
     with open(output_path, "w", encoding="utf-8") as f:
-        f.write(content)
-        for seg in payload.segments:
-            start = format_timestamp(seg.start)
-            end = format_timestamp(seg.end)
-            clean_text = seg.text.strip().replace("\n", " ")
+        f.write(header)
+        for seg in data.segments:
+            start = format_time_ass(seg.start)
+            end = format_time_ass(seg.end)
+            # Clean text for ASS
+            clean_text = seg.text.strip().replace("\n", "\\N")
             f.write(f"Dialogue: 0,{start},{end},Default,,0,0,0,,{clean_text}\n")
 
-# --- API Endpoints ---
+# ==========================================
+# 4. API ENDPOINTS
+# ==========================================
 
-@app.post("/api/upload")
-async def upload_video(file: UploadFile = File(...)):
+@app.post("/api/analyze")
+async def analyze_media(file: UploadFile = File(...)):
     try:
-        file_id = str(uuid.uuid4())[:8]
-        file_path = f"{TEMP_DIR}/{file_id}_raw.mp4"
-        with open(file_path, "wb") as f: shutil.copyfileobj(file.file, f)
+        file_id = str(uuid.uuid4())[:12]
+        file_ext = file.filename.split('.')[-1]
+        input_path = f"{TEMP_DIR}/{file_id}.{file_ext}"
+        
+        with open(input_path, "wb") as f:
+            shutil.copyfileobj(file.file, f)
+            
+        # Whisper Transcribe
+        segments_gen, _ = model.transcribe(input_path, language="fa", beam_size=5)
         
-        segments_gen, _ = model.transcribe(file_path, language="fa", beam_size=5)
-        segments = [{"start": s.start, "end": s.end, "text": s.text.strip()} for s in segments_gen]
+        results = []
+        for idx, seg in enumerate(segments_gen):
+            results.append({
+                "id": idx,
+                "start": seg.start,
+                "end": seg.end,
+                "text": seg.text.strip()
+            })
             
-        return {"file_id": file_id, "segments": segments}
+        return {"status": "success", "file_id": file_id, "ext": file_ext, "segments": results}
+        
     except Exception as e:
         return JSONResponse(status_code=500, content={"error": str(e)})
 
-@app.post("/api/burn")
-async def burn_video(payload: BurnPayload):
+@app.post("/api/render")
+async def render_video(data: ProcessRequest):
     try:
-        input_path = f"{TEMP_DIR}/{payload.file_id}_raw.mp4"
-        ass_path = f"{TEMP_DIR}/{payload.file_id}.ass"
-        output_path = f"{TEMP_DIR}/{payload.file_id}_final.mp4"
+        # Input paths
+        # We need to find the original file extension since we only have ID
+        # Simple hack: check common extensions
+        exts = ["mp4", "mov", "avi", "mkv", "mp3"]
+        input_path = None
+        for ext in exts:
+            test_path = f"{TEMP_DIR}/{data.file_id}.{ext}"
+            if os.path.exists(test_path):
+                input_path = test_path
+                break
         
-        if not os.path.exists(input_path):
-            return JSONResponse(status_code=404, content={"error": "فایل منقضی شده است."})
+        if not input_path:
+            return JSONResponse(status_code=404, content={"error": "Source file lost"})
             
-        create_ass_file(payload, ass_path)
+        ass_path = f"{TEMP_DIR}/{data.file_id}.ass"
+        output_path = f"{TEMP_DIR}/{data.file_id}_final.mp4"
+        
+        # 1. Generate ASS
+        generate_ass_file(data, ass_path)
         
+        # 2. FFmpeg Burn
         cmd = [
-            "ffmpeg", "-y", "-i", input_path, "-vf", f"ass={ass_path}",
-            "-c:v", "libx264", "-preset", "ultrafast", "-crf", "26", "-c:a", "copy", output_path
+            "ffmpeg", "-y",
+            "-i", input_path,
+            "-vf", f"ass={ass_path}",
+            "-c:v", "libx264", "-preset", "ultrafast", "-crf", "26",
+            "-c:a", "aac",
+            output_path
         ]
-        subprocess.run(cmd, check=True)
-        return {"url": f"/download/{payload.file_id}_final.mp4"}
+        subprocess.run(cmd, check=True, stdout=subprocess.DEVNULL, stderr=subprocess.DEVNULL)
+        
+        return {"status": "done", "url": f"/download/{data.file_id}_final.mp4"}
+        
     except Exception as e:
         return JSONResponse(status_code=500, content={"error": str(e)})
 
 @app.get("/download/{filename}")
-async def download(filename: str):
+async def get_file(filename: str):
     path = f"{TEMP_DIR}/{filename}"
-    if os.path.exists(path): return FileResponse(path)
-    return JSONResponse(status_code=404, content={"error": "File not found"})
+    if os.path.exists(path):
+        return FileResponse(path)
+    return JSONResponse(status_code=404, content={"error": "File missing"})
 
-# --- UI ---
+# ==========================================
+# 5. THE MONSTER FRONTEND (SPA)
+# ==========================================
 
 @app.get("/", response_class=HTMLResponse)
-async def ui():
+async def interface():
     return """
 <!DOCTYPE html>
 <html lang="fa" dir="rtl">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-    <title>زیرنویس‌ساز حرفه‌ای</title>
-    <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;600;800&display=swap" rel="stylesheet">
+    <title>AI Subtitle Monster</title>
+    <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100;300;500;700;900&display=swap" rel="stylesheet">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
     <style>
-        :root { 
-            --primary: #4f46e5; 
-            --bg: #f3f4f6; 
-            --card: #ffffff; 
-            --text: #1f2937; 
-            --border: #e5e7eb;
+        :root {
+            --bg-dark: #0f172a;
+            --bg-card: #1e293b;
+            --primary: #6366f1;
+            --primary-glow: rgba(99, 102, 241, 0.5);
+            --accent: #ec4899;
+            --text-main: #f8fafc;
+            --text-muted: #94a3b8;
+            --border: #334155;
+            --success: #10b981;
         }
+
         * { box-sizing: border-box; outline: none; -webkit-tap-highlight-color: transparent; }
-        body { 
-            font-family: 'Vazirmatn', sans-serif; 
-            background: var(--bg); 
-            color: var(--text); 
-            margin: 0; 
-            padding: 15px; 
-            font-size: 14px;
-        }
-        .main-container { max-width: 600px; margin: 0 auto; display: flex; flex-direction: column; gap: 15px; }
-        .card { background: var(--card); padding: 20px; border-radius: 16px; box-shadow: 0 2px 10px rgba(0,0,0,0.03); }
-        h2 { margin-top: 0; font-size: 1.1rem; color: var(--primary); border-bottom: 1px solid var(--border); padding-bottom: 10px; margin-bottom: 15px; }
         
-        /* Uploader */
-        .upload-box { border: 2px dashed #c7d2fe; padding: 30px 10px; text-align: center; border-radius: 12px; background: #eef2ff; transition: 0.2s; }
-        .upload-box:active { background: #e0e7ff; border-color: var(--primary); }
-        .upload-icon { font-size: 2.5rem; margin-bottom: 10px; display: block; }
+        body {
+            font-family: 'Vazirmatn', sans-serif;
+            background-color: var(--bg-dark);
+            color: var(--text-main);
+            margin: 0;
+            padding: 0;
+            overflow-x: hidden;
+            height: 100vh;
+            display: flex;
+            flex-direction: column;
+        }
+
+        /* --- ANIMATED BACKGROUND --- */
+        .bg-mesh {
+            position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;
+            background: radial-gradient(circle at 50% 50%, #1e1b4b 0%, #0f172a 100%);
+            overflow: hidden;
+        }
+        .blob {
+            position: absolute;
+            filter: blur(80px);
+            opacity: 0.4;
+            animation: float 10s infinite ease-in-out;
+        }
+        .blob-1 { top: -10%; left: -10%; width: 50vw; height: 50vw; background: var(--primary); }
+        .blob-2 { bottom: -10%; right: -10%; width: 40vw; height: 40vw; background: var(--accent); animation-delay: -5s; }
+        @keyframes float { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(30px, 50px); } }
+
+        /* --- LAYOUT --- */
+        .app-header {
+            padding: 15px 20px;
+            background: rgba(30, 41, 59, 0.8);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            z-index: 100;
+        }
+        .brand { font-weight: 900; font-size: 1.4rem; background: linear-gradient(to right, var(--primary), var(--accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: -1px; }
+        
+        .app-body {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+            position: relative;
+        }
+
+        /* --- VIEWS SYSTEM --- */
+        .view {
+            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
+            padding: 20px;
+            overflow-y: auto;
+            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s;
+            opacity: 0; transform: scale(0.95); pointer-events: none;
+        }
+        .view.active { opacity: 1; transform: scale(1); pointer-events: all; }
+
+        /* --- COMPONENTS --- */
+        .card {
+            background: var(--bg-card);
+            border: 1px solid var(--border);
+            border-radius: 20px;
+            padding: 25px;
+            margin-bottom: 20px;
+            box-shadow: 0 10px 30px -10px rgba(0,0,0,0.3);
+        }
+
+        .btn {
+            width: 100%;
+            padding: 16px;
+            border-radius: 14px;
+            border: none;
+            font-weight: 800;
+            font-size: 1rem;
+            cursor: pointer;
+            transition: 0.2s;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 10px;
+        }
+        .btn-primary {
+            background: linear-gradient(135deg, var(--primary), #4338ca);
+            color: white;
+            box-shadow: 0 0 20px var(--primary-glow);
+        }
+        .btn-primary:active { transform: scale(0.98); }
+
+        /* --- UPLOADER --- */
+        .upload-zone {
+            border: 2px dashed var(--border);
+            border-radius: 20px;
+            height: 300px;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            cursor: pointer;
+            transition: 0.3s;
+            background: rgba(255,255,255,0.02);
+        }
+        .upload-zone:hover { border-color: var(--primary); background: rgba(99, 102, 241, 0.05); }
+        .upload-icon { font-size: 4rem; margin-bottom: 20px; color: var(--text-muted); transition: 0.3s; }
+        .upload-zone:hover .upload-icon { transform: scale(1.1) rotate(-10deg); color: var(--primary); }
+
+        /* --- EDITOR --- */
+        .editor-layout {
+            display: grid;
+            grid-template-columns: 1fr;
+            gap: 20px;
+            height: 100%;
+        }
+        @media(min-width: 1024px) {
+            .editor-layout { grid-template-columns: 350px 1fr; }
+        }
+
+        .segments-container {
+            flex: 1;
+            overflow-y: auto;
+            padding-right: 5px;
+        }
+        
+        .segment-row {
+            background: rgba(255,255,255,0.03);
+            border-radius: 12px;
+            padding: 15px;
+            margin-bottom: 12px;
+            border-right: 3px solid transparent;
+            transition: 0.2s;
+        }
+        .segment-row:focus-within { border-right-color: var(--accent); background: rgba(255,255,255,0.06); }
         
-        /* Editor */
-        .segment-list { max-height: 300px; overflow-y: auto; padding: 5px; background: #f9fafb; border-radius: 8px; border: 1px solid var(--border); }
-        .segment-item { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 12px; margin-bottom: 10px; }
-        .time-tag { font-size: 0.7rem; background: #e5e7eb; color: #374151; padding: 2px 6px; border-radius: 4px; display: inline-block; margin-bottom: 5px; }
-        .text-edit { width: 100%; border: none; background: transparent; font-family: inherit; font-size: 1rem; padding: 0; resize: none; border-bottom: 1px dashed #ccc; }
-        .text-edit:focus { border-bottom: 1px solid var(--primary); }
-
-        /* Settings */
-        .settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
-        .control-group { margin-bottom: 15px; }
-        .control-group label { display: block; font-size: 0.8rem; font-weight: 600; margin-bottom: 6px; color: #4b5563; }
-        input[type="color"] { width: 100%; height: 45px; border: none; border-radius: 10px; padding: 2px; background: #fff; border: 1px solid var(--border); }
-        input[type="range"] { width: 100%; accent-color: var(--primary); }
-        select { width: 100%; padding: 12px; border-radius: 10px; border: 1px solid var(--border); font-family: inherit; background: #fff; font-size: 0.9rem; }
+        .seg-time { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 5px; font-family: monospace; }
+        .seg-input {
+            width: 100%;
+            background: transparent;
+            border: none;
+            color: var(--text-main);
+            font-size: 1.1rem;
+            font-family: inherit;
+            resize: none;
+            overflow: hidden;
+        }
+
+        /* --- SETTINGS PANEL --- */
+        .settings-panel {
+            background: var(--bg-card);
+            border-radius: 16px;
+            padding: 20px;
+            height: fit-content;
+        }
+        .control-group { margin-bottom: 18px; }
+        .control-label { display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--text-muted); margin-bottom: 8px; }
         
-        .action-btn { width: 100%; padding: 16px; background: linear-gradient(135deg, #4f46e5, #4338ca); color: white; border: none; border-radius: 14px; font-weight: 800; font-size: 1.1rem; cursor: pointer; box-shadow: 0 4px 15px rgba(79, 70, 229, 0.3); margin-bottom: 15px; }
-        .action-btn:active { transform: scale(0.98); }
+        /* Modern Inputs */
+        input[type="range"] {
+            width: 100%;
+            height: 6px;
+            background: var(--border);
+            border-radius: 5px;
+            appearance: none;
+        }
+        input[type="range"]::-webkit-slider-thumb {
+            appearance: none;
+            width: 18px; height: 18px;
+            background: var(--primary);
+            border-radius: 50%;
+            cursor: pointer;
+            box-shadow: 0 0 10px var(--primary-glow);
+        }
         
-        /* Loader */
-        .loader-overlay { position: fixed; top:0; left:0; width:100%; height:100%; background: rgba(255,255,255,0.95); z-index: 999; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 20px; }
-        .spinner { width: 50px; height: 50px; border: 5px solid #e5e7eb; border-top: 5px solid var(--primary); border-radius: 50%; animation: spin 0.8s linear infinite; margin-bottom: 20px; }
-        @keyframes spin { 100% { transform: rotate(360deg); } }
-
-        /* Result Box */
-        .result-container {
-            margin-top: 20px;
-            padding-top: 20px;
-            border-top: 2px dashed #e5e7eb;
+        input[type="color"] {
+            width: 100%; height: 40px;
+            border: none; border-radius: 8px;
+            cursor: pointer;
+            background: transparent;
+        }
+
+        .style-chips { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 5px; }
+        .chip {
+            padding: 8px 16px;
+            background: var(--border);
+            border-radius: 20px;
+            font-size: 0.85rem;
+            cursor: pointer;
+            white-space: nowrap;
+            transition: 0.2s;
+            border: 1px solid transparent;
+        }
+        .chip.active {
+            background: rgba(99, 102, 241, 0.2);
+            color: var(--primary);
+            border-color: var(--primary);
+        }
+
+        /* --- PREVIEW BOX (Simulated) --- */
+        .preview-box {
+            position: relative;
+            width: 100%;
+            aspect-ratio: 16/9;
+            background: #000;
+            border-radius: 12px;
+            margin-bottom: 20px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            overflow: hidden;
+            background-image: url('https://images.unsplash.com/photo-1492691527719-9d1e07e534b4?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80');
+            background-size: cover;
+            background-position: center;
+        }
+        .preview-text {
+            position: absolute;
             text-align: center;
+            pointer-events: none;
+            transition: 0.1s;
+            line-height: 1.4;
+            max-width: 80%;
+        }
+
+        /* --- LOADER OVERLAY --- */
+        .loader-screen {
+            position: fixed; top:0; left:0; width:100%; height:100%;
+            background: rgba(15, 23, 42, 0.95);
+            z-index: 1000;
+            display: none;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+        }
+        .loader-screen.flex { display: flex; }
+        .dna-loader {
+            display: flex; gap: 5px; margin-bottom: 20px;
+        }
+        .dna-dot {
+            width: 10px; height: 10px; background: var(--primary);
+            border-radius: 50%;
+            animation: bounce 1s infinite ease-in-out;
         }
-        video { width: 100%; border-radius: 12px; background: #000; margin-top: 10px; box-shadow: 0 10px 30px -10px rgba(0,0,0,0.2); }
-        .dl-link { display: block; margin-top: 15px; padding: 15px; background: #10b981; color: white; text-decoration: none; border-radius: 12px; font-weight: bold; font-size: 1.1rem; }
+        .dna-dot:nth-child(2) { animation-delay: 0.1s; background: var(--accent); }
+        .dna-dot:nth-child(3) { animation-delay: 0.2s; }
+        @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }
+
+        /* --- RESULT PAGE --- */
+        .result-video { width: 100%; border-radius: 12px; box-shadow: 0 0 30px rgba(0,0,0,0.5); }
 
-        .hidden { display: none !important; }
-        .disabled-panel { opacity: 0.6; pointer-events: none; filter: grayscale(0.5); }
     </style>
 </head>
 <body>
 
-<div id="mainLoader" class="loader-overlay" style="display: none;">
-    <div class="spinner"></div>
-    <h3 id="loaderText">در حال پردازش...</h3>
-    <p style="color:#666; font-size:0.9rem;">لطفاً صفحه را نبندید</p>
-</div>
+    <!-- BACKGROUND -->
+    <div class="bg-mesh"><div class="blob blob-1"></div><div class="blob blob-2"></div></div>
 
-<div class="main-container">
-    
-    <div class="card" id="cardUpload">
-        <h2>1. انتخاب ویدیو</h2>
-        <div class="upload-box" onclick="document.getElementById('videoInput').click()">
-            <span class="upload-icon">📹</span>
-            <p id="uploadMsg">ویدیو را انتخاب کنید</p>
-            <input type="file" id="videoInput" hidden accept="video/*" onchange="uploadVideo()">
-        </div>
+    <!-- LOADER -->
+    <div id="loader" class="loader-screen">
+        <div class="dna-loader"><div class="dna-dot"></div><div class="dna-dot"></div><div class="dna-dot"></div></div>
+        <h3 id="loaderMsg">در حال پردازش هوش مصنوعی...</h3>
+        <p style="color: var(--text-muted); font-size: 0.9rem;">لطفاً صبر کنید</p>
     </div>
 
-    <div class="card hidden" id="cardEditor">
-        <h2>2. ویرایش متن‌ها</h2>
-        <div class="segment-list" id="segmentsContainer"></div>
-    </div>
+    <!-- HEADER -->
+    <header class="app-header">
+        <div class="brand"><i class="fa-solid fa-wand-magic-sparkles"></i> SubMagic</div>
+        <div style="font-size: 0.8rem; color: var(--text-muted);">v2.0 Pro</div>
+    </header>
 
-    <div class="card disabled-panel" id="cardSettings">
-        <h2>3. تنظیمات و خروجی</h2>
+    <!-- BODY -->
+    <div class="app-body">
         
-        <div class="settings-grid">
-            <div class="control-group">
-                <label>رنگ متن</label>
-                <input type="color" id="primaryColor" value="#FFFFFF">
-            </div>
-            <div class="control-group">
-                <label>رنگ کادر</label>
-                <input type="color" id="outlineColor" value="#000000">
+        <!-- VIEW 1: UPLOAD -->
+        <div id="view-upload" class="view active">
+            <div style="max-width: 600px; margin: 40px auto;">
+                <div class="card">
+                    <h2 style="text-align: center;">شروع پروژه جدید</h2>
+                    <div class="upload-zone" onclick="document.getElementById('fileIn').click()">
+                        <i class="fa-solid fa-cloud-arrow-up upload-icon"></i>
+                        <h3>ویدیو را انتخاب کنید</h3>
+                        <p style="color: var(--text-muted);">پشتیبانی از MP4, MOV, AVI</p>
+                        <input type="file" id="fileIn" hidden accept="video/*" onchange="handleUpload()">
+                    </div>
+                </div>
             </div>
         </div>
 
-        <div class="control-group">
-            <label>استایل کادر</label>
-            <select id="backType">
-                <option value="box_solid" selected>کادر پررنگ (هرمزی)</option>
-                <option value="box_transparent">کادر شفاف (سینمایی)</option>
-                <option value="outline">فقط حاشیه (Outline)</option>
-            </select>
-        </div>
+        <!-- VIEW 2: EDITOR -->
+        <div id="view-editor" class="view">
+            <div class="editor-layout">
+                
+                <!-- SIDEBAR SETTINGS -->
+                <div class="settings-panel">
+                    <h2>🎨 تنظیمات گرافیکی</h2>
+                    
+                    <!-- PREVIEW -->
+                    <div class="preview-box">
+                        <div id="livePreview" class="preview-text">این یک متن تست است</div>
+                    </div>
+
+                    <div class="control-group">
+                        <div class="control-label"><span>رنگ متن</span></div>
+                        <input type="color" id="colorMain" value="#FFFFFF" oninput="updatePreview()">
+                    </div>
+
+                    <div class="control-group">
+                        <div class="control-label"><span>رنگ کادر/حاشیه</span></div>
+                        <input type="color" id="colorOutline" value="#000000" oninput="updatePreview()">
+                    </div>
+
+                    <div class="control-group">
+                        <div class="control-label"><span>نوع پس‌زمینه</span></div>
+                        <div class="style-chips">
+                            <div class="chip active" onclick="setStyle('solid', this)">هرمزی</div>
+                            <div class="chip" onclick="setStyle('transparent', this)">سینمایی</div>
+                            <div class="chip" onclick="setStyle('outline', this)">ساده</div>
+                        </div>
+                    </div>
+
+                    <div class="control-group">
+                        <div class="control-label"><span>فونت</span></div>
+                        <div class="style-chips">
+                            <div class="chip active" onclick="setFont('lalezar', this)">لاله زار</div>
+                            <div class="chip" onclick="setFont('vazir', this)">وزیر</div>
+                        </div>
+                    </div>
+
+                    <div class="control-group">
+                        <div class="control-label"><span>اندازه متن</span> <span id="lblSize">60</span></div>
+                        <input type="range" id="rngSize" min="30" max="120" value="60" oninput="updatePreview()">
+                    </div>
+
+                    <div class="control-group">
+                        <div class="control-label"><span>موقعیت عمودی</span></div>
+                        <input type="range" id="rngPos" min="10" max="500" value="100" oninput="updatePreview()">
+                    </div>
+
+                    <button class="btn btn-primary" onclick="startRender()">
+                        <i class="fa-solid fa-rocket"></i> ساخت خروجی نهایی
+                    </button>
+                </div>
+
+                <!-- SEGMENTS LIST -->
+                <div class="card" style="display: flex; flex-direction: column; height: 100%;">
+                    <h2>📝 ویرایش متن‌ها</h2>
+                    <div id="segmentsList" class="segments-container">
+                        <!-- Dynamic Content -->
+                    </div>
+                </div>
 
-        <div class="settings-grid">
-            <div class="control-group">
-                <label>فونت</label>
-                <select id="fontSelect">
-                    <option value="lalezar">لاله زار (ضخیم)</option>
-                    <option value="vazir">وزیر (رسمی)</option>
-                </select>
-            </div>
-            <div class="control-group">
-                <label>اندازه فونت: <span id="fontSizeVal">60</span></label>
-                <input type="range" id="fontSize" min="30" max="100" value="60" oninput="updateVal('fontSizeVal', this.value)">
             </div>
         </div>
 
-        <div class="control-group">
-            <label>موقعیت عمودی (از پایین): <span id="marginVal">150</span></label>
-            <input type="range" id="marginV" min="50" max="600" value="150" oninput="updateVal('marginVal', this.value)">
+        <!-- VIEW 3: RESULT -->
+        <div id="view-result" class="view">
+            <div style="max-width: 800px; margin: 20px auto;">
+                <div class="card" style="text-align: center;">
+                    <h2 style="color: var(--success);">🎉 ویدیو آماده شد!</h2>
+                    <video id="finalPlayer" controls class="result-video"></video>
+                    
+                    <div style="display: flex; gap: 10px; margin-top: 20px;">
+                        <a id="dlBtn" href="#" download class="btn btn-primary" style="background: var(--success);">
+                            <i class="fa-solid fa-download"></i> دانلود ویدیو
+                        </a>
+                        <button class="btn" style="background: var(--border);" onclick="location.reload()">
+                            <i class="fa-solid fa-rotate-right"></i> پروژه جدید
+                        </button>
+                    </div>
+                </div>
+            </div>
         </div>
 
-        <button id="burnBtn" class="action-btn" onclick="burnProcess()">ساخت ویدیو نهایی ✨</button>
-
-        <!-- محل نمایش ویدیو خروجی (زیر دکمه) -->
-        <div id="resultSection" class="result-container hidden">
-            <h3 style="color:#10b981; margin:0 0 10px 0;">✅ ویدیو آماده شد!</h3>
-            <video id="previewVideo" controls playsinline></video>
-            <a id="downloadLink" class="dl-link" href="#" download>دانلود ویدیو</a>
-        </div>
     </div>
 
-</div>
+    <!-- LOGIC -->
+    <script>
+        // STATE
+        let appState = {
+            fileId: null,
+            segments: [],
+            style: {
+                backType: 'solid',
+                font: 'lalezar'
+            }
+        };
 
-<script>
-    let globalFileId = null;
-    let globalSegments = [];
+        // --- NAVIGATION ---
+        function switchView(id) {
+            document.querySelectorAll('.view').forEach(el => el.classList.remove('active'));
+            document.getElementById(id).classList.add('active');
+        }
 
-    // --- مدیریت حافظه مرورگر ---
-    const settingIds = ['primaryColor', 'outlineColor', 'backType', 'fontSelect', 'fontSize', 'marginV'];
-    
-    document.addEventListener('DOMContentLoaded', () => {
-        settingIds.forEach(id => {
-            const savedVal = localStorage.getItem(id);
-            if (savedVal) {
-                const el = document.getElementById(id);
-                el.value = savedVal;
-                if(id === 'fontSize') updateVal('fontSizeVal', savedVal);
-                if(id === 'marginV') updateVal('marginVal', savedVal);
-            }
-        });
-    });
-
-    settingIds.forEach(id => {
-        document.getElementById(id).addEventListener('input', (e) => {
-            localStorage.setItem(id, e.target.value);
-        });
-    });
-
-    function updateVal(id, val) { document.getElementById(id).innerText = val; }
-
-    function showLoader(text) {
-        document.getElementById('loaderText').innerText = text;
-        document.getElementById('mainLoader').style.display = 'flex';
-    }
-    function hideLoader() {
-        document.getElementById('mainLoader').style.display = 'none';
-    }
-
-    async function uploadVideo() {
-        const fileInput = document.getElementById('videoInput');
-        if (!fileInput.files[0]) return;
-
-        document.getElementById('resultSection').classList.add('hidden');
-        document.getElementById('uploadMsg').innerText = fileInput.files[0].name;
-        
-        showLoader("در حال آپلود و آنالیز هوشمند...");
-        
-        const formData = new FormData();
-        formData.append("file", fileInput.files[0]);
+        function showLoader(msg) {
+            document.getElementById('loaderMsg').innerText = msg;
+            document.getElementById('loader').classList.add('flex');
+        }
 
-        try {
-            const res = await fetch("/api/upload", { method: "POST", body: formData });
-            const data = await res.json();
-            
-            if (data.error) throw new Error(data.error);
-            
-            globalFileId = data.file_id;
-            globalSegments = data.segments;
+        function hideLoader() {
+            document.getElementById('loader').classList.remove('flex');
+        }
+
+        // --- UPLOAD ---
+        async function handleUpload() {
+            const file = document.getElementById('fileIn').files[0];
+            if(!file) return;
+
+            showLoader("در حال آپلود و استخراج متن با هوش مصنوعی...");
             
-            renderEditor();
+            const formData = new FormData();
+            formData.append("file", file);
+
+            try {
+                const res = await fetch("/api/analyze", { method: "POST", body: formData });
+                const data = await res.json();
+                
+                if(data.error) throw new Error(data.error);
+
+                appState.fileId = data.file_id;
+                appState.segments = data.segments;
+
+                renderSegments();
+                switchView('view-editor');
+                updatePreview();
+
+            } catch(e) {
+                alert("Error: " + e.message);
+            } finally {
+                hideLoader();
+            }
+        }
+
+        // --- EDITOR LOGIC ---
+        function renderSegments() {
+            const container = document.getElementById('segmentsList');
+            container.innerHTML = "";
             
-            document.getElementById('cardEditor').classList.remove('hidden');
-            document.getElementById('cardSettings').classList.remove('disabled-panel');
-            document.getElementById('cardEditor').scrollIntoView({behavior: 'smooth'});
+            appState.segments.forEach((seg, idx) => {
+                const div = document.createElement('div');
+                div.className = 'segment-row';
+                div.innerHTML = `
+                    <div class="seg-time">${formatTime(seg.start)} -> ${formatTime(seg.end)}</div>
+                    <textarea class="seg-input" rows="1" oninput="updateSegment(${idx}, this)">${seg.text}</textarea>
+                `;
+                container.appendChild(div);
+            });
 
-        } catch (e) {
-            alert("خطا: " + e.message);
-        } finally {
-            hideLoader();
+            // Auto resize textareas
+            document.querySelectorAll('.seg-input').forEach(tx => {
+                tx.style.height = 'auto';
+                tx.style.height = (tx.scrollHeight) + 'px';
+            });
         }
-    }
 
-    function renderEditor() {
-        const container = document.getElementById('segmentsContainer');
-        container.innerHTML = "";
-        
-        globalSegments.forEach((seg, idx) => {
-            const div = document.createElement('div');
-            div.className = 'segment-item';
-            div.innerHTML = `
-                <div class="time-tag">${Math.floor(seg.start)} - ${Math.floor(seg.end)}s</div>
-                <textarea class="text-edit" rows="1" oninput="globalSegments[${idx}].text = this.value; this.style.height='auto'; this.style.height=this.scrollHeight+'px';">${seg.text}</textarea>
-            `;
-            container.appendChild(div);
-        });
-    }
-
-    async function burnProcess() {
-        showLoader("در حال ساخت ویدیو...");
-        
-        const payload = {
-            file_id: globalFileId,
-            segments: globalSegments,
-            style: {
-                font: document.getElementById('fontSelect').value,
-                font_size: parseInt(document.getElementById('fontSize').value),
-                primary_color: document.getElementById('primaryColor').value,
-                outline_color: document.getElementById('outlineColor').value,
-                back_type: document.getElementById('backType').value,
-                outline_width: 2.0, 
-                margin_v: parseInt(document.getElementById('marginV').value)
-            }
-        };
+        function updateSegment(idx, el) {
+            appState.segments[idx].text = el.value;
+            document.getElementById('livePreview').innerText = el.value; // Live typing effect
+            el.style.height = 'auto';
+            el.style.height = (el.scrollHeight) + 'px';
+        }
 
-        try {
-            const res = await fetch("/api/burn", {
-                method: "POST",
-                headers: { "Content-Type": "application/json" },
-                body: JSON.stringify(payload)
-            });
-            const data = await res.json();
-            
-            if (data.error) throw new Error(data.error);
-            
-            // نمایش ویدیو
-            const videoEl = document.getElementById('previewVideo');
-            // اضافه کردن تایم‌استمپ برای جلوگیری از کش شدن ویدیوی قبلی
-            videoEl.src = data.url + "?t=" + new Date().getTime();
+        function formatTime(s) {
+            const m = Math.floor(s / 60);
+            const sec = Math.floor(s % 60);
+            return `${m}:${sec.toString().padStart(2, '0')}`;
+        }
+
+        // --- SETTINGS & PREVIEW ---
+        function setStyle(type, el) {
+            appState.style.backType = type;
+            el.parentElement.querySelectorAll('.chip').forEach(c => c.classList.remove('active'));
+            el.classList.add('active');
+            updatePreview();
+        }
+
+        function setFont(font, el) {
+            appState.style.font = font;
+            el.parentElement.querySelectorAll('.chip').forEach(c => c.classList.remove('active'));
+            el.classList.add('active');
+            updatePreview();
+        }
+
+        function updatePreview() {
+            const txt = document.getElementById('livePreview');
+            const size = document.getElementById('rngSize').value;
+            const pos = document.getElementById('rngPos').value;
+            const color = document.getElementById('colorMain').value;
+            const outline = document.getElementById('colorOutline').value;
+            const font = appState.style.font === 'lalezar' ? 'Lalezar' : 'Vazirmatn';
             
-            document.getElementById('downloadLink').href = data.url;
+            document.getElementById('lblSize').innerText = size;
+
+            // CSS Simulation of ASS Style
+            txt.style.fontFamily = font;
+            txt.style.fontSize = (size / 2) + 'px'; // Scale down for preview box
+            txt.style.color = color;
+            txt.style.bottom = (pos / 5) + 'px'; // Scale down pos
             
-            // باز کردن بخش نتیجه (بدون بستن ادیتور)
-            document.getElementById('resultSection').classList.remove('hidden');
-            document.getElementById('resultSection').scrollIntoView({behavior: 'smooth'});
+            if(appState.style.backType === 'solid') {
+                txt.style.backgroundColor = outline;
+                txt.style.textShadow = 'none';
+                txt.style.padding = '5px 10px';
+                txt.style.borderRadius = '4px';
+            } else if (appState.style.backType === 'transparent') {
+                txt.style.backgroundColor = 'rgba(0,0,0,0.6)';
+                txt.style.textShadow = 'none';
+                txt.style.padding = '5px 10px';
+                txt.style.borderRadius = '4px';
+            } else { // Outline
+                txt.style.backgroundColor = 'transparent';
+                txt.style.webkitTextStroke = `1px ${outline}`;
+                txt.style.textShadow = `0 0 2px ${outline}`;
+                txt.style.padding = '0';
+            }
+        }
 
-        } catch (e) {
-            alert("خطا در ساخت ویدیو: " + e.message);
-        } finally {
-            hideLoader();
+        // --- RENDER ---
+        async function startRender() {
+            showLoader("در حال رندر نهایی ویدیو... (ممکن است کمی طول بکشد)");
+            
+            const payload = {
+                file_id: appState.fileId,
+                segments: appState.segments,
+                style: {
+                    font: appState.style.font,
+                    fontSize: parseInt(document.getElementById('rngSize').value),
+                    primaryColor: document.getElementById('colorMain').value,
+                    outlineColor: document.getElementById('colorOutline').value,
+                    backType: appState.style.backType,
+                    outlineWidth: 2.0,
+                    marginV: parseInt(document.getElementById('rngPos').value),
+                    alignment: 2
+                }
+            };
+
+            try {
+                const res = await fetch("/api/render", {
+                    method: "POST",
+                    headers: { "Content-Type": "application/json" },
+                    body: JSON.stringify(payload)
+                });
+                const data = await res.json();
+                
+                if(data.error) throw new Error(data.error);
+
+                document.getElementById('finalPlayer').src = data.url + "?t=" + Date.now();
+                document.getElementById('dlBtn').href = data.url;
+                
+                switchView('view-result');
+
+            } catch(e) {
+                alert("Render Error: " + e.message);
+            } finally {
+                hideLoader();
+            }
         }
-    }
-</script>
 
+    </script>
 </body>
 </html>
     """