Update app.py

app.py

@@ -2,7 +2,7 @@ import urllib.parse
 import gradio as gr
 
 # ---------------------------
-# 배지 URL 생성 함수 정의
+# Badge URL generation
 # ---------------------------
 def generate_static_badge(label, message, color, label_color, logo, logo_color, style, link):
     base = "https://img.shields.io/static/v1"
@@ -36,56 +36,74 @@ def generate_static_badge(label, message, color, label_color, logo, logo_color,
     return html_code, badge_preview
 
 # ---------------------------
-# Gradio UI 구성
+# Gradio UI
 # ---------------------------
 with gr.Blocks(theme=gr.themes.Default()) as demo:
+    # Custom pastel CSS
     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>
+    <style>
+      body { background: #f7f9fc; }
+      .gradio-container { background: #ffffff; border-radius: 16px; padding: 20px; }
+      .gr-button { background: #a8dadc !important; color: #1d3557 !important; }
+      .gr-textbox, .gr-select, .gr-color { background: #e8f6f3 !important; }
+      h1 { color: #457b9d; }
+      h3 { color: #6d6875; }
+    </style>
     """)
 
-    # 출력 컴포넌트
-    out_code = gr.Code(label="HTML Snippet", language="html")
-    out_preview = gr.HTML(label="Badge Preview")
+    gr.HTML("""
+    <h1 style=\"text-align:center; margin-bottom:0.2em;\">🎨 BadgeCraft</h1>
+    <p style=\"text-align:center; color:#555;\">Create colorful shields.io badges with live preview and HTML snippet.</p>
+    """)
+
+    # Output components
+    with gr.Row():
+        out_code = gr.Code(label="HTML Snippet", language="html")
+        out_preview = gr.HTML(label="Badge Preview")
 
-    # 입력 컴포넌트
+    # Input components with Discord defaults
     with gr.Row():
-        label = gr.Textbox(label="Label", placeholder="예: build")
-        message = gr.Textbox(label="Message", placeholder="예: passing")
-        logo = gr.Textbox(label="Logo", placeholder="예: github")
+        label = gr.Textbox(label="Label", placeholder="e.g. build", value="Discord")
+        message = gr.Textbox(label="Message", placeholder="e.g. passing", value="Join our community")
+        logo = gr.Textbox(label="Logo", placeholder="e.g. github", value="discord")
     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")
+        color = gr.ColorPicker(label="Color", value="#7289DA")
+        label_color = gr.ColorPicker(label="Label Color", value="#99AAB5")
+        logo_color = gr.ColorPicker(label="Logo Color", value="white")
+    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://example.com", value="https://discord.gg/openfreeai")
 
-    # Examples 정의 (8개 필드 순서대로)
+    # Example presets (click to autofill)
     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"],        
+        ["Discord","Join our community","#7289DA","#99AAB5","discord","white","for-the-badge","https://discord.gg/openfreeai"],
+        ["X.com","Follow us","#1DA1F2","#A8D0E6","X","white","for-the-badge","https://x.com/openfree_ai"],
+        ["Collections","Explore","#F9A826","#FBF3A1","huggingface","black","for-the-badge","https://huggingface.co/collections/VIDraft/best-open-ai-services-68057e6e312880ea92abaf4c"],
+        ["GitHub","Star us","#181717","#B0B0B0","github","white","for-the-badge","https://github.com/openfreeai"],
+        ["YouTube","Watch now","#FF0000","#FFA3A3","youtube","white","for-the-badge","https://www.youtube.com/@AITechTree"],
+        ["Facebook","Like us","#1877F2","#A3C4F0","facebook","white","for-the-badge","https://www.facebook.com/profile.php?id=61575353674679"],
+        ["Instagram","Follow","#E4405F","#F5A3B1","instagram","white","for-the-badge","https://www.instagram.com/openfree_ai/"],
+        ["Threads","Join the convo","#000000","#CCCCCC","threads","white","for-the-badge","https://www.threads.net/@openfree_ai"],
     ]
-    gr.HTML("<h3 style='text-align:center; margin-top:20px;'>✨ Examples (클릭하면 자동 입력)</h3>")
+    gr.HTML("<h3 style='text-align:center; margin-top:20px;'>✨ Examples (click to autofill)</h3>")
     gr.Examples(
         examples=examples,
-        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],
         fn=generate_static_badge,
         cache_examples=False,
-        run_on_click=True,
+        run_on_click=True
+    )
+
+    # On-load default preview
+    demo.load(
+        fn=generate_static_badge,
+        inputs=[label,message,color,label_color,logo,logo_color,style,link],
+        outputs=[out_code,out_preview]
     )
 
-    # 실시간 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])
+    # Live update on change
+    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])
 
-# 실행
 if __name__ == "__main__":
     demo.launch()