From 502399916824935980c01730d57afea1cf660960 Mon Sep 17 00:00:00 2001 From: Jacob Chvatal Date: Mon, 1 Mar 2021 16:27:08 -0800 Subject: [PATCH 1/4] add back module 'complication' --- src/modules/perceptrons/mpNeuron/MPNeuron.tsx | 85 +++++++++---------- 1 file changed, 41 insertions(+), 44 deletions(-) diff --git a/src/modules/perceptrons/mpNeuron/MPNeuron.tsx b/src/modules/perceptrons/mpNeuron/MPNeuron.tsx index d71761d..b539884 100644 --- a/src/modules/perceptrons/mpNeuron/MPNeuron.tsx +++ b/src/modules/perceptrons/mpNeuron/MPNeuron.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useState } from 'react'; -import {AddCircle, RemoveCircle} from '@material-ui/icons'; -import {RblattConfig, INIT_CONFIG} from '../rosenblatt/constants'; +import { AddCircle, RemoveCircle } from '@material-ui/icons'; +import { RblattConfig, INIT_CONFIG } from '../rosenblatt/constants'; export type NeuronInput = { @@ -12,14 +12,14 @@ export type NeuronInput = { // what labels should i do for each bubble? // how to make function piece obviously interactable // this can take a number => number func, use its tostring to render -const MPNeuron = (props: {labelColor: string}) => { +const MPNeuron = (props: { labelColor: string }) => { // react draggable? const [inputs, setInputs] = useState( [{ val: 1, weight: -.5 }, { val: 1, weight: 1 }] // this is becoming a bias, leaving it just in case as breadcrumbs // { val: 1, weight: .2 }] - + ); const [func, setFunc] = useState(() => ((n: number) => 0)); // need to recalc output when inputs change! @@ -56,7 +56,7 @@ const MPNeuron = (props: {labelColor: string}) => { } const inputSum = inputs.reduce((prev, acc) => { - return (acc.val && acc.weight ? acc.val * acc.weight : 0) + INIT_CONFIG.bias + prev + return (acc.val && acc.weight ? acc.val * acc.weight : 0) + INIT_CONFIG.bias + prev }, 0); const output = func(inputSum); @@ -64,10 +64,7 @@ const MPNeuron = (props: {labelColor: string}) => { const isOne = inpt.val === 1; return (
- {/* This following div is commented out since it makes the demo too complex to understand, - leaving this in as breadcrumbs. - */} - {/*
{ onClick={() => flipInput(idx)} > {inpt.val} -
*/} - {/*
*/} +
+
{ return (
-
-
- {inputs.map((val, idx) => makeInput(val, idx))} - -
-

bias

-
+
+ {inputs.map((val, idx) => makeInput(val, idx))} + +
+

bias

+
- - {INIT_CONFIG.bias.toFixed(1)} + > + + {INIT_CONFIG.bias.toFixed(1)} +
-
-
- {/* +1 to account for the bias term */} - -
- {inputSum} -
-
- -
-
- {output} + {inputSum} +
+
+ +
+
+ {output} +
-
- {/* Removed for now since it makes the example too complex */} - {/*
+ {/* Removed for now since it makes the example too complex */} + {/*

{inputs.length} inputs

@@ -180,7 +177,7 @@ const ThresholdFunc = (props: { onFuncChange: ((func: (n: number) => number) =>
setIsGreater(!isGreater)} > - {isGreater ? '>' : '<'} + {isGreater ? '>' : '<'}
Date: Mon, 1 Mar 2021 16:30:17 -0800 Subject: [PATCH 2/4] remove bias term from visual --- src/modules/perceptrons/mpNeuron/MPNeuron.tsx | 23 +++---------------- 1 file changed, 3 insertions(+), 20 deletions(-) diff --git a/src/modules/perceptrons/mpNeuron/MPNeuron.tsx b/src/modules/perceptrons/mpNeuron/MPNeuron.tsx index b539884..750ae49 100644 --- a/src/modules/perceptrons/mpNeuron/MPNeuron.tsx +++ b/src/modules/perceptrons/mpNeuron/MPNeuron.tsx @@ -17,13 +17,9 @@ const MPNeuron = (props: { labelColor: string }) => { const [inputs, setInputs] = useState( [{ val: 1, weight: -.5 }, { val: 1, weight: 1 }] - // this is becoming a bias, leaving it just in case as breadcrumbs - // { val: 1, weight: .2 }] - ); const [func, setFunc] = useState(() => ((n: number) => 0)); // need to recalc output when inputs change! - const flipInput = (idx: number) => { const newVal = inputs[idx].val === 1 ? 0 : 1; const newInputs = [...inputs]; @@ -93,20 +89,8 @@ const MPNeuron = (props: { labelColor: string }) => {
{inputs.map((val, idx) => makeInput(val, idx))} - -
-

bias

-
- - {INIT_CONFIG.bias.toFixed(1)} -
-
- {/* +1 to account for the bias term */} - +
{inputSum} @@ -124,12 +108,11 @@ const MPNeuron = (props: { labelColor: string }) => { {output}
- {/* Removed for now since it makes the example too complex */} - {/*
+

{inputs.length} inputs

-
*/} +
); } From 5cc6a1fc712a8ff69a6cbcf4185a0f214ea5a794 Mon Sep 17 00:00:00 2001 From: Jacob Chvatal Date: Mon, 1 Mar 2021 16:34:11 -0800 Subject: [PATCH 3/4] swap toggles with input buttons --- src/modules/perceptrons/mpNeuron/MPNeuron.tsx | 41 ++++++++++--------- 1 file changed, 21 insertions(+), 20 deletions(-) diff --git a/src/modules/perceptrons/mpNeuron/MPNeuron.tsx b/src/modules/perceptrons/mpNeuron/MPNeuron.tsx index 750ae49..0091e67 100644 --- a/src/modules/perceptrons/mpNeuron/MPNeuron.tsx +++ b/src/modules/perceptrons/mpNeuron/MPNeuron.tsx @@ -19,13 +19,7 @@ const MPNeuron = (props: { labelColor: string }) => { { val: 1, weight: 1 }] ); const [func, setFunc] = useState(() => ((n: number) => 0)); - // need to recalc output when inputs change! - const flipInput = (idx: number) => { - const newVal = inputs[idx].val === 1 ? 0 : 1; - const newInputs = [...inputs]; - newInputs[idx].val = newVal; - setInputs(newInputs); - } + const changeWeight = (e: React.ChangeEvent, idx: number) => { const val = parseFloat(e.target.value); const newInputs = [...inputs]; @@ -37,6 +31,19 @@ const MPNeuron = (props: { labelColor: string }) => { setInputs(newInputs); } } + + const changeVal = (e: React.ChangeEvent, idx: number) => { + const val = parseFloat(e.target.value); + const newInputs = [...inputs]; + if (!isNaN(val)) { + newInputs[idx].val = val; + setInputs(newInputs); + } else if (e.target.value === '') { + newInputs[idx].val = null; + setInputs(newInputs); + } + } + const onFuncChange = (func: (n: number) => number) => { setFunc(() => ((n: number) => func(n))); } @@ -57,22 +64,16 @@ const MPNeuron = (props: { labelColor: string }) => { const output = func(inputSum); const makeInput = (inpt: NeuronInput, idx: number) => { - const isOne = inpt.val === 1; return (
-
flipInput(idx)} - > - {inpt.val} +
+ changeVal(e, idx)} + />
-
+
Date: Sun, 7 Mar 2021 11:21:35 -0800 Subject: [PATCH 4/4] Add back bias term --- src/modules/perceptrons/mpNeuron/MPNeuron.tsx | 25 +++++++++++-------- .../perceptrons/rosenblatt/constants.ts | 2 +- 2 files changed, 15 insertions(+), 12 deletions(-) diff --git a/src/modules/perceptrons/mpNeuron/MPNeuron.tsx b/src/modules/perceptrons/mpNeuron/MPNeuron.tsx index 0091e67..8234881 100644 --- a/src/modules/perceptrons/mpNeuron/MPNeuron.tsx +++ b/src/modules/perceptrons/mpNeuron/MPNeuron.tsx @@ -1,19 +1,13 @@ import React, { useEffect, useState } from 'react'; import { AddCircle, RemoveCircle } from '@material-ui/icons'; -import { RblattConfig, INIT_CONFIG } from '../rosenblatt/constants'; - +import { INIT_CONFIG } from '../rosenblatt/constants'; export type NeuronInput = { val: number | null, weight: number | null } -// todo: pass in color for things that might not go well against bg -// what labels should i do for each bubble? -// how to make function piece obviously interactable -// this can take a number => number func, use its tostring to render const MPNeuron = (props: { labelColor: string }) => { - // react draggable? const [inputs, setInputs] = useState( [{ val: 1, weight: -.5 }, { val: 1, weight: 1 }] @@ -90,9 +84,18 @@ const MPNeuron = (props: { labelColor: string }) => {
{inputs.map((val, idx) => makeInput(val, idx))} +
+

bias

+
+ {INIT_CONFIG.bias.toFixed(1)} +
+
- -
{inputSum}
@@ -156,7 +159,7 @@ const ThresholdFunc = (props: { onFuncChange: ((func: (n: number) => number) => }, [isGreater, threshold]) return ( -
setIsGreater(!isGreater)} @@ -179,4 +182,4 @@ const ThresholdFunc = (props: { onFuncChange: ((func: (n: number) => number) => const INPT_CLR = '#b92079'; const OUTPT_CLR = '#0FD4C0'; -export default MPNeuron; \ No newline at end of file +export default MPNeuron; diff --git a/src/modules/perceptrons/rosenblatt/constants.ts b/src/modules/perceptrons/rosenblatt/constants.ts index 8af960e..b28b51d 100644 --- a/src/modules/perceptrons/rosenblatt/constants.ts +++ b/src/modules/perceptrons/rosenblatt/constants.ts @@ -1,5 +1,5 @@ -const INIT_CONFIG = { weightX: .7, weightY: -1, bias: 0 , learningRate: .1 }; +const INIT_CONFIG = { weightX: .7, weightY: -1, bias: 10, learningRate: .1 }; const INIT_INPUTS: RblattInput[] = [ { x: 2.101231155778894, y: 4.947319932998326, z: 0 }, { x: 8.27, y: -3.94, z: 0 },