Update app.py

app.py

@@ -2,64 +2,57 @@ import os
 import shutil
 import subprocess
 import uuid
-import json
 from datetime import timedelta
-from fastapi import FastAPI, UploadFile, File, Form, Body
+from fastapi import FastAPI, UploadFile, File
 from fastapi.responses import HTMLResponse, FileResponse, JSONResponse
-from fastapi.staticfiles import StaticFiles
 from faster_whisper import WhisperModel
 from pydantic import BaseModel
 from typing import List
 
 app = FastAPI()
 
-# --- تنظیمات ---
+# --- تنظیمات سیستم ---
 TEMP_DIR = "temp"
 os.makedirs(TEMP_DIR, exist_ok=True)
 
-# لود مدل
-print("Loading Whisper AI...")
+# لود مدل هوش مصنوعی
+print("⏳ Loading AI Model...")
 model = WhisperModel("small", device="cpu", compute_type="int8")
-print("Model Loaded!")
+print("✅ AI Model Loaded!")
 
-# --- مدل‌های داده (برای دریافت اطلاعات از سمت کاربر) ---
-class SegmentData(BaseModel):
+# --- مدل‌های ورودی (Schema) ---
+class Segment(BaseModel):
     start: float
     end: float
     text: str
 
-class BurnRequest(BaseModel):
-    file_id: str
-    style: str
+class StyleOptions(BaseModel):
     font: str
-    segments: List[SegmentData]
-
-# --- تعریف استایل‌ها ---
-STYLES_CONFIG = {
-    "hormozi": {
-        "name": "هرمزی (زرد)",
-        "ass_header": "Style: Default,{font_name},60,&H00000000,&H000000FF,&H00000000,&H0000FFFF,1,0,0,0,100,100,0,0,3,2,0,2,10,10,180,1"
-    },
-    "cinema": {
-        "name": "سینمایی (کادر تیره)",
-        "ass_header": "Style: Default,{font_name},50,&H00FFFFFF,&H000000FF,&H00000000,&H80000000,0,0,0,0,100,100,0,0,3,0,0,2,10,10,50,1"
-    },
-    "neon": {
-        "name": "نئون (آبی)",
-        "ass_header": "Style: Default,{font_name},60,&H00FFFFFF,&H000000FF,&H00FF0000,&H00000000,1,0,0,0,100,100,0,0,1,3,1,2,10,10,150,1"
-    },
-    "clean": {
-        "name": "ساده (سفید با حاشیه)",
-        "ass_header": "Style: Default,{font_name},55,&H00FFFFFF,&H000000FF,&H00000000,&H00000000,1,0,0,0,100,100,0,0,1,2,1,2,10,10,100,1"
-    }
-}
+    font_size: int
+    primary_color: str    # Hex (#RRGGBB)
+    outline_color: str    # Hex
+    back_type: str        # 'outline', 'box_transparent', 'box_solid'
+    outline_width: float
+    margin_v: int         # فاصله از پایین
+
+class BurnPayload(BaseModel):
+    file_id: str
+    style: StyleOptions
+    segments: List[Segment]
 
-FONTS_CONFIG = {
-    "vazir": "Vazirmatn",
-    "lalezar": "Lalezar"
-}
+# --- توابع تبدیل رنگ و زمان ---
 
-# --- توابع کمکی ---
+def hex_to_ass_color(hex_color, alpha="00"):
+    """
+    تبدیل رنگ وب (#RRGGBB) به فرمت عجیب ASS (&HAlphaBlueGreenRed)
+    """
+    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]
+    # فرمت ASS برعکس است: Blue Green Red
+    return f"&H{alpha}{b}{g}{r}"
 
 def format_timestamp(seconds: float):
     td = timedelta(seconds=seconds)
@@ -70,10 +63,27 @@ def format_timestamp(seconds: float):
     centisecs = int(td.microseconds / 10000)
     return f"{hours:01d}:{minutes:02d}:{secs:02d}.{centisecs:02d}"
 
