Update app.py

app.py

@@ -1,10 +1,24 @@
 import urllib.parse
 import gradio as gr
 
-# ---------------------------
+# -------------------------------------------------
 # Badge URL generation
-# ---------------------------
-def generate_static_badge(label, message, color, label_color, logo, logo_color, style, link):
+#   └▶ HEX 컬러 앞의 ‘#’ 기호를 제거하여 Shields.io 가
+#      색상을 올바르게 인식하도록 수정했습니다.
+# -------------------------------------------------
+def generate_static_badge(
+    label, message,
+    color, label_color,
+    logo, logo_color,
+    style, link
+):
+    # 1) ColorPicker 값에서 ‘#’ 제거
+    strip_hash = lambda c: c.lstrip("#") if isinstance(c, str) else c
+    color       = strip_hash(color)
+    label_color = strip_hash(label_color)
+    logo_color  = strip_hash(logo_color)
+
+    # 2) Shields.io 쿼리 파라미터 구성
     base = "https://img.shields.io/static/v1"
     params = []
     if label:
@@ -12,304 +26,338 @@ def generate_static_badge(label, message, color, label_color, logo, logo_color,
     if message:
         params.append(f"message={urllib.parse.quote(message, safe='')}")
     if color:
-        # 색상값에서 # 제거
-        color = color.lstrip('#')
         params.append(f"color={urllib.parse.quote(color, safe='')}")
     if label_color:
-        label_color = label_color.lstrip('#')
         params.append(f"labelColor={urllib.parse.quote(label_color, safe='')}")
     if logo:
         params.append(f"logo={urllib.parse.quote(logo, safe='')}")
     if logo_color:
-        logo_color = logo_color.lstrip('#')
         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 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">'
+    html_img  = f'<img src="{badge_url}" alt="badge">'
+
+    # 3) 링크 감쌀지 여부
+    html_code = (
+        f'<a href="{link}" target="_blank">{html_img}</a>'
+        if link else html_img
+    )
 
+    # 4) 미리보기 카드
     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);'>
+    <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
 
-# 예제 적용을 위한 함수
-def apply_example(idx):
-    examples = [
-        ["Discord",    "Openfree AI",    "#5865F2", "#99AAFF", "discord",   "#ffffff", "for-the-badge", "https://discord.gg/openfreeai"],
-        ["X.com",      "Follow us",      "#1DA1F2", "#00CFFF", "x",         "#ffffff", "for-the-badge", "https://x.com/openfree_ai"],
-        ["Collections","Explore",        "#FFB300", "#FFF176", "huggingface","#000000","for-the-badge", "https://huggingface.co/collections/VIDraft/best-open-ai-services-68057e6e312880ea92abaf4c"],
-        ["GitHub",     "Star us",        "#0A0A0A", "#39FF14", "github",    "#ffffff", "for-the-badge", "https://github.com/openfreeai"],
-        ["YouTube",    "Watch now",      "#E50000", "#FF5E5E", "youtube",   "#ffffff", "for-the-badge", "https://www.youtube.com/@AITechTree"],
-        ["Facebook",   "Like us",        "#1877F2", "#6FAFFF", "facebook",  "#ffffff", "for-the-badge", "https://www.facebook.com/profile.php?id=61575353674679"],
-        ["Instagram",  "友情 萬世",        "#E4405F", "#FF77A9", "instagram", "#ffffff", "for-the-badge", "https://www.instagram.com/openfree_ai/"],
-        ["Threads",    "함께 즐겨요.",    "#000000", "#FF00FF", "threads",   "#ffffff", "for-the-badge", "https://www.threads.net/@openfree_ai"],
-    ]
-    
-    if idx < 0 or idx >= len(examples):
-        return [None] * 8  # 인덱스 범위 초과 시 값 반환 안함
-    
-    # 기존 예제 값 반환
-    return examples[idx]
 
+# -------------------------------------------------
+# Gradio UI
+# -------------------------------------------------
 with gr.Blocks(theme=gr.themes.Soft()) as demo:
-    # ---------------------------
-    # Custom CSS & Header
-    # ---------------------------
+    # ---------- Global CSS ----------
     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;
