page-analyzer 1.0.0 → 1.1.1

package/scripts/serve-result-viewer.js

@@ -0,0 +1,68 @@
+import http from 'node:http';
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const projectRoot = path.resolve(__dirname, '..');
+const preferredPort = Number.parseInt(process.argv[2] || process.env.PORT || '4173', 10);
+
+const contentTypes = new Map([
+  ['.html', 'text/html; charset=utf-8'],
+  ['.json', 'application/json; charset=utf-8'],
+  ['.js', 'text/javascript; charset=utf-8'],
+  ['.css', 'text/css; charset=utf-8'],
+  ['.png', 'image/png'],
+  ['.jpg', 'image/jpeg'],
+  ['.jpeg', 'image/jpeg'],
+  ['.webp', 'image/webp'],
+  ['.svg', 'image/svg+xml']
+]);
+
+function resolveRequestPath(requestUrl) {
+  const url = new URL(requestUrl || '/', 'http://127.0.0.1');
+  const pathname = url.pathname === '/' ? '/result-viewer.html' : decodeURIComponent(url.pathname);
+  const filePath = path.resolve(projectRoot, `.${pathname}`);
+  if (!filePath.startsWith(projectRoot)) {
+    return null;
+  }
+  return filePath;
+}
+
+const server = http.createServer(async (request, response) => {
+  const filePath = resolveRequestPath(request.url);
+  if (!filePath) {
+    response.writeHead(403);
+    response.end('Forbidden');
+    return;
+  }
+
+  try {
+    const body = await fs.readFile(filePath);
+    response.writeHead(200, {
+      'Content-Type': contentTypes.get(path.extname(filePath).toLowerCase()) || 'application/octet-stream',
+      'Cache-Control': 'no-store'
+    });
+    response.end(body);
+  } catch {
+    response.writeHead(404);
+    response.end('Not found');
+  }
+});
+
+function listen(port, attemptsLeft = 20) {
+  server.once('error', (error) => {
+    if (error.code === 'EADDRINUSE' && attemptsLeft > 0) {
+      listen(port + 1, attemptsLeft - 1);
+      return;
+    }
+    throw error;
+  });
+
+  server.listen(port, '127.0.0.1', () => {
+    const address = server.address();
+    console.log(`Result viewer: http://127.0.0.1:${address.port}/result-viewer.html`);
+  });
+}
+
+listen(Number.isFinite(preferredPort) ? preferredPort : 4173);

package/test/smoke.test.js