-def create_ass_file(segments, output_file, style_key, font_key):
-    font_name = FONTS_CONFIG.get(font_key, "Vazirmatn")
-    style_template = STYLES_CONFIG.get(style_key, STYLES_CONFIG["hormozi"])["ass_header"]
-    final_style = style_template.replace("{font_name}", font_name)
+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")
+    outline_c = hex_to_ass_color(style.outline_color, "00")
+    
+    # تنظیمات پس‌زمینه
+    border_style = "1" # 1=Outline, 3=Box
+    back_color = "&H00000000"
+    
+    if style.back_type == "outline":
+        border_style = "1"
+        back_color = "&H00000000" # مهم نیست
+    elif 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") # رنگ کادر کامل
 
     header = f"""[Script Info]
 ScriptType: v4.00+
@@ -83,291 +93,328 @@ WrapStyle: 0
 
 [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
-{final_style}
+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
 
 [Events]
 Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
 """
-    with open(output_file, "w", encoding="utf-8") as f:
-        f.write(header)
-        for seg in segments:
+    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)
-            text = seg.text.strip().replace("\n", " ")
-            f.write(f"Dialogue: 0,{start},{end},Default,,0,0,0,,{text}\n")
+            # حذف کاراکترهای مزاحم
+            clean_text = seg.text.strip().replace("\n", " ")
+            f.write(f"Dialogue: 0,{start},{end},Default,,0,0,0,,{clean_text}\n")
+
+# --- API Endpoints ---
 
-def burn_subtitles(video_path, ass_path, output_path):
+@app.post("/api/upload")
+async def upload_video(file: UploadFile = File(...)):
     try:
-        subprocess.run([
+        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)
+            
+        # پردازش هوش مصنوعی
+        segments_gen, _ = model.transcribe(file_path, language="fa", beam_size=5)
+        
+        segments = []
+        for s in segments_gen:
+            segments.append({"start": s.start, "end": s.end, "text": s.text.strip()})
+            
+        return {"file_id": file_id, "segments": segments}
+    except Exception as e:
+        return JSONResponse(status_code=500, content={"error": str(e)})
+
+@app.post("/api/burn")
+async def burn_video(payload: BurnPayload):
+    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"
+        
+        if not os.path.exists(input_path):
+            return JSONResponse(status_code=404, content={"error": "فایل منقضی شده است. لطفا دوباره آپلود کنید."})
+            
+        # 1. ساخت فایل ASS با استایل دقیق
+        create_ass_file(payload, ass_path)
+        
+        # 2. رندر نهایی
+        # از ultrafast استفاده می‌کنیم تا کاربر معطل نشود
+        cmd = [
             "ffmpeg", "-y",
-            "-i", video_path,
+            "-i", input_path,
             "-vf", f"ass={ass_path}",
             "-c:v", "libx264", "-preset", "ultrafast", "-crf", "26",
             "-c:a", "copy",
             output_path
-        ], check=True)
-        return True
+        ]
+        subprocess.run(cmd, check=True)
+        
+        return {"url": f"/download/{payload.file_id}_final.mp4"}
     except Exception as e:
-        print(f"FFmpeg Error: {e}")
-        return False
+        return JSONResponse(status_code=500, content={"error": str(e)})
 
