Skip to content

Commit 5fcfaf9

Browse files
vukrosicvukrosic
committed
Refactor NVFP4 project page layout and improve visual comparison cards
- Updated the layout of visual comparison cards for block size, scale format, and scaling strategy to enhance clarity and user engagement. - Improved styling of tooltips and card elements for better visual consistency and interaction. - Enhanced descriptions within tooltips to provide clearer insights into the advantages of NVFP4 over previous models.
1 parent 062cdac commit 5fcfaf9

1 file changed

Lines changed: 35 additions & 40 deletions

File tree

‎app/blog/nvfp4-4bit-training/page.tsx‎

Lines changed: 35 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -205,8 +205,9 @@ export default function NVFP4Project() {
205205
</p>
206206
</div>
207207

208-
<div className="space-y-4">
209-
{/* Block Size Comparison */}
208+
{/* Visual Comparison Cards */}
209+
<div className="grid md:grid-cols-3 gap-6 mb-8">
210+
{/* Block Size Card */}
210211
<Tooltip
211212
content={
212213
<div>
@@ -220,26 +221,24 @@ export default function NVFP4Project() {
220221
</div>
221222
}
222223
>
223-
<div className="bg-gradient-to-br from-slate-800/30 to-slate-700/30 backdrop-blur-sm border border-slate-600/30 rounded-xl p-6 hover:border-slate-500/50 transition-all duration-300">
224+
<div className="bg-gradient-to-br from-slate-800/50 to-slate-700/50 backdrop-blur-sm border border-slate-600/50 rounded-xl p-6 cursor-help hover:border-slate-500/50 transition-all duration-300">
225+
<h3 className="text-lg font-bold text-white mb-4">Block Size</h3>
224226
<div className="flex items-center justify-between mb-4">
225-
<h3 className="text-lg font-semibold text-white">Block Size</h3>
226-
<div className="flex items-center gap-4">
227-
<div className="text-center">
228-
<div className="text-orange-400 font-mono text-sm">32 numbers</div>
229-
<div className="text-slate-400 text-xs">MXFP4</div>
230-
</div>
231-
<div className="text-slate-400">→</div>
232-
<div className="text-center">
233-
<div className="text-blue-400 font-mono text-sm">16 numbers</div>
234-
<div className="text-slate-400 text-xs">NVFP4</div>
235-
</div>
227+
<div className="text-center">
228+
<div className="text-orange-400 font-mono text-sm mb-1">32 numbers</div>
229+
<div className="text-slate-400 text-xs">MXFP4</div>
230+
</div>
231+
<div className="text-slate-400 text-2xl">→</div>
232+
<div className="text-center">
233+
<div className="text-blue-400 font-mono text-sm mb-1">16 numbers</div>
234+
<div className="text-slate-400 text-xs">NVFP4</div>
236235
</div>
237236
</div>
238237
<p className="text-slate-300 text-sm">Smaller blocks = better fit</p>
239238
</div>
240239
</Tooltip>
241240

242-
{/* Scale Format Comparison */}
241+
{/* Scale Format Card */}
243242
<Tooltip
244243
content={
245244
<div>
@@ -253,26 +252,24 @@ export default function NVFP4Project() {
253252
</div>
254253
}
255254
>
256-
<div className="bg-gradient-to-br from-slate-800/30 to-slate-700/30 backdrop-blur-sm border border-slate-600/30 rounded-xl p-6 hover:border-slate-500/50 transition-all duration-300">
255+
<div className="bg-gradient-to-br from-slate-800/50 to-slate-700/50 backdrop-blur-sm border border-slate-600/50 rounded-xl p-6 cursor-help hover:border-slate-500/50 transition-all duration-300">
256+
<h3 className="text-lg font-bold text-white mb-4">Scale Format</h3>
257257
<div className="flex items-center justify-between mb-4">
258-
<h3 className="text-lg font-semibold text-white">Scale Format</h3>
259-
<div className="flex items-center gap-4">
260-
<div className="text-center">
261-
<div className="text-orange-400 font-mono text-sm">UE8M0 (crude)</div>
262-
<div className="text-slate-400 text-xs">MXFP4</div>
263-
</div>
264-
<div className="text-slate-400">→</div>
265-
<div className="text-center">
266-
<div className="text-blue-400 font-mono text-sm">E4M3 (precise)</div>
267-
<div className="text-slate-400 text-xs">NVFP4</div>
268-
</div>
258+
<div className="text-center">
259+
<div className="text-orange-400 font-mono text-sm mb-1">UE8M0 (crude)</div>
260+
<div className="text-slate-400 text-xs">MXFP4</div>
261+
</div>
262+
<div className="text-slate-400 text-2xl">→</div>
263+
<div className="text-center">
264+
<div className="text-blue-400 font-mono text-sm mb-1">E4M3 (precise)</div>
265+
<div className="text-slate-400 text-xs">NVFP4</div>
269266
</div>
270267
</div>
271268
<p className="text-slate-300 text-sm">More accurate scaling</p>
272269
</div>
273270
</Tooltip>
274271

275-
{/* Scaling Strategy Comparison */}
272+
{/* Scaling Strategy Card */}
276273
<Tooltip
277274
content={
278275
<div>
@@ -286,19 +283,17 @@ export default function NVFP4Project() {
286283
</div>
287284
}
288285
>
289-
<div className="bg-gradient-to-br from-slate-800/30 to-slate-700/30 backdrop-blur-sm border border-slate-600/30 rounded-xl p-6 hover:border-slate-500/50 transition-all duration-300">
286+
<div className="bg-gradient-to-br from-slate-800/50 to-slate-700/50 backdrop-blur-sm border border-slate-600/50 rounded-xl p-6 cursor-help hover:border-slate-500/50 transition-all duration-300">
287+
<h3 className="text-lg font-bold text-white mb-4">Scaling Strategy</h3>
290288
<div className="flex items-center justify-between mb-4">
291-
<h3 className="text-lg font-semibold text-white">Scaling Strategy</h3>
292-
<div className="flex items-center gap-4">
293-
<div className="text-center">
294-
<div className="text-orange-400 font-mono text-sm">Single-level</div>
295-
<div className="text-slate-400 text-xs">MXFP4</div>
296-
</div>
297-
<div className="text-slate-400">→</div>
298-
<div className="text-center">
299-
<div className="text-blue-400 font-mono text-sm">Two-level</div>
300-
<div className="text-slate-400 text-xs">NVFP4</div>
301-
</div>
289+
<div className="text-center">
290+
<div className="text-orange-400 font-mono text-sm mb-1">Single-level</div>
291+
<div className="text-slate-400 text-xs">MXFP4</div>
292+
</div>
293+
<div className="text-slate-400 text-2xl">→</div>
294+
<div className="text-center">
295+
<div className="text-blue-400 font-mono text-sm mb-1">Two-level</div>
296+
<div className="text-slate-400 text-xs">NVFP4</div>
302297
</div>
303298
</div>
304299
<p className="text-slate-300 text-sm">Better dynamic range</p>

0 commit comments

Comments
 (0)