prism

src/App.svelte

@@ -8,6 +8,7 @@
 	import { loadAllImages } from "./load";
 	import * as tf from "@tensorflow/tfjs";
 	import { VQVAE } from "./vectorQuantizer";
+	import Features from "./lib/Features.svelte";
 
 	const inputOutputCanvasSize = 300;
 	const images = [1, 2, 3, 4, 5, 7].map((d) => `images/${d}.png`);
@@ -55,7 +56,9 @@
 				maxVal={1}
 			></MnistDigit>
 		</div>
-		loadAllImages
+		<div>
+			<Features width={200} height={200} square={125} />
+		</div>
 		<div>
 			<MnistDigit
 				data={outputDigit}

src/app.css

@@ -3,18 +3,16 @@
 @import "tailwindcss/utilities";
 
 :root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
+	font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+	line-height: 1.5;
+	font-weight: 400;
 
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+	font-synthesis: none;
+	text-rendering: optimizeLegibility;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
 }
 
-
 body {
-  margin: 0;
+	margin: 0;
 }
-

src/lib/Features.svelte

@@ -0,0 +1,83 @@
+<script>
+	import Prism from "./Prism.svelte";
+
+	export let width;
+	export let height;
+	export let x = 0;
+	export let y = 0;
+
+	export let square = 115;
+	export let strokeWidth = 2;
+	export let opacity = 0.1;
+
+	export let H = 7;
+	export let W = 7;
+	export let C = 16;
+
+	const miniSquare = square / H;
+
+	const squareFront = {
+		x: 0,
+		y: height - square,
+		width: square,
+		height: square,
+	};
+	const squareBack = {
+		x: width - square,
+		y: 0,
+		width: square,
+		height: square,
+	};
+</script>
+
+<svg {width} {height} {x} {y} style="overflow: visible;">
+	<Prism
+		x1={squareFront.x}
+		y1={squareFront.y}
+		x2={squareBack.x}
+		y2={squareBack.y}
+		prismFill="rgba(0,0,0,0.05)"
+		prismFillDarker="rgba(0,0,0,0.1)"
+		{square}
+		squareFill="rgba(0,0,0,0.05)"
+		showPrism
+		stroke="lightgrey"
+		prismStroke="lightgrey"
+	/>
+
+	{#each { length: H } as _, i}
+		{@const x1 = squareFront.x + i * miniSquare}
+		{@const x2 = squareBack.x + i * miniSquare}
+		{#each { length: W } as _, j}
+			{@const y1 = squareFront.y + j * miniSquare}
+			{@const y2 = squareBack.y + j * miniSquare}
+			<Prism
+				{x1}
+				{x2}
+				{y1}
+				{y2}
+				square={miniSquare}
+				stroke="rgba(0,0,0,0.1)"
+				prismStroke="rgba(0,0,0,0.1)"
+				prismFill="rgb(0,0,0,0.1)"
+				squareFill="rgba(0,0,0,0.1)"
+				hoverInteraction
+			/>
+			{#if j === 0}
+				<line {x1} {y1} {x2} {y2} stroke="rgb(0,0,0,0.1)" />
+			{/if}
+			{#if i === W - 1}
+				<line
+					x1={x1 + miniSquare}
+					{y1}
+					x2={x2 + miniSquare}
+					{y2}
+					stroke="rgb(0,0,0,0.1)"
+				/>
+			{/if}
+		{/each}
+	{/each}
+</svg>
+
+<style>
+</style>

src/lib/Prism.svelte

@@ -0,0 +1,75 @@
+<script>
+	export let square = 5;
+	export let x1 = 0;
+	export let x2 = 0;
+	export let y1 = 0;
+	export let y2 = 0;
+
+	export let stroke = "black";
+	export let prismStroke = "black";
+	export let hoverInteraction = false;
+	export let prismFill = "red";
+	export let prismFillDarker = prismFill;
+	export let squareFill = prismFill;
+	export let showPrism = false;
+
+	const squareFront = {
+		x: x1,
+		y: y1,
+		width: square,
+		height: square,
+	};
+	const squareBack = {
+		x: x2,
+		y: y2,
+		width: square,
+		height: square,
+	};
+	let hovering = false;
+</script>
+
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<rect
+	{...squareFront}
+	fill={hovering || showPrism ? squareFill : "transparent"}
+	{stroke}
+	on:mouseenter={() => {
+		if (hoverInteraction) {
+			hovering = true;
+		}
+	}}
+	on:mouseleave={() => {
+		if (hoverInteraction) {
+			hovering = false;
+		}
+	}}
+/>
+<rect {...squareBack} fill="none" {stroke} opacity={0.2} />
+
+{#if hovering || showPrism}
+	<!-- side panel -->
+	<polygon
+		points="{squareFront.x + square},{squareFront.y} {squareBack.x +
+			square},{squareBack.y} {squareBack.x + square},{squareBack.y +
+			square} {squareFront.x + square}, {squareFront.y + square}"
+		fill={hovering || showPrism ? prismFillDarker : "transparent"}
+		stroke={prismStroke}
+	/>
+	<!-- top panel -->
+	<polygon
+		points="{squareFront.x},{squareFront.y} {squareFront.x +
+			square},{squareFront.y} {squareBack.x +
+			square},{squareBack.y} {squareBack.x}, {squareBack.y}"
+		fill={hovering || showPrism ? prismFill : "transparent"}
+		stroke={prismStroke}
+	/>
+	<!-- left side panel background line -->
+	<line
+		x1={squareFront.x}
+		y1={squareFront.y + square}
+		x2={squareBack.x}
+		y2={squareBack.y + square}
+		stroke={prismStroke}
+		opacity={0.2}
+	/>
+{/if}