File size: 9,172 Bytes
e34aa23
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<svg viewBox="0 0 1600 760" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="The stack — inference · rendering · weights · UI">
  <rect width="1600" height="760" fill="#fafafa"/>
  <text x="800" y="56" font-size="14" font-family="'SF Mono', Menlo, monospace" fill="#6e7781" text-anchor="middle" letter-spacing="4">THE STACK · FOUR PIECES · NO DEPENDENCY SOUP</text>
  <line x1="40" y1="82" x2="1560" y2="82" stroke="#1f2328" stroke-width="0.5" opacity="0.35"/>
  
      <rect x="60" y="130" width="720" height="270" rx="6" fill="rgba(31,35,40,0.025)" stroke="#1f2328" stroke-width="0.5" opacity="0.95"/>

      <!-- glyph in top-right of card -->
      <g><circle cx="690" cy="166" r="1.6" fill="#1f2328" opacity="0.18"/><circle cx="690" cy="178" r="1.6" fill="#1f2328" opacity="0.43"/><circle cx="690" cy="190" r="1.6" fill="#1f2328" opacity="0.68"/><circle cx="690" cy="202" r="1.6" fill="#1f2328" opacity="0.18"/><circle cx="690" cy="214" r="1.6" fill="#1f2328" opacity="0.43"/><circle cx="702" cy="166" r="1.6" fill="#1f2328" opacity="0.43"/><circle cx="702" cy="178" r="1.6" fill="#1f2328" opacity="0.68"/><circle cx="702" cy="190" r="1.6" fill="#1f2328" opacity="0.18"/><circle cx="702" cy="202" r="1.6" fill="#1f2328" opacity="0.43"/><circle cx="702" cy="214" r="1.6" fill="#1f2328" opacity="0.68"/><circle cx="714" cy="166" r="1.6" fill="#1f2328" opacity="0.68"/><circle cx="714" cy="178" r="1.6" fill="#1f2328" opacity="0.18"/><circle cx="714" cy="190" r="1.6" fill="#1f2328" opacity="0.43"/><circle cx="714" cy="202" r="1.6" fill="#1f2328" opacity="0.68"/><circle cx="714" cy="214" r="1.6" fill="#1f2328" opacity="0.18"/><circle cx="726" cy="166" r="1.6" fill="#1f2328" opacity="0.18"/><circle cx="726" cy="178" r="1.6" fill="#1f2328" opacity="0.43"/><circle cx="726" cy="190" r="1.6" fill="#1f2328" opacity="0.68"/><circle cx="726" cy="202" r="1.6" fill="#1f2328" opacity="0.18"/><circle cx="726" cy="214" r="1.6" fill="#1f2328" opacity="0.43"/><circle cx="738" cy="166" r="1.6" fill="#1f2328" opacity="0.43"/><circle cx="738" cy="178" r="1.6" fill="#1f2328" opacity="0.68"/><circle cx="738" cy="190" r="1.6" fill="#1f2328" opacity="0.18"/><circle cx="738" cy="202" r="1.6" fill="#1f2328" opacity="0.43"/><circle cx="738" cy="214" r="1.6" fill="#1f2328" opacity="0.68"/><circle cx="750" cy="166" r="1.6" fill="#1f2328" opacity="0.68"/><circle cx="750" cy="178" r="1.6" fill="#1f2328" opacity="0.18"/><circle cx="750" cy="190" r="1.6" fill="#1f2328" opacity="0.43"/><circle cx="750" cy="202" r="1.6" fill="#1f2328" opacity="0.68"/><circle cx="750" cy="214" r="1.6" fill="#1f2328" opacity="0.18"/></g>

      <text x="92" y="174" font-size="11" font-family="'SF Mono', Menlo, monospace" fill="#6e7781" letter-spacing="3">INFERENCE</text>
      <text x="92" y="218" font-size="32" font-family="Georgia, serif" fill="#1f2328" font-weight="300">WebGPU compute</text>

      <line x1="92" y1="238" x2="180" y2="238" stroke="#1f2328" stroke-width="0.6" opacity="0.6"/>

      
        <text x="92" y="274" font-size="14" font-family="'SF Mono', Menlo, monospace" fill="#1f2328" opacity="0.92">11 WGSL kernels</text>
      
        <text x="92" y="302" font-size="14" font-family="'SF Mono', Menlo, monospace" fill="#1f2328" opacity="0.92">22 GPU buffers</text>
      
        <text x="92" y="330" font-size="14" font-family="'SF Mono', Menlo, monospace" fill="#1f2328" opacity="0.92">292 dispatches / token</text>
      
        <text x="92" y="358" font-size="14" font-family="'SF Mono', Menlo, monospace" fill="#1f2328" opacity="0.92">q4f16_1 quantization</text>
      
        <text x="92" y="386" font-size="14" font-family="'SF Mono', Menlo, monospace" fill="#1f2328" opacity="0.92">no framework on the hot path</text>
      
    
      <rect x="820" y="130" width="720" height="270" rx="6" fill="rgba(31,35,40,0.025)" stroke="#1f2328" stroke-width="0.5" opacity="0.95"/>

      <!-- glyph in top-right of card -->
      <g>
      <circle cx="1468" cy="190" r="22" fill="none" stroke="#1f2328" stroke-width="1" opacity="0.55"/>
      <circle cx="1492" cy="190" r="22" fill="none" stroke="#1f2328" stroke-width="1" opacity="0.55"/>
      <circle cx="1480" cy="178" r="14" fill="#1f2328" opacity="0.18"/>
    </g>

      <text x="852" y="174" font-size="11" font-family="'SF Mono', Menlo, monospace" fill="#6e7781" letter-spacing="3">RENDERING</text>
      <text x="852" y="218" font-size="32" font-family="Georgia, serif" fill="#1f2328" font-weight="300">Three.js scene</text>

      <line x1="852" y1="238" x2="940" y2="238" stroke="#1f2328" stroke-width="0.6" opacity="0.6"/>

      
        <text x="852" y="274" font-size="14" font-family="'SF Mono', Menlo, monospace" fill="#1f2328" opacity="0.92">strict 1:1 tensor mapping</text>
      
        <text x="852" y="302" font-size="14" font-family="'SF Mono', Menlo, monospace" fill="#1f2328" opacity="0.92">PCA-derived 3D layout</text>
      
        <text x="852" y="330" font-size="14" font-family="'SF Mono', Menlo, monospace" fill="#1f2328" opacity="0.92">audio sonification</text>
      
        <text x="852" y="358" font-size="14" font-family="'SF Mono', Menlo, monospace" fill="#1f2328" opacity="0.92">soft Gaussian sprite mode</text>
      
        <text x="852" y="386" font-size="14" font-family="'SF Mono', Menlo, monospace" fill="#1f2328" opacity="0.92">draggable, dockable panels</text>
      
    
      <rect x="60" y="430" width="720" height="270" rx="6" fill="rgba(31,35,40,0.025)" stroke="#1f2328" stroke-width="0.5" opacity="0.95"/>

      <!-- glyph in top-right of card -->
      <g><rect x="694" y="468" width="52" height="5" fill="#1f2328" opacity="0.85"/><rect x="694" y="479" width="48" height="5" fill="#1f2328" opacity="0.72"/><rect x="694" y="490" width="44" height="5" fill="#1f2328" opacity="0.59"/><rect x="694" y="501" width="40" height="5" fill="#1f2328" opacity="0.45999999999999996"/><rect x="694" y="512" width="36" height="5" fill="#1f2328" opacity="0.32999999999999996"/></g>

      <text x="92" y="474" font-size="11" font-family="'SF Mono', Menlo, monospace" fill="#6e7781" letter-spacing="3">WEIGHTS</text>
      <text x="92" y="518" font-size="32" font-family="Georgia, serif" fill="#1f2328" font-weight="300">Phi-3-mini · MLC</text>

      <line x1="92" y1="538" x2="180" y2="538" stroke="#1f2328" stroke-width="0.6" opacity="0.6"/>

      
        <text x="92" y="574" font-size="14" font-family="'SF Mono', Menlo, monospace" fill="#1f2328" opacity="0.92">~1.94 GB on disk</text>
      
        <text x="92" y="602" font-size="14" font-family="'SF Mono', Menlo, monospace" fill="#1f2328" opacity="0.92">Cache API + OPFS</text>
      
        <text x="92" y="630" font-size="14" font-family="'SF Mono', Menlo, monospace" fill="#1f2328" opacity="0.92">streaming progressive load</text>
      
        <text x="92" y="658" font-size="14" font-family="'SF Mono', Menlo, monospace" fill="#1f2328" opacity="0.92">instant reload on return</text>
      
        <text x="92" y="686" font-size="14" font-family="'SF Mono', Menlo, monospace" fill="#1f2328" opacity="0.92">verifiable HF source</text>
      
    
      <rect x="820" y="430" width="720" height="270" rx="6" fill="rgba(31,35,40,0.025)" stroke="#1f2328" stroke-width="0.5" opacity="0.95"/>

      <!-- glyph in top-right of card -->
      <g>
      <rect x="1450" y="470" width="60" height="40" rx="3" fill="none" stroke="#1f2328" stroke-width="1" opacity="0.7"/>
      <line x1="1450" y1="480" x2="1510" y2="480" stroke="#1f2328" stroke-width="1" opacity="0.7"/>
      <circle cx="1455" cy="475" r="1.8" fill="#1f2328" opacity="0.7"/>
      <circle cx="1461" cy="475" r="1.8" fill="#1f2328" opacity="0.7"/>
      <circle cx="1467" cy="475" r="1.8" fill="#1f2328" opacity="0.7"/>
    </g>

      <text x="852" y="474" font-size="11" font-family="'SF Mono', Menlo, monospace" fill="#6e7781" letter-spacing="3">UI</text>
      <text x="852" y="518" font-size="32" font-family="Georgia, serif" fill="#1f2328" font-weight="300">Vanilla TypeScript</text>

      <line x1="852" y1="538" x2="940" y2="538" stroke="#1f2328" stroke-width="0.6" opacity="0.6"/>

      
        <text x="852" y="574" font-size="14" font-family="'SF Mono', Menlo, monospace" fill="#1f2328" opacity="0.92">zero runtime frameworks</text>
      
        <text x="852" y="602" font-size="14" font-family="'SF Mono', Menlo, monospace" fill="#1f2328" opacity="0.92">Vite (dev + build only)</text>
      
        <text x="852" y="630" font-size="14" font-family="'SF Mono', Menlo, monospace" fill="#1f2328" opacity="0.92">~3,400 LOC in src/</text>
      
        <text x="852" y="658" font-size="14" font-family="'SF Mono', Menlo, monospace" fill="#1f2328" opacity="0.92">every claim CI-verified</text>
      
        <text x="852" y="686" font-size="14" font-family="'SF Mono', Menlo, monospace" fill="#1f2328" opacity="0.92">a single static export</text>
      
    

  <!-- center divider lines connecting the 4 cards visually -->
  <line x1="800" y1="160" x2="800" y2="670" stroke="#1f2328" stroke-width="0.3" opacity="0.18"/>
  <line x1="90" y1="411" x2="1510" y2="411" stroke="#1f2328" stroke-width="0.3" opacity="0"/>
</svg>