diff options
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 173 |
1 files changed, 170 insertions, 3 deletions
@@ -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 – 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 – 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;">↓</p> + <p style="font-size: inherit;">künstliches neuronales Netz (:sparkles:)</p> + <p style="font-size: inherit;">↓</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> |