Update app.py
Browse files
app.py
CHANGED
@@ -1,66 +1,60 @@
|
|
|
|
|
|
|
|
|
|
|
|
1 |
import urllib.parse
|
|
|
2 |
import json
|
3 |
import gradio as gr
|
4 |
|
5 |
-
# -------------------------------------------------
|
6 |
-
# Badge URL generation
|
7 |
-
# └▶ HEX 컬러 앞의 ‘#’ 기호를 제거하여 Shields.io 가
|
8 |
-
# 색상을 올바르게 인식하도록 수정했습니다.
|
9 |
-
# -------------------------------------------------
|
10 |
-
def generate_static_badge(
|
11 |
-
label, message,
|
12 |
-
color, label_color,
|
13 |
-
logo, logo_color,
|
14 |
-
style, link
|
15 |
-
):
|
16 |
-
# 1) ColorPicker 값에서 ‘#’ 제거
|
17 |
-
strip_hash = lambda c: c.lstrip("#") if isinstance(c, str) else c
|
18 |
-
color = strip_hash(color)
|
19 |
-
label_color = strip_hash(label_color)
|
20 |
-
logo_color = strip_hash(logo_color)
|
21 |
|
22 |
-
|
23 |
-
|
24 |
-
|
25 |
-
|
26 |
-
|
27 |
-
|
28 |
-
|
29 |
-
|
30 |
-
params.append(f"color={urllib.parse.quote(color, safe='')}")
|
31 |
-
if label_color:
|
32 |
-
params.append(f"labelColor={urllib.parse.quote(label_color, safe='')}")
|
33 |
-
if logo:
|
34 |
-
params.append(f"logo={urllib.parse.quote(logo, safe='')}")
|
35 |
-
if logo_color:
|
36 |
-
params.append(f"logoColor={urllib.parse.quote(logo_color, safe='')}")
|
37 |
-
if style:
|
38 |
-
params.append(f"style={urllib.parse.quote(style, safe='')}")
|
39 |
|
40 |
-
|
41 |
-
|
|
|
42 |
|
43 |
-
#
|
44 |
-
|
45 |
-
|
46 |
-
|
47 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
48 |
|
49 |
-
#
|
50 |
-
|
51 |
-
<
|
52 |
-
|
53 |
-
|
54 |
-
|
55 |
-
|
56 |
-
|
57 |
-
|
|
|
58 |
|
59 |
|
60 |
-
#
|
61 |
-
# Gradio UI
|
62 |
-
#
|
63 |
with gr.Blocks(theme=gr.themes.Soft()) as demo:
|
|
|
64 |
# ---------- Global CSS ----------
|
65 |
gr.HTML("""
|
66 |
<style>
|
@@ -106,19 +100,11 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
|
|
106 |
font-size:1rem!important;
|
107 |
}
|
108 |
h1{
|
109 |
-
color:#5e60ce;
|
110 |
-
font-weight:800;
|
111 |
-
letter-spacing:-.5px;
|
112 |
-
}
|
113 |
-
h3{
|
114 |
-
color:#5e60ce;
|
115 |
-
font-weight:600;
|
116 |
}
|
|
|
117 |
.footer{
|
118 |
-
margin-top:30px;
|
119 |
-
text-align:center;
|
120 |
-
font-size:.9rem;
|
121 |
-
color:#6d6875;
|
122 |
}
|
123 |
.badge-section{
|
124 |
background:rgba(255,255,255,.7);
|
@@ -131,115 +117,102 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
|
|
131 |
.example-grid{
|
132 |
display:grid;
|
133 |
grid-template-columns:repeat(4,1fr);
|
134 |
-
|
135 |
-
gap:16px;
|
136 |
-
margin-top:20px;
|
137 |
}
|
138 |
.example-item{
|
139 |
background:linear-gradient(135deg,#f1f8ff,#e8f4ff);
|
140 |
-
border-radius:12px;
|
141 |
-
|
142 |
-
text-align:center;
|
143 |
-
cursor:pointer;
|
144 |
-
transition:all .3s ease;
|
145 |
-
border:2px solid transparent;
|
146 |
}
|
147 |
.example-item:hover{
|
148 |
transform:translateY(-3px);
|
149 |
box-shadow:0 8px 15px rgba(0,0,0,.05);
|
150 |
border-color:#a8dadc;
|
151 |
}
|
152 |
-
@media(max-width:768px){
|
153 |
-
|
154 |
-
}
|
155 |
-
@media(max-width:600px){
|
156 |
-
.example-grid{grid-template-columns:1fr;}
|
157 |
-
}
|
158 |
</style>
|
159 |
""")
|
160 |
|
161 |
# ---------- Header ----------
|
162 |
gr.HTML("""
|
163 |
-
|
164 |
-
|
165 |
-
|
166 |
-
|
167 |
-
|
168 |
-
|
169 |
-
|
170 |
-
|
171 |
-
|
172 |
-
|
173 |
-
|
174 |
-
|
175 |
-
|
176 |
-
|
177 |
-
<
|
178 |
-
|
179 |
-
|
180 |
-
|
181 |
-
|
182 |
-
</span>
|
183 |
</div>
|
184 |
-
</div>
|
185 |
""")
|
186 |
|
187 |
# ---------- Tabs ----------
|
188 |
with gr.Tabs():
|
189 |
-
# ▷▷ Badge Generator
|
190 |
with gr.TabItem("Badge Generator"):
|
|
|
|
|
191 |
with gr.Row():
|
192 |
-
# ----- 설정 입력 -----
|
193 |
with gr.Column():
|
194 |
with gr.Group(elem_classes="badge-section"):
|
195 |
gr.HTML("<h3 style='margin-top:0;margin-bottom:16px;font-size:1.3rem;'>✏️ Badge Settings</h3>")
|
196 |
-
label = gr.Textbox(label="Label",
|
197 |
-
message = gr.Textbox(label="Message",
|
198 |
-
logo = gr.Textbox(label="Logo",
|
199 |
-
style = gr.Dropdown(
|
200 |
-
|
201 |
-
|
202 |
-
|
203 |
-
|
204 |
-
|
205 |
-
|
206 |
-
|
207 |
-
|
208 |
-
# ----- 미리보기 & 코드 -----
|
209 |
with gr.Column():
|
210 |
with gr.Group(elem_classes="badge-section"):
|
211 |
gr.HTML("<h3 style='margin-top:0;margin-bottom:16px;font-size:1.3rem;'>👁️ Preview</h3>")
|
212 |
-
out_preview = gr.HTML(
|
213 |
with gr.Group(elem_classes="badge-section"):
|
214 |
gr.HTML("<h3 style='margin-top:0;margin-bottom:16px;font-size:1.3rem;'>💻 HTML Code</h3>")
|
215 |
-
out_code = gr.Code(
|
216 |
|
217 |
-
# 예제 데이터
|
218 |
examples = [
|
219 |
-
["Discord",
|
220 |
-
["X.com",
|
221 |
-
["Collections","Explore",
|
222 |
-
|
223 |
-
["
|
224 |
-
["
|
225 |
-
["
|
226 |
-
["
|
|
|
227 |
]
|
228 |
|
229 |
# 예제 그리드 HTML
|
230 |
html_items = '<div class="example-grid">'
|
231 |
for idx, ex in enumerate(examples):
|
232 |
-
badge_url = (
|
233 |
-
"
|
234 |
-
|
235 |
-
|
236 |
-
|
237 |
-
|
238 |
-
|
239 |
-
|
240 |
-
|
241 |
-
])
|
242 |
-
)
|
243 |
html_items += f'''
|
244 |
<div class="example-item" onclick="applyExample({idx})">
|
245 |
<img src="{badge_url}" alt="{ex[0]} badge" style="margin-bottom:8px;">
|
@@ -248,70 +221,70 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
|
|
248 |
'''
|
249 |
html_items += '</div>'
|
250 |
|
251 |
-
#
|
252 |
hack_js = """
|
253 |
-
function updateReactValue(el,
|
254 |
-
|
255 |
-
|
256 |
-
|
257 |
-
|
258 |
-
|
259 |
-
|
260 |
-
|
261 |
}
|
262 |
-
function
|
263 |
-
|
264 |
-
|
265 |
-
|
266 |
-
|
267 |
}
|
268 |
-
function
|
269 |
-
|
270 |
-
|
271 |
-
|
272 |
-
|
273 |
-
|
274 |
-
updateReactValue(input,val);
|
275 |
}
|
276 |
"""
|
277 |
|
278 |
-
# ---------- 예제 클릭 시 자동 채우기 스크립트 ----------
|
279 |
apply_example_js = (
|
280 |
-
"<script>\n"
|
281 |
-
+
|
282 |
-
|
283 |
-
|
284 |
-
|
285 |
-
|
286 |
-
|
287 |
-
|
288 |
-
|
289 |
-
|
290 |
-
|
291 |
-
|
292 |
-
|
293 |
-
|
294 |
-
+ " const styleSel=document.querySelector(\"#style-input select\");\n"
|
295 |
-
+ " if(styleSel) { styleSel.value=ex[6]; styleSel.dispatchEvent(new Event(\"change\",{bubbles:true})); }\n"
|
296 |
-
+ " const linkBox=document.querySelector(\"#link-input textarea,#link-input input\");\n"
|
297 |
-
+ " if(linkBox) updateReactValue(linkBox,ex[7]);\n"
|
298 |
-
+ "}\n"
|
299 |
-
+ "</script>"
|
300 |
)
|
301 |
-
|
302 |
gr.HTML(html_items + apply_example_js)
|
303 |
|
304 |
-
#
|
305 |
demo.load(
|
306 |
fn=generate_static_badge,
|
307 |
-
inputs=[label,message,color,label_color,logo,logo_color,style,link],
|
308 |
-
outputs=[out_code,out_preview]
|
309 |
)
|
310 |
-
|
311 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
312 |
fn=generate_static_badge,
|
313 |
-
inputs=[label,message,color,label_color,logo,logo_color,style,link],
|
314 |
-
outputs=[out_code,out_preview]
|
315 |
)
|
316 |
|
317 |
# ▷▷ Help 탭
|
@@ -321,29 +294,28 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
|
|
321 |
border-radius:16px;box-shadow:0 4px 12px rgba(0,0,0,.03);">
|
322 |
<h3 style="color:#5e60ce;margin-top:0;">📋 How to Use BadgeCraft</h3>
|
323 |
<h4 style="color:#457b9d;margin-bottom:8px;">✨ What are Badges?</h4>
|
324 |
-
<p>Badges are small visual indicators that can be used in README files, websites, and documentation. Shields.io badges
|
325 |
<h4 style="color:#457b9d;margin-bottom:8px;">🛠️ Basic Settings</h4>
|
326 |
<ul>
|
327 |
-
<li><strong>Label</strong>: Text
|
328 |
-
<li><strong>Message</strong>: Text
|
329 |
-
<li><strong>Logo</strong>:
|
330 |
-
<li><strong>Style</strong>:
|
331 |
</ul>
|
332 |
<h4 style="color:#457b9d;margin-bottom:8px;">🎨 Color Settings</h4>
|
333 |
<ul>
|
334 |
-
<li><strong>Background Color</strong>:
|
335 |
-
<li><strong>Label Background Color</strong>:
|
336 |
-
<li><strong>Logo Color</strong>:
|
337 |
</ul>
|
338 |
<h4 style="color:#457b9d;margin-bottom:8px;">🔗 Using the HTML</h4>
|
339 |
-
<p>Copy the generated HTML
|
340 |
-
|
341 |
<h4 style="color:#457b9d;margin-bottom:8px;">💡 Tips</h4>
|
342 |
<ul>
|
343 |
-
<li>Click
|
344 |
-
<li>
|
345 |
-
<li>
|
346 |
-
<li>Custom colors can be selected with the color picker or by entering a hex code</li>
|
347 |
</ul>
|
348 |
</div>
|
349 |
''')
|
@@ -351,14 +323,14 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
|
|
351 |
# ---------- Footer ----------
|
352 |
gr.HTML('''
|
353 |
<div class="footer">
|
354 |
-
<p>©
|
355 |
<a href="https://discord.gg/openfreeai" target="_blank" style="color:#5e60ce;">Discord</a>
|
356 |
</p>
|
357 |
</div>
|
358 |
''')
|
359 |
|
360 |
-
#
|
361 |
-
# Launch
|
362 |
-
#
|
363 |
if __name__ == "__main__":
|
364 |
demo.launch()
|
|
|
1 |
+
# ==========================================================
|
2 |
+
# BadgeCraft ‑ Shields.io Badge Generator
|
3 |
+
# • ColorPicker 실시간 반영 (.input 이벤트)
|
4 |
+
# • CDN 캐시 무력화 ( _ts=<epoch> 파라미터 )
|
5 |
+
# ==========================================================
|
6 |
import urllib.parse
|
7 |
+
import time
|
8 |
import json
|
9 |
import gradio as gr
|
10 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
11 |
|
12 |
+
# ----------------------------------------------------------
|
13 |
+
# 1) Badge URL 생성 함수
|
14 |
+
# ----------------------------------------------------------
|
15 |
+
def generate_static_badge(label, message,
|
16 |
+
color, label_color,
|
17 |
+
logo, logo_color,
|
18 |
+
style, link):
|
19 |
+
"""Shields.io badge URL 과 HTML / 미리보기 카드 반환"""
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
20 |
|
21 |
+
# ── ① HEX 앞의 # 제거 ───────────────────────────────
|
22 |
+
strip = lambda c: c.lstrip("#") if isinstance(c, str) else c
|
23 |
+
color, label_color, logo_color = map(strip, (color, label_color, logo_color))
|
24 |
|
25 |
+
# ── ② 쿼리 파라미터 조립 + 캐시 버스터(_ts) ─────────
|
26 |
+
base = "https://img.shields.io/static/v1"
|
27 |
+
qs = {
|
28 |
+
"label": label,
|
29 |
+
"message": message,
|
30 |
+
"color": color,
|
31 |
+
"labelColor": label_color,
|
32 |
+
"logo": logo,
|
33 |
+
"logoColor": logo_color,
|
34 |
+
"style": style,
|
35 |
+
"_ts": str(int(time.time())) # ← 캐시 무력화
|
36 |
+
}
|
37 |
+
query = "&".join(f"{k}={urllib.parse.quote(v, safe='')}"
|
38 |
+
for k, v in qs.items() if v)
|
39 |
+
badge_url = f"{base}?{query}"
|
40 |
|
41 |
+
# ── ③ HTML 코드 & 미리보기 구성 ────────────────────
|
42 |
+
img_tag = f'<img src="{badge_url}" alt="badge">'
|
43 |
+
html_code = f'<a href="{link}" target="_blank">{img_tag}</a>' if link else img_tag
|
44 |
+
preview = (
|
45 |
+
"<div style='padding:30px;text-align:center;"
|
46 |
+
"border-radius:16px;background:linear-gradient(135deg,#f8f9fa,#e9ecef);"
|
47 |
+
"box-shadow:0 6px 12px rgba(0,0,0,.05);'>"
|
48 |
+
f"{html_code}</div>"
|
49 |
+
)
|
50 |
+
return html_code, preview
|
51 |
|
52 |
|
53 |
+
# ----------------------------------------------------------
|
54 |
+
# 2) Gradio UI
|
55 |
+
# ----------------------------------------------------------
|
56 |
with gr.Blocks(theme=gr.themes.Soft()) as demo:
|
57 |
+
|
58 |
# ---------- Global CSS ----------
|
59 |
gr.HTML("""
|
60 |
<style>
|
|
|
100 |
font-size:1rem!important;
|
101 |
}
|
102 |
h1{
|
103 |
+
color:#5e60ce;font-weight:800;letter-spacing:-.5px;
|
|
|
|
|
|
|
|
|
|
|
|
|
104 |
}
|
105 |
+
h3{color:#5e60ce;font-weight:600;}
|
106 |
.footer{
|
107 |
+
margin-top:30px;text-align:center;font-size:.9rem;color:#6d6875;
|
|
|
|
|
|
|
108 |
}
|
109 |
.badge-section{
|
110 |
background:rgba(255,255,255,.7);
|
|
|
117 |
.example-grid{
|
118 |
display:grid;
|
119 |
grid-template-columns:repeat(4,1fr);
|
120 |
+
gap:16px;margin-top:20px;
|
|
|
|
|
121 |
}
|
122 |
.example-item{
|
123 |
background:linear-gradient(135deg,#f1f8ff,#e8f4ff);
|
124 |
+
border-radius:12px;padding:16px;text-align:center;
|
125 |
+
cursor:pointer;transition:all .3s ease;border:2px solid transparent;
|
|
|
|
|
|
|
|
|
126 |
}
|
127 |
.example-item:hover{
|
128 |
transform:translateY(-3px);
|
129 |
box-shadow:0 8px 15px rgba(0,0,0,.05);
|
130 |
border-color:#a8dadc;
|
131 |
}
|
132 |
+
@media(max-width:768px){.example-grid{grid-template-columns:repeat(2,1fr);} }
|
133 |
+
@media(max-width:600px){.example-grid{grid-template-columns:1fr;} }
|
|
|
|
|
|
|
|
|
134 |
</style>
|
135 |
""")
|
136 |
|
137 |
# ---------- Header ----------
|
138 |
gr.HTML("""
|
139 |
+
<div style="text-align:center;margin-bottom:24px;">
|
140 |
+
<h1 style="font-size:2.8rem;margin-bottom:.2em;
|
141 |
+
background:linear-gradient(90deg,#5e60ce,#64dfdf);
|
142 |
+
-webkit-background-clip:text;-webkit-text-fill-color:transparent;">
|
143 |
+
🎨 BadgeCraft
|
144 |
+
</h1>
|
145 |
+
<p style="font-size:1.2rem;margin:.5em 0;color:#457b9d;max-width:700px;margin:0 auto;">
|
146 |
+
Create beautiful badges with live preview and HTML snippet
|
147 |
+
</p>
|
148 |
+
<div style="margin-top:10px;display:flex;justify-content:center;gap:12px;flex-wrap:wrap;">
|
149 |
+
<span style="display:inline-block;background:#e9f5db;color:#588157;
|
150 |
+
padding:6px 12px;border-radius:30px;font-size:.9rem;">
|
151 |
+
<strong>✨ MIT License</strong>
|
152 |
+
</span>
|
153 |
+
<span style="display:inline-block;background:#d8f3dc;color:#2d6a4f;
|
154 |
+
padding:6px 12px;border-radius:30px;font-size:.9rem;">
|
155 |
+
<strong>👥 Created by OpenFreeAI Team</strong>
|
156 |
+
</span>
|
157 |
+
</div>
|
|
|
158 |
</div>
|
|
|
159 |
""")
|
160 |
|
161 |
# ---------- Tabs ----------
|
162 |
with gr.Tabs():
|
163 |
+
# ▷▷ Badge Generator
|
164 |
with gr.TabItem("Badge Generator"):
|
165 |
+
|
166 |
+
# ===== 좌측 입력 =====
|
167 |
with gr.Row():
|
|
|
168 |
with gr.Column():
|
169 |
with gr.Group(elem_classes="badge-section"):
|
170 |
gr.HTML("<h3 style='margin-top:0;margin-bottom:16px;font-size:1.3rem;'>✏️ Badge Settings</h3>")
|
171 |
+
label = gr.Textbox(label="Label", value="Discord", lines=1, elem_id="label-input")
|
172 |
+
message = gr.Textbox(label="Message", value="Join our community", lines=1, elem_id="message-input")
|
173 |
+
logo = gr.Textbox(label="Logo", value="discord", lines=1, elem_id="logo-input")
|
174 |
+
style = gr.Dropdown(label="Style",
|
175 |
+
choices=["flat","flat-square","plastic","for-the-badge","social"],
|
176 |
+
value="for-the-badge", elem_id="style-input")
|
177 |
+
color = gr.ColorPicker(label="Background Color", value="#5865F2", elem_id="color-input")
|
178 |
+
label_color = gr.ColorPicker(label="Label Background Color",value="#99AAFF", elem_id="label-color-input")
|
179 |
+
logo_color = gr.ColorPicker(label="Logo Color", value="#ffffff", elem_id="logo-color-input")
|
180 |
+
link = gr.Textbox(label="Link (URL)", value="https://discord.gg/openfreeai", lines=1, elem_id="link-input")
|
181 |
+
|
182 |
+
# ===== 우측 미리보기 / HTML =====
|
|
|
183 |
with gr.Column():
|
184 |
with gr.Group(elem_classes="badge-section"):
|
185 |
gr.HTML("<h3 style='margin-top:0;margin-bottom:16px;font-size:1.3rem;'>👁️ Preview</h3>")
|
186 |
+
out_preview = gr.HTML()
|
187 |
with gr.Group(elem_classes="badge-section"):
|
188 |
gr.HTML("<h3 style='margin-top:0;margin-bottom:16px;font-size:1.3rem;'>💻 HTML Code</h3>")
|
189 |
+
out_code = gr.Code(language="html", lines=3)
|
190 |
|
191 |
+
# ===== 예제 데이터 & 그리드 =====
|
192 |
examples = [
|
193 |
+
["Discord","Openfree AI","#5865F2","#99AAFF","discord","white","for-the-badge","https://discord.gg/openfreeai"],
|
194 |
+
["X.com","Follow us","#1DA1F2","#00CFFF","x","white","for-the-badge","https://x.com/openfree_ai"],
|
195 |
+
["Collections","Explore","#FFB300","#FFF176","huggingface","black","for-the-badge",
|
196 |
+
"https://huggingface.co/collections/VIDraft/best-open-ai-services-68057e6e312880ea92abaf4c"],
|
197 |
+
["GitHub","Star us","#0A0A0A","#39FF14","github","white","for-the-badge","https://github.com/openfreeai"],
|
198 |
+
["YouTube","Watch now","#E50000","#FF5E5E","youtube","white","for-the-badge","https://www.youtube.com/@AITechTree"],
|
199 |
+
["Facebook","Like us","#1877F2","#6FAFFF","facebook","white","for-the-badge","https://www.facebook.com/profile.php?id=61575353674679"],
|
200 |
+
["Instagram","友情 萬世","#E4405F","#FF77A9","instagram","white","for-the-badge","https://www.instagram.com/openfree_ai/"],
|
201 |
+
["Threads","함께 즐겨요.","#000000","#FF00FF","threads","white","for-the-badge","https://www.threads.net/@openfree_ai"],
|
202 |
]
|
203 |
|
204 |
# 예제 그리드 HTML
|
205 |
html_items = '<div class="example-grid">'
|
206 |
for idx, ex in enumerate(examples):
|
207 |
+
badge_url = "https://img.shields.io/static/v1?" + "&".join([
|
208 |
+
f"label={urllib.parse.quote(ex[0], safe='')}",
|
209 |
+
f"message={urllib.parse.quote(ex[1], safe='')}",
|
210 |
+
f"color={urllib.parse.quote(ex[2].lstrip('#'), safe='')}",
|
211 |
+
f"labelColor={urllib.parse.quote(ex[3].lstrip('#'), safe='')}",
|
212 |
+
f"logo={urllib.parse.quote(ex[4], safe='')}",
|
213 |
+
f"logoColor={urllib.parse.quote(ex[5], safe='')}",
|
214 |
+
f"style={urllib.parse.quote(ex[6], safe='')}",
|
215 |
+
])
|
|
|
|
|
216 |
html_items += f'''
|
217 |
<div class="example-item" onclick="applyExample({idx})">
|
218 |
<img src="{badge_url}" alt="{ex[0]} badge" style="margin-bottom:8px;">
|
|
|
221 |
'''
|
222 |
html_items += '</div>'
|
223 |
|
224 |
+
# -------- React‑controlled input hack & 예제 적용 JS --------
|
225 |
hack_js = """
|
226 |
+
function updateReactValue(el,val){
|
227 |
+
if(!el)return;
|
228 |
+
let proto=window.HTMLInputElement.prototype;
|
229 |
+
if(el.tagName==="TEXTAREA")proto=window.HTMLTextAreaElement.prototype;
|
230 |
+
const desc=Object.getOwnPropertyDescriptor(proto,"value");
|
231 |
+
desc.set.call(el,val);
|
232 |
+
el.dispatchEvent(new Event("input",{bubbles:true}));
|
233 |
+
el.dispatchEvent(new Event("change",{bubbles:true}));
|
234 |
}
|
235 |
+
function toHexIfNeeded(c){
|
236 |
+
if(!c)return"#000000";
|
237 |
+
if(c.toLowerCase()==="white")return"#ffffff";
|
238 |
+
if(c.toLowerCase()==="black")return"#000000";
|
239 |
+
return c;
|
240 |
}
|
241 |
+
function setColor(elemId,val){
|
242 |
+
const wrap=document.getElementById(elemId);
|
243 |
+
if(!wrap)return;
|
244 |
+
let input=wrap.querySelector("input[type='color']");
|
245 |
+
if(!input)input=wrap.querySelector("input[type='text']");
|
246 |
+
if(input)updateReactValue(input,val);
|
|
|
247 |
}
|
248 |
"""
|
249 |
|
|
|
250 |
apply_example_js = (
|
251 |
+
"<script>\n" + hack_js +
|
252 |
+
"const examples=" + json.dumps(examples) + ";\n"
|
253 |
+
"function applyExample(i){\n"
|
254 |
+
" const ex=examples[i];\n"
|
255 |
+
" updateReactValue(document.querySelector('#label-input textarea,#label-input input'),ex[0]);\n"
|
256 |
+
" updateReactValue(document.querySelector('#message-input textarea,#message-input input'),ex[1]);\n"
|
257 |
+
" setColor('color-input',toHexIfNeeded(ex[2]));\n"
|
258 |
+
" setColor('label-color-input',toHexIfNeeded(ex[3]));\n"
|
259 |
+
" updateReactValue(document.querySelector('#logo-input textarea,#logo-input input'),ex[4]);\n"
|
260 |
+
" setColor('logo-color-input',toHexIfNeeded(ex[5]));\n"
|
261 |
+
" const sel=document.querySelector('#style-input select');\n"
|
262 |
+
" if(sel){sel.value=ex[6];sel.dispatchEvent(new Event('change',{bubbles:true}));}\n"
|
263 |
+
" updateReactValue(document.querySelector('#link-input textarea,#link-input input'),ex[7]);\n"
|
264 |
+
"}\n</script>"
|
|
|
|
|
|
|
|
|
|
|
|
|
265 |
)
|
|
|
266 |
gr.HTML(html_items + apply_example_js)
|
267 |
|
268 |
+
# ===== 초기 로드 & 실시간 연결 =====
|
269 |
demo.load(
|
270 |
fn=generate_static_badge,
|
271 |
+
inputs=[label, message, color, label_color, logo, logo_color, style, link],
|
272 |
+
outputs=[out_code, out_preview]
|
273 |
)
|
274 |
+
|
275 |
+
# ── 텍스트/드롭다운: change 이벤트
|
276 |
+
for comp in [label, message, logo, style, link]:
|
277 |
+
comp.change(
|
278 |
+
fn=generate_static_badge,
|
279 |
+
inputs=[label, message, color, label_color, logo, logo_color, style, link],
|
280 |
+
outputs=[out_code, out_preview]
|
281 |
+
)
|
282 |
+
# ── ColorPicker: input 이벤트
|
283 |
+
for comp in [color, label_color, logo_color]:
|
284 |
+
comp.input(
|
285 |
fn=generate_static_badge,
|
286 |
+
inputs=[label, message, color, label_color, logo, logo_color, style, link],
|
287 |
+
outputs=[out_code, out_preview]
|
288 |
)
|
289 |
|
290 |
# ▷▷ Help 탭
|
|
|
294 |
border-radius:16px;box-shadow:0 4px 12px rgba(0,0,0,.03);">
|
295 |
<h3 style="color:#5e60ce;margin-top:0;">📋 How to Use BadgeCraft</h3>
|
296 |
<h4 style="color:#457b9d;margin-bottom:8px;">✨ What are Badges?</h4>
|
297 |
+
<p>Badges are small visual indicators that can be used in README files, websites, and documentation. Shields.io badges display project status, social links, version info, and more.</p>
|
298 |
<h4 style="color:#457b9d;margin-bottom:8px;">🛠️ Basic Settings</h4>
|
299 |
<ul>
|
300 |
+
<li><strong>Label</strong>: Text on the left side (e.g., "Discord")</li>
|
301 |
+
<li><strong>Message</strong>: Text on the right side</li>
|
302 |
+
<li><strong>Logo</strong>: A Simple‑Icons name (<a href="https://simpleicons.org" target="_blank">List</a>)</li>
|
303 |
+
<li><strong>Style</strong>: Badge shape (flat, plastic, for‑the‑badge …)</li>
|
304 |
</ul>
|
305 |
<h4 style="color:#457b9d;margin-bottom:8px;">🎨 Color Settings</h4>
|
306 |
<ul>
|
307 |
+
<li><strong>Background Color</strong>: right‑side color</li>
|
308 |
+
<li><strong>Label Background Color</strong>: left‑side color</li>
|
309 |
+
<li><strong>Logo Color</strong>: logo tint (white / black / #HEX)</li>
|
310 |
</ul>
|
311 |
<h4 style="color:#457b9d;margin-bottom:8px;">🔗 Using the HTML</h4>
|
312 |
+
<p>Copy the generated HTML and paste it into your site, blog, or GitHub README.<br>
|
313 |
+
GitHub also accepts raw Markdown: <code></code></p>
|
314 |
<h4 style="color:#457b9d;margin-bottom:8px;">💡 Tips</h4>
|
315 |
<ul>
|
316 |
+
<li>Click any example tile to auto‑fill all fields</li>
|
317 |
+
<li>Preview refreshes live as you type or pick colors</li>
|
318 |
+
<li>Over 2 000 Simple‑Icons logos are supported</li>
|
|
|
319 |
</ul>
|
320 |
</div>
|
321 |
''')
|
|
|
323 |
# ---------- Footer ----------
|
324 |
gr.HTML('''
|
325 |
<div class="footer">
|
326 |
+
<p>© 2023‑2025 BadgeCraft | MIT License |
|
327 |
<a href="https://discord.gg/openfreeai" target="_blank" style="color:#5e60ce;">Discord</a>
|
328 |
</p>
|
329 |
</div>
|
330 |
''')
|
331 |
|
332 |
+
# ----------------------------------------------------------
|
333 |
+
# 3) Launch
|
334 |
+
# ----------------------------------------------------------
|
335 |
if __name__ == "__main__":
|
336 |
demo.launch()
|