Update app.py

app.py

@@ -16,9 +16,8 @@ from pydantic import BaseModel
 # 1. CONFIGURATION & AI SETUP
 # ==========================================
 
-app = FastAPI(title="AI Subtitle Studio Pro")
+app = FastAPI(title="AI Subtitle Monster V3")
 
-# CORS Setup
 app.add_middleware(
     CORSMiddleware,
     allow_origins=["*"],
@@ -26,11 +25,9 @@ app.add_middleware(
     allow_headers=["*"],
 )
 
-# Paths
 TEMP_DIR = "temp"
 os.makedirs(TEMP_DIR, exist_ok=True)
 
-# Load Model (Global)
 print("⚡ [SYSTEM] Initializing AI Neural Network...")
 model = WhisperModel("small", device="cpu", compute_type="int8")
 print("✅ [SYSTEM] AI Core Ready.")
@@ -50,10 +47,10 @@ class StyleConfig(BaseModel):
     fontSize: int
     primaryColor: str
     outlineColor: str
-    backType: str  # 'solid', 'transparent', 'outline'
+    backType: str
     outlineWidth: float
     marginV: int
-    alignment: int # 2=Bottom, 5=Top, 10=Center
+    alignment: int
 
 class ProcessRequest(BaseModel):
     file_id: str
@@ -65,7 +62,6 @@ class ProcessRequest(BaseModel):
 # ==========================================
 
 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]
@@ -83,31 +79,31 @@ def format_time_ass(seconds: float):
 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")
+    font_name = font_map.get(s.font, "Vazirmatn")
     
-    # Colors
     primary = hex_to_ass(s.primaryColor)
     outline = hex_to_ass(s.outlineColor)
     
-    # Background Logic
     border_style = 1
     back_color = "&H00000000"
     
+    # منطق کادرها
     if s.backType == 'solid':
-        border_style = 3 # Opaque Box
-        outline = hex_to_ass(s.outlineColor, "00") # Fully Opaque
+        border_style = 3 
+        outline = hex_to_ass(s.outlineColor, "00") 
     elif s.backType == 'transparent':
         border_style = 3
-        outline = "&H80000000" # 50% Transparent Black
-    else: # Outline only
+        outline = "&H80000000" 
+    else: 
         border_style = 1
