Update app.py

app.py

@@ -12,14 +12,17 @@ def generate_static_badge(label, message, color, label_color, logo, logo_color,
     if message:
         params.append(f"message={urllib.parse.quote(message, safe='')}")
     if color:
-        # 색상에서 # 기호 제거 (URL 인코딩 문제 방지)
-        params.append(f"color={urllib.parse.quote(color.lstrip('#'), safe='')}")
+        # 색상값에서 # 제거
+        color = color.lstrip('#')
+        params.append(f"color={urllib.parse.quote(color, safe='')}")
     if label_color:
-        params.append(f"labelColor={urllib.parse.quote(label_color.lstrip('#'), safe='')}")
+        label_color = label_color.lstrip('#')
+        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.lstrip('#'), safe='')}")
+        logo_color = logo_color.lstrip('#')
+        params.append(f"logoColor={urllib.parse.quote(logo_color, safe='')}")
     if style:
         params.append(f"style={urllib.parse.quote(style, safe='')}")
 
@@ -38,6 +41,25 @@ def generate_static_badge(label, message, color, label_color, logo, logo_color,
     """
     return html_code, badge_preview
 
+# 예제 적용을 위한 함수
+def apply_example(idx):
+    examples = [
+        ["Discord",    "Openfree AI",    "#5865F2", "#99AAFF", "discord",   "#ffffff", "for-the-badge", "https://discord.gg/openfreeai"],
+        ["X.com",      "Follow us",      "#1DA1F2", "#00CFFF", "x",         "#ffffff", "for-the-badge", "https://x.com/openfree_ai"],
+        ["Collections","Explore",        "#FFB300", "#FFF176", "huggingface","#000000","for-the-badge", "https://huggingface.co/collections/VIDraft/best-open-ai-services-68057e6e312880ea92abaf4c"],
+        ["GitHub",     "Star us",        "#0A0A0A", "#39FF14", "github",    "#ffffff", "for-the-badge", "https://github.com/openfreeai"],
+        ["YouTube",    "Watch now",      "#E50000", "#FF5E5E", "youtube",   "#ffffff", "for-the-badge", "https://www.youtube.com/@AITechTree"],
+        ["Facebook",   "Like us",        "#1877F2", "#6FAFFF", "facebook",  "#ffffff", "for-the-badge", "https://www.facebook.com/profile.php?id=61575353674679"],
+        ["Instagram",  "友情 萬世",        "#E4405F", "#FF77A9", "instagram", "#ffffff", "for-the-badge", "https://www.instagram.com/openfree_ai/"],
+        ["Threads",    "함께 즐겨요.",    "#000000", "#FF00FF", "threads",   "#ffffff", "for-the-badge", "https://www.threads.net/@openfree_ai"],
+    ]
+    
+    if idx < 0 or idx >= len(examples):
+        return [None] * 8  # 인덱스 범위 초과 시 값 반환 안함
+    
+    # 기존 예제 값 반환
+    return examples[idx]
+
 with gr.Blocks(theme=gr.themes.Soft()) as demo:
     # ---------------------------
     # Custom CSS & Header
@@ -120,7 +142,6 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
         border-radius: 12px;
         padding: 16px;
         text-align: center;
-        cursor: pointer;
         transition: all 0.3s ease;
         border: 2px solid transparent;
       }
@@ -129,6 +150,14 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
         box-shadow: 0 8px 15px rgba(0,0,0,0.05);
         border-color: #a8dadc;
       }
+      .example-btn {
+        width: 100%;
+        padding: 10px;
+        border: none;
+        background: transparent;
+        cursor: pointer;
+        border-radius: 10px;
+      }
       @media (max-width: 768px) {
         .example-grid {
           grid-template-columns: repeat(2, 1fr);
@@ -158,6 +187,9 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
     </div>
     """)
 
+    # 예제 클릭 상태 관리용 (실제로는 보이지 않음)
+    example_idx = gr.State(-1)
+
     with gr.Tabs():
         # ---------------------------
         # 1) Badge Generator Tab
@@ -173,13 +205,12 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
                         style = gr.Dropdown(
                             label="Style", 
                             choices=["flat", "flat-square", "plastic", "for-the-badge", "social"], 
-                            value="for-the-badge",
-                            elem_id="style-input"
+                            value="for-the-badge"
                         )
