Update webui/run_app.py

webui/run_app.py

@@ -1,318 +1,3 @@
-# =========================================================
-# MODULE: run_app.py
-# SYSTEM: ADVANCED RESOURCE & CONCURRENCY WORKSPACE CONTROL
-# FIX: REALTIME TERMINAL LOG PIPELINE & DISCONNECT MONITOR
-# AUTHOR: Abu Alone © 2026
-# =========================================================
-
-import os
-import sys
-import time
-import shutil
-import logging
-import subprocess
-from uuid import uuid4
-from loguru import logger
-from fastapi import FastAPI, Request, Form, HTTPException, BackgroundTasks
-from fastapi.responses import HTMLResponse, JSONResponse
-from fastapi.staticfiles import StaticFiles
-from fastapi.middleware.cors import CORSMiddleware
-
-# Import các logic cốt lõi tạo video (Giữ nguyên vẹn 100% cấu trúc của ông)
-from app.config import config
-from app.models.schema import VideoParams, VideoAspect, VideoConcatMode 
-from app.services import voice
-from app.services import task as tm
-from app.utils import utils
-
-# Đồng bộ hóa chặt chẽ với module quản lý luồng bảo mật
-import licensing_client
-
-app = FastAPI(title="AI Video Engine Commercial")
-
-app.add_middleware(
-    CORSMiddleware,
-    allow_origins=["*"],
-    allow_credentials=True,
-    allow_methods=["*"],
-    allow_headers=["*"],
-)
-
-# --- BỘ NHỚ LƯU TRỮ LOG TẠM THỜI ĐỂ ĐẨY REALTIME LÊN GIAO DIỆN ---
-GLOBAL_TERMINAL_LOGS = {}
-
-class LiveTerminalLogHandler(logging.Handler):
-    def emit(self, record):
-        try:
-            msg = self.format(record)
-            # Ghi log chung vào mọi task đang active để user nào cũng nhìn thấy tiến trình hệ thống
-            for task_id in list(GLOBAL_TERMINAL_LOGS.keys()):
-                GLOBAL_TERMINAL_LOGS[task_id].append(msg)
-        except Exception:
-            pass
-
-# Cấu hình loguru để đổ dữ liệu stream vào giao diện người dùng
-logger.add(lambda msg: [GLOBAL_TERMINAL_LOGS[tid].append(msg.strip()) for tid in list(GLOBAL_TERMINAL_LOGS.keys())], format="{time:YYYY-MM-DD HH:mm:ss} | {level} | {message}")
-
-# --- 1. SECRETS & CLOUDFLARE DEFAULTS ---
-PEXELS_KEY = os.getenv("PEXELS_KEY", "").strip()
-CF_TOKEN = os.getenv("CF_API_TOKEN", "").strip()
-CF_ID = os.getenv("CF_ACCOUNT_ID", "").strip()
-
-if PEXELS_KEY:
-    config.app["pexels_api_keys"] = [PEXELS_KEY]
-if CF_TOKEN and CF_ID:
-    config.app["llm_provider"] = "cloudflare"
-    config.app["cloudflare_account_id"] = CF_ID
-    config.app["cloudflare_api_key"] = CF_TOKEN
-    config.app["cloudflare_model_name"] = "@cf/meta/llama-3-8b-instruct"
-
-OUTPUT_DIR = utils.storage_dir("videos", True)
-if os.path.exists(OUTPUT_DIR):
-    app.mount("/static_videos", StaticFiles(directory=OUTPUT_DIR), name="static_videos")
-
-def get_voice_list():
-    path = os.path.join(os.path.dirname(__file__), "voice-list.txt")
-    if os.path.exists(path):
-        try:
-            with open(path, "r", encoding="utf-8") as f:
-                voices = [line.split("Name:")[-1].strip() for line in f if "Name:" in line]
-                if voices: return voices
-        except Exception as e:
-            logger.error(f"Error reading voice list: {e}")
-    return ["en-US-AvaNeural", "vi-VN-HoaiMyNeural"]
-
-# --- API CẬP NHẬT TRẠNG THÁI LUỒNG THỜI GIAN THỰC ĐỒNG BỘ MỖI GIÂY ---
-@app.get("/api/system-status")
-async def get_system_status(key: str = "", request: Request = None):
-    device_id = request.client.host if request else "MOBILE_DEFAULT_NODE"
-    try:
-        thread_data = licensing_client.get_thread_status_json()
-        active_str = thread_data["busy_channels"]
-        
-        is_valid, key_info = licensing_client.verify_and_get_license_info(key.strip(), device_id)
-        
-        if is_valid:
-            return {
-                "thread_string": active_str,
-                "key_info": {
-                    "status": "success",
-                    "type": key_info.get("tier", "FREE").lower(),
-                    "tx_id": key_info.get("tx_name", "N/A"),
-                    "amount": key_info.get("amount", "N/A"),
-                    "issued_date": key_info.get("tx_date", "N/A"),
-                    "expiry_date": key_info.get("expiry", "N/A"),
-                    "days_left": key_info.get("days_left", 0),
-                    "show_test_panel": key_info.get("show_test_panel", False)
-                }
-            }
-        else:
-            return {
-                "thread_string": active_str,
-                "key_info": { "status": "failed", "type": "free", "show_test_panel": False }
-            }
-    except Exception:
-        return { "thread_string": "0/6", "key_info": { "status": "failed", "type": "free", "show_test_panel": False } }
-# --- API CHUYÊN TRÁCH XỬ LÝ NÚT BẤM VALIDATE TOKEN (THÊM MỚI ĐỂ VÁ LỖI) ---
-@app.post("/api/validate-key")
-async def validate_user_key(request: Request):
-    try:
-        data = await request.json()
-        token = data.get("key", "").strip()
-    except Exception:
-        return JSONResponse(status_code=400, content={"status": "error", "message": "Invalid raw payload structure."})
-        
-    device_id = request.client.host if request else "MOBILE_DEFAULT_NODE"
-    
-    # Nếu để trống key, chặn ngay từ vòng gửi xe
-    if not token:
-        return JSONResponse(status_code=400, content={"status": "error", "message": "Access token cannot be empty!"})
-        
-    # Gọi licensing_client để kiểm tra tính hợp lệ thực tế
-    is_valid, key_info = licensing_client.verify_and_get_license_info(token, device_id)
-    
-    # NẾU KEY SAI/LỤI: Trả về trạng thái lỗi 401 Unauthorized để chặn đứng Frontend
-    if not is_valid:
-        return JSONResponse(
-            status_code=401, 
-            content={
-                "status": "error", 
-                "message": "Authentication Failed: Invalid or expired security token."
-            }
-        )
-        
-    # NẾU KEY ĐÚNG: Trả về thành công và đồng bộ dữ liệu VIP
-    return {
-        "status": "success",
-        "message": "Credentials verification payload synchronized.",
-        "tier": key_info.get("tier", "FREE").lower(),
-        "days_left": key_info.get("days_left", 0)
-    }
-    
-# --- API TRÍCH XUẤT LOG DIAGNOSTICS ĐỂ ĐẨY LÊN TERMINAL UI TỪNG GIÂY ---
-@app.get("/api/logs/{task_id}")
-async def get_task_logs(task_id: str):
-    logs = GLOBAL_TERMINAL_LOGS.get(task_id, ["Connecting to master container log channel..."])
-    return {"logs": "\n".join(logs)}
-
-# --- API KÍCH HOẠT QUY TRÌNH KIỂM THỬ GỌI FILE TESTER.PY CHO ADMIN ---
-@app.post("/api/admin/run-test")
-async def run_admin_test():
-    report = licensing_client.execute_admin_diagnostic_test()
-    return {"status": "success", "report": report}
-
-# --- API NGẮT TIẾN TRÌNH KHẨN CẤP KHI NHẤN NÚT STOP HOẶC RỚT MẠNG ---
-@app.post("/api/cancel-task")
-async def cancel_task(license_key: str = Form(""), request: Request = None):
-    device_id = request.client.host if request else "MOBILE_NODE_2026"
-    token = license_key.strip()
-    try:
-        released = licensing_client.force_abort_user_session(token, device_id)
-        if released:
-            return {"status": "success", "msg": "Task rendering forcefully terminated."}
-        return {"status": "error", "msg": "No active tasks found for this session."}
-    except Exception as e:
-        return {"status": "error", "msg": str(e)}
-
-# --- CƠ CHẾ GIÁM SÁT NGẮT KẾT NỐI NGẦM (F5 / RỚT MẠNG / ĐÓNG TAB) ---
-async def monitor_disconnect_stream(request: Request, token: str, device_id: str, slot: int):
-    """Vòng lặp ngầm theo dõi trạng thái mạng của thiết bị di động. Nếu ngắt kết nối -> Hủy tiến trình ngay lập tức."""
-    while True:
-        if await request.is_disconnected():
-            logger.warning(f"🔌 Disconnect Event Detected (F5 or Tab Closed) for Device {device_id}. Terminating stream.")
-            licensing_client.force_abort_user_session(token, device_id)
-            licensing_client.release_thread_slot(slot)
-            break
-        await time.sleep(1)
-
-# --- 3. CORE PROCESSING INTERFACE WITH WATERMARK & LIMITS ---
-@app.post("/api/generate")
-async def api_generate(
-    request: Request,
-    background_tasks: BackgroundTasks,
-    video_script: str = Form(...),
-    clip_duration: int = Form(10),
-    voice_rate: float = Form(1.0),
-    selected_voice: str = Form("en-US-AvaNeural"),
-    enable_subtitles: bool = Form(True),
-    enable_bgm: bool = Form(True),
-    license_key: str = Form("")
-):
-    if not video_script.strip():
-        return JSONResponse(status_code=400, content={"status": "error", "msg": "Please enter your script before generating!"})
-    
-    token = license_key.strip()
-    device_id = request.client.host if request.client else "MOBILE_NODE_2026"
-    
-    is_key_valid, key_info = licensing_client.verify_and_get_license_info(token, device_id)
-    is_vip_key = (key_info.get("tier") in ["VIP", "ADMIN"]) if is_key_valid else False
-    bypass_limits = key_info.get("bypass_limits", False)
-    
-    if not bypass_limits:
-        allowed, limit_res = licensing_client.check_generation_limits(token, device_id, is_vip_key)
-        if not allowed:
-            return JSONResponse(status_code=400, content={"status": "error", "msg": limit_res})
-            
-    success_alloc, slot_or_err = licensing_client.allocate_render_thread(token, device_id, is_vip_key)
-    if not success_alloc:
-        return JSONResponse(status_code=400, content={"status": "error", "msg": slot_or_err})
-        
-    allocated_slot = slot_or_err
-    current_pid = os.getpid()
-    licensing_client.register_process_to_slot(allocated_slot, token, device_id, is_vip_key, current_pid)
-    
-    # Đăng ký tiến trình kiểm tra rớt mạng song song
-    background_tasks.add_task(monitor_disconnect_stream, request, token, device_id, allocated_slot)
-    
-    task_id = f"TASK-{int(time.time())}"
-    GLOBAL_TERMINAL_LOGS[task_id] = [f"🚀 System allocated Thread Slot #{allocated_slot} for PID {current_pid}"]
-    
-    params = VideoParams(
-        video_subject=video_script[:30].strip(),
-        video_script=video_script,
-        video_aspect=VideoAspect.portrait, 
-        video_concat_mode=VideoConcatMode.random,
-        video_clip_duration=clip_duration,
-        voice_name=selected_voice,
-        voice_rate=voice_rate,
-        subtitle_enabled=enable_subtitles,
-        bgm_type="random" if enable_bgm else "",
-        n_threads=2
-    )
-    
-    try:
-        logger.info(f"[{task_id}] Starting Video Pipeline workflow...")
-        GLOBAL_TERMINAL_LOGS[task_id].append("⚡ Fetching assets from Pexels API and preparing TTS narrative structure...")
-        
-        result = tm.start(task_id=task_id, params=params)
-        
-        if result and "videos" in result and len(result["videos"]) > 0:
-            video_path = result["videos"][0]
-            if os.path.exists(video_path):
-                filename = os.path.basename(video_path)
-                
-                if not is_vip_key:
-                    GLOBAL_TERMINAL_LOGS[task_id].append("⚠️ Free tier session detected: Injecting mobile fluid watermark layer...")
-                    wm_filename = f"wm_{filename}"
-                    watermarked_path = os.path.join(OUTPUT_DIR, wm_filename)
-                    
-                    drawtext_filter = "drawtext=text='Hugging/AbuAlone09':x='mod(t*35,w)':y='mod(t*15,h)':fontsize=24:fontcolor=white@0.35"
-                    ffmpeg_cmd = [
-                        'ffmpeg', '-y', 
-                        '-i', video_path,
-                        '-vf', drawtext_filter,
-                        '-c:v', 'libx264', 
-                        '-pix_fmt', 'yuv420p', 
-                        '-c:a', 'copy', 
-                        watermarked_path
-                    ]
-                    
-                    subprocess.run(ffmpeg_cmd, stdout=subprocess.PIPE, stderr=subprocess.PIPE)
-                    if os.path.exists(watermarked_path):
-                        filename = wm_filename
-                
-                licensing_client.commit_generation_success(token, device_id, is_vip_key)
-                GLOBAL_TERMINAL_LOGS[task_id].append("✅ Rendering success. Exporting video stream to player node.")
-                
-                return {
-                    "status": "success", 
-                    "task_id": task_id,
-                    "video_url": f"/static_videos/{filename}"
-                }
-        
-        return JSONResponse(status_code=500, content={"status": "error", "task_id": task_id, "msg": "Render completed but output file not found."})
-        
-    except Exception as e:
-        logger.error(f"Execution Error: {str(e)}")
-        return JSONResponse(status_code=500, content={"status": "error", "task_id": task_id, "msg": f"Render Error: {str(e)}"})
-    finally:
-        licensing_client.release_thread_slot(allocated_slot)
-        # Giữ log thêm 30 giây để giao diện AJAX kịp kéo dòng cuối cùng về trước khi xóa sạch bộ nhớ tạm
-        background_tasks.add_task(lambda: [time.sleep(30), GLOBAL_TERMINAL_LOGS.pop(task_id, None)])
-
-# --- 4. GIAO DIỆN CHÍNH ---
-@app.get("/", response_class=HTMLResponse)
-async def index_page():
-    voices_options = "".join([f'<option value="{v}">{v}</option>' for v in get_voice_list()])
-    html_content = f"""
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>AI VIDEO ENGINE | Control Center</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
-    <style>
-        @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
-        body {{ font-family: 'Plus Jakarta Sans', sans-serif; background-color: #f1f5f9; background-image: radial-gradient(#cbd5e1 0.5px, transparent 0.5px); background-size: 24px 24px; }}
-        .glass-card {{ background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); border: 1px solid #ffffff; }}
-        .loading-box {{ display: none; background: rgba(220, 38, 38, 0.05); border: 2px dashed #dc2626; color: #991b1b; }}
-        .video-wrapper {{ border: none !important; background: transparent !important; box-shadow: none !important; width: 100%; max-width: 320px; margin: 0 auto; }}
-        video {{ width: 100%; border-radius: 2rem; display: block; box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1); }}
-        .log-box {{ background: #0f172a; color: #38bdf8; font-family: 'Courier New', Courier, monospace; overflow-y: auto; height: 180px; border-radius: 1.25rem; padding: 14px; font-size: 11px; line-height: 1.5; border: 1px solid #1e293b; }}
-    </style>
-</head>
 <body class="p-4 md:p-12 lg:p-16">
     <div class="max-w-7xl mx-auto">
         
@@ -363,26 +48,6 @@ async def index_page():
             </div>
         </div>
 
-        <div class="glass-card rounded-[2.5rem] p-6 shadow-lg border border-slate-200 mb-12">
-            <div class="text-slate-400 font-bold uppercase text-[10px] tracking-widest mb-4 text-center md:text-left">
-                <i class="fa-solid fa-chart-line mr-1 text-indigo-500"></i> Server Workspace Allocation Limits
-            </div>
-            <div class="grid grid-cols-1 md:grid-cols-4 gap-4 text-center font-medium text-sm text-slate-600">
-                <div class="bg-slate-50/60 p-4 rounded-2xl border border-slate-100">
-                    📋 Videos / Batch:<br><span class="text-indigo-600 font-black text-base">1 Video</span>
-                </div>
-                <div class="bg-slate-50/60 p-4 rounded-2xl border border-slate-100">
-                    📅 Daily Limit:<br><span class="text-indigo-600 font-black text-base">3 Videos / Day</span>
-                </div>
-                <div class="bg-slate-50/60 p-4 rounded-2xl border border-slate-100">
-                    ⏱️ Cooldown:<br><span class="text-indigo-600 font-black text-base">3 Hours</span>
-                </div>
-                <div class="bg-indigo-50/70 p-4 rounded-2xl border border-indigo-100 font-bold text-indigo-950">
-                    ⚙️ Active Cluster Load:<br><span id="liveThreadMonitor" class="text-indigo-700 font-black text-base">0/6 Running Threads</span>
-                </div>
-            </div>
-        </div>
-
         <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start mb-20">
             <div class="lg:col-span-7 glass-card rounded-[3rem] p-6 md:p-10 shadow-xl border border-slate-200">
                 <div class="flex items-center gap-4 mb-8">
@@ -451,7 +116,7 @@ async def index_page():
                 </form>
             </div>
 
-            <div class="lg:col-span-5 glass-card rounded-[3rem] p-6 md:p-10 shadow-xl border border-slate-200 h-full flex flex-col">
+            <div class="lg:col-span-5 glass-card rounded-[3rem] p-6 md:p-10 shadow-xl border border-slate-200 h-full flex flex-col justify-between">
                 <div class="flex items-center gap-4 mb-6">
                     <div class="w-12 h-12 bg-emerald-600 rounded-2xl flex items-center justify-center text-white shadow-lg shadow-emerald-200">
                         <i class="fa-solid fa-film text-xl"></i>
@@ -462,19 +127,14 @@ async def index_page():
                     </div>
                 </div>
 
-                <div id="loadingBox" class="loading-box rounded-2xl p-5 mb-4 text-xs md:text-sm leading-relaxed font-medium">
-                    <div class="flex items-center gap-2 text-red-700 font-bold mb-1">
-                        <i class="fa-solid fa-circle-notch animate-spin text-base"></i> <span>Processing Pipeline Active...</span>
+                <div id="loadingBox" class="loading-box rounded-2xl p-6 mb-6 text-sm leading-relaxed font-bold">
+                    <div class="flex items-center gap-2 text-red-700 font-extrabold mb-2 text-base">
+                        <i class="fa-solid fa-circle-notch animate-spin text-lg"></i> <span>Pipeline Rendering Operational...</span>
                     </div>
-                    Compilation cluster busy. Streaming server core metrics into terminal framework below.
-                </div>
-
-                <div class="mb-4">
-                    <div class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1.5"><i class="fa-solid fa-terminal"></i> Build Terminal Log Diagnostics</div>
-                    <div id="liveTerminalLog" class="log-box">Console idling. Initiate generation sequence to pipe live metrics...</div>
+                    Your video is being generated. This process takes a minimum of 5 minutes, please be patient. You can monitor the live rendering logs directly inside your Hugging Face space log console.
                 </div>
 
-                <div class="video-wrapper my-auto py-2">
+                <div class="video-wrapper my-auto py-4">
                     <video id="videoPlayer" controls playsinline poster="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=400">
                         <source id="videoSource" src="" type="video/mp4">
                     </video>
@@ -492,40 +152,6 @@ async def index_page():
 
     <script>
         let currentTaskId = null;
-        let logPollingTimer = null;
-        let runningStateActive = false;
-
-        const txtInput = document.getElementById("video_script");
-        const lblCounter = document.getElementById("charCounter");
-        
-        function enforceInputConstraints() {{
-            if(txtInput.value.length > 1500) {{
-                txtInput.value = txtInput.value.substring(0, 1500);
-            }}
-            lblCounter.innerText = txtInput.value.length + " / 1500 Chars";
-        }}
-        txtInput.addEventListener("input", enforceInputConstraints);
-        txtInput.addEventListener("paste", () => {{ setTimeout(enforceInputConstraints, 10); }});
-
-        async function runSystemStatusSync() {{
-            const currentToken = document.getElementById("licenseKey").value;
-            try {{
-                const response = await fetch("/api/system-status?key=" + encodeURIComponent(currentToken));
-                const data = await response.json();
-                
-                document.getElementById("liveThreadMonitor").innerText = data.thread_string + " Running Threads";
-                
-                const keyDetails = document.getElementById("keyDetails");
-                const adminPanel = document.getElementById("adminTestPanel");
-                
-                if(data.key_info.status === "success") {{
-                    if(data.key_info.type === "admin") {{
-                        keyDetails.innerHTML = '<div class="text-emerald-600"><i class="fa-solid fa-crown text-base mr-1"></i> Core System Status: ACCESS GRANTED (ADMIN MASTER CONTROL)</div>';
-                        adminPanel.classList.remove("hidden");
-                        
-    <script>
-        let currentTaskId = null;
-        let logPollingTimer = null;
         let runningStateActive = false;
 
         const txtInput = document.getElementById("video_script");
@@ -540,91 +166,53 @@ async def index_page():
         txtInput.addEventListener("input", enforceInputConstraints);
         txtInput.addEventListener("paste", () => {{ setTimeout(enforceInputConstraints, 10); }});
 
-        async function runSystemStatusSync() {{
-            const currentToken = document.getElementById("licenseKey").value.trim();
-            try {{
-                const response = await fetch("/api/system-status?key=" + encodeURIComponent(currentToken));
-                const data = await response.json();
-                
-                document.getElementById("liveThreadMonitor").innerText = data.thread_string + " Running Threads";
-                
-                const keyDetails = document.getElementById("keyDetails");
-                const adminPanel = document.getElementById("adminTestPanel");
-                
-                if(data.key_info.status === "success") {{
-                    if(data.key_info.type === "admin") {{
-                        keyDetails.innerHTML = '<div class="text-emerald-600"><i class="fa-solid fa-crown text-base mr-1"></i> Core System Status: ACCESS GRANTED (ADMIN MASTER CONTROL)</div>';
-                        adminPanel.classList.remove("hidden");
-                    }} else if(data.key_info.type === "vip") {{
-                        keyDetails.innerHTML = '<div class="text-indigo-600"><i class="fa-solid fa-gem text-base mr-1"></i> Core System Status: ACCESS GRANTED (VIP PRIVILEGES UNLOCKED)</div>';
-                        adminPanel.classList.add("hidden");
-                    }} else {{
-                        adminPanel.classList.add("hidden");
-                        keyDetails.innerHTML = `
-                            <div class="text-emerald-600 font-extrabold grid grid-cols-1 sm:grid-cols-2 gap-1 text-xs">
-                                <div><i class="fa-solid fa-check-circle"></i> SECURE TOKEN AUTHENTICATED</div>
-                                <div>🆔 TxID: $${{data.key_info.tx_id}}</div>
-                                <div>💰 Paid Metric: $${{data.key_info.amount}}</div>
-                                <div>📅 Registration: $${{data.key_info.issued_date}}</div>
-                                <div>⏳ Termination: $${{data.key_info.expiry_date}} ($${{data.key_info.days_left}} days remaining)</div>
-                            </div>
-                        `;
-                    }}
-                }} else {{
-                    adminPanel.classList.add("hidden");
-                    keyDetails.innerHTML = '<div><i class="fa-solid fa-circle-exclamation mr-1"></i> License Status: Unverified (Free Tier Restrictions Active)</div>';
-                }}
-            }} catch(e) {{ }}
-        }}
-        setInterval(runSystemStatusSync, 1000);
-
-        // --- HÀM XỬ LÝ CHECK SỰ KIỆN VALIDATE TOKEN KHI BẤM NÚT (SỬA LỖI NHẬP LỤI) ---
+        // HÀM NHẤN NÚT KIỂM TRA KEY: TRẢ VỀ TICK XANH HOẶC X ĐỎ KÈM BẢNG THÔNG TIN CHI TIẾT
         async function triggerVerificationHandshake() {{
             const currentToken = document.getElementById("licenseKey").value.trim();
             const keyDetails = document.getElementById("keyDetails");
+            const adminPanel = document.getElementById("adminTestPanel");
             
             if (!currentToken) {{
-                alert("❌ Please enter a token before validation!");
+                keyDetails.innerHTML = '<div class="text-amber-600 font-bold"><i class="fa-solid fa-triangle-exclamation mr-1"></i> Please enter an access token before validation!</div>';
                 return;
             }}
             
+            keyDetails.innerHTML = '<div class="text-blue-600 font-bold animate-pulse"><i class="fa-solid fa-spinner animate-spin mr-1"></i> Authenticating with license server cluster...</div>';
+            
             try {{
-                // Gọi trực tiếp đến API POST kiểm tra key chuyên dụng ở Backend
-                const response = await fetch("/api/validate-key", {{
-                    method: "POST",
-                    headers: {{ "Content-Type": "application/json" }},
-                    body: JSON.stringify({{ key: currentToken }})
-                }});
-                
+                const response = await fetch("/api/system-status?key=" + encodeURIComponent(currentToken));
                 const data = await response.json();
                 
-                if (!response.ok) {{
-                    // Nếu backend trả về 401 hoặc lỗi chặn, quăng lỗi xuống block catch bên dưới
-                    throw new Error(data.message || "Invalid or expired security token.");
+                if (data.key_info && data.key_info.status === "success") {{
+                    if (data.key_info.type === "admin") {{
+                        adminPanel.classList.remove("hidden");
+                    }} else {{
+                        adminPanel.classList.add("hidden");
+                    }}
+                    
+                    // HIỂN THỊ TICK XANH VÀ BẢNG THÔNG TIN CHI TIẾT CỦA KEY
+                    keyDetails.innerHTML = `
+                        <div class="text-emerald-600 font-extrabold grid grid-cols-1 gap-1.5 text-xs">
+                            <div class="text-emerald-700 font-black text-sm border-b border-emerald-100 pb-1 flex items-center gap-1">
+                                <i class="fa-solid fa-circle-check text-base"></i> [✅ KEY HỢP LỆ / VALID KEY]
+                            </div>
+                            <div>🆔 <strong>Mã giao dịch (TxID):</strong> ${{data.key_info.tx_id}}</div>
+                            <div>👤 <strong>Tên người dùng (Tier):</strong> ${{data.key_info.type.toUpperCase()}}</div>
+                            <div>💰 <strong>Số tiền (Amount Paid):</strong> ${{data.key_info.amount}}</div>
+                            <div>📅 <strong>Ngày cấp key (Issued Date):</strong> ${{data.key_info.issued_date}}</div>
+                            <div>⏳ <strong>Hạn sử dụng (Expiry Date):</strong> ${{data.key_info.expiry_date}} (${{data.key_info.days_left}} days left)</div>
+                        </div>
+                    `;
+                }} else {{
+                    adminPanel.classList.add("hidden");
+                    keyDetails.innerHTML = '<div class="text-rose-600 font-black text-sm flex items-center gap-1"><i class="fa-solid fa-circle-xmark text-base"></i> [❌ KEY KHÔNG HỢP LỆ / INVALID KEY] Key không tồn tại hoặc đã hết hạn!</div>';
                 }}
-                
-                // CHỈ BẮN THÔNG BÁO KHI KEY THỰC SỰ CHUẨN
-                alert("💚 " + data.message);
-                await runSystemStatusSync(); // Đồng bộ lại giao diện VIP/ADMIN ngay lập tức
-                
             }} catch (error) {{
-                // NẾU KEY SAI HOẶC BẤM LỤI: Báo lỗi đỏ và khóa quyền
-                alert("❌ " + error.message);
-                keyDetails.innerHTML = '<div><i class="fa-solid fa-circle-exclamation mr-1"></i> License Status: Authentication Failed (Token Rejected)</div>';
+                adminPanel.classList.add("hidden");
+                keyDetails.innerHTML = '<div class="text-rose-600 font-black text-xs"><i class="fa-solid fa-circle-xmark mr-1"></i> [❌ LỖI KẾT NỐI] Node xác thực không phản hồi.</div>';
             }}
         }}
 
-        function fetchLiveTerminalOutput() {{
-            if (!currentTaskId) return;
-            fetch("/api/logs/" + currentTaskId)
-                .then(res => res.json())
-                .then(data => {{
-                    const consoleElement = document.getElementById("liveTerminalLog");
-                    consoleElement.innerText = data.logs;
-                    consoleElement.scrollTop = consoleElement.scrollHeight; 
-                }});
-        }}
-
         async function triggerAdminTesterScript() {{
             const term = document.getElementById("diagnosticReportTerminal");
             term.classList.remove("hidden");
@@ -638,6 +226,7 @@ async def index_page():
             }}
         }}
 
+        // HÀM XỬ LÝ CLICK TẠO VIDEO & NÚT STOP THAY ĐỔI THEO FORM DATA ĐỒNG BỘ BACKEND
         async function handleRenderCycle(e) {{
             e.preventDefault();
             const targetBtn = document.getElementById("mainSubmitBtn");
@@ -647,9 +236,13 @@ async def index_page():
             
             if(runningStateActive) {{
                 if(confirm("Do you want to terminate the active rendering cycle immediately?")) {{
+                    // ĐÓNG GÓI FORM DATA ĐỂ CHẠY CHUẨN LỆNH CANCEL-TASK Ở BACKEND
                     const fData = new FormData();
                     fData.append("license_key", currentToken);
-                    await fetch("/api/cancel-task", {{ method: "POST", body: fData }});
+                    
+                    try {{
+                        await fetch("/api/cancel-task", {{ method: "POST", body: fData }});
+                    }} catch(err) {{ }}
                     revertUiLayoutToNormal();
                 }}
                 return;
@@ -661,11 +254,7 @@ async def index_page():
             iconObj.className = "fa-solid fa-circle-stop";
             
             document.getElementById("loadingBox").style.display = "block";
-            
             currentTaskId = "TASK-" + Math.floor(Date.now() / 1000);
-            document.getElementById("liveTerminalLog").innerText = "Establishing secure worker container scope for " + currentTaskId + "...";
-            
-            logPollingTimer = setInterval(fetchLiveTerminalOutput, 1000);
             
             const formObj = document.getElementById("videoForm");
             const payloadData = new FormData(formObj);
@@ -685,35 +274,4 @@ async def index_page():
                     player.load();
                     setTimeout(() => {{ player.play().catch(e => {{}}); }}, 200);
                     alert("✅ Video processing completed successfully!");
-                }} else {{
-                    alert("❌ " + serverResponse.msg);
-                }}
-            }} catch(err) {{
-                alert("❌ Connection lost or pipeline aborted.");
-            }} finally {{
-                revertUiLayoutToNormal();
-            }}
-        }}
-
-        function revertUiLayoutToNormal() {{
-            runningStateActive = false;
-            clearInterval(logPollingTimer);
-            document.getElementById("loadingBox").style.display = "none";
-            
-            const targetBtn = document.getElementById("mainSubmitBtn");
-            const iconObj = document.getElementById("btnIcon");
-            const textObj = document.getElementById("btnText");
-            
-            targetBtn.className = "w-full bg-indigo-600 text-white py-5 rounded-2xl font-black text-lg hover:bg-indigo-700 transition-all shadow-xl shadow-indigo-100 active:scale-95 flex items-center justify-center gap-2";
-            textObj.innerText = "GENERATE PRODUCTION VIDEO";
-            iconObj.className = "fa-solid fa-play";
-        }}
-    </script>
-</body>
-</html>
-"""
-    return HTMLResponse(content=html_content)
-
-if __name__ == "__main__":
-    import uvicorn
-    uvicorn.run(app, host="0.0.0.0", port=7860)
+                }