Skip to content

Commit

Permalink
refactor: minimized the Svelte Store Implimentation
Browse files Browse the repository at this point in the history
  • Loading branch information
@Keshav-writes-code
Keshav-writes-code committed Sep 22, 2024
1 parent 0170312 commit 0b80ff4
Show file tree
Hide file tree
Showing 4 changed files with 45 additions and 112 deletions.
53 changes: 15 additions & 38 deletions src/components/NN_comps/NN_IOgraph.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
import { onMount } from "svelte";
import { Chart } from "chart.js/auto";
import { Layer, af_enum, cNeuron, XYDataCollector, Neuron } from "./NN_classes.ts";
import { Layer, af_enum, XYDataCollector, Neuron } from "./NN_classes.ts";
import {
hidOutLayers_store,
selActivaFn_store,
Expand All @@ -23,29 +23,6 @@
[af_enum.tanh]: (x: number) => Math.tanh(x),
};
let selActivaFn: af_enum;
selActivaFn_store.subscribe((value) => {
selActivaFn = value;
});
let currentNeuron: cNeuron | null = null
currentNeuron_store.subscribe((value) => {
currentNeuron = value;
})
let hidOutLayers: Layer[];
hidOutLayers_store.subscribe((value) => {
hidOutLayers = value;
});
let hiddenLayersNeuronCount: number[] = [1];
hiddenLayersNeuronCount_store.subscribe((value) => {
hiddenLayersNeuronCount = value;
});
let hiddenLayersCount = 1;
hiddenLayersCount_store.subscribe((value) => {
hiddenLayersCount = value;
})
//---------------------------------------------
// Setting up the Input, Hidden & Output Layers
//---------------------------------------------
Expand All @@ -57,7 +34,7 @@
let inputLayer = new Layer(1, 0);
let outputLayer = new Layer(
1,
hiddenLayersNeuronCount[hiddenLayersNeuronCount.length - 1]
$hiddenLayersNeuronCount_store[$hiddenLayersNeuronCount_store.length - 1]
);
// Hidden & Output Layer Combined
Expand Down Expand Up @@ -133,8 +110,8 @@
}
},
});
NN_sampler.update(hidOutLayers, neuralNetwork, activaFn[selActivaFn])
currentNeuronOut_sampler.update(currentNeuronLayers, neuralNetwork, activaFn[selActivaFn])
NN_sampler.update($hidOutLayers_store, neuralNetwork, activaFn[$selActivaFn_store])
currentNeuronOut_sampler.update(currentNeuronLayers, neuralNetwork, activaFn[$selActivaFn_store])
chart.data.datasets[0].data = NN_sampler.y;
chart.data.datasets[1].data = currentNeuronOut_sampler.y;
chart.options.animation = false; // disables all animations
Expand Down Expand Up @@ -184,21 +161,21 @@
hidOutLayers_store.set([...hiddenLayers, outputLayer]);
}
// update Network Structure when Neural Network Specs Changes
$: updateNet(hiddenLayersCount, hiddenLayersNeuronCount);
$: updateNet($hiddenLayersCount_store, $hiddenLayersNeuronCount_store);
// Update Current Neuron Out Graph when Current Neuron Changes
$: currentNeuron, (()=>{
currentNeuron_store.subscribe((value) => {
currentNeuronLayers = [];
if (!currentNeuron) return
for (let i = 0; i < hidOutLayers.length; i++) {
const layer = hidOutLayers[i];
if (currentNeuron.idx > i) {
if (!value) return
for (let i = 0; i < $hidOutLayers_store.length; i++) {
const layer = $hidOutLayers_store[i];
if (value.idx > i) {
currentNeuronLayers.push(layer);
}
}
currentNeuronLayers.push({
neurons: [
hidOutLayers[currentNeuron.idx].neurons[currentNeuron.idy],
$hidOutLayers_store[value.idx].neurons[value.idy],
]
});
currentNeuronLayers.push({
Expand All @@ -207,17 +184,17 @@
]
});
currentNeuronOut_sampler.update(currentNeuronLayers, neuralNetwork, activaFn[selActivaFn])
currentNeuronOut_sampler.update(currentNeuronLayers, neuralNetwork, activaFn[$selActivaFn_store])
if (chart) {
chart.data.datasets[1].data = currentNeuronOut_sampler.y;
chart.update();
}
})()
})
// Update NN Graphs when Neural Network Parameters Changes
$: {
NN_sampler.update(hidOutLayers, neuralNetwork, activaFn[selActivaFn])
currentNeuronOut_sampler.update(currentNeuronLayers, neuralNetwork, activaFn[selActivaFn])
NN_sampler.update($hidOutLayers_store, neuralNetwork, activaFn[$selActivaFn_store])
currentNeuronOut_sampler.update(currentNeuronLayers, neuralNetwork, activaFn[$selActivaFn_store])
if (chart) {
chart.data.datasets[0].data = NN_sampler.y;
Expand Down
24 changes: 5 additions & 19 deletions src/components/NN_comps/NN_layers.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,20 +5,6 @@
hiddenLayersNeuronCount_store,
currentNeuron_store,
} from "../store.ts";
let hiddenLayersCount: number;
hiddenLayersCount_store.subscribe((value) => {
hiddenLayersCount = value;
});
let hiddenLayersNeuronCount: number[];
hiddenLayersNeuronCount_store.subscribe((value) => {
hiddenLayersNeuronCount = value;
});
let currentNeuron: cNeuron | null;
currentNeuron_store.subscribe((value) => {
currentNeuron = value;
});
</script>

<div
Expand Down Expand Up @@ -83,7 +69,7 @@
aria-label="Decrease"
data-hs-input-number-decrement=""
on:click={() =>
hiddenLayersNeuronCount[i] > 1
$hiddenLayersNeuronCount_store[i] > 1
? hiddenLayersNeuronCount_store.update((value) =>{
const updatedValues = [...value];
updatedValues[i] = value[i] - 1;
Expand Down Expand Up @@ -114,7 +100,7 @@
placeholder="1"
min="1"
max="10"
bind:value={hiddenLayersNeuronCount[i]}
bind:value={$hiddenLayersNeuronCount_store[i]}
data-hs-input-number-input=""
/>
<button
Expand All @@ -124,7 +110,7 @@
aria-label="Increase"
data-hs-input-number-increment=""
on:click={() =>
hiddenLayersNeuronCount[i] < 10
$hiddenLayersNeuronCount_store[i] < 10
? hiddenLayersNeuronCount_store.update((value) =>{
const updatedValues = [...value];
updatedValues[i] = value[i] + 1;
Expand All @@ -150,12 +136,12 @@
</div>
</div>
<div class="divider"></div>
{#each { length: hiddenLayersNeuronCount[i] } as _, i2}
{#each { length: $hiddenLayersNeuronCount_store[i] } as _, i2}
<div class="flex flex-col">
<input id="neuron{i}{i2}" type="radio" class="peer hidden " name="neurons" >
<label for="neuron{i}{i2}" class="btn peer-checked:*:stroke-#fff btn-success touch-manipulation size-min hover:scale-103 peer-checked:bg-#36d39944 group "
on:click={() => {
if (!currentNeuron == null) {
if (!$currentNeuron_store == null) {
currentNeuron_store.set(new cNeuron(0, 0));
}
currentNeuron_store.set(new cNeuron(i, i2));
Expand Down
50 changes: 20 additions & 30 deletions src/components/NN_comps/NN_parameters.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,12 @@
<script lang="ts">
import {Layer, cNeuron} from './NN_classes.ts'
import {Layer} from './NN_classes.ts'
import { currentNeuron_store, hidOutLayers_store } from "../store.ts";
let hidOutLayers: Layer[];
hidOutLayers_store.subscribe(value => {
hidOutLayers = value;
});
function updateNet(hidOutLayers: Layer[]) {
hidOutLayers_store.set(hidOutLayers);
}
$: updateNet(hidOutLayers);
let currentNeuron: cNeuron | null;
currentNeuron_store.subscribe((value) => {
currentNeuron = value;
});
$: updateNet($hidOutLayers_store);
let biasRangeMax: number = 100
let biasRangeMin: number = -100
Expand All @@ -29,19 +19,19 @@
<div
class="rounded-lg border-neutral-700 b-1 w-full max-w-xl p-10 shadow-2xl relative h-min"
>
{#if currentNeuron}
{#if $currentNeuron_store}
<div class="text-2xl">
Neuron
<div class="badge badge-lg text-xl badge-neutral">
{currentNeuron.idx + 1}:{currentNeuron.idy + 1}
{$currentNeuron_store.idx + 1}:{$currentNeuron_store.idy + 1}
</div>
</div>

<label class="form-control">
<div class="label grid grid-cols-[1fr_auto_1fr]">
<span class="label-text">Bias</span>
<span class="label-text-alt"
>Value = {hidOutLayers[currentNeuron.idx].neurons[currentNeuron.idy]
>Value = {$hidOutLayers_store[$currentNeuron_store.idx].neurons[$currentNeuron_store.idy]
.bias}</span
>
<span class="label-text-alt justify-self-end flex items-center gap-1">
Expand All @@ -56,18 +46,18 @@
max={biasRangeMax}
step="0.01"
class="range range-lg w-full"
bind:value={hidOutLayers[currentNeuron.idx].neurons[currentNeuron.idy]
bind:value={$hidOutLayers_store[$currentNeuron_store.idx].neurons[$currentNeuron_store.idy]
.bias}
on:dblclick={() => {
if (!currentNeuron) return
hidOutLayers[currentNeuron.idx].neurons[currentNeuron.idy].bias = 0
if (!$currentNeuron_store) return
$hidOutLayers_store[$currentNeuron_store.idx].neurons[$currentNeuron_store.idy].bias = 0
}}
on:touchend={() => {
if (!currentNeuron) return
if (!$currentNeuron_store) return
const currentTime = new Date().getTime();
const tapLength = currentTime - lastTap;
if (tapLength < 200 && tapLength > 0) { // Adjust the interval as needed
hidOutLayers[currentNeuron.idx].neurons[currentNeuron.idy].bias = 0
$hidOutLayers_store[$currentNeuron_store.idx].neurons[$currentNeuron_store.idy].bias = 0
}
lastTap = currentTime;
}}
Expand All @@ -94,14 +84,14 @@

<div class="divider"></div>
<div class="max-h-300px overflow-y-auto">
{#if currentNeuron}
{#each hidOutLayers[currentNeuron.idx].neurons[currentNeuron.idy].weights as _, i}
{#if $currentNeuron_store}
{#each $hidOutLayers_store[$currentNeuron_store.idx].neurons[$currentNeuron_store.idy].weights as _, i}
<label class="form-control">
<div class="label grid grid-cols-[1fr_auto_1fr]">
<span class="label-text">Weight {i + 1}</span>
<span class="label-text-alt"
>Value = {hidOutLayers[currentNeuron.idx].neurons[
currentNeuron.idy
>Value = {$hidOutLayers_store[$currentNeuron_store.idx].neurons[
$currentNeuron_store.idy
].weights[i]}</span
>
<span class="label-text-alt justify-self-end gap-1 flex items-center ">
Expand All @@ -116,19 +106,19 @@
max={wieghtRangeMax}
step="0.01"
class="range range-lg w-full"
bind:value={hidOutLayers[currentNeuron.idx].neurons[
currentNeuron.idy
bind:value={$hidOutLayers_store[$currentNeuron_store.idx].neurons[
$currentNeuron_store.idy
].weights[i]}
on:dblclick={() => {
if (!currentNeuron) return
hidOutLayers[currentNeuron.idx].neurons[currentNeuron.idy].weights[i] = 0
if (!$currentNeuron_store) return
$hidOutLayers_store[$currentNeuron_store.idx].neurons[$currentNeuron_store.idy].weights[i] = 0
}}
on:touchend={() => {
if (!currentNeuron) return
if (!$currentNeuron_store) return
const currentTime = new Date().getTime();
const tapLength = currentTime - lastTap;
if (tapLength < 300 && tapLength > 0) { // Adjust the interval as needed
hidOutLayers[currentNeuron.idx].neurons[currentNeuron.idy].weights[i] = 0
$hidOutLayers_store[$currentNeuron_store.idx].neurons[$currentNeuron_store.idy].weights[i] = 0
}
lastTap = currentTime;
}}
Expand Down
30 changes: 5 additions & 25 deletions src/components/NN_comps/NN_specs.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,32 +2,12 @@
// Implement Theme CHanger BY
// Changing the html tag data-theme attribute on each select menu click
import { cNeuron, af_enum } from "./NN_classes.ts";
import { af_enum } from "./NN_classes.ts";
import {
hiddenLayersCount_store,
hiddenLayersNeuronCount_store,
currentNeuron_store,
selActivaFn_store,
} from "../store.ts";
let hiddenLayersCount: number;
hiddenLayersCount_store.subscribe((value) => {
hiddenLayersCount = value;
});
let hiddenLayersNeuronCount: number[];
hiddenLayersNeuronCount_store.subscribe((value) => {
hiddenLayersNeuronCount = value;
});
let currentNeuron: cNeuron | null;
currentNeuron_store.subscribe((value) => {
currentNeuron = value;
});
let selActivaFn: af_enum;
selActivaFn_store.subscribe((value) => {
selActivaFn = value;
})
</script>

<div
Expand All @@ -48,7 +28,7 @@
aria-label="Decrease"
data-hs-input-number-decrement=""
on:click={() => {
if (hiddenLayersCount > 1) {
if ($hiddenLayersCount_store > 1) {
hiddenLayersCount_store.update(val => val - 1);
hiddenLayersNeuronCount_store.update(val => val.slice(0, -1));
}
Expand All @@ -64,7 +44,7 @@
placeholder="1"
min="1"
max="8"
bind:value={hiddenLayersCount}
bind:value={$hiddenLayersCount_store}
data-hs-input-number-input=""
/>
<button
Expand All @@ -74,7 +54,7 @@
aria-label="Increase"
data-hs-input-number-increment=""
on:click={() => {
if (hiddenLayersCount < 8) {
if ($hiddenLayersCount_store < 8) {
hiddenLayersCount_store.update(val => val + 1);
hiddenLayersNeuronCount_store.update(val => [...val, 1]);
}
Expand All @@ -90,7 +70,7 @@
<p class="text-gray-400 text-sm"> Activation Function </p>
<div class="dropdown ">
<div tabindex="0" role="button" class="btn m-1">
{selActivaFn}
{$selActivaFn_store}
<svg width="12px" height="12px" class="inline-block h-2 w-2 fill-current opacity-60" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2048 2048" > <path d="M1799 349l242 241-1017 1017L7 590l242-241 775 775 775-775z" ></path> </svg>
</div>
<ul
Expand Down

0 comments on commit 0b80ff4

Please sign in to comment.