pushed

app.py

@@ -0,0 +1,356 @@
+from pathlib import Path
+import time
+import json
+import gradio as gr
+import pandas as pd
+from gocr import ScreenAIClient
+from gocr.models import int_to_hex_rgb
+
+# =========================================================
+# Lazy Singleton OCR Client
+# =========================================================
+
+_client = None
+
+
+def get_client():
+    global _client
+    if _client is None:
+        from huggingface_hub import snapshot_download
+        from pathlib import Path
+        assets_dir = Path(snapshot_download(repo_id="shethjenil/Google-OCR"))
+        lib_path = assets_dir / "libchromescreenai.so"
+        _client = ScreenAIClient(library_path=lib_path, assets_dir=assets_dir)
+        _client.init_ocr()
+
+    return _client
+
+
+# =========================================================
+# HTML Templates (loaded once from files)
+# =========================================================
+
+_TEMPLATES_DIR = Path(__file__).resolve().parent / "templates"
+
+STATS_GRID_TPL = (_TEMPLATES_DIR / "stats_grid.html").read_text()
+TREE_BLOCK_TPL = (_TEMPLATES_DIR / "tree_block.html").read_text()
+TREE_PARA_TPL = (_TEMPLATES_DIR / "tree_paragraph.html").read_text()
+TREE_LINE_TPL = (_TEMPLATES_DIR / "tree_line.html").read_text()
+TREE_WORD_BADGE_TPL = (_TEMPLATES_DIR / "tree_word_badge.html").read_text()
+EMPTY_STATE_TPL = (_TEMPLATES_DIR / "empty_state.html").read_text()
+ERROR_MSG_TPL = (_TEMPLATES_DIR / "error_msg.html").read_text()
+HEADER_HTML = (_TEMPLATES_DIR / "header.html").read_text()
+
+# =========================================================
+# Auxiliary Helper Functions
+# =========================================================
+
+
+
+def make_stats_html(metrics_dict, latency="N/A") -> str:
+    if not metrics_dict:
+        return EMPTY_STATE_TPL.format(message="No stats. Run OCR.")
+    return STATS_GRID_TPL.format(
+        avg_conf=f"{metrics_dict.get('average_confidence', 0.0):.1%}",
+        latency=latency,
+        blocks=metrics_dict.get("total_blocks", 0),
+        paragraphs=metrics_dict.get("total_paragraphs", 0),
+        lines=metrics_dict.get("total_lines", 0),
+        words=metrics_dict.get("total_words", 0),
+        symbols=metrics_dict.get("total_symbols", 0),
+        lang=metrics_dict.get("primary_language", "und"),
+    )
+
+
+def make_tree_html(parsed_data) -> str:
+    if not parsed_data:
+        return EMPTY_STATE_TPL.format(message="No layout structure. Run OCR first!")
+
+    parts = ['<div class="layout-tree">']
+    for block in parsed_data.get("blocks", []):
+        b_header = f"Block #{block['block_id']} - Conf: {block['confidence']:.1%} | BBox: [{block['bounding_box']['x']}, {block['bounding_box']['y']}, {block['bounding_box']['width']}×{block['bounding_box']['height']}]"
+
+        paras = []
+        for para in block.get("paragraphs", []):
+            pbox = para["bounding_box"]
+            p_header = f"Paragraph #{para['paragraph_id']} - Conf: {para['confidence']:.1%} | BBox: [{pbox['x']}, {pbox['y']}, {pbox['width']}×{pbox['height']}]"
+
+            lines = []
+            for line in para.get("lines", []):
+                l_header = f"Line: \"{line['utf8_string']}\" - Conf: {line['confidence']:.1%} | Lang: {line['language']} | Dir: {line['direction']}"
+
+                words_html = []
+                for word in line.get("words", []):
+                    fg_hex = int_to_hex_rgb(word["foreground_rgb_value"])
+                    bg_hex = int_to_hex_rgb(word["background_rgb_value"])
+                    tooltip = f"Confidence: {word['confidence']:.1%}\\nLanguage: {word['language']}\\nDirection: {word['direction']}\\nType: {word['content_type']}\\nColors - FG: {fg_hex} | BG: {bg_hex}\\nSpace After: {word['has_space_after']}"
+
+                    symbols_badge = ""
+                    if word.get("symbols"):
+                        sym_list = [
+                            f"'{sym['utf8_string']}' ({sym['confidence']:.1%})"
+                            for sym in word["symbols"]
+                        ]
+                        symbols_badge = f' <span title="{"\\n".join(sym_list)}" class="ml-1 border-l border-emerald-500/30 pl-1.5 text-xs opacity-60">{len(word["symbols"])} sym</span>'
+
+                    words_html.append(
+                        TREE_WORD_BADGE_TPL.format(
+                            tooltip=tooltip,
+                            text=word["utf8_string"],
+                            symbols_badge=symbols_badge,
+                        )
+                    )
+
+                lines.append(
+                    TREE_LINE_TPL.format(header=l_header, content="\n".join(words_html))
+                )
+
+            paras.append(
+                TREE_PARA_TPL.format(header=p_header, content="\n".join(lines))
+            )
+
+        parts.append(
+            TREE_BLOCK_TPL.format(header=b_header, content="\n".join(paras))
+        )
+
+    parts.append("</div>")
+    return "\n".join(parts)
+
+
+def update_explorer_table(parsed_data, level) -> pd.DataFrame:
+    if not parsed_data or not level:
+        return pd.DataFrame()
+    rows = []
+
+    if level == "Blocks":
+        for b in parsed_data.get("blocks", []):
+            rows.append(
+                {
+                    "Block ID": b["block_id"],
+                    "Text": b["utf8_string"][:100] + "..."
+                    if len(b["utf8_string"]) > 100
+                    else b["utf8_string"],
+                    "Confidence": f"{b['confidence']:.2%}",
+                    "Language": b["language"],
+                    "Paragraphs": b["paragraph_count"],
+                    "Lines": b["line_count"],
+                }
+            )
+    elif level == "Paragraphs":
+        for p in parsed_data.get("paragraphs", []):
+            rows.append(
+                {
+                    "Paragraph ID": p["paragraph_id"],
+                    "Block ID": p["block_id"],
+                    "Text": p["utf8_string"][:100] + "..."
+                    if len(p["utf8_string"]) > 100
+                    else p["utf8_string"],
+                    "Confidence": f"{p['confidence']:.2%}",
+                    "Language": p["language"],
+                    "Lines": p["line_count"],
+                }
+            )
+    elif level == "Lines":
+        for ln in parsed_data.get("lines", []):
+            rows.append(
+                {
+                    "Line Index": ln["index"],
+                    "Block ID": ln["block_id"],
+                    "Paragraph ID": ln["paragraph_id"],
+                    "Text": ln["utf8_string"],
+                    "Confidence": f"{ln['confidence']:.2%}",
+                    "Language": ln["language"],
+                    "Direction": ln["direction"],
+                    "Content Type": ln["content_type"],
+                }
+            )
+    elif level == "Words":
+        for ln in parsed_data.get("lines", []):
+            for w in ln["words"]:
+                fg_color = int_to_hex_rgb(w["foreground_rgb_value"])
+                bg_color = int_to_hex_rgb(w["background_rgb_value"])
+                rows.append(
+                    {
+                        "Word Index": w["index"],
+                        "Line Index": ln["index"],
+                        "Word Text": w["utf8_string"],
+                        "Confidence": f"{w['confidence']:.2%}",
+                        "Language": w["language"],
+                        "FG Color": fg_color,
+                        "BG Color": bg_color,
+                        "Has Space After": "Yes" if w["has_space_after"] else "No",
+                    }
+                )
+    elif level == "Symbols":
+        for ln in parsed_data.get("lines", []):
+            for w in ln["words"]:
+                for s in w["symbols"]:
+                    rows.append(
+                        {
+                            "Symbol Index": s["index"],
+                            "Word Index": w["index"],
+                            "Line Index": ln["index"],
+                            "Char": s["utf8_string"],
+                            "Confidence": f"{s['confidence']:.2%}",
+                        }
+                    )
+    return pd.DataFrame(rows)
+
+
+# =========================================================
+# OCR Core Pipeline Handler
+# =========================================================
+
+
+def process_image(image, explorer_level):
+    if image is None:
+        return (
+            "",
+            "",
+            EMPTY_STATE_TPL.format(message="No image."),
+            EMPTY_STATE_TPL.format(message="N/A"),
+            pd.DataFrame(),
+            {},
+            {},
+        )
+
+    start = time.time()
+    try:
+        client = get_client()
+        annotation = client.perform_ocr(image)
+        if not annotation:
+            return (
+                "",
+                "No text detected.",
+                EMPTY_STATE_TPL.format(message="No text found."),
+                EMPTY_STATE_TPL.format(message="N/A"),
+                pd.DataFrame(),
+                {},
+                {},
+            )
+
+        latency = f"{time.time() - start:.2f}s"
+        parsed_data = annotation.model_dump()
+        plain_text = annotation.text
+        tree_html = make_tree_html(parsed_data)
+        stats_html = make_stats_html(parsed_data["metrics"], latency)
+        df_explorer = update_explorer_table(parsed_data, explorer_level)
+
+        # Dump JSON payload for browser interactive canvas (image is loaded directly from Gradio via client-side JS)
+        payload = json.dumps({"annotation": parsed_data})
+
+        return (
+            payload,
+            plain_text,
+            tree_html,
+            stats_html,
+            df_explorer,
+            parsed_data,
+            parsed_data,
+        )
+    except Exception as e:
+        err_msg = f"ERROR occurred during processing:\n{e}"
+        return (
+            "",
+            err_msg,
+            ERROR_MSG_TPL.format(message=err_msg),
+            "Failed",
+            pd.DataFrame(),
+            {},
+            {},
+        )
+
+
+# =========================================================
+# Gradio Blocks UI Definition
+# =========================================================
+
+with gr.Blocks(
+    title="Google Chrome Screen AI OCR Dashboard",
+) as demo:
+    parsed_dict_state = gr.State(None)
+
+    gr.HTML(HEADER_HTML)
+
+    with gr.Row():
+        with gr.Column(scale=4, elem_classes=["sidebar-panel"]):
+            input_image = gr.Image(
+                type="pil",
+                label="Upload Image",
+                sources=["upload", "clipboard", "webcam"],
+                elem_id="input-image",
+            )
+            run_btn = gr.Button(
+                "Execute OCR", variant="primary", elem_id="run-btn"
+            )
+
+        with gr.Column(scale=7):
+            stats_output = gr.HTML(
+                value=EMPTY_STATE_TPL.format(message="Run OCR to see statistics.")
+            )
+
+            with gr.Tabs():
+                with gr.Tab("Interactive Canvas"):
+                    gr.HTML(value=Path("canvas.html").read_text(), js_on_load=Path("canvas.js").read_text())
+                    # Hidden text transfer element populated by python to update canvas
+                    data_transfer_el = gr.Textbox(
+                        visible=False, elem_id="ocr-data-transfer"
+                    )
+
+                with gr.Tab("Layout Tree"):
+                    tree_output = gr.HTML(label="Layout Tree")
+
+                with gr.Tab("Tabular Explorer"):
+                    explorer_level = gr.Radio(
+                        choices=["Blocks", "Paragraphs", "Lines", "Words", "Symbols"],
+                        value="Paragraphs",
+                        label="View Level",
+                    )
+                    table_output = gr.DataFrame(interactive=False, wrap=True)
+
+                with gr.Tab("Plain Text"):
+                    text_output = gr.Textbox(
+                        lines=18, label="Extracted Text"
+                    )
+
+                with gr.Tab("Developer JSON"):
+                    json_output = gr.JSON(
+                        label="Raw OCR Data"
+                    )
+
+    explorer_level.change(
+        fn=update_explorer_table,
+        inputs=[parsed_dict_state, explorer_level],
+        outputs=table_output,
+    )
+
+    run_btn.click(
+        fn=process_image,
+        inputs=[input_image, explorer_level],
+        outputs=[
+            data_transfer_el,
+            text_output,
+            tree_output,
+            stats_output,
+            table_output,
+            json_output,
+            parsed_dict_state,
+        ],
+    ).then(
+        fn=None,
+        inputs=[data_transfer_el],
+        outputs=[],
+        js="""
+        (payload_str) => {
+            if (window.loadStreamedData) {
+                window.loadStreamedData(payload_str);
+            }
+        }
+        """,
+    )
+
+if __name__ == "__main__":
+    demo.launch(
+        css=Path("custom.css").read_text(),
+        head='<script>tailwind.config={theme:{extend:{colors:{border:"hsl(var(--bd))",input:"hsl(var(--bd))",ring:"hsl(var(--ri))",background:"hsl(var(--bg))",foreground:"hsl(var(--fg))",primary:{DEFAULT:"hsl(var(--pr))",foreground:"hsl(var(--fg))"},secondary:{DEFAULT:"hsl(var(--bd))",foreground:"hsl(var(--fg))"},destructive:{DEFAULT:"hsl(0 62.8% 30.6%)",foreground:"hsl(var(--fg))"},muted:{DEFAULT:"hsl(var(--mu))",foreground:"hsl(var(--mu-fg))"},accent:{DEFAULT:"hsl(var(--ac))",foreground:"hsl(var(--ac-fg))"},card:{DEFAULT:"hsl(var(--ca))",foreground:"hsl(var(--ca-fg))"},popover:{DEFAULT:"hsl(var(--ca))",foreground:"hsl(var(--ca-fg))"}},borderRadius:{lg:"var(--rd)",md:"calc(var(--rd)-2px)",sm:"calc(var(--rd)-4px)"}}}}</script><script src="https://cdn.tailwindcss.com"></script>',
+    )

canvas.html

@@ -0,0 +1,59 @@
+<div class="flex flex-col gap-3 rounded-xl border border-border bg-card p-4">
+  <div class="flex flex-wrap items-center justify-between gap-2 rounded-lg border border-border bg-muted/50 p-2.5">
+    <div class="canvas-toggles flex flex-wrap gap-1.5">
+      <label class="has-[:checked]:bg-pink-500/20 has-[:checked]:text-pink-300 has-[:checked]:ring-1 has-[:checked]:ring-pink-500/40 inline-flex cursor-pointer items-center gap-1.5 rounded-full px-3 py-1 text-xs font-medium text-muted-foreground transition-all hover:bg-white/5">
+        <input type="checkbox" id="cb-blocks" class="sr-only">
+        <span class="inline-block h-2 w-2 rounded-full bg-pink-400"></span>Blocks
+      </label>
+      <label class="has-[:checked]:bg-cyan-500/20 has-[:checked]:text-cyan-300 has-[:checked]:ring-1 has-[:checked]:ring-cyan-500/40 inline-flex cursor-pointer items-center gap-1.5 rounded-full px-3 py-1 text-xs font-medium text-muted-foreground transition-all hover:bg-white/5">
+        <input type="checkbox" id="cb-paragraphs" checked class="sr-only">
+        <span class="inline-block h-2 w-2 rounded-full bg-cyan-400"></span>Paragraphs
+      </label>
+      <label class="has-[:checked]:bg-violet-500/20 has-[:checked]:text-violet-300 has-[:checked]:ring-1 has-[:checked]:ring-violet-500/40 inline-flex cursor-pointer items-center gap-1.5 rounded-full px-3 py-1 text-xs font-medium text-muted-foreground transition-all hover:bg-white/5">
+        <input type="checkbox" id="cb-lines" checked class="sr-only">
+        <span class="inline-block h-2 w-2 rounded-full bg-violet-400"></span>Lines
+      </label>
+      <label class="has-[:checked]:bg-emerald-500/20 has-[:checked]:text-emerald-300 has-[:checked]:ring-1 has-[:checked]:ring-emerald-500/40 inline-flex cursor-pointer items-center gap-1.5 rounded-full px-3 py-1 text-xs font-medium text-muted-foreground transition-all hover:bg-white/5">
+        <input type="checkbox" id="cb-words" checked class="sr-only">
+        <span class="inline-block h-2 w-2 rounded-full bg-emerald-400"></span>Words
+      </label>
+      <label class="has-[:checked]:bg-amber-500/20 has-[:checked]:text-amber-300 has-[:checked]:ring-1 has-[:checked]:ring-amber-500/40 inline-flex cursor-pointer items-center gap-1.5 rounded-full px-3 py-1 text-xs font-medium text-muted-foreground transition-all hover:bg-white/5">
+        <input type="checkbox" id="cb-symbols" class="sr-only">
+        <span class="inline-block h-2 w-2 rounded-full bg-amber-400"></span>Symbols
+      </label>
+      <label class="has-[:checked]:bg-red-500/20 has-[:checked]:text-red-300 has-[:checked]:ring-1 has-[:checked]:ring-red-500/40 inline-flex cursor-pointer items-center gap-1.5 rounded-full px-3 py-1 text-xs font-medium text-muted-foreground transition-all hover:bg-white/5">
+        <input type="checkbox" id="cb-whitespace" class="sr-only">
+        <span class="inline-block h-2 w-2 rounded-full bg-red-400"></span>Whitespace
+      </label>
+    </div>
+    <div class="flex items-center gap-2">
+      <div class="flex items-center gap-1 rounded-lg border border-border bg-background px-2 py-1">
+        <button id="btn-zoom-out" class="flex h-6 w-6 items-center justify-center rounded text-xs text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground" title="Zoom Out">−</button>
+        <span id="zoom-level-text" class="min-w-[3ch] text-center text-xs font-semibold text-foreground">100%</span>
+        <button id="btn-zoom-in" class="flex h-6 w-6 items-center justify-center rounded text-xs text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground" title="Zoom In">+</button>
+      </div>
+      <button id="btn-zoom-reset" class="rounded-md border border-border bg-background px-2 py-1 text-xs font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground">Reset</button>
+    </div>
+  </div>
+
+  <div class="grid grid-cols-1 gap-3 lg:grid-cols-[3fr_2fr]">
+    <div id="canvas-viewport" class="canvas-viewport-container relative flex min-h-[400px] max-h-[600px] cursor-grab select-none items-center justify-center overflow-hidden rounded-lg border border-border bg-background">
+      <div class="viewport-wrapper relative inline-block max-w-full" style="transform-origin:center center">
+        <img id="ocr-svg-image" class="block max-w-full select-none" style="-webkit-user-drag:none">
+        <svg id="ocr-svg-overlay" class="pointer-events-auto absolute inset-0 h-full w-full"></svg>
+      </div>
+      <div id="canvas-placeholder-msg" class="absolute text-sm font-medium text-muted-foreground select-none pointer-events-none">No image loaded</div>
+    </div>
+
+    <div class="flex max-h-[600px] flex-col gap-3 overflow-y-auto rounded-lg border border-border bg-card p-4">
+      <div class="border-b border-border pb-2">
+        <span class="text-sm font-semibold text-foreground">Properties</span>
+      </div>
+      <div id="details-content-area" class="flex-1">
+        <div class="flex h-full min-h-[200px] items-center justify-center px-2">
+          <p class="text-center text-xs text-muted-foreground">Click any element inside the canvas to inspect its properties</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

canvas.js

@@ -0,0 +1,136 @@
+(function () {
+  const $ = (s, c) => (c || document).querySelector(s),
+    $$ = (s, c) => (c || document).querySelectorAll(s),
+    O = $('#ocr-svg-overlay'),
+    I = $('#ocr-svg-image'),
+    P = $('#canvas-placeholder-msg'),
+    D = $('#details-content-area'),
+    V = $('.canvas-viewport-container'),
+    W = $('.viewport-wrapper'),
+    Z = $('#zoom-level-text'),
+    btn = id => $(`#btn-zoom-${id}`);
+
+  let z = 1, px = 0, py = 0, dr = 0, dragging = false, sx = 0, sy = 0;
+
+  const upd = () => { W && (W.style.transform = `translate(${px}px,${py}px) scale(${z})`); Z && (Z.innerText = `${Math.round(z * 100)}%`); },
+    zoom = f => { z = Math.min(5, Math.max(.5, z * f)); upd(); },
+    reset = () => { z = 1; px = 0; py = 0; upd(); };
+
+  [['In', () => zoom(1.2)], ['Out', () => zoom(1 / 1.2)], ['Reset', reset]].forEach(([id, fn]) => {
+    const b = btn(id.toLowerCase());
+    b && b.addEventListener('click', e => { e.stopPropagation(); fn(); });
+  });
+
+  V && (I.addEventListener('dragstart', e => e.preventDefault()),
+    V.addEventListener('wheel', e => { e.preventDefault(); zoom(e.deltaY < 0 ? 1.15 : .85); }, { passive: !1 }),
+    V.addEventListener('mousedown', e => {
+      if (e.target.closest('button,input')) return;
+      dragging = !0; dr = 0; sx = e.clientX - px; sy = e.clientY - py;
+      V.style.cursor = 'grabbing'; e.preventDefault();
+    }),
+    window.addEventListener('mousemove', e => {
+      if (!dragging) return;
+      const dx = e.clientX - (sx + px), dy = e.clientY - (sy + py);
+      dr += Math.sqrt(dx * dx + dy * dy);
+      px = e.clientX - sx; py = e.clientY - sy; upd();
+    }),
+    window.addEventListener('mouseup', () => { dragging && (dragging = !1, V.style.cursor = 'grab'); }));
+
+  const src = () => { const c = $('#input-image'); return c && c.querySelector('img')?.src || null; },
+    CELL = (k, v, c = 'text-foreground') => `<span class="text-xs font-medium text-muted-foreground">${k}</span><span class="text-xs font-semibold ${c}">${v}</span>`,
+    EMPTY = '<div class="flex h-full min-h-[200px] items-center justify-center px-2"><p class="text-center text-xs text-muted-foreground">Click any element inside the canvas to inspect its properties</p></div>';
+
+  function populate(data) {
+    O.innerHTML = '';
+    if (!data) return;
+    const el = [];
+    ['blocks', 'paragraphs'].forEach(k => (data[k] || []).forEach(v => el.push({ t: k == 'blocks' ? 'Block' : 'Paragraph', d: v })));
+    (data.lines || []).forEach(l => {
+      el.push({ t: 'Line', d: l });
+      (l.words || []).forEach(w => {
+        el.push({ t: 'Word', d: w });
+        (w.symbols || []).forEach(s => el.push({ t: 'Symbol', d: s }));
+        w.whitespace_bounding_box && el.push({ t: 'Whitespace', d: { bounding_box: w.whitespace_bounding_box } });
+      });
+    });
+    const order = ['Block', 'Paragraph', 'Line', 'Word', 'Symbol', 'Whitespace'];
+    el.sort((a, b) => order.indexOf(a.t) - order.indexOf(b.t));
+    window.ocr = el;
+    el.forEach((e, i) => {
+      const b = e.d.bounding_box;
+      if (!b) return;
+      const r = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+      r.setAttribute('class', `ocr-box box-${e.t.toLowerCase()}`);
+      r.setAttribute('x', b.x); r.setAttribute('y', b.y);
+      r.setAttribute('width', b.width); r.setAttribute('height', b.height);
+      b.angle && r.setAttribute('transform', `rotate(${b.angle},${b.x + b.width / 2},${b.y + b.height / 2})`);
+      r.setAttribute('data-idx', i);
+      O.appendChild(r);
+    });
+  }
+
+  const C = { Block: ['#f472b6', 'bg-pink-500/20 text-pink-400'], Paragraph: ['#22d3ee', 'bg-cyan-500/20 text-cyan-400'], Line: ['#c084fc', 'bg-violet-500/20 text-violet-400'], Word: ['#34d399', 'bg-emerald-500/20 text-emerald-400'], Symbol: ['#fbbf24', 'bg-amber-500/20 text-amber-400'], Whitespace: ['#f87171', 'bg-red-500/20 text-red-400'] };
+
+  function meta(item) {
+    const d = item.d, b = d.bounding_box, t = item.t, cl = (C[t] || ['#818cf8', 'bg-indigo-500/20 text-indigo-400'])[1];
+    let rows = [CELL('Type', `<span class="${cl} rounded px-2 py-0.5 text-xs font-semibold">${t}</span>`),
+    CELL('Confidence', d.confidence !== void 0 ? (d.confidence * 100).toFixed(1) + '%' : 'N/A', 'text-emerald-400')];
+    if (t == 'Line' || t == 'Word') rows.push(CELL('Language', d.language || 'N/A'), CELL('Direction', d.direction || 'N/A'), CELL('Content Type', d.content_type || 'N/A'));
+    if (t == 'Word') {
+      const f = d.foreground_rgb_hex || 'N/A', g = d.background_rgb_hex || 'N/A';
+      rows.push(CELL('FG Color', `<span class="inline-flex items-center gap-1.5"><span class="inline-block h-3 w-3 rounded border border-white/20" style="background:${f}"></span>${f}</span>`),
+        CELL('BG Color', `<span class="inline-flex items-center gap-1.5"><span class="inline-block h-3 w-3 rounded border border-white/20" style="background:${g}"></span>${g}</span>`),
+        CELL('Gray', `${d.foreground_gray_value} / ${d.background_gray_value}`),
+        CELL('Space After', d.has_space_after ? 'Yes' : 'No'));
+    }
+    rows.push(CELL('BBox', `<span class="font-mono text-[11px]">${b.x}, ${b.y}, ${b.width}×${b.height}</span>`),
+      CELL('Rotation', `<span class="font-mono text-[11px] text-amber-400">${(b.angle || 0).toFixed(1)}°</span>`));
+    D.innerHTML = `<div class="flex flex-col gap-2">${rows.map(r => `<div class="flex items-center justify-between border-b border-border pb-1.5">${r}</div>`).join('')}</div>
+<div class="mt-3 flex flex-col gap-1.5"><span class="text-[11px] font-medium text-muted-foreground">Extracted text</span><div class="rounded-lg border border-primary/30 bg-primary/10 px-3 py-2 text-sm font-bold text-foreground">${d.utf8_string || 'N/A'}</div></div>`;
+  }
+
+  O.addEventListener('click', e => {
+    if (dr > 5 || !window.ocr) return;
+    const el = e.target.closest('.ocr-box');
+    if (!el) return;
+    $$('.ocr-box.selected').forEach(x => x.classList.remove('selected'));
+    el.classList.add('selected');
+    const item = window.ocr[+el.getAttribute('data-idx')];
+    item && meta(item);
+  });
+
+  function loadImg(src) {
+    reset();
+    if (!src) { I.removeAttribute('src'); O.innerHTML = ''; P.style.display = 'block'; D.innerHTML = EMPTY; return; }
+    P.style.display = 'none';
+    I.onload = () => O.setAttribute('viewBox', `0 0 ${I.naturalWidth || I.width} ${I.naturalHeight || I.height}`);
+    I.src = src;
+  }
+
+  window.loadStreamedData = function (raw) {
+    if (!raw || !raw.trim()) { loadImg(null); I.style.filter = 'none'; return; }
+    try {
+      const p = JSON.parse(raw);
+      I.style.filter = 'none'; P.style.display = 'none'; D.innerHTML = EMPTY;
+      populate(p.annotation);
+      loadImg(src());
+    } catch (e) { console.error(e); }
+  };
+
+  (function init() {
+    const el = $('#input-image');
+    if (!el) { setTimeout(init, 150); return; }
+    new MutationObserver(() => {
+      const s = src();
+      if (s && s !== I.src) { window.ocr = null; loadImg(s); I.style.filter = 'blur(8px)'; }
+      else if (!s) { loadImg(null); I.style.filter = 'none'; }
+    }).observe(el, { childList: true, subtree: true, attributes: true });
+    const s = src();
+    s && loadImg(s);
+  })();
+
+  $$('.canvas-toggles input').forEach(el => {
+    const fn = () => O.classList.toggle('show-' + el.id.replace('cb-', ''), el.checked);
+    el.addEventListener('change', fn); fn();
+  });
+})();

custom.css

@@ -0,0 +1,116 @@
+:root {
+    --bg: 222.2 84% 4.9%;
+    --fg: 210 40% 98%;
+    --bd: 217.2 32.6% 17.5%;
+    --ri: 224.3 76.3% 48%;
+    --rd: .5rem;
+    --pr: 217.2 91.2% 59.8%;
+    --mu: 217.2 32.6% 17.5%;
+    --mu-fg: 215 20.2% 65.1%;
+    --ac: 217.2 32.6% 17.5%;
+    --ac-fg: 210 40% 98%;
+    --ca: 222.2 84% 4.9%;
+    --ca-fg: 210 40% 98%
+}
+
+body,
+.gradio-container {
+    font-family: 'Outfit', sans-serif !important;
+    background: hsl(var(--bg)) !important;
+    color: hsl(var(--fg)) !important
+}
+
+.gradio-container {
+    background: radial-gradient(circle at top right, rgba(99, 102, 241, .08), transparent 40%), radial-gradient(circle at bottom left, rgba(236, 72, 153, .05), transparent 40%), hsl(var(--bg)) !important
+}
+
+.layout-tree {
+    max-height: 550px;
+    overflow-y: auto
+}
+
+.tree-summary::before {
+    content: '\25B6';
+    display: inline-block;
+    margin-right: 8px;
+    transition: transform .2s;
+    font-size: .75rem;
+    color: hsl(var(--mu-fg))
+}
+
+.tree-item[open]>.tree-summary::before {
+    transform: rotate(90deg);
+    color: hsl(var(--ri))
+}
+
+.tree-summary::-webkit-details-marker {
+    display: none
+}
+
+.ocr-box {
+    fill: transparent;
+    cursor: pointer;
+    transition: all .15s;
+    pointer-events: auto;
+    stroke-linejoin: round
+}
+
+.ocr-box:hover {
+    fill: rgba(255, 255, 255, .08);
+    stroke-width: 2.5px !important
+}
+
+.ocr-box.selected {
+    fill: rgba(251, 191, 36, .15) !important;
+    stroke: #fbbf24 !important;
+    stroke-width: 3px !important;
+    filter: drop-shadow(0 0 3px rgba(251, 191, 36, .5))
+}
+
+.box-block {
+    stroke: rgba(244, 114, 182, .75);
+    stroke-width: 2.2px
+}
+
+.box-paragraph {
+    stroke: rgba(34, 211, 238, .75);
+    stroke-width: 1.6px
+}
+
+.box-line {
+    stroke: rgba(139, 92, 246, .75);
+    stroke-width: 1.3px
+}
+
+.box-word {
+    stroke: rgba(16, 185, 129, .75);
+    stroke-width: 1px
+}
+
+.box-symbol {
+    stroke: rgba(245, 158, 11, .75);
+    stroke-width: .8px
+}
+
+.box-whitespace {
+    stroke: rgba(239, 68, 68, .65);
+    stroke-width: .8px
+}
+
+.box-block,
+.box-paragraph,
+.box-line,
+.box-word,
+.box-symbol,
+.box-whitespace {
+    display: none
+}
+
+.show-blocks .box-block,
+.show-paragraphs .box-paragraph,
+.show-lines .box-line,
+.show-words .box-word,
+.show-symbols .box-symbol,
+.show-whitespace .box-whitespace {
+    display: block
+}

