Skip to content

Commit 9d9ae94

Browse files
ProcStackProcStack
committed
Added some more ESN visuals to AboutMe
Switched over the GIFs to "click to load" I still don't know why I'm calling it 'lazy loading', cause its not.
1 parent 1f39d29 commit 9d9ae94

File tree

6 files changed

+94
-32
lines changed

6 files changed

+94
-32
lines changed

‎Public/index.htm

Lines changed: 41 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -365,12 +365,12 @@
365365
<br><br>Outside of that, I'm on'n'off working on <span class="textNudge">Graph Attention Network</span> artificial intelligence.
366366
<div class='gitPageAboutMeSpacer'></div>
367367
I've been working on a general-purpose neuron that adjusts its own connections during prediction.
368-
<br>I call it a "model-less" ai network, even though the model is just dynamically generated based on input data.
368+
<br>&nbsp;&nbsp; I call it a "model-less" ai network, even though the model is just dynamically generated based on input data.
369369
<br>It's the Structure which derives regions of neural activation based on stimuli, like the Butterfly Effect echoing through nature.
370-
<br>Forming a result <span class="textDrinkMeAlice">(prediction)</span> after subsiquent activations, as-though compounding ripples in a pond.
370+
<br>&nbsp;&nbsp; Forming a result <span class="textDrinkMeAlice">(prediction)</span> after subsiquent activations, as-though compounding ripples in a pond.
371371

372372
<br><br>Rather than a grid of numbers aligning to yield a prediction, it's a data structure which outputs a value due to the neuron connections.
373-
<br>Realistically, the output should be similar to a RNN, but with a different mental structure.
373+
<br>&nbsp;&nbsp; Realistically, the output should be similar to a RNN, but with a different mental structure.
374374

375375
<br><br>
376376
<div class='gitPageAboutMeInfoStyle'>
@@ -379,16 +379,44 @@
379379
<br>But could be used for so much more!
380380
</div>
381381

382-
<br><span class="innerCenter">So all this new AI stuff has been quite serendipitous for me!</span>
383-
<img src='https://www.pxlmancer.com/show/esnLearning.gif' class='gitPageImageStyle' alt='Frank the Fish on his Pinky Flamingotube!' >
384-
<span class="imageDesc innerCenter">Not a graph network, but an ESN (a RNN variant) I wrote to detect & predict motion.
385-
<br>Upper left are some videos I made, upper right are it's 'levels' of learning R-G-B,
386-
<br>The bottom two are slices of what the brain is seeing, and then predicting.</span>
387-
388-
<br><br>There has been some advancements in Graph Neural Networks (GNNs), but not quite what I'm looking for in how the neurons are structured, or that I've seen yet.
389-
<br>Intrinsic learning dang it! That meta-learning to help with the learning of the learning!
382+
<br><span class="innerCenter">So, all this new AI stuff has been quite serendipitous for me!</span>
383+
390384

391-
<br><br>Eh, I'm rambling now...
385+
<br><br><span class="innerCenter">How about an ESN AI I wrote in the summer of 2024?
386+
<br>An ESN or Echo State Network is a type of Recurrent Neural Network (RNN) which considers time in it's prediction.
387+
<br>It thinks about past events to predict future events.
388+
<div class='gitPageAboutMeSpacer'></div>
389+
Since the brain learns on the fly, why not feed it some videos I made?
390+
</span>
391+
<div ll-src='https://pxlmancer.com/show/esnLearning.gif' ll-thumb='https://pxlmancer.com/show/esnLearning_th.png' ll-width='320' ll-height='320' class='lazyLoad gitPageImageStyle' alt='ESN Horizontal-Vertical Slice'></div>
392+
<span class="innerCenter">Upper left are some videos I made, upper right are it's 'levels' of learning R-G-B,
393+
<br>Where red are known patterns, green are the edges of the patterns, and blue are the "less likely" patterns.
394+
<div class='gitPageAboutMeSpacer'></div>
395+
Then on the bottom are two slices of the patterns the brain thinks its seeing and then predicting.</span>
396+
397+
<br><br>
398+
<div ll-src='https://pxlmancer.com/show/learningGradients_84_opt.gif' ll-thumb='https://pxlmancer.com/show/learningGradients_84_th.jpg' ll-width='320' ll-height='320' class='lazyLoad gitPageImageStyle' alt='ESN Brain Wrinkling'></div>
399+
<span class="innerCenter">A different slice & settings for the same ESN I wrote.
400+
<div class='gitPageAboutMeSpacer'></div>
401+
Upper left is another video I made the AI is watching, upper right is the brain's prediction,
402+
<br>Lower left is a slice of the brain's learned wrinkles, lower right the brain's prediction.
403+
404+
<br><br>With a "reservoir" of 15 times steps, you'll notice about every 15 frames the brain shifts.
405+
<br>By frame ~45, it's learned some patterns
406+
<br>The brain seems to then melt and rebuild itself to be predicting by frame ~70.
407+
408+
<br><br>It should be happenstance that the brain shifts when the reservoir fills,
409+
<br>Could mean I'm not correctly accounting for high p-values, outliers;
410+
<br>But it's detecting patterns in motion!</span>
411+
</span>
412+
413+
<br><img src='https://www.pxlmancer.com/show/learningGradients_84_brainSlice.png' class='gitPageImageStyle' alt='Custom ESN Learning Gradients' >
414+
<span class="innerCenter">A slice of the ESN's brain by frame 101 of watching the X pattern video.</span>
415+
416+
<br><br>If you couldn't tell by now, I'm training my AIs on my own creations.
417+
<br>A personally made AI trained on personally made images / videos / photos / code / writing training data.
418+
<br>&nbsp;&nbsp; That means I can copyright my generations, right?
419+
<br>&nbsp;&nbsp;&nbsp;&nbsp; If I made every aspect of the AI and training data?
392420
<br><br>
393421
</div>
394422
<div class="gitPageInnerAfter"></div>
@@ -412,7 +440,7 @@
412440

413441
<canvas id="pxlNav-coreCanvas" height='1' width='1' class="pxlNavCoreCanvasStyle" ></canvas>
414442

415-
<script type="module" src="js/ProckStackGitio.js?v=2024-12-28"></script>
443+
<script type="module" src="js/ProckStackGitio.js?v=2024-12-30"></script>
416444

417445

418446
</body>

‎Public/js/ProcPages.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -268,6 +268,7 @@ export class ProcPages {
268268
let placeholder = document.createElement('div');
269269
placeholder.innerHTML = "&lt; Click to Play &gt;";
270270
placeholder.classList.add('lazyLoadPlaceholder');
271+
placeholder.style.aspectRatio = lazyWidth+"/"+lazyHeight;
271272
lazyClass.forEach( (c)=>{ placeholder.classList.add(c); });
272273
if( lazyThumb ){
273274
placeholder.style.backgroundImage = "url('"+lazyThumb+"')";

‎Public/style/gitPage_mainStyle.css

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -196,9 +196,12 @@ text-shadow: 1px 1.5px 4px #252525;
196196
display: grid;
197197
align-items: center;
198198
justify-items: center;
199-
font-size: 1.35em;
199+
font-size: 1.45em;
200+
font-weight: 600;
201+
color:#ededed;
202+
text-shadow: 4px 4px 4px #252525;
200203
border: 1px solid #88afcc;
201-
background-color: rgba(30, 30, 30, .25);
204+
background-color: rgba(30, 30, 30, .5);
202205
border-radius: 3px;
203206
cursor: pointer;
204207
width: 100%;

‎docs/index.htm

Lines changed: 41 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -40,8 +40,6 @@
4040
<meta name="twitter:domain" content="procstack.github.io">
4141
<meta name="twitter:label1" content="Written by">
4242
<meta name="twitter:data1" content="Kevin Edzenga">
43-
44-
4543
</head>
4644

4745
<!-- -- -- -- -->
@@ -367,12 +365,12 @@
367365
<br><br>Outside of that, I'm on'n'off working on <span class="textNudge">Graph Attention Network</span> artificial intelligence.
368366
<div class='gitPageAboutMeSpacer'></div>
369367
I've been working on a general-purpose neuron that adjusts its own connections during prediction.
370-
<br>I call it a "model-less" ai network, even though the model is just dynamically generated based on input data.
368+
<br>&nbsp;&nbsp; I call it a "model-less" ai network, even though the model is just dynamically generated based on input data.
371369
<br>It's the Structure which derives regions of neural activation based on stimuli, like the Butterfly Effect echoing through nature.
372-
<br>Forming a result <span class="textDrinkMeAlice">(prediction)</span> after subsiquent activations, as-though compounding ripples in a pond.
370+
<br>&nbsp;&nbsp; Forming a result <span class="textDrinkMeAlice">(prediction)</span> after subsiquent activations, as-though compounding ripples in a pond.
373371

374372
<br><br>Rather than a grid of numbers aligning to yield a prediction, it's a data structure which outputs a value due to the neuron connections.
375-
<br>Realistically, the output should be similar to a RNN, but with a different mental structure.
373+
<br>&nbsp;&nbsp; Realistically, the output should be similar to a RNN, but with a different mental structure.
376374

377375
<br><br>
378376
<div class='gitPageAboutMeInfoStyle'>
@@ -381,16 +379,44 @@
381379
<br>But could be used for so much more!
382380
</div>
383381

384-
<br><span class="innerCenter">So all this new AI stuff has been quite serendipitous for me!</span>
385-
<img src='https://www.pxlmancer.com/show/esnLearning.gif' class='gitPageImageStyle' alt='Frank the Fish on his Pinky Flamingotube!' >
386-
<span class="imageDesc innerCenter">Not a graph network, but an ESN (a RNN variant) I wrote to detect & predict motion.
387-
<br>Upper left are some videos I made, upper right are it's 'levels' of learning R-G-B,
388-
<br>The bottom two are slices of what the brain is seeing, and then predicting.</span>
389-
390-
<br><br>There has been some advancements in Graph Neural Networks (GNNs), but not quite what I'm looking for in how the neurons are structured, or that I've seen yet.
391-
<br>Intrinsic learning dang it! That meta-learning to help with the learning of the learning!
382+
<br><span class="innerCenter">So, all this new AI stuff has been quite serendipitous for me!</span>
383+
392384

393-
<br><br>Eh, I'm rambling now...
385+
<br><br><span class="innerCenter">How about an ESN AI I wrote in the summer of 2024?
386+
<br>An ESN or Echo State Network is a type of Recurrent Neural Network (RNN) which considers time in it's prediction.
387+
<br>It thinks about past events to predict future events.
388+
<div class='gitPageAboutMeSpacer'></div>
389+
Since the brain learns on the fly, why not feed it some videos I made?
390+
</span>
391+
<div ll-src='https://pxlmancer.com/show/esnLearning.gif' ll-thumb='https://pxlmancer.com/show/esnLearning_th.png' ll-width='320' ll-height='320' class='lazyLoad gitPageImageStyle' alt='ESN Horizontal-Vertical Slice'></div>
392+
<span class="innerCenter">Upper left are some videos I made, upper right are it's 'levels' of learning R-G-B,
393+
<br>Where red are known patterns, green are the edges of the patterns, and blue are the "less likely" patterns.
394+
<div class='gitPageAboutMeSpacer'></div>
395+
Then on the bottom are two slices of the patterns the brain thinks its seeing and then predicting.</span>
396+
397+
<br><br>
398+
<div ll-src='https://pxlmancer.com/show/learningGradients_84_opt.gif' ll-thumb='https://pxlmancer.com/show/learningGradients_84_th.jpg' ll-width='320' ll-height='320' class='lazyLoad gitPageImageStyle' alt='ESN Brain Wrinkling'></div>
399+
<span class="innerCenter">A different slice & settings for the same ESN I wrote.
400+
<div class='gitPageAboutMeSpacer'></div>
401+
Upper left is another video I made the AI is watching, upper right is the brain's prediction,
402+
<br>Lower left is a slice of the brain's learned wrinkles, lower right the brain's prediction.
403+
404+
<br><br>With a "reservoir" of 15 times steps, you'll notice about every 15 frames the brain shifts.
405+
<br>By frame ~45, it's learned some patterns
406+
<br>The brain seems to then melt and rebuild itself to be predicting by frame ~70.
407+
408+
<br><br>It should be happenstance that the brain shifts when the reservoir fills,
409+
<br>Could mean I'm not correctly accounting for high p-values, outliers;
410+
<br>But it's detecting patterns in motion!</span>
411+
</span>
412+
413+
<br><img src='https://www.pxlmancer.com/show/learningGradients_84_brainSlice.png' class='gitPageImageStyle' alt='Custom ESN Learning Gradients' >
414+
<span class="innerCenter">A slice of the ESN's brain by frame 101 of watching the X pattern video.</span>
415+
416+
<br><br>If you couldn't tell by now, I'm training my AIs on my own creations.
417+
<br>A personally made AI trained on personally made images / videos / photos / code / writing training data.
418+
<br>&nbsp;&nbsp; That means I can copyright my generations, right?
419+
<br>&nbsp;&nbsp;&nbsp;&nbsp; If I made every aspect of the AI and training data?
394420
<br><br>
395421
</div>
396422
<div class="gitPageInnerAfter"></div>
@@ -414,7 +440,7 @@
414440

415441
<canvas id="pxlNav-coreCanvas" height='1' width='1' class="pxlNavCoreCanvasStyle" ></canvas>
416442

417-
<script type="module" src="js/ProckStackGitio.js?v=2024-12-28"></script>
443+
<script type="module" src="js/ProckStackGitio.js?v=2024-12-30"></script>
418444

419445

420446
</body>

‎docs/js/ProcPages.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -268,6 +268,7 @@ export class ProcPages {
268268
let placeholder = document.createElement('div');
269269
placeholder.innerHTML = "&lt; Click to Play &gt;";
270270
placeholder.classList.add('lazyLoadPlaceholder');
271+
placeholder.style.aspectRatio = lazyWidth+"/"+lazyHeight;
271272
lazyClass.forEach( (c)=>{ placeholder.classList.add(c); });
272273
if( lazyThumb ){
273274
placeholder.style.backgroundImage = "url('"+lazyThumb+"')";

‎docs/style/gitPage_mainStyle.css

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -196,9 +196,12 @@ text-shadow: 1px 1.5px 4px #252525;
196196
display: grid;
197197
align-items: center;
198198
justify-items: center;
199-
font-size: 1.35em;
199+
font-size: 1.45em;
200+
font-weight: 600;
201+
color:#ededed;
202+
text-shadow: 4px 4px 4px #252525;
200203
border: 1px solid #88afcc;
201-
background-color: rgba(30, 30, 30, .25);
204+
background-color: rgba(30, 30, 30, .5);
202205
border-radius: 3px;
203206
cursor: pointer;
204207
width: 100%;

0 commit comments

Comments
 (0)