Upload folder using huggingface_hub

demo/ui.py

@@ -109,6 +109,43 @@ html, body, .gradio-container {
     --button-primary-background-fill-hover:   var(--lf-accent-dk) !important;
     --button-primary-text-color:              #ffffff             !important;
     --button-primary-border-color:            var(--lf-accent)    !important;
+
+    /* Kill the `<span data-testid="block-info">` pill that Gradio 5 uses
+       for every component label — it was defaulting to the primary accent.
+       We want labels to be plain muted text above the input. */
+    --block-title-background-fill:   transparent            !important;
+    --block-title-border-color:      transparent            !important;
+    --block-title-border-width:      0                      !important;
+    --block-title-radius:            0                      !important;
+    --block-title-padding:           0 0 0.3rem 0           !important;
+    --block-title-text-color:        var(--lf-text-muted)   !important;
+    --block-title-text-weight:       500                    !important;
+    --block-title-text-size:         0.8rem                 !important;
+
+    /* Input outlines — dropdowns/text/number all need obvious borders */
+    --input-shadow:               none                    !important;
+    --input-shadow-focus:         0 0 0 3px rgba(226,135,99,0.18) !important;
+    --input-border-color-focus:   var(--lf-accent)        !important;
+    --input-background-fill-focus:var(--lf-surface)       !important;
+
+    /* Checkbox / radio variables */
+    --checkbox-background-color:          var(--lf-surface)     !important;
+    --checkbox-background-color-hover:    var(--lf-surface-alt) !important;
+    --checkbox-background-color-focus:    var(--lf-surface-alt) !important;
+    --checkbox-background-color-selected: var(--lf-accent)      !important;
+    --checkbox-border-color:              var(--lf-border)      !important;
+    --checkbox-border-color-hover:        var(--lf-accent)      !important;
+    --checkbox-border-color-focus:        var(--lf-accent)      !important;
+    --checkbox-border-color-selected:     var(--lf-accent)      !important;
+    --checkbox-label-background-fill:         transparent        !important;
+    --checkbox-label-background-fill-hover:   var(--lf-surface-alt) !important;
+    --checkbox-label-background-fill-selected:var(--lf-accent-soft) !important;
+    --checkbox-label-text-color:          var(--lf-text)        !important;
+    --checkbox-label-text-color-selected: var(--lf-accent)      !important;
+    --checkbox-label-border-color:        var(--lf-border)      !important;
+    --checkbox-label-border-color-hover:  var(--lf-accent)      !important;
+    --checkbox-label-border-color-selected:var(--lf-accent)     !important;
+    --checkbox-check:                     var(--lf-accent)      !important;
 }
 
 /* Typography — serif for headings to match Claude's Tiempos-style hero */
@@ -264,27 +301,50 @@ html, body, .gradio-container {
     border-radius: 8px !important;
 }
 
-/* Inputs + selects + textareas */
+/* Inputs + selects + textareas + dropdowns — clearly bordered */
 .gradio-container input[type="text"],
 .gradio-container input[type="number"],
 .gradio-container input[type="password"],
 .gradio-container select,
-.gradio-container textarea {
+.gradio-container textarea,
+.gradio-container .wrap-inner,
+.gradio-container [role="combobox"],
+.gradio-container .dropdown > div,
+.gradio-container [data-testid="dropdown"] > div {
     border: 1px solid var(--lf-border) !important;
-    background: var(--lf-surface) !important;
+    background: var(--lf-surface-alt) !important;
     color: var(--lf-text) !important;
     border-radius: 8px !important;
     font-family: "Inter", sans-serif !important;
     font-size: 0.92rem !important;
+    min-height: 38px !important;
+    box-sizing: border-box !important;
+    transition: border-color 0.15s, box-shadow 0.15s !important;
+}
+.gradio-container input[type="text"],
+.gradio-container input[type="number"],
+.gradio-container input[type="password"],
+.gradio-container textarea {
     padding: 0.55rem 0.75rem !important;
-    transition: border-color 0.15s !important;
 }
 .gradio-container input:focus,
 .gradio-container textarea:focus,
-.gradio-container select:focus {
+.gradio-container select:focus,
+.gradio-container [role="combobox"]:focus-within {
     border-color: var(--lf-accent) !important;
     outline: none !important;
-    box-shadow: 0 0 0 3px rgba(201,100,66,0.15) !important;
+    box-shadow: 0 0 0 3px rgba(226,135,99,0.18) !important;
+}
+
+/* Number input wrapper (Gradio renders a wrapper around input+reset) —
+   give it enough room so "0.7" doesn't clip */
+.gradio-container .number-input-container,
+.gradio-container input[type="number"] {
+    min-width: 72px !important;
+    text-align: left !important;
+}
+.gradio-container input[type="number"] {
+    padding-right: 0.4rem !important;
 }
 
 /* Labels — kill the accent-coloured "chip" treatment Gradio 5 applies,