-        
+
+    # تنظیمات رزولوشن ASS برای هماهنگی اندازه فونت
+    # PlayResY روی 1080 تنظیم شده تا اندازه فونت استاندارد باشد
     header = f"""[Script Info]
 ScriptType: v4.00+
-PlayResX: 1080
-PlayResY: 1920
+PlayResX: 1920
+PlayResY: 1080
 WrapStyle: 1
 
 [V4+ Styles]
@@ -122,7 +118,6 @@ Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
         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")
 
@@ -140,7 +135,6 @@ async def analyze_media(file: UploadFile = File(...)):
         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)
         
         results = []
@@ -160,9 +154,6 @@ async def analyze_media(file: UploadFile = File(...)):
 @app.post("/api/render")
 async def render_video(data: ProcessRequest):
     try:
-        # 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:
@@ -177,15 +168,13 @@ async def render_video(data: ProcessRequest):
         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:v", "libx264", "-preset", "ultrafast", "-crf", "24",
             "-c:a", "aac",
             output_path
         ]
@@ -204,7 +193,7 @@ async def get_file(filename: str):
     return JSONResponse(status_code=404, content={"error": "File missing"})
 
 # ==========================================
-# 5. THE MONSTER FRONTEND (SPA)
+# 5. FRONTEND
 # ==========================================
 
 @app.get("/", response_class=HTMLResponse)
@@ -215,580 +204,430 @@ async def interface():
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-    <title>AI Subtitle Monster</title>
-    <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100;300;500;700;900&display=swap" rel="stylesheet">
+    <title>SubMagic Pro</title>
+    <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@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 {
-            --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; }
-        
+            --bg-dark: #111827;
+            --bg-card: #1f2937;
+            --primary: #8b5cf6;
+            --accent: #f43f5e;
+            --text-main: #f9fafb;
+            --text-muted: #9ca3af;
+            --border: #374151;
+        }
+        * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; outline: none; }
         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 {
+        
+        /* --- COMPONENTS --- */
+        .header {
             padding: 15px 20px;
-            background: rgba(30, 41, 59, 0.8);
-            backdrop-filter: blur(10px);
+            background: rgba(31, 41, 55, 0.9);
             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; }
+        .logo { font-weight: 900; font-size: 1.3rem; background: linear-gradient(45deg, var(--primary), var(--accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
         
-        .app-body {
+        .container {
             flex: 1;
-            display: flex;
-            flex-direction: column;
+            display: grid;
+            grid-template-columns: 1fr;
+            height: 100%;
             overflow: hidden;
             position: relative;
         }
+        @media(min-width: 1024px) { .container { grid-template-columns: 400px 1fr; } }
 
-        /* --- VIEWS SYSTEM --- */
-        .view {
-            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
+        .panel {
             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);
+            flex-direction: column;
+            gap: 20px;
         }
-        .btn-primary:active { transform: scale(0.98); }
-
-        /* --- UPLOADER --- */
+        .panel-left { background: var(--bg-card); border-left: 1px solid var(--border); z-index: 10; }
+        .panel-right { background: var(--bg-dark); }
+        
+        /* --- UPLOAD --- */
         .upload-zone {
             border: 2px dashed var(--border);
-            border-radius: 20px;
-            height: 300px;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
+            border-radius: 16px;
+            padding: 40px 20px;
+            text-align: 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;
+            margin-top: 50px;
         }
+        .upload-zone:hover { border-color: var(--primary); background: rgba(139, 92, 246, 0.1); }
         
-        .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); }
-        
-        .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; }
+        /* --- CONTROLS --- */
+        .control-group { margin-bottom: 15px; }
+        .label { display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--text-muted); margin-bottom: 8px; }
         
-        /* Modern Inputs */
         input[type="range"] {
-            width: 100%;
-            height: 6px;
-            background: var(--border);
-            border-radius: 5px;
-            appearance: none;
+            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);
+            appearance: none; width: 18px; height: 18px; background: var(--primary); border-radius: 50%; cursor: pointer;
         }
-        
         input[type="color"] {
-            width: 100%; height: 40px;
-            border: none; border-radius: 8px;
-            cursor: pointer;
-            background: transparent;
+            width: 100%; height: 40px; border: none; border-radius: 8px; background: transparent; cursor: pointer;
         }
-
-        .style-chips { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 5px; }
+        
+        .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;
+            padding: 8px 15px; background: var(--border); border-radius: 20px; font-size: 0.85rem; cursor: pointer; white-space: nowrap; transition: 0.2s;
+        }
+        .chip.active { background: var(--primary); color: white; }
+
+        /* --- EDITOR --- */
+        .segment-item {
+            background: rgba(255,255,255,0.05);
+            border-radius: 12px;
+            padding: 12px;
+            margin-bottom: 10px;
             border: 1px solid transparent;
         }
-        .chip.active {
-            background: rgba(99, 102, 241, 0.2);
-            color: var(--primary);
-            border-color: var(--primary);
+        .segment-item:focus-within { border-color: var(--primary); background: rgba(139, 92, 246, 0.1); }
+        .time-badge { font-size: 0.75rem; color: var(--accent); font-family: monospace; margin-bottom: 5px; display: block; }
+        .text-area {
+            width: 100%; background: transparent; border: none; color: var(--text-main); font-family: inherit; font-size: 1rem; resize: none; overflow: hidden;
         }
 
-        /* --- PREVIEW BOX (Simulated) --- */
-        .preview-box {
+        /* --- PREVIEW & RESULT --- */
+        .preview-container {
             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-image: url('https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=1000&auto=format&fit=crop');
             background-size: cover;
-            background-position: center;
+            margin-bottom: 20px;
         }
         .preview-text {
             position: absolute;
             text-align: center;
             pointer-events: none;
             transition: 0.1s;
-            line-height: 1.4;
-            max-width: 80%;
+            white-space: pre-wrap;
+            max-width: 90%;
         }
-
-        /* --- 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;
+        
+        /* --- RESULT VIDEO --- */
+        #resultContainer {
+            margin-top: 20px;
+            padding-top: 20px;
+            border-top: 1px solid var(--border);
+            animation: fadeIn 0.5s;
         }
-        .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; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
+
+        .btn-main {
+            width: 100%; padding: 15px; background: var(--primary); color: white; border: none; border-radius: 12px; font-weight: bold; font-size: 1.1rem; cursor: pointer; margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 10px;
         }
-        .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); } }
+        .btn-main:hover { filter: brightness(1.1); transform: translateY(-2px); transition: 0.2s; }
+        .btn-dl { background: #10b981; text-decoration: none; color: white; display: block; padding: 12px; text-align: center; border-radius: 10px; margin-top: 10px; font-weight: bold; }
 
-        /* --- RESULT PAGE --- */
-        .result-video { width: 100%; border-radius: 12px; box-shadow: 0 0 30px rgba(0,0,0,0.5); }
+        /* --- LOADER --- */
+        .loader { position: fixed; inset: 0; background: rgba(0,0,0,0.9); z-index: 2000; display: none; flex-direction: column; align-items: center; justify-content: center; }
+        .spinner { width: 50px; height: 50px; border: 4px solid #333; border-top-color: var(--primary); border-radius: 50%; animation: spin 1s infinite linear; }
+        @keyframes spin { to { transform: rotate(360deg); } }
+        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
 
+        .hidden { display: none !important; }
+        
+        /* Mobile optimization */
+        @media(max-width: 1023px) {
+            .panel-left { order: 2; border-left: none; border-top: 1px solid var(--border); max-height: 50vh; }
+            .panel-right { order: 1; flex: 1; }
+        }
     </style>
 </head>
 <body>
 
-    <!-- BACKGROUND -->
-    <div class="bg-mesh"><div class="blob blob-1"></div><div class="blob blob-2"></div></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 id="loader" class="loader">
+    <div class="spinner"></div>
+    <p id="loaderText" style="margin-top: 15px; color: #ccc;">در حال پردازش...</p>
+</div>
+
+<div class="header">
+    <div class="logo"><i class="fa-solid fa-layer-group"></i> SubMagic Pro</div>
+    <button onclick="location.reload()" style="background:none; border:none; color:#fff; cursor:pointer;"><i class="fa-solid fa-rotate-right"></i></button>
+</div>
+
+<!-- UPLOAD VIEW -->
+<div id="viewUpload" style="padding: 20px; max-width: 600px; margin: 0 auto;">
+    <div class="upload-zone" onclick="document.getElementById('fileIn').click()">
+        <i class="fa-solid fa-cloud-arrow-up" style="font-size: 3rem; margin-bottom: 15px; color: var(--text-muted);"></i>
+        <h3>آپلود ویدیو</h3>
+        <p style="color: var(--text-muted);">ویدیو را انتخاب کنید تا هوش مصنوعی آن را زیرنویس کند</p>
+        <input type="file" id="fileIn" hidden accept="video/*" onchange="handleUpload()">
     </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>
-
-    <!-- BODY -->
-    <div class="app-body">
+<!-- EDITOR VIEW -->
+<div id="viewEditor" class="container hidden">
+    
+    <!-- SETTINGS PANEL -->
+    <div class="panel panel-left">
+        <h3 style="margin: 0 0 15px 0; color: var(--primary);">تنظیمات گرافیکی</h3>
         
-        <!-- 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 class="control-group">
+            <div class="label"><span>نوع کادر</span></div>
+            <div class="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>
 
-        <!-- 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="control-group">
+            <div class="label"><span>فونت</span></div>
+            <div class="chips">
+                <div class="chip active" onclick="setFont('lalezar', this)">لاله زار</div>
+                <div class="chip" onclick="setFont('vazir', this)">وزیر</div>
             </div>
         </div>
 
-        <!-- 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 class="control-group" style="display: flex; gap: 10px;">
+            <div style="flex: 1;">
+                <div class="label">رنگ متن</div>
+                <input type="color" id="colorMain" value="#FFFFFF" oninput="updatePreview()">
             </div>
+            <div style="flex: 1;">
+                <div class="label">رنگ کادر</div>
+                <input type="color" id="colorOutline" value="#000000" oninput="updatePreview()">
+            </div>
+        </div>
+
+        <div class="control-group">
+            <div class="label"><span>سایز متن</span> <span id="lblSize">80</span></div>
+            <!-- محدوده اسلایدر را تا 200 افزایش دادم -->
+            <input type="range" id="rngSize" min="40" max="200" value="80" oninput="updatePreview()">
+        </div>
+
+        <div class="control-group">
+            <div class="label"><span>موقعیت عمودی</span></div>
+            <input type="range" id="rngPos" min="20" max="500" value="100" oninput="updatePreview()">
         </div>
 
+        <button class="btn-main" onclick="startRender()">
+            <i class="fa-solid fa-wand-magic-sparkles"></i>
+            ساخت خروجی نهایی
+        </button>
     </div>
 
-    <!-- LOGIC -->
-    <script>
-        // STATE
-        let appState = {
-            fileId: null,
-            segments: [],
-            style: {
-                backType: 'solid',
-                font: 'lalezar'
-            }
-        };
+    <!-- PREVIEW & TEXT PANEL -->
+    <div class="panel panel-right">
+        <!-- Live CSS Preview -->
+        <div class="preview-container">
+            <div id="livePreview" class="preview-text">اینجا پیش‌نمایش زنده زیرنویس شماست</div>
+        </div>
 
-        // --- NAVIGATION ---
-        function switchView(id) {
-            document.querySelectorAll('.view').forEach(el => el.classList.remove('active'));
-            document.getElementById(id).classList.add('active');
-        }
+        <!-- Result Video Container (Hidden Initially) -->
+        <div id="resultContainer" class="hidden">
+            <h3 style="color: #10b981; margin-bottom: 10px;">✅ ویدیو ساخته شد:</h3>
+            <video id="finalPlayer" controls playsinline></video>
+            <a id="dlBtn" href="#" download class="btn-dl">دانلود ویدیو</a>
+            <hr style="border-color: var(--border); margin: 20px 0;">
+        </div>
 
-        function showLoader(msg) {
-            document.getElementById('loaderMsg').innerText = msg;
-            document.getElementById('loader').classList.add('flex');
-        }
+        <!-- Text Segments -->
+        <div id="segmentsList" style="padding-bottom: 50px;">
+            <!-- Segments injected here -->
+        </div>
+    </div>
 
-        function hideLoader() {
-            document.getElementById('loader').classList.remove('flex');
-        }
+</div>
 
-        // --- UPLOAD ---
-        async function handleUpload() {
-            const file = document.getElementById('fileIn').files[0];
-            if(!file) return;
+<script>
+    let appState = {
+        fileId: null,
+        segments: [],
+        style: { backType: 'solid', font: 'lalezar' }
+    };
 
-            showLoader("در حال آپلود و استخراج متن با هوش مصنوعی...");
-            
-            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();
-            }
-        }
+    // --- UPLOAD ---
+    async function handleUpload() {
+        const file = document.getElementById('fileIn').files[0];
+        if(!file) return;
 
-        // --- EDITOR LOGIC ---
-        function renderSegments() {
-            const container = document.getElementById('segmentsList');
-            container.innerHTML = "";
-            
-            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);
-            });
+        document.getElementById('loader').style.display = 'flex';
+        document.getElementById('loaderText').innerText = "در حال آپلود و هوش مصنوعی...";
 
-            // Auto resize textareas
-            document.querySelectorAll('.seg-input').forEach(tx => {
-                tx.style.height = 'auto';
-                tx.style.height = (tx.scrollHeight) + 'px';
-            });
-        }
+        const formData = new FormData();
+        formData.append("file", file);
 
-        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/analyze", { method: "POST", body: formData });
+            const data = await res.json();
+            
+            if(data.error) throw new Error(data.error);
 
-        function formatTime(s) {
-            const m = Math.floor(s / 60);
-            const sec = Math.floor(s % 60);
-            return `${m}:${sec.toString().padStart(2, '0')}`;
-        }
+            appState.fileId = data.file_id;
+            appState.segments = data.segments;
 
-        // --- SETTINGS & PREVIEW ---
-        function setStyle(type, el) {
-            appState.style.backType = type;
-            el.parentElement.querySelectorAll('.chip').forEach(c => c.classList.remove('active'));
-            el.classList.add('active');
+            renderSegments();
+            
+            document.getElementById('viewUpload').classList.add('hidden');
+            document.getElementById('viewEditor').classList.remove('hidden');
             updatePreview();
-        }
 
-        function setFont(font, el) {
-            appState.style.font = font;
-            el.parentElement.querySelectorAll('.chip').forEach(c => c.classList.remove('active'));
-            el.classList.add('active');
-            updatePreview();
+        } catch(e) {
+            alert("خطا: " + e.message);
+        } finally {
+            document.getElementById('loader').style.display = 'none';
         }
+    }
 
-        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('lblSize').innerText = size;
+    // --- RENDER SEGMENTS ---
+    function renderSegments() {
+        const container = document.getElementById('segmentsList');
+        container.innerHTML = "";
+        
+        appState.segments.forEach((seg, idx) => {
+            const div = document.createElement('div');
+            div.className = 'segment-item';
+            div.innerHTML = `
+                <span class="time-tag">${Math.round(seg.start)}s - ${Math.round(seg.end)}s</span>
+                <textarea class="text-area" rows="1" oninput="updateSegment(${idx}, this)">${seg.text}</textarea>
+            `;
+            container.appendChild(div);
+        });
+
+        // Auto resize
+        document.querySelectorAll('.text-area').forEach(el => {
+            el.style.height = 'auto';
+            el.style.height = el.scrollHeight + 'px';
+        });
+    }
+
+    function updateSegment(idx, el) {
+        appState.segments[idx].text = el.value;
+        document.getElementById('livePreview').innerText = el.value;
+        el.style.height = 'auto';
+        el.style.height = el.scrollHeight + 'px';
+    }
+
+    // --- SETTINGS ---
+    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 = parseInt(document.getElementById('rngSize').value);
+        const pos = parseInt(document.getElementById('rngPos').value);
+        const color = document.getElementById('colorMain').value;
+        const outline = document.getElementById('colorOutline').value;
+        
+        document.getElementById('lblSize').innerText = size;
+
+        // شبیه‌سازی CSS برای پیش‌نمایش (تقریبی)
+        // مقیاس‌دهی: سایز ASS با پیکسل CSS فرق دارد، اینجا تقریبی اسکیل میکنیم
+        txt.style.fontFamily = appState.style.font === 'lalezar' ? 'Lalezar' : 'Vazirmatn';
+        txt.style.fontSize = (size * 0.6) + 'px'; 
+        txt.style.color = color;
+        txt.style.bottom = (pos / 4) + 'px'; // Scale pos for preview box
+        
+        if(appState.style.backType === 'solid') {
+            txt.style.backgroundColor = outline;
+            txt.style.textShadow = 'none';
+            txt.style.padding = '5px 15px';
+            txt.style.webkitTextStroke = '0';
+        } else if (appState.style.backType === 'transparent') {
+            txt.style.backgroundColor = 'rgba(0,0,0,0.6)';
+            txt.style.textShadow = 'none';
+            txt.style.padding = '5px 15px';
+            txt.style.webkitTextStroke = '0';
+        } else {
+            txt.style.backgroundColor = 'transparent';
+            txt.style.padding = '0';
+            txt.style.webkitTextStroke = `1px ${outline}`;
+            txt.style.textShadow = `2px 2px 0 ${outline}`;
+        }
+        txt.style.borderRadius = '8px';
+    }
+
+    // --- FINAL RENDER ---
+    async function startRender() {
+        document.getElementById('loader').style.display = 'flex';
+        document.getElementById('loaderText').innerText = "در حال رندر ویدیو نهایی...";
+
+        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
+            }
+        };
 
-            // 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
+        try {
+            const res = await fetch("/api/render", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify(payload)
+            });
+            const data = await res.json();
             
-            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';
-            }
-        }
+            if(data.error) throw new Error(data.error);
 
-        // --- RENDER ---
-        async function startRender() {
-            showLoader("در حال رندر نهایی ویدیو... (ممکن است کمی طول بکشد)");
+            // نمایش نتیجه در همان صفحه
+            const resultBox = document.getElementById('resultContainer');
+            resultBox.classList.remove('hidden');
             
-            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();
-            }
+            const player = document.getElementById('finalPlayer');
+            // اضافه کردن زمان برای جلوگیری از کش شدن ویدیو قبلی
+            player.src = data.url + "?t=" + Date.now(); 
+            
+            document.getElementById('dlBtn').href = data.url;
+            
+            // اسکرول نرم به ویدیو
+            resultBox.scrollIntoView({ behavior: 'smooth' });
+
+        } catch(e) {
+            alert("خطا: " + e.message);
+        } finally {
+            document.getElementById('loader').style.display = 'none';
         }
+    }
+</script>
 
-    </script>
 </body>
 </html>
     """