Update app.py

app.py

@@ -3,20 +3,15 @@ import shutil
 import subprocess
 import uuid
 import json
-import asyncio
 from datetime import timedelta
-from typing import List, Optional
-from fastapi import FastAPI, UploadFile, File, Form, Body, HTTPException
+from typing import List
+from fastapi import FastAPI, UploadFile, File
 from fastapi.responses import HTMLResponse, FileResponse, JSONResponse
 from fastapi.middleware.cors import CORSMiddleware
 from faster_whisper import WhisperModel
 from pydantic import BaseModel
 
-# ==========================================
-# 1. CONFIGURATION & AI SETUP
-# ==========================================
-
-app = FastAPI(title="AI Subtitle Monster V3")
+app = FastAPI(title="AI Subtitle Studio Pro")
 
 app.add_middleware(
     CORSMiddleware,
@@ -32,9 +27,7 @@ print("⚡ [SYSTEM] Initializing AI Neural Network...")
 model = WhisperModel("small", device="cpu", compute_type="int8")
 print("✅ [SYSTEM] AI Core Ready.")
 
-# ==========================================
-# 2. DATA MODELS
-# ==========================================
+# --- MODELS ---
 
 class SubtitleSegment(BaseModel):
     id: int
@@ -47,19 +40,17 @@ class StyleConfig(BaseModel):
     fontSize: int
     primaryColor: str
     outlineColor: str
-    backType: str
+    backType: str  
     outlineWidth: float
     marginV: int
-    alignment: int
+    alignment: int 
 
 class ProcessRequest(BaseModel):
     file_id: str
     segments: List[SubtitleSegment]
     style: StyleConfig
 
-# ==========================================
-# 3. UTILITY FUNCTIONS
-# ==========================================
+# --- HELPERS ---
 
 def hex_to_ass(hex_color, alpha="00"):
     hex_color = hex_color.lstrip('#')
@@ -80,7 +71,7 @@ def generate_ass_file(data: ProcessRequest, output_path: str):
     s = data.style
     
     font_map = {"vazir": "Vazirmatn", "lalezar": "Lalezar"}
-    font_name = font_map.get(s.font, "Vazirmatn")
+    font_name = font_map.get(s.font, "Arial")
     
     primary = hex_to_ass(s.primaryColor)
     outline = hex_to_ass(s.outlineColor)
@@ -88,22 +79,21 @@ def generate_ass_file(data: ProcessRequest, output_path: str):
     border_style = 1
     back_color = "&H00000000"
     
-    # منطق کادرها
     if s.backType == 'solid':
         border_style = 3 
         outline = hex_to_ass(s.outlineColor, "00") 
     elif s.backType == 'transparent':
         border_style = 3
         outline = "&H80000000" 
-    else: 
+    else:
         border_style = 1
-
-    # تنظیمات رزولوشن ASS برای هماهنگی اندازه فونت
-    # PlayResY روی 1080 تنظیم شده تا اندازه فونت استاندارد باشد
+        
+    # نکته مهم: PlayResY روی 1080 تنظیم شده.
+    # بنابراین فونت سایز 100 یعنی تقریبا 1/10 ارتفاع تصویر.
     header = f"""[Script Info]
 ScriptType: v4.00+
-PlayResX: 1920
-PlayResY: 1080
+PlayResX: 1080
+PlayResY: 1920
 WrapStyle: 1
 
 [V4+ Styles]
@@ -121,9 +111,7 @@ Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
             clean_text = seg.text.strip().replace("\n", "\\N")
             f.write(f"Dialogue: 0,{start},{end},Default,,0,0,0,,{clean_text}\n")
 
-# ==========================================
-# 4. API ENDPOINTS
-# ==========================================
+# --- API ---
 
 @app.post("/api/analyze")
 async def analyze_media(file: UploadFile = File(...)):
@@ -146,7 +134,7 @@ async def analyze_media(file: UploadFile = File(...)):
                 "text": seg.text.strip()
             })
             
-        return {"status": "success", "file_id": file_id, "ext": file_ext, "segments": results}
+        return {"status": "success", "file_id": file_id, "segments": results}
         
     except Exception as e:
         return JSONResponse(status_code=500, content={"error": str(e)})
@@ -174,7 +162,7 @@ async def render_video(data: ProcessRequest):
             "ffmpeg", "-y",
             "-i", input_path,
             "-vf", f"ass={ass_path}",
-            "-c:v", "libx264", "-preset", "ultrafast", "-crf", "24",
+            "-c:v", "libx264", "-preset", "ultrafast", "-crf", "26",
             "-c:a", "aac",
             output_path
         ]
@@ -192,9 +180,7 @@ async def get_file(filename: str):
         return FileResponse(path)
     return JSONResponse(status_code=404, content={"error": "File missing"})
 
-# ==========================================
-# 5. FRONTEND
-# ==========================================
+# --- FRONTEND ---
 
 @app.get("/", response_class=HTMLResponse)
 async def interface():
@@ -204,430 +190,501 @@ 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>SubMagic Pro</title>
-    <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;500;700;900&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 {
-            --bg-dark: #111827;
-            --bg-card: #1f2937;
+            --bg-dark: #0f172a;
+            --bg-card: #1e293b;
             --primary: #8b5cf6;
+            --primary-glow: rgba(139, 92, 246, 0.5);
             --accent: #f43f5e;
-            --text-main: #f9fafb;
-            --text-muted: #9ca3af;
-            --border: #374151;
+            --text-main: #f8fafc;
+            --text-muted: #94a3b8;
+            --border: #334155;
+            --success: #10b981;
         }
-        * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; outline: none; }
+
+        * { box-sizing: border-box; outline: none; -webkit-tap-highlight-color: transparent; }
+        
         body {
             font-family: 'Vazirmatn', sans-serif;
             background-color: var(--bg-dark);
             color: var(--text-main);
             margin: 0;
             padding: 0;
-            height: 100vh;
+            overflow-x: hidden;
+            min-height: 100vh;
             display: flex;
             flex-direction: column;
+        }
+
+        .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;
         }
-        
-        /* --- COMPONENTS --- */
-        .header {
+        .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); } }
+
+        .app-header {
             padding: 15px 20px;
-            background: rgba(31, 41, 55, 0.9);
+            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;
+            position: sticky;
+            top: 0;
         }
-        .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; }
+        .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; }
         
-        .container {
+        .app-body {
             flex: 1;
-            display: grid;
-            grid-template-columns: 1fr;
-            height: 100%;
-            overflow: hidden;
-            position: relative;
+            display: flex;
+            flex-direction: column;
+            padding: 20px;
+            max-width: 1200px;
+            margin: 0 auto;
+            width: 100%;
         }
-        @media(min-width: 1024px) { .container { grid-template-columns: 400px 1fr; } }
 
-        .panel {
-            padding: 20px;
-            overflow-y: auto;
+        /* --- VIEWS --- */
+        .view { display: none; animation: fadeIn 0.4s ease; }
+        .view.active { display: block; }
+        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
+
+        .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;
-            flex-direction: column;
-            gap: 20px;
+            align-items: center;
+            justify-content: center;
+            gap: 10px;
+            color: white;
+        }
+        .btn-primary {
+            background: linear-gradient(135deg, var(--primary), #4338ca);
+            box-shadow: 0 0 20px var(--primary-glow);
         }
-        .panel-left { background: var(--bg-card); border-left: 1px solid var(--border); z-index: 10; }
-        .panel-right { background: var(--bg-dark); }
+        .btn-primary:active { transform: scale(0.98); }
         
-        /* --- UPLOAD --- */
         .upload-zone {
             border: 2px dashed var(--border);
-            border-radius: 16px;
-            padding: 40px 20px;
-            text-align: center;
+            border-radius: 20px;
+            height: 300px;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
             cursor: pointer;
             transition: 0.3s;
-            margin-top: 50px;
+            background: rgba(255,255,255,0.02);
         }
-        .upload-zone:hover { border-color: var(--primary); background: rgba(139, 92, 246, 0.1); }
+        .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); }
+
+        /* --- EDITOR LAYOUT --- */
+        .editor-grid {
+            display: grid;
+            grid-template-columns: 1fr;
+            gap: 20px;
+        }
+        @media(min-width: 1024px) {
+            .editor-grid { grid-template-columns: 350px 1fr; }
+        }
+
+        .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); }
         
-        /* --- CONTROLS --- */
-        .control-group { margin-bottom: 15px; }
-        .label { display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--text-muted); margin-bottom: 8px; }
+        .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;
+        }
+
+        .control-group { margin-bottom: 18px; }
+        .control-label { display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--text-muted); margin-bottom: 8px; }
         
         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;
+            appearance: none; width: 20px; height: 20px;
+            background: var(--primary); border-radius: 50%; cursor: pointer;
         }
         input[type="color"] {
-            width: 100%; height: 40px; border: none; border-radius: 8px; background: transparent; cursor: pointer;
-        }
-        
-        .chips { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 5px; }
-        .chip {
-            padding: 8px 15px; background: var(--border); border-radius: 20px; font-size: 0.85rem; cursor: pointer; white-space: nowrap; transition: 0.2s;
+            width: 100%; height: 40px; border: none; border-radius: 8px;
+            cursor: pointer; background: transparent;
         }
-        .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;
-        }
-        .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;
+        .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;
         }
+        .chip.active { background: rgba(99, 102, 241, 0.2); color: var(--primary); border: 1px solid var(--primary); }
 
-        /* --- PREVIEW & RESULT --- */
-        .preview-container {
-            position: relative;
-            width: 100%;
-            aspect-ratio: 16/9;
-            background: #000;
-            border-radius: 12px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            overflow: hidden;
+        .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-1618005182384-a83a8bd57fbe?q=80&w=1000&auto=format&fit=crop');
             background-size: cover;
-            margin-bottom: 20px;
         }
         .preview-text {
-            position: absolute;
-            text-align: center;
-            pointer-events: none;
-            transition: 0.1s;
-            white-space: pre-wrap;
-            max-width: 90%;
+            position: absolute; text-align: center; pointer-events: none;
+            transition: 0.1s; line-height: 1.4; max-width: 80%;
         }
-        
-        /* --- RESULT VIDEO --- */
-        #resultContainer {
+
+        /* --- RESULT SECTION INLINE --- */
+        #inlineResult {
             margin-top: 20px;
+            border-top: 2px dashed var(--border);
             padding-top: 20px;
-            border-top: 1px solid var(--border);
+            text-align: center;
+            display: none;
             animation: fadeIn 0.5s;
         }
-        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;
+        .result-video { width: 100%; border-radius: 12px; margin-top: 10px; box-shadow: 0 0 30px rgba(0,0,0,0.5); }
+        .dl-btn {
+            display: inline-block; margin-top: 15px; padding: 12px 30px;
+            background: var(--success); color: white; text-decoration: none;
+            border-radius: 10px; font-weight: bold;
         }
-        .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; }
-
-        /* --- 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; }
+        /* LOADER */
+        .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; }
+        .spinner { width: 50px; height: 50px; border: 5px solid var(--border); border-top: 5px solid var(--primary); border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 20px; }
+        @keyframes spin { 100% { transform: rotate(360deg); } }
+
     </style>
 </head>
 <body>
 
-<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 class="bg-mesh"><div class="blob blob-1"></div><div class="blob blob-2"></div></div>
+
+    <div id="loader" class="loader-screen">
+        <div class="spinner"></div>
+        <h3 id="loaderMsg">در حال پردازش...</h3>
     </div>
-</div>
 
-<!-- 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>
+    <header class="app-header">
+        <div class="brand"><i class="fa-solid fa-bolt"></i> SubMaster</div>
+    </header>
+
+    <div class="app-body">
         
-        <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>
+        <!-- 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; color: var(--text-main);">آپلود ویدیو</h2>
+                    <div class="upload-zone" onclick="document.getElementById('fileIn').click()">
+                        <i class="fa-solid fa-cloud-arrow-up upload-icon"></i>
+                        <h3>انتخاب فایل</h3>
+                        <input type="file" id="fileIn" hidden accept="video/*" onchange="handleUpload()">
+                    </div>
+                </div>
             </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 2: EDITOR -->
+        <div id="view-editor" class="view">
+            <div class="editor-grid">
+                
+                <!-- SETTINGS PANEL -->
+                <div class="settings-panel card">
+                    <h2 style="color: var(--primary); margin-top:0;">🎨 استایل و خروجی</h2>
+                    
+                    <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">80</span></div>
+                        <!-- SLIDER INCREASED TO 400 FOR HUGE TEXT -->
+                        <input type="range" id="rngSize" min="30" max="400" value="80" oninput="updatePreview()">
+                    </div>
+
+                    <div class="control-group">
+                        <div class="control-label"><span>موقعیت عمودی</span></div>
+                        <input type="range" id="rngPos" min="10" max="600" value="150" oninput="updatePreview()">
+                    </div>
+
+                    <button class="btn btn-primary" onclick="startRender()">
+                        <i class="fa-solid fa-wand-magic-sparkles"></i> ساخت خروجی نهایی
+                    </button>
+
+                    <!-- INLINE RESULT AREA -->
+                    <div id="inlineResult">
+                        <h3 style="color: var(--success);">✅ ویدیو آماده شد!</h3>
+                        <video id="finalPlayer" controls class="result-video"></video>
+                        <a id="dlBtn" href="#" download class="dl-btn">دانلود ویدیو</a>
+                    </div>
+                </div>
+
+                <!-- TEXT EDITOR -->
+                <div class="card" style="display: flex; flex-direction: column; height: 80vh;">
+                    <h2>📝 ویرایش متن زیرنویس</h2>
+                    <div id="segmentsList" style="flex:1; overflow-y:auto;"></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>
 
-    <!-- PREVIEW & TEXT PANEL -->
-    <div class="panel panel-right">
-        <!-- Live CSS Preview -->
-        <div class="preview-container">
-            <div id="livePreview" class="preview-text">اینجا پیش‌نمایش زنده زیرنویس شماست</div>
-        </div>
-
-        <!-- 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>
-
-        <!-- Text Segments -->
-        <div id="segmentsList" style="padding-bottom: 50px;">
-            <!-- Segments injected here -->
-        </div>
-    </div>
-
-</div>
-
-<script>
-    let appState = {
-        fileId: null,
-        segments: [],
-        style: { backType: 'solid', font: 'lalezar' }
-    };
-
-    // --- 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'
+            }
+        };
 
-        document.getElementById('loader').style.display = 'flex';
-        document.getElementById('loaderText').innerText = "در حال آپلود و هوش مصنوعی...";
+        // --- UPLOAD ---
+        async function handleUpload() {
+            const file = document.getElementById('fileIn').files[0];
+            if(!file) return;
 
-        const formData = new FormData();
-        formData.append("file", file);
+            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();
+                
+                // Switch view
+                document.getElementById('view-upload').classList.remove('active');
+                document.getElementById('view-editor').classList.add('active');
+                updatePreview();
+
+            } catch(e) {
+                alert("Error: " + e.message);
+            } finally {
+                hideLoader();
+            }
+        }
 
-        try {
-            const res = await fetch("/api/analyze", { method: "POST", body: formData });
-            const data = await res.json();
+        // --- EDITOR ---
+        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);
+            });
             
-            if(data.error) throw new Error(data.error);
+            // Auto resize
+            document.querySelectorAll('.seg-input').forEach(tx => {
+                tx.style.height = 'auto';
+                tx.style.height = (tx.scrollHeight) + 'px';
+            });
+        }
 
-            appState.fileId = data.file_id;
-            appState.segments = data.segments;
+        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';
+        }
 
-            renderSegments();
-            
-            document.getElementById('viewUpload').classList.add('hidden');
-            document.getElementById('viewEditor').classList.remove('hidden');
-            updatePreview();
+        function formatTime(s) {
+            const m = Math.floor(s / 60);
+            const sec = Math.floor(s % 60);
+            return `${m}:${sec.toString().padStart(2, '0')}`;
+        }
 
-        } catch(e) {
-            alert("خطا: " + e.message);
-        } finally {
-            document.getElementById('loader').style.display = 'none';
+        // --- PREVIEW ---
+        function setStyle(type, el) {
+            appState.style.backType = type;
+            el.parentElement.querySelectorAll('.chip').forEach(c => c.classList.remove('active'));
+            el.classList.add('active');
+            updatePreview();
         }
-    }
 
-    // --- 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
-            }
-        };
+        function setFont(font, el) {
+            appState.style.font = font;
+            el.parentElement.querySelectorAll('.chip').forEach(c => c.classList.remove('active'));
+            el.classList.add('active');
+            updatePreview();
+        }
 
-        try {
-            const res = await fetch("/api/render", {
-                method: "POST",
-                headers: { "Content-Type": "application/json" },
-                body: JSON.stringify(payload)
-            });
-            const data = await res.json();
+        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';
             
-            if(data.error) throw new Error(data.error);
+            document.getElementById('lblSize').innerText = size;
 
-            // نمایش نتیجه در همان صفحه
-            const resultBox = document.getElementById('resultContainer');
-            resultBox.classList.remove('hidden');
+            txt.style.fontFamily = font;
+            // Scale down font size for preview box (approx 1/3 ratio)
+            txt.style.fontSize = (size / 3) + 'px'; 
+            txt.style.color = color;
+            txt.style.bottom = (pos / 6) + 'px'; 
             
-            const player = document.getElementById('finalPlayer');
-            // اضافه کردن زمان برای جلوگیری از کش شدن ویدیو قبلی
-            player.src = data.url + "?t=" + Date.now(); 
-            
-            document.getElementById('dlBtn').href = data.url;
+            if(appState.style.backType === 'solid') {
+                txt.style.backgroundColor = outline;
+                txt.style.textShadow = 'none';
+                txt.style.padding = '2px 8px';
+                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 = '2px 8px';
+                txt.style.borderRadius = '4px';
+            } else { 
+                txt.style.backgroundColor = 'transparent';
+                txt.style.webkitTextStroke = `1px ${outline}`;
+                txt.style.textShadow = `0 0 2px ${outline}`;
+                txt.style.padding = '0';
+            }
+        }
+
+        // --- RENDER ---
+        async function startRender() {
+            // Hide previous result if any
+            document.getElementById('inlineResult').style.display = 'none';
+            showLoader("در حال رندر ویدیو...");
             
-            // اسکرول نرم به ویدیو
-            resultBox.scrollIntoView({ behavior: 'smooth' });
+            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);
+
+                const resultBox = document.getElementById('inlineResult');
+                resultBox.style.display = 'block';
+                
+                // Timestamp to prevent caching
+                document.getElementById('finalPlayer').src = data.url + "?t=" + Date.now();
+                document.getElementById('dlBtn').href = data.url;
+                
+                // Smooth Scroll to result
+                resultBox.scrollIntoView({behavior: 'smooth'});
+
+            } catch(e) {
+                alert("Render Error: " + e.message);
+            } finally {
+                hideLoader();
+            }
+        }
 
-        } catch(e) {
-            alert("خطا: " + e.message);
-        } finally {
-            document.getElementById('loader').style.display = 'none';
+        function showLoader(msg) {
+            document.getElementById('loaderMsg').innerText = msg;
+            document.getElementById('loader').classList.add('flex');
+        }
+        function hideLoader() {
+            document.getElementById('loader').classList.remove('flex');
         }
-    }
-</script>
 
+    </script>
 </body>
 </html>
     """