Pagina web estatica para enviar un archivo PDF y un correo electronico a un webhook de n8n. El objetivo del proyecto es automatizar la generacion de un resumen del PDF usando IA y enviar el resultado al correo indicado por el usuario.
Este proyecto esta construido con HTML, CSS y JavaScript. La pagina recibe dos datos principales:
- Un archivo PDF.
- Un correo electronico.
Al enviar el formulario, la web manda la informacion a un webhook de n8n usando una solicitud POST con formato multipart/form-data.
La pagina no procesa el PDF directamente. El procesamiento se realiza en n8n, donde el flujo debe recibir el archivo, extraer su contenido, generar un resumen con IA y enviar el resultado por correo.
- Formulario para ingresar correo electronico.
- Carga de archivo PDF mediante selector o arrastrar y soltar.
- Validacion basica del correo y del tipo de archivo.
- Envio de datos a un webhook de n8n.
- Estado visual de envio, error o exito.
- Interfaz responsive.
index.html Estructura de la pagina.
styles.css Estilos visuales y responsive.
app.js Validacion del formulario y envio al webhook de n8n.Antes de usar la pagina, configura la URL real del webhook de n8n en app.js:
const N8N_WEBHOOK_URL = "https://TU-N8N-DOMINIO/webhook/resumen-pdf";Ejemplo usando n8n local:
const N8N_WEBHOOK_URL = "http://localhost:5678/webhook/resumen-pdf";Mientras la URL siga usando TU-N8N-DOMINIO, la pagina bloqueara el envio para evitar errores de configuracion.
La pagina envia una solicitud POST con multipart/form-data.
| Campo | Tipo | Descripcion |
|---|---|---|
email |
string | Correo electronico donde se enviara el resumen. |
pdf_file |
file | Archivo PDF subido por el usuario. |
include_details |
string | Valor "true" o "false" para indicar si se incluyen puntos clave y acciones sugeridas. |
source |
string | Identificador fijo del origen: "resumen-pdf-web". |
El flujo de n8n debe realizar estos pasos:
- Recibir una solicitud
POSTdesde un nodo Webhook. - Leer el archivo binario enviado en el campo
pdf_file. - Extraer el texto del PDF.
- Enviar el texto a una IA para generar un resumen en espanol.
- Si
include_detailses"true", agregar puntos clave y acciones sugeridas. - Enviar el resumen al correo recibido en
email. - Responder al webhook con un JSON de exito.
Crea un workflow de n8n que reciba un POST multipart/form-data en un Webhook con path "resumen-pdf".
Parametros esperados:
- email: correo electronico destino.
- pdf_file: archivo binario PDF.
- include_details: string "true" o "false".
- source: string opcional, valor esperado "resumen-pdf-web".
El flujo debe:
1. Recibir el PDF desde el Webhook.
2. Extraer el texto del archivo PDF.
3. Enviar el texto a una IA para generar un resumen en espanol.
4. Si include_details es "true", incluir puntos clave y acciones sugeridas.
5. Enviar el resumen por correo a email.
6. Responder al webhook con JSON de exito.
El Webhook debe aceptar archivo binario con nombre de campo "pdf_file".Abre index.html en el navegador o publica el proyecto en GitHub Pages.
Cuando el webhook de n8n este configurado, selecciona un PDF, escribe el correo electronico y envia el formulario.
- HTML
- CSS
- JavaScript
- n8n
- IA para generacion de resumen
- Servicio de correo configurado en n8n