-                        color = gr.ColorPicker(label="Background Color", value="#5865F2", elem_id="color-input", interactive=True)
-                        label_color = gr.ColorPicker(label="Label Background Color", value="#99AAFF", elem_id="label-color-input", interactive=True)
-                        logo_color = gr.ColorPicker(label="Logo Color", value="#ffffff", elem_id="logo-color-input", interactive=True)
-                        link = gr.Textbox(label="Link (URL)", value="https://discord.gg/openfreeai", elem_id="link-input", lines=1)
+                        color = gr.Textbox(label="Background Color (hex)", value="#5865F2", lines=1)
+                        label_color = gr.Textbox(label="Label Background Color (hex)", value="#99AAFF", lines=1)
+                        logo_color = gr.Textbox(label="Logo Color (hex)", value="#ffffff", lines=1)
+                        link = gr.Textbox(label="Link (URL)", value="https://discord.gg/openfreeai", lines=1)
                 with gr.Column():
                     with gr.Group(elem_classes="badge-section"):
                         gr.HTML("<h3 style='margin-top:0; margin-bottom:16px; font-size:1.3rem;'>👁️ Preview</h3>")
@@ -189,171 +220,49 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
                         out_code = gr.Code(label="", language="html", lines=3)
 
             # ---------------------------
-            # 2) Example Grid
-            # ---------------------------
-            examples = [
-                ["Discord",    "Openfree AI",    "#5865F2", "#99AAFF", "discord",   "white", "for-the-badge", "https://discord.gg/openfreeai"],
-                ["X.com",      "Follow us",      "#1DA1F2", "#00CFFF", "x",         "white", "for-the-badge", "https://x.com/openfree_ai"],
-                ["Collections","Explore",        "#FFB300", "#FFF176", "huggingface","black","for-the-badge", "https://huggingface.co/collections/VIDraft/best-open-ai-services-68057e6e312880ea92abaf4c"],
-                ["GitHub",     "Star us",        "#0A0A0A", "#39FF14", "github",    "white", "for-the-badge", "https://github.com/openfreeai"],
-                ["YouTube",    "Watch now",      "#E50000", "#FF5E5E", "youtube",   "white", "for-the-badge", "https://www.youtube.com/@AITechTree"],
-                ["Facebook",   "Like us",        "#1877F2", "#6FAFFF", "facebook",  "white", "for-the-badge", "https://www.facebook.com/profile.php?id=61575353674679"],
-                ["Instagram",  "友情 萬世",        "#E4405F", "#FF77A9", "instagram", "white", "for-the-badge", "https://www.instagram.com/openfree_ai/"],
-                ["Threads",    "함께 즐겨요.",    "#000000", "#FF00FF", "threads",   "white", "for-the-badge", "https://www.threads.net/@openfree_ai"],
-            ]
-
-            html_items = '<div class="example-grid">'
-            for idx, ex in enumerate(examples):
-                # ex = [label, message, bg_color, label_color, logo, logo_color, style, link]
-                badge_url = (
-                    "https://img.shields.io/static/v1?" + "&".join([
-                        f"label={urllib.parse.quote(ex[0], safe='')}",
-                        f"message={urllib.parse.quote(ex[1], safe='')}",
-                        f"color={urllib.parse.quote(ex[2].lstrip('#'), safe='')}",
-                        f"labelColor={urllib.parse.quote(ex[3].lstrip('#'), safe='')}",
-                        f"logo={urllib.parse.quote(ex[4], safe='')}",
-                        f"logoColor={urllib.parse.quote(ex[5], safe='')}",
-                        f"style={urllib.parse.quote(ex[6], safe='')}"
-                    ])
-                )
-                html_items += f'''
-                <div class="example-item" onclick="applyExample({idx})">
-                    <img src="{badge_url}" alt="{ex[0]} badge" style="margin-bottom:8px;">
-                    <div style="font-size:0.9rem; color:#457b9d;">{ex[0]}</div>
-                </div>
-                '''
-            html_items += '</div>'
-
-            # ---------------------------
-            # 3) React Controlled Input Hack
+            # 예제 섹션
             # ---------------------------
-            hack_js = """
-            function reactSet(el, newVal) {
-                if (!el) return;
-                // 구분: input vs textarea
-                const proto = (el.tagName === "TEXTAREA")
-                              ? HTMLTextAreaElement.prototype
-                              : HTMLInputElement.prototype;
-                const desc = Object.getOwnPropertyDescriptor(proto, "value");
-                desc.set.call(el, newVal);
-
-                // 그라디오/리액트에서 인식하도록 필요한 이벤트들
-                el.dispatchEvent(new Event("input",  { bubbles: true }));
-                el.dispatchEvent(new Event("change", { bubbles: true }));
-                el.dispatchEvent(new Event("blur",   { bubbles: true }));
-            }
-
-            function convertToHexIfNeeded(colorStr) {
-                if (!colorStr) return "#000000";
-                const c = colorStr.toLowerCase();
-                if (c === "white") return "#ffffff";
-                if (c === "black") return "#000000";
-                return colorStr;
-            }
-
-            function setColor(elemId, colorValue) {
-                const container = document.getElementById(elemId);
-                if (!container) return;
-
-                // Gradio ColorPicker 컴포넌트 내부 구조 접근
-                const colorInputs = container.querySelectorAll("input");
-                if (colorInputs.length === 0) return;
-                
-                // 컬러피커 요소 및 텍스트 입력 요소 모두에 적용
-                for (const input of colorInputs) {
-                    if (input.type === 'color' || input.type === 'text') {
-                        reactSet(input, colorValue);
-                    }
-                }
-
-                // 색상 표시 영역 업데이트 (Gradio 버전에 따라 선택자 달라질 수 있음)
-                const colorArea = container.querySelector("[data-testid='color-picker'], .color-circle, .color-preview");
-                if (colorArea) {
-                    colorArea.style.background = colorValue;
-                }
-                
-                // 추가: 변경 사항 실시간 반영을 위한 처리
-                setTimeout(() => {
-                    const anyInput = colorInputs[0];
-                    if (anyInput) {
-                        anyInput.dispatchEvent(new Event('change', { bubbles: true }));
-                    }
-                }, 50);
-            }
-
-            const examples = REPLACE_EXAMPLES; // placeholder
-            function applyExample(i) {
-                const ex = examples[i];
-                // ex = [label, message, bg_color, label_bg, logo, logo_color, style, link]
-
-                // Label
-                reactSet(document.querySelector("#label-input input,#label-input textarea"), ex[0]);
-                // Message
-                reactSet(document.querySelector("#message-input input,#message-input textarea"), ex[1]);
-                
-                // 색상 설정 - 적용 순서와 지연 추가
-                setTimeout(() => {
-                    // Background Color
-                    setColor("color-input", convertToHexIfNeeded(ex[2]));
-                    
-                    setTimeout(() => {
-                        // Label Background
-                        setColor("label-color-input", convertToHexIfNeeded(ex[3]));
-                        
-                        setTimeout(() => {
-                            // Logo Color
-                            setColor("logo-color-input", convertToHexIfNeeded(ex[5]));
-                            
-                            // 모든 색상 설정 후 강제 업데이트 트리거
-                            document.querySelector("#label-input input").dispatchEvent(
-                                new Event('change', { bubbles: true })
-                            );
-                        }, 50);
-                    }, 50);
-                }, 50);
-                
-                // Logo
-                reactSet(document.querySelector("#logo-input input,#logo-input textarea"), ex[4]);
-                
-                // Style (Dropdown)
-                const styleSelect = document.querySelector("#style-input select");
-                if (styleSelect) {
-                    styleSelect.value = ex[6];
-                    styleSelect.dispatchEvent(new Event("change", { bubbles: true }));
-                }
-                
-                // Link
-                reactSet(document.querySelector("#link-input input,#link-input textarea"), ex[7]);
-            }
-            """
-
-            # JS 안에 examples 배열을 문자열로 치환
-            examples_str = str(examples).replace("'", '"')
-            hack_js = hack_js.replace("REPLACE_EXAMPLES", examples_str)
-
-            gr.HTML(html_items + f"<script>{hack_js}</script>")
+            gr.HTML("<h3 style='margin-top:20px; margin-bottom:10px;'>📚 Examples - Click to apply</h3>")
+            
+            with gr.Row(equal_height=True):
+                btn0 = gr.Button("Discord", elem_classes="example-item")
+                btn1 = gr.Button("X.com", elem_classes="example-item")
+                btn2 = gr.Button("Collections", elem_classes="example-item")
+                btn3 = gr.Button("GitHub", elem_classes="example-item")
+            
+            with gr.Row(equal_height=True):
+                btn4 = gr.Button("YouTube", elem_classes="example-item")
+                btn5 = gr.Button("Facebook", elem_classes="example-item")
+                btn6 = gr.Button("Instagram", elem_classes="example-item")
+                btn7 = gr.Button("Threads", elem_classes="example-item")
+            
+            # 버튼 이벤트 연결
+            btn0.click(lambda: 0, outputs=example_idx).then(apply_example, inputs=example_idx, outputs=[label, message, color, label_color, logo, logo_color, style, link])
+            btn1.click(lambda: 1, outputs=example_idx).then(apply_example, inputs=example_idx, outputs=[label, message, color, label_color, logo, logo_color, style, link])
+            btn2.click(lambda: 2, outputs=example_idx).then(apply_example, inputs=example_idx, outputs=[label, message, color, label_color, logo, logo_color, style, link])
+            btn3.click(lambda: 3, outputs=example_idx).then(apply_example, inputs=example_idx, outputs=[label, message, color, label_color, logo, logo_color, style, link])
+            btn4.click(lambda: 4, outputs=example_idx).then(apply_example, inputs=example_idx, outputs=[label, message, color, label_color, logo, logo_color, style, link])
+            btn5.click(lambda: 5, outputs=example_idx).then(apply_example, inputs=example_idx, outputs=[label, message, color, label_color, logo, logo_color, style, link])
+            btn6.click(lambda: 6, outputs=example_idx).then(apply_example, inputs=example_idx, outputs=[label, message, color, label_color, logo, logo_color, style, link])
+            btn7.click(lambda: 7, outputs=example_idx).then(apply_example, inputs=example_idx, outputs=[label, message, color, label_color, logo, logo_color, style, link])
 
             # ---------------------------
             # 4) 실시간 업데이트
             # ---------------------------
-            # 실시간 업데이트 빈도 증가 및 별도 함수 추가
-            def update_badge(*args):
-                return generate_static_badge(*args)
-
             #  - 초기 로드
             demo.load(
-                fn=update_badge,
+                fn=generate_static_badge,
                 inputs=[label, message, color, label_color, logo, logo_color, style, link],
                 outputs=[out_code, out_preview]
             )
             
-            # - 변경 이벤트 - 각 입력에 대해 독립적으로 처리
+            # - 모든 변경 감지 및 실시간 업데이트
             for inp in [label, message, color, label_color, logo, logo_color, style, link]:
                 inp.change(
-                    fn=update_badge,
+                    fn=generate_static_badge,
                     inputs=[label, message, color, label_color, logo, logo_color, style, link],
                     outputs=[out_code, out_preview],
-                    queue=False  # 빠른 응답을 위해 큐 사용 안 함
+                    queue=False
                 )
 
         # ---------------------------
@@ -374,19 +283,19 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
                 </ul>
                 <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>
-                    <li><strong>Logo Color</strong>: Color of the logo (e.g. #ffffff or #000000)</li>
+                    <li><strong>Background Color</strong>: Background color for the right side of the badge (hex format, e.g. #5865F2)</li>
+                    <li><strong>Label Background Color</strong>: Background color for the left side of the badge (hex format)</li>
+                    <li><strong>Logo Color</strong>: Color of the logo (hex format, #ffffff for white, #000000 for black)</li>
                 </ul>
                 <h4 style="color: #457b9d; margin-bottom: 8px;">🔗 Using the HTML</h4>
                 <p>Copy the generated HTML code and paste it into your website, blog, GitHub README, etc.</p>
                 <p>HTML works in GitHub READMEs, but if you prefer markdown, use <code>![alt text](badge URL)</code>.</p>
                 <h4 style="color: #457b9d; margin-bottom: 8px;">💡 Tips</h4>
                 <ul>
-                    <li>Click on any example in the grid to automatically fill in all settings</li>
+                    <li>Click on any example button to automatically fill in all settings</li>
                     <li>The preview updates in real-time as you make changes</li>
                     <li>You can use over 2000+ logos from Simple Icons - just enter the name</li>
-                    <li>Custom colors can be selected with the color picker or by entering a hex code</li>
+                    <li>Enter colors in hex format (e.g. #FF0000 for red)</li>
                 </ul>
             </div>
             ''')