Spaces:

elvis-hf
/

cnn_visualizer

Running

App Files Files Community

Joel Woodfield commited on Mar 2

Commit

bc03848

1 Parent(s): e9d96d4

Add support for extra dense layers after flattening

Browse files

Files changed (4) hide show

dist/assets/{index-BrJuj8_Q.js → index-C6SYjIbW.js} +0 -0
dist/index.html +1 -1
src/InfoViewer.tsx +37 -5
src/train.ts +40 -1

dist/assets/{index-BrJuj8_Q.js → index-C6SYjIbW.js} RENAMED Viewed

The diff for this file is too large to render. See raw diff

dist/index.html CHANGED Viewed

@@ -5,7 +5,7 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>cnn_visualizer2</title>
-    <script type="module" crossorigin src="/assets/index-BrJuj8_Q.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-DSnfkyCF.css">
   </head>
   <body>

     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>cnn_visualizer2</title>
+    <script type="module" crossorigin src="/assets/index-C6SYjIbW.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-DSnfkyCF.css">
   </head>
   <body>

src/InfoViewer.tsx CHANGED Viewed

@@ -36,7 +36,9 @@ interface FlattenLayer {
 interface DenseLayer {
   type: "dense";
-  details?: string;
 }
 interface OutputLayer {
@@ -86,6 +88,12 @@ interface OutputLayerViewerProps {
   probs: NumericArray;
 }
 function asLayerInfo(layer: RunInfo): LayerInfo | null {
   if (typeof layer.type !== "string") {
     return null;
@@ -363,6 +371,25 @@ function OutputLayerViewer({ probs }: OutputLayerViewerProps) {
   );
 }
 export default function InfoViewer({ info, onSampleIndexChange }: InfoViewerProps) {
   const layers = useMemo(() => (info ?? []).map(asLayerInfo).filter((v): v is LayerInfo => v !== null), [info]);
@@ -406,9 +433,12 @@ export default function InfoViewer({ info, onSampleIndexChange }: InfoViewerProp
         return null;
       case "dense":
         return (
-          <Card key={idx} className="p-4 text-sm text-slate-700 shadow-sm">
-            Dense Layer: {layer.details ?? "N/A"}
-          </Card>
         );
       case "output":
         return null;
@@ -423,7 +453,9 @@ export default function InfoViewer({ info, onSampleIndexChange }: InfoViewerProp
   const lastLayer = layers.length > 0 ? layers[layers.length - 1] : null;
   const outputLayer = lastLayer?.type === "output" ? lastLayer : null;
-  const bodyLayers = outputLayer ? layers.slice(0, -1) : layers;
   return (
     <div className="flex flex-col gap-4 min-h-0">

 interface DenseLayer {
   type: "dense";
+  inputUnits: number;
+  outputUnits: number;
+  activationType?: string;
 }
 interface OutputLayer {
   probs: NumericArray;
 }
+interface DenseLayerViewerProps {
+  inputUnits: number;
+  outputUnits: number;
+  activationType?: string;
+}
 function asLayerInfo(layer: RunInfo): LayerInfo | null {
   if (typeof layer.type !== "string") {
     return null;
   );
 }
+function DenseLayerViewer({ inputUnits, outputUnits, activationType }: DenseLayerViewerProps) {
+  return (
+    <Card>
+      <h3 className="text-lg font-semibold text-slate-900">Dense Layer</h3>
+      <div className="mt-2 grid grid-cols-2 gap-2 text-sm text-slate-700">
+        <div>
+          <strong>Input Units:</strong> {inputUnits}
+        </div>
+        <div>
+          <strong>Output Units:</strong> {outputUnits}
+        </div>
+        <div>
+          <strong>Activation:</strong> {activationType ?? "none"}
+        </div>
+      </div>
+    </Card>
+  );
+}
 export default function InfoViewer({ info, onSampleIndexChange }: InfoViewerProps) {
   const layers = useMemo(() => (info ?? []).map(asLayerInfo).filter((v): v is LayerInfo => v !== null), [info]);
         return null;
       case "dense":
         return (
+          <DenseLayerViewer
+            key={idx}
+            inputUnits={layer.inputUnits}
+            outputUnits={layer.outputUnits}
+            activationType={layer.activationType}
+          />
         );
       case "output":
         return null;
   const lastLayer = layers.length > 0 ? layers[layers.length - 1] : null;
   const outputLayer = lastLayer?.type === "output" ? lastLayer : null;
+  // the second last layer in layers is the dense layer for the output - don't show it.
+  const bodyLayers = outputLayer ? layers.slice(0, -2) : layers;
   return (
     <div className="flex flex-col gap-4 min-h-0">

src/train.ts CHANGED Viewed

@@ -247,6 +247,24 @@ export class Cnn {
           out = tf.matMul(out as tf.Tensor2D, denseWeights as tf.Tensor2D).add(
             denseBiases as tf.Tensor1D,
           );
           break;
         }
         default:
@@ -340,6 +358,23 @@ export class Cnn {
           out = tf.matMul(out as tf.Tensor2D, denseWeights as tf.Tensor2D).add(
             denseBiases as tf.Tensor1D,
           );
           info.push({
             type: 'dense',
@@ -349,7 +384,11 @@ export class Cnn {
             outputShape: out.shape,
             weightShape: denseWeights.shape,
             biasShape: denseBiases.shape,
-            units: getNumber(layer, 'units'),
           });
           break;
         }

           out = tf.matMul(out as tf.Tensor2D, denseWeights as tf.Tensor2D).add(
             denseBiases as tf.Tensor1D,
           );
+          if (layer.activationType === 'relu') {
+            out = out.relu();
+          }
+          const next = this.architecture[i + 1];
+          if (next?.type === 'dense' && next.weights === null) {
+            const nextUnits = getNumber(next, 'units');
+            const currentUnits = getNumber(layer, 'units');
+            next.weights = tf.variable(
+              tf.randomUniform(
+                [currentUnits, nextUnits],
+                -Math.sqrt(1 / currentUnits),
+                Math.sqrt(1 / currentUnits),
+              ),
+            );
+            next.biases = tf.variable(tf.zeros([nextUnits]));
+          }
           break;
         }
         default:
           out = tf.matMul(out as tf.Tensor2D, denseWeights as tf.Tensor2D).add(
             denseBiases as tf.Tensor1D,
           );
+          if (layer.activationType === 'relu') {
+            out = out.relu();
+          }
+          const next = this.architecture[i + 1];
+          if (next?.type === 'dense' && next.weights === null) {
+            const nextUnits = getNumber(next, 'units');
+            const currentUnits = getNumber(layer, 'units');
+            next.weights = tf.variable(
+              tf.randomUniform(
+                [currentUnits, nextUnits],
+                -Math.sqrt(1 / currentUnits),
+                Math.sqrt(1 / currentUnits),
+              ),
+            );
+            next.biases = tf.variable(tf.zeros([nextUnits]));
+          }
           info.push({
             type: 'dense',
             outputShape: out.shape,
             weightShape: denseWeights.shape,
             biasShape: denseBiases.shape,
+            inputUnits: denseWeights.shape[0],
+            outputUnits: getNumber(layer, 'units'),
+            outputSize: getNumber(layer, 'units'),
+            inputSize: denseWeights.shape[0],
+            activationType: layer.activationType,
           });
           break;
         }