Spaces:
Running
Running
File size: 3,880 Bytes
599fd8a 480df8c 599fd8a 480df8c 599fd8a 480df8c 599fd8a 480df8c 599fd8a d8e0aa1 599fd8a 480df8c 599fd8a 480df8c 599fd8a 480df8c 599fd8a 480df8c 599fd8a 480df8c 599fd8a 480df8c 599fd8a 480df8c 599fd8a 480df8c 599fd8a 480df8c 599fd8a 480df8c 599fd8a 480df8c 599fd8a 480df8c | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 | # ========================= UI (predictor styling kept) =========================
CSS = """
/* ----- Base layout: light, high-contrast ----- */
.gradio-container {
background: #f8fafc !important; /* slate-50 */
color: #0f172a !important; /* slate-900 */
--card-bg: #ffffff;
--card-brd: #e2e8f0; /* slate-200 */
}
/* Cards / groups / accordions */
.card, .gr-accordion, .gr-group, .gr-box {
background: var(--card-bg) !important;
border: 1px solid var(--card-brd) !important;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
border-radius: 14px !important;
}
/* Inputs: white background, dark text */
.gradio-container input,
.gradio-container textarea,
.gradio-container select,
.gradio-container .gr-input,
.gradio-container .gr-textbox textarea {
background: #ffffff !important;
color: #0f172a !important;
border: 1px solid #cbd5e1 !important; /* slate-300 */
}
/* Buttons */
.gradio-container button {
font-weight: 700 !important;
}
/* ----- Label colors by component type (Blue / Green / Red) ----- */
/* Blue: text-like fields & sliders */
.gradio-container .gr-textbox label,
.gradio-container .gr-markdown h1,
.gradio-container .gr-markdown h2,
.gradio-container .gr-markdown h3,
.gradio-container .gr-slider label {
color: #1d4ed8 !important; /* blue-700 */
font-weight: 700 !important;
text-shadow: 0 0 0.01px rgba(29,78,216,0.3);
}
/* Green: selections & toggles */
.gradio-container .gr-dropdown label,
.gradio-container .gr-checkbox label,
.gradio-container .gr-checkbox-group label {
color: #166534 !important; /* green-800 */
font-weight: 700 !important;
text-shadow: 0 0 0.01px rgba(22,101,52,0.3);
}
/* Red: numeric/measurement inputs (to stand out) */
.gradio-container .gr-number label {
color: #b91c1c !important; /* red-700 */
font-weight: 800 !important;
text-shadow: 0 0 0.01px rgba(185,28,28,0.25);
}
/* Secondary hint/info text under labels */
.gradio-container .label > .text-gray-500,
.gradio-container .label .secondary-text,
.gradio-container .gr-input .text-gray-500 {
color: #334155 !important; /* slate-700 */
}
/* Tabs: clearer selected state */
.gradio-container .tabs .tabitem.selected {
border-bottom: 3px solid #1d4ed8 !important; /* blue underline */
font-weight: 800 !important;
}
/* Chat bubbles: better contrast */
.gradio-container .message.user {
background: #e0f2fe !important; /* sky-100 */
border: 1px solid #bae6fd !important;
color: #0c4a6e !important;
}
.gradio-container .message.bot {
background: #ecfdf5 !important; /* emerald-50 */
border: 1px solid #d1fae5 !important;
color: #064e3b !important;
}
/* Sliders & focus states */
.gradio-container input:focus,
.gradio-container textarea:focus,
.gradio-container select:focus {
outline: 2px solid #1d4ed8 !important; /* blue focus ring */
border-color: #1d4ed8 !important;
}
/* Headline block at top */
.gradio-container h1, .gradio-container .prose h1 {
color: #0f172a !important;
}
/* Small bump to label size */
.gradio-container label {
font-size: 0.98rem !important;
letter-spacing: 0.1px;
}
"""
# Tailwind-like hues mapped into Gradio theme tokens
theme = gr.themes.Soft(
primary_hue="blue",
secondary_hue="green",
neutral_hue="slate"
).set(
body_background_fill="#f8fafc",
body_text_color="#0f172a",
input_background_fill="#ffffff",
input_border_color="#cbd5e1",
button_primary_background_fill="#1d4ed8", # blue
button_primary_text_color="#ffffff",
button_secondary_background_fill="#16a34a", # green
button_secondary_text_color="#ffffff",
radius_large="14px",
spacing_size="8px"
)
|