Update app-backup.py

app-backup.py

@@ -1,7 +1,10 @@
 import urllib.parse
 import gradio as gr
 
-def generate_static_badge(label, message, color, style, label_color, logo, logo_color):
+# ---------------------------
+# 배지 URL 생성 함수 정의
+# ---------------------------
+def generate_static_badge(label, message, color, label_color, logo, logo_color, style, link):
     base = "https://img.shields.io/static/v1"
     params = []
     if label:
@@ -10,51 +13,79 @@ def generate_static_badge(label, message, color, style, label_color, logo, logo_
         params.append(f"message={urllib.parse.quote(message, safe='')}")
     if color:
         params.append(f"color={urllib.parse.quote(color, safe='')}")
-    if style:
-        params.append(f"style={urllib.parse.quote(style, 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='')}")
 
-    url = base + ("?" + "&".join(params) if params else "")
-    # HTML snippet
-    html_code = f'<img src="{url}" alt="{label or message} badge">'
+    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 컴포넌트로 그대로 보여줄 미리보기(크기 지정 가능)
-    preview_html = f"""
-    <div style="display:inline-block; padding:10px; border:1px solid #ccc;">
-        <img src="{url}" alt="Badge Preview">
+    badge_preview = f"""
+    <div style='padding:20px; background: #fefefe; border-radius: 12px; display: flex; justify-content: center;'>
+        {html_code}
     </div>
     """
-    return html_code, preview_html
+    return html_code, badge_preview
 
+# ---------------------------
+# Gradio UI 구성
+# ---------------------------
+with gr.Blocks(theme=gr.themes.Default()) as demo:
+    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>
+    """)
 
-with gr.Blocks() as demo:
-    gr.Markdown("## Shields.io Badge Generator 🛠")
-    
-    with gr.Row():
-        lbl = gr.Textbox(label="Label")
-        msg = gr.Textbox(label="Message")
+    # 출력 컴포넌트
+    out_code = gr.Code(label="HTML Snippet", language="html")
+    out_preview = gr.HTML(label="Badge Preview")
+
+    # 입력 컴포넌트
     with gr.Row():
-        col = gr.Textbox(label="Color", value="blue")
-        lbl_col = gr.Textbox(label="Label Color")
+        label = gr.Textbox(label="Label", placeholder="예: build")
+        message = gr.Textbox(label="Message", placeholder="예: passing")
+        logo = gr.Textbox(label="Logo", placeholder="예: github")
     with gr.Row():
-        logo_in = gr.Textbox(label="Logo")
-        logo_col = gr.Textbox(label="Logo Color")
-    style_in = gr.Dropdown(
-        label="Style",
-        choices=["flat", "flat-square", "plastic", "for-the-badge", "social"],
-        value="flat"
-    )
+        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")
 
-    out_code = gr.Code(label="HTML Snippet", language="html")
-    out_html = gr.HTML(label="Preview")
+    # Examples 정의 (8개 필드 순서대로)
+    examples = [
+        ["Discord", "OpenFree AI", "OpenFree AI", "", "discord", "white", "for-the-badge", "https://discord.gg/openfreeai"],
+        ["X.com", "OpenFree AI", "OpenFree AI", "", "X", "white", "for-the-badge", "https://x.com/openfree_ai"],
+        ["Collections", "OpenFree AI", "", "", "huggingface", "black", "for-the-badge", "https://huggingface.co/collections/VIDraft/best-open-ai-services-68057e6e312880ea92abaf4c"],
+        ["GitHub", "OpenFree AI", "", "", "github", "white", "for-the-badge", "https://github.com/openrunai"],
+        ["YouTube", "나의 유튜브 채널", "#FF0000", "", "youtube", "white", "for-the-badge", "https://www.youtube.com/@AITechTree"],
+        ["Facebook", "OpenFree AI", "", "", "Facebook", "black", "for-the-badge", "https://www.facebook.com/profile.php?id=61575353674679"],
+        ["Instagram", "OpenFree AI", "", "", "Instagram", "white", "for-the-badge", "https://www.instagram.com/openfree_ai/"],
+        ["Threads", "你好", "#FF0000", "", "Threads", "white", "for-the-badge", "https://www.threads.net/@openfree_ai"],        
+    ]
+    gr.HTML("<h3 style='text-align:center; margin-top:20px;'>✨ Examples (클릭하면 자동 입력)</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,
+    )
 
-    inputs = [lbl, msg, col, style_in, lbl_col, logo_in, logo_col]
+    # 실시간 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_html])
+        inp.change(fn=generate_static_badge, inputs=inputs, outputs=[out_code, out_preview])
 
-demo.launch()
+# 실행
+if __name__ == "__main__":
+    demo.launch()