{ "version": "2.13", "children": [ { "type": "frame", "id": "nj5No", "x": 0, "y": 0, "name": "Tiny Narrator — Article View", "clip": true, "width": 1440, "height": 1400, "fill": "$surface-paper", "layout": "vertical", "children": [ { "type": "frame", "id": "x5ISnf", "name": "Topbar", "width": "fill_container", "height": 64, "fill": "$surface-paper", "stroke": "$foreground-primary", "strokeWidth": { "bottom": 2 }, "padding": [ 0, 48 ], "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "frame", "id": "cnHb9", "name": "Brand", "gap": 10, "alignItems": "center", "children": [ { "type": "frame", "id": "nN2Sg", "name": "Brand Mark", "width": 34, "height": 34, "fill": "$accent", "layout": "vertical", "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "iRYK9", "name": "Brand Initials", "fill": "#ffffff", "content": "TN", "fontFamily": "Geist Mono", "fontSize": 11, "fontWeight": "700", "letterSpacing": 0.5 } ] }, { "type": "text", "id": "pCSoG", "name": "Brand Name", "fill": "$foreground-primary", "content": "Tiny Narrator", "fontFamily": "Inter", "fontSize": 15, "fontWeight": "700", "letterSpacing": -0.3 } ] }, { "type": "frame", "id": "F7ED0", "name": "Nav", "gap": 28, "alignItems": "center", "children": [ { "type": "text", "id": "GYdMX", "name": "WHY", "fill": "$foreground-muted", "content": "WHY", "fontFamily": "Geist Mono", "fontSize": 11, "fontWeight": "600", "letterSpacing": 1.5 }, { "type": "text", "id": "Y9G2g", "name": "MODELS", "fill": "$foreground-muted", "content": "MODELS", "fontFamily": "Geist Mono", "fontSize": 11, "fontWeight": "600", "letterSpacing": 1.5 }, { "type": "text", "id": "jaBe6", "name": "FIELD NOTES", "fill": "$foreground-muted", "content": "FIELD NOTES", "fontFamily": "Geist Mono", "fontSize": 11, "fontWeight": "600", "letterSpacing": 1.5 } ] }, { "type": "frame", "id": "x8OzPR", "name": "Reader Toggle", "height": 38, "fill": "$surface-inverse", "stroke": "$foreground-primary", "strokeWidth": 2, "gap": 8, "padding": [ 0, 16 ], "alignItems": "center", "children": [ { "type": "ellipse", "id": "K5EwF", "name": "Toggle Dot", "fill": "#5eea8d", "width": 9, "height": 9 }, { "type": "text", "id": "wCAIT", "name": "Toggle Label", "fill": "#ffffff", "content": "SCREEN READER ON", "fontFamily": "Geist Mono", "fontSize": 11, "fontWeight": "700", "letterSpacing": 0.5 } ] } ] }, { "type": "frame", "id": "wrDnf", "name": "Main Content", "width": "fill_container", "height": "fill_container", "gap": 64, "padding": [ 56, 48, 140, 48 ], "children": [ { "type": "frame", "id": "m3lA7", "name": "Article Column", "width": 720, "layout": "vertical", "children": [ { "type": "frame", "id": "z7fvjI", "name": "Kicker", "fill": "$accent", "padding": [ 4, 12 ], "children": [ { "type": "text", "id": "K6y8Gp", "name": "Kicker Text", "fill": "#ffffff", "content": "BUILD SMALL HACKATHON CONCEPT", "fontFamily": "Geist Mono", "fontSize": 10, "fontWeight": "700", "letterSpacing": 1.2 } ] }, { "type": "rectangle", "id": "qS8vJ", "name": "spacer", "fill": "#00000000", "width": 1, "height": 20 }, { "type": "text", "id": "Cqqzy", "name": "Hero Title", "fill": "$foreground-primary", "textGrowth": "fixed-width", "width": 620, "content": "A tiny model reader that turns articles into guided narration", "lineHeight": 1.08, "fontFamily": "Playfair Display", "fontSize": 58, "letterSpacing": -1.5 }, { "type": "rectangle", "id": "Wk0Z5", "name": "spacer", "fill": "#00000000", "width": 1, "height": 28 }, { "type": "text", "id": "Z2RWsc", "name": "Dek", "fill": "$foreground-secondary", "textGrowth": "fixed-width", "width": 580, "content": "Tiny Narrator is an accessibility-first article experience. It can describe generated images, build a reading path, and speak each part of the page with a lightweight local voice.", "lineHeight": 1.55, "fontFamily": "Inter", "fontSize": 18 }, { "type": "rectangle", "id": "EyOtG", "name": "spacer", "fill": "#00000000", "width": 1, "height": 36 }, { "type": "frame", "id": "zYPlA", "name": "Hero Figure", "width": 680, "fill": "$surface-primary", "stroke": "$border-subtle", "strokeWidth": 1, "layout": "vertical", "children": [ { "type": "rectangle", "id": "gJ61G", "name": "Hero Image Placeholder", "fill": { "type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 180, "size": { "height": 1 }, "colors": [ { "color": "#e8e1d5", "position": 0 }, { "color": "#d4cbbf", "position": 1 } ] }, "width": 680, "height": 260 }, { "type": "text", "id": "mVXCM", "layoutPosition": "absolute", "x": 16, "y": 274, "name": "Hero Caption", "fill": "$foreground-muted", "textGrowth": "fixed-width", "width": 648, "content": "The article view doubles as the demo surface, so every feature has a real reading task.", "lineHeight": 1.5, "fontFamily": "Geist Mono", "fontSize": 11 } ] }, { "type": "rectangle", "id": "y5qfb", "name": "spacer", "fill": "#00000000", "width": 1, "height": 56 }, { "type": "frame", "id": "EKYP1", "name": "Section: Why", "width": 680, "layout": "vertical", "children": [ { "type": "frame", "id": "D6r1OX", "name": "H2 Wrapper", "gap": 16, "alignItems": "center", "children": [ { "type": "rectangle", "id": "HUf2E", "name": "Accent Bar", "fill": "$accent", "width": 4, "height": 32 }, { "type": "text", "id": "W9hRR", "name": "Section Heading", "fill": "$foreground-primary", "content": "Why it belongs in a tiny-model hackathon", "fontFamily": "Playfair Display", "fontSize": 32, "letterSpacing": -0.5 } ] }, { "type": "rectangle", "id": "gdTPJ", "name": "spacer", "fill": "#00000000", "width": 1, "height": 16 }, { "type": "text", "id": "BYHD4", "name": "Paragraph", "fill": "$foreground-secondary", "textGrowth": "fixed-width", "width": 620, "content": "Accessibility tools should feel immediate, private, and personal. Small models help because they can run closer to the reader, keep latency low, and make the experience easier to inspect.", "lineHeight": 1.6, "fontFamily": "Inter", "fontSize": 15 }, { "type": "rectangle", "id": "y0RdMN", "name": "spacer", "fill": "#00000000", "width": 1, "height": 24 }, { "type": "frame", "id": "aGzRm", "name": "Blockquote", "width": 620, "fill": "#ebe4d8", "padding": [ 20, 24 ], "children": [ { "type": "rectangle", "id": "HZVf6", "name": "Quote Bar", "fill": "$accent", "width": 4, "height": 0 }, { "type": "text", "id": "aoi7f", "name": "Quote Text", "fill": "$foreground-secondary", "textGrowth": "fixed-width", "width": 540, "content": "The goal is not to read the whole page at the user. The goal is to make the page navigable by sound.", "lineHeight": 1.5, "fontFamily": "Playfair Display", "fontSize": 20, "fontStyle": "italic" } ] } ] }, { "type": "rectangle", "id": "pQ4za", "name": "spacer", "fill": "#00000000", "width": 1, "height": 48 }, { "type": "frame", "id": "oDqHo", "name": "Section: Models", "width": 680, "layout": "vertical", "children": [ { "type": "frame", "id": "a6U3a", "name": "H2 Wrapper", "gap": 16, "alignItems": "center", "children": [ { "type": "rectangle", "id": "k6R9Z", "name": "Accent Bar", "fill": "$accent", "width": 4, "height": 32 }, { "type": "text", "id": "D4IJk", "name": "Section Heading", "fill": "$foreground-primary", "content": "The model map", "fontFamily": "Playfair Display", "fontSize": 32, "letterSpacing": -0.5 } ] }, { "type": "rectangle", "id": "HSrNW", "name": "spacer", "fill": "#00000000", "width": 1, "height": 16 }, { "type": "text", "id": "X4BUK", "name": "Paragraph", "fill": "$foreground-secondary", "textGrowth": "fixed-width", "width": 620, "content": "The reader brain runs through llama.cpp, the vision model writes practical alt text, Kokoro speaks the final narration, and a four-billion-parameter image model creates article illustrations.", "lineHeight": 1.6, "fontFamily": "Inter", "fontSize": 15 }, { "type": "rectangle", "id": "HID7r", "name": "spacer", "fill": "#00000000", "width": 1, "height": 20 }, { "type": "frame", "id": "o6C2Ij", "name": "Inline Figure", "width": 580, "fill": "$surface-primary", "stroke": "$border-subtle", "strokeWidth": 1, "layout": "vertical", "children": [ { "type": "rectangle", "id": "wIWqc", "name": "Figure Image", "fill": { "type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 180, "size": { "height": 1 }, "colors": [ { "color": "#e8e1d5", "position": 0 }, { "color": "#d4cbbf", "position": 1 } ] }, "width": 580, "height": 180 }, { "type": "text", "id": "fDQpk", "layoutPosition": "absolute", "x": 16, "y": 192, "name": "Figure Caption", "fill": "$foreground-muted", "textGrowth": "fixed-width", "width": 548, "content": "Each model stays at or below four billion parameters for Tiny Titan eligibility.", "lineHeight": 1.5, "fontFamily": "Geist Mono", "fontSize": 11 } ] } ] }, { "type": "rectangle", "id": "aDsIE", "name": "spacer", "fill": "#00000000", "width": 1, "height": 48 }, { "type": "frame", "id": "h65VG8", "name": "Section: Field Notes", "width": 680, "layout": "vertical", "children": [ { "type": "frame", "id": "Y6JSwP", "name": "H2 Wrapper", "gap": 16, "alignItems": "center", "children": [ { "type": "rectangle", "id": "iAvnv", "name": "Accent Bar", "fill": "$accent", "width": 4, "height": 32 }, { "type": "text", "id": "L8vOai", "name": "Section Heading", "fill": "$foreground-primary", "content": "Field notes as a feature", "fontFamily": "Playfair Display", "fontSize": 32, "letterSpacing": -0.5 } ] }, { "type": "rectangle", "id": "gLaoG", "name": "spacer", "fill": "#00000000", "width": 1, "height": 16 }, { "type": "text", "id": "dwqHD", "name": "Paragraph", "fill": "$foreground-secondary", "textGrowth": "fixed-width", "width": 620, "content": "The build report will show parameter counts, latency notes, keyboard decisions, and where the app uses deterministic fallbacks so the accessibility layer remains dependable during a live demo.", "lineHeight": 1.6, "fontFamily": "Inter", "fontSize": 15 } ] } ] }, { "type": "frame", "id": "gA4Fd", "name": "Status Panel", "width": 340, "fill": "$surface-primary", "stroke": "$border-subtle", "strokeWidth": { "top": 3, "right": 1, "bottom": 1, "left": 1 }, "strokeAlignment": "inner", "layout": "vertical", "padding": [ 24, 20 ], "children": [ { "type": "text", "id": "t2G7E5", "name": "Session Title", "fill": "$foreground-muted", "content": "SESSION", "fontFamily": "Geist Mono", "fontSize": 10, "fontWeight": "700", "letterSpacing": 1.5 }, { "type": "rectangle", "id": "M0Vdqv", "name": "spacer", "fill": "#00000000", "width": 1, "height": 16 }, { "type": "frame", "id": "SuVAc", "name": "Status Grid", "width": "fill_container", "layout": "vertical", "gap": 12, "children": [ { "type": "frame", "id": "C7bLqQ", "name": "MODE Row", "layout": "vertical", "gap": 2, "children": [ { "type": "text", "id": "uiyPH", "name": "MODE Label", "fill": "$foreground-muted", "content": "MODE", "fontFamily": "Geist Mono", "fontSize": 9, "fontWeight": "600", "letterSpacing": 1 }, { "type": "text", "id": "hB1hA", "name": "MODE Value", "fill": "$foreground-primary", "content": "Reader on", "fontFamily": "Geist Mono", "fontSize": 12, "fontWeight": "600" } ] }, { "type": "frame", "id": "D8RTyV", "name": "CURRENT Row", "layout": "vertical", "gap": 2, "children": [ { "type": "text", "id": "aInOm", "name": "CURRENT Label", "fill": "$foreground-muted", "content": "CURRENT", "fontFamily": "Geist Mono", "fontSize": 9, "fontWeight": "600", "letterSpacing": 1 }, { "type": "text", "id": "K39HN9", "name": "CURRENT Value", "fill": "$foreground-primary", "content": "Heading, item 4 of 10", "fontFamily": "Geist Mono", "fontSize": 12, "fontWeight": "600" } ] }, { "type": "frame", "id": "HFi2c", "name": "RUNTIME Row", "layout": "vertical", "gap": 2, "children": [ { "type": "text", "id": "n8Qj4Y", "name": "RUNTIME Label", "fill": "$foreground-muted", "content": "RUNTIME", "fontFamily": "Geist Mono", "fontSize": 9, "fontWeight": "600", "letterSpacing": 1 }, { "type": "text", "id": "b7jk0c", "name": "RUNTIME Value", "fill": "$foreground-primary", "content": "llama.cpp", "fontFamily": "Geist Mono", "fontSize": 12, "fontWeight": "600" } ] }, { "type": "frame", "id": "Z5n7k", "name": "MODEL STACK Row", "layout": "vertical", "gap": 2, "children": [ { "type": "text", "id": "RNaWI", "name": "MODEL STACK Label", "fill": "$foreground-muted", "content": "MODEL STACK", "fontFamily": "Geist Mono", "fontSize": 9, "fontWeight": "600", "letterSpacing": 1 }, { "type": "text", "id": "BU7HF", "name": "MODEL STACK Value", "fill": "$foreground-primary", "content": "4 tiny models", "fontFamily": "Geist Mono", "fontSize": 12, "fontWeight": "600" } ] }, { "type": "frame", "id": "NJWFf", "name": "READINESS Row", "layout": "vertical", "gap": 2, "children": [ { "type": "text", "id": "i5tRM", "name": "READINESS Label", "fill": "$foreground-muted", "content": "READINESS", "fontFamily": "Geist Mono", "fontSize": 9, "fontWeight": "600", "letterSpacing": 1 }, { "type": "text", "id": "fJrrb", "name": "READINESS Value", "fill": "$foreground-primary", "content": "llama.cpp online, Kokoro online", "fontFamily": "Geist Mono", "fontSize": 12, "fontWeight": "600" } ] }, { "type": "frame", "id": "TaXLM", "name": "IMAGE ALT Row", "layout": "vertical", "gap": 2, "children": [ { "type": "text", "id": "YBeyv", "name": "IMAGE ALT Label", "fill": "$foreground-muted", "content": "IMAGE ALT", "fontFamily": "Geist Mono", "fontSize": 9, "fontWeight": "600", "letterSpacing": 1 }, { "type": "text", "id": "r87CaT", "name": "IMAGE ALT Value", "fill": "$foreground-primary", "content": "3 ready", "fontFamily": "Geist Mono", "fontSize": 12, "fontWeight": "600" } ] }, { "type": "frame", "id": "o7smh2", "name": "VOICE Row", "layout": "vertical", "gap": 2, "children": [ { "type": "text", "id": "i9klk", "name": "VOICE Label", "fill": "$foreground-muted", "content": "VOICE", "fontFamily": "Geist Mono", "fontSize": 9, "fontWeight": "600", "letterSpacing": 1 }, { "type": "text", "id": "cueu7", "name": "VOICE Value", "fill": "$foreground-primary", "content": "Heart", "fontFamily": "Geist Mono", "fontSize": 12, "fontWeight": "600" } ] }, { "type": "frame", "id": "iMXeN", "name": "LATENCY Row", "layout": "vertical", "gap": 2, "children": [ { "type": "text", "id": "gu3w3", "name": "LATENCY Label", "fill": "$foreground-muted", "content": "LATENCY", "fontFamily": "Geist Mono", "fontSize": 9, "fontWeight": "600", "letterSpacing": 1 }, { "type": "text", "id": "D9nZ7", "name": "LATENCY Value", "fill": "$foreground-primary", "content": "1.24 s", "fontFamily": "Geist Mono", "fontSize": 12, "fontWeight": "600" } ] } ] }, { "type": "rectangle", "id": "yD0O5", "name": "spacer", "fill": "#00000000", "width": 1, "height": 20 }, { "type": "frame", "id": "WL5ax", "name": "Live Narration", "width": "fill_container", "fill": "$surface-paper", "stroke": "$border-subtle", "strokeWidth": 1, "layout": "vertical", "padding": [ 12, 14 ], "children": [ { "type": "text", "id": "EBKwN", "name": "Narration Text", "fill": "$foreground-primary", "textGrowth": "fixed-width", "width": 268, "content": "Heading. The model map.", "lineHeight": 1.5, "fontFamily": "Geist Mono", "fontSize": 12 } ] }, { "type": "rectangle", "id": "FF2hS", "name": "spacer", "fill": "#00000000", "width": 1, "height": 20 }, { "type": "frame", "id": "jzLx9", "name": "Transcript Header", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "s3j9gU", "name": "Transcript Title", "fill": "$foreground-secondary", "content": "TRANSCRIPT", "fontFamily": "Geist Mono", "fontSize": 10, "fontWeight": "700", "letterSpacing": 1 }, { "type": "frame", "id": "xFejb", "name": "Transcript Buttons", "gap": 6, "children": [ { "type": "frame", "id": "VZ45t", "name": "Copy Button", "stroke": "$border-subtle", "strokeWidth": 1, "padding": [ 4, 8 ], "children": [ { "type": "text", "id": "L7khyA", "name": "Copy", "fill": "$foreground-muted", "content": "COPY", "fontFamily": "Geist Mono", "fontSize": 9, "fontWeight": "600", "letterSpacing": 0.5 } ] }, { "type": "frame", "id": "tSlxc", "name": "Clear Button", "stroke": "$border-subtle", "strokeWidth": 1, "padding": [ 4, 8 ], "children": [ { "type": "text", "id": "voTun", "name": "Clear", "fill": "$foreground-muted", "content": "CLEAR", "fontFamily": "Geist Mono", "fontSize": 9, "fontWeight": "600", "letterSpacing": 0.5 } ] } ] } ] }, { "type": "rectangle", "id": "E7ew0e", "name": "divider", "fill": "$border-subtle", "width": "fill_container", "height": 1 }, { "type": "rectangle", "id": "n2kuJ", "name": "spacer", "fill": "#00000000", "width": 1, "height": 8 }, { "type": "frame", "id": "zxSsq", "name": "Transcript Entry", "width": "fill_container", "fill": "$surface-paper", "stroke": "$border-subtle", "strokeWidth": 1, "layout": "vertical", "gap": 4, "padding": [ 8, 10 ], "children": [ { "type": "frame", "id": "mBF3f", "name": "Meta", "width": "fill_container", "justifyContent": "space_between", "children": [ { "type": "text", "id": "d3vO6d", "name": "Type", "fill": "$foreground-muted", "content": "HEADING (1.24 s)", "fontFamily": "Geist Mono", "fontSize": 9, "fontWeight": "600", "letterSpacing": 0.5 }, { "type": "text", "id": "SchqF", "name": "Runtime", "fill": "$foreground-muted", "content": "llama.cpp/kokoro", "fontFamily": "Geist Mono", "fontSize": 9, "fontWeight": "600", "letterSpacing": 0.5 } ] }, { "type": "text", "id": "H4SxKb", "name": "Text", "fill": "$foreground-secondary", "textGrowth": "fixed-width", "width": 268, "content": "Heading. The model map.", "lineHeight": 1.45, "fontFamily": "Inter", "fontSize": 12 } ] }, { "type": "frame", "id": "b0qnlr", "name": "Transcript Entry", "width": "fill_container", "fill": "$surface-paper", "stroke": "$border-subtle", "strokeWidth": 1, "layout": "vertical", "gap": 4, "padding": [ 8, 10 ], "children": [ { "type": "frame", "id": "u1B8Oe", "name": "Meta", "width": "fill_container", "justifyContent": "space_between", "children": [ { "type": "text", "id": "OA5sM", "name": "Type", "fill": "$foreground-muted", "content": "PARAGRAPH (0.98 s)", "fontFamily": "Geist Mono", "fontSize": 9, "fontWeight": "600", "letterSpacing": 0.5 }, { "type": "text", "id": "b1Ct2", "name": "Runtime", "fill": "$foreground-muted", "content": "llama.cpp/kokoro", "fontFamily": "Geist Mono", "fontSize": 9, "fontWeight": "600", "letterSpacing": 0.5 } ] }, { "type": "text", "id": "n8HB2E", "name": "Text", "fill": "$foreground-secondary", "textGrowth": "fixed-width", "width": 268, "content": "The reader brain runs through llama.cpp...", "lineHeight": 1.45, "fontFamily": "Inter", "fontSize": 12 } ] }, { "type": "frame", "id": "h7cd8", "name": "Transcript Entry", "width": "fill_container", "fill": "$surface-paper", "stroke": "$border-subtle", "strokeWidth": 1, "layout": "vertical", "gap": 4, "padding": [ 8, 10 ], "children": [ { "type": "frame", "id": "gIs5v", "name": "Meta", "width": "fill_container", "justifyContent": "space_between", "children": [ { "type": "text", "id": "UICZf", "name": "Type", "fill": "$foreground-muted", "content": "IMAGE (1.45 s)", "fontFamily": "Geist Mono", "fontSize": 9, "fontWeight": "600", "letterSpacing": 0.5 }, { "type": "text", "id": "vG94w", "name": "Runtime", "fill": "$foreground-muted", "content": "llama.cpp/kokoro", "fontFamily": "Geist Mono", "fontSize": 9, "fontWeight": "600", "letterSpacing": 0.5 } ] }, { "type": "text", "id": "fxmTq", "name": "Text", "fill": "$foreground-secondary", "textGrowth": "fixed-width", "width": 268, "content": "A compact diagram showing four small AI models.", "lineHeight": 1.45, "fontFamily": "Inter", "fontSize": 12 } ] }, { "type": "rectangle", "id": "JErog", "name": "spacer", "fill": "#00000000", "width": 1, "height": 16 }, { "type": "frame", "id": "NwL50", "name": "Model Budget Header", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "p38jYF", "name": "Budget Title", "fill": "$foreground-secondary", "content": "MODEL BUDGET", "fontFamily": "Geist Mono", "fontSize": 10, "fontWeight": "700", "letterSpacing": 1 }, { "type": "text", "id": "FKr5P", "name": "Budget Status", "fill": "$teal", "content": "ALL <= 4B", "fontFamily": "Geist Mono", "fontSize": 9, "fontWeight": "700", "letterSpacing": 0.5 } ] }, { "type": "rectangle", "id": "ASDHT", "name": "divider", "fill": "$border-subtle", "width": "fill_container", "height": 1 }, { "type": "rectangle", "id": "qIezk", "name": "spacer", "fill": "#00000000", "width": 1, "height": 8 }, { "type": "frame", "id": "glaaL", "name": "Reader Brain Budget", "width": "fill_container", "fill": "$surface-paper", "stroke": "$border-subtle", "strokeWidth": 1, "layout": "vertical", "gap": 4, "padding": [ 8, 10 ], "children": [ { "type": "frame", "id": "iqCn5", "name": "Row", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "oA8Ne", "name": "Role", "fill": "$foreground-primary", "content": "Reader Brain", "fontFamily": "Geist Mono", "fontSize": 11, "fontWeight": "700", "letterSpacing": 0.3 }, { "type": "frame", "id": "BqqwG", "name": "Pill", "stroke": "$accent", "strokeWidth": 1, "padding": [ 2, 8 ], "children": [ { "type": "text", "id": "cel1G", "name": "Pill Text", "fill": "$accent", "content": "3.97B", "fontFamily": "Geist Mono", "fontSize": 9, "fontWeight": "700", "letterSpacing": 0.3 } ] } ] }, { "type": "text", "id": "RHlm6", "name": "Model ID", "fill": "$foreground-muted", "textGrowth": "fixed-width", "width": 268, "content": "nvidia/Nemotron-3-Nano-4B", "fontFamily": "Geist Mono", "fontSize": 10 } ] }, { "type": "frame", "id": "AbMrd", "name": "Vision Budget", "width": "fill_container", "fill": "$surface-paper", "stroke": "$border-subtle", "strokeWidth": 1, "layout": "vertical", "gap": 4, "padding": [ 8, 10 ], "children": [ { "type": "frame", "id": "MQEry", "name": "Row", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "tkCfG", "name": "Role", "fill": "$foreground-primary", "content": "Vision", "fontFamily": "Geist Mono", "fontSize": 11, "fontWeight": "700", "letterSpacing": 0.3 }, { "type": "frame", "id": "aeLjE", "name": "Pill", "stroke": "$accent", "strokeWidth": 1, "padding": [ 2, 8 ], "children": [ { "type": "text", "id": "WAKZn", "name": "Pill Text", "fill": "$accent", "content": "3B", "fontFamily": "Geist Mono", "fontSize": 9, "fontWeight": "700", "letterSpacing": 0.3 } ] } ] }, { "type": "text", "id": "figfD", "name": "Model ID", "fill": "$foreground-muted", "textGrowth": "fixed-width", "width": 268, "content": "openbmb/MiniCPM-V-2", "fontFamily": "Geist Mono", "fontSize": 10 } ] }, { "type": "frame", "id": "p9Fspg", "name": "Speech Budget", "width": "fill_container", "fill": "$surface-paper", "stroke": "$border-subtle", "strokeWidth": 1, "layout": "vertical", "gap": 4, "padding": [ 8, 10 ], "children": [ { "type": "frame", "id": "n2pNf", "name": "Row", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "s7aUe", "name": "Role", "fill": "$foreground-primary", "content": "Speech", "fontFamily": "Geist Mono", "fontSize": 11, "fontWeight": "700", "letterSpacing": 0.3 }, { "type": "frame", "id": "ZvwEV", "name": "Pill", "stroke": "$accent", "strokeWidth": 1, "padding": [ 2, 8 ], "children": [ { "type": "text", "id": "dawRx", "name": "Pill Text", "fill": "$accent", "content": "82M", "fontFamily": "Geist Mono", "fontSize": 9, "fontWeight": "700", "letterSpacing": 0.3 } ] } ] }, { "type": "text", "id": "B8G4l", "name": "Model ID", "fill": "$foreground-muted", "textGrowth": "fixed-width", "width": 268, "content": "hexgrad/Kokoro-82M", "fontFamily": "Geist Mono", "fontSize": 10 } ] }, { "type": "frame", "id": "AEmUw", "name": "Image Gen Budget", "width": "fill_container", "fill": "$surface-paper", "stroke": "$border-subtle", "strokeWidth": 1, "layout": "vertical", "gap": 4, "padding": [ 8, 10 ], "children": [ { "type": "frame", "id": "AE7q2", "name": "Row", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ { "type": "text", "id": "pizG3", "name": "Role", "fill": "$foreground-primary", "content": "Image Gen", "fontFamily": "Geist Mono", "fontSize": 11, "fontWeight": "700", "letterSpacing": 0.3 }, { "type": "frame", "id": "r88qVQ", "name": "Pill", "stroke": "$accent", "strokeWidth": 1, "padding": [ 2, 8 ], "children": [ { "type": "text", "id": "C7QZXt", "name": "Pill Text", "fill": "$accent", "content": "4B", "fontFamily": "Geist Mono", "fontSize": 9, "fontWeight": "700", "letterSpacing": 0.3 } ] } ] }, { "type": "text", "id": "SEsFA", "name": "Model ID", "fill": "$foreground-muted", "textGrowth": "fixed-width", "width": 268, "content": "FLUX.2-klein-4B", "fontFamily": "Geist Mono", "fontSize": 10 } ] } ] } ] }, { "type": "frame", "id": "xET5f", "layoutPosition": "absolute", "x": 200, "y": 1320, "name": "Reader Bar", "fill": "$surface-primary", "stroke": "$foreground-primary", "strokeWidth": 2, "effect": { "type": "shadow", "shadowType": "outer", "color": "$foreground-primary", "offset": { "x": 4, "y": 4 } }, "gap": 8, "padding": [ 10, 16 ], "alignItems": "center", "children": [ { "type": "frame", "id": "BuyMu", "name": "PREV Button", "height": 38, "stroke": "$border-subtle", "strokeWidth": 1, "padding": [ 0, 14 ], "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "YG99g", "name": "PREV Label", "fill": "$foreground-primary", "content": "PREV", "fontFamily": "Geist Mono", "fontSize": 10, "fontWeight": "700", "letterSpacing": 0.8 } ] }, { "type": "frame", "id": "tlPxf", "name": "PLAY Button", "height": 38, "stroke": "$border-subtle", "strokeWidth": 1, "padding": [ 0, 14 ], "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "rcDyY", "name": "PLAY Label", "fill": "$foreground-primary", "content": "PLAY", "fontFamily": "Geist Mono", "fontSize": 10, "fontWeight": "700", "letterSpacing": 0.8 } ] }, { "type": "frame", "id": "bTMZi", "name": "NEXT Button", "height": 38, "stroke": "$border-subtle", "strokeWidth": 1, "padding": [ 0, 14 ], "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "v9bHhP", "name": "NEXT Label", "fill": "$foreground-primary", "content": "NEXT", "fontFamily": "Geist Mono", "fontSize": 10, "fontWeight": "700", "letterSpacing": 0.8 } ] }, { "type": "frame", "id": "nQFze", "name": "HEADING Button", "height": 38, "stroke": "$border-subtle", "strokeWidth": 1, "padding": [ 0, 14 ], "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "sb3Qz", "name": "HEADING Label", "fill": "$foreground-primary", "content": "HEADING", "fontFamily": "Geist Mono", "fontSize": 10, "fontWeight": "700", "letterSpacing": 0.8 } ] }, { "type": "frame", "id": "uF0vy", "name": "IMAGE Button", "height": 38, "stroke": "$border-subtle", "strokeWidth": 1, "padding": [ 0, 14 ], "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "hNDGh", "name": "IMAGE Label", "fill": "$foreground-primary", "content": "IMAGE", "fontFamily": "Geist Mono", "fontSize": 10, "fontWeight": "700", "letterSpacing": 0.8 } ] }, { "type": "frame", "id": "j803P", "name": "SUMMARY Button", "height": 38, "stroke": "$border-subtle", "strokeWidth": 1, "padding": [ 0, 14 ], "justifyContent": "center", "alignItems": "center", "children": [ { "type": "text", "id": "PMs6g", "name": "SUMMARY Label", "fill": "$foreground-primary", "content": "SUMMARY", "fontFamily": "Geist Mono", "fontSize": 10, "fontWeight": "700", "letterSpacing": 0.8 } ] }, { "type": "rectangle", "id": "LSfyR", "name": "Separator", "fill": "$border-subtle", "width": 1, "height": 28 }, { "type": "frame", "id": "r0l6K", "name": "Voice Control", "gap": 6, "padding": [ 0, 8 ], "alignItems": "center", "children": [ { "type": "text", "id": "I1Za0Q", "name": "Voice Label", "fill": "$foreground-muted", "content": "VOICE", "fontFamily": "Geist Mono", "fontSize": 9, "fontWeight": "600", "letterSpacing": 0.8 }, { "type": "frame", "id": "EWlIY", "name": "Voice Select", "height": 32, "fill": "$surface-primary", "stroke": "$border-subtle", "strokeWidth": 1, "padding": [ 4, 10 ], "alignItems": "center", "children": [ { "type": "text", "id": "dgydk", "name": "Voice Select Text", "fill": "$foreground-primary", "content": "Heart", "fontFamily": "Geist Mono", "fontSize": 10, "fontWeight": "600" } ] } ] }, { "type": "frame", "id": "G7MsuO", "name": "Speed Control", "gap": 6, "padding": [ 0, 8 ], "alignItems": "center", "children": [ { "type": "text", "id": "cycnw", "name": "Speed Label", "fill": "$foreground-muted", "content": "SPEED", "fontFamily": "Geist Mono", "fontSize": 9, "fontWeight": "600", "letterSpacing": 0.8 }, { "type": "rectangle", "id": "u6z5k", "name": "Speed Slider", "fill": "$border-subtle", "width": 64, "height": 4 }, { "type": "ellipse", "id": "hhHPQ", "name": "Speed Thumb", "fill": "$foreground-primary", "width": 12, "height": 12 }, { "type": "text", "id": "yqGdM", "name": "Speed Value", "fill": "$foreground-primary", "content": "1.00x", "fontFamily": "Geist Mono", "fontSize": 10, "fontWeight": "700" } ] }, { "type": "frame", "id": "uyvFF", "name": "Auto Control", "gap": 6, "padding": [ 0, 8 ], "alignItems": "center", "children": [ { "type": "text", "id": "Tlcss", "name": "Auto Label", "fill": "$foreground-muted", "content": "AUTO", "fontFamily": "Geist Mono", "fontSize": 9, "fontWeight": "600", "letterSpacing": 0.8 }, { "type": "frame", "id": "ejZcS", "name": "Checkbox", "width": 14, "height": 14, "stroke": "$border-subtle", "strokeWidth": 1.5, "justifyContent": "center", "alignItems": "center" } ] } ] } ] } ], "variables": { "accent": { "type": "color", "value": "#c4421a" }, "border-subtle": { "type": "color", "value": "#d4cbbf" }, "font-body": { "type": "string", "value": "Inter" }, "font-caption": { "type": "string", "value": "Geist Mono" }, "font-heading": { "type": "string", "value": "Playfair Display" }, "foreground-muted": { "type": "color", "value": "#8a8178" }, "foreground-primary": { "type": "color", "value": "#1a1a1a" }, "foreground-secondary": { "type": "color", "value": "#3a3632" }, "surface-inverse": { "type": "color", "value": "#1a1a1a" }, "surface-paper": { "type": "color", "value": "#f5f0e8" }, "surface-primary": { "type": "color", "value": "#faf7f2" }, "teal": { "type": "color", "value": "#2a7a6e" } } }