From f04d9f1773b6a0e109867bc6a5546a716565b1a7 Mon Sep 17 00:00:00 2001
From: schneefux <schneefux+commit@schneefux.xyz>
Date: Sat, 9 Apr 2016 17:27:37 +0200
Subject: training

---
 index.html | 173 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 170 insertions(+), 3 deletions(-)

(limited to 'index.html')

diff --git a/index.html b/index.html
index 82c4966..9f29c09 100644
--- a/index.html
+++ b/index.html
@@ -13,6 +13,7 @@
     <script src="dep/material.min.js" type="text/javascript"></script>
     <script src="dep/emojione.min.js" type="text/javascript"></script>
     <script src="dep/impress.js" type="text/javascript"></script>
+    <script src="dep/mathjax/MathJax.js?config=TeX-MML-AM_SVG&locale=de" type="text/javascript"></script>
 
     <script src="code/weightvis.js" type="text/javascript"></script>
     <script src="code/weightviswrapper.js" type="text/javascript"></script>
@@ -28,6 +29,12 @@
         document.addEventListener("DOMContentLoaded", function() {
             impress().init();
 
+            MathJax.Hub.Config({
+                SVG: {
+                    scale: 150
+                }
+            });
+
             emojione.imageType = 'svg';
             emojione.sprites = true;
             emojione.imagePathSVGSprites = 'dep/emojione.sprites.svg';
@@ -63,7 +70,7 @@
                 .style("font-size", function() {
                     var lines = d3.select(this).selectAll("p")[0].length+1; // TODO a bit specific, may not work in all cases
                     if (lines<=1) return this.clientWidth/10 + "px";
-                    return this.clientHeight/10 + "px";
+                    return this.clientHeight/(lines*1.3) + "px"; // TODO magic numbers
                 });
             var scalePicture = function(d, i, me, extraRatio) {
                 // "extraRatio" might scale vertically
@@ -163,12 +170,15 @@
         <div class="step slide" data-x="2000" data-y="6000" data-z="2500">
             <h1>Künstliche neuronale Netze</h1>
             <div class="innerStep stepped lastInnerstep center">
-                <h3>Neuron - künstliches Neuron</h3>
+                <h3>Neuron &ndash; künstliches Neuron</h3>
                 <img class="scalepic-half" src="img/neuron.svg" alt="Schema Neuron" />
                 <img class="scalepic-half" src="img/kuenstliches_neuron.svg" alt="Schema eines künstlichen Neurons" />
+                <p>$$net = \sum_n (x_n \cdot w_n)$$</p>
+                <p>$$o = \frac{1}{1 + e^{-net}}$$</p>
+                <p>$$\Leftrightarrow o = \frac{1}{1 + e^{-\sum_n (x_n \cdot w_n)}}$$</p>
             </div>
             <div class="innerStep center">
-                <h3>Neuronales Netz - künstliches neuronales Netz</h3>
+                <h3>Neuronales Netz &ndash; künstliches neuronales Netz</h3>
                 <img class="scalepic-half" src="img/neuronales-netz.jpg" alt="Foto Neuron" />
                 <img class="scalepic-half" src="img/kuenstliches_neuronales_netz.png" alt="Mehrschichtiges Perzeptron" />
             </div>
@@ -208,11 +218,167 @@
             </script>
         </div>
 
+        <div class="step slide" data-x="6000" data-y="0" data-z="5000">
+            <h1>Ein künstliches neuronales Netz</h1>
+            <h3>Und jetzt?</h3>
+            <div class="innerStep scale center emoji">
+                <p style="font-size: inherit">13 gegebene Attribute :house_with_garden:</p>
+                <p style="font-size: inherit; font-style: italic;">crim, zn, indus, chas, nox, rm, age, dis, rad, tax, ptratio, b, lstat</p>
+                <p style="font-size: inherit;">1 gesuchtes Attribut :moneybag:</p>
+                <p style="font-size: inherit; font-style: italic;">medv</p>
+            </div>
+            <div class="innerStep emoji scale center">
+                <p style="font-size: inherit;">Eingabe (13 :game_die:)</p>
+                <p style="font-size: inherit;">&darr;</p>
+                <p style="font-size: inherit;">künstliches neuronales Netz (:sparkles:)</p>
+                <p style="font-size: inherit;">&darr;</p>
+                <p style="font-size: inherit;">Ausgabe (1 :moneybag:)</p>
+            </div>
+        </div>
+
+        <div class="step slide" data-x="6000" data-y="2000" data-z="2500">
+            <h3>Die Netzstruktur</h3>
+            <div class="visContainer"></div>
+            
+            <script type="text/javascript">
+                (function() {
+                    var mocker = new WeightVisWrapper();
+                    new VisIntegrater(function(c) {
+                        mocker.mock([13, 1], function() {
+                            mocker.openIn(c, false);
+                        });
+                    }, function(c) {
+                        mocker.remove(c);
+                    }, ".visContainer");
+                })();
+            </script>
+        </div>
+        <div class="step slide" data-x="6000" data-y="4000" data-z="2500">
+            <h3>Nö. Anders.</h3>
+            <div class="visContainer"></div>
+            
+            <script type="text/javascript">
+                (function() {
+                    var mocker = new WeightVisWrapper();
+                    new VisIntegrater(function(c) {
+                        mocker.mock([13, 11, 1], function() {
+                            mocker.openIn(c, false);
+                        });
+                    }, function(c) {
+                        mocker.remove(c);
+                    }, ".visContainer");
+                })();
+            </script>
+        </div>
+
+        <div class="step slide" data-x="6500" data-y="4000" data-z="2000" data-rotate-y="90">
+            <h3>Problem!</h3>
+            <div class="scale center">
+                <p style="font-size: inherit;">1.13081, <span class="highlight">0</span>, 8.14, <span class="highlight">0</span>, <span class="highlight">0.538</span>, 5.713, 94.1, 4.233, 4, 307, 21, <span class="highlight">360.17</span>, 22.6</p>
+                <p>$$o = \frac{1}{1 + e^{-\sum_n (\mathbf{x_n \cdot w_n})}}$$</p>
+                <p>\begin{align}
+                    &(1)\quad 0 \cdot w_n = 0 \\
+                    &(2)\quad 0.538 \ll 360.17 
+                \end{align}</p>
+                <p class="innerStep">$$(1)\quad net = (x_n + 1 \cdot b_n) \cdot w_n$$</p>
+                <p class="innerStep">$$(2)\quad x' = \frac{x - \min(x)}{\max(x) - \min(x)}$$
+                $$\implies 0 \leq x' \leq 1$$</p>
+            </div>
+        </div>
+
+        <div class="step slide" data-x="6000" data-y="6000" data-z="2500">
+            <h3>(Eine geht noch.)</h3>
+            <p style="text-align: center; margin-top: 1.5em;">
+                Berechneter MEDV-Wert: <span class="calculated">lade…</span> - Erwarteter MEDV-Wert: <span class="expected">lade…</span>
+                <button class="mdl-button mdl-js-button btn-calc"><i class="material-icons">redo</i></button>
+            </p>
+            <div class="visContainer"></div>
+            
+            <script type="text/javascript">
+                (function() {
+                    var mocker = new WeightVisWrapper();
+                    new VisIntegrater(function(c) {
+                        weightsWrapper.afterLoad(function() {
+                            weightsWrapper.openIn(c, true);
+                            weightsWrapper.jumpTo(0);
+                            function calc() {
+                                var row = Math.floor(Math.random()*bostonset.length()),
+                                    inputs = bostonset.inputs(row),
+                                    calculated = bostonset.asOutput(weightsWrapper.calculate(inputs, 0)[0]),
+                                    expected = bostonset.expectedOutput(row);
+                                    d3.select(c).select(".calculated").text(calculated.toString());
+                                    d3.select(c).select(".expected").text(expected.toString());
+                            }
+                            calc();
+                            d3.select(c).select(".btn-calc").on("click", calc);
+                        });
+                    }, function(c) {
+                        weightsWrapper.remove(c);
+                    }, ".visContainer");
+                })();
+            </script>
+        </div>
+
+        <div class="step slide" data-x="8000" data-y="0" data-z="5000">
+            <h3 class="emoji">Training :cookie:</h3>
+            <p class="center">$$\delta w_{k,j} = l \cdot (t_k - o_k) \sum_l {w_{l, k} \cdot \delta_l} \cdot x_j$$</p>
+            <div class="center scale emoji">
+                <p style="font-size: inherit;">:computer: :hammer:</p>
+                <p style="font-size: inherit;" class="emoji innerStep">
+                   $$430 \cdot 300 = 129 000$$
+                    :hammer::hammer::hammer::hammer::hammer::hammer::hammer::hammer::hammer::hammer::hammer::hammer::hammer::hammer::hammer::hammer::hammer::hammer::hammer::hammer::hammer::hammer::hammer::hammer::hammer::hammer::hammer::hammer::hammer::hammer::hammer::hammer::hammer::hammer::hammer::hammer::hammer::hammer::hammer::hammer::hammer::hammer:</p>
+            </div>
+        </div>
+
+        <div class="step slide" data-x="8000" data-y="2000" data-z="2500">
+            <h3>Trainingsverlauf</h3>
+            <div class="visContainer"></div>
+
+            <script type="text/javascript">
+                (function() {
+                    new VisIntegrater(function(c) {
+                        weightsWrapper.afterLoad(function() {
+                            weightsWrapper.openIn(c, true);
+                            setTimeout(function(){ weightsWrapper.animate(10, 10); }, 1000);
+                        });
+                    }, function(c) {
+                        weightsWrapper.remove(c);
+                    }, ".visContainer");
+                })();
+            </script>
+        </div>
+
+        <div class="step slide" data-x="8000" data-y="4000" data-z="2500">
+            <h3>Fehlerverlauf</h3>
+            <div class="errorContainer"></div>
+
+            <script type="text/javascript">
+                (function() {
+                    new VisIntegrater(function(c) {
+                        errorVis.afterLoad(function() {
+                            errorVis.openIn(c, true);
+                        });
+                    }, function(c) {
+                        errorVis.remove(c);
+                    }, ".errorContainer");
+                })();
+            </script>
+        </div>
+
+        <div class="step slide" data-x="10000" data-y="0" data-z="5000">
+            <h3 class="emoji">Test :open_mouth:</h3>
+        </div>
+
+        <div class="step slide" data-x="0" data-y="0" data-z="0" data-rotate-x="90">
+            <h1 class="emoji">:blush:</h1>
+        </div>
+
         <div id="overview" class="step" data-x="2000" data-y="3000" data-scale="20">
             <!-- overview -->
         </div>
 
         <!-- v - alter Code unten - v -->
+        <!--
         <div class="step slide" data-x="9500" data-y="0" data-z="1000">
             <div>
                 <h3>Ein leeres Netz</h3>
@@ -310,6 +476,7 @@
         <div class="step slide" data-x="0" data-y="0" data-z="0" data-rotate-x="90">
             <h1 class="emoji">:blush:</h1>
         </div>
+        -->
     </div>
 </body>
 </html>
-- 
cgit v1.3.1