-# --- روت‌ها ---
+@app.get("/download/{filename}")
+async def download(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"})
+
+# --- رابط کاربری حرفه‌ای (Frontend) ---
 
 @app.get("/", response_class=HTMLResponse)
-async def home():
+async def ui():
     return """
 <!DOCTYPE html>
 <html lang="fa" dir="rtl">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>ویرایشگر زیرنویس هوشمند</title>
-    <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;700;900&display=swap" rel="stylesheet">
+    <title>استودیو زیرنویس پرو</title>
+    <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;600;800&display=swap" rel="stylesheet">
     <style>
-        :root { --primary: #4361ee; --bg: #f8f9fa; --card: #ffffff; --border: #e9ecef; }
-        body { font-family: 'Vazirmatn', sans-serif; background: var(--bg); margin: 0; padding: 20px; }
+        :root { --primary: #3A86FF; --accent: #FF006E; --bg: #F8F9FA; --card: #fff; --text: #212529; }
+        * { box-sizing: border-box; outline: none; }
+        body { font-family: 'Vazirmatn', sans-serif; background: var(--bg); color: var(--text); margin: 0; padding: 20px; }
+        
+        .main-container { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 20px; }
+        @media(min-width: 768px) { .main-container { grid-template-columns: 1.2fr 0.8fr; } }
         
-        .container { max-width: 800px; margin: 0 auto; background: var(--card); padding: 25px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
-        h1 { text-align: center; color: #2b2d42; margin-bottom: 30px; }
+        .card { background: var(--card); padding: 20px; border-radius: 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.05); }
+        h2 { margin-top: 0; font-size: 1.2rem; color: var(--primary); border-bottom: 2px solid #f1f3f5; padding-bottom: 10px; }
         
-        /* آپلودر */
-        .upload-area { border: 2px dashed var(--primary); border-radius: 16px; padding: 40px; text-align: center; cursor: pointer; background: #f0f4ff; transition: 0.3s; }
-        .upload-area:hover { background: #e0e7ff; }
+        /* Uploader */
+        .upload-box { border: 2px dashed #dee2e6; padding: 40px; text-align: center; border-radius: 12px; cursor: pointer; transition: 0.3s; }
+        .upload-box:hover { border-color: var(--primary); background: #e7f5ff; }
         
-        /* ادیتور */
-        .editor-area { display: none; margin-top: 30px; }
-        .segment-box { background: #fff; border: 1px solid var(--border); padding: 15px; border-radius: 12px; margin-bottom: 10px; display: flex; gap: 10px; align-items: center; box-shadow: 0 2px 5px rgba(0,0,0,0.02); }
-        .time-badge { background: #e9ecef; padding: 5px 10px; border-radius: 8px; font-size: 0.8rem; color: #495057; white-space: nowrap; direction: ltr; }
-        .text-input { flex-grow: 1; padding: 10px; border: 1px solid #ced4da; border-radius: 8px; font-family: 'Vazirmatn'; font-size: 1rem; }
-        .text-input:focus { border-color: var(--primary); outline: none; }
+        /* Editor List */
+        .segment-list { max-height: 500px; overflow-y: auto; padding-left: 5px; }
+        .segment-item { background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 10px; padding: 10px; margin-bottom: 10px; display: flex; gap: 10px; align-items: center; }
+        .time-tag { font-size: 0.75rem; background: #212529; color: #fff; padding: 2px 6px; border-radius: 4px; height: fit-content; }
+        .text-edit { width: 100%; border: 1px solid transparent; background: transparent; font-family: inherit; font-size: 1rem; padding: 5px; }
+        .text-edit:focus { border-bottom: 1px solid var(--primary); }
+
+        /* Controls */
+        .control-group { margin-bottom: 15px; }
+        .control-group label { display: block; font-size: 0.85rem; font-weight: bold; margin-bottom: 5px; color: #495057; }
+        .row { display: flex; gap: 10px; }
         
-        /* تنظیمات */
-        .settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 20px; background: #f8f9fa; padding: 15px; border-radius: 12px; }
-        select { width: 100%; padding: 10px; border-radius: 8px; border: 1px solid #ced4da; font-family: 'Vazirmatn'; }
+        input[type="color"] { width: 100%; height: 40px; border: none; cursor: pointer; padding: 0; border-radius: 8px; }
+        input[type="range"] { width: 100%; }
+        select { width: 100%; padding: 8px; border-radius: 8px; border: 1px solid #ced4da; font-family: inherit; }
         
-        .btn { background: var(--primary); color: white; border: none; width: 100%; padding: 15px; border-radius: 12px; font-size: 1.1rem; font-weight: bold; cursor: pointer; transition: 0.2s; margin-top: 10px; }
-        .btn:disabled { background: #ccc; cursor: not-allowed; }
-        .btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(67, 97, 238, 0.3); }
+        .action-btn { width: 100%; padding: 15px; background: var(--primary); color: white; border: none; border-radius: 12px; font-weight: 800; font-size: 1.1rem; cursor: pointer; transition: 0.2s; margin-top: 20px; }
+        .action-btn:disabled { background: #adb5bd; cursor: wait; }
+        .action-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(58, 134, 255, 0.4); }
         
-        .loader { display: none; text-align: center; margin: 20px 0; }
-        .spinner { width: 30px; height: 30px; border: 3px solid #f3f3f3; border-top: 3px solid var(--primary); border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 10px; }
-        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
+        .hidden { display: none; }
+        .loader-overlay { position: fixed; top:0; left:0; width:100%; height:100%; background: rgba(255,255,255,0.9); z-index: 999; display: flex; flex-direction: column; justify-content: center; align-items: center; }
+        .spinner { width: 50px; height: 50px; border: 5px solid #f3f3f3; border-top: 5px solid var(--primary); border-radius: 50%; animation: spin 1s linear infinite; }
+        @keyframes spin { 100% { transform: rotate(360deg); } }
         
-        #finalResult { display: none; text-align: center; margin-top: 30px; }
-        video { width: 100%; max-height: 500px; border-radius: 12px; background: #000; }
-        .dl-btn { display: inline-block; background: #2ec4b6; color: white; text-decoration: none; padding: 12px 30px; border-radius: 10px; font-weight: bold; margin-top: 10px; }
+        .result-box { text-align: center; }
+        .dl-link { display: inline-block; margin-top: 10px; padding: 10px 20px; background: #06d6a0; color: white; text-decoration: none; border-radius: 8px; font-weight: bold; }
     </style>
 </head>
 <body>
-    <div class="container">
-        <h1>✂️ ویرایشگر زیرنویس هوشمند</h1>
+
+<div id="mainLoader" class="loader-overlay hidden">
+    <div class="spinner"></div>
+    <h3 id="loaderText" style="margin-top: 15px;">در حال پردازش...</h3>
+</div>
+
+<div class="main-container">
+    <!-- ستون راست: ویرایشگر متن -->
+    <div class="card">
+        <h2>📝 ویرایش متن‌ها</h2>
         
-        <!-- مرحله ۱: آپلود -->
-        <div class="upload-area" id="uploadArea" onclick="document.getElementById('fileInput').click()">
-            <div style="font-size: 40px;">📂</div>
-            <p id="uploadText">برای انتخاب ویدیو کلیک کنید</p>
-            <input type="file" id="fileInput" accept="video/*" hidden onchange="handleUpload(this)">
+        <div id="uploadSection">
+            <div class="upload-box" onclick="document.getElementById('videoInput').click()">
+                <div style="font-size: 3rem;">📤</div>
+                <p>کلیک کنید یا ویدیو را اینجا رها کنید</p>
+                <input type="file" id="videoInput" hidden accept="video/*" onchange="uploadVideo()">
+            </div>
         </div>
 
-        <div id="analyzeLoader" class="loader">
-            <div class="spinner"></div>
-            <span>در حال استخراج متن از ویدیو... (لطفا صبر کنید)</span>
+        <div id="editorSection" class="hidden">
+            <div class="segment-list" id="segmentsContainer"></div>
         </div>
+    </div>
 
-        <!-- مرحله ۲: ویرایش -->
-        <div id="editorArea" class="editor-area">
-            <div class="settings-grid">
-                <div>
-                    <label>استایل:</label>
-                    <select id="styleSelect">
-                        <option value="hormozi">هرمزی (زرد)</option>
-                        <option value="cinema">سینمایی (تیره)</option>
-                        <option value="neon">نئون (آبی)</option>
-                        <option value="clean">ساده</option>
-                    </select>
-                </div>
-                <div>
-                    <label>فونت:</label>
-                    <select id="fontSelect">
-                        <option value="vazir">وزیر (رسمی)</option>
-                        <option value="lalezar">لاله زار (تیتر)</option>
-                    </select>
-                </div>
+    <!-- ستون چپ: تنظیمات گرافیکی -->
+    <div class="card" id="settingsPanel" style="opacity: 0.5; pointer-events: none;">
+        <h2>🎨 تنظیمات ظاهری</h2>
+        
+        <div class="row">
+            <div class="control-group" style="flex:1">
+                <label>رنگ متن</label>
+                <input type="color" id="primaryColor" value="#FFFFFF">
+            </div>
+            <div class="control-group" style="flex:1">
+                <label>رنگ حاشیه/کادر</label>
+                <input type="color" id="outlineColor" value="#000000">
             </div>
+        </div>
 
-            <h3>📝 متن‌ها را ویرایش کنید:</h3>
-            <div id="segmentsContainer"></div>
-            
-            <button id="burnBtn" class="btn" onclick="burnVideo()">🔥 ساخت ویدیو نهایی</button>
+        <div class="control-group">
+            <label>حالت کادر</label>
+            <select id="backType">
+                <option value="outline">فقط حاشیه (Outline)</option>
+                <option value="box_transparent">کادر مشکی شفاف (سینمایی)</option>
+                <option value="box_solid" selected>کادر رنگی پررنگ (هرمزی)</option>
+            </select>
         </div>
 
-        <div id="burnLoader" class="loader">
-            <div class="spinner"></div>
-            <span>در حال چسباندن زیرنویس‌ها...</span>
+        <div class="row">
+            <div class="control-group" style="flex:1">
+                <label>فونت</label>
+                <select id="fontSelect">
+                    <option value="vazir">وزیر (رسمی)</option>
+                    <option value="lalezar">لاله زار (تیتر)</option>
+                </select>
+            </div>
         </div>
 
-        <!-- مرحله ۳: دانلود -->
-        <div id="finalResult">
-            <h3>✅ ویدیو آماده شد!</h3>
-            <video id="previewVideo" controls></video>
-            <br>
-            <a id="downloadLink" class="dl-btn" download>دانلود ویدیو</a>
-            <br><br>
-            <button onclick="location.reload()" style="background:none; border:none; color:#666; cursor:pointer;">شروع دوباره</button>
+        <div class="control-group">
+            <label>اندازه متن: <span id="fontSizeVal">60</span></label>
+            <input type="range" id="fontSize" min="20" max="120" value="60" oninput="updateVal('fontSizeVal', this.value)">
         </div>
-    </div>
 
-    <script>
-        let currentFileId = null;
-        let currentSegments = [];
+        <div class="control-group">
+            <label>ضخامت حاشیه: <span id="outlineWidthVal">2</span></label>
+            <input type="range" id="outlineWidth" min="0" max="10" step="0.5" value="2" oninput="updateVal('outlineWidthVal', this.value)">
+        </div>
 
-        async function handleUpload(input) {
-            const file = input.files[0];
-            if (!file) return;
+        <div class="control-group">
+            <label>فاصله از پایین: <span id="marginVal">150</span></label>
+            <input type="range" id="marginV" min="10" max="500" value="150" oninput="updateVal('marginVal', this.value)">
+        </div>
 
-            // UI Update
-            document.getElementById('uploadArea').style.display = 'none';
-            document.getElementById('analyzeLoader').style.display = 'block';
+        <button id="burnBtn" class="action-btn" onclick="burnProcess()">🔥 ساخت و دانلود</button>
+        
+        <div id="finalSection" class="result-box hidden">
+            <hr>
+            <p>✅ ویدیو آماده شد!</p>
+            <a id="downloadLink" class="dl-link" href="#" download>دانلود ویدیو</a>
+            <br>
+            <button onclick="location.reload()" style="margin-top:10px; background:none; border:none; color:#999; cursor:pointer;">شروع مجدد</button>
+        </div>
+    </div>
+</div>
 
-            const formData = new FormData();
-            formData.append("file", file);
+<script>
+    let globalFileId = null;
+    let globalSegments = [];
 
-            try {
-                const res = await fetch("/api/analyze", { method: "POST", body: formData });
-                const data = await res.json();
+    function updateVal(id, val) { document.getElementById(id).innerText = val; }
 
-                if (data.error) throw new Error(data.error);
+    async function uploadVideo() {
+        const fileInput = document.getElementById('videoInput');
+        if (!fileInput.files[0]) return;
 
-                currentFileId = data.file_id;
-                currentSegments = data.segments;
-                
-                renderEditor();
-            } catch (e) {
-                alert("خطا: " + e.message);
-                location.reload();
-            }
-        }
+        showLoader("در حال آپلود و هوش مصنوعی... (ممکن است ۱-۲ دقیقه طول بکشد)");
+        
+        const formData = new FormData();
+        formData.append("file", fileInput.files[0]);
 
-        function renderEditor() {
-            document.getElementById('analyzeLoader').style.display = 'none';
-            const container = document.getElementById('segmentsContainer');
-            container.innerHTML = "";
-
-            currentSegments.forEach((seg, index) => {
-                const div = document.createElement('div');
-                div.className = 'segment-box';
-                
-                const time = document.createElement('div');
-                time.className = 'time-badge';
-                // نمایش زمان به فرمت ساده (ثانیه)
-                time.innerText = `${Math.floor(seg.start)}s - ${Math.floor(seg.end)}s`;
-                
-                const input = document.createElement('input');
-                input.type = 'text';
-                input.className = 'text-input';
-                input.value = seg.text.trim();
-                input.oninput = (e) => { currentSegments[index].text = e.target.value; };
-
-                div.appendChild(time);
-                div.appendChild(input);
-                container.appendChild(div);
-            });
+        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;
+            
+            renderEditor();
+            enableSettings();
+            hideLoader();
+            
+            document.getElementById('uploadSection').classList.add('hidden');
+            document.getElementById('editorSection').classList.remove('hidden');
 
-            document.getElementById('editorArea').style.display = 'block';
+        } catch (e) {
+            hideLoader();
+            alert("خطا: " + e.message);
         }
+    }
+
+    function renderEditor() {
+        const container = document.getElementById('segmentsContainer');
+        container.innerHTML = "";
+        
+        globalSegments.forEach((seg, idx) => {
+            const div = document.createElement('div');
+            div.className = 'segment-item';
+            div.innerHTML = `
+                <span class="time-tag">${Math.round(seg.start)}s</span>
+                <input class="text-edit" value="${seg.text}" oninput="globalSegments[${idx}].text = this.value">
+            `;
+            container.appendChild(div);
+        });
+    }
 
-        async function burnVideo() {
-            document.getElementById('editorArea').style.display = 'none';
-            document.getElementById('burnLoader').style.display = 'block';
+    function enableSettings() {
+        document.getElementById('settingsPanel').style.opacity = "1";
+        document.getElementById('settingsPanel').style.pointerEvents = "all";
+    }
 
-            const payload = {
-                file_id: currentFileId,
-                style: document.getElementById('styleSelect').value,
+    async function burnProcess() {
+        showLoader("در حال چسباندن زیرنویس روی ویدیو...");
+        
+        const payload = {
+            file_id: globalFileId,
+            segments: globalSegments,
+            style: {
                 font: document.getElementById('fontSelect').value,
-                segments: currentSegments
-            };
-
-            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);
-
-                document.getElementById('burnLoader').style.display = 'none';
-                document.getElementById('finalResult').style.display = 'block';
-                
-                const videoEl = document.getElementById('previewVideo');
-                videoEl.src = data.url;
-                document.getElementById('downloadLink').href = data.url;
-
-            } catch (e) {
-                alert("خطا در ساخت ویدیو: " + e.message);
-                document.getElementById('burnLoader').style.display = 'none';
-                document.getElementById('editorArea').style.display = 'block';
+                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: parseFloat(document.getElementById('outlineWidth').value),
+                margin_v: parseInt(document.getElementById('marginV').value)
             }
-        }
-    </script>
-</body>
-</html>
-    """
+        };
 
