fw-vision-studio / src /config.py
RobertoBarrosoLuque
design ready
8893dd6
import gradio as gr
# Custom CSS with Fireworks AI purple palette
CUSTOM_CSS = """
/* Professional container with subtle purple gradient */
.gradio-container {
font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
background: linear-gradient(135deg, #FAFBFC 0%, #F3F0FF 100%);
}
/* Clean chat messages */
.chat-message {
border-radius: 12px;
padding: 16px;
margin: 8px 0;
background: white;
box-shadow: 0 1px 3px rgba(103, 32, 255, 0.08);
border: 1px solid #E6EAF4;
transition: all 0.2s ease;
}
.chat-message:hover {
box-shadow: 0 4px 12px rgba(103, 32, 255, 0.12);
}
/* Professional function calls with purple accent */
.function-call {
background: linear-gradient(to right, #F3F0FF, #FFFFFF);
border-left: 3px solid #6720FF;
padding: 16px;
margin: 12px 0;
border-radius: 8px;
box-shadow: 0 1px 2px rgba(103, 32, 255, 0.06);
font-family: 'JetBrains Mono', monospace;
font-size: 0.9em;
color: #0F172A;
}
/* Sleek meetings panel */
.meetings-container {
background: white;
border-radius: 16px;
padding: 24px;
box-shadow: 0 4px 6px rgba(103, 32, 255, 0.08);
border: 1px solid #E6EAF4;
}
/* Modern accordion with purple accents */
.meeting-details {
border: 1px solid #E6EAF4;
border-radius: 10px;
background: #FFFFFF;
margin: 10px 0;
transition: all 0.25s ease;
overflow: hidden;
}
.meeting-details:hover {
box-shadow: 0 4px 12px rgba(103, 32, 255, 0.1);
border-color: #C4B5FD;
}
.meeting-details[open] {
border-color: #6720FF;
box-shadow: 0 4px 12px rgba(103, 32, 255, 0.15);
}
/* Clean summary styling with purple */
.meeting-summary {
font-weight: 600;
color: #0F172A;
padding: 14px 18px;
cursor: pointer;
background: linear-gradient(90deg, transparent 0%, #F3F0FF 100%);
transition: background 0.2s ease;
}
.meeting-summary:hover {
background: linear-gradient(90deg, #F3F0FF 0%, #EDE9FE 100%);
}
/* Meeting content styling */
.meeting-content {
padding: 16px 18px;
color: #64748B;
border-top: 1px solid #E6EAF4;
background: #FAFBFC;
}
/* Professional content cards */
.content-card {
background: white;
border-radius: 16px;
padding: 28px;
box-shadow: 0 4px 6px rgba(103, 32, 255, 0.06);
border: 1px solid #E6EAF4;
}
/* Purple accent links */
a {
color: #6720FF;
text-decoration: none;
transition: color 0.2s ease;
}
a:hover {
color: #7B2FFF;
text-decoration: underline;
}
/* Custom scrollbar with purple */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: #F3F0FF;
border-radius: 4px;
}
::-webkit-scrollbar-thumb {
background: #C4B5FD;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #A78BFA;
}
/* Search box styling */
.search-box {
border: 2px solid #E6EAF4;
border-radius: 10px;
transition: all 0.2s ease;
}
.search-box:focus {
border-color: #6720FF;
box-shadow: 0 0 0 3px rgba(103, 32, 255, 0.1);
}
/* Header styling */
.header-title {
background: linear-gradient(135deg, #6720FF 0%, #8B5CF6 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: 700;
}
/* Chat window styling - readable font size */
.chat-window {
font-size: 0.95em !important;
}
.chat-window .message {
font-size: 0.95em !important;
}
.chat-window .message-content {
font-size: 0.95em !important;
line-height: 1.6;
}
/* Readable text in chat messages */
.chat-window p {
font-size: 0.95em !important;
}
.chat-window code {
font-size: 0.9em !important;
}
.chat-window pre {
font-size: 0.9em !important;
}
/* Slightly smaller tool calling cards */
.chat-window .tool-call {
font-size: 0.92em !important;
}
.chat-window table {
font-size: 0.92em !important;
}
.chat-window th,
.chat-window td {
font-size: 0.92em !important;
padding: 6px 10px !important;
}
/* Proportional headings in chat */
.chat-window h1 {
font-size: 1.5em !important;
}
.chat-window h2 {
font-size: 1.3em !important;
}
.chat-window h3 {
font-size: 1.15em !important;
}
.chat-window h4,
.chat-window h5,
.chat-window h6 {
font-size: 1em !important;
}
/* List items */
.chat-window ul,
.chat-window ol {
font-size: 0.95em !important;
}
.chat-window li {
font-size: 0.95em !important;
}
/* Compact header spacing */
.compact-header {
margin-bottom: 8px !important;
padding: 8px 0 !important;
}
.compact-input {
margin-bottom: 4px !important;
}
.compact-input label {
font-size: 0.9em !important;
margin-bottom: 4px !important;
}
/* Compact example questions */
.compact-examples {
margin: 8px 0 12px 0 !important;
gap: 6px !important;
}
.compact-examples button {
font-size: 0.85em !important;
padding: 6px 10px !important;
min-height: 32px !important;
}
"""
# Create custom Fireworks AI-inspired theme
GRADIO_THEME = gr.themes.Base(
primary_hue=gr.themes.colors.purple,
secondary_hue=gr.themes.colors.violet,
neutral_hue=gr.themes.colors.slate,
spacing_size=gr.themes.sizes.spacing_lg,
radius_size=gr.themes.sizes.radius_md,
text_size=gr.themes.sizes.text_md,
font=[gr.themes.GoogleFont('Inter'), 'ui-sans-serif', 'system-ui', 'sans-serif'],
font_mono=[gr.themes.GoogleFont('JetBrains Mono'), 'monospace']
).set(
# Primary button styling (Fireworks AI purple)
button_primary_background_fill='#6720FF',
button_primary_background_fill_hover='#7B2FFF',
button_primary_text_color='#FFFFFF',
# Secondary button styling
button_secondary_background_fill='#F3F0FF',
button_secondary_background_fill_hover='#EDE9FE',
button_secondary_text_color='#6720FF',
# Interactive elements
slider_color='#6720FF',
# Links
link_text_color='#6720FF',
link_text_color_hover='#7B2FFF',
link_text_color_visited='#8B5CF6',
# Backgrounds
body_background_fill='#FAFBFC',
block_background_fill='#FFFFFF',
input_background_fill='#FFFFFF',
# Borders
border_color_primary='#E6EAF4',
)