Extraiga texto PDF en su navegador con LiteParse para la web

Extraiga texto PDF en su navegador con LiteParse para la web

23 de abril de 2026

LlamaIndex tiene un excelente proyecto de código abierto llamado LiteParse, que proporciona una herramienta CLI de Node.js para extraer texto de archivos PDF. Obtuve una versión de LiteParse que funciona completamente en el navegador, usando la mayoría de las mismas bibliotecas que usa LiteParse para ejecutarse en Node.js.

Análisis de texto espacial

Lo refrescante es que LiteParse no utiliza modelos de IA para hacer lo que hace: es un buen análisis de PDF a la antigua usanza, recurriendo a Tesseract OCR (u otros motores de OCR conectables) para archivos PDF que contienen imágenes de texto en lugar del texto en sí.

El difícil problema que resuelve LiteParse es extraer texto en un orden sensato a pesar de los exasperantes caprichos de los diseños de PDF. Describen esto como “análisis de texto espacial”: utilizan heurísticas muy inteligentes para detectar cosas como diseños de varias columnas y agrupar y devolver el texto en un flujo lineal sensible.

La documentación de LiteParse describe un patrón para implementar citas visuales con cuadros delimitadores. Realmente me gusta esta idea: poder responder preguntas desde un PDF y acompañar esas respuestas con imágenes recortadas y resaltadas parece una excelente manera de aumentar la credibilidad de las respuestas de las preguntas y respuestas estilo RAG.

LiteParse se proporciona como una herramienta CLI pura, diseñada para ser utilizada por agentes. Lo ejecutas así:

npm i -g @llamaindex/liteparse
lit parse document.pdf

Exploré sus capacidades con Claude y rápidamente determiné que no había ninguna razón real para que siguiera siendo una aplicación CLI: está construida sobre PDF.js y Tesseract.js, dos bibliotecas que he usado para algo similar en un navegador en el pasado.

La única razón por la que LiteParse no tenía una versión puramente basada en navegador es que nadie había creado una todavía…

Presentamos LiteParse para la web

Visite https://simonw.github.io/liteparse/ para probar LiteParse con cualquier archivo PDF, ejecutándose completamente en su navegador. Así es como se ve:

La herramienta puede funcionar con o sin ejecución de OCR y, opcionalmente, puede mostrar imágenes para cada página del PDF más abajo en la página.

Construyéndolo con Claude Code y Opus 4.7

El proceso de creación de esto comenzó en la aplicación Claude normal de mi iPhone. Quería probar LiteParse yo mismo, así que comencé cargando un PDF aleatorio que tenía en mi teléfono junto con este mensaje:

Clone https://github.com/run-llama/liteparse and try it against this file

El chat normal de Claude se puede clonar directamente desde GitHub hoy en día y, aunque de forma predeterminada no puede acceder a la mayor parte de Internet desde su contenedor, también puede instalar paquetes de PyPI y npm.

A menudo uso esto para probar nuevas piezas de software de código abierto en mi teléfono; es una forma rápida de ejercitar algo sin tener que sentarme frente a mi computadora portátil.

Puedes seguir mi conversación completa en esta transcripción compartida de Claude. Hice algunas preguntas de seguimiento sobre cómo funcionaba y luego pregunté:

Does this library run in a browser? Could it?

Esto me dio una respuesta lo suficientemente completa como para estar convencido de que valía la pena intentar que eso funcionara de verdad. Abrí mi computadora portátil y cambié a Claude Code.

Bifurqué el repositorio original en GitHub, cloné una copia local, comencé uno nuevo web rama y pegué la última respuesta de Claude en un nuevo archivo llamado notes.md. Entonces le dije a Claude Code:

Get this working as a web app. index.html, when loaded, should render an app that lets users open a PDF in their browser and select OCR or non-OCR mode and have this run. Read notes.md for initial research on this problem, then write out plan.md with your detailed implementation plan

Siempre me gusta comenzar con un plan para este tipo de proyecto. A veces uso el “modo de planificación” de Claude, pero en este caso sabía que querría el plan como un artefacto en el repositorio, así que le dije que escribiera plan.md directamente.

Esto también significa que puedo repetir el plan con Claude. Me di cuenta de que Claude había decidido apostar por generar capturas de pantalla de imágenes en el PDF y sugerí que pospusiéramos un “intercambio de codificación de lienzo” a v2. Lo arreglé preguntando:

Update the plan to say we WILL do the canvas-encode swap so the screenshots thing works

Después de algunas breves indicaciones de seguimiento, aquí está el plan. Pensé que era lo suficientemente fuerte como para implementarlo.

Le pregunté:

build it.

Y luego, en su mayor parte, dejó a Claude Code a su suerte, jugueteó con algunos otros proyectos, se puso al día con Duolingo y ocasionalmente revisó para ver cómo le estaba yendo.

Agregué algunas indicaciones a la cola mientras trabajaba. Esos aún no aparecen en mi transcripción exportada, pero resulta que se está ejecutando. rg queue-operation --no-filename | grep enqueue | jq -r '.content' en lo pertinente ~/.claude/projects/ carpeta los extrae.

Estas son las indicaciones clave de seguimiento con algunas notas:

• When you implement this use playwright and red/green TDD, plan that too—He escrito más sobre TDD rojo/verde aquí.
• let's use PDF.js's own renderer (estaba jugando con pdfium)
• The final UI should include both the text and the pretty-printed JSON output, both of those in textareas and both with copy-to-clipboard buttons - it should also be mobile friendly—Tenía una nueva idea sobre cómo debería funcionar la interfaz de usuario.
• small commits along the way-vea abajo
• Make sure the index.html page includes a link back to https://github.com/run-llama/liteparse near the top of the page—¡Es importante dar crédito a tus dependencias en un proyecto como este!
• View on GitHub → is bad copy because that's not the repo with this web app in, it's the web app for the underlying LiteParse library
• Run OCR should be unchecked by default
• When I try to parse a PDF in my browser I see 'Parse failed: undefined is not a function (near '...value of readableStream...')—Estaba probando con Playwright en Chrome y resultó que había un error en Safari.
• ... oh that is in safari but it works in chrome
• When "Copy" is clicked the text should change to "Copied!" for 1.5s
• (Image #1) Style the file input so that long filenames don't break things on Firefox like this - in fact add one of those drag-drop zone UIs which you can also click to select a file—Agregar capturas de pantalla de pequeños fallos en la interfaz de usuario funciona sorprendentemente bien
• Tweak the drop zone such that the text is vertically centered, right now it is a bit closer to the top
• it breaks in Safari on macOS, works in both Chrome and Firefox. On Safari I see "Parse failed: undefined is not a function (near '...value of readableStream...')" after I click the Parse button, when OCR is not checked—todavía no funcionaba en Safari…
• works in safari now —pero lo solucionó bastante rápido una vez que lo señalé y consiguió que Playwright trabajara con ese navegador.

Habitualmente comencé a pedir “pequeños compromisos a lo largo del camino” porque hace que el código sea más fácil de entender o revisar más adelante, y tengo una corazonada no comprobada de que también ayuda al agente a trabajar de manera más efectiva; es otro estímulo más para planificar y abordar un problema a la vez.

Mientras funcionaba, decidí que sería bueno poder interactuar con una versión en progreso. Solicité una sesión separada de Claude Code en el mismo directorio para obtener consejos sobre cómo ejecutarlo, y me dijo que usara npx vite. Al ejecutarlo, se inició un servidor de desarrollo con recarga en vivo, lo que significaba que podía ver instantáneamente el efecto de cada cambio que hacía en el disco y recibir más solicitudes de ajustes y correcciones.

Hacia el final decidí que sería lo suficientemente bueno para publicarlo. Comencé una nueva instancia de Claude Code y le dije:

Look at the web/ folder - set up GitHub actions for this repo such that any push runs the tests, and if the tests pass it then does a GitHub Pages deploy of the built vite app such that the web/index.html page is the index.html page for the thing that is deployed and it works on GitHub Pages

Después de un poco más de iteración, aquí está el flujo de trabajo de GitHub Actions que crea la aplicación usando Vite e implementa el resultado en https://simonw.github.io/liteparse/.

Me encantan las páginas de GitHub para este tipo de cosas porque se pueden configurar rápidamente (por Claude, en este caso) para convertir cualquier repositorio en una aplicación web implementada, sin costo alguno y con cualquier paso de compilación que sea necesario. Incluso funciona contra repositorios privados, si no le importa que su única seguridad sea una URL secreta.

Con este tipo de proyecto siempre existe un riesgo importante de que el modelo pueda “hacer trampa”: marcar características clave como “TODO” y falsificarlas, o tomar atajos que ignoren los requisitos iniciales.

La forma responsable de evitar esto es revisar todo el código… pero esto no fue pensado como ese tipo de proyecto, así que encendí OpenAI Codex con GPT-5.5 (tenía acceso de vista previa) y le dije:

Describe the difference between how the node.js CLI tool runs and how the web/ version runs

La respuesta que recibí fue suficiente para darme confianza de que Claude no había tomado ningún atajo que amenazara el proyecto.

… y eso fue todo. El tiempo total en Claude Code para ese paso de “construcción” fue de 59 minutos. Utilicé mi herramienta Claude-code-transcripts para exportar una versión legible de la transcripción completa que puedes ver aquí, aunque sin esas indicaciones adicionales en cola (aquí está mi problema para solucionarlo).

¿Esto ya es incluso codificación de vibraciones?

Soy un riguroso pedante cuando se trata de la definición original de codificación de vibraciones: la codificación de vibraciones no no Esto significa que cada vez que usas IA para ayudarte a escribir código, es cuando usas IA sin revisar ni preocuparte en absoluto por el código que está escrito.

Según mi propia definición, ¡este proyecto LiteParse para la web es la codificación de vibración más pura posible! no he mirado un sola linea del HTML y TypeScript escrito para este proyecto; de hecho, mientras escribía esta oración tuve que ir y verificar si había usado JavaScript o TypeScript.

Sin embargo, de alguna manera, este no me parece tan codificado como muchos de mis otros proyectos codificados:

• Como aplicación web estática en el navegador alojada en GitHub Pages, el radio de explosión de cualquier error es casi inexistente: funciona para su PDF o no.
• No se transfieren datos privados a ninguna parte; todo el procesamiento se realiza en su navegador, por lo que no es necesaria una auditoría de seguridad. Eché un vistazo una vez al panel de red mientras se estaba ejecutando y no se realizan solicitudes adicionales cuando se analiza un PDF.
• Todavía se necesitaba mucha experiencia y conocimientos de ingeniería para utilizar los modelos de esta manera. Identificar que trasladar LiteParse para ejecutarse directamente en un navegador fue fundamental para el resto del proyecto.

Lo más importante es que estoy feliz de vincular mi reputación a este proyecto y recomendar que otras personas lo prueben. A diferencia de la mayoría de mis herramientas codificadas por vibración, no estoy convencido de que dedicar un tiempo de ingeniería adicional significativo a esto hubiera resultado en una versión inicial significativamente mejor. ¡Está bien como está!

No abrí un PR contra el repositorio de origen porque no lo hablé con el equipo de LiteParse. Abrí un problema y si quieren mi implementación codificada por Vibe como punto de partida para algo más oficial, pueden aceptarla.