# Value Creation Keynote: HTML to PowerPoint (.pptx) Export Pipeline This directory contains the **Value Creation: From Open Source to Deep Tech** interactive keynote presentation deck, along with the automated pipeline used to convert the HTML/CSS presentation into an offline, self-contained, widescreen **PowerPoint (`.pptx`)** file. --- ## 1. Overview & Motivation ### The Challenge Interactive HTML presentations offer powerful benefits: responsive layouts, modern CSS gradients, SVG rendering, and full control over animations. However, delivering a keynote in physical venues (e.g. school auditoriums, conference stages) introduces real-world constraints: * **Offline reliability**: Projector laptops often lack stable venue Wi-Fi or have strict network firewalls. * **Native video playback**: Videos must play smoothly without buffering, ads, or web player chrome. * **Presenter view**: Presenters require dual-display presenter notes, slide timers, and next-slide previews in standard presentation software (PowerPoint, Keynote). * **Cross-platform distribution**: Decks need to be shareable as a single file with all media embedded intact. #### The Solution A automated pipeline that preserves the authentic visual design of the web deck while generating a broadcast-grade 16:9 widescreen PowerPoint deck with: * **100% Native Vector PowerPoint Shapes & Editable Typography** for all text-based slides and slide headers. * **Native offline MP4 video embeds** on video slides with custom OpenXML autoplay and continuous looping. * **Exact bounding-box video positioning** matching the CSS layout with zero distortion. * **Independent 2x Retina visual picture shapes** for photo collages and student showcases (Slides 1–5). * **Synchronized speaker notes** extracted directly from the HTML source. * **Automatic Google Drive synchronization** for instant access across devices. --- ## 2. Pipeline Architecture ```mermaid flowchart TD A["Interactive HTML Deck
public/labs/value-creation/index.html"] -->|Query ?export=1| B["Export-Mode CSS
(Standardized Hierarchy & Clean Borders)"] B --> C["Headless Puppeteer Capture
scripts/capture_slides.js"] B --> D["Vector Icon Builder
scripts/build_icons.js"] D -->|Generates 15 High-Res PNGs| E["Vector Icons
scripts/assets/icons/*.png"] C -->|Captures 2x Retina Visual Areas| F["Visual Cropped Collages
/tmp/gh_slides_export/slide_XX_visual.jpg"] C -->|Measures DOM Containers| G["Layout Metadata
/tmp/gh_slides_export/metadata.json"] A -->|Extracts Clean Titles & Notes| H["Slide Metadata & Storyboard Notes"] E & F & G & H --> I["Native PPTX Builder & OpenXML Engine
scripts/export_to_pptx.py"] J["Local MP4 Video Assets
public/assets/videos/*.mp4"] --> I I -->|Generates 16:9 Native Deck| K["Local PPTX Export
exports/Value_Creation_From_Open_Source_to_Deep_Tech.pptx"] K -->|Auto-Sync| L["Google Drive Cloud Storage
My Drive/Value_Creation_From_Open_Source_to_Deep_Tech.pptx"] ``` --- ## 3. The 4 Stages Explained ### Stage 1: Export-Mode CSS (`public/labs/value-creation/index.html`) When the deck is opened with the query parameter `?export=1`, JavaScript activates `body.export-mode`: 1. **Hides Presentation UI**: Hides the deck toolbar, slide navigation buttons, overview grid modal, slide-4 video toggle pills, and the speaker notes drawer. 2. **Full-Bleed 16:9 Canvas**: Expands `.deck-viewport` and `.slide-stage` to an edge-to-edge `100vw × 100vh` frame (1920×1080 ratio) with clean borders and zero letterboxing. 3. **Standardized Typographic Hierarchy**: Enforces unified geometry, card heights, and font sizes across slide archetypes to ensure optimal stage readability without dead space: * **Hero Statement Slides (Slides 13 & 17)**: `4.25rem` bold titles, `1.85rem` process pills (*Lesson 1: Strict Process* and *Lesson 2: Fail Fast, Fail Forward*). * **2-Card Slides (Slides 6 & 18)**: `74rem` grid width, `420px` card height, `5.5rem` badges/icons, brand styling (GeeksHacking `#FDF300` yellow / `#1C1B1B` slate, Screening Eagle `#00767E` / `#009E96` teal). * **3-Card Slides (Slides 4, 11, 15, 21)**: `78rem`–`82rem` grid width, `380px`–`420px` card height, `5rem` icons. Slide 4 provides 3 native editable inspection technology cards; Slide 11 details Technology → Problem Search → No Market; Slide 21 highlights Give, Geek, Grow. * **Step Navigator Bar (Slides 14, 15, 16)**: Standardized `58rem` width, `1.25rem` font, `1.15rem` padding across Observe, Empathise, Innovate steps. * **Comparison & Inversion Slides (Slide 12)**: `68rem` grid width, side-by-side contrast of the Wrong Way (*Solution First*) vs Right Way (*Problem First*). * **Lean Loop Progression (Slides 19 & 20)**: `3rem` step pills on Slide 19 (*Try → Fail → Learn*); `80rem` grid, `240px` cards with `1.85rem` text on Slide 20 (*Learning Turns Failure Into Progress*). 4. **Video Placeholder Containers**: Formats video containers with precise aspect ratios and high-contrast poster placeholders so Puppeteer can extract exact physical coordinates. --- ### Stage 2: Headless Retina Capture & Icon Generation (`scripts/capture_slides.js` & `scripts/build_icons.js`) 1. **Vector Icon Builder (`scripts/build_icons.js`)**: * Uses Puppeteer to render and isolate the 15 FontAwesome UI icons used across cards (e.g. `github`, `microchip`, `lightbulb`, `brain`, `arrow-down-long`). * Saves high-resolution, transparent 320×320 PNG assets into `scripts/assets/icons/`. 2. **Visual Content Capture (`scripts/capture_slides.js`)**: * Starts a transient HTTP server serving repository assets. * Launches headless Chrome at `1920×1080` with `deviceScaleFactor: 2` (3840×2160 Retina). * Captures dedicated `.visual-area` screenshots for photo collages and student showcases (Slides 1, 2, 3, 5), leaving headers and native typography cards to be natively rendered. * Measures DOM bounding boxes for video containers on Slides 8–10 and saves coordinates into `metadata.json`. --- ### Stage 3: 100% Native PowerPoint (.pptx) Assembly (`scripts/export_to_pptx.py`) A Python script using `python-pptx` to assemble the slide deck using native PowerPoint objects: 1. **Widescreen Canvas**: Initializes a presentation with standard 16:9 dimensions: * Width: `13.333333` inches * Height: `7.5` inches 2. **Native Header Component**: * **Top Stripe**: Full-width native orange accent line (`13.333" × 0.06"`). * **Orange Accent Bar**: Native rounded rectangle (`0.05" × 0.38"`). * **Slide Title**: Fully editable text frame in `26pt Arial Bold` (`#0F172A`). * **Slide Number Pill**: Native rounded pill (`0.85" × 0.28"`) at top-right with `10pt Arial Bold` (`01 / 21` through `21 / 21`). 3. **Native Shape & Typography Slides (Slides 0, 4, 6, 7, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21)**: * Built entirely from native PowerPoint `ROUNDED_RECTANGLE` shapes, brand border/fill color tokens, transparent icon overlays, and editable text boxes. * Rounded corners applied consistently on all picture shapes and video overlays (`prst="roundRect"` with 3.5% corner radius). * Live brand color themes applied on Slide 18: GeeksHacking `#FDF300` yellow background with `#1C1B1B` slate text; Screening Eagle `#00767E` / `#009E96` teal background with white text. * Completely eliminates fuzzy rasterized text, artifact compression, or unselectable content. 4. **Native Offline MP4 Video Embedding (Slides 8–10)**: * Uses `slide.shapes.add_movie(...)` to embed local MP4 files directly into the PPTX package. * Translates 16:9 bounding boxes (`11.22" × 6.31"`) centered horizontally with physical margins. * Adds native header tech badges (`Autodesk ReMake`, `Smithsonian 3D Digitization`). * Directly manipulates PowerPoint's OpenXML timing tree for instant autoplay (`delay="0"`) and continuous looping (`repeatCount="indefinite"`). 5. **Photo Collage Slides (Slides 1–3, 5)**: * Combines native headers with dedicated 2x Retina picture shapes for photo collages and student showcases. 6. **Synchronized Speaker Notes Extraction**: * Uses regex to extract slide titles and speaker notes directly from the JavaScript source in `index.html`. * Injects the text into `slide.notes_slide.notes_text_frame`. * Appends fallback YouTube URLs in case the presenter needs to present from a browser or Google Slides. 7. **Automatic Google Drive Sync**: * Detects local macOS Google Drive mount (`~/Library/CloudStorage/GoogleDrive-*/My Drive`). * Automatically copies the generated `.pptx` directly into Google Drive for immediate access. --- ## 4. Video Slides Reference The following slides include embedded native video clips: | Slide # | Title | Video File | Resolution | YouTube Fallback | | :--- | :--- | :--- | :--- | :--- | | **Slide 08** | Turning Photos Into 3D Reality | `remake-garuda-align.mp4` | 1080p | [Watch](https://www.youtube.com/watch?v=2iZ_v9tq08c) | | **Slide 09** | Real-Time 3D at Massive Scale | `remake-garuda-mesh.mp4` | 1080p | [Watch](https://www.youtube.com/watch?v=n7z61r36_cM) | | **Slide 10** | Worldwide Interest from Museums | `smithsonian-3d-lab.mp4` | 1080p | [Watch](https://www.youtube.com/watch?v=1F2rN2tM5b4) | | **Slide 04** | Dreamlab Innovation (AR Pipeline) | `screeningeagle-ar.mp4` | 1080p | [Watch](https://www.youtube.com/watch?v=eGXdyllLW70) | --- ## 5. Complete 22-Slide Deck Catalog & Storyboard Alignment | Slide | Title | Archetype | Core Concept & Narrative | | :---: | :--- | :--- | :--- | | **00** | Value Creation: From Open Source to Deep Tech | Hero Title Card | Keynote introduction, Julian Teh, GeeksHacking branding (`Give • Geek • Grow`) | | **01** | A 100% Volunteer Community | Big Visual Collage | GeeksHacking is a tech community, not a company. 100% volunteers. | | **02** | Gathering the Community to Give and Grow | Big Visual Collage | Hackathons (HackOMania), workshops, and socials gathering makers. | | **03** | Building What We Use | Big Visual UI | Building custom registration portals, platforms, and community tools. | | **04** | My Day Job: Dreamlab Innovation | 3 Native Cards | Civil structural inspection: GPR radar, Ultrasonic pulse echo, AI 3D twins. | | **05** | What You Have Been Building | Big Visual Collage | Connecting Julian's work to what Secondary 1–3 students built over their 3-day workshop. | | **06** | Open-Source/Volunteer Work vs Corporate R&D | 2 Comparison Cards | Volunteer community vs corporate R&D: both share the exact same mission — creating value. | | **07** | Two Lessons in Value Creation | Section Divider | Introduction of Lesson 01 (Strict Process) and Lesson 02 (Fail Fast, Fail Forward). | | **08** | Turning Photos Into 3D Reality | Embedded Video | Autodesk ReMake: multi-angle photo alignment reconstructing real-world objects into 3D. | | **09** | Real-Time 3D at Massive Scale | Embedded Video | Autodesk ReMake: 118 million polygons real-time rendering and mesh manipulation. | | **10** | Worldwide Interest from Museums | Embedded Video | Smithsonian 3D Lab: cultural preservation and artifact digitization at scale. | | **11** | The Problem: Nobody could pay | 3 Flow Cards | Museums had no budget. Starting with technology → searching for problems → no market. Team dissolution. | | **12** | The Real Process: Problem First | Side-by-Side Comparison | ❌ Solution → Problem (Wrong) vs ✅ Problem & People → Solution (Right). | | **13** | Lesson 1: A Strict Process | Statement Hero Banner | Value creation follows a strict process: Observe → Empathise → Innovate. | | **14** | Step 1: Observe | Accent Cards + Nav | What is the pain others feel? What are their unmet needs? Spot real friction first. | | **15** | Step 2: Empathise | 3 Pillar Cards + Nav | Think like them, live like them, struggle like them. Understand real constraints. | | **16** | Step 3: Innovate | 2 Principle Cards + Nav | Know who you solve for; know what problem to solve. Only then earn the right to invent. | | **17** | Lesson 2: Fail Fast, Fail Forward | Statement Hero Banner | School punishes failure as bad; innovation treats failure as data. | | **18** | When You Don't Know What You Don't Know | 2 Themed Cards | GeeksHacking & Dreamlab: High uncertainty & strict constraints before value is proven. | | **19** | Try, Fail, and Learn | Process Progression | Navigating the dark room: The Lean Startup loop (Eric Ries) — Try → Fail → Learn. | | **20** | Learning Turns Failure Into Progress | Uncertainty Loop | High Uncertainty → Try & Fail → **Learn** → Reduced Uncertainty & Forward Progress. | | **21** | Give, Geek, Grow | 3 Themed Pillar Cards | Final encouragement: Give (empathise & innovate), Geek (tinker & craft), Grow (try & learn). | --- ## 6. How to Run the Pipeline ### Prerequisites * **Node.js**: v20+ (with `puppeteer` installed in project `node_modules`). * **Python**: Python 3.9+ with `python-pptx` installed. * **Google Chrome**: Installed at `/Applications/Google Chrome.app/Contents/MacOS/Google Chrome`. ### Commands #### 1. Full Pipeline (Capture Screenshots + Build PPTX) Run this command whenever you change HTML content, slide styles, or layout: ```bash PATH="/Users/julianteh/.local/share/pi-node/node-v22.23.3-darwin-arm64/bin:$PATH" python3 scripts/export_to_pptx.py --capture ``` #### 2. Fast Re-Assembly (Build PPTX from Cached Screenshots) Run this command if you only edited speaker notes or metadata and do not need to re-render slide visuals: ```bash python3 scripts/export_to_pptx.py ``` #### 3. Standalone Screenshot Capture To test or inspect slide screenshots in `/tmp/gh_slides_export/` without building the PPTX: ```bash PATH="/Users/julianteh/.local/share/pi-node/node-v22.23.3-darwin-arm64/bin:$PATH" node scripts/capture_slides.js ``` --- ## 7. Output Files & Verification * **PowerPoint Export**: `exports/Value_Creation_From_Open_Source_to_Deep_Tech.pptx` (~31 MB). * **Google Drive Copy**: `~/Library/CloudStorage/GoogleDrive-jump4jupiter@gmail.com/My Drive/Value_Creation_From_Open_Source_to_Deep_Tech.pptx`. * **Captured Images**: `/tmp/gh_slides_export/slide_00.jpg` through `slide_21.jpg`. * **Playback Verification**: * **Microsoft PowerPoint (Mac/Windows)**: Opens offline, videos play automatically on slide transition and loop indefinitely. * **Apple Keynote**: Opens cleanly; videos play on click or transition. * **Google Slides**: Google Slides does not support offline OpenXML binary video streams; presenters using Google Slides should use the companion MP4 files synced to Google Drive or the YouTube fallback links in the speaker notes.