Spaces:

BlackSpire
/

ClientInfoOCR

Sleeping

File size: 21,480 Bytes

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Card OCR Tester</title>
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Mono:wght@300;400;500&display=swap" rel="stylesheet">
<style>
  :root {
    --ink: #0f0e0d;
    --paper: #f5f0e8;
    --cream: #ede7d9;
    --accent: #d4400a;
    --accent2: #1a6b4a;
    --muted: #8a8070;
    --border: #c8bfae;
    --card-bg: #faf7f2;
    --success: #1a6b4a;
    --error: #c0392b;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }

  body {
    background: var(--paper);
    color: var(--ink);
    font-family: 'DM Mono', monospace;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
  }

  body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: repeating-linear-gradient(
      transparent, transparent 31px,
      var(--border) 31px, var(--border) 32px
    );
    opacity: 0.35;
    pointer-events: none;
    z-index: 0;
  }

  .page {
    position: relative;
    z-index: 1;
    max-width: 860px;
    margin: 0 auto;
    padding: 48px 24px 80px;
  }

  header {
    border-left: 5px solid var(--accent);
    padding-left: 20px;
    margin-bottom: 48px;
    animation: slideIn 0.5s ease both;
  }
  header .eyebrow {
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 6px;
  }
  header h1 {
    font-family: 'Syne', sans-serif;
    font-size: clamp(28px, 5vw, 44px);
    font-weight: 800;
    line-height: 1.1;
    color: var(--ink);
  }
  header h1 span { color: var(--accent); }
  header p {
    margin-top: 10px;
    font-size: 13px;
    color: var(--muted);
    max-width: 480px;
    line-height: 1.7;
  }

  /* ── API URL bar ── */
  .api-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--cream);
    border: 1.5px solid var(--border);
    border-radius: 4px;
    padding: 10px 14px;
    margin-bottom: 32px;
    animation: slideIn 0.5s 0.1s ease both;
  }
  .api-bar label {
    font-size: 10px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
  }
  .api-bar input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-family: 'DM Mono', monospace;
    font-size: 13px;
    color: var(--ink);
  }
  .api-bar .reset-btn {
    font-size: 10px;
    padding: 3px 9px;
    border: 1px solid var(--border);
    border-radius: 3px;
    background: transparent;
    cursor: pointer;
    color: var(--muted);
    white-space: nowrap;
    transition: all 0.15s;
  }
  .api-bar .reset-btn:hover { border-color: var(--ink); color: var(--ink); }

  /* ── Mode tabs ── */
  .tabs {
    display: flex;
    margin-bottom: 28px;
    border: 1.5px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
    width: fit-content;
    animation: slideIn 0.5s 0.15s ease both;
  }
  .tab-btn {
    padding: 9px 22px;
    font-family: 'Syne', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: var(--cream);
    border: none;
    cursor: pointer;
    color: var(--muted);
    transition: background 0.2s, color 0.2s;
  }
  .tab-btn + .tab-btn { border-left: 1.5px solid var(--border); }
  .tab-btn.active { background: var(--ink); color: var(--paper); }

  /* ── Upload zone ── */
  .upload-section {
    animation: slideIn 0.5s 0.2s ease both;
    margin-bottom: 28px;
  }

  .drop-zone {
    border: 2px dashed var(--border);
    border-radius: 6px;
    background: var(--card-bg);
    padding: 48px 24px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    position: relative;
  }
  .drop-zone:hover, .drop-zone.dragover {
    border-color: var(--accent);
    background: #fff9f5;
  }
  .drop-zone input[type=file] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
  }
  .drop-icon { font-size: 36px; margin-bottom: 12px; display: block; }
  .drop-zone h3 {
    font-family: 'Syne', sans-serif;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 6px;
  }
  .drop-zone p { font-size: 11px; color: var(--muted); letter-spacing: 0.05em; }

  kbd {
    display: inline-block;
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    background: var(--cream);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 1px 5px;
    color: var(--muted);
  }

  /* format badges */
  .format-badges {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
    flex-wrap: wrap;
  }
  .fmt-badge {
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 3px;
    border: 1px solid var(--border);
    color: var(--muted);
    background: var(--cream);
  }
  .fmt-badge.pdf {
    border-color: var(--accent);
    color: var(--accent);
    background: #fff5f0;
  }

  /* preview strip */
  #preview-strip { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
  .preview-thumb {
    position: relative;
    width: 90px; height: 68px;
    border-radius: 4px;
    overflow: hidden;
    border: 1.5px solid var(--border);
    animation: popIn 0.25s ease both;
  }
  .preview-thumb img { width: 100%; height: 100%; object-fit: cover; }
  /* PDF thumbnail — no image preview */
  .preview-thumb.pdf-thumb {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #fff5f0;
    border-color: var(--accent);
  }
  .preview-thumb.pdf-thumb .pdf-icon { font-size: 22px; line-height: 1; }
  .preview-thumb.pdf-thumb .pdf-label {
    font-size: 8px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
    margin-top: 4px;
  }
  .preview-thumb .rm {
    position: absolute;
    top: 2px; right: 2px;
    width: 18px; height: 18px;
    background: rgba(0,0,0,0.65);
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 10px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    z-index: 2;
  }
  .preview-thumb .fname {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: rgba(0,0,0,0.5);
    color: #fff;
    font-size: 8px;
    padding: 2px 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ── Submit button ── */
  .submit-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 32px;
    background: var(--ink);
    color: var(--paper);
    font-family: 'Syne', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    animation: slideIn 0.5s 0.25s ease both;
  }
  .submit-btn:hover { background: var(--accent); }
  .submit-btn:active { transform: scale(0.98); }
  .submit-btn:disabled { background: var(--muted); cursor: not-allowed; }
  .submit-btn .spinner {
    width: 14px; height: 14px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    display: none;
  }
  .submit-btn.loading .spinner { display: block; }
  .submit-btn.loading .btn-text { opacity: 0.7; }

  /* ── Status bar ── */
  #status {
    margin-top: 16px;
    font-size: 12px;
    padding: 10px 14px;
    border-radius: 4px;
    display: none;
  }
  #status.info { background: #e8f4ff; color: #1a4a7a; border-left: 3px solid #1a4a7a; }
  #status.ok   { background: #e6f5ee; color: var(--success); border-left: 3px solid var(--success); }
  #status.err  { background: #fdecea; color: var(--error);   border-left: 3px solid var(--error); }

  /* ── Results ── */
  #results-section { margin-top: 48px; }
  .results-header {
    font-family: 'Syne', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
    border-bottom: 1.5px solid var(--border);
    padding-bottom: 8px;
    margin-bottom: 24px;
  }

  .result-card {
    background: var(--card-bg);
    border: 1.5px solid var(--border);
    border-radius: 6px;
    padding: 24px;
    margin-bottom: 20px;
    position: relative;
    animation: popIn 0.3s ease both;
  }
  .result-card .card-badge {
    position: absolute;
    top: -1px; right: 16px;
    background: var(--accent);
    color: #fff;
    font-size: 10px;
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 0 0 4px 4px;
  }
  .result-card .company-name {
    font-family: 'Syne', sans-serif;
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 4px;
  }
  .result-card .contact-person {
    font-size: 13px;
    color: var(--accent2);
    font-weight: 500;
    margin-bottom: 20px;
  }
  .result-card .contact-person span { color: var(--muted); font-weight: 400; }

  .fields-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px 24px;
  }
  .field { display: flex; flex-direction: column; gap: 3px; }
  .field .lbl { font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
  .field .val { font-size: 13px; color: var(--ink); word-break: break-word; line-height: 1.5; }
  .field .val.empty { color: var(--border); font-style: italic; font-size: 11px; }
  .field .val.hi { color: var(--accent); font-weight: 500; }

  .copy-row {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }
  .copy-btn {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    padding: 5px 12px;
    border: 1.5px solid var(--border);
    border-radius: 3px;
    background: transparent;
    cursor: pointer;
    color: var(--muted);
    transition: all 0.15s;
  }
  .copy-btn:hover { border-color: var(--ink); color: var(--ink); }
  .copy-btn.copied { border-color: var(--success); color: var(--success); }

  @keyframes slideIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes popIn {
    from { opacity: 0; transform: scale(0.97); }
    to   { opacity: 1; transform: scale(1); }
  }
  @keyframes spin { to { transform: rotate(360deg); } }
  @keyframes pasteFlash {
    0%   { border-color: var(--accent2); background: #edfaf4; }
    100% { border-color: var(--border);  background: var(--card-bg); }
  }
  .drop-zone.paste-flash { animation: pasteFlash 0.6s ease both; }
</style>
</head>
<body>
<div class="page">

  <header>
    <div class="eyebrow">NVIDIA OCR · NeMo Retriever + Nemotron</div>
    <h1>Card &amp; Letterhead<br><span>Extractor</span></h1>
    <p>Upload or paste a visiting card / letterhead image or PDF to extract company name, contacts, address, PIN &amp; GST in one click.</p>
  </header>

  <!-- API URL -->
  <div class="api-bar">
    <label>API</label>
    <input type="text" id="api-url" value="/extract-card" spellcheck="false">
    <button class="reset-btn" onclick="resetUrl()">Reset</button>
  </div>

  <!-- Mode tabs -->
  <div class="tabs">
    <button class="tab-btn active" onclick="setMode('single',this)">Single Card</button>
    <button class="tab-btn" onclick="setMode('batch',this)">Batch (up to 10)</button>
  </div>

  <!-- Upload zone -->
  <div class="upload-section">
    <div class="drop-zone" id="drop-zone">
      <!-- accept images AND PDFs in the same input -->
      <input type="file" id="file-input" accept="image/jpeg,image/png,image/webp,application/pdf">
      <span class="drop-icon">🪪</span>
      <h3>Drop, paste, or click to browse</h3>
      <p><kbd>Ctrl+V</kbd> / <kbd>⌘V</kbd> to paste an image from clipboard</p>
      <div class="format-badges">
        <span class="fmt-badge">JPG</span>
        <span class="fmt-badge">PNG</span>
        <span class="fmt-badge">WEBP</span>
        <span class="fmt-badge pdf">PDF</span>
      </div>
    </div>
    <div id="preview-strip"></div>
  </div>

  <button class="submit-btn" id="submit-btn" onclick="doSubmit()">
    <div class="spinner"></div>
    <span class="btn-text">Extract Data</span>
  </button>

  <div id="status"></div>

  <div id="results-section" style="display:none">
    <div class="results-header">Extracted Results</div>
    <div id="results-container"></div>
  </div>

</div>
<script>
/* ── State ── */
let mode  = 'single';
let files = [];

/* ── Relative base URL ── */
const DEFAULT_SINGLE = '/extract-card';
const DEFAULT_BATCH  = '/extract-card/batch';

function resetUrl() {
  document.getElementById('api-url').value = mode === 'single' ? DEFAULT_SINGLE : DEFAULT_BATCH;
}

/* ── Mode ── */
function setMode(m, el) {
  mode = m;
  document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
  el.classList.add('active');
  document.getElementById('file-input').multiple = (m === 'batch');
  document.getElementById('api-url').value = m === 'single' ? DEFAULT_SINGLE : DEFAULT_BATCH;
  clearFiles();
}

/* ── Drag & drop ── */
const dz = document.getElementById('drop-zone');
dz.addEventListener('dragover',  e => { e.preventDefault(); dz.classList.add('dragover'); });
dz.addEventListener('dragleave', () => dz.classList.remove('dragover'));
dz.addEventListener('drop', e => {
  e.preventDefault();
  dz.classList.remove('dragover');
  addFiles([...e.dataTransfer.files]);
});

document.getElementById('file-input').addEventListener('change', e => {
  addFiles([...e.target.files]);
  e.target.value = '';
});

/* ── Clipboard paste (Ctrl+V / ⌘V) — images only, PDFs can't be pasted ── */
document.addEventListener('paste', e => {
  const items = [...(e.clipboardData?.items || [])];
  const imgs  = items.filter(i => i.type.startsWith('image/'));
  if (!imgs.length) return;
  e.preventDefault();

  const pasted = imgs.map(i => i.getAsFile()).filter(Boolean);
  addFiles(pasted);

  dz.classList.remove('paste-flash');
  void dz.offsetWidth;
  dz.classList.add('paste-flash');
  dz.addEventListener('animationend', () => dz.classList.remove('paste-flash'), { once: true });

  setStatus(`✓ ${pasted.length} image${pasted.length > 1 ? 's' : ''} pasted from clipboard.`, 'ok');
});

/* ── File management ── */
function isAccepted(f) {
  // Allow images and PDFs in the same upload zone
  return f.type.startsWith('image/') || f.type === 'application/pdf' || f.name.toLowerCase().endsWith('.pdf');
}

function addFiles(newFiles) {
  const accepted = newFiles.filter(isAccepted);
  const rejected = newFiles.length - accepted.length;
  if (!accepted.length) {
    setStatus('No supported file found. Use JPG, PNG, WEBP, or PDF.', 'err');
    return;
  }
  if (rejected > 0) {
    setStatus(`${rejected} unsupported file(s) were skipped.`, 'info');
  }
  if (mode === 'single') files = accepted.slice(0, 1);
  else files = [...files, ...accepted].slice(0, 10);
  renderPreviews();
}

function clearFiles() { files = []; renderPreviews(); }
function removeFile(i) { files.splice(i, 1); renderPreviews(); }

function isPDF(f) {
  return f.type === 'application/pdf' || f.name.toLowerCase().endsWith('.pdf');
}

function renderPreviews() {
  const strip = document.getElementById('preview-strip');
  strip.innerHTML = '';
  files.forEach((f, i) => {
    const div  = document.createElement('div');
    const name = f.name || `file-${i+1}`;

    if (isPDF(f)) {
      // PDF: show a stylised placeholder instead of an image preview
      div.className = 'preview-thumb pdf-thumb';
      div.innerHTML = `
        <span class="pdf-icon">📄</span>
        <span class="pdf-label">PDF</span>
        <button class="rm" onclick="removeFile(${i})" title="Remove">✕</button>
        <div class="fname">${esc(name)}</div>`;
    } else {
      const url = URL.createObjectURL(f);
      div.className = 'preview-thumb';
      div.innerHTML = `<img src="${url}" alt="preview">
        <button class="rm" onclick="removeFile(${i})" title="Remove">✕</button>
        <div class="fname">${esc(name)}</div>`;
    }
    strip.appendChild(div);
  });
}

/* ── Status ── */
function setStatus(msg, type) {
  const el = document.getElementById('status');
  el.textContent = msg;
  el.className   = type;
  el.style.display = msg ? 'block' : 'none';
}

/* ── Submit ── */
async function doSubmit() {
  if (!files.length) { setStatus('Please select or paste at least one image or PDF.', 'err'); return; }

  const url = document.getElementById('api-url').value.trim();
  const btn = document.getElementById('submit-btn');
  btn.disabled = true;
  btn.classList.add('loading');
  btn.querySelector('.btn-text').textContent = 'Extracting…';
  setStatus('Sending to OCR pipeline…', 'info');
  document.getElementById('results-section').style.display = 'none';
  document.getElementById('results-container').innerHTML = '';

  try {
    const fd = new FormData();
    if (mode === 'single') {
      fd.append('file', files[0], files[0].name || 'upload.pdf');
    } else {
      files.forEach((f, i) => fd.append('files', f, f.name || `file-${i+1}`));
    }

    const res = await fetch(url, { method: 'POST', body: fd });
    let data;
    try { data = await res.json(); } catch { throw new Error('Server returned a non-JSON response.'); }
    if (!res.ok) throw new Error(data.detail || `HTTP ${res.status}`);

    setStatus(`✓ Extraction complete${mode === 'batch' ? ` · ${files.length} file(s) processed` : ''}.`, 'ok');
    renderResults(Array.isArray(data) ? data : [data]);
  } catch(err) {
    setStatus('Error: ' + err.message, 'err');
  } finally {
    btn.disabled = false;
    btn.classList.remove('loading');
    btn.querySelector('.btn-text').textContent = 'Extract Data';
  }
}

/* ── Render results ── */
function renderResults(items) {
  const container = document.getElementById('results-container');
  container.innerHTML = '';
  items.forEach((d, idx) => {
    const card = document.createElement('div');
    card.className = 'result-card';
    card.innerHTML = `
      <div class="card-badge">${items.length > 1 ? `Card ${idx+1}` : 'Result'}</div>
      <div class="company-name">${esc(d.company_name) || '<span style="color:var(--muted);font-size:14px">Company name not found</span>'}</div>
      <div class="contact-person">
        ${d.contact_person ? esc(d.contact_person) : '<span style="color:var(--border)">—</span>'}
        ${d.designation ? `<span> · ${esc(d.designation)}</span>` : ''}
      </div>
      <div class="fields-grid">
        ${fld('Mobile',         d.mobile,      true)}
        ${fld('Phone / Landline', d.phone)}
        ${fld('Email',          d.email,       true)}
        ${fld('Website',        d.website)}
        ${fldFull('Address',    d.address)}
        ${fld('PIN Code',       d.pin,         true)}
        ${fld('City',           d.city)}
        ${fld('State',          d.state)}
        ${fld('Country',        d.country)}
        ${fld('GST Number',     d.gst_number,  true)}
        ${fld('Fax',            d.fax)}
      </div>
      <div class="copy-row">
        <button class="copy-btn" onclick="copyJSON(this,${idx})">Copy JSON</button>
        <button class="copy-btn" onclick="copyCSV(this,${idx})">Copy CSV row</button>
      </div>`;
    container.appendChild(card);
  });
  window._results = items;
  document.getElementById('results-section').style.display = 'block';
}

function fld(label, val, hi=false) {
  const empty = !val || !val.trim();
  return `<div class="field">
    <span class="lbl">${label}</span>
    <span class="val ${empty?'empty':hi?'hi':''}">${empty?'not found':esc(val)}</span>
  </div>`;
}
function fldFull(label, val) {
  const empty = !val || !val.trim();
  return `<div class="field" style="grid-column:1/-1">
    <span class="lbl">${label}</span>
    <span class="val ${empty?'empty':''}">${empty?'not found':esc(val).replace(/\|/g,'<br>')}</span>
  </div>`;
}

function esc(s) {
  return String(s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
}

/* ── Copy helpers ── */
async function safeCopy(btn, text, label) {
  try {
    await navigator.clipboard.writeText(text);
  } catch {
    const ta = document.createElement('textarea');
    ta.value = text;
    ta.style.cssText = 'position:fixed;opacity:0';
    document.body.appendChild(ta);
    ta.select();
    document.execCommand('copy');
    document.body.removeChild(ta);
  }
  btn.textContent = '✓ Copied!';
  btn.classList.add('copied');
  setTimeout(() => { btn.textContent = label; btn.classList.remove('copied'); }, 1800);
}

function copyJSON(btn, idx) {
  safeCopy(btn, JSON.stringify(window._results[idx], null, 2), 'Copy JSON');
}
function copyCSV(btn, idx) {
  const d    = window._results[idx];
  const keys = ['company_name','contact_person','designation','mobile','phone','email','address','pin','city','state','country','gst_number','website','fax'];
  const row  = keys.map(k => `"${String(d[k]||'').replace(/"/g,'""')}"`).join(',');
  safeCopy(btn, keys.join(',') + '\n' + row, 'Copy CSV row');
}
</script>
</body>
</html>