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: 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)
img = f'
'
if link:
img = f'{img}'
preview = (f"
{img}
")
return img, preview
# ---------------------------
# Gradio UI
# ---------------------------
with gr.Blocks(theme=gr.themes.Soft()) as demo:
# ------------------ CSS & Header ------------------
gr.HTML("""
🎨 BadgeCraft
Create beautiful badges with live preview and HTML snippet
""")
# ------------------ Components ------------------
label = gr.Textbox("Discord", label="Label", elem_id="label-input")
message = gr.Textbox("Join our community", label="Message", elem_id="message-input")
color = gr.ColorPicker("#5865F2", label="Background Color", elem_id="color-input")
label_color = gr.ColorPicker("#99AAFF", label="Label Background Color", elem_id="label-color-input")
logo = gr.Textbox("discord", label="Logo", elem_id="logo-input")
logo_color = gr.ColorPicker("#ffffff", label="Logo Color", elem_id="logo-color-input")
style = gr.Dropdown(["flat","flat-square","plastic","for-the-badge","social"],
value="for-the-badge", label="Style", elem_id="style-input")
link = gr.Textbox("https://discord.gg/openfreeai", label="Link (URL)", elem_id="link-input")
out_code = gr.Code(language="html", lines=3, label="HTML Snippet")
out_prev = gr.HTML()
# ------------------ Example badges ------------------
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"]
]
# grid html
grid = ''
for i,e in enumerate(examples):
lbl,msg,bg,lbg,logo_e,logoc,sty,_ = e
def fix(c):
return "#ffffff" if c=="white" else "#000000" if c=="black" else c
url = ("https://img.shields.io/static/v1?"
f"label={urllib.parse.quote(lbl)}&message={urllib.parse.quote(msg)}&"
f"color={urllib.parse.quote(fix(bg))}&labelColor={urllib.parse.quote(fix(lbg))}&"
f"logo={urllib.parse.quote(logo_e)}&logoColor={urllib.parse.quote(fix(logoc))}&"
f"style={urllib.parse.quote(sty)}")
grid += (f'
'
f'

'
f'
{lbl}')
grid += "
"
# ------------------ JS (fixed color propagation) ------------------
js = f"""
"""
gr.HTML(grid + js)
# ------------------ live update handlers ------------------
comps = [label,message,color,label_color,logo,logo_color,style,link]
for c in comps:
c.change(generate_static_badge, comps, [out_code,out_prev])
# ------------------ footer ------------------
gr.HTML(''
'© 2023‑2025 BadgeCraft | MIT License '
'Discord
')
if __name__ == "__main__":
demo.launch()