Update app.py

app.py

@@ -4,379 +4,185 @@ import gradio as gr
 # ---------------------------
 # Badge URL generation
 # ---------------------------
-def generate_static_badge(label, message, color, label_color, logo, logo_color, style, link):
+def generate_static_badge(label, message, color, label_color,
+                          logo, logo_color, style, link):
     base = "https://img.shields.io/static/v1"
     params = []
-    if label:
-        params.append(f"label={urllib.parse.quote(label, safe='')}")
-    if message:
-        params.append(f"message={urllib.parse.quote(message, safe='')}")
-    if color:
-        params.append(f"color={urllib.parse.quote(color, safe='')}")
-    if label_color:
-        params.append(f"labelColor={urllib.parse.quote(label_color, safe='')}")
-    if logo:
-        params.append(f"logo={urllib.parse.quote(logo, safe='')}")
-    if logo_color:
-        params.append(f"logoColor={urllib.parse.quote(logo_color, safe='')}")
-    if style:
-        params.append(f"style={urllib.parse.quote(style, safe='')}")
-
-    badge_url = base + ("?" + "&".join(params) if params else "")
+    if label:        params.append(f"label={urllib.parse.quote(label, safe='')}")
+    if message:      params.append(f"message={urllib.parse.quote(message, safe='')}")
+    if color:        params.append(f"color={urllib.parse.quote(color, safe='')}")
+    if label_color:  params.append(f"labelColor={urllib.parse.quote(label_color, safe='')}")
+    if logo:         params.append(f"logo={urllib.parse.quote(logo, safe='')}")
+    if logo_color:   params.append(f"logoColor={urllib.parse.quote(logo_color, safe='')}")
+    if style:        params.append(f"style={urllib.parse.quote(style, safe='')}")
+
+    badge_url = base + "?" + "&".join(params)
+    img = f'<img src="{badge_url}" alt="badge">'
     if link:
-        html_code = f'<a href="{link}" target="_blank"><img src="{badge_url}" alt="badge"></a>'
-    else:
-        html_code = f'<img src="{badge_url}" alt="badge">'
+        img = f'<a href="{link}" target="_blank">{img}</a>'
+
+    preview = (f"<div style='padding:30px;background:linear-gradient(135deg,#f8f9fa,#e9ecef);"
+               f"border-radius:16px;display:flex;justify-content:center;box-shadow:0 6px 12px"
+               f" rgba(0,0,0,0.05);'>{img}</div>")
+    return img, preview
 
-    badge_preview = f"""
-    <div style='padding:30px; background: linear-gradient(135deg, #f8f9fa, #e9ecef);
-         border-radius: 16px; display: flex; justify-content: center;
-         box-shadow: 0 6px 12px rgba(0,0,0,0.05);'>
-        {html_code}
-    </div>
-    """
-    return html_code, badge_preview
 
 # ---------------------------
 # Gradio UI
 # ---------------------------
 with gr.Blocks(theme=gr.themes.Soft()) as demo:
