Spaces:
Running on Zero
Running on Zero
feat(ui): add Discord community link to tipbar and drawer
Browse filesTwo entry points for "Chat with the maker on Discord":
- Tipbar: appended as a third bullet next to the support / follow row,
unobtrusive but persistent.
- Drawer: new "Community" section at the bottom with a styled
amber-on-slate button (border-brighten + arrow nudge on hover),
matching the Topaz Cinema Slate palette.
Both open `https://discord.gg/qbn3exeEXa` in a new tab.
app.py
CHANGED
|
@@ -356,6 +356,37 @@ _CUSTOM_CSS = """
|
|
| 356 |
color: #7C8693;
|
| 357 |
}
|
| 358 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 359 |
/* === Status banner === */
|
| 360 |
.status-card {
|
| 361 |
padding: 12px 16px;
|
|
@@ -506,7 +537,9 @@ def build_app() -> gr.Blocks:
|
|
| 506 |
'<strong>Drop a <span class="aio-heart">♥</span> at the top</strong> to support it '
|
| 507 |
'· '
|
| 508 |
'Follow <a href="https://huggingface.co/techfreakworm" target="_blank" rel="noopener noreferrer">@techfreakworm</a> '
|
| 509 |
-
'for what\'s next
|
|
|
|
|
|
|
| 510 |
'</div>'
|
| 511 |
)
|
| 512 |
|
|
@@ -546,6 +579,15 @@ def build_app() -> gr.Blocks:
|
|
| 546 |
"the auto-detected VRAM tier.",
|
| 547 |
elem_classes=["aio-model-badge"],
|
| 548 |
)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 549 |
|
| 550 |
# Body — unchanged, still hosts the 6 mode tabs.
|
| 551 |
with gr.Column(scale=4, elem_classes=["aio-body"]):
|
|
|
|
| 356 |
color: #7C8693;
|
| 357 |
}
|
| 358 |
|
| 359 |
+
/* Discord callout — drawer-bottom community button. Warm amber-on-slate
|
| 360 |
+
to match the Topaz palette; the arrow nudges right on hover so it
|
| 361 |
+
reads as actionable without screaming. */
|
| 362 |
+
.aio-discord-btn {
|
| 363 |
+
display: flex;
|
| 364 |
+
align-items: center;
|
| 365 |
+
gap: 10px;
|
| 366 |
+
padding: 10px 12px;
|
| 367 |
+
margin: 4px 0;
|
| 368 |
+
border-radius: 8px;
|
| 369 |
+
background: linear-gradient(135deg, #1F2630 0%, #1A1F26 100%);
|
| 370 |
+
border: 1px solid #2C3340;
|
| 371 |
+
color: #E0A458 !important;
|
| 372 |
+
font-size: 12.5px;
|
| 373 |
+
font-weight: 500;
|
| 374 |
+
text-decoration: none !important;
|
| 375 |
+
transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
|
| 376 |
+
}
|
| 377 |
+
.aio-discord-btn:hover {
|
| 378 |
+
border-color: #E0A458;
|
| 379 |
+
background: linear-gradient(135deg, #242C37 0%, #1F2630 100%);
|
| 380 |
+
}
|
| 381 |
+
.aio-discord-btn:hover .aio-discord-arrow { transform: translateX(3px); }
|
| 382 |
+
.aio-discord-glyph { font-size: 14px; line-height: 1; }
|
| 383 |
+
.aio-discord-arrow {
|
| 384 |
+
margin-left: auto;
|
| 385 |
+
color: #7C8693;
|
| 386 |
+
transition: transform 0.15s ease, color 0.15s ease;
|
| 387 |
+
}
|
| 388 |
+
.aio-discord-btn:hover .aio-discord-arrow { color: #E0A458; }
|
| 389 |
+
|
| 390 |
/* === Status banner === */
|
| 391 |
.status-card {
|
| 392 |
padding: 12px 16px;
|
|
|
|
| 537 |
'<strong>Drop a <span class="aio-heart">♥</span> at the top</strong> to support it '
|
| 538 |
'· '
|
| 539 |
'Follow <a href="https://huggingface.co/techfreakworm" target="_blank" rel="noopener noreferrer">@techfreakworm</a> '
|
| 540 |
+
'for what\'s next '
|
| 541 |
+
'· '
|
| 542 |
+
'<a href="https://discord.gg/qbn3exeEXa" target="_blank" rel="noopener noreferrer">Chat with the maker on Discord</a>'
|
| 543 |
'</div>'
|
| 544 |
)
|
| 545 |
|
|
|
|
| 579 |
"the auto-detected VRAM tier.",
|
| 580 |
elem_classes=["aio-model-badge"],
|
| 581 |
)
|
| 582 |
+
gr.Markdown("Community", elem_classes=["aio-drawer-heading"])
|
| 583 |
+
gr.HTML(
|
| 584 |
+
'<a class="aio-discord-btn" href="https://discord.gg/qbn3exeEXa" '
|
| 585 |
+
'target="_blank" rel="noopener noreferrer">'
|
| 586 |
+
'<span class="aio-discord-glyph">✨</span>'
|
| 587 |
+
'<span>Chat with the maker on Discord</span>'
|
| 588 |
+
'<span class="aio-discord-arrow">→</span>'
|
| 589 |
+
'</a>'
|
| 590 |
+
)
|
| 591 |
|
| 592 |
# Body — unchanged, still hosts the 6 mode tabs.
|
| 593 |
with gr.Column(scale=4, elem_classes=["aio-body"]):
|