+      body{
+        background:linear-gradient(120deg,#f8f9fa,#e2eafc);
+        font-family:'Poppins','Noto Sans KR',sans-serif;
       }
-      .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;
+      .gradio-container{
+        background:rgba(255,255,255,.85);
+        backdrop-filter:blur(10px);
+        border-radius:20px;
+        padding:24px;
+        box-shadow:0 10px 30px rgba(0,0,0,.08);
+        max-width:1000px;
+        margin:0 auto;
       }
-      .gr-button:hover {
-        transform: translateY(-2px) !important;
-        box-shadow: 0 6px 15px rgba(138, 198, 209, 0.4) !important;
+      .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 ease!important;
+        box-shadow:0 4px 10px rgba(138,198,209,.3)!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-button:hover{
+        transform:translateY(-2px)!important;
+        box-shadow:0 6px 15px rgba(138,198,209,.4)!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;
+      .gr-textbox,.gr-select,.gr-color{
+        background:#e8f6f3!important;
+        border:2px solid #d9f0ea!important;
+        border-radius:12px!important;
+        transition:all .3s ease!important;
       }
-      label.block span {
-        color: #457b9d !important;
-        font-weight: 600 !important;
-        font-size: 1rem !important;
+      .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;
       }
-      h1 { 
-        color: #5e60ce; 
-        font-weight: 800;
-        letter-spacing: -0.5px;
+      label.block span{
+        color:#457b9d!important;
+        font-weight:600!important;
+        font-size:1rem!important;
       }
-      h3 { 
-        color: #5e60ce; 
-        font-weight: 600;
+      h1{
+        color:#5e60ce;
+        font-weight:800;
+        letter-spacing:-.5px;
       }
-      .footer {
-        margin-top: 30px;
-        text-align: center;
-        font-size: 0.9rem;
-        color: #6d6875;
+      h3{
+        color:#5e60ce;
+        font-weight:600;
       }
-      .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);
+      .footer{
+        margin-top:30px;
+        text-align:center;
+        font-size:.9rem;
+        color:#6d6875;
       }
-      .example-grid {
-        display: grid;
-        grid-template-columns: repeat(4, 1fr);
-        grid-template-rows: repeat(2, auto);
-        gap: 16px;
-        margin-top: 20px;
+      .badge-section{
+        background:rgba(255,255,255,.7);
+        border-radius:16px;
+        padding:20px;
+        box-shadow:0 4px 12px rgba(0,0,0,.03);
+        margin-bottom:24px;
+        border:1px solid rgba(230,240,255,.7);
       }
-      .example-item {
-        background: linear-gradient(135deg, #f1f8ff, #e8f4ff);
-        border-radius: 12px;
-        padding: 16px;
-        text-align: center;
-        transition: all 0.3s ease;
-        border: 2px solid transparent;
+      .example-grid{
+        display:grid;
+        grid-template-columns:repeat(4,1fr);
+        grid-template-rows:repeat(2,auto);
+        gap:16px;
+        margin-top:20px;
       }
-      .example-item:hover {
-        transform: translateY(-3px);
-        box-shadow: 0 8px 15px rgba(0,0,0,0.05);
-        border-color: #a8dadc;
+      .example-item{
+        background:linear-gradient(135deg,#f1f8ff,#e8f4ff);
+        border-radius:12px;
+        padding:16px;
+        text-align:center;
+        cursor:pointer;
+        transition:all .3s ease;
+        border:2px solid transparent;
       }
-      .example-btn {
-        width: 100%;
-        padding: 10px;
-        border: none;
-        background: transparent;
-        cursor: pointer;
-        border-radius: 10px;
+      .example-item:hover{
+        transform:translateY(-3px);
+        box-shadow:0 8px 15px rgba(0,0,0,.05);
+        border-color:#a8dadc;
       }
-      @media (max-width: 768px) {
-        .example-grid {
-          grid-template-columns: repeat(2, 1fr);
-        }
+      @media(max-width:768px){
+        .example-grid{grid-template-columns:repeat(2,1fr);}
       }
-      @media (max-width: 600px) {
-        .example-grid {
-          grid-template-columns: 1fr;
-        }
+      @media(max-width:600px){
+        .example-grid{grid-template-columns:1fr;}
       }
     </style>
+    """)
+
+    # ---------- Header ----------
+    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>
+      <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; margin:.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:.9rem;">
+          <strong>✨ MIT License</strong>
+        </span>
+        <span style="display:inline-block; background:#d8f3dc; color:#2d6a4f;
+                     padding:6px 12px; border-radius:30px; font-size:.9rem;">
+          <strong>👥 Created by OpenFreeAI Team</strong>
+        </span>
+      </div>
     </div>
     """)
 
-    # 예제 클릭 상태 관리용 (실제로는 보이지 않음)
-    example_idx = gr.State(-1)
-
+    # ---------- Tabs ----------
     with gr.Tabs():
-        # ---------------------------
-        # 1) Badge Generator Tab
-        # ---------------------------
+        # ▷▷ Badge Generator 탭
         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"
-                        )
-                        color = gr.Textbox(label="Background Color (hex)", value="#5865F2", lines=1)
-                        label_color = gr.Textbox(label="Label Background Color (hex)", value="#99AAFF", lines=1)
-                        logo_color = gr.Textbox(label="Logo Color (hex)", value="#ffffff", lines=1)
-                        link = gr.Textbox(label="Link (URL)", value="https://discord.gg/openfreeai", lines=1)
+                        gr.HTML("<h3 style='margin-top:0;margin-bottom:16px;font-size:1.3rem;'>✏️ Badge Settings</h3>")
+                        label       = gr.Textbox(label="Label",  value="Discord", lines=1, elem_id="label-input")
+                        message     = gr.Textbox(label="Message", value="Join our community", lines=1, elem_id="message-input")
+                        logo        = gr.Textbox(label="Logo", value="discord", lines=1, elem_id="logo-input")
+                        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", lines=1, elem_id="link-input")
+                # ----- 미리보기 & 코드 -----
                 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>")
+                        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)
+                        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)
+
+            # 예제 데이터
+            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
+            html_items = '<div class="example-grid">'
+            for idx, ex in enumerate(examples):
+                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].lstrip('#'),safe='')}",
+                        f"labelColor={urllib.parse.quote(ex[3].lstrip('#'),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:.9rem;color:#457b9d;">{ex[0]}</div>
+                </div>
+                '''
+            html_items += '</div>'
+
+            # ------------- React Controlled Input Hack -------------
+            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);
+              el.dispatchEvent(new Event("input",{bubbles:true}));
+              el.dispatchEvent(new Event("change",{bubbles:true}));
+            }
+            function convertToHexIfNeeded(c){
+              if(!c)return"#000000";
+              if(c.toLowerCase()==="white")return"#ffffff";
+              if(c.toLowerCase()==="black")return"#000000";
+              return c;
+            }
+            function setColorValue(elemId,val){
+              const container=document.getElementById(elemId);
+              if(!container)return;
+              let input=container.querySelector("input[type='color']");
+              if(!input)input=container.querySelector("input[type='text']");
+              if(!input)return;
+              updateReactValue(input,val);
+            }
+            """
+
+            # 예제 클릭 시 자동 채우기
+            apply_example_js = f"""
+            <script>
+            {hack_js}
+            const examples={examples};
+            function applyExample(i){{
+              const ex=examples[i];
+              const labelBox=document.querySelector("#label-input textarea,#label-input input");
+              if(labelBox)updateReactValue(labelBox,ex[0]);
+              const msgBox=document.querySelector("#message-input textarea,#message-input input");
+              if(msgBox)updateReactValue(msgBox,ex[1]);
+              setColorValue("color-input",convertToHexIfNeeded(ex[2]));
+              setColorValue("label-color-input",convertToHexIfNeeded(ex[3]));
+              const logoBox=document.querySelector("#logo-input textarea,#logo-input input");
+              if(logoBox)updateReactValue(logoBox,ex[4]);
+              setColorValue("logo-color-input",convertToHexIfNeeded(ex[5]));
+              const styleSel=document.querySelector("#style-input select");
+              if(styleSel){styleSel.value=ex[6];styleSel.dispatchEvent(new Event("change",{bubbles:true}));}
+              const linkBox=document.querySelector("#link-input textarea,#link-input input");
+              if(linkBox)updateReactValue(linkBox,ex[7]);
+            }}
+            </script>
+            """
 
-            # ---------------------------
-            # 예제 섹션
-            # ---------------------------
-            gr.HTML("<h3 style='margin-top:20px; margin-bottom:10px;'>📚 Examples - Click to apply</h3>")
-            
-            with gr.Row(equal_height=True):
-                btn0 = gr.Button("Discord", elem_classes="example-item")
-                btn1 = gr.Button("X.com", elem_classes="example-item")
-                btn2 = gr.Button("Collections", elem_classes="example-item")
-                btn3 = gr.Button("GitHub", elem_classes="example-item")
-            
-            with gr.Row(equal_height=True):
-                btn4 = gr.Button("YouTube", elem_classes="example-item")
-                btn5 = gr.Button("Facebook", elem_classes="example-item")
-                btn6 = gr.Button("Instagram", elem_classes="example-item")
-                btn7 = gr.Button("Threads", elem_classes="example-item")
-            
-            # 버튼 이벤트 연결
-            btn0.click(lambda: 0, outputs=example_idx).then(apply_example, inputs=example_idx, outputs=[label, message, color, label_color, logo, logo_color, style, link])
-            btn1.click(lambda: 1, outputs=example_idx).then(apply_example, inputs=example_idx, outputs=[label, message, color, label_color, logo, logo_color, style, link])
-            btn2.click(lambda: 2, outputs=example_idx).then(apply_example, inputs=example_idx, outputs=[label, message, color, label_color, logo, logo_color, style, link])
-            btn3.click(lambda: 3, outputs=example_idx).then(apply_example, inputs=example_idx, outputs=[label, message, color, label_color, logo, logo_color, style, link])
-            btn4.click(lambda: 4, outputs=example_idx).then(apply_example, inputs=example_idx, outputs=[label, message, color, label_color, logo, logo_color, style, link])
-            btn5.click(lambda: 5, outputs=example_idx).then(apply_example, inputs=example_idx, outputs=[label, message, color, label_color, logo, logo_color, style, link])
-            btn6.click(lambda: 6, outputs=example_idx).then(apply_example, inputs=example_idx, outputs=[label, message, color, label_color, logo, logo_color, style, link])
-            btn7.click(lambda: 7, outputs=example_idx).then(apply_example, inputs=example_idx, outputs=[label, message, color, label_color, logo, logo_color, style, link])
+            gr.HTML(html_items + apply_example_js)
 
-            # ---------------------------
-            # 4) 실시간 업데이트
-            # ---------------------------
-            #  - 초기 로드
+            # ---------- 초기 로드 & 실시간 업데이트 ----------
             demo.load(
                 fn=generate_static_badge,
-                inputs=[label, message, color, label_color, logo, logo_color, style, link],
-                outputs=[out_code, out_preview]
+                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]:
+            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],
-                    queue=False
+                    inputs=[label,message,color,label_color,logo,logo_color,style,link],
+                    outputs=[out_code,out_preview]
                 )
 
-        # ---------------------------
-        # 2) Help Tab
-        # ---------------------------
+        # ▷▷ Help 탭
         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;">🎨 Color Settings</h4>
-                <ul>
-                    <li><strong>Background Color</strong>: Background color for the right side of the badge (hex format, e.g. #5865F2)</li>
-                    <li><strong>Label Background Color</strong>: Background color for the left side of the badge (hex format)</li>
-                    <li><strong>Logo Color</strong>: Color of the logo (hex format, #ffffff for white, #000000 for 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 button 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>Enter colors in hex format (e.g. #FF0000 for red)</li>
-                </ul>
+            <div style="padding:20px;background:rgba(255,255,255,.7);
+                        border-radius:16px;box-shadow:0 4px 12px rgba(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;">🎨 Color Settings</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>
             ''')
 
-    # ---------------------------
-    # Footer
-    # ---------------------------
+    # ---------- 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>
+      <p>© 2023‑2025 BadgeCraft | MIT License  |
+         <a href="https://discord.gg/openfreeai" target="_blank" style="color:#5e60ce;">Discord</a>
+      </p>
     </div>
     ''')
 
+# -------------------------------------------------
+# Launch
+# -------------------------------------------------
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch()