Upload 2 files

app.py

@@ -0,0 +1,342 @@
+import io
+import os
+import pandas as pd
+import gradio as gr
+from reportlab.pdfgen import canvas
+from reportlab.lib.units import mm
+from reportlab.pdfbase import pdfmetrics
+from reportlab.pdfbase.ttfonts import TTFont
+
+# ── Font setup ────────────────────────────────────────────────────────────────
+FONT_BOLD = "Helvetica-Bold"
+_bold_path = os.path.join(os.path.dirname(os.path.abspath(__file__)), "Montserrat-Bold.ttf")
+if os.path.exists(_bold_path):
+    try:
+        pdfmetrics.registerFont(TTFont("Montserrat-Bold", _bold_path))
+        FONT_BOLD = "Montserrat-Bold"
+    except Exception:
+        pass
+
+# ── PDF ───────────────────────────────────────────────────────────────────────
+def build_cfg(pw, ph, lw, lh, ml, gh, vo, fb, fp, fbr, fr):
+    return dict(
+        PAGE_WIDTH=pw*mm, PAGE_HEIGHT=ph*mm,
+        LABEL_WIDTH=lw*mm, LABEL_HEIGHT=lh*mm,
+        MARGIN_LEFT=ml*mm, GAP_HORIZ=gh*mm, VERTICAL_OFFSET=vo*mm,
+        FONT_SIZE_BARCODE=fb, FONT_SIZE_PRICE=fp,
+        FONT_SIZE_BRAND=fbr, FONT_SIZE_REF=fr,
+    )
+
+def generate_pdf_bytes(products: list, cfg: dict) -> io.BytesIO:
+    buf = io.BytesIO()
+    c = canvas.Canvas(buf, pagesize=(cfg["PAGE_WIDTH"], cfg["PAGE_HEIGHT"]))
+    for i, item in enumerate(products):
+        if i > 0 and i % 3 == 0:
+            c.showPage()
+        slot = i % 3
+        x  = cfg["MARGIN_LEFT"] + slot * (cfg["LABEL_WIDTH"] + cfg["GAP_HORIZ"])
+        cx = x + cfg["LABEL_WIDTH"] / 2
+        y  = cfg["VERTICAL_OFFSET"]
+        lh = cfg["LABEL_HEIGHT"]
+
+        c.setFont(FONT_BOLD, cfg["FONT_SIZE_BARCODE"])
+        c.drawCentredString(cx, y + lh - 4.5*mm, str(item.get("barcode", "")))
+        c.setFont(FONT_BOLD, cfg["FONT_SIZE_PRICE"])
+        c.drawCentredString(cx, y + lh - 13*mm,  str(item.get("price",   "")))
+        c.setFont(FONT_BOLD, cfg["FONT_SIZE_BRAND"])
+        c.drawCentredString(cx, y + 10*mm,        str(item.get("brand",   "")).upper())
+        c.setFont(FONT_BOLD, cfg["FONT_SIZE_REF"])
+        c.drawCentredString(cx, y + 6*mm,         str(item.get("ref",     "")))
+
+    c.save()
+    buf.seek(0)
+    return buf
+
+# ── Camera barcode scanner ────────────────────────────────────────────────────
+SCANNER_HTML = """
+<style>
+  .lp-scan-btn {
+    display: inline-flex; align-items: center; gap: 8px;
+    padding: 10px 18px; font-size: 13px; font-weight: 600;
+    border: 2px solid #1e293b; border-radius: 8px;
+    background: #1e293b; color: #f1f5f9; cursor: pointer;
+    transition: all .18s; letter-spacing: .03em; font-family: inherit;
+  }
+  .lp-scan-btn:hover { background: #334155; border-color: #334155; }
+  .lp-scan-btn.active { background: #dc2626; border-color: #dc2626; }
+
+  #lp-overlay {
+    display: none; position: fixed; inset: 0;
+    background: rgba(0,0,0,.8); z-index: 99999;
+    align-items: center; justify-content: center;
+  }
+  #lp-overlay.open { display: flex; }
+
+  #lp-modal {
+    background: #0f172a; border-radius: 20px; padding: 28px 24px 20px;
+    width: min(400px, 94vw); display: flex; flex-direction: column;
+    align-items: center; gap: 14px;
+    box-shadow: 0 32px 80px rgba(0,0,0,.7);
+  }
+  #lp-modal-title {
+    color: #e2e8f0; font-size: 13px; font-weight: 600;
+    letter-spacing: .12em; text-transform: uppercase; margin: 0;
+  }
+
+  #lp-viewfinder {
+    position: relative; width: 100%; max-width: 340px;
+    border-radius: 12px; overflow: hidden;
+    border: 2px solid #1e3a5f; background: #000;
+  }
+  #lp-video { width: 100%; display: block; aspect-ratio: 4/3; object-fit: cover; }
+
+  /* scanning line animation */
+  #lp-scanline {
+    position: absolute; left: 10%; right: 10%; height: 2px;
+    background: #ef4444; box-shadow: 0 0 10px #ef4444, 0 0 20px #ef4444;
+    animation: lpscan 1.8s ease-in-out infinite; top: 0;
+  }
+  @keyframes lpscan {
+    0%   { top: 10%; opacity: .8; }
+    50%  { top: 88%; opacity: 1; }
+    100% { top: 10%; opacity: .8; }
+  }
+
+  /* corner brackets */
+  #lp-viewfinder::before, #lp-viewfinder::after,
+  #lp-corner-bl, #lp-corner-br {
+    content: ''; position: absolute; width: 24px; height: 24px;
+    border-color: #38bdf8; border-style: solid; z-index: 2;
+  }
+  #lp-viewfinder::before { top:8px;    left:8px;  border-width: 3px 0 0 3px; }
+  #lp-viewfinder::after  { top:8px;    right:8px; border-width: 3px 3px 0 0; }
+  #lp-corner-bl { bottom:8px; left:8px;  border-width: 0 0 3px 3px; }
+  #lp-corner-br { bottom:8px; right:8px; border-width: 0 3px 3px 0; }
+
+  #lp-status {
+    color: #94a3b8; font-size: 12px; min-height: 16px;
+    text-align: center; letter-spacing: .03em;
+  }
+  #lp-status.ok  { color: #4ade80; font-weight: 600; }
+  #lp-status.err { color: #f87171; }
+
+  .lp-close {
+    padding: 7px 28px; border-radius: 6px; cursor: pointer;
+    background: transparent; border: 1px solid #334155;
+    color: #94a3b8; font-size: 12px; font-family: inherit;
+    transition: all .18s;
+  }
+  .lp-close:hover { border-color: #ef4444; color: #ef4444; }
+</style>
+
+<button class="lp-scan-btn" id="lp-btn" onclick="lpToggle()">
+  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2">
+    <rect x="2" y="2" width="6" height="6" rx="1"/>
+    <rect x="16" y="2" width="6" height="6" rx="1"/>
+    <rect x="2"  y="16" width="6" height="6" rx="1"/>
+    <line x1="16" y1="16" x2="22" y2="16"/>
+    <line x1="16" y1="16" x2="16" y2="22"/>
+    <line x1="22" y1="22" x2="20" y2="22"/>
+    <line x1="22" y1="20" x2="22" y2="22"/>
+  </svg>
+  Scan Barcode
+</button>
+
+<div id="lp-overlay">
+  <div id="lp-modal">
+    <p id="lp-modal-title">Point camera at barcode</p>
+    <div id="lp-viewfinder">
+      <video id="lp-video" autoplay muted playsinline></video>
+      <div id="lp-scanline"></div>
+      <div id="lp-corner-bl"></div>
+      <div id="lp-corner-br"></div>
+    </div>
+    <div id="lp-status">Starting camera…</div>
+    <button class="lp-close" onclick="lpStop()">✕  Cancel</button>
+  </div>
+</div>
+
+<script src="https://unpkg.com/@zxing/library@0.21.3/umd/index.min.js"></script>
+<script>
+(function () {
+  var reader = null;
+
+  function status(msg, cls) {
+    var el = document.getElementById('lp-status');
+    el.textContent = msg;
+    el.className = cls || '';
+  }
+
+  function injectValue(code) {
+    // Gradio 4 wraps the textbox in a div with elem_id="barcode_field"
+    var wrapper = document.getElementById('barcode_field');
+    if (!wrapper) return;
+    var input = wrapper.querySelector('input, textarea');
+    if (!input) return;
+    var proto = Object.getOwnPropertyDescriptor(
+      input.tagName === 'TEXTAREA'
+        ? HTMLTextAreaElement.prototype
+        : HTMLInputElement.prototype, 'value');
+    if (proto && proto.set) proto.set.call(input, code);
+    input.dispatchEvent(new Event('input',  { bubbles: true }));
+    input.dispatchEvent(new Event('change', { bubbles: true }));
+  }
+
+  window.lpToggle = function () {
+    var overlay = document.getElementById('lp-overlay');
+    if (overlay.classList.contains('open')) { lpStop(); return; }
+    overlay.classList.add('open');
+    document.getElementById('lp-btn').classList.add('active');
+    lpStart();
+  };
+
+  window.lpStop = function () {
+    if (reader) { try { reader.reset(); } catch(_){} reader = null; }
+    var vid = document.getElementById('lp-video');
+    if (vid.srcObject) { vid.srcObject.getTracks().forEach(function(t){ t.stop(); }); vid.srcObject = null; }
+    document.getElementById('lp-overlay').classList.remove('open');
+    document.getElementById('lp-btn').classList.remove('active');
+    status('');
+  };
+
+  async function lpStart() {
+    status('Starting camera…');
+    try {
+      var hints = new Map();
+      hints.set(ZXing.DecodeHintType.POSSIBLE_FORMATS, [
+        ZXing.BarcodeFormat.EAN_13,
+        ZXing.BarcodeFormat.CODE_128,
+      ]);
+      reader = new ZXing.BrowserMultiFormatReader(hints);
+      var devices = await ZXing.BrowserCodeReader.listVideoInputDevices();
+      if (!devices.length) throw new Error('No camera found');
+      // Prefer back camera on mobile
+      var dev = devices.find(function(d){ return /back|rear|environment/i.test(d.label); })
+                || devices[devices.length - 1];
+      status('Scanning…');
+      await reader.decodeFromVideoDevice(dev.deviceId, 'lp-video', function(result, err) {
+        if (result) {
+          var code = result.getText();
+          status('✓  ' + code, 'ok');
+          injectValue(code);
+          setTimeout(lpStop, 700);
+        }
+      });
+    } catch(e) {
+      status('Error: ' + e.message, 'err');
+    }
+  }
+})();
+</script>
+"""
+
+# ── State helpers ─────────────────────────────────────────────────────────────
+COLS = ["barcode", "price", "brand", "ref"]
+EMPTY_DF = pd.DataFrame(columns=COLS)
+
+def df_from(products):
+    return pd.DataFrame(products, columns=COLS) if products else EMPTY_DF.copy()
+
+def add_product(products, barcode, price, brand, ref):
+    if not (barcode or "").strip():
+        raise gr.Error("Barcode is required.")
+    products = list(products) + [{
+        "barcode": barcode.strip(), "price": (price or "").strip(),
+        "brand":   (brand  or "").strip(), "ref":  (ref   or "").strip(),
+    }]
+    return products, df_from(products), "", "", "", ""
+
+def remove_last(products):
+    products = list(products)[:-1]
+    return products, df_from(products)
+
+def clear_all(_):
+    return [], EMPTY_DF.copy()
+
+def sync_df(df):
+    if df is None or df.empty:
+        return []
+    return df.fillna("").to_dict("records")
+
+def generate_pdf(products, *cfg_vals):
+    if not products:
+        raise gr.Error("Add at least one product first.")
+    cfg  = build_cfg(*cfg_vals)
+    buf  = generate_pdf_bytes(products, cfg)
+    path = "/tmp/labels.pdf"
+    with open(path, "wb") as f:
+        f.write(buf.read())
+    return path
+
+# ── UI ────────────────────────────────────────────────────────────────────────
+with gr.Blocks(title="Label Printer", theme=gr.themes.Soft()) as demo:
+    state = gr.State([])
+
+    gr.Markdown("# 🏷️ Label Printer")
+    gr.Markdown("Add products using the form or camera scanner, then export a print-ready PDF (3-up labels, 110 × 30 mm).")
+
+    with gr.Row(equal_height=False):
+
+        with gr.Column(scale=1, min_width=280):
+            gr.Markdown("### ➕ Add product")
+            gr.HTML(SCANNER_HTML)
+            barcode_in = gr.Textbox(label="Barcode", placeholder="Scan or type…", elem_id="barcode_field")
+            price_in   = gr.Textbox(label="Price",     placeholder="29.99")
+            brand_in   = gr.Textbox(label="Brand",     placeholder="ACME")
+            ref_in     = gr.Textbox(label="Reference", placeholder="REF-001")
+            with gr.Row():
+                add_btn  = gr.Button("➕ Add",         variant="primary")
+                undo_btn = gr.Button("↩ Undo last",    variant="secondary")
+                clr_btn  = gr.Button("🗑 Clear",        variant="stop")
+
+        with gr.Column(scale=2):
+            gr.Markdown("### 📋 Product list")
+            tbl = gr.Dataframe(
+                value=EMPTY_DF.copy(),
+                headers=COLS,
+                datatype=["str"] * 4,
+                col_count=(4, "fixed"),
+                interactive=True,
+                wrap=True,
+                label=None,
+            )
+            gr.Markdown("<small>Tip: you can edit or delete rows directly in the table.</small>")
+
+    with gr.Accordion("⚙️ Label layout", open=False):
+        with gr.Row():
+            pw  = gr.Number(value=110.6, label="Page width (mm)",    precision=1)
+            ph  = gr.Number(value=30,    label="Page height (mm)",   precision=1)
+            lw  = gr.Number(value=27,    label="Label width (mm)",   precision=1)
+            lh  = gr.Number(value=28,    label="Label height (mm)",  precision=1)
+        with gr.Row():
+            ml  = gr.Number(value=6.0,   label="Left margin (mm)",   precision=1)
+            gh  = gr.Number(value=8.0,   label="Horiz gap (mm)",     precision=1)
+            vo  = gr.Number(value=1.5,   label="Vert offset (mm)",   precision=1)
+        with gr.Row():
+            fb  = gr.Number(value=8,     label="Font: barcode",  precision=0)
+            fp  = gr.Number(value=16,    label="Font: price",    precision=0)
+            fbr = gr.Number(value=8,     label="Font: brand",    precision=0)
+            fr  = gr.Number(value=11,    label="Font: ref",      precision=0)
+
+    cfg_inputs = [pw, ph, lw, lh, ml, gh, vo, fb, fp, fbr, fr]
+
+    with gr.Row():
+        gen_btn = gr.Button("🖨️  Generate PDF", variant="primary", scale=1)
+        pdf_out = gr.File(label="Download PDF", scale=2)
+
+    # ── Wiring ────────────────────────────────────────────────────────────────
+    shared = dict(
+        inputs=[state, barcode_in, price_in, brand_in, ref_in],
+        outputs=[state, tbl, barcode_in, price_in, brand_in, ref_in],
+    )
+    add_btn.click(fn=add_product, **shared)
+    ref_in.submit(fn=add_product, **shared)   # Enter on last field adds row
+
+    undo_btn.click(fn=remove_last, inputs=[state], outputs=[state, tbl])
+    clr_btn.click( fn=clear_all,   inputs=[state], outputs=[state, tbl])
+    tbl.change(    fn=sync_df,     inputs=[tbl],   outputs=[state])
+
+    gen_btn.click(fn=generate_pdf, inputs=[state] + cfg_inputs, outputs=[pdf_out])
+
+if __name__ == "__main__":
+    demo.launch()

requirements.txt

@@ -0,0 +1,3 @@
+gradio>=4.0.0
+reportlab>=4.0.0
+pandas>=2.0.0