requirements.txt

@@ -0,0 +1 @@
+https://huggingface.co/spaces/shethjenil/Google-OCR/resolve/main/gocr-0.1.0-py2.py3-none-any.whl

templates/empty_state.html

@@ -0,0 +1 @@
+<div class="py-6 text-center text-sm text-gray-500">{message}</div>

templates/error_msg.html

@@ -0,0 +1 @@
+<div class="rounded-lg border border-red-500/30 bg-red-500/10 px-4 py-3 text-sm text-red-400">{message}</div>

templates/header.html

@@ -0,0 +1,5 @@
+<div class="relative mb-6 overflow-hidden rounded-2xl border border-white/10 bg-gradient-to-br from-slate-800/70 to-slate-900/80 p-6 text-center shadow-2xl backdrop-blur-md">
+  <div class="absolute inset-x-0 top-0 h-1 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500"></div>
+  <h1 class="bg-gradient-to-r from-indigo-400 via-purple-400 to-pink-400 bg-clip-text text-4xl font-extrabold tracking-tight text-transparent">Google Chrome Screen AI</h1>
+  <p class="mt-1 text-base font-light text-gray-400">Ultra-Precision Local OCR &amp; Layout Engine Diagnostic Dashboard</p>
+</div>

templates/stats_grid.html

