Update app.py

app.py

@@ -23,11 +23,13 @@ def generate_static_badge(label, message, color, label_color, logo, logo_color,
         params.append(f"style={urllib.parse.quote(style, safe='')}")
 
     badge_url = base + ("?" + "&".join(params) if params else "")
+    # HTML snippet with optional link wrapper
     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">'
 
+    # Badge preview container
     badge_preview = f"""
     <div style='padding:20px; background: #fefefe; border-radius: 12px; display: flex; justify-content: center;'>
         {html_code}
@@ -39,76 +41,91 @@ def generate_static_badge(label, message, color, label_color, logo, logo_color,
 # 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.Row():
         out_code = gr.Code(label="HTML Snippet", language="html")
         out_preview = gr.HTML(label="Badge Preview")
 
+    # 사용자 입력 폼: Label, Message, Logo
     with gr.Row():
         label = gr.Textbox(label="Label", placeholder="예: build")
         message = gr.Textbox(label="Message", placeholder="예: passing")
         logo = gr.Textbox(label="Logo", placeholder="예: github")
 
+    # 색상 팔레트: Color, Label Color, Logo Color
     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 드롭다운 및 링크 입력
     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")
 
+    # 입력값 변경 시 자동 업데이트
     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])
 
-    def fill_example(label_val, message_val, logo_val, link_val):
+    # 예제 로딩 함수
+    def load_example(label_val, message_val, logo_val, link_val):
         return label_val, message_val, logo_val, link_val
 
+    # Examples 라벨
     gr.HTML("""
     <h3 style="text-align: center; margin-top: 30px;">✨ Examples (Click to Load)</h3>
     """)
 
+    # 예제 버튼들을 한 줄에 배치
     with gr.Row():
-        with gr.Column():
-            gr.Button("Discord Badge Example").click(
-                fn=fill_example,
-                inputs=[],
-                outputs=[label, message, logo, link],
-                _js="() => window.open('https://discord.gg/openfreeai', '_blank')"
-            ).style(full_width=True)
-
-            gr.Button("X Badge Example").click(
-                fn=fill_example,
-                inputs=[],
-                outputs=[label, message, logo, link],
-                _js="() => window.open('https://x.com/openfree_ai', '_blank')"
-            ).style(full_width=True)
-
-            gr.Button("Instagram Badge Example").click(
-                fn=fill_example,
-                inputs=[],
-                outputs=[label, message, logo, link],
-                _js="() => window.open('https://www.instagram.com/openfree_ai', '_blank')"
-            ).style(full_width=True)
-
-            gr.Button("Threads Badge Example").click(
-                fn=fill_example,
-                inputs=[],
-                outputs=[label, message, logo, link],
-                _js="() => window.open('https://www.threads.net/@openfree_ai', '_blank')"
-            ).style(full_width=True)
-
-            gr.Button("Facebook Badge Example").click(
-                fn=fill_example,
-                inputs=[],
-                outputs=[label, message, logo, link],
-                _js="() => window.open('https://www.facebook.com/profile.php?id=61575353674679', '_blank')"
-            ).style(full_width=True)
-
-# 실행
+        discord_btn = gr.Button("Discord Badge Example")
+        x_btn = gr.Button("X Badge Example")
+        instagram_btn = gr.Button("Instagram Badge Example")
+        threads_btn = gr.Button("Threads Badge Example")
+        facebook_btn = gr.Button("Facebook Badge Example")
+
+    # 각 버튼 클릭 시 예제 데이터 로드 및 새탭 열기
+    discord_btn.click(
+        fn=lambda: load_example("Discord", "Join", "discord", "https://discord.gg/openfreeai"),
+        inputs=[], outputs=[label, message, logo, link]
+    ).then(
+        lambda: gr.open_url("https://discord.gg/openfreeai"), [], []
+    )
+
+    x_btn.click(
+        fn=lambda: load_example("X.com", "Follow", "x", "https://x.com/openfree_ai"),
+        inputs=[], outputs=[label, message, logo, link]
+    ).then(
+        lambda: gr.open_url("https://x.com/openfree_ai"), [], []
+    )
+
+    instagram_btn.click(
+        fn=lambda: load_example("Instagram", "Follow", "instagram", "https://www.instagram.com/openfree_ai"),
+        inputs=[], outputs=[label, message, logo, link]
+    ).then(
+        lambda: gr.open_url("https://www.instagram.com/openfree_ai"), [], []
+    )
+
+    threads_btn.click(
+        fn=lambda: load_example("Threads", "Follow", "threads", "https://www.threads.net/@openfree_ai"),
+        inputs=[], outputs=[label, message, logo, link]
+    ).then(
+        lambda: gr.open_url("https://www.threads.net/@openfree_ai"), [], []
+    )
+
+    facebook_btn.click(
+        fn=lambda: load_example("Facebook", "Like", "facebook", "https://www.facebook.com/profile.php?id=61575353674679"),
+        inputs=[], outputs=[label, message, logo, link]
+    ).then(
+        lambda: gr.open_url("https://www.facebook.com/profile.php?id=61575353674679"), [], []
+    )
+
+# 앱 실행
 if __name__ == "__main__":
     demo.launch()