-    # Custom CSS
+    # ------------------ CSS & Header ------------------
     gr.HTML("""
     <style>
-      body { 
-        background: linear-gradient(120deg, #f8f9fa, #e2eafc); 
-        font-family: 'Poppins', 'Noto Sans KR', sans-serif;
-      }
-      .gradio-container { 
-        background: rgba(255, 255, 255, 0.85); 
-        backdrop-filter: blur(10px);
-        border-radius: 20px; 
-        padding: 24px; 
-        box-shadow: 0 10px 30px rgba(0,0,0,0.08);
-        max-width: 1000px;
-        margin: 0 auto;
-      }
-      .gr-button { 
-        background: linear-gradient(135deg, #a8dadc, #88c1e9) !important; 
-        color: #1d3557 !important; 
-        border: none !important;
-        border-radius: 10px !important;
-        font-weight: 600 !important;
-        transition: all 0.3s ease !important;
-        box-shadow: 0 4px 10px rgba(138, 198, 209, 0.3) !important;
-      }
-      .gr-button:hover {
-        transform: translateY(-2px) !important;
-        box-shadow: 0 6px 15px rgba(138, 198, 209, 0.4) !important;
-      }
-      .gr-textbox, .gr-select, .gr-color { 
-        background: #e8f6f3 !important; 
-        border: 2px solid #d9f0ea !important;
-        border-radius: 12px !important;
-        transition: all 0.3s ease !important;
-      }
-      .gr-textbox:focus, .gr-select:focus, .gr-color:focus {
-        border-color: #a8dadc !important;
-        box-shadow: 0 0 0 3px rgba(168, 218, 220, 0.25) !important;
-      }
-      label.block span {
-        color: #457b9d !important;
-        font-weight: 600 !important;
-        font-size: 1rem !important;
-      }
-      h1 { 
-        color: #5e60ce; 
-        font-weight: 800;
-        letter-spacing: -0.5px;
-      }
-      h3 { 
-        color: #5e60ce; 
-        font-weight: 600;
-      }
-      .footer {
-        margin-top: 30px;
-        text-align: center;
-        font-size: 0.9rem;
-        color: #6d6875;
-      }
-      .badge-section {
-        background: rgba(255, 255, 255, 0.7);
-        border-radius: 16px;
-        padding: 20px;
-        box-shadow: 0 4px 12px rgba(0,0,0,0.03);
-        margin-bottom: 24px;
-        border: 1px solid rgba(230, 240, 255, 0.7);
-      }
-      .example-grid {
-        display: grid;
-        grid-template-columns: repeat(4, 1fr);
-        grid-template-rows: repeat(2, auto);
-        gap: 16px;
-        margin-top: 20px;
-      }
-      .example-item {
-        background: linear-gradient(135deg, #f1f8ff, #e8f4ff);
-        border-radius: 12px;
-        padding: 16px;
-        text-align: center;
-        cursor: pointer;
-        transition: all 0.3s ease;
-        border: 2px solid transparent;
-      }
-      .example-item:hover {
-        transform: translateY(-3px);
-        box-shadow: 0 8px 15px rgba(0,0,0,0.05);
-        border-color: #a8dadc;
-      }
-      @media (max-width: 768px) {
-        .example-grid {
-          grid-template-columns: repeat(2, 1fr);
-        }
-      }
-      @media (max-width: 600px) {
-        .example-grid {
-          grid-template-columns: 1fr;
-        }
-      }
+      body{background:linear-gradient(120deg,#f8f9fa,#e2eafc);font-family:'Poppins','Noto Sans KR',sans-serif;}
+      .gradio-container{background:rgba(255,255,255,0.85);backdrop-filter:blur(10px);
+        border-radius:20px;padding:24px;box-shadow:0 10px 30px rgba(0,0,0,0.08);max-width:1000px;margin:0 auto;}
+      .gr-button{background:linear-gradient(135deg,#a8dadc,#88c1e9)!important;color:#1d3557!important;
+        border:none!important;border-radius:10px!important;font-weight:600!important;transition:all .3s;
+        box-shadow:0 4px 10px rgba(138,198,209,.3)!important;}
+      .gr-button:hover{transform:translateY(-2px)!important;box-shadow:0 6px 15px rgba(138,198,209,.4)!important;}
+      .gr-textbox,.gr-select,.gr-color{background:#e8f6f3!important;border:2px solid #d9f0ea!important;
+        border-radius:12px!important;transition:all .3s;}
+      .gr-textbox:focus,.gr-select:focus,.gr-color:focus{
+        border-color:#a8dadc!important;box-shadow:0 0 0 3px rgba(168,218,220,.25)!important;}
+      .example-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:20px;}
+      .example-item{background:linear-gradient(135deg,#f1f8ff,#e8f4ff);border-radius:12px;padding:16px;
+        text-align:center;cursor:pointer;transition:all .3s;border:2px solid transparent;}
+      .example-item:hover{transform:translateY(-3px);box-shadow:0 8px 15px rgba(0,0,0,0.05);border-color:#a8dadc;}
+      @media(max-width:768px){.example-grid{grid-template-columns:repeat(2,1fr);} }
+      @media(max-width:600px){.example-grid{grid-template-columns:1fr;} }
     </style>
-    """)
-
-    # Header section
-    gr.HTML("""
-    <div style="text-align:center; margin-bottom:24px;">
-        <h1 style="font-size:2.8rem; margin-bottom:0.2em; background: linear-gradient(90deg, #5e60ce, #64dfdf); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">
-            🎨 BadgeCraft
-        </h1>
-        <p style="font-size:1.2rem; margin:0.5em 0; color:#457b9d; max-width:700px; margin:0 auto;">
-            Create beautiful badges with live preview and HTML snippet
-        </p>
-        <div style="margin-top:10px; display:flex; justify-content:center; gap:12px; flex-wrap:wrap;">
-            <span style="display:inline-block; background:#e9f5db; color:#588157; padding:6px 12px; border-radius:30px; font-size:0.9rem;">
-                <strong>✨ MIT License</strong>
-            </span>
-            <span style="display:inline-block; background:#d8f3dc; color:#2d6a4f; padding:6px 12px; border-radius:30px; font-size:0.9rem;">
-                <strong>👥 Created by OpenFreeAI Team</strong>
-            </span>
-        </div>
+    <div style="text-align:center;margin-bottom:24px;">
+      <h1 style="font-size:2.8rem;margin-bottom:.2em;background:linear-gradient(90deg,#5e60ce,#64dfdf);
+          -webkit-background-clip:text;-webkit-text-fill-color:transparent;">🎨 BadgeCraft</h1>
+      <p style="font-size:1.2rem;color:#457b9d;">Create beautiful badges with live preview and HTML snippet</p>
     </div>
     """)
 
