Report

); } ``` ## Use as og:image ```tsx theme={null} import { doc } from '@okrapdf/runtime'; export function generateMetadata({ params }) { const d = doc(params.docId); return { openGraph: { images: [d.pg[1].png()], }, }; } ``` ## PDF lead magnet landing page Upload a whitepaper, get a landing page with zero backend work: ```typescript theme={null} const session = await okra.sessions.create('whitepaper.pdf', { wait: true }); await session.publish(); const d = doc(session.id); // Everything you need for a lead magnet page: const ogImage = d.pg[1].png(); // social preview const heroPreview = d.pages[1].image.url(); // hero section const tableDownload = d.entities.tables[0].url({ format: 'csv' }); // CTA ``` ## Provider transformations Like Cloudinary's `/w_300/image.jpg`, OkraPDF uses `/t_{provider}/` to select the extraction backend. Same document, different output: ```typescript theme={null} import { doc } from '@okrapdf/runtime'; // Default extraction const d = doc('ocr-7fK3x'); d.pages[1].markdown.url() // → /v1/documents/ocr-7fK3x/pages/1/markdown // LlamaParse extraction const llama = doc('ocr-7fK3x', { provider: 'llamaparse' }); llama.pages[1].markdown.url() // → /v1/documents/ocr-7fK3x/t_llamaparse/pages/1/markdown // Compare side-by-side doc('ocr-7fK3x', { provider: 'googleocr' }).pages[1].url() doc('ocr-7fK3x', { provider: 'docling' }).pages[1].url() doc('ocr-7fK3x', { provider: 'unstructured' }).pages[1].url() ``` The provider segment is **router-only** — stripped before forwarding to the document. It tells the system which extraction backend to read from. ## Default image placeholders When a page image isn't rendered yet, the API returns 404. Add a `/d_{type}/` segment to serve an inline SVG placeholder instead — the browser shows it immediately and retries on next load (5s cache). ```typescript theme={null} // Shimmer placeholder (animated loading effect) d.pages[0].image.url() // with d_ → /v1/documents/ocr-7fK3x/d_shimmer/pages/0/image // Solid color placeholder // → /v1/documents/ocr-7fK3x/d_color:e2e8f0/pages/0/image ``` | Type | Description | | --------------- | ----------------------------------------------------- | | `d_shimmer` | Animated gradient shimmer (like skeleton loading) | | `d_color:{hex}` | Solid color rectangle, e.g. `d_color:3b82f6` for blue | **Behavior:** * R2 hit (image exists) → real PNG, `Cache-Control: immutable` * R2 miss (not ready) → SVG placeholder, `Cache-Control: max-age=5`, `X-Okra-Placeholder: true` header * No `d_` segment → 404 on miss (current behavior) Works with all URL features — combine with `t_` providers, artifact slugs, etc: ``` /v1/documents/ocr-7fK3x/t_llamaparse/d_shimmer/pages/1/image/report_a3f8b2.png ``` Use in `` tags directly — shimmer renders while the real image processes: ```html theme={null}

``` ## Artifact slugs When `fileName` is provided, URLs get cache-friendly, human-readable suffixes: ```typescript theme={null} const d = doc('ocr-7fK3x', { fileName: 'quarterly-report.pdf' }); d.url() // → /v1/documents/ocr-7fK3x/quarterly-report_a3f8b2.json d.pages[1].image.url() // → /v1/documents/ocr-7fK3x/pages/1/image/quarterly-report_a3f8b2.png d.entities.tables[0].url({ format: 'csv' }) // → /v1/documents/ocr-7fK3x/entities/tables/0/quarterly-report_a3f8b2.csv?format=csv ``` The suffix is a 6-character FNV-1a hash of the document ID. You can also provide a custom suffix: ```typescript theme={null} const d = doc('ocr-7fK3x', { fileName: 'report.pdf', suffix: 'xyz789' }); ``` Artifact slugs are cosmetic — the router strips them before forwarding. They make URLs mime-explicit and shareable. ## Browser usage Use the URL builder in browser code without Node.js: ```html theme={null} ``` Or use the global export: ```html theme={null} ``` The browser bundle exports only `doc()` — no Node.js dependencies. For data fetching in the browser, use the generated URLs with `fetch()` directly. ## Custom base URL For self-hosted deployments: ```typescript theme={null} const d = doc('ocr-7fK3x', 'https://docs.mycompany.com'); d.pg[1].png(); // https://docs.mycompany.com/v1/documents/ocr-7fK3x/pg_1.png ``` ## Private vs public URLs URLs always resolve to the same path. Access depends on whether the document is published: * **Private (default)**: URLs return 404 without API key * **Published**: URLs are publicly accessible, CDN-cacheable ```typescript theme={null} // Make URLs public const session = okra.sessions.from(docId); await session.publish(); // Now all doc(docId).*.url() paths return content without auth ``` ### App reader URL (unchanged) If you're linking to Okra's hosted reader UI, keep using: `https://app.okrapdf.com/ocr/{canonicalId}/reader`