skills/nexu-io__open-design
1
0
Fork 0
mirror of https://github.com/nexu-io/open-design.git synced 2026-09-20 06:15:06 +08:00
Code Issues Packages Projects Releases Wiki Activity
Files
codex/design-system-module-only
nexu-io__open-design/plugins/_official/examples/fs-notebook-tabs/example.html
T
Tom Huang bc6a246c65 feat(slides): enhance deck project experience (#5083) 
* feat(deck): enhance slide deck functionality with speaker notes and navigation improvements

- Added a switch for including speaker notes in slide decks, defaulting to true.
- Updated keyboard navigation to include 'R' for resetting to the first slide.
- Implemented click navigation for half-slide transitions.
- Enhanced the deck framework to support hidden programmatic prev/next controls.
- Improved handling of file inputs in question forms to support file submissions.

This update aims to improve user experience in creating and presenting slide decks, ensuring better accessibility and functionality.

* feat(artifacts): enforce semantic naming for user-facing deliverables

- Updated guidelines to require semantic filenames derived from user briefs for new artifacts, moving away from defaulting to `index.html`.
- Enhanced documentation to clarify naming conventions for HTML files, emphasizing the use of descriptive names like `investor-pitch-deck.html`.
- Adjusted prompts and hints across the system to reflect these changes, ensuring consistency in user-facing outputs.
- Improved test coverage to validate the new naming conventions and ensure proper implementation in various contexts.

This update aims to enhance clarity and usability in project file management, promoting better organization and user experience.

* feat(file-viewer): enhance speaker notes display and improve file workspace functionality

- Updated the speaker notes section to include a styled placeholder for empty notes, improving user experience.
- Changed the icon in the file workspace from "slides" to "panel-left" for better clarity.
- Introduced new sub-category filtering options in the file workspace, enhancing organization and navigation.
- Improved styling for the page creator search input and added visual feedback for loading states.

These changes aim to enhance usability and visual consistency across the file viewer and workspace components.

* test(web): align workspace tests with pages switcher

* test(e2e): open design files through pages menu

* fix(deck): keep source mode reachable

* fix(workspace): restore uploaded file tabs

* feat(deck-thumbnail): implement virtualized thumbnail rail for improved performance

- Introduced a new `DeckThumbnailRail` component to optimize the rendering of deck thumbnails, reducing memory usage and improving load times.
- Enhanced the `FileViewer` to integrate the new thumbnail rail, allowing for lazy loading of thumbnails based on viewport visibility.
- Added tests for the `DeckThumbnailRail` to ensure correct functionality and caching behavior.
- Updated styles for better visual consistency and performance during thumbnail rendering.

These changes aim to enhance user experience by providing a smoother and more efficient way to navigate through deck slides.

* feat(deck): enhance deck rendering with thumbnail support and keyboard shortcuts

- Integrated `DeckSlideThumbnail` for rendering individual slides in a shadow root, improving performance and reducing main-thread load.
- Updated `DeckThumbnailRail` to utilize the new thumbnail component, allowing for efficient slide navigation.
- Implemented keyboard shortcuts for deck navigation, enhancing user experience during presentations.
- Added tests for `buildDeckRenderInput` to ensure proper functionality of the deck stage fallback.
- Improved styling for loading states in the viewer, providing a smoother visual experience.

These changes aim to optimize the deck viewing experience by reducing resource consumption and enhancing interactivity.

* feat(deck): improve thumbnail loading and speaker notes editing experience

- Refactored `DeckSlideThumbnail` to enhance loading states with a new shimmer effect, improving visual feedback during thumbnail rendering.
- Updated `DeckThumbnailRail` to manage loading states for thumbnails, ensuring a smoother user experience.
- Simplified the speaker notes editing interface by removing the toggle switch, allowing direct editing from the notes body.
- Enhanced accessibility by adding roles and focus states to speaker notes elements.
- Added tests to verify the new loading states and speaker notes functionality.

These changes aim to optimize the user experience in deck navigation and speaker notes management, providing a more intuitive and responsive interface.

* feat(file-viewer): enhance version export functionality and speaker notes interaction

- Introduced new export options for file versions, including PDF and image formats, improving the ability to download and share content.
- Implemented a streamlined process for exporting version content, with progress indicators and error handling for a better user experience.
- Enhanced speaker notes editing by refining event handling to prevent unintended focus shifts, ensuring a smoother editing experience.
- Updated styles for improved visual consistency in the file version download interface.
- Added tests to verify the functionality of version exports and speaker notes interactions.

These changes aim to optimize the file viewer's usability and enhance the overall experience when managing and exporting project files.

* fix(web): polish export menus and creator filters

* fix(file-viewer): fall back to preview exports

* test(file-viewer): cover version export fallbacks

* test(file-viewer): assert loading skeleton by role

* fix(file-viewer): restore html source mode affordance

* fix(file-viewer): capture full version fallback snapshots

* docs: trim slides handoff eof

* test(exports): cover full preview snapshot requests

* test(file-viewer): account for snapshot options arg

* refactor(file-viewer, file-workspace): streamline export functions and enhance page creator dialog visibility

* test(file-workspace): enhance slide template creation and mock plugin responses

* feat(export): add support for versioned exports and enhance HTML export functionality

* feat(export): implement versioned export support across multiple formats and enhance related tests

* feat(file-viewer): enhance manual edit functionality with commit sequence tracking and add test for inline text session saving

* style(speaker-notes): update filmstrip and thumb-frame styles for improved responsiveness and add corresponding tests

* feat(file-viewer): enhance comment composer functionality with portal metrics and improve draw toolbar layout for mobile views

* feat(analytics): track slide deck viewing experience

Add analytics for the new deck/slides experience introduced in this PR:
the deck viewer surface, in-deck slide navigation, thumbnail rail, and
speaker-notes authoring. Presentation entry stays on the existing
present_popover click to avoid double-counting.

- contracts: DeckViewerSurfaceViewProps (surface_view),
  DeckViewerClickProps (ui_click), SpeakerNotesSaveResultProps
  (new speaker_notes_save_result event), wired into the event unions.
- web: track* wrappers + fire helpers in FileViewer — deck_viewer
  surface_view on deck mount, slide_prev/next/reset, thumbnail_select,
  thumbnail_rail_toggle (expand/collapse), speaker_notes_edit, and
  speaker_notes_save_result (preview + presenter surfaces).
- tests: deck analytics suite asserting the emitted (event, props) pairs.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

* feat(file-viewer, file-workspace): enhance export toast functionality and improve localization for page creation

* feat(home-view, plugins-home-section, agent-skill): update default facet preference, enhance category selection handling, and improve localization support

- Set `preferDefaultFacet` to true in HomeView component for better user experience.
- Introduced `handlePickCategory` function in PluginsHomeSection to manage category selection based on card layout visibility.
- Updated PRIMARY_CATEGORIES to reflect the new order and added localization for titles and descriptions in adaptAgentSkill.
- Enhanced tests to verify the correct handling of display copy and tags from SKILL frontmatter.

* feat(plugins-home, file-workspace): introduce commercial category labels and enhance deck handling

- Added a new module for resolving and localizing commercial category labels for plugins.
- Updated the FileWorkspace and PluginCard components to display the commercial category label on deck cards.
- Enhanced the PageCreatorPresetFrame to adjust frame classes based on deck presets.
- Refactored subcategory handling in facets to align with the new commercial category taxonomy.
- Improved localization support for new category labels across multiple languages.

* feat(deck-preview): implement deck preview scaling and enhance home hero layout

- Introduced `useDeckPreviewScale` hook to manage scaling of deck previews within a fixed 1280×720 logical viewport, ensuring proportional rendering across various templates.
- Updated `FileWorkspace`, `HomeHero`, and `PluginCard` components to utilize the new scaling functionality for improved visual consistency.
- Enhanced the layout of the home hero section to accommodate new subtype chips and descriptions, including a "More" dropdown for overflow handling.
- Improved localization support for new UI elements across multiple languages.

* fix(PreviewModal): clarify sidebar prop documentation and update test description

- Updated the documentation for the `PreviewSidebar` interface to specify that the sidebar's stage-edge handles are not shown when the sidebar prop is absent.
- Modified the test suite description for `PreviewModal` to be more concise and relevant.

* test(e2e): select prototype visual card

---------

Co-authored-by: free666799 <293857035+free666799@users.noreply.github.com>
Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-10 09:41:47 +00:00

969 lines
41 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Defend a CS Capstone like a Top Thesis Advisor - Student coursework</title>
<style>
/* === FONTS === */
@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,wght@0,400;0,700;1,400&family=DM+Sans:wght@400;500;700&display=swap');
/* ===========================================
DESIGN TOKENS — Notebook Tabs theme
Cream paper card on dark ground, colorful
index tabs on the right edge, binder holes
on the left. Bodoni Moda + DM Sans.
All values authored at 1920×1080 stage size.
=========================================== */
:root {
/* Colors */
--bg-outer: #2d2d2d; /* dark desk behind the notebook */
--bg-page: #f8f6f1; /* cream paper */
--text-primary: #1a1a1a;
--text-secondary: #6b6358;
--rule: #d8d2c4; /* hairline rules on paper */
--tab-1: #98d4bb; /* Mint */
--tab-2: #c7b8ea; /* Lavender */
--tab-3: #f4b8c5; /* Pink */
--tab-4: #a8d8ea; /* Sky */
--tab-5: #ffe6a7; /* Cream */
/* Stage */
--stage-bg: var(--bg-outer);
--slide-bg: var(--bg-outer);
/* Typography */
--font-display: 'Bodoni Moda', 'Didot', serif;
--font-body: 'DM Sans', 'Helvetica Neue', sans-serif;
--title-size: 150px;
--h2-size: 84px;
--subtitle-size: 30px;
--body-size: 26px;
--label-size: 17px;
/* Paper geometry (inside the 1920×1080 stage) */
--paper-top: 56px;
--paper-bottom: 56px;
--paper-left: 120px;
--paper-right: 150px; /* leaves room for the tabs */
--paper-pad-x: 110px;
--paper-pad-y: 78px;
/* Motion */
--ease-page: cubic-bezier(0.16, 1, 0.3, 1);
--duration-normal: 0.7s;
}
/* === BASE === */
* { margin: 0; padding: 0; box-sizing: border-box; }
/* ===========================================
FIXED 16:9 STAGE: MANDATORY BASE STYLES
(full viewport-base.css, inlined)
Slides are authored at 1920×1080 and scaled as a whole.
=========================================== */
html,
body {
width: 100%;
height: 100%;
margin: 0;
overflow: hidden;
background: var(--stage-bg, #000);
}
.deck-viewport {
position: fixed;
inset: 0;
overflow: hidden;
background: var(--stage-bg, #000);
}
.deck-stage {
position: absolute;
left: 0;
top: 0;
width: 1920px;
height: 1080px;
overflow: hidden;
transform-origin: 0 0;
background: var(--slide-bg, #fff);
}
.slide {
position: absolute;
inset: 0;
width: 1920px;
height: 1080px;
overflow: hidden;
display: block;
visibility: hidden;
opacity: 0;
pointer-events: none;
background: var(--slide-bg, #fff);
}
.slide.active,
.slide.visible {
visibility: visible;
opacity: 1;
pointer-events: auto;
z-index: 1;
}
img, video, canvas, svg {
max-width: 100%;
max-height: 100%;
}
.deck-controls {
position: fixed;
left: 50%;
bottom: 22px;
transform: translateX(-50%);
z-index: 1000;
}
@media print {
html, body { width: 1920px; height: auto; overflow: visible; background: #fff; }
.deck-viewport { position: static; overflow: visible; background: #fff; }
.deck-stage { position: static; width: auto; height: auto; transform: none !important; background: none; }
.slide {
position: relative; display: block !important;
visibility: visible !important; opacity: 1 !important; pointer-events: auto !important;
width: 1920px; height: 1080px;
break-after: page; page-break-after: always;
}
.slide:last-child { break-after: auto; page-break-after: auto; }
.deck-controls { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.2s !important;
}
/* no movement: reveals fade only, chart bars render at full height */
.reveal { transform: none !important; }
.bar { transform: none !important; }
}
/* ===========================================
THE NOTEBOOK — paper card, binder holes, tabs
=========================================== */
.paper {
position: absolute;
top: var(--paper-top);
bottom: var(--paper-bottom);
left: var(--paper-left);
right: var(--paper-right);
background: var(--bg-page);
border-radius: 8px;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.25),
0 18px 50px rgba(0, 0, 0, 0.45),
inset 0 0 0 1px rgba(255, 255, 255, 0.35);
/* faint paper grain via layered gradients */
background-image:
linear-gradient(rgba(26, 26, 26, 0.018) 1px, transparent 1px),
linear-gradient(180deg, var(--bg-page), var(--bg-page));
background-size: 100% 44px, 100% 100%;
z-index: 1; /* paper sits above the tucked tab roots */
}
/* Binder holes — punched circles on the left margin */
.holes {
position: absolute;
left: 38px;
top: 90px;
bottom: 90px;
width: 26px;
display: flex;
flex-direction: column;
justify-content: space-between;
z-index: 3;
}
.holes span {
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--bg-outer);
box-shadow:
inset 0 2px 4px rgba(0, 0, 0, 0.7),
0 1px 0 rgba(255, 255, 255, 0.55);
}
/* Margin rule echoing a real notebook's red line */
.margin-rule {
position: absolute;
left: 92px;
top: 0;
bottom: 0;
width: 1px;
background: var(--tab-3);
opacity: 0.55;
z-index: 2;
}
/* Index tabs — vertical labels protruding past the right paper edge.
Positioned against the stage so 12px of each tab root tucks UNDER
the paper (.paper has z-index: 1, tabs have z-index: 0). */
.tabs {
position: absolute;
right: calc(var(--paper-right) - 44px); /* 44px sticks out past the paper edge */
top: calc(var(--paper-top) + 60px);
display: flex;
flex-direction: column;
gap: 18px;
z-index: 0; /* tucked behind the paper edge */
}
.tab {
writing-mode: vertical-rl;
font-family: var(--font-body);
font-size: var(--label-size);
font-weight: 700;
letter-spacing: 0.3em;
text-transform: uppercase;
color: rgba(26, 26, 26, 0.78);
width: 56px;
height: 158px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 0 10px 10px 0;
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3);
opacity: 0.82;
transform: translateX(-6px);
transition: transform 0.45s var(--ease-page), opacity 0.45s var(--ease-page);
}
.tab-1 { background: var(--tab-1); }
.tab-2 { background: var(--tab-2); }
.tab-3 { background: var(--tab-3); }
.tab-4 { background: var(--tab-4); }
.tab-5 { background: var(--tab-5); }
.tab.on { opacity: 1; transform: translateX(0); box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.35); }
/* Content area inside the paper */
.page {
position: absolute;
inset: 0;
padding: var(--paper-pad-y) var(--paper-pad-x) var(--paper-pad-y) 150px;
display: flex;
flex-direction: column;
z-index: 1;
}
/* === PAGE CHROME — running head + baseline === */
.runhead {
display: flex;
justify-content: space-between;
align-items: baseline;
font-family: var(--font-body);
font-size: var(--label-size);
letter-spacing: 0.26em;
text-transform: uppercase;
color: var(--text-secondary);
border-bottom: 1px solid var(--rule);
padding-bottom: 18px;
margin-bottom: 40px;
}
.runhead .no { font-weight: 700; color: var(--text-primary); }
.baseline {
margin-top: auto;
display: flex;
justify-content: space-between;
font-family: var(--font-body);
font-size: 15px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--text-secondary);
border-top: 1px solid var(--rule);
padding-top: 16px;
}
/* === TYPOGRAPHY === */
.display {
font-family: var(--font-display);
font-weight: 700;
font-size: var(--title-size);
line-height: 0.98;
letter-spacing: -0.01em;
color: var(--text-primary);
}
.h2 {
font-family: var(--font-display);
font-weight: 700;
font-size: var(--h2-size);
line-height: 1.04;
color: var(--text-primary);
}
.kicker {
font-family: var(--font-body);
font-size: var(--label-size);
font-weight: 700;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--text-secondary);
margin-bottom: 22px;
}
.kicker .chip {
display: inline-block;
width: 30px;
height: 12px;
border-radius: 3px;
margin-right: 12px;
vertical-align: baseline;
}
.lede {
font-family: var(--font-body);
font-size: var(--subtitle-size);
line-height: 1.5;
color: var(--text-secondary);
max-width: 980px;
}
/* === ENTRANCE ANIMATION === */
.reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity var(--duration-normal) var(--ease-page),
transform var(--duration-normal) var(--ease-page);
}
.slide.visible .reveal { opacity: 1; transform: translateY(0); }
.reveal:nth-child(1), .reveal.d1 { transition-delay: 0.08s; }
.reveal:nth-child(2), .reveal.d2 { transition-delay: 0.18s; }
.reveal:nth-child(3), .reveal.d3 { transition-delay: 0.28s; }
.reveal:nth-child(4), .reveal.d4 { transition-delay: 0.38s; }
.reveal:nth-child(5), .reveal.d5 { transition-delay: 0.48s; }
.reveal:nth-child(6), .reveal.d6 { transition-delay: 0.58s; }
/* === COVER === */
.cover-meta {
display: flex;
gap: 26px;
align-items: center;
font-family: var(--font-body);
font-size: 20px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--text-secondary);
margin-top: 44px;
}
.cover-swatches { display: flex; gap: 10px; }
.cover-swatches i {
width: 44px; height: 18px; border-radius: 4px; display: inline-block;
box-shadow: 0 1px 2px rgba(0,0,0,0.18);
}
.cover-edition {
font-family: var(--font-display);
font-style: italic;
font-size: 34px;
color: var(--text-secondary);
margin-top: 26px;
}
/* === CONTENTS (index page) === */
.toc { display: flex; flex-direction: column; margin-top: 8px; }
.toc-row {
display: flex;
align-items: baseline;
gap: 26px;
padding: 26px 0;
border-bottom: 1px dashed var(--rule);
font-family: var(--font-body);
}
.toc-row:last-child { border-bottom: none; }
.toc-chip { width: 38px; height: 16px; border-radius: 4px; flex: none; align-self: center; }
.toc-no {
font-family: var(--font-display);
font-size: 30px;
font-weight: 700;
color: var(--text-secondary);
width: 64px;
flex: none;
}
.toc-title { font-family: var(--font-display); font-size: 40px; font-weight: 400; color: var(--text-primary); }
.toc-dots { flex: 1; border-bottom: 2px dotted var(--rule); transform: translateY(-9px); }
.toc-pg { font-size: 22px; letter-spacing: 0.18em; color: var(--text-secondary); }
/* === SECTION DIVIDER === */
.divider-no {
font-family: var(--font-display);
font-weight: 400;
font-size: 430px;
line-height: 0.85;
color: transparent;
-webkit-text-stroke: 2px var(--text-primary);
}
.divider-wrap { display: flex; align-items: center; gap: 90px; flex: 1; }
.divider-side .h2 { margin-bottom: 24px; }
.divider-bar { width: 120px; height: 16px; border-radius: 4px; margin-bottom: 34px; }
/* === BULLETS === */
.points { display: flex; flex-direction: column; gap: 30px; margin-top: 10px; }
.point { display: flex; gap: 30px; align-items: flex-start; max-width: 1180px; }
.point .pin {
flex: none;
width: 52px; height: 52px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.18);
}
.point .pin svg { width: 26px; height: 26px; }
.point h3 { font-family: var(--font-display); font-size: 36px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
.point p { font-family: var(--font-body); font-size: var(--body-size); line-height: 1.5; color: var(--text-secondary); }
/* === QUOTE === */
.quote-mark {
font-family: var(--font-display);
font-size: 220px;
line-height: 0.6;
color: var(--tab-2);
margin-bottom: 12px;
}
.quote-text {
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
font-size: 66px;
line-height: 1.25;
color: var(--text-primary);
max-width: 1280px;
}
.quote-attr {
font-family: var(--font-body);
font-size: 22px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--text-secondary);
margin-top: 44px;
}
/* === BIG STAT === */
.stat-wrap { display: flex; align-items: center; gap: 90px; flex: 1; }
.stat-num {
font-family: var(--font-display);
font-weight: 700;
font-size: 300px;
line-height: 0.9;
color: var(--text-primary);
}
.stat-num .unit {
display: block;
font-size: 120px;
font-style: italic;
font-weight: 400;
line-height: 1;
margin-top: 18px;
color: var(--text-secondary);
}
.stat-side { max-width: 560px; border-left: 4px solid var(--tab-1); padding-left: 44px; }
.stat-side h3 { font-family: var(--font-display); font-size: 40px; font-weight: 700; margin-bottom: 16px; color: var(--text-primary); }
.stat-side p { font-family: var(--font-body); font-size: var(--body-size); line-height: 1.55; color: var(--text-secondary); }
/* === BAR CHART (pure CSS) === */
.chart {
display: flex;
align-items: flex-end;
gap: 70px;
height: 480px;
margin-top: 30px;
padding: 0 30px;
border-bottom: 2px solid var(--text-primary);
}
.bar-group { display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; flex: 1; }
.bar {
width: 130px;
border-radius: 8px 8px 0 0;
position: relative;
box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.1);
transform: scaleY(0);
transform-origin: bottom;
transition: transform 0.9s var(--ease-page);
}
.slide.visible .bar { transform: scaleY(1); }
.slide.visible .bar.b2 { transition-delay: 0.15s; }
.slide.visible .bar.b3 { transition-delay: 0.3s; }
.slide.visible .bar.b4 { transition-delay: 0.45s; }
.bar-val {
position: absolute;
top: -44px;
left: 50%;
transform: translateX(-50%);
font-family: var(--font-display);
font-weight: 700;
font-size: 30px;
color: var(--text-primary);
}
.bar-label {
font-family: var(--font-body);
font-size: 20px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-secondary);
margin-top: 18px;
}
/* === COMPARISON === */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; margin-top: 16px; flex: 1; align-content: start; }
.col {
border: 1px solid var(--rule);
border-radius: 10px;
padding: 44px 48px;
background: rgba(255, 255, 255, 0.45);
}
.col.hot { border: 2px solid var(--text-primary); box-shadow: 8px 8px 0 var(--tab-4); }
.col h3 {
font-family: var(--font-display);
font-size: 38px;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 26px;
padding-bottom: 16px;
border-bottom: 1px solid var(--rule);
}
.col ul { list-style: none; }
.col li {
font-family: var(--font-body);
font-size: 25px;
line-height: 1.45;
color: var(--text-secondary);
padding: 10px 0 10px 34px;
position: relative;
}
.col li::before {
content: '';
position: absolute;
left: 0;
top: 22px;
width: 14px;
height: 14px;
border-radius: 3px;
background: var(--rule);
}
.col.hot li::before { background: var(--tab-4); }
.col.hot li { color: var(--text-primary); }
/* === PRINCIPLE GRID 2×2 === */
.grid4 { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; margin-top: 12px; flex: 1; align-content: start; }
.gcard {
border: 1px solid var(--rule);
border-radius: 10px;
padding: 36px 40px;
background: rgba(255, 255, 255, 0.45);
position: relative;
overflow: hidden;
}
.gcard::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 12px;
background: var(--edge, var(--tab-1));
}
.gcard h3 { font-family: var(--font-display); font-size: 32px; font-weight: 700; color: var(--text-primary); margin-bottom: 10px; }
.gcard p { font-family: var(--font-body); font-size: 23px; line-height: 1.5; color: var(--text-secondary); }
.gcard .gno {
font-family: var(--font-display);
font-style: italic;
font-size: 26px;
color: var(--text-secondary);
margin-bottom: 10px;
}
/* === CLOSING === */
.close-wrap { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.close-wrap .display em { font-style: italic; font-weight: 400; }
.close-links { display: flex; gap: 56px; margin-top: 60px; }
.lk {
display: inline-flex;
align-items: center;
gap: 14px;
font-family: var(--font-body);
font-size: 22px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-primary);
border-bottom: 3px solid var(--tab-3);
padding-bottom: 8px;
}
.lk svg { width: 26px; height: 26px; }
/* === DECK CONTROLS (outside the scaled stage) === */
.deck-controls {
font-family: var(--font-body);
font-size: 14px;
letter-spacing: 0.22em;
color: rgba(248, 246, 241, 0.55);
background: rgba(26, 26, 26, 0.55);
border: 1px solid rgba(248, 246, 241, 0.18);
padding: 8px 18px;
border-radius: 999px;
user-select: none;
}
.deck-controls .cur { color: var(--tab-1); font-weight: 700; }
</style>
<style id="od-no-pager">.deck-controls,#counter,.deck-counter{display:none!important}</style>
</head>
<body>
<div class="deck-viewport">
<main class="deck-stage" id="deckStage" aria-label="Slide deck">
<!-- === SLIDE 1: COVER (Intro) === -->
<section class="slide active visible">
<div class="paper">
<div class="holes"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
<div class="margin-rule"></div>
<div class="page">
<div class="runhead"><span class="no">No. 01</span><span>CS Capstone Defense · Computer Science Dept.</span></div>
<div class="close-wrap">
<p class="kicker reveal d1"><span class="chip" style="background: var(--tab-1);"></span>A private, on-device predictive keyboard</p>
<h1 class="display reveal d2">On-Device<br>Predictive <em style="font-weight:400;">Keyboard</em></h1>
<p class="cover-edition reveal d3">TypeAhead — thesis defense, Computer Science Department</p>
<div class="cover-meta reveal d4">
<span>Jordan Ames</span><span>·</span><span>Advisor: Prof. Elena Cho</span><span>·</span>
<span class="cover-swatches"><i style="background:var(--tab-1)"></i><i style="background:var(--tab-2)"></i><i style="background:var(--tab-3)"></i><i style="background:var(--tab-4)"></i><i style="background:var(--tab-5)"></i></span>
</div>
</div>
<div class="baseline"><span>Cover</span><span>Defense date: May 14, 2026</span></div>
</div>
</div>
<div class="tabs" aria-hidden="true">
<span class="tab tab-1 on">Intro</span><span class="tab tab-2">Problem</span><span class="tab tab-3">Evidence</span><span class="tab tab-4">Findings</span><span class="tab tab-5">Defense</span>
</div>
</section>
<!-- === SLIDE 2: CONTENTS (Intro) === -->
<section class="slide">
<div class="paper">
<div class="holes"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
<div class="margin-rule"></div>
<div class="page">
<div class="runhead"><span class="no">No. 02</span><span>Contents</span></div>
<h2 class="h2 reveal d1" style="margin-bottom: 30px;">Defense roadmap</h2>
<div class="toc">
<div class="toc-row reveal d2"><span class="toc-chip" style="background:var(--tab-2)"></span><span class="toc-no">i.</span><span class="toc-title">The problem — cloud keyboards leak keystrokes</span><span class="toc-dots"></span><span class="toc-pg">PG 03</span></div>
<div class="toc-row reveal d3"><span class="toc-chip" style="background:var(--tab-3)"></span><span class="toc-no">ii.</span><span class="toc-title">The evidence — accuracy, latency, privacy</span><span class="toc-dots"></span><span class="toc-pg">PG 06</span></div>
<div class="toc-row reveal d4"><span class="toc-chip" style="background:var(--tab-4)"></span><span class="toc-no">iii.</span><span class="toc-title">The contribution — four things that are new</span><span class="toc-dots"></span><span class="toc-pg">PG 08</span></div>
<div class="toc-row reveal d5"><span class="toc-chip" style="background:var(--tab-5)"></span><span class="toc-no">iv.</span><span class="toc-title">Limitations &amp; committee Q&amp;A</span><span class="toc-dots"></span><span class="toc-pg">PG 10</span></div>
</div>
<div class="baseline"><span>Contents</span><span>02 / 10</span></div>
</div>
</div>
<div class="tabs" aria-hidden="true">
<span class="tab tab-1 on">Intro</span><span class="tab tab-2">Problem</span><span class="tab tab-3">Evidence</span><span class="tab tab-4">Findings</span><span class="tab tab-5">Defense</span>
</div>
</section>
<!-- === SLIDE 3: SECTION DIVIDER (Craft) === -->
<section class="slide">
<div class="paper">
<div class="holes"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
<div class="margin-rule"></div>
<div class="page">
<div class="runhead"><span class="no">No. 03</span><span>Section i</span></div>
<div class="divider-wrap">
<div class="divider-no reveal d1">01</div>
<div class="divider-side">
<div class="divider-bar reveal d2" style="background: var(--tab-2);"></div>
<h2 class="h2 reveal d3">The problem —<br>keystrokes leave the phone</h2>
<p class="lede reveal d4" style="margin-top: 22px; max-width: 660px;">Every major mobile keyboard (Gboard, SwiftKey) ships raw keystrokes to cloud servers for next-word prediction — a privacy liability class-action suits have already targeted.</p>
</div>
</div>
<div class="baseline"><span>The problem</span><span>03 / 10</span></div>
</div>
</div>
<div class="tabs" aria-hidden="true">
<span class="tab tab-1">Intro</span><span class="tab tab-2 on">Problem</span><span class="tab tab-3">Evidence</span><span class="tab tab-4">Findings</span><span class="tab tab-5">Defense</span>
</div>
</section>
<!-- === SLIDE 4: BULLETS (Craft) === -->
<section class="slide">
<div class="paper">
<div class="holes"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
<div class="margin-rule"></div>
<div class="page">
<div class="runhead"><span class="no">No. 04</span><span>Section i · The problem</span></div>
<p class="kicker reveal d1"><span class="chip" style="background: var(--tab-2);"></span>Three design principles</p>
<h2 class="h2 reveal d2" style="font-size: 64px; margin-bottom: 34px;">TypeAhead: on-device,<br>federated, adaptive</h2>
<div class="points">
<div class="point reveal d3">
<span class="pin" style="background: var(--tab-1);"><svg viewBox="0 0 24 24" fill="none" stroke="#1a1a1a" stroke-width="2.5"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20M4 19.5A2.5 2.5 0 0 0 6.5 22H20V2H6.5A2.5 2.5 0 0 0 4 4.5v15z"/></svg></span>
<div><h3>On-device inference</h3><p>A 2.1M-parameter transformer runs entirely on-device via Core ML / NNAPI. No keystroke ever leaves the phone — verified by packet-capture across 40 hours of typing.</p></div>
</div>
<div class="point reveal d4">
<span class="pin" style="background: var(--tab-2);"><svg viewBox="0 0 24 24" fill="none" stroke="#1a1a1a" stroke-width="2.5"><path d="M12 19l7-7 3 3-7 7-3-3zM18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5zM2 2l7.586 7.586"/><circle cx="11" cy="11" r="2"/></svg></span>
<div><h3>Federated fine-tuning</h3><p>Personalization trains locally overnight and syncs only encrypted gradient deltas — the same class of protocol behind Gboard's federated learning, rebuilt at capstone scale.</p></div>
</div>
<div class="point reveal d5">
<span class="pin" style="background: var(--tab-3);"><svg viewBox="0 0 24 24" fill="none" stroke="#1a1a1a" stroke-width="2.5"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg></span>
<div><h3>Adaptive vocabulary</h3><p>A per-user trie re-ranks candidates against typing history, so names, slang, and jargon surface within roughly 200 keystrokes without retraining the base model.</p></div>
</div>
</div>
<div class="baseline"><span>The problem</span><span>04 / 10</span></div>
</div>
</div>
<div class="tabs" aria-hidden="true">
<span class="tab tab-1">Intro</span><span class="tab tab-2 on">Problem</span><span class="tab tab-3">Evidence</span><span class="tab tab-4">Findings</span><span class="tab tab-5">Defense</span>
</div>
</section>
<!-- === SLIDE 5: QUOTE (Craft) === -->
<section class="slide">
<div class="paper">
<div class="holes"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
<div class="margin-rule"></div>
<div class="page">
<div class="runhead"><span class="no">No. 05</span><span>Section i · The problem</span></div>
<div class="close-wrap">
<div class="quote-mark reveal d1">&ldquo;</div>
<p class="quote-text reveal d2">The question isn't whether an on-device model can predict text — it's whether it can do it as well as the cloud, without the privacy trade-off.</p>
<p class="quote-attr reveal d3">— Prof. Elena Cho, thesis advisor</p>
</div>
<div class="baseline"><span>Quote</span><span>05 / 10</span></div>
</div>
</div>
<div class="tabs" aria-hidden="true">
<span class="tab tab-1">Intro</span><span class="tab tab-2 on">Problem</span><span class="tab tab-3">Evidence</span><span class="tab tab-4">Findings</span><span class="tab tab-5">Defense</span>
</div>
</section>
<!-- === SLIDE 6: BIG STAT (Numbers) === -->
<section class="slide">
<div class="paper">
<div class="holes"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
<div class="margin-rule"></div>
<div class="page">
<div class="runhead"><span class="no">No. 06</span><span>Section ii · The evidence</span></div>
<div class="stat-wrap">
<div class="stat-num reveal d1">94.2<span class="unit">% top-3 hit rate</span></div>
<div class="stat-side reveal d2">
<h3>On-device accuracy</h3>
<p>Evaluated on a held-out set of 50,000 keystrokes from 12 volunteer typists, TypeAhead matches Gboard's cloud model (95.1%) within 0.9 points — using a model 40&times; smaller.</p>
</div>
</div>
<div class="baseline"><span>The evidence</span><span>06 / 10</span></div>
</div>
</div>
<div class="tabs" aria-hidden="true">
<span class="tab tab-1">Intro</span><span class="tab tab-2">Problem</span><span class="tab tab-3 on">Evidence</span><span class="tab tab-4">Findings</span><span class="tab tab-5">Defense</span>
</div>
</section>
<!-- === SLIDE 7: BAR CHART (Numbers) === -->
<section class="slide">
<div class="paper">
<div class="holes"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
<div class="margin-rule"></div>
<div class="page">
<div class="runhead"><span class="no">No. 07</span><span>Section ii · The evidence</span></div>
<p class="kicker reveal d1"><span class="chip" style="background: var(--tab-3);"></span>Latency benchmark — Pixel 7, cold cache</p>
<h2 class="h2 reveal d2" style="font-size: 58px;">18ms beats the 340ms cloud round trip</h2>
<div class="chart">
<div class="bar-group"><div class="bar b1" style="height: 8%; background: var(--tab-1);"><span class="bar-val">18ms</span></div><div class="bar-label">TypeAhead (ours)</div></div>
<div class="bar-group"><div class="bar b2" style="height: 16%; background: var(--tab-2);"><span class="bar-val">34ms</span></div><div class="bar-label">SwiftKey (on-device)</div></div>
<div class="bar-group"><div class="bar b3" style="height: 45%; background: var(--tab-3);"><span class="bar-val">120ms</span></div><div class="bar-label">Gboard (cloud)</div></div>
<div class="bar-group"><div class="bar b4" style="height: 90%; background: var(--tab-4);"><span class="bar-val">340ms</span></div><div class="bar-label">GPT-4o API (cloud)</div></div>
</div>
<div class="baseline"><span>The evidence</span><span>07 / 10</span></div>
</div>
</div>
<div class="tabs" aria-hidden="true">
<span class="tab tab-1">Intro</span><span class="tab tab-2">Problem</span><span class="tab tab-3 on">Evidence</span><span class="tab tab-4">Findings</span><span class="tab tab-5">Defense</span>
</div>
</section>
<!-- === SLIDE 8: COMPARISON (Plan) === -->
<section class="slide">
<div class="paper">
<div class="holes"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
<div class="margin-rule"></div>
<div class="page">
<div class="runhead"><span class="no">No. 08</span><span>Section iii · The contribution</span></div>
<h2 class="h2 reveal d1" style="font-size: 58px; margin-bottom: 26px;">Existing keyboards — versus TypeAhead</h2>
<div class="compare">
<div class="col reveal d2">
<h3>Cloud keyboards (Gboard, SwiftKey)</h3>
<ul>
<li>Keystrokes leave the device</li>
<li>No offline personalization</li>
<li>120&ndash;340ms median latency over the network</li>
<li>Opaque to independent audit</li>
</ul>
</div>
<div class="col hot reveal d3">
<h3>TypeAhead (this thesis)</h3>
<ul>
<li>100% on-device inference, no network calls</li>
<li>Federated personalization, encrypted deltas only</li>
<li>18ms median latency, no radio required</li>
<li>Open evaluation harness + full weights released</li>
</ul>
</div>
</div>
<div class="baseline"><span>The contribution</span><span>08 / 10</span></div>
</div>
</div>
<div class="tabs" aria-hidden="true">
<span class="tab tab-1">Intro</span><span class="tab tab-2">Problem</span><span class="tab tab-3">Evidence</span><span class="tab tab-4 on">Findings</span><span class="tab tab-5">Defense</span>
</div>
</section>
<!-- === SLIDE 9: PRINCIPLE GRID (Plan) === -->
<section class="slide">
<div class="paper">
<div class="holes"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
<div class="margin-rule"></div>
<div class="page">
<div class="runhead"><span class="no">No. 09</span><span>Section iii · The contribution</span></div>
<h2 class="h2 reveal d1" style="font-size: 58px; margin-bottom: 26px;">Four contributions of this thesis</h2>
<div class="grid4">
<div class="gcard reveal d2" style="--edge: var(--tab-1);"><div class="gno">Contribution i</div><h3>2.1M-param transformer</h3><p>A quantized 8-bit transformer that fits in 6.8MB and runs inference in under 20ms on a mid-range 2021-era phone.</p></div>
<div class="gcard reveal d3" style="--edge: var(--tab-2);"><div class="gno">Contribution ii</div><h3>Federated update protocol</h3><p>A gradient-delta sync protocol that personalizes overnight on Wi-Fi and charge, verified to leak no raw text in transit.</p></div>
<div class="gcard reveal d4" style="--edge: var(--tab-3);"><div class="gno">Contribution iii</div><h3>Privacy-utility benchmark</h3><p>A reproducible 12-participant, 50K-keystroke harness comparing on-device and cloud keyboards on accuracy, latency, and battery.</p></div>
<div class="gcard reveal d5" style="--edge: var(--tab-4);"><div class="gno">Contribution iv</div><h3>Open weights &amp; code</h3><p>Full model weights, training scripts, and the eval harness published for the department's future capstones to build on.</p></div>
</div>
<div class="baseline"><span>The contribution</span><span>09 / 10</span></div>
</div>
</div>
<div class="tabs" aria-hidden="true">
<span class="tab tab-1">Intro</span><span class="tab tab-2">Problem</span><span class="tab tab-3">Evidence</span><span class="tab tab-4 on">Findings</span><span class="tab tab-5">Defense</span>
</div>
</section>
<!-- === SLIDE 10: CLOSING (End) === -->
<section class="slide">
<div class="paper">
<div class="holes"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
<div class="margin-rule"></div>
<div class="page">
<div class="runhead"><span class="no">No. 10</span><span>Limitations &amp; defense</span></div>
<div class="close-wrap">
<h2 class="display reveal d1" style="font-size: 132px;">Yes, it scales —<br><em>within limits.</em></h2>
<div class="close-links reveal d2">
<span class="lk"><svg viewBox="0 0 24 24" fill="none" stroke="#1a1a1a" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><path d="M22 6l-10 7L2 6"/></svg>Limitation: 8 languages tested, not 40+</span>
<span class="lk"><svg viewBox="0 0 24 24" fill="none" stroke="#1a1a1a" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>Limitation: +3% battery drain from overnight sync</span>
</div>
<p class="lede reveal d3" style="margin-top: 56px; font-size: 22px;">Committee question addressed: given six more months, TypeAhead's federated protocol generalizes to any keyboard vocabulary — the constraint is per-language training data, not architecture.</p>
</div>
<div class="baseline"><span>Defense</span><span>10 / 10</span></div>
</div>
</div>
<div class="tabs" aria-hidden="true">
<span class="tab tab-1">Intro</span><span class="tab tab-2">Problem</span><span class="tab tab-3">Evidence</span><span class="tab tab-4">Findings</span><span class="tab tab-5 on">Defense</span>
</div>
</section>
</main>
</div>
<!-- Page counter lives outside the scaled stage -->
<div class="deck-controls" aria-hidden="true"><span class="cur" id="pageCur">1</span>&nbsp;/&nbsp;<span id="pageTotal">10</span></div>
<script>
/* ===========================================
SLIDE PRESENTATION CONTROLLER
Fixed 1920×1080 stage, scaled uniformly to the viewport.
Navigation: ← → Space PageUp/PageDown Home/End, wheel,
touch swipe. Current slide is mirrored into the URL hash.
=========================================== */
(function () {
'use strict';
var STAGE_W = 1920;
var STAGE_H = 1080;
var stage = document.getElementById('deckStage');
var slides = Array.prototype.slice.call(document.querySelectorAll('.slide'));
var pageCur = document.getElementById('pageCur');
var pageTotal = document.getElementById('pageTotal');
var current = 0;
var wheelLockUntil = 0;
pageTotal.textContent = String(slides.length);
/* --- Stage scaling: one transform, letterbox as needed --- */
function fitStage() {
var factor = Math.min(window.innerWidth / STAGE_W, window.innerHeight / STAGE_H);
var x = (window.innerWidth - STAGE_W * factor) / 2;
var y = (window.innerHeight - STAGE_H * factor) / 2;
stage.style.transform = 'translate(' + x + 'px, ' + y + 'px) scale(' + factor + ')';
}
/* --- Hash routing: #/3 means slide index 3 (0-based) --- */
function indexFromHash() {
var m = /^#\/(\d+)$/.exec(window.location.hash);
if (!m) return null;
var idx = parseInt(m[1], 10);
return isNaN(idx) ? null : idx;
}
function show(index, skipHash) {
current = Math.max(0, Math.min(index, slides.length - 1));
slides.forEach(function (slide, i) {
slide.classList.toggle('active', i === current);
slide.classList.toggle('visible', i === current);
});
pageCur.textContent = String(current + 1);
if (!skipHash) {
var target = '#/' + current;
if (window.location.hash !== target) {
window.history.replaceState(null, '', target);
}
}
}
function next() { show(current + 1); }
function prev() { show(current - 1); }
/* --- Keyboard --- */
document.addEventListener('keydown', function (e) {
if (e.target && e.target.getAttribute && e.target.getAttribute('contenteditable')) return;
switch (e.key) {
case 'ArrowRight':
case 'ArrowDown':
case ' ':
case 'PageDown':
e.preventDefault(); next(); break;
case 'ArrowLeft':
case 'ArrowUp':
case 'PageUp':
e.preventDefault(); prev(); break;
case 'Home':
e.preventDefault(); show(0); break;
case 'End':
e.preventDefault(); show(slides.length - 1); break;
}
});
/* --- Mouse wheel (debounced) --- */
document.addEventListener('wheel', function (e) {
var now = Date.now();
if (now < wheelLockUntil) return;
if (Math.abs(e.deltaY) < 12) return;
wheelLockUntil = now + 650;
if (e.deltaY > 0) { next(); } else { prev(); }
}, { passive: true });
/* --- Touch swipe --- */
var touchX = null;
document.addEventListener('touchstart', function (e) {
if (e.touches.length === 1) touchX = e.touches[0].clientX;
}, { passive: true });
document.addEventListener('touchend', function (e) {
if (touchX === null) return;
var dx = e.changedTouches[0].clientX - touchX;
touchX = null;
if (Math.abs(dx) < 40) return;
if (dx < 0) { next(); } else { prev(); }
}, { passive: true });
/* --- Hash navigation (back/forward, deep links) --- */
window.addEventListener('hashchange', function () {
var idx = indexFromHash();
if (idx !== null && idx !== current) show(idx, true);
});
window.addEventListener('resize', fitStage);
fitStage();
var initial = indexFromHash();
show(initial !== null ? initial : 0, initial === null);
})();
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink