Update app.py

app.py

@@ -12,13 +12,14 @@ 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:
-        params.append(f"color={urllib.parse.quote(color, safe='')}")
+        # 색상에서 # 기호 제거 (URL 인코딩 문제 방지)
+        params.append(f"color={urllib.parse.quote(color.lstrip('#'), safe='')}")
     if label_color:
-        params.append(f"labelColor={urllib.parse.quote(label_color, safe='')}")
+        params.append(f"labelColor={urllib.parse.quote(label_color.lstrip('#'), 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='')}")
+        params.append(f"logoColor={urllib.parse.quote(logo_color.lstrip('#'), safe='')}")
     if style:
         params.append(f"style={urllib.parse.quote(style, safe='')}")
 
@@ -175,9 +176,9 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
                             value="for-the-badge",
                             elem_id="style-input"
                         )
-                        color = gr.ColorPicker(label="Background Color", value="#5865F2", elem_id="color-input")
-                        label_color = gr.ColorPicker(label="Label Background Color", value="#99AAFF", elem_id="label-color-input")
-                        logo_color = gr.ColorPicker(label="Logo Color", value="#ffffff", elem_id="logo-color-input")
+                        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)
                 with gr.Column():
                     with gr.Group(elem_classes="badge-section"):
@@ -208,8 +209,8 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
                     "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], safe='')}",
-                        f"labelColor={urllib.parse.quote(ex[3], 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='')}"
@@ -254,17 +255,30 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
                 const container = document.getElementById(elemId);
                 if (!container) return;
 
-                // Gradio ColorPicker 는 보통 input[type='text'] 로 렌더됨
-                let colorInput = container.querySelector("input[type='text'], input[type='color']");
-                if (!colorInput) return;
-
-                reactSet(colorInput, colorValue);
+                // 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 >= 4.17)
-                const colorArea = container.querySelector("[data-testid='color-picker']");
+                // 색상 표시 영역 업데이트 (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
@@ -276,20 +290,38 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
                 reactSet(document.querySelector("#label-input input,#label-input textarea"), ex[0]);
                 // Message
                 reactSet(document.querySelector("#message-input input,#message-input textarea"), ex[1]);
-                // Background Color
-                setColor("color-input", convertToHexIfNeeded(ex[2]));
-                // Label Background
-                setColor("label-color-input", convertToHexIfNeeded(ex[3]));
+                
+                // 색상 설정 - 적용 순서와 지연 추가
+                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]);
-                // Logo Color
-                setColor("logo-color-input", convertToHexIfNeeded(ex[5]));
+                
                 // 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]);
             }
@@ -304,18 +336,24 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
             # ---------------------------
             # 4) 실시간 업데이트
             # ---------------------------
+            # 실시간 업데이트 빈도 증가 및 별도 함수 추가
+            def update_badge(*args):
+                return generate_static_badge(*args)
+
             #  - 초기 로드
             demo.load(
-                fn=generate_static_badge,
+                fn=update_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=generate_static_badge,
+                    fn=update_badge,
                     inputs=[label, message, color, label_color, logo, logo_color, style, link],
-                    outputs=[out_code, out_preview]
+                    outputs=[out_code, out_preview],
+                    queue=False  # 빠른 응답을 위해 큐 사용 안 함
                 )
 
         # ---------------------------
@@ -365,4 +403,4 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
     ''')
 
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch()