Update app.py

app.py

@@ -10,23 +10,9 @@ from gradio.themes import Soft
 from gradio.themes.utils import colors, fonts, sizes
 from deep_translator import GoogleTranslator
 
-# --- تعریف تم ---
-colors.steel_blue = colors.Color(
-    name="steel_blue",
-    c50="#EBF3F8",
-    c100="#D3E5F0",
-    c200="#A8CCE1",
-    c300="#7DB3D2",
-    c400="#529AC3",
-    c500="#4682B4",
-    c600="#3E72A0",
-    c700="#36638C",
-    c800="#2E5378",
-    c900="#264364",
-    c950="#1E3450",
-)
-
+# --- تعریف متغیرها ---
 device = torch.device("cuda" if torch.cuda.is_available() else "cpu")
+dtype = torch.bfloat16
 
 # --- بارگذاری مدل ---
 from diffusers import FlowMatchEulerDiscreteScheduler
@@ -34,9 +20,6 @@ from qwenimage.pipeline_qwenimage_edit_plus import QwenImageEditPlusPipeline
 from qwenimage.transformer_qwenimage import QwenImageTransformer2DModel
 from qwenimage.qwen_fa3_processor import QwenDoubleStreamAttnProcessorFA3
 
-dtype = torch.bfloat16
-device = "cuda" if torch.cuda.is_available() else "cpu"
-
 print("Loading pipeline...")
 pipe = QwenImageEditPlusPipeline.from_pretrained(
     "Qwen/Qwen-Image-Edit-2509",
@@ -50,30 +33,22 @@ pipe = QwenImageEditPlusPipeline.from_pretrained(
 ).to(device)
 
 # بارگذاری LoRA ها
-pipe.load_lora_weights("autoweeb/Qwen-Image-Edit-2509-Photo-to-Anime",
-                       weight_name="Qwen-Image-Edit-2509-Photo-to-Anime_000001000.safetensors",
-                       adapter_name="anime")
-pipe.load_lora_weights("dx8152/Qwen-Edit-2509-Multiple-angles",
-                       weight_name="镜头转换.safetensors",
-                       adapter_name="multiple-angles")
-pipe.load_lora_weights("dx8152/Qwen-Image-Edit-2509-Light_restoration",
-                       weight_name="移除光影.safetensors",
-                       adapter_name="light-restoration")
-pipe.load_lora_weights("dx8152/Qwen-Image-Edit-2509-Relight",
-                       weight_name="Qwen-Edit-Relight.safetensors",
-                       adapter_name="relight")
-pipe.load_lora_weights("dx8152/Qwen-Edit-2509-Multi-Angle-Lighting",
-                       weight_name="多角度灯光-251116.safetensors",
-                       adapter_name="multi-angle-lighting")
-pipe.load_lora_weights("tlennon-ie/qwen-edit-skin",
-                       weight_name="qwen-edit-skin_1.1_000002750.safetensors",
-                       adapter_name="edit-skin")
-pipe.load_lora_weights("lovis93/next-scene-qwen-image-lora-2509",
-                       weight_name="next-scene_lora-v2-3000.safetensors",
-                       adapter_name="next-scene")
-pipe.load_lora_weights("vafipas663/Qwen-Edit-2509-Upscale-LoRA",
-                       weight_name="qwen-edit-enhance_64-v3_000001000.safetensors",
-                       adapter_name="upscale-image")
+loras = {
+    "anime": ("autoweeb/Qwen-Image-Edit-2509-Photo-to-Anime", "Qwen-Image-Edit-2509-Photo-to-Anime_000001000.safetensors"),
+    "multiple-angles": ("dx8152/Qwen-Edit-2509-Multiple-angles", "镜头转换.safetensors"),
+    "light-restoration": ("dx8152/Qwen-Image-Edit-2509-Light_restoration", "移除光影.safetensors"),
+    "relight": ("dx8152/Qwen-Image-Edit-2509-Relight", "Qwen-Edit-Relight.safetensors"),
+    "multi-angle-lighting": ("dx8152/Qwen-Edit-2509-Multi-Angle-Lighting", "多角度灯光-251116.safetensors"),
+    "edit-skin": ("tlennon-ie/qwen-edit-skin", "qwen-edit-skin_1.1_000002750.safetensors"),
+    "next-scene": ("lovis93/next-scene-qwen-image-lora-2509", "next-scene_lora-v2-3000.safetensors"),
+    "upscale-image": ("vafipas663/Qwen-Edit-2509-Upscale-LoRA", "qwen-edit-enhance_64-v3_000001000.safetensors")
+}
+
+for name, (repo, weight) in loras.items():
+    try:
+        pipe.load_lora_weights(repo, weight_name=weight, adapter_name=name)
+    except Exception as e:
+        print(f"Error loading LoRA {name}: {e}")
 
 pipe.transformer.set_attn_processor(QwenDoubleStreamAttnProcessorFA3())
 MAX_SEED = np.iinfo(np.int32).max
@@ -90,71 +65,47 @@ LORA_MAPPING = {
     "افزایش کیفیت (Upscale)": "upscale-image"
 }
 
+# --- توابع کمکی ---
 def translate_prompt(text):
-    if not text:
-        return ""
+    if not text: return ""
     try:
-        translated = GoogleTranslator(source='auto', target='en').translate(text)
-        return translated
-    except Exception as e:
-        print(f"Translation Error: {e}")
+        return GoogleTranslator(source='auto', target='en').translate(text)
+    except:
         return text
 
 def update_dimensions_on_upload(image):
-    if image is None:
-        return 1024, 1024
-    
-    original_width, original_height = image.size
-    
-    if original_width > original_height:
-        new_width = 1024
-        aspect_ratio = original_height / original_width
-        new_height = int(new_width * aspect_ratio)
+    if image is None: return 1024, 1024
+    w, h = image.size
+    if w > h:
+        new_w = 1024
+        new_h = int(new_w * (h / w))
     else:
-        new_height = 1024
-        aspect_ratio = original_width / original_height
-        new_width = int(new_height * aspect_ratio)
-        
-    new_width = (new_width // 8) * 8
-    new_height = (new_height // 8) * 8
-    
-    return new_width, new_height
+        new_h = 1024
+        new_w = int(new_h * (w / h))
+    return (new_w // 8) * 8, (new_h // 8) * 8
 
 @spaces.GPU(duration=30)
-def infer(
-    input_image,
-    prompt,
-    lora_adapter_persian,
-    seed,
-    randomize_seed,
-    guidance_scale,
-    steps,
-    progress=gr.Progress(track_tqdm=True)
-):
+def infer(input_image, prompt, lora_adapter_persian, seed, randomize_seed, guidance_scale, steps, progress=gr.Progress(track_tqdm=True)):
     if input_image is None:
-        raise gr.Error("لطفاً یک تصویر برای ویرایش بارگذاری کنید.")
+        raise gr.Error("لطفاً تصویر را بارگذاری کنید.")
 
     english_prompt = translate_prompt(prompt)
-    adapter_internal_name = LORA_MAPPING.get(lora_adapter_persian)
-    
-    if adapter_internal_name:
-        pipe.set_adapters([adapter_internal_name], adapter_weights=[1.0])
+    adapter_name = LORA_MAPPING.get(lora_adapter_persian)
+    if adapter_name:
+        pipe.set_adapters([adapter_name], adapter_weights=[1.0])
     
     if randomize_seed:
         seed = random.randint(0, MAX_SEED)
 
     generator = torch.Generator(device=device).manual_seed(seed)
-    negative_prompt = "worst quality, low quality, bad anatomy, bad hands, text, error, missing fingers, extra digit, fewer digits, cropped, jpeg artifacts, signature, watermark, username, blurry"
-
-    original_image = input_image.convert("RGB")
-    width, height = update_dimensions_on_upload(original_image)
+    w, h = update_dimensions_on_upload(input_image)
 
     result = pipe(
-        image=original_image,
+        image=input_image.convert("RGB"),
         prompt=english_prompt,
-        negative_prompt=negative_prompt,
-        height=height,
-        width=width,
+        negative_prompt="worst quality, low quality, blurry, bad anatomy",
+        height=h,
+        width=w,
         num_inference_steps=steps,
         generator=generator,
         true_cfg_scale=guidance_scale,
@@ -162,305 +113,205 @@ def infer(
 
     return result, seed
 
-@spaces.GPU(duration=30)
 def infer_example(input_image, prompt, lora_adapter):
-    input_pil = input_image.convert("RGB")
-    guidance_scale = 1.0
-    steps = 4
-    result, seed = infer(input_pil, prompt, lora_adapter, 0, True, guidance_scale, steps)
-    return result, seed
+    return infer(input_image, prompt, lora_adapter, 0, True, 1.0, 4)
+
+# --- کدهای سمت کلاینت (JS/CSS) ---
 
-# --- جاوااسکریپت برای دکمه دانلود ---
 js_post_message = """
 async (image) => {
-    if (!image) {
-        alert("لطفاً ابتدا تصویر را تولید کنید.");
-        return;
-    }
+    if (!image) { alert("تصویر هنوز ساخته نشده است!"); return; }
     let fileUrl = image.url;
     if (fileUrl && !fileUrl.startsWith('http')) {
        fileUrl = window.location.origin + fileUrl;
     } else if (!fileUrl && image.path) {
        fileUrl = window.location.origin + "/file=" + image.path;
     }
-    console.log("Sending download request for:", fileUrl);
-    window.parent.postMessage({
-        type: 'DOWNLOAD_REQUEST',
-        url: fileUrl
-    }, '*');
+    window.parent.postMessage({ type: 'DOWNLOAD_REQUEST', url: fileUrl }, '*');
 }
 """
 
-# --- تنظیمات HTML/CSS/JS کامل برای زیبایی و رفع باگ ---
-html_code = """
+html_style_and_script = """
 <style>
 @import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;700&display=swap');
 
-/* --- تنظیمات اجباری تم روشن (Light Mode Force) --- */
+/* --- تنظیمات کلی و اجبار تم روشن --- */
 :root, .dark, body, .gradio-container {
-    --body-background-fill: #f4f7fa !important; /* پس زمینه کلی کمی متمایل به آبی خیلی روشن */
-    --body-text-color: #333333 !important;
+    --body-background-fill: #f0f2f5 !important;
+    --body-text-color: #1f2937 !important;
     --background-fill-primary: #ffffff !important;
-    --background-fill-secondary: #f9fafb !important;
-    --border-color-primary: #e0e4e8 !important;
-    --input-background-fill: #ffffff !important;
-    --table-row-focus: #f0fdf4 !important;
-    color-scheme: light !important;
+    --border-color-primary: #e5e7eb !important;
+    --block-label-text-color: #374151 !important;
+    --block-title-text-color: #111827 !important;
+    font-family: 'Vazirmatn', sans-serif !important;
 }
 
-body, .gradio-container {
-    font-family: 'Vazirmatn', sans-serif !important;
-    background-color: #f4f7fa !important;
+body {
+    background-color: #f0f2f5 !important;
     margin: 0;
     padding: 0;
 }
 
-/* --- استایل کانتینر اصلی --- */
+/* --- کانتینر اصلی --- */
 #col-container {
     margin: 20px auto;
-    max-width: 960px;
-    direction: rtl;
-    text-align: right;
-    padding: 30px;
+    max-width: 1000px;
     background: #ffffff !important;
     border-radius: 24px;
-    box-shadow: 0 10px 40px rgba(0,0,0,0.06); /* سایه نرم و مدرن */
+    padding: 30px;
+    box-shadow: 0 10px 40px rgba(0,0,0,0.06);
     border: 1px solid #ffffff;
+    direction: rtl;
+    text-align: right;
 }
 
-/* --- هدرها --- */
+/* --- هدر و توضیحات --- */
 #main-title h1 {
-    font-size: 2.4em !important;
+    font-weight: 800 !important;
+    color: #111827 !important;
     text-align: center;
-    color: #1e293b !important;
-    margin-bottom: 12px;
-    font-weight: 800;
+    margin-bottom: 10px;
+    font-size: 2rem !important;
 }
-
 #main-description {
     text-align: center;
-    font-size: 1.15em;
-    color: #64748b !important;
-    margin-bottom: 35px;
-    line-height: 1.6;
-}
-
-/* --- استایل ورودی‌ها و جعبه‌ها --- */
-.gr-input-label, span {
-    font-weight: 600;
-    color: #334155 !important;
-    text-align: right !important;
-    font-size: 0.95em;
-    margin-bottom: 5px;
-}
-
-.gr-dropdown, .gr-textbox, .gr-slider, .gr-checkbox, textarea, input {
-    background-color: #ffffff !important;
-    color: #333333 !important;
-    border-radius: 12px !important;
-}
-
-input[type="text"], textarea {
-    border: 2px solid #e2e8f0 !important;
-    transition: all 0.3s ease !important;
-    box-shadow: none !important;
+    color: #6b7280 !important;
+    margin-bottom: 30px;
+    font-size: 1.1rem;
 }
 
-input[type="text"]:focus, textarea:focus {
-    border-color: #4CAF50 !important;
-    box-shadow: 0 0 0 4px rgba(76, 175, 80, 0.1) !important;
-}
-
-/* --- دکمه‌ها (طراحی مدرن) --- */
-.primary-btn, button.primary {
+/* --- دکمه‌ها --- */
+button.primary {
     background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
-    border: none !important;
     color: white !important;
+    border: none !important;
+    border-radius: 12px !important;
+    padding: 12px 20px !important;
     font-weight: 700 !important;
-    font-size: 1.1em !important;
-    padding: 14px 28px !important;
-    border-radius: 14px !important;
+    font-size: 1rem !important;
     box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3) !important;
     transition: transform 0.2s, box-shadow 0.2s !important;
-    cursor: pointer !important;
 }
-
-.primary-btn:hover, button.primary:hover {
+button.primary:hover {
     transform: translateY(-2px);
-    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4) !important;
-    background: linear-gradient(135deg, #34d399 0%, #059669 100%) !important;
+    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4) !important;
 }
-
 #download-btn {
     background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
     box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3) !important;
-    color: white !important;
     margin-top: 15px;
-}
-#download-btn:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4) !important;
+    width: 100%;
 }
 
-/* --- اصلاح جدول نمونه‌ها (Examples) --- */
-/* هدف قرار دادن دقیق جداول گرادیو برای رفع سیاهی */
-.gr-samples-gallery, .gr-samples-table, table {
-    background-color: #ffffff !important;
-    border-radius: 12px !important;
-    overflow: hidden;
-    border: 1px solid #e2e8f0 !important;
+/* --- ورودی‌ها و لیبل‌ها --- */
+.gr-input-label {
+    font-weight: 600;
+    color: #374151 !important;
+    margin-bottom: 8px;
 }
-
-tr, td, th {
+textarea, input[type="text"], .gr-dropdown {
+    background-color: #f9fafb !important;
+    border: 1px solid #e5e7eb !important;
+    border-radius: 10px !important;
+    color: #111827 !important;
+    box-shadow: none !important;
+}
+textarea:focus, input:focus {
+    border-color: #10b981 !important;
     background-color: #ffffff !important;
-    color: #333333 !important;
-    border-color: #f1f5f9 !important;
-    padding: 12px !important;
-    text-align: right !important;
+    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1) !important;
 }
 
-/* استایل ردیف‌های زوج برای زیبایی */
-tr:nth-child(even) td {
-    background-color: #f8fafc !important;
+/* --- رفع مشکل جدول نمونه‌ها --- */
+.gr-samples-table {
+    border-radius: 12px !important;
+    overflow: hidden !important;
+    border: 1px solid #e5e7eb !important;
 }
-
-/* هاور روی ردیف‌ها */
-tr:hover td {
-    background-color: #f0fdf4 !important;
-    cursor: pointer;
+.gr-samples-table tr, .gr-samples-table th, .gr-samples-table td {
+    background-color: #ffffff !important;
+    color: #1f2937 !important;
+    border-bottom: 1px solid #f3f4f6 !important;
 }
-
-/* تصاویر داخل جدول */
-td img {
-    border-radius: 8px !important;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+.gr-samples-table tr:nth-child(even) {
+    background-color: #f9fafb !important; /* راه‌راه خیلی ملایم */
 }
-
-/* --- مخفی کردن فوتر و فلگ --- */
-footer { display: none !important; }
-.gradio-container footer { display: none !important; }
-.flagging { display: none !important; }
-
-/* --- موبایل --- */
-@media (max-width: 768px) {
-    #col-container {
-        padding: 15px;
-        margin: 10px;
-    }
-    #main-title h1 { font-size: 1.8em !important; }
+.gr-samples-table th {
+    background-color: #f3f4f6 !important;
+    font-weight: 700 !important;
 }
 
+/* --- مخفی کردن اضافات --- */
+footer, .flagging { display: none !important; }
 </style>
 
 <script>
-// اسکریپت اجبار تم روشن با قدرت بیشتر
-function forceLightMode() {
-    document.documentElement.classList.remove('dark');
+// اسکریپت اجباری برای حذف کلاس Dark از بدنه اصلی گرادیو
+function forceLight() {
     document.body.classList.remove('dark');
-    document.documentElement.style.colorScheme = 'light';
-    
-    // جستجو در تمام المنت‌ها
-    const allElements = document.querySelectorAll('*');
-    allElements.forEach(el => {
-        el.style.colorScheme = 'light';
-        if (el.classList.contains('dark')) {
-            el.classList.remove('dark');
-        }
-    });
+    document.body.style.backgroundColor = '#f0f2f5';
 }
-
-// اجرا در زمان‌های مختلف برای اطمینان
-forceLightMode();
-window.addEventListener('load', forceLightMode);
-document.addEventListener('DOMContentLoaded', forceLightMode);
-
-// آبزرور برای جلوگیری از تغییر تم توسط گرادیو
-const observer = new MutationObserver((mutations) => {
-    mutations.forEach((mutation) => {
-        if (document.body.classList.contains('dark')) {
-            forceLightMode();
-        }
-    });
-});
-observer.observe(document.body, { attributes: true, subtree: false });
-observer.observe(document.documentElement, { attributes: true, subtree: false });
+document.addEventListener('DOMContentLoaded', forceLight);
+const observer = new MutationObserver(() => forceLight());
+observer.observe(document.body, { attributes: true });
 </script>
 """
 
+# --- رابط کاربری Gradio ---
 with gr.Blocks() as demo:
-    gr.HTML(html_code)
-    
+    gr.HTML(html_style_and_script)
+
     with gr.Column(elem_id="col-container"):
         gr.Markdown("# **ویرایشگر هوشمند آلفا**", elem_id="main-title")
-        gr.Markdown(
-            "با هوش مصنوعی آلفا تصاویر تونو به مدل های مختلف ویرایش کنید.", 
-            elem_id="main-description"
-        )
+        gr.Markdown("با هوش مصنوعی آلفا تصاویر تونو به مدل های مختلف ویرایش کنید.", elem_id="main-description")
 
         with gr.Row(equal_height=True):
+            # ستون چپ (ورودی)
             with gr.Column():
-                input_image = gr.Image(label="بارگذاری تصویر", type="pil", height=320)
-                
+                input_image = gr.Image(label="بارگذاری تصویر", type="pil", height=300)
                 prompt = gr.Text(
                     label="دستور ویرایش (به فارسی)",
-                    show_label=True,
                     placeholder="مثال: تصویر را به سبک انیمه تبدیل کن...",
-                    rtl=True,
-                    lines=3
+                    rtl=True, lines=3
                 )
+                run_btn = gr.Button("✨ شروع پردازش", variant="primary")
 
-                run_button = gr.Button("✨ شروع پردازش و ساخت تصویر", variant="primary", elem_classes="primary-btn")
-
+            # ستون راست (خروجی)
             with gr.Column():
-                output_image = gr.Image(label="تصویر نهایی", interactive=False, format="png", height=380)
-                
-                download_button = gr.Button("📥 دانلود و ذخیره تصویر", variant="secondary", elem_id="download-btn", elem_classes="primary-btn")
+                output_image = gr.Image(label="تصویر نهایی", interactive=False, height=350)
+                download_btn = gr.Button("📥 دانلود و ذخیره تصویر", elem_id="download-btn", variant="primary")
                 
                 with gr.Row():
-                    lora_adapter = gr.Dropdown(
-                        label="انتخاب سبک ویرایش (LoRA)",
-                        choices=list(LORA_MAPPING.keys()),
-                        value="تبدیل عکس به انیمه"
-                    )
-                with gr.Accordion("تنظیمات پیشرفته", open=False, visible=True):
-                    seed = gr.Slider(label="دانه تصادفی (Seed)", minimum=0, maximum=MAX_SEED, step=1, value=0)
-                    randomize_seed = gr.Checkbox(label="استفاده از Seed تصادفی", value=True)
-                    guidance_scale = gr.Slider(label="میزان وفاداری به متن (Guidance Scale)", minimum=1.0, maximum=10.0, step=0.1, value=1.0)
-                    steps = gr.Slider(label="تعداد مراحل پردازش (Steps)", minimum=1, maximum=50, step=1, value=4)
-        
+                    adapter = gr.Dropdown(label="سبک ویرایش", choices=list(LORA_MAPPING.keys()), value="تبدیل عکس به انیمه")
+                
+                with gr.Accordion("تنظیمات پیشرفته", open=False):
+                    seed = gr.Slider(label="Seed", minimum=0, maximum=MAX_SEED, step=1, value=0)
+                    random_seed = gr.Checkbox(label="Seed تصادفی", value=True)
+                    scale = gr.Slider(label="Guidance Scale", 1.0, 10.0, step=0.1, value=1.0)
+                    steps = gr.Slider(label="Steps", 1, 50, step=1, value=4)
+
         gr.Examples(
             examples=[
                 ["examples/1.jpg", "تبدیل به انیمه کن.", "تبدیل عکس به انیمه"],
                 ["examples/5.jpg", "سایه‌ها را حذف کن و نورپردازی نرم به تصویر بده.", "اصلاح نور و سایه"],
                 ["examples/4.jpg", "از فیلتر ساعت طلایی با پخش نور ملایم استفاده کن.", "نورپردازی مجدد (Relight)"],
                 ["examples/2.jpeg", "دوربین را ۴۵ درجه به سمت چپ بچرخان.", "تغییر زاویه دید"],
-                ["examples/7.jpg", "منبع نور را از سمت راست عقب قرار بده.", "نورپردازی چند زاویه‌ای"],
-                ["examples/10.jpeg", "کیفیت تصویر را افزایش بده (Upscale).", "افزایش کیفیت (Upscale)"],
-                ["examples/7.jpg", "منبع نور را از پایین بتابان.", "نورپردازی چند زاویه‌ای"],
-                ["examples/2.jpeg", "زاویه دوربین را به نمای بالا گوشه راست تغییر بده.", "تغییر زاویه دید"],
-                ["examples/9.jpg", "دوربین کمی به جلو حرکت می‌کند در حالی که نور خورشید از میان ابرها می‌تابد و درخششی نرم اطراف شبح شخصیت در مه ایجاد می‌کند. سبک سینمایی واقعی.", "صحنه بعدی (سینمایی)"],
-                ["examples/8.jpg", "جزئیات پوست سوژه را برجسته‌تر و طبیعی‌تر کن.", "روتوش پوست"],
-                ["examples/6.jpg", "دوربین را به نمای پایین به بالا تغییر بده.", "تغییر زاویه دید"],
+                ["examples/9.jpg", "سبک سینمایی واقعی با درخشش نرم.", "صحنه بعدی (سینمایی)"],
             ],
-            inputs=[input_image, prompt, lora_adapter],
+            inputs=[input_image, prompt, adapter],
             outputs=[output_image, seed],
             fn=infer_example,
             cache_examples=False,
-            label="نمونه‌ها"
+            label="نمونه‌های آماده"
         )
 
-    run_button.click(
+    run_btn.click(
         fn=infer,
-        inputs=[input_image, prompt, lora_adapter, seed, randomize_seed, guidance_scale, steps],
+        inputs=[input_image, prompt, adapter, seed, random_seed, scale, steps],
         outputs=[output_image, seed]
     )
-
-    download_button.click(
-        fn=None,
-        inputs=[output_image],
-        outputs=None,
-        js=js_post_message
-    )
+    
+    download_btn.click(None, [output_image], None, js=js_post_message)
 
 if __name__ == "__main__":
     demo.queue(max_size=30).launch(show_error=True)