PRESS2PIXEL
Docs de producto

Documentación

press2pixel convierte una web en activos de redes sociales listos para campaña. Esta página documenta solo la app: crawler, extracción de marca, agrupación con IA, renderizado y edición de plantillas, planner, imports y exports, integraciones sociales, API, persistencia, auth y despliegue.

Reservar demo Abrir la app
Inicio

Inicio rápido

Arranca la app, pega una URL y deja que el servidor construya un workspace reutilizable para el cliente. El primer crawl crea filas de base de datos, contexto de identidad corporativa, campañas y previews reales.

  • Instala dependencias con npm install y arranca el servidor Express con npm start.
  • Abre http://localhost:3000 o el host del reverse proxy configurado.
  • Pega un dominio. press2pixel resuelve redirecciones, extrae señales de marca, crawlea contenido, agrupa campañas y guarda el resultado.
  • Al refrescar se conservan cliente, plantillas elegidas, captions y ajustes de diseño mediante SQLite y localStorage.
npm install
npm start
# abrir http://localhost:3000
Usa la app alojada en app.press2pixel.fun o ejecuta la misma app Node/Electron localmente durante el desarrollo.
Salida

Qué construye la app

El producto es un generador masivo de activos para redes sociales. Convierte posts, páginas, productos, eventos, listings y otros contenidos estructurados en sets visuales con marca y captions alineados.

  • Gráficos PNG listos para campaña en ratios sociales prácticos.
  • Captions IA lazy para Twitter/X, Instagram y LinkedIn, guardados por fila de contenido.
  • Exportaciones ZIP, herramientas de import/export y playlists fullscreen para signage.
  • Plantillas universales y firmas bloqueadas por cliente que solo aparecen para hosts compatibles.
  • Un editor de plantillas para JSON templates, vista previa en vivo y diseños custom guardados.
  • Un planner de proyecto que muestra próximas sincronizaciones y refreshes en ejecución.
La disponibilidad de plantillas es dinámica: estilos universales, firmas por cliente y plantillas custom se cargan desde el registro activo de la app, no desde un número público fijo.
Crawler

Pipeline de ingesta web

El crawling ocurre en el servidor para que el navegador sea solo presentacional y evite problemas CORS. El crawler intenta primero fuentes estructuradas y luego completa con extracción guiada por sitemap.

  • resolveCanonical sigue redirecciones http/https y normaliza el host del cliente.
  • extractCI recoge logo, color de marca, tipografías, idioma, imagen hero, perfiles sociales y señales de contacto.
  • WordPress REST y Shopify JSON se leen cuando están disponibles.
  • sitemap.xml, entradas Sitemap de robots, llms.txt, JSON-LD, Open Graph y HTML SPA renderizado completan las lagunas.
  • Imágenes del DOM renderizado, candidatos srcset, lazy images, backgrounds inline e imágenes de fondo CSS calculadas se extraen antes del scoring.
  • Los candidatos de imagen se puntúan para priorizar hero, cover e imágenes relacionadas con la página frente a iconos, thumbnails y logos genéricos.
POST /api/crawl/:urlId
  -> resolveCanonical()
  -> extractCI()
  -> wpScrape() / shopifyScrape()
  -> discoverUrls()
  -> extractFromPage()
  -> groupItems()
  -> persist
Las páginas pesadas en JavaScript pueden renderizarse con Playwright cuando el HTML estático parece una shell de hidratación vacía.
Backend

Superficie API

El frontend habla con una API Express compacta. Workspaces de URL, contenido, campañas, estado de sync, auth, captions, proveedores, plantillas, logs y config salen de la app Node.

  • POST /api/crawl/:urlId ejecuta el pipeline completo de sincronización para un workspace de URL guardado.
  • GET /api/urls, /api/content/:urlId y /api/campaigns/:urlId hidratan el workspace.
  • POST /api/captions/generate escribe JSON de captions generados de vuelta en content.captions.
  • GET /api/events emite actualizaciones de sync con Server-Sent Events.
  • GET /api/sync-schedule alimenta el Task Manager y el calendario del Planner.
  • Las rutas de auth, OAuth, ajustes, proveedores, custom templates, social import, tokens, logs y estadísticas del sistema alimentan la app.
GET    /api/urls
POST   /api/urls
POST   /api/crawl/:urlId
GET    /api/content/:urlId
GET    /api/campaigns/:urlId
POST   /api/captions/generate
POST   /api/social/import
GET    /api/sync-schedule
GET    /api/events
Datos

Modelo de contenido y almacenamiento

Cada item descubierto se normaliza antes de llegar a la UI. Una clave estable id_unique deduplica contenido entre sincronizaciones, mientras raw_json mantiene detalle suficiente para reparar medios y diagnosticar.

  • urls guarda URL canónica, nombre visible, JSON de identidad corporativa, preset de diseño, ajustes de idioma y último sync.
  • content guarda title, excerpt, imageUrl, date, type, source_url, raw_json, campaign_id y captions.
  • campaigns guarda grupos por workspace de URL generados por IA o heurística.
  • crawl_cache mantiene páginas cacheadas con TTL de seis horas.
  • sync_log registra inicio, fin, estado, recuentos de items y errores.
content {
  id_unique,
  url_id,
  type,
  title,
  excerpt,
  imageUrl,
  image_alts,
  source_url,
  campaign_id,
  captions
}
IA

Routing IA, agrupación y captions

