app.py

import urllib.parse
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 = []
    if label:
        params.append(f"label={urllib.parse.quote(label, safe='')}")
    if message:
        params.append(f"message={urllib.parse.quote(message, safe='')}")
    if color:
        # 색상에서 # 기호 제거 (URL 인코딩 문제 방지)
        params.append(f"color={urllib.parse.quote(color.lstrip('#'), safe='')}")
    if label_color:
        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.lstrip('#'), safe='')}")
    if style:
        params.append(f"style={urllib.parse.quote(style, safe='')}")

    badge_url = base + ("?" + "&".join(params) if params else "")
    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 = f"""
    <div style='padding:30px; background: linear-gradient(135deg, #f8f9fa, #e9ecef);
         border-radius: 16px; display: flex; justify-content: center;
         box-shadow: 0 6px 12px rgba(0,0,0,0.05);'>
        {html_code}
    </div>
    """
    return html_code, badge_preview

with gr.Blocks(theme=gr.themes.Soft()) as demo:
    # ---------------------------
    # Custom CSS & Header
    # ---------------------------
    gr.HTML("""
    <style>
      body { 
        background: linear-gradient(120deg, #f8f9fa, #e2eafc); 
        font-family: 'Poppins', 'Noto Sans KR', sans-serif;
      }
      .gradio-container { 
        background: rgba(255, 255, 255, 0.85); 
        backdrop-filter: blur(10px);
        border-radius: 20px; 
        padding: 24px; 
        box-shadow: 0 10px 30px rgba(0,0,0,0.08);
        max-width: 1000px;
        margin: 0 auto;
      }
      .gr-button { 
        background: linear-gradient(135deg, #a8dadc, #88c1e9) !important; 
        color: #1d3557 !important; 
        border: none !important;
        border-radius: 10px !important;
        font-weight: 600 !important;
        transition: all 0.3s ease !important;
        box-shadow: 0 4px 10px rgba(138, 198, 209, 0.3) !important;
      }
      .gr-button:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 15px rgba(138, 198, 209, 0.4) !important;
      }
      .gr-textbox, .gr-select, .gr-color { 
        background: #e8f6f3 !important; 
        border: 2px solid #d9f0ea !important;
        border-radius: 12px !important;
        transition: all 0.3s ease !important;
      }
      .gr-textbox:focus, .gr-select:focus, .gr-color:focus {
        border-color: #a8dadc !important;
        box-shadow: 0 0 0 3px rgba(168, 218, 220, 0.25) !important;
      }
      label.block span {
        color: #457b9d !important;
        font-weight: 600 !important;
        font-size: 1rem !important;
      }
      h1 { 
        color: #5e60ce; 
        font-weight: 800;
        letter-spacing: -0.5px;
      }
      h3 { 
        color: #5e60ce; 
        font-weight: 600;
      }
      .footer {
        margin-top: 30px;
        text-align: center;
        font-size: 0.9rem;
        color: #6d6875;
      }
      .badge-section {
        background: rgba(255, 255, 255, 0.7);
        border-radius: 16px;
        padding: 20px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.03);
        margin-bottom: 24px;
        border: 1px solid rgba(230, 240, 255, 0.7);
      }
      .example-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(2, auto);
        gap: 16px;
        margin-top: 20px;
      }
      .example-item {
        background: linear-gradient(135deg, #f1f8ff, #e8f4ff);
        border-radius: 12px;
        padding: 16px;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s ease;
        border: 2px solid transparent;
      }
      .example-item:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 15px rgba(0,0,0,0.05);
        border-color: #a8dadc;
      }
      @media (max-width: 768px) {
        .example-grid {
          grid-template-columns: repeat(2, 1fr);
        }
      }
      @media (max-width: 600px) {
        .example-grid {
          grid-template-columns: 1fr;
        }
      }
    </style>
    <div style="text-align:center; margin-bottom:24px;">
        <h1 style="font-size:2.8rem; margin-bottom:0.2em; background: linear-gradient(90deg, #5e60ce, #64dfdf); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">
            🎨 BadgeCraft
        </h1>
        <p style="font-size:1.2rem; margin:0.5em 0; color:#457b9d; max-width:700px; margin:0 auto;">
            Create beautiful badges with live preview and HTML snippet
        </p>
        <div style="margin-top:10px; display:flex; justify-content:center; gap:12px; flex-wrap:wrap;">
            <span style="display:inline-block; background:#e9f5db; color:#588157; padding:6px 12px; border-radius:30px; font-size:0.9rem;">
                <strong>✨ MIT License</strong>
            </span>
            <span style="display:inline-block; background:#d8f3dc; color:#2d6a4f; padding:6px 12px; border-radius:30px; font-size:0.9rem;">
                <strong>👥 Created by OpenFreeAI Team</strong>
            </span>
        </div>
    </div>
    """)

    with gr.Tabs():
        # ---------------------------
        # 1) Badge Generator Tab
        # ---------------------------
        with gr.TabItem("Badge Generator"):
            with gr.Row():
                with gr.Column():
                    with gr.Group(elem_classes="badge-section"):
                        gr.HTML("<h3 style='margin-top:0; margin-bottom:16px; font-size:1.3rem;'>✏️ Badge Settings</h3>")
                        label = gr.Textbox(label="Label", value="Discord", elem_id="label-input", lines=1)
                        message = gr.Textbox(label="Message", value="Join our community", elem_id="message-input", lines=1)
                        logo = gr.Textbox(label="Logo", value="discord", elem_id="logo-input", lines=1)
                        style = gr.Dropdown(
                            label="Style", 
                            choices=["flat", "flat-square", "plastic", "for-the-badge", "social"], 
                            value="for-the-badge",
                            elem_id="style-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"):
                        gr.HTML("<h3 style='margin-top:0; margin-bottom:16px; font-size:1.3rem;'>👁️ Preview</h3>")
                        out_preview = gr.HTML(label="")
                    with gr.Group(elem_classes="badge-section"):
                        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)

            # ---------------------------
            # 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>")

            # ---------------------------
            # 4) 실시간 업데이트
            # ---------------------------
            # 실시간 업데이트 빈도 증가 및 별도 함수 추가
            def update_badge(*args):
                return generate_static_badge(*args)

            #  - 초기 로드
            demo.load(
                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=update_badge,
                    inputs=[label, message, color, label_color, logo, logo_color, style, link],
                    outputs=[out_code, out_preview],
                    queue=False  # 빠른 응답을 위해 큐 사용 안 함
                )

        # ---------------------------
        # 2) Help Tab
        # ---------------------------
        with gr.TabItem("Help"):
            gr.HTML('''
            <div style="padding: 20px; background: rgba(255, 255, 255, 0.7); border-radius: 16px; box-shadow: 0 4px 12px rgba(0,0,0,0.03);">
                <h3 style="color: #5e60ce; margin-top:0;">📋 How to Use BadgeCraft</h3>
                <h4 style="color: #457b9d; margin-bottom: 8px;">✨ What are Badges?</h4>
                <p>Badges are small visual indicators that can be used in README files, websites, and documentation. Shields.io badges are widely used to display project status, social media links, version information, and more.</p>
                <h4 style="color: #457b9d; margin-bottom: 8px;">🛠️ Basic Settings</h4>
                <ul>
                    <li><strong>Label</strong>: Text displayed on the left side of the badge (e.g., "Discord", "Version", "Status")</li>
                    <li><strong>Message</strong>: Text displayed on the right side of the badge</li>
                    <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;">🎨 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>
                </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>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>
                </ul>
            </div>
            ''')

    # ---------------------------
    # Footer
    # ---------------------------
    gr.HTML('''
    <div class="footer">
        <p>© 2023-2025 BadgeCraft | MIT License  
           <a href="https://discord.gg/openfreeai" target="_blank" style="color:#5e60ce;">Discord</a>
        </p>
    </div>
    ''')

if __name__ == "__main__":
    demo.launch()