Update app-backup2.py

app-backup2.py

@@ -39,10 +39,10 @@ def generate_static_badge(label, message, color, label_color, logo, logo_color,
 # Gradio UI 구성
 # ---------------------------
 with gr.Blocks(theme=gr.themes.Default()) as demo:
+    # 기존 static 예제 아이콘들
     gr.HTML("""
     <h1 style="text-align: center; font-size: 2.2em; margin-bottom: 0.2em;">🎨 BadgeCraft - Beautiful Badge Generator</h1>
     <p style="text-align: center; font-size: 1.1em; color: #555;">Design stylish shields.io badges with live preview and HTML snippet generation.</p>
-
     <h3 style="text-align: center; margin-top: 30px;">✨ Examples</h3>
     <div align="center" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin: 10px 0 30px; justify-items: center;">
       <a href="https://discord.gg/openfreeai">
@@ -84,23 +84,48 @@ with gr.Blocks(theme=gr.themes.Default()) as demo:
     </div>
     """)
 
+    # 출력 컴포넌트
     with gr.Row():
         out_code = gr.Code(label="HTML Snippet", language="html")
         out_preview = gr.HTML(label="Badge Preview")
 
+    # 입력 컴포넌트
     with gr.Row():
         label = gr.Textbox(label="Label", placeholder="예: build")
         message = gr.Textbox(label="Message", placeholder="예: passing")
         logo = gr.Textbox(label="Logo", placeholder="예: github")
-
     with gr.Row():
         color = gr.ColorPicker(label="Color", value="#a0c4ff")
         label_color = gr.ColorPicker(label="Label Color", value="#bdb2ff")
         logo_color = gr.ColorPicker(label="Logo Color", value="#ffc6ff")
-
     style = gr.Dropdown(label="Style", choices=["flat", "flat-square", "plastic", "for-the-badge", "social"], value="for-the-badge")
     link = gr.Textbox(label="Link (배지 클릭 시 이동할 URL)", placeholder="https://yourlink.com")
 
+    # Examples 데이터 (8개 필드 순서대로)
+    examples = [
+        ["Discord",   "5865F2", "",    "", "discord",    "white", "for-the-badge", "https://discord.gg/openfreeai"],
+        ["X.com",     "000000", "",    "", "X",          "white", "for-the-badge", "https://x.com/openfree_ai"],
+        ["Collections","F8F8F8", "",    "", "huggingface","black", "for-the-badge", "https://huggingface.co/collections/VIDraft/best-open-ai-services-68057e6e312880ea92abaf4c"],
+        ["VIDraft",   "FCD022", "",    "", "huggingface","black", "for-the-badge", "https://huggingface.co/VIDraft"],
+        ["GitHub",    "181717", "",    "", "github",     "white", "for-the-badge", "https://github.com/openfreeai"],
+        ["Twitter",   "1DA1F2", "",    "", "twitter",    "white", "for-the-badge", "https://twitter.com/openfree_ai"],
+        ["YouTube",   "FF0000", "",    "", "youtube",    "white", "for-the-badge", "https://www.youtube.com/@AITechTree"],
+        ["Instagram", "E4405F", "",    "", "instagram",  "white", "for-the-badge", "https://www.instagram.com/openfree_ai"],
+        ["Threads",   "000000", "",    "", "threads",    "white", "for-the-badge", "https://www.threads.net/@openfree_ai"],
+        ["Facebook",  "1877F2", "",    "", "facebook",   "white", "for-the-badge", "https://www.facebook.com/profile.php?id=61575353674679"],
+    ]
+
+    gr.HTML("<h3 style='text-align: center; margin-top: 30px;'>✨ Click an example to autofill</h3>")
+    gr.Examples(
+        examples=examples,
+        inputs=[label, message, color, label_color, logo, logo_color, style, link],
+        outputs=[out_code, out_preview],
+        fn=generate_static_badge,
+        cache_examples=False,
+        run_on_click=True
+    )
+
+    # 실시간 change 이벤트 바인딩
     inputs = [label, message, color, label_color, logo, logo_color, style, link]
     for inp in inputs:
         inp.change(fn=generate_static_badge, inputs=inputs, outputs=[out_code, out_preview])