| import gradio as gr |
|
|
|
|
| def create_theme(): |
| return gr.themes.Base( |
| primary_hue=gr.themes.colors.green, |
| secondary_hue=gr.themes.colors.amber, |
| neutral_hue=gr.themes.colors.zinc, |
| font=[ |
| gr.themes.GoogleFont("JetBrains Mono"), |
| gr.themes.GoogleFont("Inter"), |
| "ui-monospace", |
| "monospace", |
| ], |
| font_mono=[ |
| gr.themes.GoogleFont("JetBrains Mono"), |
| "ui-monospace", |
| "monospace", |
| ], |
| ) |
|
|
|
|
| CUSTOM_CSS = """ |
| /* ===== LIFELOG DEBUGGER THEME ===== */ |
| |
| .gradio-container { |
| background: #0d1117 !important; |
| max-width: 1200px !important; |
| } |
| |
| /* --- App header --- */ |
| .app-header { |
| background: linear-gradient(135deg, #0d1117 0%, #161b22 100%); |
| border: 1px solid #30363d; |
| border-radius: 12px; |
| padding: 28px 32px; |
| margin-bottom: 20px; |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .app-header::before { |
| content: ''; |
| position: absolute; |
| top: 0; left: 0; right: 0; bottom: 0; |
| background: repeating-linear-gradient( |
| 0deg, |
| transparent, |
| transparent 2px, |
| rgba(34, 197, 94, 0.03) 2px, |
| rgba(34, 197, 94, 0.03) 4px |
| ); |
| pointer-events: none; |
| animation: scanline 10s linear infinite; |
| } |
| |
| @keyframes scanline { |
| 0% { transform: translateY(0); } |
| 100% { transform: translateY(120px); } |
| } |
| |
| .app-title { |
| font-family: 'JetBrains Mono', monospace; |
| color: #22c55e; |
| font-size: 32px; |
| font-weight: 700; |
| margin: 0; |
| text-shadow: 0 0 24px rgba(34, 197, 94, 0.3); |
| } |
| |
| .app-subtitle { |
| color: #8b949e; |
| font-family: 'JetBrains Mono', monospace; |
| font-size: 14px; |
| margin-top: 6px; |
| } |
| |
| .app-meta { |
| color: #484f58; |
| font-family: 'JetBrains Mono', monospace; |
| font-size: 11px; |
| margin-top: 4px; |
| } |
| |
| /* --- Dark overrides --- */ |
| .block, .form, .wrap, .panel { |
| background: #161b22 !important; |
| border-color: #30363d !important; |
| } |
| |
| .label-wrap, .block > label { |
| color: #8b949e !important; |
| } |
| |
| textarea, input[type="text"] { |
| background: #0d1117 !important; |
| border-color: #30363d !important; |
| color: #e6edf3 !important; |
| font-family: 'JetBrains Mono', monospace !important; |
| } |
| |
| textarea:focus, input[type="text"]:focus { |
| border-color: #22c55e !important; |
| box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.15) !important; |
| } |
| |
| textarea::placeholder, input::placeholder { |
| color: #484f58 !important; |
| } |
| |
| /* --- Tab styling --- */ |
| .tab-nav { |
| background: #161b22 !important; |
| border-bottom: 1px solid #30363d !important; |
| } |
| |
| .tab-nav button { |
| font-family: 'JetBrains Mono', monospace !important; |
| color: #8b949e !important; |
| background: transparent !important; |
| border: none !important; |
| border-bottom: 2px solid transparent !important; |
| padding: 12px 20px !important; |
| font-size: 13px !important; |
| transition: all 0.2s !important; |
| } |
| |
| .tab-nav button:hover { |
| color: #e6edf3 !important; |
| background: rgba(34, 197, 94, 0.05) !important; |
| } |
| |
| .tab-nav button.selected { |
| color: #22c55e !important; |
| border-bottom-color: #22c55e !important; |
| background: rgba(34, 197, 94, 0.08) !important; |
| } |
| |
| /* --- Section headers --- */ |
| .section-header { |
| font-family: 'JetBrains Mono', monospace; |
| color: #22c55e; |
| font-size: 15px; |
| margin: 0 0 12px 0; |
| padding: 8px 12px; |
| background: rgba(34, 197, 94, 0.05); |
| border-left: 3px solid #22c55e; |
| border-radius: 0 6px 6px 0; |
| } |
| |
| /* --- Chatbot --- */ |
| .chatbot { |
| background: #0d1117 !important; |
| border: 1px solid #30363d !important; |
| border-radius: 8px !important; |
| } |
| |
| .message { |
| font-family: 'JetBrains Mono', monospace !important; |
| font-size: 13px !important; |
| } |
| |
| /* --- Git Log Timeline --- */ |
| .git-log-container { |
| font-family: 'JetBrains Mono', monospace; |
| color: #e6edf3; |
| padding: 8px 0; |
| } |
| |
| .commit-entry { |
| position: relative; |
| padding: 16px 16px 16px 44px; |
| border-left: 2px solid #30363d; |
| margin-left: 20px; |
| margin-bottom: 0; |
| transition: background 0.2s; |
| } |
| |
| .commit-entry:hover { |
| background: rgba(34, 197, 94, 0.03); |
| } |
| |
| .commit-entry::before { |
| content: ''; |
| position: absolute; |
| left: -7px; |
| top: 22px; |
| width: 12px; |
| height: 12px; |
| border-radius: 50%; |
| background: #22c55e; |
| border: 2px solid #0d1117; |
| box-shadow: 0 0 8px rgba(34, 197, 94, 0.4); |
| } |
| |
| .commit-entry.resolved::before { |
| background: #8b949e; |
| box-shadow: none; |
| } |
| |
| .commit-header { |
| display: flex; |
| align-items: center; |
| flex-wrap: wrap; |
| gap: 8px; |
| } |
| |
| .commit-hash { |
| color: #f0883e; |
| font-weight: 600; |
| font-size: 13px; |
| } |
| |
| .commit-branch { |
| display: inline-block; |
| padding: 2px 10px; |
| border-radius: 12px; |
| font-size: 11px; |
| font-weight: 600; |
| text-transform: uppercase; |
| letter-spacing: 0.5px; |
| } |
| |
| .branch-career { background: rgba(56, 139, 253, 0.15); color: #58a6ff; } |
| .branch-financial { background: rgba(240, 136, 62, 0.15); color: #f0883e; } |
| .branch-health { background: rgba(63, 185, 80, 0.15); color: #3fb950; } |
| .branch-relationship{ background: rgba(219, 97, 162, 0.15); color: #db61a2; } |
| .branch-education { background: rgba(160, 110, 246, 0.15); color: #a06ef6; } |
| .branch-housing { background: rgba(121, 192, 255, 0.15); color: #79c0ff; } |
| .branch-lifestyle { background: rgba(210, 153, 34, 0.15); color: #d29922; } |
| .branch-creative { background: rgba(255, 123, 114, 0.15); color: #ff7b72; } |
| .branch-unknown { background: rgba(139, 148, 158, 0.15); color: #8b949e; } |
| |
| .commit-message { |
| color: #e6edf3; |
| font-size: 13px; |
| flex: 1; |
| } |
| |
| .commit-date { |
| color: #484f58; |
| font-size: 11px; |
| margin-left: auto; |
| } |
| |
| .commit-body { |
| margin-top: 10px; |
| padding-left: 4px; |
| } |
| |
| .prediction-item { |
| color: #8b949e; |
| font-size: 12px; |
| margin: 3px 0; |
| padding-left: 12px; |
| border-left: 1px solid #21262d; |
| } |
| |
| .prediction-bug { color: #f85149; } |
| .prediction-feature { color: #3fb950; } |
| .prediction-neutral { color: #d29922; } |
| |
| .commit-card-thumb { |
| width: 100px; |
| height: 100px; |
| border-radius: 8px; |
| border: 1px solid #30363d; |
| margin-top: 8px; |
| object-fit: cover; |
| } |
| |
| .outcome-badge { |
| display: inline-block; |
| padding: 3px 10px; |
| border-radius: 4px; |
| font-size: 11px; |
| font-weight: 600; |
| margin-top: 8px; |
| text-transform: uppercase; |
| letter-spacing: 0.5px; |
| } |
| |
| .outcome-pending { background: rgba(210, 153, 34, 0.15); color: #d29922; } |
| .outcome-positive { background: rgba(63, 185, 80, 0.15); color: #3fb950; } |
| .outcome-negative { background: rgba(248, 81, 73, 0.15); color: #f85149; } |
| .outcome-mixed { background: rgba(240, 136, 62, 0.15); color: #f0883e; } |
| |
| /* --- Results panel --- */ |
| .results-panel { |
| background: #161b22; |
| border: 1px solid #30363d; |
| border-radius: 10px; |
| padding: 24px; |
| } |
| |
| .results-panel h3 { |
| color: #e6edf3; |
| margin: 0 0 16px 0; |
| font-size: 16px; |
| } |
| |
| .category-badge { |
| display: inline-block; |
| padding: 4px 14px; |
| border-radius: 16px; |
| font-family: 'JetBrains Mono', monospace; |
| font-size: 13px; |
| font-weight: 600; |
| } |
| |
| .severity-bar { |
| height: 8px; |
| border-radius: 4px; |
| background: #21262d; |
| overflow: hidden; |
| margin: 8px 0; |
| width: 100%; |
| } |
| |
| .severity-fill { |
| height: 100%; |
| border-radius: 4px; |
| transition: width 0.6s ease; |
| } |
| |
| .severity-low { background: linear-gradient(90deg, #238636, #3fb950); } |
| .severity-medium { background: linear-gradient(90deg, #9e6a03, #d29922); } |
| .severity-high { background: linear-gradient(90deg, #da3633, #f85149); } |
| |
| /* --- Stats cards --- */ |
| .stat-card { |
| background: #161b22; |
| border: 1px solid #30363d; |
| border-radius: 10px; |
| padding: 20px; |
| text-align: center; |
| } |
| |
| .stat-value { |
| font-size: 36px; |
| font-weight: 700; |
| color: #22c55e; |
| font-family: 'JetBrains Mono', monospace; |
| line-height: 1; |
| } |
| |
| .stat-label { |
| font-size: 11px; |
| color: #8b949e; |
| text-transform: uppercase; |
| letter-spacing: 1.5px; |
| margin-top: 8px; |
| } |
| |
| /* --- Empty state --- */ |
| .empty-state { |
| text-align: center; |
| padding: 60px 20px; |
| color: #484f58; |
| font-family: 'JetBrains Mono', monospace; |
| } |
| |
| .empty-state .icon { |
| font-size: 48px; |
| margin-bottom: 16px; |
| opacity: 0.5; |
| } |
| |
| .empty-state p { |
| font-size: 14px; |
| max-width: 400px; |
| margin: 0 auto; |
| line-height: 1.6; |
| } |
| |
| /* --- Custom scrollbar --- */ |
| ::-webkit-scrollbar { width: 6px; } |
| ::-webkit-scrollbar-track { background: #0d1117; } |
| ::-webkit-scrollbar-thumb { background: #30363d; border-radius: 3px; } |
| ::-webkit-scrollbar-thumb:hover { background: #484f58; } |
| |
| /* --- Button glow --- */ |
| button.primary { |
| box-shadow: 0 0 16px rgba(34, 197, 94, 0.15) !important; |
| transition: box-shadow 0.3s !important; |
| } |
| |
| button.primary:hover { |
| box-shadow: 0 0 24px rgba(34, 197, 94, 0.3) !important; |
| } |
| |
| /* --- Markdown in dark theme --- */ |
| .prose, .markdown-text { |
| color: #e6edf3 !important; |
| } |
| |
| .prose h2, .prose h3, .prose h4 { |
| color: #22c55e !important; |
| font-family: 'JetBrains Mono', monospace !important; |
| } |
| |
| .prose strong { color: #e6edf3 !important; } |
| .prose code { |
| background: #21262d !important; |
| color: #f0883e !important; |
| padding: 2px 6px !important; |
| border-radius: 4px !important; |
| } |
| |
| /* --- Loading animation --- */ |
| @keyframes pulse-green { |
| 0%, 100% { opacity: 1; } |
| 50% { opacity: 0.5; } |
| } |
| |
| .loading-pulse { |
| animation: pulse-green 1.5s ease-in-out infinite; |
| color: #22c55e; |
| font-family: 'JetBrains Mono', monospace; |
| } |
| """ |
|
|
