v0

src/App.svelte

@@ -11,6 +11,8 @@
 	import { VQVAE } from "./vectorQuantizer";
 	import Features from "./lib/Features.svelte";
 	import Matrix from "./lib/Matrix.svelte";
+	import Quantized from "./lib/Quantized.svelte";
+	import { hovering } from "./stores";
 
 	const inputOutputCanvasSize = 300;
 	const images = [1, 2, 3, 4, 5, 7].map((d) => `images/${d}.png`);
@@ -21,7 +23,6 @@
 	let inputDigit = Array(784).fill(0);
 	let outputDigit = Array(784).fill(0);
 	let embeddings;
-	let hovering;
 	let idxs;
 	let features;
 
@@ -82,32 +83,37 @@
 			></MnistDigit>
 		</div>
 		<div>
-			<Features
-				width={200}
-				height={200}
-				square={125}
-				mouseenter={(i, j) => (hovering = [i, j])}
-				mouseleave={() => (hovering = undefined)}
-			/>
+			<Features width={200} height={200} square={125} />
+			<div class="mt-5">
+				{#if features && $hovering}
+					<Matrix
+						data={[features[$hovering[0] * 7 + $hovering[1]]]}
+						width={140}
+						height={200 / 16}
+					/>
+				{/if}
+			</div>
 		</div>
-		<div style="width: 140px; height: 20px;">
-			{#if features && hovering}
-				<Matrix
-					data={[features[hovering[0] * 7 + hovering[1]]]}
-					width={140}
-					height={200 / 16}
+		<div>
+			<div>
+				<Codebook
+					width={200}
+					height={140}
+					{embeddings}
+					hoveringColumn={idxs && $hovering
+						? idxs[$hovering[0]][$hovering[1]]
+						: undefined}
 				/>
-			{/if}
+			</div>
+			<div class="mt-20">
+				{#if idxs}
+					<Quantized width={150} height={150} {idxs} />
+				{/if}
+			</div>
 		</div>
+
 		<div>
-			<Codebook
-				width={200}
-				height={140}
-				{embeddings}
-				hoveringColumn={idxs && hovering
-					? idxs[hovering[0]][hovering[1]]
-					: undefined}
-			/>
+			<Features width={200} height={200} square={125} />
 		</div>
 		<div>
 			<MnistDigit

src/app.css

@@ -16,3 +16,10 @@
 body {
 	margin: 0;
 }
+
+svg text {
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}

src/color.js

@@ -1,11 +1,11 @@
 import * as d3 from "d3";
 
-export function generateDiscreteColors(n, interp) {
+export function generateDiscreteColors(n, interp, shiftL = 0, shiftR = 0) {
 	let out = Array(n);
 	const s = d3
 		.scaleLinear()
 		.domain([0, n - 1])
-		.range([0, 1]);
+		.range([0 + shiftL, 1 - shiftR]);
 	for (let i = 0; i < n; i++) {
 		out[i] = interp(s(i));
 	}

src/lib/Codebook.svelte

@@ -28,7 +28,7 @@
 		{#each { length: columns } as _, i}
 			{#if hoveringColumn === i || true}
 				{@const x = w * i}
-				{@const o = hoveringColumn === i ? 1.0 : 0.2}
+				{@const o = hoveringColumn === i ? 1.0 : 0.4}
 				<rect
 					{x}
 					width={w}

src/lib/Features.svelte

@@ -1,4 +1,5 @@
 <script>
+	import { hovering } from "../stores";
 	import Prism from "./Prism.svelte";
 
 	export let width;
@@ -14,9 +15,6 @@
 	export let W = 7;
 	export let C = 16;
 
-	export let mouseenter = (i, j) => {};
-	export let mouseleave = () => {};
-
 	const miniSquare = square / H;
 
 	const squareFront = {
@@ -33,7 +31,14 @@
 	};
 </script>
 
-<svg {width} {height} {x} {y} style="overflow: visible;">
+<svg
+	{width}
+	{height}
+	{x}
+	{y}
+	style="overflow: visible;"
+	on:mouseleave={() => ($hovering = undefined)}
+>
 	<Prism
 		x1={squareFront.x}
 		y1={squareFront.y}
@@ -65,8 +70,10 @@
 				prismFill="rgb(0,0,0,0.1)"
 				squareFill="rgba(0,0,0,0.1)"
 				hoverInteraction
-				mouseenter={() => mouseenter(i, j)}
-				{mouseleave}
+				mouseenter={() => ($hovering = [i, j])}
+				hovering={$hovering
+					? $hovering[0] === i && $hovering[1] === j
+					: false}
 			/>
 			{#if j === 0}
 				<line {x1} {y1} {x2} {y2} stroke="rgb(0,0,0,0.1)" />

src/lib/Prism.svelte

@@ -28,7 +28,7 @@
 		width: square,
 		height: square,
 	};
-	let hovering = false;
+	export let hovering = false;
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->

src/lib/Quantized.svelte

@@ -0,0 +1,55 @@
+<script>
+	import { color } from "../color";
+	import { codeNames, codeColors, hovering } from "../stores";
+
+	export let width;
+	export let height;
+	export let x = 0;
+	export let y = 0;
+	export let idxs;
+	export let rows = idxs.length;
+	export let columns = idxs[0].length;
+
+	$: w = width / columns;
+	$: h = height / columns;
+</script>
+
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<svg
+	{width}
+	{height}
+	{x}
+	{y}
+	style="overflow: visible;"
+	on:mouseleave={() => ($hovering = undefined)}
+>
+	<rect {width} {height} fill="none" stroke="black" />
+	{#each { length: rows } as _, i}
+		{#each { length: columns } as _, j}
+			{@const idx = idxs[i][j]}
+			{@const c = codeColors[idx]}
+			{@const x = i * w}
+			{@const y = j * h}
+			{@const isHovering =
+				$hovering && $hovering[0] === i && $hovering[1] === j}
+			<g
+				opacity={isHovering || $hovering === undefined ? 1.0 : 0.6}
+				on:mouseenter={() => ($hovering = [i, j])}
+			>
+				<rect {x} {y} width={w} height={h} fill={c} />G
+				{#if isHovering}
+					<text
+						x={x + w / 2}
+						y={y + h / 2 + 5}
+						text-anchor="middle"
+						style="font-family: menlo;"
+						fill={"black"}>{codeNames[idx]}</text
+					>
+				{/if}
+			</g>
+		{/each}
+	{/each}
+</svg>
+
+<style>
+</style>

src/stores.js

@@ -2,5 +2,11 @@ import { writable } from "svelte/store";
 import { generateDiscreteColors } from "./color";
 import * as d3 from "d3";
 
+export const hovering = writable();
 export const codeNames = "0123456789ABCDEF";
-export const codeColors = generateDiscreteColors(16, d3.interpolatePlasma);
+export const codeColors = generateDiscreteColors(
+	16,
+	d3.interpolateCool,
+	0,
+	0.2
+);