-    with gr.Tabs():
-        with gr.TabItem("Badge Generator"):
-            with gr.Row():
-                with gr.Column():
-                    with gr.Group(elem_classes="badge-section"):
-                        gr.HTML("<h3 style='margin-top:0; margin-bottom:16px; font-size:1.3rem;'>✏️ Badge Settings</h3>")
-                        label = gr.Textbox(label="Label", value="Discord", elem_id="label-input", lines=1)
-                        message = gr.Textbox(label="Message", value="Join our community", elem_id="message-input", lines=1)
-                        logo = gr.Textbox(label="Logo", value="discord", elem_id="logo-input", lines=1)
-                        style = gr.Dropdown(
-                            label="Style", 
-                            choices=["flat", "flat-square", "plastic", "for-the-badge", "social"], 
-                            value="for-the-badge",
-                            elem_id="style-input"
-                        )
-                        color = gr.ColorPicker(label="Background Color", value="#5865F2", elem_id="color-input")
-                        label_color = gr.ColorPicker(label="Label Background Color", value="#99AAFF", elem_id="label-color-input")
-                        logo_color = gr.ColorPicker(label="Logo Color", value="#ffffff", elem_id="logo-color-input")
-                        link = gr.Textbox(label="Link (URL)", value="https://discord.gg/openfreeai", elem_id="link-input", lines=1)
-                with gr.Column():
-                    with gr.Group(elem_classes="badge-section"):
-                        gr.HTML("<h3 style='margin-top:0; margin-bottom:16px; font-size:1.3rem;'>👁️ Preview</h3>")
-                        out_preview = gr.HTML(label="")
-                    with gr.Group(elem_classes="badge-section"):
-                        gr.HTML("<h3 style='margin-top:0; margin-bottom:16px; font-size:1.3rem;'>💻 HTML Code</h3>")
-                        out_code = gr.Code(label="", language="html", lines=3)
-
-            # 예제 리스트 (label, message, bg_color, label_color, logo, logo_color, style, link)
-            examples = [
-                ["Discord",    "Openfree AI",    "#5865F2", "#99AAFF", "discord",   "white", "for-the-badge", "https://discord.gg/openfreeai"],
-                ["X.com",      "Follow us",      "#1DA1F2", "#00CFFF", "x",         "white", "for-the-badge", "https://x.com/openfree_ai"],
-                ["Collections","Explore",        "#FFB300", "#FFF176", "huggingface","black","for-the-badge", "https://huggingface.co/collections/VIDraft/best-open-ai-services-68057e6e312880ea92abaf4c"],
-                ["GitHub",     "Star us",        "#0A0A0A", "#39FF14", "github",    "white", "for-the-badge", "https://github.com/openfreeai"],
-                ["YouTube",    "Watch now",      "#E50000", "#FF5E5E", "youtube",   "white", "for-the-badge", "https://www.youtube.com/@AITechTree"],
-                ["Facebook",   "Like us",        "#1877F2", "#6FAFFF", "facebook",  "white", "for-the-badge", "https://www.facebook.com/profile.php?id=61575353674679"],
-                ["Instagram",  "友情 萬世",        "#E4405F", "#FF77A9", "instagram", "white", "for-the-badge", "https://www.instagram.com/openfree_ai/"],
-                ["Threads",    "함께 즐겨요.",    "#000000", "#FF00FF", "threads",   "white", "for-the-badge", "https://www.threads.net/@openfree_ai"],
-            ]
-
-            # 예제 미리보기
-            html_items = '<div class="example-grid">'
-            for idx, ex in enumerate(examples):
-                # ex = [label, message, bg_color, label_color, logo, logo_color, style, link]
-                badge_url = (
-                    "https://img.shields.io/static/v1?" + "&".join([
-                        f"label={urllib.parse.quote(ex[0], safe='')}",
-                        f"message={urllib.parse.quote(ex[1], safe='')}",
-                        f"color={urllib.parse.quote(ex[2], safe='')}",
-                        f"labelColor={urllib.parse.quote(ex[3], safe='')}",
-                        f"logo={urllib.parse.quote(ex[4], safe='')}",
-                        f"logoColor={urllib.parse.quote(ex[5], safe='')}",
-                        f"style={urllib.parse.quote(ex[6], safe='')}"
-                    ])
-                )
-                html_items += f'''
-                <div class="example-item" onclick="applyExample({idx})">
-                    <img src="{badge_url}" alt="{ex[0]} badge" style="margin-bottom:8px;">
-                    <div style="font-size:0.9rem; color:#457b9d;">{ex[0]}</div>
-                </div>
-                '''
-            html_items += '</div>'
-
-            # React Controlled Input Hack 함수
-            # - el: input 또는 textarea DOM
-            # - newVal: 넣을 문자열(혹은 color)
-            # - tagName에 따라 value setter를 찾아서 적용
-            hack_js = """
-            function updateReactValue(el, newVal) {
-                if (!el) return;
-                let prototype = window.HTMLInputElement.prototype;
-                if (el.tagName === "TEXTAREA") {
-                    prototype = window.HTMLTextAreaElement.prototype;
-                }
-                const descriptor = Object.getOwnPropertyDescriptor(prototype, "value");
-                descriptor.set.call(el, newVal);
-
-                // React가 인식하도록 input & change 이벤트 둘 다 디스패치
-                el.dispatchEvent(new Event("input", { bubbles: true }));
-                el.dispatchEvent(new Event("change", { bubbles: true }));
-            }
-            function convertToHexIfNeeded(colorStr) {
-                if (!colorStr) return "#000000";
-                // white/black 문자열이면 #hex로 치환
-                if (colorStr.toLowerCase() === "white") return "#ffffff";
-                if (colorStr.toLowerCase() === "black") return "#000000";
-                return colorStr;
-            }
-            function setColorValue(elemId, colorValue) {
-                const container = document.getElementById(elemId);
-                if (!container) return;
-
-                // 우선 input[type='color'] 찾기
-                let colorInput = container.querySelector("input[type='color']");
-                // 없으면 input[type='text']
-                if (!colorInput) {
-                    colorInput = container.querySelector("input[type='text']");
-                }
-                if (!colorInput) return;
-
-                // React Controlled Hack
-                updateReactValue(colorInput, colorValue);
-            }
-            """
-
-            # 예제를 클릭했을 때 적용하는 main 함수
-            apply_example_js = f"""
-            <script>
-            {hack_js}
-            const examples = {examples};
-
-            function applyExample(i) {{
-                const ex = examples[i];
-                // ex = [label, message, bg_color, label_bg, logo, logo_color, style, link]
-
-                // Label
-                const labelBox = document.querySelector("#label-input textarea, #label-input input");
-                if (labelBox) {{
-                    updateReactValue(labelBox, ex[0]);
-                }}
-
-                // Message
-                const msgBox = document.querySelector("#message-input textarea, #message-input input");
-                if (msgBox) {{
-                    updateReactValue(msgBox, ex[1]);
-                }}
-
-                // Background Color
-                const newBg = convertToHexIfNeeded(ex[2]);
-                setColorValue("color-input", newBg);
-
-                // Label Background Color
-                const newLabel = convertToHexIfNeeded(ex[3]);
-                setColorValue("label-color-input", newLabel);
-
-                // Logo
-                const logoBox = document.querySelector("#logo-input textarea, #logo-input input");
-                if (logoBox) {{
-                    updateReactValue(logoBox, ex[4]);
-                }}
-
-                // Logo Color
-                const newLogoColor = convertToHexIfNeeded(ex[5]);
-                setColorValue("logo-color-input", newLogoColor);
-
-                // Style (Dropdown)
-                const styleSelect = document.querySelector("#style-input select");
-                if (styleSelect) {{
-                    styleSelect.value = ex[6];
-                    styleSelect.dispatchEvent(new Event("change", {{ bubbles: true }}));
-                }}
-
-                // Link
-                const linkBox = document.querySelector("#link-input textarea, #link-input input");
-                if (linkBox) {{
-                    updateReactValue(linkBox, ex[7]);
-                }}
-            }}
-            </script>
-            """
-
-            gr.HTML(html_items + apply_example_js)
+    # ------------------ Components ------------------
+    label       = gr.Textbox("Discord",                   label="Label", elem_id="label-input")
+    message     = gr.Textbox("Join our community",        label="Message", elem_id="message-input")
+    color       = gr.ColorPicker("#5865F2",               label="Background Color", elem_id="color-input")
+    label_color = gr.ColorPicker("#99AAFF",               label="Label Background Color", elem_id="label-color-input")
+    logo        = gr.Textbox("discord",                   label="Logo", elem_id="logo-input")
+    logo_color  = gr.ColorPicker("#ffffff",               label="Logo Color", elem_id="logo-color-input")
+    style       = gr.Dropdown(["flat","flat-square","plastic","for-the-badge","social"],
+                              value="for-the-badge",      label="Style", elem_id="style-input")
+    link        = gr.Textbox("https://discord.gg/openfreeai", label="Link (URL)", elem_id="link-input")
+
+    out_code   = gr.Code(language="html", lines=3, label="HTML Snippet")
+    out_prev   = gr.HTML()
+
+    # ------------------ Example badges ------------------
+    examples = [
+        ["Discord","Openfree AI","#5865F2","#99AAFF","discord","white","for-the-badge",
+         "https://discord.gg/openfreeai"],
+        ["X.com","Follow us","#1DA1F2","#00CFFF","x","white","for-the-badge",
+         "https://x.com/openfree_ai"],
+        ["Collections","Explore","#FFB300","#FFF176","huggingface","black","for-the-badge",
+         "https://huggingface.co/collections/VIDraft/best-open-ai-services-68057e6e312880ea92abaf4c"],
+        ["GitHub","Star us","#0A0A0A","#39FF14","github","white","for-the-badge",
+         "https://github.com/openfreeai"],
+        ["YouTube","Watch now","#E50000","#FF5E5E","youtube","white","for-the-badge",
+         "https://www.youtube.com/@AITechTree"],
+        ["Facebook","Like us","#1877F2","#6FAFFF","facebook","white","for-the-badge",
+         "https://www.facebook.com/profile.php?id=61575353674679"],
+        ["Instagram","友情 萬世","#E4405F","#FF77A9","instagram","white","for-the-badge",
+         "https://www.instagram.com/openfree_ai/"],
+        ["Threads","함께 즐겨요.","#000000","#FF00FF","threads","white","for-the-badge",
+         "https://www.threads.net/@openfree_ai"]
+    ]
+
+    # grid html
+    grid = '<div class="example-grid">'
+    for i,e in enumerate(examples):
+        lbl,msg,bg,lbg,logo_e,logoc,sty,_ = e
+        def fix(c):
+            return "#ffffff" if c=="white" else "#000000" if c=="black" else c
+        url = ("https://img.shields.io/static/v1?"
+               f"label={urllib.parse.quote(lbl)}&message={urllib.parse.quote(msg)}&"
+               f"color={urllib.parse.quote(fix(bg))}&labelColor={urllib.parse.quote(fix(lbg))}&"
+               f"logo={urllib.parse.quote(logo_e)}&logoColor={urllib.parse.quote(fix(logoc))}&"
+               f"style={urllib.parse.quote(sty)}")
+        grid += (f'<div class="example-item" onclick="applyExample({i})">'
+                 f'<img src="{url}" style="margin-bottom:8px;"><br>'
+                 f'<span style="font-size:.9rem;color:#457b9d;">{lbl}</span></div>')
+    grid += "</div>"
+
+    # ------------------ JS (fixed color propagation) ------------------
+    js = f"""
+    <script>
+    const examples = {examples};
+
+    /* -------- helpers -------- */
+    function reactSet(el,val){{
+        if(!el) return;
+        const proto = (el.tagName==="TEXTAREA")
+            ? HTMLTextAreaElement.prototype
+            : HTMLInputElement.prototype;
+        const set = Object.getOwnPropertyDescriptor(proto,"value").set;
+        set.call(el,val);
+        el.dispatchEvent(new Event("input",{{bubbles:true}}));
+        el.dispatchEvent(new Event("change",{{bubbles:true}}));   // ColorPicker는 change에 반응
+        el.dispatchEvent(new Event("blur", {{bubbles:true}}));    // 최종 확정
+    }}
+    function toHex(c){{
+        if(!c) return "#000000";
+        c = c.toLowerCase();
+        if(c==="white") return "#ffffff";
+        if(c==="black") return "#000000";
+        return c;
+    }}
+    function setColor(elemId,val){{
+        const root = document.getElementById(elemId);
+        if(!root) return;
+        // gr.ColorPicker 내부 input 은 type=text 이므로 먼저 찾음
+        let inp = root.querySelector("input[type='text'],input[type='color']");
+        if(!inp) return;
+        reactSet(inp,val);
+        // gradio 4.17 이후 : data-testid=color-picker 값 동기화 필요
+        const pickerDiv = root.querySelector("[data-testid='color-picker']")
+        if(pickerDiv) pickerDiv.style.background = val;   // 버튼 시각적 즉시 변경
+    }}
+
+    /* -------- main: example click -------- */
+    window.applyExample = (i) => {{
+        const ex = examples[i];
+        // 0,label
+        reactSet(document.querySelector("#label-input input,#label-input textarea"), ex[0]);
+        // 1,message
+        reactSet(document.querySelector("#message-input input,#message-input textarea"), ex[1]);
+        // 2,bg color
+        setColor("color-input",   toHex(ex[2]));
+        // 3,label bg
+        setColor("label-color-input", toHex(ex[3]));
+        // 4,logo
+        reactSet(document.querySelector("#logo-input input,#logo-input textarea"), ex[4]);
+        // 5,logo color
+        setColor("logo-color-input", toHex(ex[5]));
+        // 6,style
+        const sel = document.querySelector("#style-input select");
+        if(sel){{
+            sel.value = ex[6];
+            sel.dispatchEvent(new Event("change",{{bubbles:true}}));
+        }}
+        // 7,link
+        reactSet(document.querySelector("#link-input input,#link-input textarea"), ex[7]);
+    }}
+    </script>
+    """
 