-@app.post("/api/analyze")
-async def analyze_video(file: UploadFile = File(...)):
-    try:
-        file_id = str(uuid.uuid4())
-        file_path = f"{TEMP_DIR}/{file_id}_raw.mp4"
-        
-        with open(file_path, "wb") as f:
-            shutil.copyfileobj(file.file, f)
+        try {
+            const res = await fetch("/api/burn", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify(payload)
+            });
+            const data = await res.json();
             
-        # استخراج متن
-        segments_gen, _ = model.transcribe(file_path, language="fa", beam_size=5)
-        
-        # تبدیل به فرمت JSON قابل ارسال
-        segments_data = []
-        for seg in segments_gen:
-            segments_data.append({
-                "start": seg.start,
-                "end": seg.end,
-                "text": seg.text
-            })
+            if (data.error) throw new Error(data.error);
             
-        return {"file_id": file_id, "segments": segments_data}
-        
-    except Exception as e:
-        return JSONResponse(status_code=500, content={"error": str(e)})
-
-@app.post("/api/burn")
-async def burn_video_api(data: BurnRequest):
-    try:
-        input_path = f"{TEMP_DIR}/{data.file_id}_raw.mp4"
-        ass_path = f"{TEMP_DIR}/{data.file_id}.ass"
-        output_path = f"{TEMP_DIR}/{data.file_id}_final.mp4"
-        
-        if not os.path.exists(input_path):
-            return JSONResponse(status_code=404, content={"error": "فایل یافت نشد (منقضی شده)"})
-
-        # 1. ساخت فایل ASS از روی دیتای ویرایش شده کاربر
-        create_ass_file(data.segments, ass_path, data.style, data.font)
-        
-        # 2. چسباندن
-        if burn_subtitles(input_path, ass_path, output_path):
-            # پاک کردن فایل‌های موقت
-            os.remove(input_path)
-            os.remove(ass_path)
-            return {"url": f"/download/{data.file_id}_final.mp4"}
-        else:
-            return JSONResponse(status_code=500, content={"error": "خطا در پردازش ویدیو"})
+            hideLoader();
+            document.getElementById('burnBtn').classList.add('hidden');
+            document.getElementById('finalSection').classList.remove('hidden');
+            document.getElementById('downloadLink').href = data.url;
             
-    except Exception as e:
-        return JSONResponse(status_code=500, content={"error": str(e)})
+        } catch (e) {
+            hideLoader();
+            alert("خطا در س��خت ویدیو: " + e.message);
+        }
+    }
 
-@app.get("/download/{filename}")
-async def download(filename: str):
-    path = f"{TEMP_DIR}/{filename}"
-    if os.path.exists(path): return FileResponse(path)
-    return JSONResponse(status_code=404, content={"error": "Not Found"})
+    function showLoader(text) {
+        document.getElementById('loaderText').innerText = text;
+        document.getElementById('mainLoader').classList.remove('hidden');
+    }
+    function hideLoader() {
+        document.getElementById('mainLoader').classList.add('hidden');
+    }
+</script>
+
+</body>
+</html>
+    """