Hugging Face's logo

Spaces:
aiqtech
/
Badge
Sleeping

App Files Community
Badge
File size: 4,651 Bytes 
d64466a
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
 
import urllib.parse
import gradio as gr

# ---------------------------
# ๋ฐฐ์ง€ URL ์ƒ์„ฑ ํ•จ์ˆ˜ ์ •์˜
# ---------------------------
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:
        params.append(f"color={urllib.parse.quote(color, 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='')}")
    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:20px; background: #fefefe; border-radius: 12px; display: flex; justify-content: center;'>
        {html_code}
    </div>
    """
    return html_code, badge_preview

# ---------------------------
# Gradio UI ๊ตฌ์„ฑ
# ---------------------------
with gr.Blocks(theme=gr.themes.Default()) as demo:
    gr.HTML("""
    <h1 style="text-align: center; font-size: 2.2em; margin-bottom: 0.2em;">๐ŸŽจ BadgeCraft - Beautiful Badge Generator</h1>
    <p style="text-align: center; font-size: 1.1em; color: #555;">Design stylish shields.io badges with live preview and HTML snippet generation.</p>
    """)

    with gr.Row():
        out_code = gr.Code(label="HTML Snippet", language="html")
        out_preview = gr.HTML(label="Badge Preview")

    with gr.Row():
        label = gr.Textbox(label="Label", placeholder="์˜ˆ: build")
        message = gr.Textbox(label="Message", placeholder="์˜ˆ: passing")
        logo = gr.Textbox(label="Logo", placeholder="์˜ˆ: github")

    with gr.Row():
        color = gr.ColorPicker(label="Color", value="#a0c4ff")
        label_color = gr.ColorPicker(label="Label Color", value="#bdb2ff")
        logo_color = gr.ColorPicker(label="Logo Color", value="#ffc6ff")

    style = gr.Dropdown(label="Style", choices=["flat", "flat-square", "plastic", "for-the-badge", "social"], value="for-the-badge")
    link = gr.Textbox(label="Link (๋ฐฐ์ง€ ํด๋ฆญ ์‹œ ์ด๋™ํ•  URL)", placeholder="https://yourlink.com")

    inputs = [label, message, color, label_color, logo, logo_color, style, link]
    for inp in inputs:
        inp.change(fn=generate_static_badge, inputs=inputs, outputs=[out_code, out_preview])

    def fill_example(label_val, message_val, logo_val, link_val):
        return label_val, message_val, logo_val, link_val

    gr.HTML("""
    <h3 style="text-align: center; margin-top: 30px;">โœจ Examples (Click to Load)</h3>
    """)

    with gr.Row():
        with gr.Column():
            gr.Button("Discord Badge Example").click(
                fn=fill_example,
                inputs=[],
                outputs=[label, message, logo, link],
                _js="() => window.open('https://discord.gg/openfreeai', '_blank')"
            ).style(full_width=True)

            gr.Button("X Badge Example").click(
                fn=fill_example,
                inputs=[],
                outputs=[label, message, logo, link],
                _js="() => window.open('https://x.com/openfree_ai', '_blank')"
            ).style(full_width=True)

            gr.Button("Instagram Badge Example").click(
                fn=fill_example,
                inputs=[],
                outputs=[label, message, logo, link],
                _js="() => window.open('https://www.instagram.com/openfree_ai', '_blank')"
            ).style(full_width=True)

            gr.Button("Threads Badge Example").click(
                fn=fill_example,
                inputs=[],
                outputs=[label, message, logo, link],
                _js="() => window.open('https://www.threads.net/@openfree_ai', '_blank')"
            ).style(full_width=True)

            gr.Button("Facebook Badge Example").click(
                fn=fill_example,
                inputs=[],
                outputs=[label, message, logo, link],
                _js="() => window.open('https://www.facebook.com/profile.php?id=61575353674679', '_blank')"
            ).style(full_width=True)

# ์‹คํ–‰
if __name__ == "__main__":
    demo.launch()