Spaces:
Sleeping
Sleeping
| 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', | |
| ) |