Update app.py

app.py

@@ -4,6 +4,7 @@ import gradio as gr
 # ---------------------------
 # Badge URL generation
 # ---------------------------
+
 def generate_static_badge(label, message, color, label_color, logo, logo_color, style, link):
     base = "https://img.shields.io/static/v1"
     params = []
@@ -41,6 +42,17 @@ def generate_static_badge(label, message, color, label_color, logo, logo_color,
 # Gradio UI
 # ---------------------------
 with gr.Blocks(theme=gr.themes.Soft()) as demo:
+    # Product Hunt badge (prominent but non‑intrusive)
+    gr.HTML(
+        """
+        <div style='display:flex; justify-content:center; margin-top:8px; margin-bottom:18px;'>
+            <a href="https://www.producthunt.com/posts/badgecraft?embed=true&utm_source=badge-featured&utm_medium=badge&utm_souce=badge-badgecraft" target="_blank">
+                <img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=955939&theme=light&t=1745232319766" alt="BadgeCraft | Product Hunt" style="width:250px; height:54px;" />
+            </a>
+        </div>
+        """
+    )
+
     # Custom CSS
     gr.HTML("""
     <style>
@@ -203,9 +215,8 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
                             value="for-the-badge",
                             elem_id="style-input"
                         )
-                        
-                        # Replace color pickers with dropdown selections
-                        color_choices = [f"<div><span class='color-preview' style='background-color:{hex_code}'></span>{name}</div>" for name, hex_code in color_options.items()]
+
+                        # Dropdown color selections
                         color = gr.Dropdown(
                             label="Background Color", 
                             choices=list(color_options.keys()),
@@ -233,7 +244,7 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
                         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)
 
-            # 예제 리스트 (label, message, bg_color, label_color, logo, logo_color, style, link)
+            # Example list (label, message, bg_color, label_color, logo, logo_color, style, link)
             examples = [
                 ["Discord",    "Openfree AI",    "Blue", "Purple", "discord",   "white", "for-the-badge", "https://discord.gg/openfreeai"],
                 ["X.com",      "Follow us",      "Blue", "Cyan", "x",         "white", "for-the-badge", "https://x.com/openfree_ai"],
@@ -245,14 +256,12 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
                 ["Threads",    "함께 즐겨요.",    "Navy", "Magenta", "threads",   "white", "for-the-badge", "https://www.threads.net/@openfree_ai"],
             ]
 
-            # 예제 미리보기
+            # Example grid preview
             html_items = '<div class="example-grid">'
             for idx, ex in enumerate(examples):
-                # ex = [label, message, bg_color, label_color, logo, logo_color, style, link]
                 color_hex = color_options.get(ex[2], ex[2])
                 label_color_hex = color_options.get(ex[3], ex[3])
                 logo_color_val = color_options.get(ex[5], ex[5]) if ex[5] in color_options else ex[5]
-                
                 badge_url = (
                     "https://img.shields.io/static/v1?" + "&".join([
                         f"label={urllib.parse.quote(ex[0], safe='')}",
@@ -261,7 +270,7 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
                         f"labelColor={urllib.parse.quote(label_color_hex, safe='')}",
                         f"logo={urllib.parse.quote(ex[4], safe='')}",
                         f"logoColor={urllib.parse.quote(logo_color_val, safe='')}",
-                        f"style={urllib.parse.quote(ex[6], safe='')}"
+                        f"style={urllib.parse.quote(ex[6], safe='')}",
                     ])
                 )
                 html_items += f'''
@@ -272,7 +281,6 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
                 '''
             html_items += '</div>'
 
-            # 예제를 클릭했을 때 적용하는 main 함수
             apply_example_js = """
             <script>
             function updateSelectValue(selectEl, newValue) {
@@ -280,98 +288,63 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
                 selectEl.value = newValue;
                 selectEl.dispatchEvent(new Event("change", { bubbles: true }));
             }
-            
             function updateTextValue(el, newValue) {
                 if (!el) return;
                 el.value = newValue;
                 el.dispatchEvent(new Event("input", { bubbles: true }));
                 el.dispatchEvent(new Event("change", { bubbles: true }));
             }
-            
             const examples = """ + str(examples).replace("'", '"') + """;
-
             function applyExample(i) {
                 const ex = examples[i];
-                // ex = [label, message, bg_color, label_color, logo, logo_color, style, link]
-
-                // Label
-                const labelBox = document.querySelector("#label-input textarea, #label-input input");
-                if (labelBox) {
-                    updateTextValue(labelBox, ex[0]);
-                }
-
-                // Message
-                const msgBox = document.querySelector("#message-input textarea, #message-input input");
-                if (msgBox) {
-                    updateTextValue(msgBox, ex[1]);
-                }
-
-                // Background Color (Dropdown)
-                const bgColorSelect = document.querySelector("#color-input select");
-                if (bgColorSelect) {
-                    updateSelectValue(bgColorSelect, ex[2]);
-                }
-
-                // Label Background Color (Dropdown)
-                const labelColorSelect = document.querySelector("#label-color-input select");
-                if (labelColorSelect) {
-                    updateSelectValue(labelColorSelect, ex[3]);
-                }
-
-                // Logo
-                const logoBox = document.querySelector("#logo-input textarea, #logo-input input");
-                if (logoBox) {
-                    updateTextValue(logoBox, ex[4]);
-                }
-
-                // Logo Color (Dropdown)
-                const logoColorSelect = document.querySelector("#logo-color-input select");
-                if (logoColorSelect) {
-                    updateSelectValue(logoColorSelect, ex[5]);
-                }
-
-                // Style (Dropdown)
-                const styleSelect = document.querySelector("#style-input select");
-                if (styleSelect) {
-                    updateSelectValue(styleSelect, ex[6]);
-                }
-
-                // Link
-                const linkBox = document.querySelector("#link-input textarea, #link-input input");
-                if (linkBox) {
-                    updateTextValue(linkBox, ex[7]);
-                }
+                const selectors = {
+                  label: "#label-input",
+                  message: "#message-input",
+                  color: "#color-input select",
+                  labelColor: "#label-color-input select",
+                  logo: "#logo-input",
+                  logoColor: "#logo-color-input select",
+                  style: "#style-input select",
+                  link: "#link-input"
+                };
+                const labelBox = document.querySelector(`${selectors.label} textarea, ${selectors.label} input`);
+                if (labelBox) { updateTextValue(labelBox, ex[0]); }
+                const msgBox = document.querySelector(`${selectors.message} textarea, ${selectors.message} input`);
+                if (msgBox) { updateTextValue(msgBox, ex[1]); }
+                const bgColorSelect = document.querySelector(selectors.color);
+                if (bgColorSelect) { updateSelectValue(bgColorSelect, ex[2]); }
+                const labelColorSelect = document.querySelector(selectors.labelColor);
+                if (labelColorSelect) { updateSelectValue(labelColorSelect, ex[3]); }
+                const logoBox = document.querySelector(`${selectors.logo} textarea, ${selectors.logo} input`);
+                if (logoBox) { updateTextValue(logoBox, ex[4]); }
+                const logoColorSelect = document.querySelector(selectors.logoColor);
+                if (logoColorSelect) { updateSelectValue(logoColorSelect, ex[5]); }
+                const styleSelect = document.querySelector(selectors.style);
+                if (styleSelect) { updateSelectValue(styleSelect, ex[6]); }
+                const linkBox = document.querySelector(`${selectors.link} textarea, ${selectors.link} input`);
+                if (linkBox) { updateTextValue(linkBox, ex[7]); }
             }
             </script>
             """
 
             gr.HTML(html_items + apply_example_js)
 
-            # 함수를 수정하여 색상 값을 변환
             def process_badge(label, message, color_name, label_color_name, logo, logo_color_name, style, link):
-                # 색상 이름을 hex 코드로 변환
                 color_hex = color_options.get(color_name, "#000000")
                 label_color_hex = color_options.get(label_color_name, "#000000")
-                
-                # logo_color가 white나 black인 경우 그대로 사용, 아니면 hex 코드로 변환
-                if logo_color_name in ["white", "black"]:
-                    logo_color_hex = logo_color_name
-                else:
-                    logo_color_hex = color_options.get(logo_color_name, "#ffffff")
-                
+                logo_color_hex = logo_color_name if logo_color_name in ["white", "black"] else color_options.get(logo_color_name, "#ffffff")
                 return generate_static_badge(label, message, color_hex, label_color_hex, logo, logo_color_hex, style, link)
 
-            # 초기/실시간 업데이트
             demo.load(
                 fn=process_badge,
                 inputs=[label, message, color, label_color, logo, logo_color, style, link],
-                outputs=[out_code, out_preview]
+                outputs=[out_code, out_preview],
             )
             for inp in [label, message, color, label_color, logo, logo_color, style, link]:
                 inp.change(
                     fn=process_badge,
                     inputs=[label, message, color, label_color, logo, logo_color, style, link],
-                    outputs=[out_code, out_preview]
+                    outputs=[out_code, out_preview],
                 )
 
         with gr.TabItem("Help"):
@@ -387,7 +360,7 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
                     <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;">🎨 ColorSettings</h4>
+                <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>
@@ -416,4 +389,4 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
     ''')
 
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch()