CLI-style terminal UI: dark theme, monospace font, green-on-black aesthetic

app.py

@@ -74,85 +74,128 @@ def respond(message: str, history: list[dict]) -> str:
 
 
 CSS = """
+@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap');
+
 .gradio-container {
     max-width: 900px !important;
     margin: auto !important;
-    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%) !important;
+    background: #0d1117 !important;
+    font-family: 'JetBrains Mono', monospace !important;
     min-height: 100vh;
 }
 footer { display: none !important; }
-.header-card {
-    background: linear-gradient(145deg, #e94560, #533483);
-    border-radius: 20px;
-    padding: 30px;
+
+.terminal-header {
+    background: #161b22;
+    border: 1px solid #30363d;
+    border-radius: 8px;
+    padding: 0;
     margin-bottom: 20px;
-    box-shadow: 0 10px 40px rgba(233, 69, 96, 0.3);
-    text-align: center;
-    color: white;
+    overflow: hidden;
+    box-shadow: 0 8px 32px rgba(0, 255, 65, 0.1);
 }
-.header-card h1 {
-    font-size: 2.8em;
-    margin: 0;
-    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
+.terminal-bar {
+    background: #21262d;
+    padding: 8px 14px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    border-bottom: 1px solid #30363d;
 }
-.header-card .subtitle {
-    font-size: 1.2em;
-    opacity: 0.9;
-    margin-top: 8px;
+.terminal-dot {
+    width: 12px; height: 12px; border-radius: 50%;
 }
-.header-card .badges {
-    margin-top: 15px;
+.dot-red { background: #ff5f56; }
+.dot-yellow { background: #ffbd2e; }
+.dot-green { background: #27c93f; }
+.terminal-title {
+    color: #8b949e;
+    font-size: 0.8em;
+    margin-left: 10px;
+    font-family: 'JetBrains Mono', monospace;
+}
+.terminal-body {
+    padding: 20px 24px;
+    color: #c9d1d9;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 0.9em;
+    line-height: 1.8;
+}
+.terminal-body .prompt { color: #27c93f; }
+.terminal-body .cmd { color: #f0f6fc; font-weight: 700; }
+.terminal-body .output { color: #8b949e; }
+.terminal-body .highlight { color: #ff7b72; }
+.terminal-body .cyan { color: #79c0ff; }
+.terminal-body .yellow { color: #e3b341; }
+
+.stats-row {
     display: flex;
-    justify-content: center;
-    gap: 10px;
+    gap: 12px;
+    margin-top: 16px;
     flex-wrap: wrap;
 }
-.header-card .badge {
-    background: rgba(255,255,255,0.2);
-    backdrop-filter: blur(5px);
-    border: 1px solid rgba(255,255,255,0.3);
-    border-radius: 20px;
-    padding: 5px 14px;
-    font-size: 0.85em;
-    font-weight: 500;
+.stat-chip {
+    background: #21262d;
+    border: 1px solid #30363d;
+    border-radius: 6px;
+    padding: 6px 12px;
+    font-size: 0.8em;
+    color: #c9d1d9;
+    font-family: 'JetBrains Mono', monospace;
 }
+.stat-chip .val { color: #27c93f; font-weight: 700; }
+
 .footer-bar {
     text-align: center;
-    padding: 18px;
+    padding: 14px;
     margin-top: 15px;
-    background: rgba(255,255,255,0.05);
-    border-radius: 12px;
-    border: 1px solid rgba(255,255,255,0.1);
-    color: #aaa;
-    font-size: 0.85em;
+    background: #161b22;
+    border: 1px solid #30363d;
+    border-radius: 8px;
+    color: #8b949e;
+    font-size: 0.8em;
+    font-family: 'JetBrains Mono', monospace;
 }
-.footer-bar a { color: #e94560; text-decoration: none; }
+.footer-bar a { color: #27c93f; text-decoration: none; }
 .footer-bar a:hover { text-decoration: underline; }
 """
 
 HEADER = """
-<div class="header-card">
-    <h1>🔧 Tech Advisor</h1>
-    <div class="subtitle">Your AI expert on <strong>AWS DevOps Agent</strong></div>
-    <div class="badges">
-        <span class="badge">🧠 Nemotron 4B</span>
-        <span class="badge">🔌 Off the Grid</span>
-        <span class="badge">📚 66 docs ingested</span>
-        <span class="badge">⚡ Fine-tuned with QLoRA</span>
+<div class="terminal-header">
+    <div class="terminal-bar">
+        <span class="terminal-dot dot-red"></span>
+        <span class="terminal-dot dot-yellow"></span>
+        <span class="terminal-dot dot-green"></span>
+        <span class="terminal-title">local-tech-advisor v1.0 — bash</span>
+    </div>
+    <div class="terminal-body">
+        <span class="prompt">$</span> <span class="cmd">./local-tech-advisor --start</span><br>
+        <span class="output">[INFO] Loading model: <span class="cyan">nemotron-nano-4b</span> (fine-tuned)</span><br>
+        <span class="output">[INFO] Training cost: <span class="highlight">$2.03</span> | Training time: <span class="highlight">35 min</span></span><br>
+        <span class="output">[INFO] API calls needed: <span class="yellow">none. ever.</span></span><br>
+        <span class="output">[INFO] Status: <span class="cyan">ready</span> — ask me anything about AWS DevOps Agent</span><br>
+        <span class="prompt">$</span> <span class="cmd blink">_</span>
+        <div class="stats-row">
+            <span class="stat-chip"><span class="val">4B</span> params</span>
+            <span class="stat-chip"><span class="val">66</span> docs</span>
+            <span class="stat-chip"><span class="val">1,230</span> Q&A pairs</span>
+            <span class="stat-chip"><span class="val">$0</span> per query</span>
+            <span class="stat-chip"><span class="val">0</span> APIs called</span>
+        </div>
     </div>
 </div>
 """
 
 FOOTER = """
 <div class="footer-bar">
-    🏗️ Built for the <strong>Build Small Hackathon</strong> |
-    Model: <a href="https://huggingface.co/aslanconfig/tech-advisor-nemotron-4b" target="_blank">aslanconfig/tech-advisor-nemotron-4b</a> |
-    1,230 Q&A pairs from official AWS docs
+    <span class="prompt">$</span> echo "Built for Build Small Hackathon" |
+    model: <a href="https://huggingface.co/aslanconfig/tech-advisor-nemotron-4b" target="_blank">aslanconfig/tech-advisor-nemotron-4b</a> |
+    sponsor: nvidia | track: backyard
 </div>
 """
 
 # --- Gradio UI ---
-with gr.Blocks(css=CSS, title="Tech Advisor") as demo:
+with gr.Blocks(css=CSS, title="Local Tech Advisor") as demo:
     gr.HTML(HEADER)
 
     gr.ChatInterface(