claude-presentation-master 6.1.1 → 7.2.1

package/bin/score-presentation.cjs

@@ -0,0 +1,488 @@
+#!/usr/bin/env node
+/**
+ * Comprehensive Presentation Scoring System
+ *
+ * Scores presentations on 7 dimensions (1-100 each):
+ * 1. Layout - Clear slide layout, nothing off-screen, proper spacing
+ * 2. Contrast - All text readable against backgrounds
+ * 3. Graphics - Visual quality and appropriateness
+ * 4. Content - Information quality and density
+ * 5. Clarity - Message clarity and simplicity
+ * 6. Effectiveness - Impact and persuasiveness
+ * 7. Consistency - Visual and thematic consistency
+ *
+ * Usage: node score-presentation.cjs <html-file>
+ */
+
+const { chromium } = require('playwright');
+const path = require('path');
+const fs = require('fs');
+
+// Scoring criteria and thresholds
+const CRITERIA = {
+  // Layout scoring
+  LAYOUT: {
+    MAX_WORD_COUNT: 40,        // Ideal max words per slide
+    MIN_FONT_SIZE: 18,         // Minimum readable font
+    TITLE_MIN_SIZE: 36,        // Titles should be big
+    ELEMENT_MAX: 7,            // Miller's Law
+    PADDING_MIN: 40,           // Minimum edge padding in px
+  },
+
+  // Contrast scoring (WCAG)
+  CONTRAST: {
+    TITLE_MIN: 7.0,            // AAA for large text
+    BODY_MIN: 4.5,             // AA standard
+    SMALL_TEXT_MIN: 7.0,       // AAA for small text
+  },
+
+  // Content scoring
+  CONTENT: {
+    IDEAL_WORDS: [15, 30],     // Sweet spot for word count
+    MAX_BULLET_POINTS: 5,
+    IDEAL_HIERARCHY_LEVELS: 2,
+  }
+};
+
+// Color utilities
+function parseColor(colorStr) {
+  if (!colorStr) return null;
+  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]) };
+  }
+  // Handle hex colors
+  const hexMatch = colorStr.match(/#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})/i);
+  if (hexMatch) {
+    return { r: parseInt(hexMatch[1], 16), g: parseInt(hexMatch[2], 16), b: parseInt(hexMatch[3], 16) };
+  }
+  return null;
+}
+
+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;
+}
+
+function getContrastRatio(fg, bg) {
+  if (!fg || !bg) return 1;
+  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);
+}
+
+async function scorePresentation(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);
+
+  const totalSlides = await page.evaluate(() => {
+    if (typeof Reveal !== 'undefined') return Reveal.getTotalSlides();
+    return document.querySelectorAll('.slides > section').length || 10;
+  });
+
+  console.log('\n' + '═'.repeat(70));
+  console.log('  COMPREHENSIVE PRESENTATION SCORING SYSTEM');
+  console.log('═'.repeat(70));
+  console.log(`\nAnalyzing ${totalSlides} slides across 7 dimensions...\n`);
+
+  const slideScores = [];
+  const screenshotDir = path.join(path.dirname(absolutePath), 'score-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 });
+
+    // Comprehensive slide analysis
+    const analysis = await page.evaluate(() => {
+      const slide = document.querySelector('.present') || document.querySelector('section');
+      if (!slide) return { error: 'No slide found' };
+
+      // Helper functions (same as before)
+      function parseColorInner(colorStr) {
+        if (!colorStr) return null;
+        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;
+      }
+
+      function getLuminanceInner(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;
+      }
+
+      function getContrastInner(fg, bg) {
+        if (!fg || !bg) return 21; // Assume good if can't calculate
+        const l1 = getLuminanceInner(fg);
+        const l2 = getLuminanceInner(bg);
+        const lighter = Math.max(l1, l2);
+        const darker = Math.min(l1, l2);
+        return (lighter + 0.05) / (darker + 0.05);
+      }
+
+      // Get effective background color - improved detection
+      function getEffectiveBg(element) {
+        let el = element;
+        while (el && el !== document.body) {
+          const style = window.getComputedStyle(el);
+          const bg = style.backgroundColor;
+          if (bg && bg !== 'rgba(0, 0, 0, 0)' && bg !== 'transparent') {
+            const parsed = parseColorInner(bg);
+            if (parsed) return parsed;
+          }
+          el = el.parentElement;
+        }
+        // Default to near-black for dark theme presentations
+        return { r: 10, g: 10, b: 11 };
+      }
+
+      // Parse color from CSS - handles more formats
+      function parseColorFromCSS(colorStr) {
+        if (!colorStr) return null;
+        // rgb/rgba format
+        const rgbMatch = colorStr.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+        if (rgbMatch) {
+          return { r: parseInt(rgbMatch[1]), g: parseInt(rgbMatch[2]), b: parseInt(rgbMatch[3]) };
+        }
+        // hex format
+        const hexMatch = colorStr.match(/#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})/i);
+        if (hexMatch) {
+          return { r: parseInt(hexMatch[1], 16), g: parseInt(hexMatch[2], 16), b: parseInt(hexMatch[3], 16) };
+        }
+        // Named colors
+        if (colorStr === 'white' || colorStr === '#fff' || colorStr === '#ffffff') {
+          return { r: 255, g: 255, b: 255 };
+        }
+        return null;
+      }
+
+      // Text content analysis
+      const textContent = slide.innerText || '';
+      const words = textContent.split(/\s+/).filter(w => w.length > 0);
+      const wordCount = words.length;
+
+      // Find all text elements and analyze
+      const allTextElements = slide.querySelectorAll('h1, h2, h3, h4, h5, h6, p, li, span, div, label');
+      const textAnalysis = [];
+
+      allTextElements.forEach(el => {
+        const text = el.innerText?.trim();
+        if (!text || text.length < 2) return;
+
+        const style = window.getComputedStyle(el);
+        const fontSize = parseFloat(style.fontSize);
+
+        // Get text color - try inline style first, then computed
+        let color = null;
+        const inlineColor = el.style.color;
+        if (inlineColor) {
+          color = parseColorFromCSS(inlineColor);
+        }
+        if (!color) {
+          color = parseColorInner(style.color);
+        }
+        // Default white for dark themes if color detection fails
+        if (!color || (color.r === 0 && color.g === 0 && color.b === 0)) {
+          color = { r: 255, g: 255, b: 255 }; // Assume white text on dark theme
+        }
+
+        const bgColor = getEffectiveBg(el);
+        const contrast = getContrastInner(color, bgColor);
+
+        const rect = el.getBoundingClientRect();
+        const isVisible = rect.width > 0 && rect.height > 0;
+        const isOnScreen = rect.top < window.innerHeight && rect.bottom > 0 &&
+                          rect.left < window.innerWidth && rect.right > 0;
+
+        if (isVisible && text.length > 0) {
+          textAnalysis.push({
+            text: text.substring(0, 50),
+            fontSize,
+            contrast: Math.round(contrast * 10) / 10,
+            color: color ? `rgb(${color.r},${color.g},${color.b})` : 'unknown',
+            bgColor: bgColor ? `rgb(${bgColor.r},${bgColor.g},${bgColor.b})` : 'unknown',
+            isOnScreen,
+            isTitle: el.tagName.match(/^H[1-3]$/) || fontSize >= 30,
+            isSmall: fontSize < 16
+          });
+        }
+      });
+
+      // Element count (visual complexity)
+      const majorElements = slide.querySelectorAll('h1, h2, h3, img, .card, .metric, .stat, .chart, .grid > *, ul, ol, blockquote');
+
+      // Bullet points
+      const bulletPoints = slide.querySelectorAll('li').length;
+
+      // Images
+      const images = slide.querySelectorAll('img');
+      const imageData = Array.from(images).map(img => ({
+        loaded: img.complete && img.naturalHeight > 0,
+        width: img.clientWidth,
+        height: img.clientHeight
+      }));
+
+      return {
+        wordCount,
+        textAnalysis,
+        elementCount: majorElements.length,
+        bulletPoints,
+        imageCount: images.length,
+        imageData,
+        hasTitle: textAnalysis.some(t => t.isTitle),
+        slideRect: slide.getBoundingClientRect()
+      };
+    });
+
+    // Calculate dimension scores
+    const scores = calculateDimensionScores(analysis, i + 1);
+    slideScores.push({ slide: i + 1, ...scores, analysis, screenshot: screenshotPath });
+
+    // Print slide summary
+    printSlideScore(i + 1, scores);
+
+    // Next slide
+    await page.keyboard.press('ArrowRight');
+    await page.waitForTimeout(1500);
+  }
+
+  await browser.close();
+
+  // Calculate and print overall scores
+  printOverallScores(slideScores, totalSlides);
+
+  // Save detailed report
+  const reportPath = path.join(screenshotDir, 'score-report.json');
+  fs.writeFileSync(reportPath, JSON.stringify({
+    file: htmlPath,
+    timestamp: new Date().toISOString(),
+    slideScores,
+    overall: calculateOverallScores(slideScores)
+  }, null, 2));
+
+  console.log(`\n  Detailed report: ${reportPath}\n`);
+
+  return slideScores;
+}
+
+function calculateDimensionScores(analysis, slideNum) {
+  const issues = [];
+
+  // 1. LAYOUT Score (0-100)
+  let layoutScore = 100;
+
+  if (analysis.wordCount > CRITERIA.LAYOUT.MAX_WORD_COUNT) {
+    const excess = analysis.wordCount - CRITERIA.LAYOUT.MAX_WORD_COUNT;
+    layoutScore -= Math.min(30, excess * 2);
+    issues.push(`Too many words: ${analysis.wordCount}`);
+  }
+
+  if (analysis.elementCount > CRITERIA.LAYOUT.ELEMENT_MAX) {
+    layoutScore -= 15;
+    issues.push(`Too many elements: ${analysis.elementCount}`);
+  }
+
+  const smallFonts = analysis.textAnalysis.filter(t => t.fontSize < CRITERIA.LAYOUT.MIN_FONT_SIZE && !t.isSmall);
+  if (smallFonts.length > 0) {
+    layoutScore -= smallFonts.length * 5;
+    issues.push(`Small text: ${smallFonts.length} elements`);
+  }
+
+  const smallTitles = analysis.textAnalysis.filter(t => t.isTitle && t.fontSize < CRITERIA.LAYOUT.TITLE_MIN_SIZE);
+  if (smallTitles.length > 0) {
+    layoutScore -= 15;
+    issues.push(`Titles too small`);
+  }
+
+  const offScreen = analysis.textAnalysis.filter(t => !t.isOnScreen);
+  if (offScreen.length > 0) {
+    layoutScore -= 20;
+    issues.push(`Content off-screen: ${offScreen.length} elements`);
+  }
+
+  // 2. CONTRAST Score (0-100)
+  let contrastScore = 100;
+
+  const lowContrastTitles = analysis.textAnalysis.filter(t => t.isTitle && t.contrast < CRITERIA.CONTRAST.TITLE_MIN);
+  if (lowContrastTitles.length > 0) {
+    contrastScore -= lowContrastTitles.length * 20;
+    const worst = Math.min(...lowContrastTitles.map(t => t.contrast));
+    issues.push(`LOW TITLE CONTRAST: ${worst.toFixed(1)}:1 (need ${CRITERIA.CONTRAST.TITLE_MIN}:1)`);
+  }
+
+  const lowContrastBody = analysis.textAnalysis.filter(t => !t.isTitle && t.contrast < CRITERIA.CONTRAST.BODY_MIN);
+  if (lowContrastBody.length > 0) {
+    contrastScore -= lowContrastBody.length * 10;
+    const worst = Math.min(...lowContrastBody.map(t => t.contrast));
+    issues.push(`Low body contrast: ${worst.toFixed(1)}:1`);
+  }
+
+  // 3. GRAPHICS Score (0-100)
+  let graphicsScore = 100;
+
+  if (analysis.imageCount === 0 && analysis.wordCount > 20) {
+    graphicsScore -= 20; // Text-heavy slides benefit from images
+    issues.push('No images on text-heavy slide');
+  }
+
+  const brokenImages = analysis.imageData.filter(img => !img.loaded);
+  if (brokenImages.length > 0) {
+    graphicsScore -= brokenImages.length * 25;
+    issues.push(`Broken images: ${brokenImages.length}`);
+  }
+
+  // 4. CONTENT Score (0-100)
+  let contentScore = 100;
+
+  const [minWords, maxWords] = CRITERIA.CONTENT.IDEAL_WORDS;
+  if (analysis.wordCount < minWords && analysis.wordCount > 0) {
+    contentScore -= 10; // Too sparse
+  } else if (analysis.wordCount > maxWords * 2) {
+    contentScore -= 25; // Way too dense
+    issues.push('Content too dense');
+  }
+
+  if (analysis.bulletPoints > CRITERIA.CONTENT.MAX_BULLET_POINTS) {
+    contentScore -= 15;
+    issues.push(`Too many bullets: ${analysis.bulletPoints}`);
+  }
+
+  if (!analysis.hasTitle) {
+    contentScore -= 20;
+    issues.push('No clear title/heading');
+  }
+
+  // 5. CLARITY Score (0-100)
+  let clarityScore = 100;
+
+  // Clarity penalized by too much content, too many elements
+  if (analysis.wordCount > 50) {
+    clarityScore -= 20;
+  }
+  if (analysis.elementCount > 5) {
+    clarityScore -= (analysis.elementCount - 5) * 5;
+  }
+
+  // 6. EFFECTIVENESS Score (0-100)
+  let effectivenessScore = 100;
+
+  // Effectiveness is about impact - needs clear message
+  if (!analysis.hasTitle) effectivenessScore -= 25;
+  if (analysis.wordCount > 40) effectivenessScore -= 15;
+  if (lowContrastTitles.length > 0) effectivenessScore -= 30; // Can't be effective if unreadable
+
+  // 7. CONSISTENCY Score (calculated at deck level, placeholder here)
+  let consistencyScore = 100;
+
+  return {
+    layout: Math.max(0, Math.round(layoutScore)),
+    contrast: Math.max(0, Math.round(contrastScore)),
+    graphics: Math.max(0, Math.round(graphicsScore)),
+    content: Math.max(0, Math.round(contentScore)),
+    clarity: Math.max(0, Math.round(clarityScore)),
+    effectiveness: Math.max(0, Math.round(effectivenessScore)),
+    consistency: Math.max(0, Math.round(consistencyScore)),
+    issues,
+    overall: Math.round((layoutScore + contrastScore + graphicsScore + contentScore + clarityScore + effectivenessScore + consistencyScore) / 7)
+  };
+}
+
+function printSlideScore(slideNum, scores) {
+  const overall = scores.overall;
+  const status = overall >= 85 ? '✅' : overall >= 70 ? '⚠️' : '❌';
+
+  console.log(`Slide ${String(slideNum).padStart(2)}: ${status} Overall: ${overall}/100`);
+  console.log(`         Layout:${String(scores.layout).padStart(3)} | Contrast:${String(scores.contrast).padStart(3)} | Graphics:${String(scores.graphics).padStart(3)} | Content:${String(scores.content).padStart(3)}`);
+  console.log(`         Clarity:${String(scores.clarity).padStart(3)} | Effect:${String(scores.effectiveness).padStart(3)} | Consist:${String(scores.consistency).padStart(3)}`);
+
+  if (scores.issues.length > 0) {
+    scores.issues.forEach(issue => console.log(`         ⚠ ${issue}`));
+  }
+  console.log('');
+}
+
+function calculateOverallScores(slideScores) {
+  const dimensions = ['layout', 'contrast', 'graphics', 'content', 'clarity', 'effectiveness', 'consistency'];
+  const overall = {};
+
+  dimensions.forEach(dim => {
+    const scores = slideScores.map(s => s[dim]);
+    overall[dim] = Math.round(scores.reduce((a, b) => a + b, 0) / scores.length);
+  });
+
+  overall.total = Math.round(Object.values(overall).reduce((a, b) => a + b, 0) / dimensions.length);
+
+  return overall;
+}
+
+function printOverallScores(slideScores, totalSlides) {
+  const overall = calculateOverallScores(slideScores);
+
+  console.log('═'.repeat(70));
+  console.log('  OVERALL PRESENTATION SCORES');
+  console.log('═'.repeat(70));
+  console.log('');
+  console.log('  Dimension Scores (1-100):');
+  console.log('  ─────────────────────────');
+  console.log(`  📐 Layout:        ${overall.layout}/100  ${getBar(overall.layout)}`);
+  console.log(`  🎨 Contrast:      ${overall.contrast}/100  ${getBar(overall.contrast)}`);
+  console.log(`  🖼️  Graphics:      ${overall.graphics}/100  ${getBar(overall.graphics)}`);
+  console.log(`  📝 Content:       ${overall.content}/100  ${getBar(overall.content)}`);
+  console.log(`  💡 Clarity:       ${overall.clarity}/100  ${getBar(overall.clarity)}`);
+  console.log(`  🎯 Effectiveness: ${overall.effectiveness}/100  ${getBar(overall.effectiveness)}`);
+  console.log(`  🔄 Consistency:   ${overall.consistency}/100  ${getBar(overall.consistency)}`);
+  console.log('');
+  console.log('  ═════════════════════════════════════');
+  console.log(`  📊 TOTAL SCORE:   ${overall.total}/100`);
+  console.log('  ═════════════════════════════════════');
+
+  const passedSlides = slideScores.filter(s => s.overall >= 85).length;
+  const needsWork = slideScores.filter(s => s.overall >= 70 && s.overall < 85).length;
+  const failedSlides = slideScores.filter(s => s.overall < 70).length;
+
+  console.log('');
+  console.log(`  Slide Quality: ${passedSlides} passed | ${needsWork} need work | ${failedSlides} failed`);
+
+  if (overall.total >= 85) {
+    console.log('\n  ✅ PRESENTATION READY FOR DELIVERY\n');
+  } else if (overall.total >= 70) {
+    console.log('\n  ⚠️  PRESENTATION NEEDS IMPROVEMENT\n');
+  } else {
+    console.log('\n  ❌ PRESENTATION REQUIRES SIGNIFICANT WORK\n');
+  }
+}
+
+function getBar(score) {
+  const filled = Math.round(score / 5);
+  const empty = 20 - filled;
+  return '█'.repeat(filled) + '░'.repeat(empty);
+}
+
+// Run
+const htmlFile = process.argv[2];
+if (!htmlFile) {
+  console.error('Usage: node score-presentation.cjs <html-file>');
+  process.exit(1);
+}
+
+scorePresentation(htmlFile).catch(err => {
+  console.error('Scoring Error:', err.message);
+  process.exit(1);
+});