YTan2000 commited on
Commit
92f9aee
·
verified ·
1 Parent(s): 6da8f44

Upload four_way_compare.html with huggingface_hub

Browse files
Files changed (1) hide show
  1. four_way_compare.html +225 -0
four_way_compare.html ADDED
@@ -0,0 +1,225 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta name="viewport" content="width=1600, initial-scale=1">
6
+ <title>Laguna XS 2.1-TQ3_4S — 196 tok/s on a single RTX 3090</title>
7
+ <link rel="preconnect" href="https://fonts.googleapis.com">
8
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
+ <link href="https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600&display=swap" rel="stylesheet">
10
+ <style>
11
+ :root{
12
+ color-scheme: dark;
13
+ --bg0:#0a0f1d; --bg1:#0d1528;
14
+ --panel:#101a30; --line:#22304e; --line2:#182338;
15
+ --text:#eaf1fd; --muted:#8ea3c8; --dim:#5f7396;
16
+ --ls:#2fe6c8; /* Laguna S teal */
17
+ --lx:#4db8ff; /* Laguna XS azure */
18
+ --q27:#ffb545; /* 27B amber */
19
+ --q9:#a8e94c; /* 9B lime */
20
+ --orn:#c792ff; /* Ornith 35B violet */
21
+ --disp:"Chakra Petch",ui-sans-serif,system-ui,sans-serif;
22
+ --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
23
+ --body:"IBM Plex Sans",ui-sans-serif,system-ui,sans-serif;
24
+ }
25
+ *{box-sizing:border-box; margin:0; padding:0}
26
+ html,body{width:1600px; height:900px; overflow:hidden}
27
+ body{
28
+ color:var(--text); font-family:var(--body);
29
+ background:
30
+ radial-gradient(52rem 30rem at 8% -6%, rgba(47,230,200,.12), transparent 60%),
31
+ radial-gradient(46rem 28rem at 92% 0%, rgba(77,184,255,.10), transparent 60%),
32
+ radial-gradient(42rem 30rem at 70% 104%, rgba(199,146,255,.08), transparent 60%),
33
+ linear-gradient(160deg, var(--bg0) 0%, var(--bg1) 52%, #080d18 100%);
34
+ }
35
+ body::before{
36
+ content:""; position:absolute; inset:0; pointer-events:none;
37
+ background:
38
+ repeating-linear-gradient(0deg, rgba(140,170,220,.05) 0 1px, transparent 1px 56px),
39
+ repeating-linear-gradient(90deg, rgba(140,170,220,.04) 0 1px, transparent 1px 56px);
40
+ mask-image:radial-gradient(90rem 60rem at 50% 18%, #000 30%, transparent 92%);
41
+ }
42
+ .stage{position:relative; width:1600px; height:900px; padding:46px 64px 34px; display:flex; flex-direction:column}
43
+
44
+ /* ---------- header ---------- */
45
+ header{display:flex; justify-content:space-between; align-items:flex-end; gap:32px;
46
+ border-bottom:2px solid var(--line); padding-bottom:20px; margin-bottom:18px}
47
+ .eyebrow{font-family:var(--mono); font-size:15px; font-weight:600; letter-spacing:.26em; color:var(--ls);
48
+ text-transform:uppercase; display:flex; align-items:center; gap:12px; margin-bottom:16px;
49
+ text-shadow:0 0 18px rgba(47,230,200,.5)}
50
+ .eyebrow::before{content:""; width:34px; height:2px; background:var(--ls); box-shadow:0 0 10px rgba(47,230,200,.7)}
51
+ h1{font-family:var(--disp); font-weight:700; text-transform:uppercase;
52
+ font-size:72px; line-height:.92; letter-spacing:-.015em; color:#f6faff;
53
+ text-shadow:0 2px 30px rgba(77,184,255,.25)}
54
+ h1 .acc{color:var(--ls); text-shadow:0 0 26px rgba(47,230,200,.55)}
55
+ h1 .acc2{display:block; font-size:38px; letter-spacing:.01em; color:var(--lx);
56
+ text-shadow:0 0 22px rgba(77,184,255,.5); margin-top:8px}
57
+ .marquee{text-align:right; flex-shrink:0}
58
+ .marquee .big{font-family:var(--mono); font-weight:700; font-size:84px; line-height:.9; color:var(--lx);
59
+ text-shadow:0 0 38px rgba(77,184,255,.6)}
60
+ .marquee .big small{font-size:23px; font-weight:600; color:var(--muted); letter-spacing:.08em; margin-left:6px}
61
+ .marquee .mlabel{font-family:var(--mono); font-size:12px; letter-spacing:.2em; color:var(--dim);
62
+ text-transform:uppercase; margin-top:6px}
63
+ .marquee .mlabel b{color:var(--lx); font-weight:700}
64
+ .marquee .big2{font-family:var(--mono); font-weight:700; font-size:46px; line-height:.9; color:var(--ls);
65
+ text-shadow:0 0 32px rgba(47,230,200,.5); margin-top:16px}
66
+ .marquee .big2 small{font-size:16px; font-weight:600; color:var(--muted); letter-spacing:.08em; margin-left:5px}
67
+ .marquee .mlabel2{font-family:var(--mono); font-size:12px; letter-spacing:.2em; color:var(--dim);
68
+ text-transform:uppercase; margin-top:6px}
69
+ .marquee .mlabel2 b{color:var(--ls); font-weight:700}
70
+
71
+ /* headline stat strip */
72
+ .headstats{display:flex; gap:30px; margin-top:18px}
73
+ .hstat{display:flex; flex-direction:column; gap:3px; padding-left:14px; border-left:2px solid var(--line);
74
+ transition:border-color .25s, transform .25s}
75
+ .hstat:hover{border-color:var(--lx); transform:translateY(-2px)}
76
+ .hstat b{font-family:var(--mono); font-weight:700; font-size:22px; color:var(--text); line-height:1}
77
+ .hstat span{font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--muted)}
78
+ .hstat.hx b{color:var(--lx); text-shadow:0 0 14px rgba(77,184,255,.4)}
79
+ .hstat.hs b{color:var(--ls); text-shadow:0 0 14px rgba(47,230,200,.4)}
80
+
81
+ /* ---------- scoreboard ---------- */
82
+ .board{flex:1; display:flex; flex-direction:column}
83
+ .cols{display:grid; grid-template-columns:330px 250px 1fr 1fr 1fr; gap:20px; align-items:end;
84
+ padding:0 22px 12px; border-bottom:1px solid var(--line2); margin-bottom:6px}
85
+ .cols span{font-family:var(--mono); font-size:13.5px; font-weight:600; letter-spacing:.2em; color:var(--muted); text-transform:uppercase}
86
+ .cols .num-h{text-align:right}
87
+ .cols i{font-style:normal; color:#7387ab; letter-spacing:.08em; display:block; font-size:11px; margin-top:4px; text-transform:none}
88
+
89
+ .rows{flex:1; display:flex; flex-direction:column; justify-content:space-evenly; gap:8px; padding-top:8px}
90
+ .row{display:grid; grid-template-columns:330px 250px 1fr 1fr 1fr; gap:20px; align-items:center;
91
+ position:relative; padding:14px 22px 14px 26px; border-radius:12px;
92
+ background:linear-gradient(180deg, rgba(16,26,48,.82), rgba(10,16,30,.88));
93
+ border:1px solid var(--line2); box-shadow:0 8px 24px rgba(0,0,0,.12)}
94
+ .row::before{content:""; position:absolute; left:0; top:12px; bottom:12px; width:4px; border-radius:0 3px 3px 0; background:var(--c)}
95
+
96
+ .r-lx {--c:var(--lx)} .r-orn{--c:var(--orn)} .r-q9{--c:var(--q9)} .r-q27{--c:var(--q27)}
97
+ .r-orn{background:linear-gradient(105deg, rgba(199,146,255,.13), rgba(16,26,48,.82) 42%, rgba(10,16,30,.9))}
98
+
99
+ .model .nm{font-family:var(--disp); font-weight:700; text-transform:uppercase; font-size:23px; letter-spacing:.02em; line-height:1; color:var(--c)}
100
+ .model .meta{font-family:var(--mono); font-size:12px; color:var(--dim); margin-top:7px; letter-spacing:.04em}
101
+
102
+ .speed .v{font-family:var(--mono); font-weight:700; font-size:36px; line-height:1; text-align:right; color:var(--text)}
103
+ .speed.win .v{color:var(--c); text-shadow:0 0 24px color-mix(in srgb, var(--c) 50%, transparent)}
104
+ .speed.win .v::before{content:"▲"; font-size:13px; margin-right:9px; vertical-align:4px}
105
+ .speed .pp{font-family:var(--mono); font-weight:700; font-size:17px; text-align:right; color:var(--ls);
106
+ margin-top:5px; letter-spacing:.01em; text-shadow:0 0 16px rgba(47,230,200,.35)}
107
+ .speed .pp small{font-size:10px; font-weight:600; color:var(--dim); letter-spacing:.14em; text-transform:uppercase; margin-left:5px}
108
+ .speed .bar{height:8px; margin-top:9px; background:rgba(9,14,26,.85); border:1px solid var(--line2); border-radius:4px; overflow:hidden}
109
+ .speed .bar i{display:block; height:100%; width:var(--w); border-radius:3px;
110
+ background:linear-gradient(90deg, color-mix(in srgb, var(--c) 25%, transparent), var(--c));
111
+ box-shadow:0 0 12px color-mix(in srgb, var(--c) 60%, transparent)}
112
+
113
+ .cell{text-align:right}
114
+ .cell .v{font-family:var(--mono); font-weight:600; font-size:32px; line-height:1; color:var(--muted)}
115
+ .cell .v .st{font-size:16px; color:var(--dim); vertical-align:6px; margin-left:2px}
116
+ .cell.na .v{color:#3d4c66}
117
+ .cell.win .v{color:var(--c); font-weight:700; text-shadow:0 0 22px color-mix(in srgb, var(--c) 45%, transparent)}
118
+ .cell.win .v::before{content:"▲"; font-size:13px; margin-right:9px; vertical-align:4px}
119
+ .cell.win{background:color-mix(in srgb, var(--c) 9%, transparent);
120
+ border:1px solid color-mix(in srgb, var(--c) 30%, transparent);
121
+ border-radius:9px; padding:12px 16px; margin:-12px -16px}
122
+
123
+ /* ---------- verdict strip ---------- */
124
+ .verdict{display:flex; align-items:stretch; margin-top:14px; border:1px solid var(--line); border-radius:12px;
125
+ overflow:hidden; background:linear-gradient(180deg, rgba(16,26,48,.92), rgba(10,16,30,.94));
126
+ box-shadow:0 10px 30px rgba(0,0,0,.2)}
127
+ .vseg{display:flex; flex-direction:column; justify-content:center; gap:4px; padding:11px 24px; position:relative;
128
+ transition:background .25s}
129
+ .vseg:hover{background:rgba(140,170,220,.05)}
130
+ .vseg + .vseg{border-left:1px solid var(--line2)}
131
+ .v-sweep{flex:1.7; background:linear-gradient(105deg, rgba(77,184,255,.10), transparent 55%)}
132
+ .v-range{flex:1.25}
133
+ .v-speed{flex:1}
134
+ .vk{font-family:var(--disp); font-weight:700; text-transform:uppercase; font-size:15px; letter-spacing:.06em;
135
+ display:flex; align-items:center; gap:9px}
136
+ .vk::before{content:""; width:5px; height:15px; border-radius:2px; background:currentColor; box-shadow:0 0 10px currentColor}
137
+ .v-sweep .vk{color:var(--lx)} .v-range .vk{color:var(--orn)} .v-speed .vk{color:var(--ls)}
138
+ .vd{font-family:var(--mono); font-size:12.5px; color:var(--muted); letter-spacing:.02em; padding-left:14px}
139
+ .vd b{font-weight:700}
140
+ .v-sweep .vd b{color:var(--lx)} .v-range .vd b{color:var(--orn)} .v-speed .vd b{color:var(--ls)}
141
+ .vd .up{color:var(--ls)} .vd .dn{color:#7d8ba3}
142
+
143
+ /* ---------- footer ---------- */
144
+ footer{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-top:16px;
145
+ font-family:var(--mono); font-size:12px; color:var(--dim); letter-spacing:.03em}
146
+ footer .cav b{color:var(--muted); font-weight:500}
147
+ footer .cav .g{color:var(--ls)}
148
+ footer .cav .tri{color:var(--q27)}
149
+ footer .brand b{color:var(--muted); font-weight:600}
150
+ </style>
151
+ </head>
152
+ <body>
153
+ <div class="stage">
154
+
155
+ <header>
156
+ <div>
157
+ <div class="eyebrow">TurboQuant · TQ3_4S · single RTX 3090</div>
158
+ <h1>Laguna XS 2.1-<span class="acc">TQ3_4S</span><br><span class="acc2">3B active. Fastest here.</span></h1>
159
+ <div class="headstats">
160
+ <div class="hstat hx"><b>100%</b><span>coding suite</span></div>
161
+ <div class="hstat hs"><b>96.4%</b><span>speed suite</span></div>
162
+ <div class="hstat"><b>3B</b><span>active · 30B MoE</span></div>
163
+ <div class="hstat"><b>4.05</b><span>bits / weight</span></div>
164
+ </div>
165
+ </div>
166
+ <div class="marquee">
167
+ <div class="big">196<small>tok/s</small></div>
168
+ <div class="mlabel"><b>decode</b> · greedy</div>
169
+ <div class="big2">1389<small>tok/s</small></div>
170
+ <div class="mlabel2"><b>pp128</b> · prefill</div>
171
+ </div>
172
+ </header>
173
+
174
+ <div class="board">
175
+ <div class="cols">
176
+ <span>Model</span>
177
+ <span class="num-h">Decode<i>tok/s · greedy</i></span>
178
+ <span class="num-h">HumanEval+<i>pass@1</i></span>
179
+ <span class="num-h">MBPP+<i>pass@1</i></span>
180
+ <span class="num-h">Hard86<i>86 assertions</i></span>
181
+ </div>
182
+
183
+ <div class="rows">
184
+ <div class="row r-lx">
185
+ <div class="model"><div class="nm">Laguna XS 2.1</div><div class="meta">TQ3_4S · 4.05 bpw · RTX 3090</div></div>
186
+ <div class="speed win"><div class="v">196</div><div class="pp">1389<small>pp128</small></div><div class="bar"><i style="--w:100%"></i></div></div>
187
+ <div class="cell"><span class="v">76.2<span class="st">%</span></span></div>
188
+ <div class="cell"><span class="v">72.0<span class="st">%</span></span></div>
189
+ <div class="cell"><span class="v">64.0<span class="st">%</span></span></div>
190
+ </div>
191
+
192
+ <div class="row r-orn">
193
+ <div class="model"><div class="nm">Ornith 35B</div><div class="meta">TQ3_4S · 13.0 GiB · RTX 3090</div></div>
194
+ <div class="speed"><div class="v">146.3</div><div class="bar"><i style="--w:74.6%"></i></div></div>
195
+ <div class="cell"><span class="v">87.2<span class="st">%</span></span></div>
196
+ <div class="cell"><span class="v">70.9<span class="st">%</span></span></div>
197
+ <div class="cell"><span class="v">81.4<span class="st">%</span></span></div>
198
+ </div>
199
+
200
+ <div class="row r-q9">
201
+ <div class="model"><div class="nm">Qwen3.5 9B</div><div class="meta">TQ3_4S · RTX 3090</div></div>
202
+ <div class="speed"><div class="v">134</div><div class="bar"><i style="--w:68.4%"></i></div></div>
203
+ <div class="cell"><span class="v">67.1<span class="st">%</span></span></div>
204
+ <div class="cell"><span class="v">56.3<span class="st">%</span></span></div>
205
+ <div class="cell"><span class="v">44.2<span class="st">%</span></span></div>
206
+ </div>
207
+
208
+ <div class="row r-q27">
209
+ <div class="model"><div class="nm">Qwen3.6 27B MTP</div><div class="meta">TQ3_4S · RTX 3090</div></div>
210
+ <div class="speed"><div class="v">54</div><div class="bar"><i style="--w:27.6%"></i></div></div>
211
+ <div class="cell win"><span class="v">92.7<span class="st">%*</span></span></div>
212
+ <div class="cell win"><span class="v">87.8<span class="st">%*</span></span></div>
213
+ <div class="cell win"><span class="v">88.4<span class="st">%</span></span></div>
214
+ </div>
215
+ </div>
216
+ </div>
217
+
218
+ <footer>
219
+ <div class="cav"><span class="tri">▲</span> best in column · EvalPlus = greedy pass@1 · <b>*</b> 27B via <span class="g">vLLM-nvfp4</span> (directional) · all rows on one RTX 3090</div>
220
+ <div class="brand"><b>turbo-tan/llama.cpp-tq3</b> · greedy · FA on · 2026-07-31</div>
221
+ </footer>
222
+
223
+ </div>
224
+ </body>
225
+ </html>