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'badge' 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()