claude-presentation-master 6.1.1 → 7.2.1

package/bin/qa-presentation.cjs

@@ -0,0 +1,279 @@
+#!/usr/bin/env node
+/**
+ * Automatic Presentation QA Review System
+ *
+ * Captures screenshots of every slide and performs automated visual analysis.
+ * Reports issues and scores each slide against quality criteria.
+ *
+ * Usage: node qa-presentation.cjs <html-file>
+ */
+
+const { chromium } = require('playwright');
+const path = require('path');
+const fs = require('fs');
+
+const QA_CRITERIA = {
+  // Text readability
+  MIN_TITLE_SIZE: 40,      // px - titles should be large
+  MIN_BODY_SIZE: 16,       // px - body text readable
+  MAX_WORDS_PER_SLIDE: 50, // Glance test
+
+  // Visual balance
+  MIN_WHITESPACE_RATIO: 0.3, // 30% whitespace minimum
+  MAX_ELEMENTS: 7,           // Miller's Law
+
+  // Contrast
+  MIN_CONTRAST_RATIO: 4.5,   // WCAG AA
+};
+
+async function captureAndAnalyzeSlides(htmlPath) {
+  const browser = await chromium.launch();
+  const page = await browser.newPage({ viewport: { width: 1920, height: 1080 } });
+
+  const absolutePath = path.resolve(htmlPath);
+  await page.goto(`file://${absolutePath}`, { waitUntil: 'networkidle' });
+  await page.waitForTimeout(3000); // Wait for images and animations
+
+  // Get total slides
+  const totalSlides = await page.evaluate(() => {
+    if (typeof Reveal !== 'undefined') {
+      return Reveal.getTotalSlides();
+    }
+    return document.querySelectorAll('.slides > section').length || 10;
+  });
+
+  console.log('\n' + '='.repeat(60));
+  console.log('  AUTOMATIC PRESENTATION QA REVIEW');
+  console.log('='.repeat(60));
+  console.log(`\nAnalyzing ${totalSlides} slides...\n`);
+
+  const results = [];
+  const screenshotDir = path.join(path.dirname(absolutePath), 'qa-screenshots');
+
+  if (!fs.existsSync(screenshotDir)) {
+    fs.mkdirSync(screenshotDir, { recursive: true });
+  }
+
+  for (let i = 0; i < totalSlides; i++) {
+    const screenshotPath = path.join(screenshotDir, `slide-${i + 1}.png`);
+    await page.screenshot({ path: screenshotPath });
+
+    // Analyze the current slide
+    const analysis = await page.evaluate(() => {
+      const slide = document.querySelector('.present') || document.querySelector('section');
+      if (!slide) return { error: 'No slide found' };
+
+      // Get all text content
+      const textContent = slide.innerText || '';
+      const wordCount = textContent.split(/\s+/).filter(w => w.length > 0).length;
+
+      // Helper to parse RGB color
+      function parseColor(colorStr) {
+        const match = colorStr.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+        if (match) {
+          return { r: parseInt(match[1]), g: parseInt(match[2]), b: parseInt(match[3]) };
+        }
+        return null;
+      }
+
+      // Calculate relative luminance
+      function getLuminance(rgb) {
+        const [r, g, b] = [rgb.r, rgb.g, rgb.b].map(c => {
+          c = c / 255;
+          return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+        });
+        return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+      }
+
+      // Calculate contrast ratio
+      function getContrastRatio(fg, bg) {
+        const l1 = getLuminance(fg);
+        const l2 = getLuminance(bg);
+        const lighter = Math.max(l1, l2);
+        const darker = Math.min(l1, l2);
+        return (lighter + 0.05) / (darker + 0.05);
+      }
+
+      // Get background color (walk up to find non-transparent)
+      let bgColor = null;
+      let el = slide;
+      while (el && !bgColor) {
+        const bg = window.getComputedStyle(el).backgroundColor;
+        const parsed = parseColor(bg);
+        if (parsed && (parsed.r > 0 || parsed.g > 0 || parsed.b > 0)) {
+          bgColor = parsed;
+        }
+        el = el.parentElement;
+      }
+      if (!bgColor) bgColor = { r: 10, g: 10, b: 11 }; // Default dark bg
+
+      // Get computed styles of text elements and check contrast
+      const titles = slide.querySelectorAll('h1, h2, h3, .display-xl, .display-lg, .display-md, .title');
+      const titleData = Array.from(titles).map(t => {
+        const style = window.getComputedStyle(t);
+        const color = parseColor(style.color);
+        const contrast = color ? getContrastRatio(color, bgColor) : 0;
+        return {
+          size: parseFloat(style.fontSize),
+          contrast: contrast,
+          text: t.textContent.substring(0, 30)
+        };
+      });
+
+      const bodyText = slide.querySelectorAll('p, li, .body-lg, .stat-label, .subtitle');
+      const bodyData = Array.from(bodyText).map(t => {
+        const style = window.getComputedStyle(t);
+        const color = parseColor(style.color);
+        const contrast = color ? getContrastRatio(color, bgColor) : 0;
+        return {
+          size: parseFloat(style.fontSize),
+          contrast: contrast
+        };
+      });
+
+      // Count major elements
+      const majorElements = slide.querySelectorAll('h1, h2, h3, .metric-card, .challenge-item, .timeline-phase, .invest-bar, .result-item, img, .chart-container');
+
+      // Check for empty content
+      const hasContent = textContent.trim().length > 10;
+
+      return {
+        wordCount,
+        titleData,
+        bodyData,
+        titleSizes: titleData.map(t => t.size),
+        bodySizes: bodyData.map(t => t.size),
+        titleContrasts: titleData.map(t => t.contrast),
+        bodyContrasts: bodyData.map(t => t.contrast),
+        elementCount: majorElements.length,
+        hasContent,
+        bgColorRGB: bgColor,
+        textPreview: textContent.substring(0, 100).replace(/\s+/g, ' ')
+      };
+    });
+
+    // Score this slide
+    const issues = [];
+    let score = 100;
+
+    // Check word count (glance test)
+    if (analysis.wordCount > QA_CRITERIA.MAX_WORDS_PER_SLIDE) {
+      issues.push(`Too many words: ${analysis.wordCount} (max ${QA_CRITERIA.MAX_WORDS_PER_SLIDE})`);
+      score -= 15;
+    }
+
+    if (analysis.wordCount < 3) {
+      issues.push(`Too sparse: only ${analysis.wordCount} words`);
+      score -= 10;
+    }
+
+    // Check title sizes
+    const smallTitles = (analysis.titleSizes || []).filter(s => s < QA_CRITERIA.MIN_TITLE_SIZE);
+    if (smallTitles.length > 0) {
+      issues.push(`Small title text: ${smallTitles.map(s => Math.round(s) + 'px').join(', ')}`);
+      score -= 10;
+    }
+
+    // Check body text sizes
+    const smallBody = (analysis.bodySizes || []).filter(s => s < QA_CRITERIA.MIN_BODY_SIZE);
+    if (smallBody.length > 0) {
+      issues.push(`Small body text: ${smallBody.length} elements under ${QA_CRITERIA.MIN_BODY_SIZE}px`);
+      score -= 5;
+    }
+
+    // Check element count (Miller's Law)
+    if (analysis.elementCount > QA_CRITERIA.MAX_ELEMENTS) {
+      issues.push(`Too many elements: ${analysis.elementCount} (max ${QA_CRITERIA.MAX_ELEMENTS})`);
+      score -= 10;
+    }
+
+    // Check for content
+    if (!analysis.hasContent) {
+      issues.push('Slide appears empty or has minimal content');
+      score -= 20;
+    }
+
+    // CHECK CONTRAST - CRITICAL
+    const lowContrastTitles = (analysis.titleContrasts || []).filter(c => c < 4.5);
+    if (lowContrastTitles.length > 0) {
+      const worstContrast = Math.min(...lowContrastTitles).toFixed(1);
+      issues.push(`LOW CONTRAST: ${lowContrastTitles.length} title(s) below 4.5:1 (worst: ${worstContrast}:1)`);
+      score -= 25; // Major penalty - this is a critical failure
+    }
+
+    const lowContrastBody = (analysis.bodyContrasts || []).filter(c => c < 3.0);
+    if (lowContrastBody.length > 0) {
+      issues.push(`Low contrast body text: ${lowContrastBody.length} elements below 3:1`);
+      score -= 15;
+    }
+
+    const slideResult = {
+      slide: i + 1,
+      score: Math.max(0, score),
+      issues,
+      analysis,
+      screenshot: screenshotPath
+    };
+
+    results.push(slideResult);
+
+    // Print result
+    const status = score >= 90 ? '✅' : score >= 70 ? '⚠️' : '❌';
+    console.log(`Slide ${i + 1}: ${status} Score: ${Math.max(0, score)}/100`);
+    if (issues.length > 0) {
+      issues.forEach(issue => console.log(`   └─ ${issue}`));
+    }
+
+    // Next slide
+    await page.keyboard.press('ArrowRight');
+    await page.waitForTimeout(1500); // Longer wait for animations and images
+  }
+
+  await browser.close();
+
+  // Summary
+  const avgScore = Math.round(results.reduce((sum, r) => sum + r.score, 0) / results.length);
+  const passedSlides = results.filter(r => r.score >= 80).length;
+  const failedSlides = results.filter(r => r.score < 70).length;
+
+  console.log('\n' + '='.repeat(60));
+  console.log('  SUMMARY');
+  console.log('='.repeat(60));
+  console.log(`\n  Average Score: ${avgScore}/100`);
+  console.log(`  Passed (80+):  ${passedSlides}/${totalSlides}`);
+  console.log(`  Failed (<70):  ${failedSlides}/${totalSlides}`);
+  console.log(`  Screenshots:   ${screenshotDir}/`);
+
+  if (avgScore >= 90) {
+    console.log('\n  ✅ PRESENTATION PASSED QA\n');
+  } else if (avgScore >= 70) {
+    console.log('\n  ⚠️  PRESENTATION NEEDS IMPROVEMENT\n');
+  } else {
+    console.log('\n  ❌ PRESENTATION FAILED QA\n');
+  }
+
+  // Write detailed report
+  const reportPath = path.join(screenshotDir, 'qa-report.json');
+  fs.writeFileSync(reportPath, JSON.stringify({
+    file: htmlPath,
+    timestamp: new Date().toISOString(),
+    summary: { avgScore, passedSlides, failedSlides, totalSlides },
+    slides: results
+  }, null, 2));
+
+  console.log(`  Report saved: ${reportPath}\n`);
+
+  return { avgScore, results };
+}
+
+// Run if called directly
+const htmlFile = process.argv[2];
+if (!htmlFile) {
+  console.error('Usage: node qa-presentation.cjs <html-file>');
+  process.exit(1);
+}
+
+captureAndAnalyzeSlides(htmlFile).catch(err => {
+  console.error('QA Error:', err.message);
+  process.exit(1);
+});