UI: GritAI engineered/industrial design system (dark, grit-orange, Archivo+IBM Plex)

app.py

@@ -9,6 +9,7 @@ All tools are keyless (Open-Meteo + MediaWiki), so the only secret is ANTHROPIC_
   python app.py            # http://127.0.0.1:7860
 
 Project #9 of the "30 Projects in 15 Days" challenge — GritAI.
+UI: GritAI engineered/industrial design system (dark, grit-orange, IBM Plex + Archivo).
 """
 import os, ast, json, math, operator, datetime, urllib.parse
 from flask import Flask, request, jsonify, Response
@@ -177,80 +178,131 @@ def api_ask():
     return jsonify(answer=answer, trace=trace)
 
 
+# ===================== GritAI engineered/industrial design system =====================
 PAGE = """<!doctype html><html lang="en"><head><meta charset="utf-8">
-<title>Tool-Using Agent</title>
+<title>GritAI · Tool-Using Agent</title>
 <meta name="viewport" content="width=device-width,initial-scale=1">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800;900&family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600&display=swap" rel="stylesheet">
 <style>
-:root{--primary:#4f46e5;--accent:#7c3aed;--ink:#171633;--bg:#f1f0fb;--card:#fff;--muted:#6b6a89;--line:#e5e3f5}
+:root{--bg:#0a0b0e;--bg2:#0e1015;--panel:#111318;--ink:#eef0f4;--dim:#9aa1b0;--dim2:#5f6675;--line:#20242e;--line2:#2b303c;
+ --grit:#ff5a2a;--grit2:#ff7d54;--grit-dim:#c9451f;
+ --disp:'Archivo',system-ui,sans-serif;--body:'IBM Plex Sans',system-ui,sans-serif;--mono:'IBM Plex Mono',ui-monospace,monospace}
 *{box-sizing:border-box}html,body{height:100%}
-body{margin:0;font-family:'Segoe UI',system-ui,-apple-system,sans-serif;color:var(--ink);
- background:radial-gradient(140% 90% at 50% 0%,#fff,var(--bg) 60%);display:flex;justify-content:center}
-.app{width:100%;max-width:820px;min-height:100dvh;display:flex;flex-direction:column;padding:0 16px}
-header{padding:26px 4px 12px;display:flex;align-items:center;gap:13px}
-.hic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;font-size:23px;flex:none;color:#fff;
- background:linear-gradient(135deg,var(--primary),var(--accent));box-shadow:0 10px 26px -10px rgba(79,70,229,.6)}
-header h1{margin:0;font-size:23px;font-weight:800;letter-spacing:-.4px}
-header p{margin:2px 0 0;color:var(--muted);font-size:13.5px}
-.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:0 6px 22px rgba(23,22,51,.05)}
-.inrow{display:flex;gap:10px}
-#q{flex:1;border:0;outline:none;font-size:15px;color:var(--ink);font-family:inherit;background:transparent;padding:4px}
-.go{border:0;border-radius:12px;padding:11px 22px;font-size:15px;font-weight:600;cursor:pointer;color:#fff;background:linear-gradient(135deg,var(--primary),var(--accent));transition:.15s}
-.go:hover{filter:brightness(1.08)}.go:disabled{opacity:.5;cursor:default}
+body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;position:relative;overflow-x:hidden}
+body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
+ background:linear-gradient(0deg,transparent 95%,rgba(255,90,42,.04) 100%),
+  repeating-linear-gradient(90deg,transparent 0 63px,rgba(255,255,255,.018) 63px 64px),
+  repeating-linear-gradient(0deg,transparent 0 63px,rgba(255,255,255,.018) 63px 64px),
+  radial-gradient(120% 80% at 50% -10%,#141821 0%,var(--bg) 55%)}
+body::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
+ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
+.wrap{position:relative;z-index:1;max-width:960px;margin:0 auto;padding:0 28px 70px}
+header{display:flex;align-items:center;gap:16px;padding:22px 0 18px;border-bottom:1px solid var(--line);animation:fade .6s .02s both}
+.mark{width:38px;height:38px;flex:none}.mark svg{display:block}
+.brand{display:flex;flex-direction:column;line-height:1}
+.brand .co{font-family:var(--disp);font-weight:900;font-size:19px;letter-spacing:.5px}.brand .co b{color:var(--grit)}
+.brand .sub{font-family:var(--mono);font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--dim2);margin-top:5px}
+.tags{margin-left:auto;display:flex;gap:8px}
+.tag{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);border:1px solid var(--line2);border-radius:2px;padding:5px 9px}
+.tag.hot{color:var(--grit);border-color:var(--grit-dim)}
+.hero{padding:34px 0 26px;animation:fade .6s .12s both}
+.hero h1{font-family:var(--disp);font-weight:800;font-size:clamp(30px,5.4vw,52px);line-height:1.02;letter-spacing:-.02em;margin:0;max-width:16ch}
+.hero h1 em{font-style:normal;color:var(--grit)}
+.hero p{color:var(--dim);max-width:56ch;margin:16px 0 0;font-size:15.5px}
+.sec{display:flex;align-items:center;gap:14px;margin:30px 0 14px}
+.sec .num{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--grit);letter-spacing:.1em}
+.sec .name{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--dim)}
+.sec .rule{flex:1;height:1px;background:linear-gradient(90deg,var(--line2),transparent)}
+.ask{animation:fade .6s .2s both}
+.field{display:flex;align-items:stretch;border:1px solid var(--line2);border-radius:3px;background:var(--panel);overflow:hidden;transition:border-color .18s}
+.field:focus-within{border-color:var(--grit-dim)}
+.field .car{font-family:var(--mono);color:var(--grit);padding:16px 0 16px 16px;font-size:15px;user-select:none}
+.field input{flex:1;background:transparent;border:0;outline:none;color:var(--ink);font-family:var(--body);font-size:15.5px;padding:16px 14px}
+.field input::placeholder{color:var(--dim2)}
+.run{border:0;background:var(--grit);color:#140a06;font-family:var(--mono);font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;padding:0 24px;cursor:pointer;transition:.16s;box-shadow:-1px 0 0 var(--grit-dim)}
+.run:hover{background:var(--grit2);box-shadow:0 0 26px -4px rgba(255,90,42,.55)}
+.run:disabled{opacity:.55;cursor:default;box-shadow:none}
 .ex{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
-.chip{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:7px 12px;font-size:12px;cursor:pointer;transition:.15s;color:var(--muted)}
-.chip:hover{border-color:var(--accent);color:var(--accent)}
-.out{margin:18px 0;display:none}.out.show{display:block}
-.trace{margin-bottom:14px}
-.step{display:flex;gap:10px;align-items:flex-start;font-size:13px;padding:9px 12px;border:1px solid var(--line);border-radius:11px;margin-bottom:8px;background:#faf9ff}
-.step .tn{font-weight:700;color:var(--primary);font-family:ui-monospace,monospace;font-size:12px;white-space:nowrap}
-.step .ta{color:var(--ink)}.step .tr{color:var(--muted);margin-top:3px}
-.answer{font-size:16px;line-height:1.6;white-space:pre-wrap}
-.lbl{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:600;margin:0 2px 8px}
-.spin{display:inline-flex;gap:6px;padding:14px 2px}.spin span{width:9px;height:9px;border-radius:50%;background:var(--accent);opacity:.5;animation:bd 1.2s infinite}
-.spin span:nth-child(2){animation-delay:.2s}.spin span:nth-child(3){animation-delay:.4s}
+.chip{font-family:var(--mono);font-size:12px;color:var(--dim);background:var(--panel);border:1px solid var(--line);border-radius:2px;padding:8px 11px;cursor:pointer;transition:.15s}
+.chip:hover{color:var(--grit);border-color:var(--grit-dim)}
+.chip .pt{color:var(--dim2);margin-right:7px}
+.out{display:none}.out.show{display:block}
+.trace{border:1px solid var(--line);border-radius:3px;background:linear-gradient(180deg,var(--panel),var(--bg2))}
+.log{font-family:var(--mono);font-size:13px;line-height:1.75}
+.row{display:grid;grid-template-columns:22px 100px 1fr;gap:0 12px;padding:13px 18px;border-bottom:1px solid var(--line);animation:slidein .45s both}
+.row:last-child{border-bottom:0}
+.row .mk{color:var(--grit);font-weight:600}
+.row .tn{color:var(--grit2);text-transform:uppercase;letter-spacing:.06em;font-weight:500}
+.row .rd{color:var(--ink);word-break:break-word}.row .rd .arg{color:var(--dim2)}
+.row.none .rd{color:var(--dim)}
+.ans{border:1px solid var(--line2);border-left:2px solid var(--grit);border-radius:3px;background:var(--panel);padding:22px 24px}
+.ans p{margin:0 0 12px;font-size:16px;line-height:1.65}.ans p:last-child{margin-bottom:0}
+.spin{display:inline-flex;gap:6px;padding:16px 18px}.spin span{width:8px;height:8px;border-radius:50%;background:var(--grit);opacity:.5;animation:bd 1.2s infinite}
+.spin span:nth-child(2){animation-delay:.18s}.spin span:nth-child(3){animation-delay:.36s}
+footer{margin-top:34px;padding-top:16px;border-top:1px solid var(--line);font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--dim2);display:flex;gap:16px;flex-wrap:wrap;animation:fade .6s .5s both}
+footer .b{color:var(--dim)}footer .sp{margin-left:auto}
+footer a{color:var(--dim);text-decoration:none}footer a:hover{color:var(--grit)}
+@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
+@keyframes slidein{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
 @keyframes bd{0%,60%,100%{transform:translateY(0);opacity:.35}30%{transform:translateY(-6px);opacity:1}}
-.foot{text-align:center;font-size:10.5px;color:var(--muted);padding:16px 0 22px}.foot b{color:#4a487a}
 </style></head>
-<body><div class="app">
-<header><div class="hic">🛠️</div><div><h1>Tool-Using Agent</h1>
- <p>Ask anything — it calls live tools (calculator, weather, Wikipedia, clock) and shows its work.</p></div></header>
-<div class="card">
- <div class="inrow">
-  <input id="q" placeholder="e.g. What's a 15% tip on $47.80, and the weather in Paris?" autofocus>
-  <button class="go" id="go" onclick="ask()">Ask →</button>
+<body><div class="wrap">
+<header>
+ <div class="mark"><svg width="38" height="38" viewBox="0 0 38 38" fill="none">
+  <rect x="1" y="1" width="36" height="36" rx="2" stroke="#2b303c"/>
+  <path d="M27 12.5A9 9 0 1 0 28 22H19" stroke="#ff5a2a" stroke-width="2.4" stroke-linecap="square"/>
+  <rect x="10.5" y="10.5" width="3" height="3" fill="#ff5a2a"/>
+ </svg></div>
+ <div class="brand"><div class="co">GRIT<b>AI</b></div><div class="sub">Tool-Using Agent</div></div>
+ <div class="tags"><span class="tag hot">▸ Live</span><span class="tag">SDVOSB</span><span class="tag">Lawton OK</span></div>
+</header>
+<section class="hero">
+ <h1>Ask it anything. It <em>calls real tools</em> to answer.</h1>
+ <p>A calculator, a clock, live weather, and Wikipedia — the agent decides what to call, runs it, and shows its work. Not a chatbot guessing. An operator.</p>
+</section>
+<div class="sec"><span class="num">01</span><span class="name">Ask</span><span class="rule"></span></div>
+<div class="ask">
+ <div class="field">
+  <span class="car">&gt;_</span>
+  <input id="q" placeholder="What's a 15% tip on $47.80, and the current weather in Paris?" autofocus>
+  <button class="run" id="go" onclick="ask()">Run ▸</button>
  </div>
  <div class="ex" id="ex"></div>
 </div>
 <div class="out" id="out">
- <div class="trace" id="trace"></div>
- <div class="lbl">Answer</div>
- <div class="card"><div class="answer" id="answer"></div></div>
+ <div class="sec"><span class="num">02</span><span class="name">Trace — live tool calls</span><span class="rule"></span></div>
+ <div class="trace"><div class="log" id="trace"></div></div>
+ <div class="sec"><span class="num">03</span><span class="name">Answer</span><span class="rule"></span></div>
+ <div class="ans" id="answer"></div>
 </div>
-<div class="foot">ReAct loop · live keyless tools (Open-Meteo + Wikipedia) · <b>GritAI</b></div>
+<footer>
+ <span class="b">ReAct loop</span><span>·</span><span>keyless tools — Open-Meteo + Wikipedia</span>
+ <span class="sp"><a href="https://gritai.solutions">GRITAI SOLUTIONS</a> · 30-in-15 №9</span>
+</footer>
 </div><script>
-const EXAMPLES=["What's a 15% tip on $47.80, and what's the weather in Paris?",
- "Who invented the World Wide Web, and how many days ago was Jan 1 2000?",
- "What's the square root of 20736, and what's the weather in Tokyo?",
- "Summarize what an octopus is, then tell me the current UTC time."];
-const TICON={calculator:'🧮',current_datetime:'🕐',weather:'🌦️',wikipedia:'📚'};
+const EXAMPLES=["Who invented the World Wide Web, and what's the square root of 4096?",
+ "What's the weather in Tokyo, and the current UTC time?",
+ "Summarize what an octopus is, then give me a 12% tip on $86."];
 const $=id=>document.getElementById(id);
 const q=$('q'),go=$('go'),out=$('out');
 function esc(s){return String(s==null?'':s).replace(/[&<>]/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;'}[c]));}
-$('ex').innerHTML=EXAMPLES.map(e=>'<span class="chip">'+esc(e)+'</span>').join('');
-$('ex').querySelectorAll('.chip').forEach(c=>c.onclick=()=>{q.value=c.textContent;ask();});
+$('ex').innerHTML=EXAMPLES.map(e=>'<span class="chip"><span class="pt">↳</span>'+esc(e)+'</span>').join('');
+$('ex').querySelectorAll('.chip').forEach(c=>c.onclick=()=>{q.value=c.textContent.replace(/^↳\s*/,'');ask();});
+function argStr(o){try{return Object.values(o).join(', ');}catch(e){return '';}}
 function ask(){if(go.disabled)return;const text=q.value.trim();if(!text){q.focus();return;}
- go.disabled=true;go.textContent='Thinking…';out.classList.add('show');
- $('trace').innerHTML='<span class="spin"><span></span><span></span><span></span></span>';$('answer').textContent='';
+ go.disabled=true;go.textContent='…';out.classList.add('show');
+ $('trace').innerHTML='<div class="spin"><span></span><span></span><span></span></div>';$('answer').innerHTML='';
  fetch('/api/ask',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({question:text})})
  .then(r=>r.json()).then(d=>{
-  if(d.error){$('trace').innerHTML='';$('answer').textContent=d.error;return;}
-  $('trace').innerHTML=(d.trace||[]).map(s=>{const ic=TICON[s.tool]||'🔧';
-    return '<div class="step"><div class="tn">'+ic+' '+esc(s.tool)+'</div><div><div class="ta">'+
-      esc(JSON.stringify(s.input))+'</div><div class="tr">→ '+esc(s.result)+'</div></div></div>';}).join('')||
-    '<div class="step"><div class="tr">(answered directly, no tools needed)</div></div>';
-  $('answer').textContent=d.answer;
- }).catch(()=>{$('trace').innerHTML='';$('answer').textContent='Something went wrong — please try again.';})
- .finally(()=>{go.disabled=false;go.textContent='Ask →';});
+  if(d.error){$('trace').innerHTML='<div class="row none"><span class="mk">!</span><span class="tn">error</span><span class="rd">'+esc(d.error)+'</span></div>';return;}
+  const t=d.trace||[];
+  $('trace').innerHTML=t.length?t.map(s=>'<div class="row"><span class="mk">»</span><span class="tn">'+esc(s.tool)+'</span><span class="rd"><span class="arg">'+esc(argStr(s.input))+'</span> → '+esc(s.result)+'</span></div>').join(''):
+    '<div class="row none"><span class="mk">·</span><span class="tn">direct</span><span class="rd">answered directly — no tools needed</span></div>';
+  $('answer').innerHTML=String(d.answer||'').split(/\\n\\n+/).map(p=>'<p>'+esc(p).replace(/\\n/g,'<br>')+'</p>').join('');
+ }).catch(()=>{$('trace').innerHTML='<div class="row none"><span class="mk">!</span><span class="tn">error</span><span class="rd">Something went wrong — please try again.</span></div>';})
+ .finally(()=>{go.disabled=false;go.textContent='Run ▸';});
 }
 q.addEventListener('keydown',e=>{if(e.key==='Enter')ask();});
 </script></body></html>"""