File size: 23,422 Bytes
132c782
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
f437b1a
132c782
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
#!/usr/bin/env python
"""Structured Data Extractor — paste messy text (an email, receipt, job post…) and get

clean, schema-valid JSON. Uses Claude's forced tool-use so the output always matches the

schema (Ollama fallback uses constrained JSON decoding).



  pip install flask requests anthropic

  python app.py            # http://127.0.0.1:8500



Project #4 of the "30 Projects in 15 Days" challenge — GritAI.

"""
import os, json
from flask import Flask, request, Response, jsonify

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")

S = lambda: {"type": ["string", "null"]}
N = lambda: {"type": ["number", "null"]}

SCHEMAS = {
    "contact": {"label": "Contact", "emoji": "👤", "schema": {"type": "object", "properties": {
        "name": S(), "title": S(), "company": S(), "email": S(), "phone": S(),
        "website": S(), "address": S()}, "required": ["name"]}},
    "invoice": {"label": "Invoice / Receipt", "emoji": "🧾", "schema": {"type": "object", "properties": {
        "vendor": S(), "date": S(), "currency": S(), "subtotal": N(), "tax": N(), "total": N(),
        "line_items": {"type": "array", "items": {"type": "object", "properties": {
            "description": {"type": "string"}, "qty": N(), "unit_price": N(), "amount": N()}}}},
        "required": ["vendor", "total"]}},
    "event": {"label": "Event", "emoji": "📅", "schema": {"type": "object", "properties": {
        "title": S(), "date": S(), "start_time": S(), "end_time": S(), "location": S(),
        "organizer": S(), "description": S()}, "required": ["title"]}},
    "job": {"label": "Job posting", "emoji": "💼", "schema": {"type": "object", "properties": {
        "title": S(), "company": S(), "location": S(), "employment_type": S(), "salary_range": S(),
        "responsibilities": {"type": "array", "items": {"type": "string"}},
        "requirements": {"type": "array", "items": {"type": "string"}},
        "apply_url": S()}, "required": ["title"]}},
}

SAMPLES = {
    "contact": ("👤", "Email signature",
        "thanks again! — Maya\n\nMaya R. Fitzgerald\nSr. Solutions Architect, Northwind Cloud\nmaya.fitzgerald@northwind.example  |  cell (415) 555-0182\n1200 Harbor Blvd, Suite 400, San Diego CA 92101\nnorthwindcloud.example"),
    "invoice": ("🧾", "Receipt",
        "RIVERSIDE HARDWARE\nInvoice #4821 — Mar 14, 2026\n\n2x Cordless drill @ $89.99 = $179.98\n1x Drill bit set @ $24.50 = $24.50\n3x Work gloves @ $12.00 = $36.00\n\nSubtotal: $240.48\nTax (8.25%): $19.84\nTOTAL: $260.32\nPaid: Visa ****4417"),
    "job": ("💼", "Job posting",
        "We're hiring a Senior Backend Engineer (Remote, US) at Lumina Labs. Comp: $150k-$185k + equity. You'll design and scale our API platform, own service reliability, and mentor two junior engineers. Must have: 5+ yrs backend, strong Python or Go, experience with distributed systems and Postgres. Nice to have: Kafka, k8s. Apply at lumina.example/careers/be-senior"),
}

def build_schema(key, custom_fields):
    if key in SCHEMAS:
        return SCHEMAS[key]["schema"]
    if key == "custom":
        props = {f.strip(): S() for f in (custom_fields or "").split(",") if f.strip()}
        return {"type": "object", "properties": props}
    return SCHEMAS["contact"]["schema"]

def extract(text, schema):
    prompt = ("Extract structured data from the text below into the required schema. "
              "Use null for anything not present — never invent values.\n\nTEXT:\n" + text[:12000])
    if ANTHROPIC_KEY:
        import anthropic
        client = anthropic.Anthropic(api_key=ANTHROPIC_KEY)
        r = client.messages.create(model=ANTHROPIC_MODEL, max_tokens=1500,
            tools=[{"name": "extract", "description": "Return the structured data from the text.",
                    "input_schema": schema}],
            tool_choice={"type": "tool", "name": "extract"},
            messages=[{"role": "user", "content": prompt}])
        for b in r.content:
            if b.type == "tool_use":
                return b.input
        return {}
    import requests
    r = requests.post(f"{OLLAMA_URL}/api/chat", timeout=90, json={
        "model": OLLAMA_MODEL, "stream": False, "format": schema,
        "messages": [{"role": "user", "content": prompt}], "options": {"temperature": 0}})
    r.raise_for_status()
    return json.loads(r.json()["message"]["content"])

