Upload folder using huggingface_hub

demo/ui.py

@@ -593,12 +593,12 @@ footer, .gradio-container footer { display: none !important; }
 }
 .gradio-container ::-webkit-scrollbar-thumb:hover { background: var(--lf-text-subtle); }
 
-/* Sidebar column — subtle card treatment, sticky-feeling */
+/* Sidebar column — one card; inside is flat */
 .gradio-container .lf-sidebar {
     background: var(--lf-surface) !important;
     border: 1px solid var(--lf-border) !important;
     border-radius: 12px !important;
-    padding: 1.25rem 1.25rem 1.1rem !important;
+    padding: 1.5rem 1.35rem 1.35rem !important;
     box-shadow: 0 1px 0 rgba(20,20,19,0.02);
 }
 .gradio-container .lf-sidebar h3 {
@@ -606,21 +606,104 @@ footer, .gradio-container footer { display: none !important; }
     margin-bottom: 0.3rem !important;
 }
 .gradio-container .lf-sidebar p {
-    font-size: 0.9rem !important;
+    font-size: 0.88rem !important;
     margin-bottom: 0.85rem !important;
+    color: var(--lf-text-muted) !important;
 }
-.gradio-container .lf-sidebar .block {
-    /* Sidebars nest "blocks"; flatten them so the card feel is the outer one */
+/* Flatten ALL nested blocks inside the sidebar — no card-in-card */
+.gradio-container .lf-sidebar .block,
+.gradio-container .lf-sidebar .form,
+.gradio-container .lf-sidebar .gr-box,
+.gradio-container .lf-sidebar .gr-panel,
+.gradio-container .lf-sidebar .wrap,
+.gradio-container .lf-sidebar fieldset {
     background: transparent !important;
     border: none !important;
-    padding: 0.35rem 0 !important;
+    padding: 0 !important;
+    margin: 0 !important;
     border-radius: 0 !important;
+    box-shadow: none !important;
+}
+/* Space between consecutive controls in the sidebar */
+.gradio-container .lf-sidebar > div > *,
+.gradio-container .lf-sidebar > .form > * {
+    margin-bottom: 0.85rem !important;
 }
 .gradio-container .lf-sidebar button {
     width: 100% !important;
 }
+.gradio-container .lf-sidebar hr,
+.gradio-container .lf-sidebar .prose hr {
+    border: none !important;
+    border-top: 1px solid var(--lf-border) !important;
+    margin: 1.1rem 0 !important;
+}
+
+/* Hide ugly number-input spinner arrows (▲▼) */
+.gradio-container input[type="number"]::-webkit-outer-spin-button,
+.gradio-container input[type="number"]::-webkit-inner-spin-button {
+    -webkit-appearance: none !important;
+    appearance: none !important;
+    margin: 0 !important;
+}
+.gradio-container input[type="number"] {
+    -moz-appearance: textfield !important;
+    appearance: textfield !important;
+}
+
+/* Slider value-input on the right — align + size so "0.95" doesn't clip */
+.gradio-container .slider-container,
+.gradio-container [data-testid="slider"] {
+    display: flex !important;
+    flex-direction: column !important;
+    gap: 0.4rem !important;
+}
+.gradio-container [data-testid="slider"] .head,
+.gradio-container .tab-like-container {
+    display: flex !important;
+    align-items: center !important;
+    justify-content: space-between !important;
+    gap: 0.5rem !important;
+}
+.gradio-container [data-testid="slider"] input[type="number"] {
+    width: 68px !important;
+    min-width: 68px !important;
+    max-width: 80px !important;
+    text-align: right !important;
+    padding: 0.3rem 0.5rem !important;
+    min-height: 30px !important;
+    font-size: 0.85rem !important;
+}
+
+/* Reset-button next to number inputs — make it transparent & subtle */
+.gradio-container [data-testid="slider"] button,
+.gradio-container .reset-button {
+    background: transparent !important;
+    border: none !important;
+    color: var(--lf-text-subtle) !important;
+    padding: 0.15rem !important;
+    min-width: 26px !important;
+    width: 26px !important;
+    height: 26px !important;
+}
+.gradio-container [data-testid="slider"] button:hover {
+    color: var(--lf-accent) !important;
+    background: var(--lf-accent-soft) !important;
+}
+
+/* Inline code tag (like `/v1/chat/completions`) — softer */
+.gradio-container .lf-sidebar .prose code,
+.gradio-container .lf-sidebar .markdown code,
+.gradio-container .lf-sidebar code {
+    background: var(--lf-surface-alt) !important;
+    border: 1px solid var(--lf-border) !important;
+    color: var(--lf-text) !important;
+    padding: 0.1em 0.4em !important;
+    border-radius: 4px !important;
+    font-size: 0.82em !important;
+}
 
-/* Main pane plots+outputs — a bit more breathing room */
+/* Main pane plots+outputs */
 .gradio-container .gr-plot, .gradio-container .plot-wrap {
     background: var(--lf-surface-alt) !important;
     border-radius: 10px !important;