La IA corre mediante Ollama local o proveedores de línea de comandos, no con llamadas directas desde el navegador. Cada tarea tiene su cadena de proveedores, modelos, fallback y procedencia.

  • La agrupación de campañas es local-first con Ollama, con fallback determinista por taxonomía.
  • La generación de captions usa una ruta de servidor, guarda metadatos de proveedor/modelo y reutiliza captions guardados al exportar.
  • La generación de plantillas y visión puede usar Gemini, Claude, Codex, MLX u Ollama según la cadena configurada.
  • El estado de rate limit y el uso de tokens se registran para saltar proveedores temporalmente no disponibles.
CAPTION_PROVIDERS=claude,gemini
GROUPING_PROVIDERS=ollama,gemini,claude
OLLAMA_URL=http://localhost:11434
OLLAMA_MODEL=gemma4:26b
Las captions se generan en el mismo idioma del item fuente cuando el modelo puede inferirlo.
Renderer

Plantillas y controles de diseño

Las plantillas son archivos JSON renderizados por el frontend. La app separa markup de plantillas y lógica de aplicación, con un contrato estricto de tokens raíz para que cada diseño responda a los mismos controles.

  • Las nuevas plantillas viven en assets/json/templates y se activan mediante index.json.
  • Las variables cubren título, excerpt, imagen, colores de marca, tipografía, espaciado, sombras, superficies y comportamiento por ratio.
  • Los tamaños usan unidades em para que sliders separados de titular y texto escalen de forma fiable.
  • Image fit y posición se enlazan con object-fit y object-position.
  • Las plantillas de marca usan customerHosts y solo aparecen para el dominio de cliente correspondiente.
font-size:100%;--p2p-headline-mul:{{headlineScale}};--p2p-text-mul:{{textScale}}
El contrato compartido template-base.css mantiene consistencia en plantillas nuevas sin quitar libertad a las firmas de marca.
Persistencia

Base de datos, backups y sync

La app usa una pequeña fachada de base de datos. SQLite es el valor por defecto; MariaDB/MySQL se puede seleccionar con DB_DRIVER sin cambiar el resto del código.

  • scripts/db/index.js expone run, all, get y migrate para todos los módulos.
  • Las migraciones son idempotentes y crean el esquema del driver activo al arrancar.
  • npm run db:backup exporta snapshots JSONL de tablas y puede importarlos después.
  • npm run db:sync copia datos entre SQLite y MariaDB/MySQL.
  • node-cron ejecuta syncs en segundo plano y omite workspaces de URL sincronizados recientemente.
DB_DRIVER=sqlite
# o
DB_DRIVER=mariadb
DB_HOST=127.0.0.1
DB_NAME=press2pixel
Operaciones

Desplegar con Docker o reverse proxy

La app puede correr directamente con Node o mediante Docker Compose. En producción, el proxy debe enviar todas las rutas de app a Node porque el servidor posee las APIs y la composición de vistas.

  • docker compose up -d arranca la app y el sidecar de Ollama.
  • Los despliegues BYO Ollama pueden apuntar OLLAMA_URL al host u otro contenedor.
  • Los ejemplos Nginx y Apache proxian todas las rutas de app a http://127.0.0.1:3000.
  • La imagen de producción excluye intencionalmente Playwright/Chromium y CLIs cloud salvo que una imagen custom los añada.
  • El empaquetado Electron puede ejecutar la misma app Express localmente para uso de escritorio.
docker compose up -d
docker compose exec ollama ollama pull gemma4:26b
Seguridad

Auth, privacidad y notas de seguridad

La app incluye autenticación de sesión, proveedores OAuth opcionales, acceso a URLs por propietario y bootstrap de administrador. Los despliegues públicos deberían combinar auth con HTTPS, rate limits, headers seguros y límites de crawl claros.

  • AUTH_ENABLED=true activa el login gate y rutas API protegidas por sesión.
  • Las contraseñas usan scrypt y las sesiones se guardan como tokens opacos en cookies HttpOnly.
  • Los botones OAuth aparecen solo cuando están configurados client IDs y secrets del proveedor.
  • El registro abierto debería cambiarse por aprobación o códigos de invitación antes de un lanzamiento amplio.
  • Un despliegue público debe forzar HTTPS y limitar rutas de crawl, IA, login y registro.
AUTH_ENABLED=true
ADMIN_EMAIL=info@example.com
ADMIN_PASSWORD=change-me
Roadmap

Control de calidad y roadmap

La app incluye tests automatizados, auditorías de plantillas, logs de sync, estado de proveedores, seguimiento de tokens y un Task Manager para diagnóstico en ejecución.

  • npm test ejecuta la auditoría de plantillas y valida JSON activo, tokens del renderer, controles de imagen, condicionales y cobertura de hosts.
  • El diagnóstico en ejecución muestra progreso de sync, logs recientes, estado de proveedores, uso de tokens y recursos del host.
  • Las auditorías de plantillas validan JSON activo, tokens requeridos del renderer, controles de imagen, condicionales y restricciones de host.
  • Los tests unitarios cubren lógica de auth, migración de base de datos, validación de plantillas, interpolación del renderer, tracking de tokens y configuración de proveedores.
npm run test:unit
npm run test:audit
npm test
Para detalles de implementación, la app mantiene documentación propia sobre API, routing de IA, drivers de base de datos, despliegue Docker, auth y plantillas.