Granite Docling

Document parsing with WebGPU acceleration

Input

e.preventDefault()} onClick={() => !selectedImage && fileInputRef.current?.click()} className="border border-dashed border-border p-12 text-center cursor-pointer transition-all hover:border-white/40 hover:bg-white/5 group" > {!selectedImage ? (

Drop image or click to upload

PNG, JPG, WEBP

e.target.files?.[0] && handleFileSelect(e.target.files[0])} />

) : (

{renderOverlays()}

)}

setPrompt(e.target.value)} className="flex-1 px-3 py-2 bg-background border border-border text-sm font-mono focus:outline-none focus:border-white/40 transition-colors" placeholder="Enter prompt..." />

{!selectedImage && ( <>

Examples

{[ { src: "/images/document.png", prompt: "Convert this page to docling.", title: "Document", }, { src: "/images/chart.png", prompt: "Convert chart to OTSL.", title: "Chart", }, { src: "/images/table.jpg", prompt: "Convert this table to OTSL.", title: "Table", }, { src: "/images/code.jpg", prompt: "Convert code to text.", title: "Code", }, ].map((example, idx) => (

!isV0Environment && handleExampleClick(example.src, example.prompt)} >

{example.title}

))}

)}

Output

{isProcessing && (

Processing

)} {doclingOutput && (

Docling HTML

)}

{!doclingOutput ? (

Awaiting input

) : showHtmlView ? (

Deployment Required

Initializing Model

Granite Docling

Input

Examples

Output

About

Tags

Share

About

Tags

Share

More from camilocbarrera

More Templates Like This

About

Tags

Share

About

Tags

Share

More from camilocbarrera

More Templates Like This