|
import urllib.parse |
|
import gradio as gr |
|
|
|
|
|
|
|
|
|
|
|
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: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: |
|
|
|
gr.HTML( |
|
""" |
|
<div style='display:flex; justify-content:center; margin-top:8px; margin-bottom:18px;'> |
|
<a href="https://www.producthunt.com/posts/badgecraft?embed=true&utm_source=badge-featured&utm_medium=badge&utm_souce=badge-badgecraft" target="_blank"> |
|
<img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=955939&theme=light&t=1745314452274" alt="BadgeCraft - badge, ai, generation, web, html, link | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a> |
|
|
|
</a> |
|
</div> |
|
""" |
|
) |
|
|
|
|
|
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; |
|
} |
|
} |
|
.color-preview { |
|
display: inline-block; |
|
width: 20px; |
|
height: 20px; |
|
margin-right: 5px; |
|
border-radius: 4px; |
|
vertical-align: middle; |
|
} |
|
</style> |
|
""") |
|
|
|
|
|
gr.HTML(""" |
|
<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> |
|
""") |
|
|
|
|
|
color_options = { |
|
"Red": "#ff0000", |
|
"Blue": "#0000ff", |
|
"Green": "#00ff00", |
|
"Yellow": "#ffff00", |
|
"Purple": "#800080", |
|
"Orange": "#ffa500", |
|
"Pink": "#ffc0cb", |
|
"Teal": "#008080", |
|
"Navy": "#000080", |
|
"Lime": "#00ff00", |
|
"Cyan": "#00ffff", |
|
"Magenta": "#ff00ff", |
|
"Gold": "#ffd700", |
|
"Silver": "#c0c0c0" |
|
} |
|
|
|
with gr.Tabs(): |
|
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.Dropdown( |
|
label="Background Color", |
|
choices=list(color_options.keys()), |
|
value="Blue", |
|
elem_id="color-input" |
|
) |
|
label_color = gr.Dropdown( |
|
label="Label Background Color", |
|
choices=list(color_options.keys()), |
|
value="Purple", |
|
elem_id="label-color-input" |
|
) |
|
logo_color = gr.Dropdown( |
|
label="Logo Color", |
|
choices=["white", "black"] + list(color_options.keys()), |
|
value="white", |
|
elem_id="logo-color-input" |
|
) |
|
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) |
|
|
|
|
|
examples = [ |
|
["Discord", "Openfree AI", "Blue", "Purple", "discord", "white", "for-the-badge", "https://discord.gg/openfreeai"], |
|
["X.com", "Follow us", "Blue", "Cyan", "x", "white", "for-the-badge", "https://x.com/openfree_ai"], |
|
["Collections","Explore", "Orange", "Yellow", "huggingface","black","for-the-badge", "https://huggingface.co/collections/VIDraft/best-open-ai-services-68057e6e312880ea92abaf4c"], |
|
["GitHub", "Star us", "Navy", "Lime", "github", "white", "for-the-badge", "https://github.com/openfreeai"], |
|
["YouTube", "Watch now", "Red", "Orange", "youtube", "white", "for-the-badge", "https://www.youtube.com/@AITechTree"], |
|
["Facebook", "Like us", "Blue", "Cyan", "facebook", "white", "for-the-badge", "https://www.facebook.com/profile.php?id=61575353674679"], |
|
["Instagram", "友情 萬世", "Magenta", "Pink", "instagram", "white", "for-the-badge", "https://www.instagram.com/openfree_ai/"], |
|
["Threads", "함께 즐겨요.", "Navy", "Magenta", "threads", "white", "for-the-badge", "https://www.threads.net/@openfree_ai"], |
|
] |
|
|
|
|
|
html_items = '<div class="example-grid">' |
|
for idx, ex in enumerate(examples): |
|
color_hex = color_options.get(ex[2], ex[2]) |
|
label_color_hex = color_options.get(ex[3], ex[3]) |
|
logo_color_val = color_options.get(ex[5], ex[5]) if ex[5] in color_options else ex[5] |
|
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(color_hex, safe='')}", |
|
f"labelColor={urllib.parse.quote(label_color_hex, safe='')}", |
|
f"logo={urllib.parse.quote(ex[4], safe='')}", |
|
f"logoColor={urllib.parse.quote(logo_color_val, 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>' |
|
|
|
apply_example_js = """ |
|
<script> |
|
function updateSelectValue(selectEl, newValue) { |
|
if (!selectEl) return; |
|
selectEl.value = newValue; |
|
selectEl.dispatchEvent(new Event("change", { bubbles: true })); |
|
} |
|
function updateTextValue(el, newValue) { |
|
if (!el) return; |
|
el.value = newValue; |
|
el.dispatchEvent(new Event("input", { bubbles: true })); |
|
el.dispatchEvent(new Event("change", { bubbles: true })); |
|
} |
|
const examples = """ + str(examples).replace("'", '"') + """; |
|
function applyExample(i) { |
|
const ex = examples[i]; |
|
const selectors = { |
|
label: "#label-input", |
|
message: "#message-input", |
|
color: "#color-input select", |
|
labelColor: "#label-color-input select", |
|
logo: "#logo-input", |
|
logoColor: "#logo-color-input select", |
|
style: "#style-input select", |
|
link: "#link-input" |
|
}; |
|
const labelBox = document.querySelector(`${selectors.label} textarea, ${selectors.label} input`); |
|
if (labelBox) { updateTextValue(labelBox, ex[0]); } |
|
const msgBox = document.querySelector(`${selectors.message} textarea, ${selectors.message} input`); |
|
if (msgBox) { updateTextValue(msgBox, ex[1]); } |
|
const bgColorSelect = document.querySelector(selectors.color); |
|
if (bgColorSelect) { updateSelectValue(bgColorSelect, ex[2]); } |
|
const labelColorSelect = document.querySelector(selectors.labelColor); |
|
if (labelColorSelect) { updateSelectValue(labelColorSelect, ex[3]); } |
|
const logoBox = document.querySelector(`${selectors.logo} textarea, ${selectors.logo} input`); |
|
if (logoBox) { updateTextValue(logoBox, ex[4]); } |
|
const logoColorSelect = document.querySelector(selectors.logoColor); |
|
if (logoColorSelect) { updateSelectValue(logoColorSelect, ex[5]); } |
|
const styleSelect = document.querySelector(selectors.style); |
|
if (styleSelect) { updateSelectValue(styleSelect, ex[6]); } |
|
const linkBox = document.querySelector(`${selectors.link} textarea, ${selectors.link} input`); |
|
if (linkBox) { updateTextValue(linkBox, ex[7]); } |
|
} |
|
</script> |
|
""" |
|
|
|
gr.HTML(html_items + apply_example_js) |
|
|
|
def process_badge(label, message, color_name, label_color_name, logo, logo_color_name, style, link): |
|
color_hex = color_options.get(color_name, "#000000") |
|
label_color_hex = color_options.get(label_color_name, "#000000") |
|
logo_color_hex = logo_color_name if logo_color_name in ["white", "black"] else color_options.get(logo_color_name, "#ffffff") |
|
return generate_static_badge(label, message, color_hex, label_color_hex, logo, logo_color_hex, style, link) |
|
|
|
demo.load( |
|
fn=process_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=process_badge, |
|
inputs=[label, message, color, label_color, logo, logo_color, style, link], |
|
outputs=[out_code, out_preview], |
|
) |
|
|
|
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. white or black)</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></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>Choose from predefined colors in the dropdown menus for consistent results</li> |
|
</ul> |
|
</div> |
|
''') |
|
|
|
|
|
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() |
|
|
