OCR

1"use client";
2 
3import * as React from "react";
4 
5import { useKeyedMountEffect } from "@/hooks/use-keyed-mount-effect";
6import { cn } from "@/lib/utils";
7import {
8  documentAiPageImages,
9  OcrLayoutBlocks,
10  type AzureDocument,
11  type DocumentAiDocument,
12  type OcrSource,
13  type TextractDocument,
14} from "@/components/ui/layout-blocks";
15 
16type ProviderId = OcrSource["provider"];
17type ProviderSample = {
18  output: unknown;
19  pageImageOutput?: DocumentAiDocument;
20};
21 
22/**
23 * OCR block — a scanned document beside its detected text blocks, confidence,
24 * and source polygons. The same viewer renders output from any supported OCR
25 * provider; pick one to see its normalized layout.
26 *
27 * Samples are loaded on demand with dynamic imports (the Document AI sample is
28 * ~21 MB) so they stay off the page's initial JavaScript.
29 */
30const PROVIDERS: {
31  id: ProviderId;
32  label: string;
33  load: () => Promise<ProviderSample>;
34}[] = [
35  {
36    id: "google-document-ai",
37    label: "Google Document AI",
38    load: async () => {
39      const output = await import("@/sample/documentai-output.json");
40      return { output: output.default };
41    },
42  },
43  {
44    id: "aws-textract",
45    label: "AWS Textract",
46    load: async () => {
47      const [output, pageImageOutput] = await Promise.all([
48        import("@/sample/textract-output.json"),
49        import("@/sample/documentai-output.json"),
50      ]);
51      return {
52        output: output.default,
53        pageImageOutput: pageImageOutput.default as DocumentAiDocument,
54      };
55    },
56  },
57  {
58    id: "azure-document-intelligence",
59    label: "Azure Document Intelligence",
60    load: async () => {
61      const [output, pageImageOutput] = await Promise.all([
62        import("@/sample/azure-output.json"),
63        import("@/sample/documentai-output.json"),
64      ]);
65      return {
66        output: output.default,
67        pageImageOutput: pageImageOutput.default as DocumentAiDocument,
68      };
69    },
70  },
71];
72 
73export function OcrBlock() {
74  const [provider, setProvider] =
75    React.useState<ProviderId>("google-document-ai");
76  const [outputs, setOutputs] = React.useState<
77    Partial<Record<ProviderId, ProviderSample>>
78  >({});
79 
80  useKeyedMountEffect(`ocr-provider:${provider}`, () => {
81    if (outputs[provider]) return;
82    let active = true;
83    const entry = PROVIDERS.find((item) => item.id === provider);
84    void entry?.load().then((sample) => {
85      if (active) {
86        setOutputs((current) => ({ ...current, [provider]: sample }));
87      }
88// … truncated