app = Flask(__name__)

@app.route("/")
def home():
    return Response(PAGE, mimetype="text/html")

@app.route("/api/extract", methods=["POST"])
def api_extract():
    b = request.get_json(force=True)
    text = (b.get("text") or "").strip()
    key = b.get("schema", "contact")
    fields = b.get("fields", "")
    if not text:
        return jsonify(error="Paste some text to extract from."), 400
    schema = build_schema(key, fields)
    if not schema.get("properties"):
        return jsonify(error="No fields to extract — add some custom fields (comma-separated)."), 400
    try:
        return jsonify(data=extract(text, schema))
    except Exception as e:
        import sys; print("extract error:", type(e).__name__, file=sys.stderr, flush=True)
        return jsonify(error="Extraction failed — please try again."), 200

PAGE = """<!doctype html><html lang="en"><head><meta charset="utf-8">

<title>Data Extractor — GritAI</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 #4 Data Extractor (app-specific, on grit-orange system) ---- */

.samples{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 2px;align-items:center}

.tryl{font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--dim2);margin-right:2px}

.samp{font-family:var(--mono);font-size:12px;color:var(--dim);background:var(--panel);border:1px solid var(--line);border-radius:2px;padding:8px 12px;cursor:pointer;transition:.15s}

.samp:hover{color:var(--grit);border-color:var(--grit-dim)}

.ctlrow{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;margin-top:4px}

.seg{display:flex;flex-wrap:wrap;gap:8px}

.seg button{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);background:var(--panel);border:1px solid var(--line2);border-radius:2px;padding:10px 14px;cursor:pointer;transition:.15s}

.seg button:hover{color:var(--grit);border-color:var(--grit-dim)}

.seg button.on{color:#140a06;background:var(--grit);border-color:var(--grit);font-weight:600}

.run{align-self:stretch;padding:13px 26px}

#customwrap{display:none;margin-top:14px}

#customwrap .lbl{margin-bottom:8px}

.out{display:none}.out.show{display:block}

#copy{margin-left:6px;padding:8px 16px;font-size:11px}

pre#json{margin:0;font-family:var(--mono);font-size:13px;line-height:1.7;color:var(--ink);background:transparent;padding:18px 20px;overflow:auto;white-space:pre;min-height:44px}

#json .key{color:var(--grit)}

#json .str{color:var(--ink)}

#json .num{color:var(--grit2)}

#json .bool{color:var(--grit2)}

#json .null{color:var(--dim2);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">Data Extractor</span></div>

 <div class="tags"><span class="tag hot">▸ Live</span><span class="tag">SDVOSB</span><span class="tag">Lawton OK</span></div>

</header>

<div class="hero">

 <h1>Messy text in.<br><em>Schema-valid</em> JSON out.</h1>

 <p>Paste an email signature, a receipt, a job post, or an event invite — get back clean, structured JSON via forced tool-use. It never invents values.</p>

</div>

<div class="sec"><span class="num">01</span><span class="name">Source Text</span><span class="rule"></span></div>

<textarea id="src" class="ta" placeholder="Paste an email signature, a receipt, a job posting, an event invite…"></textarea>

<div class="samples" id="samples"></div>

<div class="sec"><span class="num">02</span><span class="name">Target Schema</span><span class="rule"></span></div>

<div class="ctlrow">

 <div class="seg" id="seg">

  <button data-v="contact" class="on">Contact</button>

  <button data-v="invoice">Invoice</button>

  <button data-v="event">Event</button>

  <button data-v="job">Job</button>

  <button data-v="custom">Custom</button>

 </div>

 <button class="run" id="go" onclick="run()">Extract →</button>

</div>

<div id="customwrap">

 <label class="lbl">Custom fields</label>

 <div class="field"><span class="car">$</span><input id="custom" placeholder="Comma-separated, e.g. name, budget, deadline, owner"></div>

</div>

<div class="out" id="out">

 <div class="sec"><span class="num">03</span><span class="name">Extracted JSON</span><span class="rule"></span><button class="btn ghost" id="copy" onclick="copyJson()" style="display:none">Copy</button></div>

 <div class="panel"><pre id="json"></pre></div>

</div>

<footer><span class="b">Schema-valid JSON via forced tool-use · never invents values</span><span class="sp">GRITAI SOLUTIONS · 30-in-15 №4</span></footer>

</div><script>

const SAMPLES=[["contact","","Email signature"],["invoice","","Receipt"],["job","","Job posting"]];

const $=id=>document.getElementById(id);

const src=$('src'),go=$('go'),out=$('out'),jsonEl=$('json'),copy=$('copy'),customwrap=$('customwrap'),custom=$('custom');

let schema="contact",busy=false,lastJson="";

$('samples').innerHTML='<span class="tryl">Try</span>'+

 SAMPLES.map(s=>`<span class="samp" onclick="loadSample('${s[0]}')">${s[2]}</span>`).join('');

$('seg').addEventListener('click',e=>{const b=e.target.closest('button');if(!b)return;

 schema=b.dataset.v;[...seg.children].forEach(x=>x.classList.toggle('on',x===b));

 customwrap.style.display=schema==='custom'?'block':'none';});

function esc(s){return String(s).replace(/[&<>]/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;'}[c]));}

function jhtml(v,ind){ind=ind||0;const pad='  '.repeat(ind),p2='  '.repeat(ind+1);

 if(v===null)return '<span class="null">null</span>';

 if(typeof v==='number')return '<span class="num">'+v+'</span>';

 if(typeof v==='boolean')return '<span class="bool">'+v+'</span>';

 if(typeof v==='string')return '<span class="str">"'+esc(v)+'"</span>';

 if(Array.isArray(v)){if(!v.length)return '[]';return '[\\n'+v.map(x=>p2+jhtml(x,ind+1)).join(',\\n')+'\\n'+pad+']';}

 const ks=Object.keys(v);if(!ks.length)return '{}';

 return '{\\n'+ks.map(k=>p2+'<span class="key">"'+esc(k)+'"</span>: '+jhtml(v[k],ind+1)).join(',\\n')+'\\n'+pad+'}';}

function copyJson(){navigator.clipboard.writeText(lastJson);copy.textContent='Copied!';setTimeout(()=>copy.textContent='Copy',1400);}

async function loadSample(name){

 const r=await fetch('/api/sample_text?name='+name);const d=await r.json();

 if(d.text){src.value=d.text;schema=name;[...seg.children].forEach(x=>x.classList.toggle('on',x.dataset.v===name));

  customwrap.style.display='none';run();}

}

async function run(){if(busy)return;const text=src.value.trim();if(!text){src.focus();return;}

 busy=true;go.disabled=true;go.textContent='Extracting…';out.classList.add('show');copy.style.display='none';

 jsonEl.innerHTML='<span class="spin"><span></span><span></span><span></span></span>';

 try{const r=await fetch('/api/extract',{method:'POST',headers:{'Content-Type':'application/json'},

   body:JSON.stringify({text,schema,fields:custom.value})});const d=await r.json();

  if(d.error){jsonEl.textContent=d.error;}

  else{lastJson=JSON.stringify(d.data,null,2);jsonEl.innerHTML=jhtml(d.data,0);copy.style.display='inline-block';}

 }catch(e){jsonEl.textContent='Something went wrong — please try again.';}

 busy=false;go.disabled=false;go.textContent='Extract →';}

</script></body></html>"""

@app.route("/api/sample_text")
def sample_text():
    name = request.args.get("name", "")
    if name in SAMPLES:
        return jsonify(text=SAMPLES[name][2])
    return jsonify(error="unknown"), 404

if __name__ == "__main__":
    backend = "Claude API" if ANTHROPIC_KEY else f"Ollama ({OLLAMA_MODEL} @ {OLLAMA_URL})"
    print(f"Structured Data Extractor on http://127.0.0.1:{PORT}  [backend: {backend}]", flush=True)
    app.run(host="0.0.0.0", port=PORT, threaded=True)