@@ -0,0 +1,213 @@
+import assert from 'node:assert/strict';
+import { EventAnalyzer } from '../llm/analyzers/event-analyzer/event-analyzer.js';
+import { buildBlockAnalysisArtifact } from '../llm/analyzers/event-analyzer/event-analyzer-blocks.js';
+import { PageExtractor } from '../page-extractor.js';
+import '../index.js';
+
+class FakeProvider {
+  constructor() {
+    this.calls = [];
+  }
+
+  async analyze(prompt) {
+    if (prompt.includes('DOM CSV')) {
+      this.calls.push('event');
+      return 'csv_id,event_type,attributes_kv\n0,signup,intent=cta';
+    }
+
+    this.calls.push('special');
+    return [
+      'Demo page with a primary CTA',
+      'blockIdxs,blockName,blockDescription,blockPossibleEvents',
+      '0,CTASection,Primary CTA section,signup.cta_click'
+    ].join('\n');
+  }
+}
+
+class FakeLocator {
+  constructor({ count = 1, throwOnScreenshot = false } = {}) {
+    this.countValue = count;
+    this.throwOnScreenshot = throwOnScreenshot;
+    this.screenshots = [];
+  }
+
+  first() {
+    return this;
+  }
+
+  async count() {
+    return this.countValue;
+  }
+
+  async screenshot(options) {
+    this.screenshots.push(options);
+    if (this.throwOnScreenshot) {
+      throw new Error('selector screenshot failed');
+    }
+  }
+}
+
+class FakePage {
+  constructor(locator) {
+    this.locatorInstance = locator;
+    this.locatorSelectors = [];
+    this.evaluateCalls = [];
+    this.pageScreenshots = [];
+  }
+
+  locator(selector) {
+    this.locatorSelectors.push(selector);
+    return this.locatorInstance;
+  }
+
+  async evaluate(_fn, arg) {
+    this.evaluateCalls.push(arg);
+    return 1;
+  }
+
+  async screenshot(options) {
+    this.pageScreenshots.push(options);
+  }
+}
+
+const csvContent = [
+  'idx,blockIdx,tag,imageAlt,text,context,href',
+  '0,0,a,,Sign up,,https://example.com/signup'
+].join('\n');
+
+const blocks = [{
+  blockIdx: 0,
+  branchPath: 'body.0',
+  depth: 1,
+  domOrder: 1,
+  tag: 'section',
+  fixed: false,
+  top: 0,
+  left: 0,
+  width: 1000,
+  height: 200,
+  textPreview: 'Sign up',
+  childInteractiveCount: 1
+}];
+
+async function analyzeWith(options = {}) {
+  const provider = new FakeProvider();
+  const analyzer = new EventAnalyzer(provider, {});
+  const result = await analyzer.analyzeEvents(csvContent, '', [], {
+    blocks,
+    ...options
+  });
+
+  return { provider, result };
+}
+
+{
+  const { provider, result } = await analyzeWith();
+
+  assert.deepEqual(provider.calls, ['special']);
+  assert.equal(result.events_by_node.length, 0);
+  assert.equal(result.block_analysis.stats.llm_blocks, 1);
+}
+
+{
+  const { provider, result } = await analyzeWith({ analyzeNodeEvents: true });
+
+  assert.deepEqual(provider.calls, ['special', 'event']);
+  assert.equal(result.events_by_node.length, 1);
+  assert.equal(result.events_by_node[0].event_type, 'signup');
+}
+
+{
+  const extractor = new PageExtractor();
+  const locator = new FakeLocator({ count: 0 });
+  const page = new FakePage(locator);
+  const captured = await extractor.captureBlockScreenshot(page, {
+    blockCssPath: 'main > section:nth-of-type(1)',
+    left: 0,
+    top: 0,
+    width: 1200,
+    height: 300
+  }, '/tmp/block.png');
+
+  assert.equal(captured, false);
+  assert.deepEqual(page.locatorSelectors, ['main > section:nth-of-type(1)']);
+  assert.equal(page.pageScreenshots.length, 0);
+  assert.equal(page.evaluateCalls.length, 0);
+}
+
+{
+  const extractor = new PageExtractor();
+  const locator = new FakeLocator();
+  const page = new FakePage(locator);
+  const captured = await extractor.captureBlockScreenshot(page, {
+    blockCssPath: 'main > section:nth-of-type(2)'
+  }, '/tmp/block.png');
+
+  assert.equal(captured, true);
+  assert.deepEqual(locator.screenshots, [{ path: '/tmp/block.png' }]);
+  assert.equal(page.pageScreenshots.length, 0);
+  assert.equal(page.evaluateCalls.length, 2);
+}
+
+{
+  const extractor = new PageExtractor();
+  const locator = new FakeLocator({ throwOnScreenshot: true });
+  const page = new FakePage(locator);
+  const captured = await extractor.captureBlockScreenshot(page, {
+    blockCssPath: 'main > section:nth-of-type(3)',
+    left: 0,
+    top: 0,
+    width: 1200,
+    height: 300
+  }, '/tmp/block.png');
+
+  assert.equal(captured, false);
+  assert.equal(page.pageScreenshots.length, 0);
+  assert.equal(page.evaluateCalls.length, 2);
+}
+
+{
+  const extractor = new PageExtractor({
+    snapshotDir: '/tmp/page-analyzer-smoke-snapshots'
+  });
+  const locator = new FakeLocator();
+  const page = new FakePage(locator);
+  const screenshots = await extractor.captureScreenshots(page, 'https://example.com/demo', [
+    { blockName: 'Hero', blockCssPath: '#hero' },
+    { blockName: 'Footer', blockCssPath: '#footer' }
+  ], {
+    fullPageScreenshot: false,
+    blockScreenshots: true
+  });
+
+  assert.equal(screenshots.blocks.length, 2);
+  assert.deepEqual(
+    screenshots.blocks.map((item) => ({ blockIdx: item.blockIdx, blockName: item.blockName })),
+    [
+      { blockIdx: 0, blockName: 'Hero' },
+      { blockIdx: 1, blockName: 'Footer' }
+    ]
+  );
+  assert.equal(page.pageScreenshots.length, 0);
+}
+
+{
+  const artifact = buildBlockAnalysisArtifact('Demo', [{
+    blockIdx: 3,
+    blockIdxKey: '3.4',
+    blockName: 'ContentSection',
+    blockDescription: '',
+    possibleEvents: [],
+    semanticLabels: [],
+    semanticGroups: [],
+    rows: [],
+    sourceBlocks: [
+      { blockCssPath: 'body > main:nth-of-type(1) > section:nth-of-type(1)' },
+      { blockCssPath: 'body > main:nth-of-type(1) > section:nth-of-type(2)' }
+    ]
+  }], []);
+
+  assert.equal(artifact.blocks[0].blockCssPath, 'body > main:nth-of-type(1)');
+}
+
+console.log('smoke tests passed');