app.py

import urllib.parse
import gradio as gr

# ----------------------------------------------------
# 1. 배지 URL 생성 함수 정의
# ----------------------------------------------------
def generate_static_badge(label, message, color, style, label_color, logo, logo_color):
    base = "https://img.shields.io/static/v1"
    params = []
    if label:  # Label이 빈 문자열이 아닌 경우에만 추가
        params.append(f"label={urllib.parse.quote(label, safe='')}")
    if message:
        params.append(f"message={urllib.parse.quote(message, safe='')}")
    if color:
        params.append(f"color={urllib.parse.quote(color, safe='')}")
    if style:
        params.append(f"style={urllib.parse.quote(style, safe='')}")
    if label_color:
        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, safe='')}")
    url = base + ("?" + "&".join(params) if params else "")
    html_code = f'<img src="{url}" alt="{label or message} badge">'
    return html_code, url  # (HTML 코드 스니펫, 이미지 URL)을 반환

def generate_dynamic_json_badge(json_url, json_path, label, prefix, suffix, color, style, label_color, logo, logo_color):
    base = "https://img.shields.io/badge/dynamic/json"
    params = []
    if json_url:
        params.append(f"url={urllib.parse.quote(json_url, safe='')}")
    if json_path:
        params.append(f"query={urllib.parse.quote(json_path, safe='')}")
    if label:
        params.append(f"label={urllib.parse.quote(label, safe='')}")
    if prefix:
        params.append(f"prefix={urllib.parse.quote(prefix, safe='')}")
    if suffix:
        params.append(f"suffix={urllib.parse.quote(suffix, safe='')}")
    if color:
        params.append(f"color={urllib.parse.quote(color, safe='')}")
    if style:
        params.append(f"style={urllib.parse.quote(style, safe='')}")
    if label_color:
        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, safe='')}")
    url = base + ("?" + "&".join(params) if params else "")
    html_code = f'<img src="{url}" alt="Dynamic JSON badge">'
    return html_code, url

def generate_endpoint_badge(endpoint_url, label, color, style, label_color, logo, logo_color):
    base = "https://img.shields.io/endpoint"
    params = []
    if endpoint_url:
        params.append(f"url={urllib.parse.quote(endpoint_url, safe='')}")
    if label:
        params.append(f"label={urllib.parse.quote(label, safe='')}")
    if color:
        params.append(f"color={urllib.parse.quote(color, safe='')}")
    if style:
        params.append(f"style={urllib.parse.quote(style, safe='')}")
    if label_color:
        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, safe='')}")
    url = base + ("?" + "&".join(params) if params else "")
    html_code = f'<img src="{url}" alt="Endpoint badge">'
    return html_code, url

