page-analyzer 1.0.1 → 1.2.0

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,454 @@
+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 { OpenAiProvider } from '../llm/providers/openai-provider.js';
+import { PageExtractor } from '../page-extractor.js';
+import { analyzeUrl } from '../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');
+    }
+    return Buffer.from(`locator screenshot:${options?.path || 'buffer'}`);
+  }
+}
+
+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);
+    return Buffer.from(`page screenshot:${options?.path || 'buffer'}`);
+  }
+}
+
+class FakeS3Client {
+  constructor({ failPredicate = null } = {}) {
+    this.failPredicate = failPredicate;
+    this.commands = [];
+    this.attemptsByKey = new Map();
+  }
+
+  async send(command) {
+    const input = command.input;
+    this.commands.push(input);
+    const attempts = (this.attemptsByKey.get(input.Key) || 0) + 1;
+    this.attemptsByKey.set(input.Key, attempts);
+
+    if (this.failPredicate?.(input, attempts)) {
+      throw new Error(`s3 upload failed for ${input.Key}`);
+    }
+
+    return {};
+  }
+}
+
+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 originalWithPreparedPage = PageExtractor.prototype.withPreparedPage;
+  const originalExtractPreparedPage = PageExtractor.prototype.extractPreparedPage;
+  const originalCaptureScreenshots = PageExtractor.prototype.captureScreenshots;
+  const originalCaptureUrlScreenshots = PageExtractor.prototype.captureUrlScreenshots;
+  const originalAnalyze = OpenAiProvider.prototype.analyze;
+  const calls = [];
+  const fakePage = { pageId: 'prepared-page' };
+
+  PageExtractor.prototype.withPreparedPage = async function withPreparedPage(inputUrl, callback) {
+    calls.push(['withPreparedPage', inputUrl]);
+    return await callback(fakePage, String(inputUrl || '').trim());
+  };
+  PageExtractor.prototype.extractPreparedPage = async function extractPreparedPage(page, targetUrl) {
+    calls.push(['extractPreparedPage', page, targetUrl]);
+    assert.equal(page, fakePage);
+    return {
+      html: [
+        '<!doctype html><html><head><title>Demo</title></head><body>',
+        '<main><section><a href="/signup">Sign up</a></section></main>',
+        '</body></html>'
+      ].join(''),
+      blocks: [{
+        blockIdx: 0,
+        blockCssPath: 'body > main:nth-of-type(1) > section:nth-of-type(1)',
+        top: 0,
+        left: 0,
+        width: 1000,
+        height: 200,
+        textPreview: 'Sign up'
+      }],
+      elementGeometries: [{
+        tag: 'a',
+        text: 'Sign up',
+        href: 'https://example.com/signup',
+        top: 0,
+        left: 0,
+        width: 80,
+        height: 24,
+        selectorNthOfType: 'body > main:nth-of-type(1) > section:nth-of-type(1) > a:nth-of-type(1)'
+      }],
+      screenshots: { fullPage: '/tmp/full-page.png' },
+      pageSize: { width: 1000, height: 800 }
+    };
+  };
+  PageExtractor.prototype.captureScreenshots = async function captureScreenshots(page, targetUrl, screenshotBlocks, options) {
+    calls.push(['captureScreenshots', page, targetUrl, screenshotBlocks.length, options]);
+    assert.equal(page, fakePage);
+    return {
+      blocks: screenshotBlocks.map((_block, index) => ({
+        blockIdx: index,
+        path: `/tmp/logical-block-${index}.png`
+      }))
+    };
+  };
+  PageExtractor.prototype.captureUrlScreenshots = async function captureUrlScreenshots() {
+    calls.push(['captureUrlScreenshots']);
+    throw new Error('captureUrlScreenshots should not be called by analyzeUrl block screenshots');
+  };
+  OpenAiProvider.prototype.analyze = async function analyze(prompt) {
+    calls.push(['llm', prompt.includes('DOM CSV') ? 'event' : 'special']);
+    return [
+      'Demo page with a primary CTA',
+      'blockIdxs,blockName,blockDescription,blockPossibleEvents',
+      '0,CTASection,Primary CTA section,signup.cta_click'
+    ].join('\n');
+  };
+
+  try {
+    const result = await analyzeUrl(' https://example.com/demo ', {
+      llm: {
+        apiKey: 'test-key',
+        apiEndpoint: 'https://llm.example.invalid/v1/chat/completions',
+        model: 'test-model'
+      },
+      fullPageScreenshot: true,
+      blockScreenshots: true,
+      showBlockIdx: true
+    });
+
+    assert.equal(calls.filter((call) => call[0] === 'withPreparedPage').length, 1);
+    assert.equal(calls.some((call) => call[0] === 'captureUrlScreenshots'), false);
+    assert.equal(calls.filter((call) => call[0] === 'captureScreenshots').length, 1);
+    assert.equal(result.screenshots.fullPage, '/tmp/full-page.png');
+    assert.equal(result.screenshots.blocks[0].path, '/tmp/logical-block-0.png');
+    assert.equal(
+      result.analysis.block_analysis.blocks[0].blockScreenshotPaths[0],
+      '/tmp/logical-block-0.png'
+    );
+  } finally {
+    PageExtractor.prototype.withPreparedPage = originalWithPreparedPage;
+    PageExtractor.prototype.extractPreparedPage = originalExtractPreparedPage;
+    PageExtractor.prototype.captureScreenshots = originalCaptureScreenshots;
+    PageExtractor.prototype.captureUrlScreenshots = originalCaptureUrlScreenshots;
+    OpenAiProvider.prototype.analyze = originalAnalyze;
+  }
+}
+
+{
+  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);
+}
+
+{
+  assert.throws(
+    () => new PageExtractor({ s3: { region: 'ap-northeast-1' } }),
+    /extractorConfig\.s3\.bucket is required/
+  );
+  assert.throws(
+    () => new PageExtractor({ s3: { bucket: 'page-analyzer-test' } }),
+    /extractorConfig\.s3\.region is required/
+  );
+}
+
+{
+  const s3Client = new FakeS3Client();
+  const extractor = new PageExtractor({
+    s3: {
+      bucket: 'page-analyzer-test',
+      region: 'ap-northeast-1',
+      prefix: '/page-analyzer/snapshots/',
+      publicBaseUrl: 'https://cdn.example.com/page-analyzer/snapshots/',
+      client: s3Client
+    }
+  });
+  const locator = new FakeLocator();
+  const page = new FakePage(locator);
+  const screenshots = await extractor.captureScreenshots(page, 'https://example.com/demo', [
+    { blockName: 'Hero', blockCssPath: '#hero' }
+  ], {
+    fullPageScreenshot: true,
+    blockScreenshots: true
+  });
+
+  assert.equal(page.pageScreenshots.length, 1);
+  assert.deepEqual(page.pageScreenshots[0], { fullPage: true });
+  assert.equal(locator.screenshots.length, 1);
+  assert.deepEqual(locator.screenshots[0], {});
+  assert.equal(s3Client.commands.length, 2);
+
+  const [fullPageUpload, blockUpload] = s3Client.commands;
+  assert.equal(fullPageUpload.Bucket, 'page-analyzer-test');
+  assert.equal(fullPageUpload.ContentType, 'image/png');
+  assert.equal(Buffer.isBuffer(fullPageUpload.Body), true);
+  assert.match(fullPageUpload.Key, /^page-analyzer\/snapshots\/example-com-demo-.*-full-page\.png$/);
+  assert.match(blockUpload.Key, /^page-analyzer\/snapshots\/example-com-demo-.*-block-000\.png$/);
+
+  const fullPageFilename = fullPageUpload.Key.split('/').pop();
+  const blockFilename = blockUpload.Key.split('/').pop();
+  assert.equal(
+    screenshots.fullPage,
+    `https://cdn.example.com/page-analyzer/snapshots/${fullPageFilename}`
+  );
+  assert.equal(screenshots.blocks[0].path, `https://cdn.example.com/page-analyzer/snapshots/${blockFilename}`);
+}
+
+{
+  const s3Client = new FakeS3Client();
+  const extractor = new PageExtractor({
+    s3: {
+      bucket: 'page-analyzer-test',
+      region: 'ap-northeast-1',
+      prefix: 'nested/prefix',
+      client: s3Client
+    }
+  });
+  const locator = new FakeLocator();
+  const page = new FakePage(locator);
+  const screenshots = await extractor.captureScreenshots(page, 'https://example.com/demo', [
+    { blockName: 'Hero', blockCssPath: '#hero' }
+  ], {
+    fullPageScreenshot: false,
+    blockScreenshots: true
+  });
+
+  const uploadedKey = s3Client.commands[0].Key;
+  assert.match(uploadedKey, /^nested\/prefix\/example-com-demo-.*-block-000\.png$/);
+  assert.equal(
+    screenshots.blocks[0].path,
+    `https://page-analyzer-test.s3.ap-northeast-1.amazonaws.com/${uploadedKey}`
+  );
+}
+
+{
+  const originalWarn = console.warn;
+  const warnings = [];
+  console.warn = (message) => warnings.push(message);
+
+  try {
+    const s3Client = new FakeS3Client({
+      failPredicate: (input) => input.Key.endsWith('-block-000.png')
+    });
+    const extractor = new PageExtractor({
+      s3: {
+        bucket: 'page-analyzer-test',
+        region: 'ap-northeast-1',
+        prefix: 'page-analyzer/snapshots',
+        publicBaseUrl: 'https://cdn.example.com/page-analyzer/snapshots',
+        client: s3Client
+      }
+    });
+    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, 1);
+    assert.equal(screenshots.blocks[0].blockIdx, 1);
+    assert.equal(s3Client.commands.filter((input) => input.Key.endsWith('-block-000.png')).length, 3);
+    assert.equal(s3Client.commands.filter((input) => input.Key.endsWith('-block-001.png')).length, 1);
+    assert.equal(warnings.some((message) => message.includes('retrying')), true);
+    assert.equal(warnings.some((message) => message.includes('Failed to capture/upload block 0')), true);
+  } finally {
+    console.warn = originalWarn;
+  }
+}
+
+{
+  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');