Update app.py

app.py

@@ -337,6 +337,60 @@ def render_recommendations(recs):
 # ═════════════════════════════════════════════════════════════════════════════
 DEMO_ISSUER = {"name": "מים שקטים", "tax_id": "962569844", "status": "authorized_dealer"}
 
+
+def render_parse_panel(parse, completed):
+    """'Behind the scenes' panel: what the MODEL extracted vs what the
+    DETERMINISTIC engine computed. Demonstrates the model/rules separation —
+    the model predicts only the extraction; all arithmetic is rule-based."""
+    items = parse.get("items", [])
+    item_rows = "".join(
+        f'<div style="display:flex;justify-content:space-between;font-size:12px;'
+        f'color:#334155;padding:3px 0;"><span>{it.get("description","")}</span>'
+        f'<span style="color:#64748b;">{it.get("quantity",1)} × ₪{it.get("unit_price",0):,.0f}</span></div>'
+        for it in items)
+
+    chips = (
+        f'<span style="background:#ecfdf5;color:#047857;border:1px solid #a7f3d0;'
+        f'border-radius:999px;padding:2px 9px;font-size:11px;">לקוח: {parse.get("client_name","—")}</span>'
+        f'<span style="background:#ecfdf5;color:#047857;border:1px solid #a7f3d0;'
+        f'border-radius:999px;padding:2px 9px;font-size:11px;">'
+        f'{"עסק" if parse.get("client_is_business") else "פרטי"}</span>'
+        f'<span style="background:#ecfdf5;color:#047857;border:1px solid #a7f3d0;'
+        f'border-radius:999px;padding:2px 9px;font-size:11px;">{len(items)} פריטים</span>')
+
+    alloc_line = ""
+    if completed.get("allocation_required"):
+        alloc_line = ('<div style="font-size:12px;color:#334155;padding:3px 0;">'
+                      'מספר הקצאה <span style="color:#0d9488;">✓ נדרש</span> '
+                      '(תנאי: חשבונית · עסק · ≥ סף)</div>')
+
+    return f"""
+<div dir="rtl" style="font-family:'Segoe UI',Arial,sans-serif;max-width:660px;
+     margin:14px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:12px;">
+
+  <div style="background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:14px 16px;">
+    <div style="font-size:11px;font-weight:700;color:#0d9488;letter-spacing:.05em;
+         text-transform:uppercase;margin-bottom:10px;">🧠 המודל חילץ</div>
+    <div style="display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px;">{chips}</div>
+    {item_rows}
+    <div style="font-size:10px;color:#94a3b8;margin-top:10px;border-top:1px dashed #e2e8f0;
+         padding-top:8px;">gemma-2-2b + LoRA · חוזה רק <code>parse</code></div>
+  </div>
+
+  <div style="background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:14px 16px;">
+    <div style="font-size:11px;font-weight:700;color:#7c3aed;letter-spacing:.05em;
+         text-transform:uppercase;margin-bottom:10px;">⚙️ המנוע חישב</div>
+    <div style="font-size:12px;color:#334155;padding:3px 0;">מע"מ {int(round(completed.get("vat_rate",0)*100))}% ·
+      ₪{completed.get("vat_amount",0):,.2f}</div>
+    <div style="font-size:12px;color:#334155;padding:3px 0;">סה"כ ₪{completed.get("total",0):,.2f}</div>
+    <div style="font-size:12px;color:#334155;padding:3px 0;">מס׳ מסמך {completed.get("serial_number","")}</div>
+    {alloc_line}
+    <div style="font-size:10px;color:#94a3b8;margin-top:10px;border-top:1px dashed #e2e8f0;
+         padding-top:8px;">דטרמיניסטי · אפס הזיות בחשבון</div>
+  </div>
+</div>"""
+
+
 _DOC_CHOICE_MAP = {
     "קבלה":               "receipt",
     "חשבונית מס":          "tax_invoice",
@@ -345,19 +399,19 @@ _DOC_CHOICE_MAP = {
 
 def generate(note, doc_choice):
     """Single-shot, stateless pipeline:
-       note (Textbox) + doc_choice (Radio) → (status_md, doc_html, recs_html).
+       note (Textbox) + doc_choice (Radio) → (status, parse_html, doc_html, recs_html).
        No gr.State, no second handler — the input value cannot be lost.
     """
     note = (note or "").strip()
     if not note:
-        return "✏️ הקלד הערת הכנסה ולחץ הפק מסמך.", "", ""
+        return "✏️ הקלד הערת הכנסה ולחץ הפק מסמך.", "", "", ""
 
     _lazy_init()
     parse = model_parse(note)
 
     if parse is None or _missing_fields(parse) == ["parse_failed"]:
         return ("🤔 לא הצלחתי לחלץ פרטים. נסח מחדש — לדוגמה: "
-                "'קיבלתי 500₪ ממשה על ייעוץ'.", "", "")
+                "'קיבלתי 500₪ ממשה על ייעוץ'.", "", "", "")
 
     # ---- agentic clarification: only the doc-type can be genuinely ambiguous ----
     answers = {}
@@ -369,16 +423,16 @@ def generate(note, doc_choice):
         if _needs_allocation_clarification(parse):
             hint = " (סכום גבוה ללקוח עסקי — לרוב חשבונית מס וקבלה)"
         return (f"❓ צריך פרט אחד נוסף: **בחר סוג מסמך** מהרשימה למעלה{hint} "
-                "ולחץ הפק מסמך שוב.", "", "")
+                "ולחץ הפק מסמך שוב.", "", "", "")
 
     final = apply_answers(parse, answers)
     try:
         completed = core.complete(DEMO_ISSUER, final, _STATE["rng"])
     except Exception as e:
