UI: showcase SIE with diagram, code snippets, CTAs

web/public/app.js

@@ -13,9 +13,13 @@ const els = {
   footer: document.getElementById("footer"),
   sieUrl: document.getElementById("sie-url"),
   timings: document.getElementById("timings"),
+  snippetRecognition: document.getElementById("snippet-recognition"),
+  snippetStructured: document.getElementById("snippet-structured"),
+  snippetNer: document.getElementById("snippet-ner"),
 };
 
 let activeSampleId = null;
+let activeSample = null;
 let timings = { recognitionMs: 0, donutMs: 0, glinerMs: 0 };
 let donutBuf = { entities: [], data: null };
 let glinerBuf = [];
@@ -38,6 +42,57 @@ function escapeHtml(s) {
   );
 }
 
+function findModel(list, id) {
+  return list ? list.find((m) => m.id === id) : null;
+}
+
+function snippetRecognition(modelId) {
+  if (!modelConfig) return "";
+  const opt = findModel(modelConfig.recognition, modelId);
+  const hasOpts = opt && opt.options && Object.keys(opt.options).length > 0;
+  const lines = [
+    'client.extract(',
+    `    <span class="str">"${escapeHtml(modelId)}"</span>,`,
+    '    Item(images=[image_bytes]),',
+  ];
+  if (hasOpts) {
+    const optsJson = JSON.stringify(opt.options).replace(/"/g, '"');
+    lines.push(`    <span class="arg">options</span>=${escapeHtml(optsJson)},`);
+  }
+  lines.push(')');
+  return `<span class="com"># Recognition: one call against SIE</span>\n` + lines.join("\n");
+}
+
+function snippetStructured(modelId) {
+  return (
+    `<span class="com"># Structured: same client.extract, different model_id</span>\n` +
+    `client.extract(\n` +
+    `    <span class="str">"${escapeHtml(modelId)}"</span>,\n` +
+    `    Item(images=[image_bytes]),\n` +
+    `)`
+  );
+}
+
+function snippetNer(modelId, sample) {
+  const labels = sample ? sample.labels : ["merchant", "total", "date"];
+  const labelsStr = "[" + labels.map((l) => `<span class="str">"${escapeHtml(l)}"</span>`).join(", ") + "]";
+  return (
+    `<span class="com"># NER: text input this time, declared labels</span>\n` +
+    `client.extract(\n` +
+    `    <span class="str">"${escapeHtml(modelId)}"</span>,\n` +
+    `    Item(text=recognized_markdown),\n` +
+    `    <span class="arg">labels</span>=${labelsStr},\n` +
+    `)`
+  );
+}
+
+function updateSnippets() {
+  if (!els.snippetRecognition) return;
+  els.snippetRecognition.innerHTML = snippetRecognition(els.selectRecognition.value);
+  els.snippetStructured.innerHTML = snippetStructured(els.selectStructured.value);
+  els.snippetNer.innerHTML = snippetNer(els.selectNer.value, activeSample);
+}
+
 function populateDropdown(selectEl, options, defaultId) {
   selectEl.innerHTML = "";
   for (const opt of options) {
@@ -56,6 +111,7 @@ function populateDropdown(selectEl, options, defaultId) {
     node.title = opt.description;
     selectEl.appendChild(node);
   }
+  selectEl.addEventListener("change", updateSnippets);
 }
 
 function renderSamples(samples, onClick) {
@@ -78,6 +134,8 @@ function renderSamples(samples, onClick) {
     node.addEventListener("click", () => {
       for (const n of els.events.querySelectorAll(".event")) n.classList.remove("active");
       node.classList.add("active");
+      activeSample = samples.find((s) => s.id === node.dataset.id) || null;
+      updateSnippets();
       onClick(node.dataset.id);
     });
   }
@@ -219,6 +277,7 @@ async function init() {
     populateDropdown(els.selectRecognition, modelConfig.recognition, modelConfig.defaults.recognition);
     populateDropdown(els.selectStructured, modelConfig.structured, modelConfig.defaults.structured);
     populateDropdown(els.selectNer, modelConfig.ner, modelConfig.defaults.ner);
+    updateSnippets();
   } catch (e) {
     console.error("failed to load model config", e);
   }

web/public/index.html

@@ -15,17 +15,54 @@
       </div>
       <div class="meta" id="models">SIE: <code>...</code></div>
       <div class="meta" id="sie-state">checking SIE...</div>
+      <div class="cta-row">
+        <a class="cta" href="https://github.com/superlinked/brave-new-demos/tree/main/document-ocr" target="_blank" rel="noopener">
+          <span>↗</span> Source on GitHub
+        </a>
+        <a class="cta" href="https://github.com/superlinked/sie" target="_blank" rel="noopener">
+          <span>★</span> SIE repo
+        </a>
+      </div>
     </header>
 
     <section class="hero">
+      <div class="hero-text">
+        <p>
+          OCR is rarely a single-model problem. This demo runs three model
+          classes through <strong>one SIE server</strong>: a VLM-OCR recognizes
+          the document into Markdown, a fine-tuned Donut emits a JSON tree
+          directly, and a zero-shot NER (GLiNER) pulls typed fields out of
+          the recognition output. Pick a sample on the left, swap any of the
+          three models in the dropdowns, watch SIE hot-swap them with
+          <em>one identifier change</em>.
+        </p>
+      </div>
+      <div class="hero-diagram">
+        <div class="diagram">
+          <div class="diagram-input">image</div>
+          <div class="diagram-arrow">↓</div>
+          <div class="diagram-server">one SIE server · <code>client.extract(model_id, item)</code></div>
+          <div class="diagram-arrows">
+            <span>↓</span><span>↓</span><span>↓</span>
+          </div>
+          <div class="diagram-models">
+            <div class="diagram-box diagram-recognition">VLM-OCR<br><span>(Florence-2, LightOnOCR, GLM-OCR, ...)</span></div>
+            <div class="diagram-box diagram-structured">Donut<br><span>(end-to-end JSON)</span></div>
+            <div class="diagram-box diagram-ner">GLiNER<br><span>(zero-shot NER)</span></div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="why-sie">
+      <h3>Why SIE</h3>
       <p>
-        OCR is rarely a single-model problem. This demo runs three model
-        classes through one SIE server: a <strong>VLM-OCR</strong> recognizes
-        the document into Markdown, a <strong>fine-tuned Donut</strong> emits
-        a JSON tree directly, and a <strong>zero-shot NER (GLiNER)</strong>
-        pulls typed fields out of the recognition output. Pick a sample on
-        the left, swap any of the three models on the right, watch SIE
-        hot-swap them with one identifier change.
+        Three different model architectures (a vision-language model, a
+        fine-tuned encoder-decoder, a span-based NER), one inference engine,
+        one HTTP API, one SDK call. Without SIE, this demo would be three
+        separate inference services with three SDKs, three auth flows, three
+        rate limits. With SIE, swap a string in <code>client.extract(...)</code>
+        and the underlying architecture changes.
       </p>
     </section>
 
@@ -54,6 +91,10 @@
           <h2>Recognition (Markdown)</h2>
           <span class="hint" id="recognition-meta"></span>
         </header>
+        <details class="sdk-snippet">
+          <summary>See the SIE call</summary>
+          <pre><code id="snippet-recognition">// pick a recognition model in the dropdown</code></pre>
+        </details>
         <div class="markdown" id="recognition">
           <p class="hint">Click a sample on the left.</p>
         </div>
@@ -64,6 +105,12 @@
           <h2>Extraction</h2>
           <span class="hint" id="extraction-meta"></span>
         </header>
+        <details class="sdk-snippet">
+          <summary>See the SIE calls</summary>
+          <pre><code id="snippet-structured">// structured (Donut)</code>
+
+<code id="snippet-ner">// NER (GLiNER)</code></pre>
+        </details>
         <div class="extraction" id="extraction">
           <p class="hint">Typed fields will appear here.</p>
         </div>

web/public/style.css

@@ -16,13 +16,14 @@
 html, body {
   margin: 0; padding: 0; background: var(--bg); color: var(--text);
   font: 14px ui-monospace, SFMono-Regular, Menlo, monospace;
-  height: 100%;
+  min-height: 100%;
 }
-body { display: flex; flex-direction: column; }
+body { display: flex; flex-direction: column; min-height: 100vh; }
 
 header {
   display: flex; align-items: center; gap: 16px;
   padding: 12px 20px; border-bottom: 1px solid var(--line);
+  flex-wrap: wrap;
 }
 .title { display: flex; align-items: center; gap: 12px; }
 .logo { font-size: 18px; }
@@ -37,17 +38,83 @@ h1 { font-size: 16px; margin: 0; font-weight: 600; }
 .badge.red { background: rgba(255, 107, 107, 0.18); color: var(--red); }
 .meta { color: var(--muted); font-size: 12px; }
 
+.cta-row {
+  margin-left: auto; display: flex; gap: 8px;
+}
+.cta {
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 5px 10px; border-radius: 6px;
+  background: var(--line); color: var(--accent-2);
+  font-size: 11px; text-decoration: none;
+  border: 1px solid transparent;
+  transition: border-color 0.1s;
+}
+.cta:hover { border-color: var(--accent); }
+.cta span { font-size: 12px; }
+
 .hero {
-  padding: 14px 20px; background: linear-gradient(180deg, rgba(124,93,255,0.10), transparent);
+  padding: 14px 20px;
+  background: linear-gradient(180deg, rgba(124,93,255,0.10), transparent);
   border-bottom: 1px solid var(--line);
+  display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; align-items: center;
+}
+.hero-text p { margin: 0; color: var(--muted); line-height: 1.6; }
+.hero-text strong { color: var(--text); }
+.hero-text em { color: var(--accent-2); font-style: normal; font-weight: 600; }
+
+.diagram {
+  display: flex; flex-direction: column; align-items: center; gap: 2px;
+  font-size: 11px;
+}
+.diagram-input {
+  padding: 4px 14px; border: 1px dashed var(--muted); border-radius: 6px;
+  color: var(--text);
+}
+.diagram-arrow { color: var(--muted); font-size: 14px; line-height: 1; }
+.diagram-server {
+  padding: 6px 14px; border: 1px solid var(--accent); border-radius: 6px;
+  color: var(--text); background: rgba(124,93,255,0.10);
+  font-size: 11px;
+}
+.diagram-server code {
+  background: transparent; color: var(--accent-2);
+  padding: 0;
+}
+.diagram-arrows {
+  display: flex; gap: 80px; color: var(--muted); font-size: 14px;
+  line-height: 1;
+}
+.diagram-models {
+  display: flex; gap: 10px;
+}
+.diagram-box {
+  padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px;
+  background: var(--panel); color: var(--text); text-align: center;
+  min-width: 110px; font-weight: 600;
+}
+.diagram-box span {
+  display: block; color: var(--muted); font-weight: normal;
+  font-size: 9px; margin-top: 2px;
 }
-.hero p { margin: 0; color: var(--muted); max-width: 980px; line-height: 1.6; }
-.hero strong { color: var(--text); }
+.diagram-recognition { border-color: rgba(98,182,255,0.4); }
+.diagram-structured { border-color: rgba(200,156,255,0.4); }
+.diagram-ner { border-color: rgba(95,210,139,0.4); }
+
+.why-sie {
+  padding: 12px 20px; border-bottom: 1px solid var(--line);
+  background: rgba(124,93,255,0.04);
+}
+.why-sie h3 {
+  margin: 0 0 6px 0; font-size: 11px; letter-spacing: 0.6px;
+  text-transform: uppercase; color: var(--accent); font-weight: 600;
+}
+.why-sie p { margin: 0; color: var(--muted); line-height: 1.6; max-width: 1100px; }
 
 main {
   flex: 1; display: grid;
   grid-template-columns: 0.95fr 1.4fr 1.2fr;
   gap: 12px; padding: 12px 20px; overflow: hidden;
+  min-height: 480px;
 }
 
 .panel {
@@ -73,6 +140,26 @@ main {
   flex: 1; overflow: auto; padding: 12px 14px; margin: 0;
 }
 
+.sdk-snippet {
+  border-bottom: 1px solid var(--line);
+  background: rgba(0,0,0,0.2);
+  font-size: 11px;
+}
+.sdk-snippet summary {
+  padding: 6px 14px; cursor: pointer;
+  color: var(--accent-2); user-select: none;
+  font-weight: 500;
+}
+.sdk-snippet summary::marker { color: var(--accent-2); }
+.sdk-snippet pre {
+  margin: 0; padding: 8px 14px 10px;
+  white-space: pre-wrap; word-break: break-word;
+  color: var(--text); font-size: 11px; line-height: 1.45;
+}
+.sdk-snippet code .arg { color: var(--magenta); }
+.sdk-snippet code .str { color: var(--green); }
+.sdk-snippet code .com { color: var(--muted); }
+
 .meta-row {
   padding: 10px 14px; border-bottom: 1px solid var(--line);
   font-size: 11px; color: var(--muted);
@@ -146,3 +233,9 @@ footer {
   display: flex; justify-content: space-between; gap: 12px;
 }
 code { background: var(--line); padding: 1px 6px; border-radius: 4px; }
+
+@media (max-width: 900px) {
+  .hero { grid-template-columns: 1fr; }
+  main { grid-template-columns: 1fr; }
+  .cta-row { margin-left: 0; }
+}