|
|
| """Feedback Analyzer — paste or upload customer feedback in bulk and get, per item:
|
| sentiment + intent + confidence + a reason + the evidence phrase — plus a rollup
|
| (sentiment/intent mix + top themes) and a downloadable labeled CSV.
|
|
|
| Reliability: ONE Claude call with forced tool-use returns the whole batch as
|
| schema-valid JSON (Ollama fallback uses constrained JSON decoding).
|
|
|
| pip install flask requests anthropic
|
| python app.py # http://127.0.0.1:8500
|
|
|
| Project #5 of the "30 Projects in 15 Days" challenge — GritAI.
|
| """
|
| import os, io, csv, json
|
| from flask import Flask, request, jsonify, Response
|
|
|
| PORT = int(os.environ.get("PORT", "8500"))
|
| ANTHROPIC_KEY = os.environ.get("ANTHROPIC_API_KEY")
|
| ANTHROPIC_MODEL = os.environ.get("ANTHROPIC_MODEL", "claude-sonnet-5")
|
| OLLAMA_URL = os.environ.get("OLLAMA_URL", "http://127.0.0.1:11434")
|
| OLLAMA_MODEL = os.environ.get("OLLAMA_MODEL", "qwen2.5:7b")
|
|
|
| PRESET_INTENTS = ["praise", "complaint", "question", "suggestion", "other"]
|
| MAX_ROWS = 40
|
| TEXT_COLS = ("text", "review", "comment", "feedback", "message", "body", "content", "response")
|
|
|
| def analysis_schema(labels):
|
| intents = labels + ["other"] if labels else PRESET_INTENTS
|
| item = {"type": "object", "properties": {
|
| "index": {"type": "integer"},
|
| "sentiment": {"type": "string", "enum": ["positive", "negative", "neutral", "mixed"]},
|
| "intent": {"type": "string", "enum": intents},
|
| "confidence": {"type": "number"},
|
| "reason": {"type": "string"},
|
| "evidence": {"type": "string"}},
|
| "required": ["index", "sentiment", "intent", "confidence", "reason", "evidence"]}
|
| return {"type": "object", "properties": {
|
| "results": {"type": "array", "items": item},
|
| "themes": {"type": "array", "items": {"type": "string"}}},
|
| "required": ["results", "themes"]}
|
|
|
| def analyze_batch(rows, labels):
|
| schema = analysis_schema(labels)
|
| numbered = "\n".join(f"[{i}] {t[:400]}" for i, t in enumerate(rows))
|
| sysp = ("You analyze customer feedback. For EACH numbered item return: sentiment (overall tone), "
|
| "intent (its primary purpose), confidence (0-1, how sure you are), reason (one short sentence), "
|
| "and evidence (the exact phrase from THAT item that supports your call). "
|
| "Also return 'themes': the 3-6 most common themes across all items, short noun phrases, most frequent first. "
|
| "Base everything only on the text; never invent details.")
|
| user = "Feedback items:\n" + numbered
|
| if ANTHROPIC_KEY:
|
| import anthropic
|
| client = anthropic.Anthropic(api_key=ANTHROPIC_KEY)
|
| r = client.messages.create(model=ANTHROPIC_MODEL, max_tokens=4096, system=sysp,
|
| tools=[{"name": "report", "description": "Return the analysis.", "input_schema": schema}],
|
| tool_choice={"type": "tool", "name": "report"},
|
| messages=[{"role": "user", "content": user}])
|
| for b in r.content:
|
| if b.type == "tool_use":
|
| return b.input
|
| return {"results": [], "themes": []}
|
| import requests
|
| r = requests.post(f"{OLLAMA_URL}/api/chat", timeout=180, json={
|
| "model": OLLAMA_MODEL, "stream": False, "format": schema,
|
| "messages": [{"role": "system", "content": sysp}, {"role": "user", "content": user}],
|
| "options": {"temperature": 0}})
|
| r.raise_for_status()
|
| return json.loads(r.json()["message"]["content"])
|
|
|
| def parse_rows(raw, is_csv):
|
| if is_csv:
|
| rows = list(csv.reader(io.StringIO(raw)))
|
| if not rows:
|
| return []
|
| low = [c.strip().lower() for c in rows[0]]
|
| idx = next((i for i, h in enumerate(low) if h in TEXT_COLS), 0)
|
| start = 1 if low[idx] in TEXT_COLS else 0
|
| return [r[idx].strip() for r in rows[start:] if len(r) > idx and r[idx].strip()]
|
|
|
|
|
| return [l.strip() for l in raw.splitlines() if l.strip()]
|
|
|
| app = Flask(__name__)
|
| app.config["MAX_CONTENT_LENGTH"] = 5 * 1024 * 1024
|
|
|
| @app.route("/")
|
| def home():
|
| return Response(PAGE, mimetype="text/html")
|
|
|
| @app.route("/api/analyze", methods=["POST"])
|
| def api_analyze():
|
| b = request.get_json(force=True)
|
| raw = (b.get("input") or "").strip()
|
| is_csv = bool(b.get("is_csv"))
|
| labels = [l.strip() for l in (b.get("labels") or "").split(",") if l.strip()]
|
| rows = parse_rows(raw, is_csv)
|
| if not rows:
|
| return jsonify(error="No rows found. Paste one item per line, or upload a CSV with a text column."), 400
|
| capped = rows[:MAX_ROWS]
|
| try:
|
| out = analyze_batch(capped, labels)
|
| except Exception as e:
|
| import sys; print("analyze error:", type(e).__name__, file=sys.stderr, flush=True)
|
| return jsonify(error="Analysis failed — please try again."), 200
|
|
|
| by_idx = {r.get("index", i): r for i, r in enumerate(out.get("results", []))}
|
| results, sent, intent = [], {}, {}
|
| for i, t in enumerate(capped):
|
| r = dict(by_idx.get(i, {"sentiment": "neutral", "intent": "other", "confidence": 0,
|
| "reason": "", "evidence": ""}))
|
| r["text"] = t
|
| results.append(r)
|
| sent[r.get("sentiment", "neutral")] = sent.get(r.get("sentiment", "neutral"), 0) + 1
|
| intent[r.get("intent", "other")] = intent.get(r.get("intent", "other"), 0) + 1
|
| return jsonify(results=results, themes=out.get("themes", []),
|
| sentiment=sent, intent=intent, total=len(capped),
|
| truncated=len(rows) > MAX_ROWS, original=len(rows))
|
|
|
| PAGE = """<!doctype html><html lang="en"><head><meta charset="utf-8">
|
| <title>Feedback Analyzer</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>
|
| /* ============================================================================
|
| GRITAI DESIGN SYSTEM — "Engineered / Industrial"
|
| Dark · grit-orange · Archivo + IBM Plex · blueprint grid + grain.
|
| Canonical source of truth for every GritAI app (30-in-15 #1-30) + the hub.
|
| Rob-approved 2026-09-05 (#9 pilot: design-critic 5.71 -> 7.57).
|
|
|
| HOW TO USE: embed this <style> verbatim in an app's page, add the Google Fonts
|
| <link> below, then build the body from the component classes here. Keep the
|
| header (monogram + app name + tags), grit-orange as the ONLY accent, dark bg.
|
|
|
| FONTS (add to <head>):
|
| <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">
|
| ============================================================================ */
|
| :root{
|
| --bg:#0a0b0e; --bg2:#0e1015; --panel:#111318; --panel2:#15181f;
|
| --ink:#eef0f4; --dim:#9aa1b0; --dim2:#5f6675; --line:#20242e; --line2:#2b303c;
|
| --grit:#ff5a2a; --grit2:#ff7d54; --grit-dim:#c9451f; --ok:#5fd08a; --bad:#ff6b6b;
|
| --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;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}
|
| /* blueprint grid + vignette */
|
| 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%)}
|
| /* film grain */
|
| 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 band (monogram SVG + wordmark + tags) ---- */
|
| 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)}
|
| /* canonical monogram SVG (paste in .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> */
|
|
|
| /* ---- hero ---- */
|
| .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}
|
|
|
| /* ---- section label (01 · NAME + rule) ---- */
|
| .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)}
|
|
|
| /* ---- panels ---- */
|
| .panel{border:1px solid var(--line);border-radius:3px;background:linear-gradient(180deg,var(--panel),var(--bg2))}
|
| .card{border:1px solid var(--line2);border-radius:3px;background:var(--panel);padding:18px 20px}
|
| .card.accent{border-left:2px solid var(--grit)}
|
|
|
| /* ---- input field (terminal) ---- */
|
| .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,.field textarea{flex:1;background:transparent;border:0;outline:none;color:var(--ink);font-family:var(--body);font-size:15.5px;padding:16px 14px;resize:vertical}
|
| .field input::placeholder,.field textarea::placeholder{color:var(--dim2)}
|
| textarea.ta{width:100%;min-height:140px;border:1px solid var(--line2);border-radius:3px;background:var(--panel);color:var(--ink);font-family:var(--body);font-size:15px;padding:14px 16px;outline:none;resize:vertical}
|
| textarea.ta:focus{border-color:var(--grit-dim)}
|
|
|
| /* ---- buttons ---- */
|
| .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}
|
| .btn{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:3px;background:var(--grit);color:#140a06;font-family:var(--mono);font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;padding:12px 22px;cursor:pointer;transition:.16s}
|
| .btn:hover{background:var(--grit2);box-shadow:0 0 26px -4px rgba(255,90,42,.55)}
|
| .btn.ghost{background:transparent;color:var(--dim);border:1px solid var(--line2)}
|
| .btn.ghost:hover{color:var(--grit);border-color:var(--grit-dim);background:transparent;box-shadow:none}
|
|
|
| /* ---- chips / controls ---- */
|
| .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}
|
| select,.select{padding:10px 12px;border:1px solid var(--line2);border-radius:3px;background:var(--panel);color:var(--ink);font-family:var(--mono);font-size:13px;outline:none;cursor:pointer}
|
| select:focus{border-color:var(--grit-dim)}
|
| label.lbl{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.24em;color:var(--dim2);display:block;margin-bottom:6px}
|
|
|
| /* ---- mono log / trace rows ---- */
|
| .log{font-family:var(--mono);font-size:13px;line-height:1.75}
|
| .row{display:grid;grid-template-columns:22px auto 1fr;gap:0 12px;padding:13px 18px;border-bottom:1px solid var(--line)}
|
| .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)}
|
|
|
| /* ---- tables ---- */
|
| table{width:100%;border-collapse:collapse;font-size:13.5px}
|
| th{text-align:left;font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--dim2);font-weight:500;padding:11px 14px;border-bottom:1px solid var(--line2);background:var(--bg2)}
|
| td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top}
|
| tr:last-child td{border-bottom:0}
|
| .tablewrap{border:1px solid var(--line);border-radius:3px;overflow:hidden;overflow-x:auto}
|
|
|
| /* ---- chat bubbles ---- */
|
| .msg{max-width:78%;padding:12px 15px;border-radius:3px;font-size:15px;line-height:1.55;margin-bottom:12px}
|
| .msg.user{margin-left:auto;background:var(--panel2);border:1px solid var(--line2)}
|
| .msg.bot{background:var(--panel);border:1px solid var(--line);border-left:2px solid var(--grit)}
|
|
|
| /* ---- badges / pills ---- */
|
| .badge{display:inline-block;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.06em;padding:3px 9px;border-radius:2px;border:1px solid var(--line2);color:var(--dim)}
|
| .badge.on{color:var(--grit);border-color:var(--grit-dim)}
|
| .hl{color:var(--grit);font-weight:600;font-family:var(--mono)}
|
|
|
| /* ---- answer/output prose ---- */
|
| .prose{font-size:16px;line-height:1.65}.prose p{margin:0 0 12px}.prose p:last-child{margin-bottom:0}.prose b{color:var(--ink)}
|
|
|
| /* ---- spinner ---- */
|
| .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 ---- */
|
| 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)}
|
|
|
| /* ---- reveal animations ---- */
|
| @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}}
|
| .rvl{animation:fade .6s both}
|
|
|
| /* ---- app-specific: feedback analyzer ---- */
|
| .tools{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:14px}
|
| #go{padding-top:14px;padding-bottom:14px;border-radius:3px}
|
| .field.labelfield{flex:1;min-width:220px}
|
| .out{display:none;margin-top:8px}.out.show{display:block}
|
| .note{font-family:var(--mono);font-size:12px;color:var(--grit2);letter-spacing:.03em;margin:8px 2px 16px}
|
| .roll{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:8px}
|
| @media(max-width:640px){.roll{grid-template-columns:1fr}}
|
| .roll h3{margin:0 0 12px;font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--dim2)}
|
| .bar{display:flex;height:12px;border-radius:2px;overflow:hidden;margin-bottom:12px;background:var(--panel2);border:1px solid var(--line)}
|
| .bar i{display:block;height:100%}
|
| .legend{display:flex;flex-wrap:wrap;gap:12px;font-family:var(--mono);font-size:12px;color:var(--dim)}
|
| .legend span{display:inline-flex;align-items:center;gap:6px}
|
| .dot{width:9px;height:9px;border-radius:2px;display:inline-block}
|
| .themes{margin:0;padding:0;list-style:none}
|
| .themes li{font-family:var(--mono);font-size:13px;color:var(--ink);padding:6px 0 6px 18px;position:relative}
|
| .themes li::before{content:"\\25B8";color:var(--grit);position:absolute;left:0}
|
| .actions{display:flex;justify-content:space-between;align-items:center;gap:14px;margin:6px 2px 14px}
|
| .actions h2{margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--dim2)}
|
| table{min-width:680px}
|
| td.txt{max-width:300px;color:var(--ink)}
|
| .badge.b-positive{color:var(--ok);border-color:rgba(95,208,138,.45)}
|
| .badge.b-negative{color:var(--bad);border-color:rgba(255,107,107,.45)}
|
| .badge.b-neutral{color:var(--dim);border-color:var(--line2)}
|
| .badge.b-mixed{color:var(--grit);border-color:var(--grit-dim)}
|
| .intent{font-family:var(--mono);font-size:12.5px;color:var(--dim);text-transform:capitalize}
|
| .conf{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--dim);font-size:12.5px}
|
| .bar2{height:5px;background:var(--line);border-radius:2px;margin-top:5px;overflow:hidden}
|
| .bar2 i{display:block;height:100%;background:var(--grit)}
|
| .reason{color:var(--ink)}
|
| .ev{color:var(--dim);font-style:italic}
|
| </style></head>
|
| <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"><span class="co">GRIT<b>AI</b></span><span class="sub">Feedback Analyzer</span></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>Every review, scored for <em>sentiment & intent</em></h1>
|
| <p>Paste or upload customer feedback in bulk — get per-item sentiment, intent, confidence, a reason, and the exact evidence phrase, plus a rollup and a downloadable labeled CSV.</p>
|
| </section>
|
| <div class="sec"><span class="num">01</span><span class="name">Feedback</span><span class="rule"></span></div>
|
| <textarea id="src" class="ta" placeholder="Paste feedback — one item per line, or full reviews separated by a blank line. Or upload a CSV."></textarea>
|
| <div class="tools">
|
| <label class="btn ghost" for="csv">Upload CSV<input type="file" id="csv" accept=".csv,text/csv" style="display:none"></label>
|
| <span class="chip" onclick="loadSample()">Load sample</span>
|
| <div class="field labelfield"><span class="car">›</span><input id="labels" placeholder="Custom intent labels (optional, comma-separated)"></div>
|
| <button class="run" id="go" onclick="run()">Analyze</button>
|
| </div>
|
| <div class="out" id="out">
|
| <div id="note"></div>
|
| <div class="sec"><span class="num">02</span><span class="name">Rollup</span><span class="rule"></span></div>
|
| <div class="roll">
|
| <div class="card"><h3>Sentiment</h3><div class="bar" id="sbar"></div><div class="legend" id="sleg"></div></div>
|
| <div class="card"><h3>Top themes</h3><ul class="themes" id="themes"></ul></div>
|
| </div>
|
| <div class="sec"><span class="num">03</span><span class="name">Per-item results</span><span class="rule"></span></div>
|
| <div class="actions"><h2>Labeled feedback</h2><button class="btn ghost" id="dl" onclick="download()">Download CSV</button></div>
|
| <div class="tablewrap"><table id="tbl"><thead><tr>
|
| <th>Feedback</th><th>Sentiment</th><th>Intent</th><th>Conf.</th><th>Reason</th><th>Evidence</th>
|
| </tr></thead><tbody id="tbody"></tbody></table></div>
|
| </div>
|
| <footer>
|
| <span class="b">One batched, schema-valid AI call</span>
|
| <span>Counts computed in code</span>
|
| <span class="sp">GRITAI SOLUTIONS · 30-in-15 №5</span>
|
| </footer>
|
| </div><script>
|
| const SAMPLE=["The barista remembered my order — made my whole morning!",
|
| "App keeps crashing every time I try to check out. Fix this.",
|
| "Do you ship to Canada? Couldn't find it anywhere on the site.",
|
| "Coffee was fine but the wait was 25 minutes. Way too long.",
|
| "Absolutely love the new oat milk options, thank you!!",
|
| "You should add a loyalty program, would keep me coming back.",
|
| "Order arrived broken and no one has responded to my emails.",
|
| "Great product, terrible packaging. Two stars.",
|
| "Is the sale price going to come back? Missed it by a day.",
|
| "Staff was rude and dismissive when I asked for help.",
|
| "Best customer service I've had in years, genuinely impressed.",
|
| "Website is confusing, took me forever to find the return policy."];
|
| const $=id=>document.getElementById(id);
|
| const src=$('src'),go=$('go'),out=$('out'),csv=$('csv'),labels=$('labels');
|
| let isCsv=false,last=null;
|
| const SC={positive:'var(--ok)',negative:'var(--bad)',neutral:'var(--dim)',mixed:'var(--grit)'};
|
| function esc(s){return String(s==null?'':s).replace(/[&<>]/g,c=>({'&':'&','<':'<','>':'>'}[c]));}
|
| function loadSample(){src.value=SAMPLE.join("\\n");isCsv=false;run();}
|
| csv.onchange=e=>{const f=e.target.files[0];if(!f)return;const r=new FileReader();
|
| r.onload=()=>{src.value=r.result;isCsv=true;run();};r.readAsText(f);};
|
| src.addEventListener('input',()=>{isCsv=false;});
|
| function run(){if(go.disabled)return;const text=src.value.trim();if(!text){src.focus();return;}
|
| go.disabled=true;go.textContent='Analyzing…';out.classList.add('show');
|
| $('note').innerHTML='';$('tbody').innerHTML='';$('themes').innerHTML='';$('sbar').innerHTML='';$('sleg').innerHTML='';
|
| $('tbody').innerHTML='<tr><td colspan="6"><span class="spin"><span></span><span></span><span></span></span></td></tr>';
|
| fetch('/api/analyze',{method:'POST',headers:{'Content-Type':'application/json'},
|
| body:JSON.stringify({input:text,is_csv:isCsv,labels:labels.value})})
|
| .then(r=>r.json()).then(d=>{
|
| if(d.error){$('tbody').innerHTML='<tr><td colspan="6">'+esc(d.error)+'</td></tr>';return;}
|
| last=d;render(d);
|
| }).catch(()=>{$('tbody').innerHTML='<tr><td colspan="6">Something went wrong — please try again.</td></tr>';})
|
| .finally(()=>{go.disabled=false;go.textContent='Analyze';});
|
| }
|
| function render(d){
|
| if(d.truncated)$('note').innerHTML='<div class="note">Showing the first '+d.total+' of '+d.original+' rows (per-run cap).</div>';
|
| // sentiment bar
|
| const order=['positive','neutral','mixed','negative'];const total=d.total||1;
|
| $('sbar').innerHTML=order.filter(s=>d.sentiment[s]).map(s=>'<i style="width:'+(100*d.sentiment[s]/total)+'%;background:'+SC[s]+'"></i>').join('');
|
| $('sleg').innerHTML=order.filter(s=>d.sentiment[s]).map(s=>'<span><span class="dot" style="background:'+SC[s]+'"></span>'+s+' '+d.sentiment[s]+'</span>').join('');
|
| $('themes').innerHTML=(d.themes||[]).map(t=>'<li>'+esc(t)+'</li>').join('')||'<li style="color:var(--dim)">—</li>';
|
| $('tbody').innerHTML=d.results.map(r=>{const c=Math.round((r.confidence||0)*100);
|
| return '<tr><td class="txt">'+esc(r.text)+'</td>'+
|
| '<td><span class="badge b-'+esc(r.sentiment)+'">'+esc(r.sentiment)+'</span></td>'+
|
| '<td class="intent">'+esc(r.intent)+'</td>'+
|
| '<td class="conf">'+c+'%<div class="bar2"><i style="width:'+c+'%"></i></div></td>'+
|
| '<td class="reason">'+esc(r.reason)+'</td>'+
|
| '<td class="ev">'+(r.evidence?'“'+esc(r.evidence)+'”':'')+'</td></tr>';}).join('');
|
| }
|
| function download(){if(!last)return;const cols=['text','sentiment','intent','confidence','reason','evidence'];
|
| const q=s=>'"'+String(s==null?'':s).replace(/"/g,'""')+'"';
|
| const rows=[cols.join(',')].concat(last.results.map(r=>cols.map(c=>q(r[c])).join(',')));
|
| const blob=new Blob([rows.join("\\n")],{type:'text/csv'});const a=document.createElement('a');
|
| a.href=URL.createObjectURL(blob);a.download='feedback_analyzed.csv';a.click();}
|
| </script></body></html>"""
|
|
|
| if __name__ == "__main__":
|
| backend = "Claude API" if ANTHROPIC_KEY else f"Ollama ({OLLAMA_MODEL} @ {OLLAMA_URL})"
|
| print(f"Feedback Analyzer on http://127.0.0.1:{PORT} [backend: {backend}]", flush=True)
|
| app.run(host="0.0.0.0", port=PORT, threaded=True)
|
|
|