-        return (f"⚠️ שגיאה בעיבוד: {e}", "", "")
+        return (f"⚠️ שגיאה בעיבוד: {e}", "", "", "")
 
-    client = final.get("client_name", "—")
     return ("✅ המסמך הופק בהצלחה.",
+            render_parse_panel(final, completed),
             render_document(completed),
             render_recommendations(recommend(note)))
 
@@ -387,104 +441,16 @@ def generate(note, doc_choice):
 # 7. UI — Gradio 6.17 compatible, ChatGPT/Claude style
 # ═════════════════════════════════════════════════════════════════════════════
 CSS = """
-*, *::before, *::after { box-sizing: border-box; }
-
-.gradio-container {
-    max-width: 760px !important;
-    margin: 0 auto !important;
-    padding: 0 16px !important;
-    background: #0a0f1e !important;
-}
-body, .main { background: #0a0f1e !important; }
+.gradio-container { max-width: 880px !important; margin: 0 auto !important; }
 footer { display: none !important; }
-
-.chatbot-area .bubble-wrap { gap: 12px !important; }
-
-.chatbot-area [data-testid="user"] .bubble,
-.chatbot-area .user .bubble {
-    background: #0d9488 !important;
-    color: #fff !important;
-    border-radius: 18px 18px 4px 18px !important;
-    padding: 12px 16px !important;
-    font-size: 14px !important;
-    line-height: 1.6 !important;
-    max-width: 80% !important;
-    border: none !important;
-}
-
-.chatbot-area [data-testid="bot"] .bubble,
-.chatbot-area .bot .bubble {
-    background: #1e293b !important;
-    color: #e2e8f0 !important;
-    border-radius: 18px 18px 18px 4px !important;
-    padding: 12px 16px !important;
-    font-size: 14px !important;
-    line-height: 1.6 !important;
-    max-width: 80% !important;
-    border: 1px solid #334155 !important;
-}
-
-.note-box textarea {
-    background: #1e293b !important;
-    color: #e2e8f0 !important;
-    border: 1px solid #334155 !important;
-    border-radius: 14px !important;
-    font-size: 15px !important;
-    padding: 14px 18px !important;
-    resize: none !important;
-}
-.note-box textarea:focus {
-    border-color: #0d9488 !important;
-    box-shadow: 0 0 0 3px rgba(13,148,136,.18) !important;
-    outline: none !important;
-}
-.note-box label { display: none !important; }
-
-.answer-box textarea {
-    background: #1e293b !important;
-    color: #e2e8f0 !important;
-    border: 1px solid #0d9488 !important;
-    border-radius: 10px !important;
-    font-size: 14px !important;
-    padding: 10px 14px !important;
-    resize: none !important;
-}
-.answer-box label { color: #475569 !important; font-size: 11px !important; }
-
-.btn-send button {
-    background: #0d9488 !important;
-    color: #fff !important;
-    border: none !important;
-    border-radius: 12px !important;
-    font-size: 15px !important;
-    font-weight: 600 !important;
-    height: 52px !important;
-}
-.btn-send button:hover  { background: #0f766e !important; }
-
-.btn-clear button {
-    background: transparent !important;
-    color: #475569 !important;
-    border: 1px solid #1e293b !important;
-    border-radius: 10px !important;
-    font-size: 13px !important;
-}
-.btn-clear button:hover { border-color: #334155 !important; color: #94a3b8 !important; }
-
-.qs-btn button {
-    background: #111827 !important;
-    color: #94a3b8 !important;
-    border: 1px solid #1e293b !important;
-    border-radius: 10px !important;
-    font-size: 12px !important;
-    padding: 8px 12px !important;
-    width: 100% !important;
-}
-.qs-btn button:hover {
-    background: #1e293b !important;
-    border-color: #0d9488 !important;
-    color: #e2e8f0 !important;
+.qs-btn {
+  font-size: 13px !important;
+  background: #f1f5f9 !important;
+  border: 1px solid #e2e8f0 !important;
+  color: #0f172a !important;
 }
+.qs-btn:hover { background: #e2e8f0 !important; }
+.btn-send { font-weight: 600 !important; }
 """
 
 QUICK_STARTERS = [
@@ -493,20 +459,22 @@ QUICK_STARTERS = [
     ("📦 כמה פריטים",                'נועה כהן שילמה 2×350 ש"ח ייעוץ עסקי + 180 ש"ח הכנת מצגת'),
 ]
 
-with gr.Blocks(title="Text2Receipt") as demo:
+with gr.Blocks(title="Text2Receipt", theme=gr.themes.Soft(
+        primary_hue="teal", secondary_hue="slate")) as demo:
 
     gr.HTML("""
-    <div dir="rtl" style="text-align:center;padding:28px 0 16px;">
-      <div style="font-size:30px;margin-bottom:8px;">🧾</div>
-      <div style="font-size:26px;font-weight:700;color:#2dd4bf;letter-spacing:-.4px;">Text2Receipt</div>
-      <div style="font-size:13px;color:#334155;margin-top:6px;">
+    <div dir="rtl" style="text-align:center;padding:24px 0 8px;">
+      <div style="font-size:30px;margin-bottom:6px;">🧾</div>
+      <div style="font-size:26px;font-weight:800;color:#0d9488;letter-spacing:-.4px;">Text2Receipt</div>
+      <div style="font-size:14px;color:#475569;margin-top:6px;">
         הערת הכנסה חופשית בעברית &nbsp;→&nbsp; מסמך פיסקלי ישראלי תקין
       </div>
     </div>""")
 
     note_input = gr.Textbox(
-        label="הערת הכנסה", lines=2, elem_classes=["note-box"],
+        label="הערת הכנסה", lines=2,
         placeholder='לדוגמה: קיבלתי 1,200 ש"ח ממשה כהן על ייעוץ עסקי',
+        rtl=True, autofocus=True,
     )
 
     doc_choice = gr.Radio(
@@ -515,30 +483,33 @@ with gr.Blocks(title="Text2Receipt") as demo:
     )
 
     with gr.Row():
-        submit_btn = gr.Button("הפק מסמך ⚡", variant="primary", elem_classes=["btn-send"])
-        clear_btn  = gr.Button("נקה 🗑", elem_classes=["btn-clear"])
+        submit_btn = gr.Button("הפק מסמך ⚡", variant="primary", scale=2,
+                               elem_classes=["btn-send"])
+        clear_btn  = gr.Button("נקה 🗑", scale=1)
 
-    status_output = gr.Markdown("", elem_classes=["status-area"])
+    status_output = gr.Markdown("")
 
-    gr.HTML('<div dir="rtl" style="font-size:10px;color:#1e293b;margin:14px 0 6px;'
+    gr.HTML('<div dir="rtl" style="font-size:11px;color:#94a3b8;margin:10px 0 6px;'
             'letter-spacing:.07em;text-transform:uppercase;">דוגמאות מהירות</div>')
     with gr.Row():
         for lbl, ex in QUICK_STARTERS:
-            gr.Button(lbl, elem_classes=["qs-btn"]).click(
+            gr.Button(lbl, elem_classes=["qs-btn"], size="sm").click(
                 fn=lambda e=ex: e, outputs=note_input)
 
-    doc_output  = gr.HTML()
-    recs_output = gr.HTML()
+    parse_output = gr.HTML()
+    doc_output   = gr.HTML()
+    recs_output  = gr.HTML()
 
     # ── single, stateless handler — value cannot be lost ──
     submit_btn.click(
         fn=generate,
         inputs=[note_input, doc_choice],
-        outputs=[status_output, doc_output, recs_output],
+        outputs=[status_output, parse_output, doc_output, recs_output],
     )
     clear_btn.click(
-        fn=lambda: ("", "זיהוי אוטומטי", "", "", ""),
-        outputs=[note_input, doc_choice, status_output, doc_output, recs_output],
+        fn=lambda: ("", "זיהוי אוטומטי", "", "", "", ""),
+        outputs=[note_input, doc_choice, status_output,
+                 parse_output, doc_output, recs_output],
     )
 
 # ═════════════════════════════════════════════════════════════════════════════