@@ -0,0 +1,34 @@
+<div class="grid grid-cols-2 gap-3 sm:grid-cols-4">
+  <div class="rounded-xl border border-white/10 bg-gradient-to-br from-emerald-900/20 to-emerald-950/10 p-3 text-center shadow-md transition-all duration-300 hover:-translate-y-1 hover:border-emerald-500/60">
+    <div class="mb-0.5 text-xl font-bold text-white">{avg_conf}</div>
+    <div class="text-[11px] font-semibold uppercase tracking-widest text-gray-400">Avg Confidence</div>
+  </div>
+  <div class="rounded-xl border border-white/10 bg-gradient-to-br from-amber-900/20 to-amber-950/10 p-3 text-center shadow-md transition-all duration-300 hover:-translate-y-1 hover:border-amber-500/60">
+    <div class="mb-0.5 text-xl font-bold text-amber-400">{latency}</div>
+    <div class="text-[11px] font-semibold uppercase tracking-widest text-gray-400">Latency</div>
+  </div>
+  <div class="rounded-xl border border-white/10 bg-slate-900/60 p-3 text-center shadow-md transition-all duration-300 hover:-translate-y-1 hover:border-indigo-500/40">
+    <div class="mb-0.5 text-xl font-bold text-white">{blocks}</div>
+    <div class="text-[11px] font-semibold uppercase tracking-widest text-gray-400">Blocks</div>
+  </div>
+  <div class="rounded-xl border border-white/10 bg-slate-900/60 p-3 text-center shadow-md transition-all duration-300 hover:-translate-y-1 hover:border-indigo-500/40">
+    <div class="mb-0.5 text-xl font-bold text-white">{paragraphs}</div>
+    <div class="text-[11px] font-semibold uppercase tracking-widest text-gray-400">Paragraphs</div>
+  </div>
+  <div class="rounded-xl border border-white/10 bg-slate-900/60 p-3 text-center shadow-md transition-all duration-300 hover:-translate-y-1 hover:border-indigo-500/40">
+    <div class="mb-0.5 text-xl font-bold text-white">{lines}</div>
+    <div class="text-[11px] font-semibold uppercase tracking-widest text-gray-400">Lines</div>
+  </div>
+  <div class="rounded-xl border border-white/10 bg-slate-900/60 p-3 text-center shadow-md transition-all duration-300 hover:-translate-y-1 hover:border-indigo-500/40">
+    <div class="mb-0.5 text-xl font-bold text-white">{words}</div>
+    <div class="text-[11px] font-semibold uppercase tracking-widest text-gray-400">Words</div>
+  </div>
+  <div class="rounded-xl border border-white/10 bg-slate-900/60 p-3 text-center shadow-md transition-all duration-300 hover:-translate-y-1 hover:border-indigo-500/40">
+    <div class="mb-0.5 text-xl font-bold text-white">{symbols}</div>
+    <div class="text-[11px] font-semibold uppercase tracking-widest text-gray-400">Symbols</div>
+  </div>
+  <div class="rounded-xl border border-white/10 bg-slate-900/60 p-3 text-center shadow-md transition-all duration-300 hover:-translate-y-1 hover:border-indigo-500/40">
+    <div class="mb-0.5 text-lg font-bold text-indigo-400">{lang}</div>
+    <div class="text-[11px] font-semibold uppercase tracking-widest text-gray-400">Lang</div>
+  </div>
+</div>

