openprompt-lang 1.2.6 → 1.3.0

package/src/core/webscrape/analyzer.js

@@ -0,0 +1,481 @@
+// @use(kind, contract, limit, deps)
+// @kind(module)
+// @contract(in: html+url -> out: extraction plan, sideEffect: llama3.2 API call)
+// @limit(lines: 350)
+// @deps(node-fetch)
+
+/**
+ * Analyzer OPL — Analiza la estructura de una página web usando Ollama (llama3.2)
+ * y genera un plan de extracción personalizado.
+ *
+ * En lugar de reglas fijas (Readability.js solo para artículos), el analyzer
+ * entiende el tipo de página y dice QUÉ extraer y CÓMO.
+ *
+ * Flujo:
+ *   1. Recibe HTML + URL
+ *   2. Genera un resumen estructural compacto (~1500 chars)
+ *   3. Envía a llama3.2 con un prompt que pide un plan JSON
+ *   4. Parsea y valida la respuesta
+ *   5. Devuelve el plan de extracción
+ *
+ * Uso:
+ *   import { analyzePage } from "./analyzer.js"
+ *   const plan = await analyzePage(html, url)
+ *   // plan.pageType → "catalog-home" | "category-index" | "item-list" | "article"
+ *   // plan.contentBlocks → [{type, selector, importance, extractMode}]
+ *   // plan.links → [{url, type, text}]
+ */
+
+import chalk from "chalk"
+
+// ─── Constantes ────────────────────────────────────────────────────
+
+const OLLAMA_URL = "http://localhost:11434/api/generate"
+const MODEL = "llama3.2"
+const TIMEOUT_MS = 30000
+const MAX_TOKENS = 1024
+
+// ─── Tipos de página que el analyzer puede detectar ─────────────────
+
+export const PAGE_TYPES = {
+  CATALOG_HOME: "catalog-home",
+  CATEGORY_INDEX: "category-index",
+  ITEM_LIST: "item-list",
+  ITEM_DETAIL: "item-detail",
+  ARTICLE: "article",
+  PRODUCT: "product",
+  DOCS: "docs",
+  PORTFOLIO: "portfolio",
+  LANDING: "landing",
+  UNKNOWN: "unknown",
+}
+
+// ─── Handler principal ─────────────────────────────────────────────
+
+/**
+ * Analiza una página web y genera un plan de extracción.
+ *
+ * @param {string} html - HTML completo de la página
+ * @param {string} url - URL de la página
+ * @param {Object} [options]
+ * @param {string} [options.model='llama3.2'] - Modelo Ollama
+ * @param {number} [options.timeout=30000] - Timeout en ms
+ * @returns {Promise<Object>} Plan de extracción
+ */
+export async function analyzePage(html, url, options = {}) {
+  const model = options.model || MODEL
+  const timeout = options.timeout || TIMEOUT_MS
+
+  // Generar resumen estructural
+  const summary = buildStructuralSummary(html, url)
+
+  // Construir prompt
+  const prompt = buildPrompt(summary, url)
+
+  // Enviar a Ollama
+  const plan = await queryOllama(prompt, model, timeout)
+
+  // Validar y enriquecer el plan
+  const enrichedPlan = enrichPlan(plan, summary, url)
+
+  return enrichedPlan
+}
+
+// ─── Resumen estructural ───────────────────────────────────────────
+
+/**
+ * Genera un resumen compacto de la estructura HTML.
+ * NO envía el HTML completo — solo métricas y patrones clave.
+ *
+ * @param {string} html
+ * @param {string} url
+ * @returns {Object} summary
+ */
+function buildStructuralSummary(html, url) {
+  const textContent = html
+    .replace(/<[^>]+>/g, " ")
+    .replace(/\s+/g, " ")
+    .trim()
+
+  // Conteo de elementos
+  const elementCounts = {
+    div: (html.match(/<div[ >]/gi) || []).length,
+    article: (html.match(/<article[ >]/gi) || []).length,
+    section: (html.match(/<section[ >]/gi) || []).length,
+    nav: (html.match(/<nav[ >]/gi) || []).length,
+    main: (html.match(/<main[ >]/gi) || []).length,
+    aside: (html.match(/<aside[ >]/gi) || []).length,
+    footer: (html.match(/<footer[ >]/gi) || []).length,
+    header: (html.match(/<header[ >]/gi) || []).length,
+    table: (html.match(/<table[ >]/gi) || []).length,
+    form: (html.match(/<form[ >]/gi) || []).length,
+    img: (html.match(/<img[ >]/gi) || []).length,
+    video: (html.match(/<video[ >]/gi) || []).length,
+    a: (html.match(/<a[ >]/gi) || []).length,
+    button: (html.match(/<button[ >]/gi) || []).length,
+    ul: (html.match(/<ul[ >]/gi) || []).length,
+    ol: (html.match(/<ol[ >]/gi) || []).length,
+    li: (html.match(/<li[ >]/gi) || []).length,
+    pre: (html.match(/<pre[ >]/gi) || []).length,
+    code: (html.match(/<code[ >]/gi) || []).length,
+    iframe: (html.match(/<iframe[ >]/gi) || []).length,
+  }
+
+  // Headings
+  const headings = []
+  for (let i = 1; i <= 6; i++) {
+    const matches = html.match(new RegExp(`<h${i}[^>]*>([^<]+)`, "gi"))
+    if (matches) {
+      matches.forEach((m) => {
+        const text = m.replace(/<[^>]+>/g, "").trim()
+        if (text.length > 2) {
+          headings.push({ level: i, text: text.slice(0, 80) })
+        }
+      })
+    }
+  }
+
+  // Links principales (hrefs internos)
+  const allLinks = [...html.matchAll(/href=(\S+?)(?:\s|>)/g)]
+  const internalLinks = []
+  const externalLinks = []
+  const seen = new Set()
+
+  allLinks.forEach((m) => {
+    let href = m[1]
+    if (
+      (href.startsWith('"') && href.endsWith('"')) ||
+      (href.startsWith("'") && href.endsWith("'"))
+    ) {
+      href = href.slice(1, -1)
+    }
+    if (
+      seen.has(href) ||
+      href.startsWith("#") ||
+      href.startsWith("javascript") ||
+      href.startsWith("mailto") ||
+      href.startsWith("tel")
+    )
+      return
+    seen.add(href)
+
+    if (href.startsWith("http")) {
+      externalLinks.push(href.slice(0, 80))
+    } else if (href.length > 2 && !href.endsWith(".css") && !href.endsWith(".js")) {
+      internalLinks.push(href.slice(0, 80))
+    }
+  })
+
+  // Meta info
+  const title = (html.match(/<title>([^<]+)<\/title>/i) || [])[1] || ""
+  const description =
+    (html.match(/<meta[^>]*name=["']description["'][^>]*content=["']([^"']+)["']/i) || [])[1] || ""
+  const ogTitle =
+    (html.match(/<meta[^>]*property=["']og:title["'][^>]*content=["']([^"']+)["']/i) || [])[1] || ""
+  const hasOG = html.includes("og:title") || html.includes("og:description")
+  const hasTwitter = html.includes("twitter:card")
+  const hasJSONLD = html.includes("application/ld+json")
+
+  // Cards (posibles items de catálogo)
+  const cardPatterns = [
+    ...new Set([
+      ...(html.match(/class="?card[^" ]*"?/gi) || []),
+      ...(html.match(/class="?item[^" ]*"?/gi) || []),
+      ...(html.match(/class="?product[^" ]*"?/gi) || []),
+      ...(html.match(/class="?snippet[^" ]*"?/gi) || []),
+    ]),
+  ]
+
+  // Texto visible de la página (primeros ~1500 chars)
+  const visibleText = textContent.slice(0, 1500).trim()
+
+  // Detectar navegación
+  const navText = extractNavText(html)
+
+  return {
+    url,
+    title: title || ogTitle || "",
+    description: description.slice(0, 200),
+    sizeKB: (html.length / 1024).toFixed(0),
+    hasOG,
+    hasTwitter,
+    hasJSONLD,
+    elements: elementCounts,
+    headings: headings.slice(0, 20),
+    internalLinks: internalLinks.slice(0, 30),
+    externalLinks: externalLinks.slice(0, 10),
+    cardClasses: cardPatterns.slice(0, 10),
+    visibleText: visibleText.slice(0, 1500),
+    navText: navText.slice(0, 300),
+    totalLinks: allLinks.length,
+    hasPagination: html.includes("page=") || html.includes("/page/") || html.includes("pagination"),
+    hasLoadMore:
+      html.includes("load-more") || html.includes("loadMore") || html.includes("Load More"),
+    hasInfiniteScroll: html.includes("infinite-scroll") || html.includes("infiniteScroll"),
+    hasPopover: html.includes("popover") || html.includes("popovertarget"),
+    hasCodePen: html.includes("codepen") || html.includes("data-slug-hash"),
+  }
+}
+
+/**
+ * Extrae texto de navegación del HTML (para entender la estructura del sitio).
+ */
+function extractNavText(html) {
+  const navMatch = html.match(/<nav[^>]*>([\s\S]{0,2000}?)<\/nav>/i)
+  if (!navMatch) return ""
+
+  return navMatch[1]
+    .replace(/<[^>]+>/g, " ")
+    .replace(/\s+/g, " ")
+    .trim()
+}
+
+// ─── Prompt ────────────────────────────────────────────────────────
+
+/**
+ * Construye el prompt para Ollama.
+ * Pide un plan JSON compacto con el tipo de página, bloques de contenido
+ * y enlaces a seguir.
+ *
+ * @param {Object} summary - Resumen estructural
+ * @param {string} url - URL de la página
+ * @returns {string} Prompt
+ */
+function buildPrompt(summary, url) {
+  const elements = summary.elements
+  const headings = summary.headings
+    .slice(0, 8)
+    .map((h) => `  H${h.level}: ${h.text}`)
+    .join("\n")
+  const internals = summary.internalLinks.slice(0, 10).join("\n    ")
+  const cards = summary.cardClasses.join(", ")
+
+  return `Eres un clasificador de páginas web. Analiza la estructura y responde SOLO con JSON.
+
+## PÁGINA
+URL: ${url}
+Título: ${summary.title || "(sin título)"}
+Descripción: ${summary.description || "(sin descripción)"}
+Tamaño: ${summary.sizeKB} KB
+
+## ELEMENTOS
+Divs:${elements.div} Articles:${elements.article} Sections:${elements.section} Nav:${elements.nav} Main:${elements.main}
+Links:${elements.a} Buttons:${elements.button} Imgs:${elements.img} Lists:${elements.ul + elements.ol}
+Tables:${elements.table} Forms:${elements.form} Code:${elements.pre + elements.code} Iframes:${elements.iframe}
+${cards ? `Cards:${cards}` : ""}
+
+## ENCABEZADOS (primeros 8)
+${headings || "(ninguno)"}
+
+## LINKS INTERNOS (primeros 10)
+${internals || "(ninguno)"}
+
+## INDICADORES
+OG:${summary.hasOG} Twitter:${summary.hasTwitter} JSONLD:${summary.hasJSONLD}
+Paginación:${summary.hasPagination} LoadMore:${summary.hasLoadMore} Popovers:${summary.hasPopover} CodePen:${summary.hasCodePen}
+
+## TEXTO INICIO
+${summary.visibleText.slice(0, 400)}
+
+## REGLAS DE CLASIFICACIÓN
+- catalog-home: página principal de un sitio con menú de tecnologías/categorías
+- category-index: lista de subcategorías (ej: /tailwind-code-examples/ muestra buttons, cards, navbars, etc)
+- item-list: grid de items/cards con previews (ej: /tailwind-buttons/ muestra 30+ botones)
+- article: artículo/blog con texto principal
+- docs: documentación con secciones y navegación
+- product: página de un producto individual
+- landing: landing page con hero, features, CTA
+- unknown: no coincide con nada
+
+## RESPONDE SOLO JSON
+{
+  "pageType": "UNO de: catalog-home | category-index | item-list | article | docs | product | landing | unknown",
+  "confidence": 0-100,
+  "title": "título",
+  "description": "para qué sirve esta página en 1 frase",
+  "links": [{"url":"ruta","type":"category|subcategory|item|page|nav","text":"texto"}],
+  "contentBlocks": [{"type":"cards|sidebar|nav|footer|main-content|table|form|gallery","importance":1-10,"description":"qué contiene"}],
+  "features": ["paginacion"|"load-more"|"popover"|"codepen"|"infinito"|"none"],
+  "strategy": "navegar-subcategorias|extraer-items|extraer-articulo|extraer-generico",
+  "maxDepth": 1-3,
+  "followLinks": true,
+  "linkFilter": "palabra clave para filtrar links relevantes"
+}`
+}
+
+// ─── Ollama query ──────────────────────────────────────────────────
+
+/**
+ * Envía el prompt a Ollama y parsea la respuesta JSON.
+ *
+ * @param {string} prompt
+ * @param {string} model
+ * @param {number} timeout
+ * @returns {Promise<Object>}
+ */
+async function queryOllama(prompt, model, timeout) {
+  try {
+    const response = await fetch(OLLAMA_URL, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        model,
+        prompt,
+        stream: false,
+        options: {
+          temperature: 0.1,
+          num_predict: MAX_TOKENS,
+        },
+      }),
+      signal: AbortSignal.timeout(timeout),
+    })
+
+    if (!response.ok) {
+      throw new Error(`Ollama HTTP ${response.status}`)
+    }
+
+    const data = await response.json()
+    const text = data.response || ""
+
+    // Extraer JSON de la respuesta (puede venir con markdown ```)
+    const jsonMatch = text.match(/\{[\s\S]*\}/)
+    if (!jsonMatch) {
+      throw new Error("No se encontró JSON en la respuesta de Ollama")
+    }
+
+    return JSON.parse(jsonMatch[0])
+  } catch (error) {
+    console.log(chalk.yellow(`  ⚠️  Ollama: ${error.message}`))
+    // Fallback: devolver plan genérico
+    return getFallbackPlan()
+  }
+}
+
+// ─── Enriquecimiento del plan ──────────────────────────────────────
+
+/**
+ * Valida y enriquece el plan devuelto por Ollama.
+ * Asegura que todos los campos necesarios existan.
+ *
+ * @param {Object} plan - Plan crudo de Ollama
+ * @param {Object} summary - Resumen estructural
+ * @param {string} url
+ * @returns {Object} Plan enriquecido
+ */
+function enrichPlan(plan, summary, url) {
+  // Valores por defecto
+  const enriched = {
+    pageType: plan.pageType || PAGE_TYPES.UNKNOWN,
+    confidence: typeof plan.confidence === "number" ? plan.confidence : 50,
+    title: plan.title || summary.title || new URL(url).hostname,
+    description: plan.description || summary.description || "",
+    links: Array.isArray(plan.links) ? plan.links : [],
+    contentBlocks: Array.isArray(plan.contentBlocks) ? plan.contentBlocks : [],
+    features: Array.isArray(plan.features) ? plan.features : [],
+    strategy: plan.strategy || "extraer-generico",
+    maxDepth: typeof plan.maxDepth === "number" ? Math.min(plan.maxDepth, 3) : 1,
+    followLinks: plan.followLinks !== false,
+    linkFilter: plan.linkFilter || "",
+    // Metadata adicional
+    _summary: summary,
+    _url: url,
+    _timestamp: new Date().toISOString(),
+    _model: MODEL,
+  }
+
+  return enriched
+}
+
+// ─── Fallback ──────────────────────────────────────────────────────
+
+/**
+ * Plan genérico de fallback cuando Ollama no está disponible.
+ */
+function getFallbackPlan() {
+  return {
+    pageType: PAGE_TYPES.UNKNOWN,
+    confidence: 0,
+    title: "",
+    description: "",
+    links: [],
+    contentBlocks: [{ type: "main-content", importance: 10, description: "Contenido principal" }],
+    features: [],
+    strategy: "extraer-generico",
+    maxDepth: 1,
+    followLinks: false,
+    linkFilter: "",
+  }
+}
+
+// ─── Test directo ──────────────────────────────────────────────────
+
+/**
+ * Función de prueba para ver el analyzer en acción.
+ * Uso: node src/core/webscrape/analyzer.js <url>
+ */
+async function testAnalyzer() {
+  const url = process.argv[2] || "https://freefrontend.com/tailwind-code-examples/"
+
+  console.log("")
+  console.log(chalk.cyan(`🧠  Analyzer OPL`))
+  console.log(chalk.gray(`  URL: ${url}`))
+  console.log(chalk.gray(`  Modelo: ${MODEL}`))
+  console.log("")
+
+  const resp = await fetch(url, {
+    headers: { "User-Agent": "Mozilla/5.0 (compatible; OPL-Analyzer/1.0)" },
+  })
+  const html = await resp.text()
+
+  console.log(chalk.gray(`  HTML: ${(html.length / 1024).toFixed(0)} KB`))
+
+  const start = Date.now()
+  const plan = await analyzePage(html, url)
+  const elapsed = Date.now() - start
+
+  console.log(chalk.green(`  ✅ Analizado en ${elapsed}ms`))
+  console.log("")
+  console.log(chalk.cyan("═".repeat(50)))
+  console.log(chalk.white("📋  PLAN DE EXTRACCIÓN"))
+  console.log(chalk.cyan("═".repeat(50)))
+  console.log(
+    chalk.white(`  Tipo:      ${chalk.bold(plan.pageType)} (${plan.confidence}% confianza)`)
+  )
+  console.log(chalk.white(`  Título:    ${plan.title}`))
+  console.log(chalk.white(`  Estrategia: ${plan.strategy}`))
+  console.log(chalk.white(`  Profundidad: ${plan.maxDepth}`))
+  console.log(chalk.white(`  Seguir links: ${plan.followLinks}`))
+  if (plan.linkFilter) console.log(chalk.white(`  Filtro links: ${plan.linkFilter}`))
+
+  if (plan.contentBlocks.length > 0) {
+    console.log("")
+    console.log(chalk.gray("  Bloques de contenido:"))
+    plan.contentBlocks.forEach((b) => {
+      console.log(
+        chalk.gray(`    [${b.importance}/10] ${b.type} — ${(b.description || "").slice(0, 60)}`)
+      )
+    })
+  }
+
+  if (plan.links.length > 0) {
+    console.log("")
+    console.log(chalk.gray("  Enlaces detectados (primeros 10):"))
+    plan.links.slice(0, 10).forEach((l) => {
+      console.log(
+        chalk.gray(`    [${l.type}] ${l.url.slice(0, 40)} — ${(l.text || "").slice(0, 40)}`)
+      )
+    })
+  }
+
+  if (plan.features.length > 0) {
+    console.log("")
+    console.log(chalk.gray(`  Features: ${plan.features.join(", ")}`))
+  }
+
+  console.log("")
+}
+
+// Permitir ejecución directa
+if (process.argv[1]?.includes("analyzer")) {
+  testAnalyzer().catch(console.error)
+}