-            # 초기/실시간 업데이트
-            demo.load(
-                fn=generate_static_badge,
-                inputs=[label, message, color, label_color, logo, logo_color, style, link],
-                outputs=[out_code, out_preview]
-            )
-            for inp in [label, message, color, label_color, logo, logo_color, style, link]:
-                inp.change(
-                    fn=generate_static_badge,
-                    inputs=[label, message, color, label_color, logo, logo_color, style, link],
-                    outputs=[out_code, out_preview]
-                )
+    gr.HTML(grid + js)
 
-        with gr.TabItem("Help"):
-            gr.HTML('''
-            <div style="padding: 20px; background: rgba(255, 255, 255, 0.7); border-radius: 16px; box-shadow: 0 4px 12px rgba(0,0,0,0.03);">
-                <h3 style="color: #5e60ce; margin-top:0;">📋 How to Use BadgeCraft</h3>
-                <h4 style="color: #457b9d; margin-bottom: 8px;">✨ What are Badges?</h4>
-                <p>Badges are small visual indicators that can be used in README files, websites, and documentation. Shields.io badges are widely used to display project status, social media links, version information, and more.</p>
-                <h4 style="color: #457b9d; margin-bottom: 8px;">🛠️ Basic Settings</h4>
-                <ul>
-                    <li><strong>Label</strong>: Text displayed on the left side of the badge (e.g., "Discord", "Version", "Status")</li>
-                    <li><strong>Message</strong>: Text displayed on the right side of the badge</li>
-                    <li><strong>Logo</strong>: Name of a logo provided by Simple Icons (<a href="https://simpleicons.org/" target="_blank">View List</a>)</li>
-                    <li><strong>Style</strong>: Determines the shape of the badge (flat, plastic, for-the-badge, etc.)</li>
-                </ul>
-                <h4 style="color: #457b9d; margin-bottom: 8px;">🎨 ColorSettings</h4>
-                <ul>
-                    <li><strong>Background Color</strong>: Background color for the right side of the badge</li>
-                    <li><strong>Label Background Color</strong>: Background color for the left side of the badge</li>
-                    <li><strong>Logo Color</strong>: Color of the logo (e.g. white or black)</li>
-                </ul>
-                <h4 style="color: #457b9d; margin-bottom: 8px;">🔗 Using the HTML</h4>
-                <p>Copy the generated HTML code and paste it into your website, blog, GitHub README, etc.</p>
-                <p>HTML works in GitHub READMEs, but if you prefer markdown, use <code>![alt text](badge URL)</code>.</p>
-                <h4 style="color: #457b9d; margin-bottom: 8px;">💡 Tips</h4>
-                <ul>
-                    <li>Click on any example in the grid to automatically fill in all settings</li>
-                    <li>The preview updates in real-time as you make changes</li>
-                    <li>You can use over 2000+ logos from Simple Icons - just enter the name</li>
-                    <li>Custom colors can be selected with the color picker or by entering a hex code</li>
-                </ul>
-            </div>
-            ''')
+    # ------------------ live update handlers ------------------
+    comps = [label,message,color,label_color,logo,logo_color,style,link]
+    for c in comps:
+        c.change(generate_static_badge, comps, [out_code,out_prev])
 
-    # Footer
-    gr.HTML('''
-    <div class="footer">
-        <p>© 2023-2025 BadgeCraft | MIT License  
-           <a href="https://discord.gg/openfreeai" target="_blank" style="color:#5e60ce;">Discord</a>
-        </p>
-    </div>
-    ''')
+    # ------------------ footer ------------------
+    gr.HTML('<p style="text-align:center;margin-top:30px;font-size:.9rem;color:#6d6875">'
+            '© 2023‑2025 BadgeCraft | MIT License &nbsp; '
+            '<a href="https://discord.gg/openfreeai" style="color:#5e60ce" target="_blank">Discord</a></p>')
 
 if __name__ == "__main__":
     demo.launch()