# ----------------------------------------------------
# 2. Gradio UI 구성
# ----------------------------------------------------
with gr.Blocks(theme=gr.themes.Default()) as app:
    gr.Markdown("""
    # Shields.io Badge Generator 🛠  
    이 앱은 [Shields.io](https://shields.io/)에서 제공하는 배지를 **GUI**로 간편하게 생성하도록 도와줍니다.<br>
    아래 탭에서 배지 유형을 선택하고 원하는 옵션을 입력해보세요. 자동으로 HTML 코드 스니펫과 미리보기 이미지를 확인하실 수 있습니다.
    """)

    with gr.Tabs():
        # ------------------------------------------------
        # --- Tab 1: Static Badge ---
        # ------------------------------------------------
        with gr.Tab("Static Badge"):
            gr.Markdown("""
            **정적(Static) 배지**를 생성합니다.  
            예: 좌측 텍스트(label), 우측 텍스트(message), 색상(color) 등을 입력하세요.
            """)
            with gr.Row():
                lbl = gr.Textbox(label="Label (좌측 텍스트)", placeholder="예: build")
                msg = gr.Textbox(label="Message (우측 텍스트)", placeholder="예: passing")
            
            with gr.Row():
                col = gr.Textbox(label="Color (색상)", value="blue", placeholder="예: brightgreen, #4c1 등")
                lbl_col = gr.Textbox(label="Label Color (레이블 배경색)", placeholder="(선택 사항)")
            
            with gr.Row():
                logo_in = gr.Textbox(label="Logo (아이콘)", placeholder="예: github (선택 사항)")
                logo_col = gr.Textbox(label="Logo Color (아이콘 색상)", placeholder="(선택 사항)")
            
            style_in = gr.Dropdown(
                label="Style (스타일)",
                choices=["flat", "flat-square", "plastic", "for-the-badge", "social"],
                value="flat"
            )

            # 출력: 코드 스니펫 & 이미지 미리보기
            out_code = gr.Code(label="HTML Snippet", language="html")
            out_img = gr.Image(label="Badge Preview", type="auto")

            # 입력 변화 -> 출력 갱신
            inputs = [lbl, msg, col, style_in, lbl_col, logo_in, logo_col]
            for inp in inputs:
                inp.change(
                    fn=generate_static_badge,
                    inputs=inputs,
                    outputs=[out_code, out_img]
                )
        
        # ------------------------------------------------
        # --- Tab 2: Dynamic JSON Badge ---
        # ------------------------------------------------
        with gr.Tab("Dynamic JSON Badge"):
            gr.Markdown("""
            **동적(JSON) 배지**를 생성합니다.  
            URL로부터 JSON 데이터를 읽어와 특정 필드를 추출하여 표시합니다.
            """)
            with gr.Row():
                json_url = gr.Textbox(label="JSON URL", placeholder="예: https://example.com/data.json")
                json_path = gr.Textbox(label="JSONPath Query", placeholder="예: $.version")
            
            with gr.Row():
                label_dyn = gr.Textbox(label="Label (좌측 텍스트)", placeholder="(선택 사항)")
                prefix_dyn = gr.Textbox(label="Prefix (접두사)", placeholder="값 앞에 붙일 문자열 (선택)")
                suffix_dyn = gr.Textbox(label="Suffix (접미사)", placeholder="값 뒤에 붙일 문자열 (선택)")
            
            with gr.Row():
                color_dyn = gr.Textbox(label="Color (색상)", value="blue", placeholder="예: blue, #4183c4 등")
                lbl_color_dyn = gr.Textbox(label="Label Color (레이블 배경색)", placeholder="(선택 사항)")
            
            with gr.Row():
                logo_dyn = gr.Textbox(label="Logo (아이콘)", placeholder="예: google (선택 사항)")
                logo_color_dyn = gr.Textbox(label="Logo Color (아이콘 색상)", placeholder="(선택 사항)")

            style_dyn = gr.Dropdown(
                label="Style (스타일)",
                choices=["flat", "flat-square", "plastic", "for-the-badge", "social"],
                value="flat"
            )

            out_code2 = gr.Code(label="HTML Snippet", language="html")
            out_img2 = gr.Image(label="Badge Preview", type="auto")

            inputs_dyn = [
                json_url, json_path, label_dyn, prefix_dyn, suffix_dyn,
                color_dyn, style_dyn, lbl_color_dyn, logo_dyn, logo_color_dyn
            ]
            for inp in inputs_dyn:
                inp.change(
                    fn=generate_dynamic_json_badge,
                    inputs=inputs_dyn,
                    outputs=[out_code2, out_img2]
                )
        
        # ------------------------------------------------
        # --- Tab 3: Endpoint Badge ---
        # ------------------------------------------------
        with gr.Tab("Endpoint Badge"):
            gr.Markdown("""
            **Endpoint 배지**를 생성합니다.  
            엔드포인트(Endpoint)에서 미리 정의된 JSON 구조(`schemaVersion`, `label`, `message`, `color` 등)를 반환하고,  
            Shields.io가 이를 읽어와 배지를 렌더링합니다.
            """)
            with gr.Row():
                endpoint = gr.Textbox(label="Endpoint URL", placeholder="배지 JSON을 제공하는 엔드포인트 URL")
                label_ep = gr.Textbox(label="Override Label", placeholder="엔드포인트 JSON의 label 대신 (선택)")
            
            with gr.Row():
                color_ep = gr.Textbox(label="Override Color", placeholder="엔드포인트 JSON의 color 대신 (선택)")
                lbl_color_ep = gr.Textbox(label="Label Color", placeholder="(선택 사항)")
            
            with gr.Row():
                logo_ep = gr.Textbox(label="Logo (아이콘)", placeholder="예: custom (선택 사항)")
                logo_color_ep = gr.Textbox(label="Logo Color", placeholder="(선택 사항)")
            
            style_ep = gr.Dropdown(
                label="Style (스타일)",
                choices=["flat", "flat-square", "plastic", "for-the-badge", "social"],
                value="flat"
            )

            out_code3 = gr.Code(label="HTML Snippet", language="html")
            out_img3 = gr.Image(label="Badge Preview", type="auto")

            inputs_ep = [
                endpoint, label_ep, color_ep, style_ep,
                lbl_color_ep, logo_ep, logo_color_ep
            ]
            for inp in inputs_ep:
                inp.change(
                    fn=generate_endpoint_badge,
                    inputs=inputs_ep,
                    outputs=[out_code3, out_img3]
                )
    
    # 전체 Blocks 종료

# 실제 실행 시 아래 주석을 해제하여 사용하세요.
app.launch()