templates/tree_block.html

@@ -0,0 +1,4 @@
+<details class="tree-item ml-3 mt-1.5 border-l-2 border-dashed border-white/10 pl-3 [&[open]]:border-l-indigo-500/40">
+  <summary class="tree-summary cursor-pointer select-none rounded-md px-3 py-1.5 text-sm font-semibold text-pink-400 transition-all hover:bg-white/5">{header}</summary>
+  <div class="py-1">{content}</div>
+</details>

templates/tree_line.html

@@ -0,0 +1,4 @@
+<details class="tree-item ml-3 mt-1.5 border-l-2 border-dashed border-white/10 pl-3 [&[open]]:border-l-indigo-500/40">
+  <summary class="tree-summary cursor-pointer select-none rounded-md px-3 py-1.5 text-sm font-medium text-violet-400 transition-all hover:bg-white/5">{header}</summary>
+  <div class="flex flex-wrap gap-2 px-4 py-2">{content}</div>
+</details>

templates/tree_paragraph.html

@@ -0,0 +1,4 @@
+<details class="tree-item ml-3 mt-1.5 border-l-2 border-dashed border-white/10 pl-3 [&[open]]:border-l-indigo-500/40">
+  <summary class="tree-summary cursor-pointer select-none rounded-md px-3 py-1.5 text-sm font-semibold text-cyan-400 transition-all hover:bg-white/5">{header}</summary>
+  <div class="py-1">{content}</div>
+</details>

templates/tree_word_badge.html

@@ -0,0 +1 @@
+<span class="inline-block cursor-help rounded-md border border-emerald-500/40 bg-emerald-500/10 px-2.5 py-1 text-sm text-white transition-all hover:scale-105 hover:border-emerald-500/80 hover:shadow-lg hover:shadow-emerald-500/20" title="{tooltip}"><strong>{text}</strong>{symbols_badge}</span>