diff options
| -rw-r--r-- | index.html | 380 |
1 files changed, 190 insertions, 190 deletions
@@ -103,14 +103,14 @@ <div id="impress" data-width="800" data-height="600"> <!-- TODO Fortschrittsbalken unten? --> - <div id="title" class="step slide" data-x="0" data-y="0" data-z="5000"> + <div id="title" class="step slide" data-x="0" data-y="0" data-z="1000"> <h1>Künstliche neuronale Netze</h1> <!-- TODO center oder Bild --> <h2>38 Gewichte in 19 Minuten</h2> </div> <!-- TODO Inhaltsübersicht --> - <div id="io" class="step slide" data-x="2000" data-y="0" data-z="5000"> + <div id="io" class="step slide" data-x="1000" data-y="0" data-z="1000"> <h1>Von der Eingabe zur Ausgabe</h1> <div class="innerStep stepped lastInnerstep center"> <h3>Das ist Kitty.</h3> @@ -140,51 +140,51 @@ </div> </div> - <div id="io-human" class="step slide" data-x="2000" data-y="2000" data-z="2500"> - <h1>Die Informationsverarbeitung im Gehirn</h1> - <!-- TODO margins --> - <div class="emoji scale center"> - <p style="font-size: inherit;">Eingabe (:tophat:)</p> - <p style="font-style: italic; font-size: 75%;">Rezeptor</p> - <p style="font-size: inherit;">↓</p> - <p style="font-size: inherit;">Gehirn (:sparkles:)</p> - <p style="font-style: italic; font-size: 75%;">neuronales Netz</p> - <p style="font-size: inherit;">↓</p> - <p style="font-size: inherit;">Ausgabe (:heart_eyes_cat:)</p> - <p style="font-style: italic; font-size: 75%;">Effektor</p> + <div id="io-human" class="step slide" data-x="1000" data-y="1000" data-z="0"> + <h1>Die Informationsverarbeitung im Gehirn</h1> + <!-- TODO margins --> + <div class="emoji scale center"> + <p style="font-size: inherit;">Eingabe (:tophat:)</p> + <p style="font-style: italic; font-size: 75%;">Rezeptor</p> + <p style="font-size: inherit;">↓</p> + <p style="font-size: inherit;">Gehirn (:sparkles:)</p> + <p style="font-style: italic; font-size: 75%;">neuronales Netz</p> + <p style="font-size: inherit;">↓</p> + <p style="font-size: inherit;">Ausgabe (:heart_eyes_cat:)</p> + <p style="font-style: italic; font-size: 75%;">Effektor</p> + </div> </div> - </div> - <div id="neuron" class="step slide" data-x="2000" data-y="4000" data-z="2500"> - <h1>Neuronale Netze</h1> - <div class="innerStep stepped lastInnerstep center"> - <h3>Ein Neuron</h3> - <img class="scalepic" src="img/neuron.svg" alt="Schema Neuron"> + <div id="neuron" class="step slide" data-x="1000" data-y="2000" data-z="0"> + <h1>Neuronale Netze</h1> + <div class="innerStep stepped lastInnerstep center"> + <h3>Ein Neuron</h3> + <img class="scalepic" src="img/neuron.svg" alt="Schema Neuron"> + </div> + <div class="innerStep center"> + <h3>Ein Neuronales Netz</h3> + <img class="scalepic" src="img/neuronales-netz.jpg" alt="Foto Neuron"> + </div> </div> - <div class="innerStep center"> - <h3>Ein Neuronales Netz</h3> - <img class="scalepic" src="img/neuronales-netz.jpg" alt="Foto Neuron"> - </div> - </div> - <div id="neuronalnet" 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> - <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> - <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 id="neuronalnet" class="step slide" data-x="1000" data-y="3000" data-z="0"> + <h1>Künstliche neuronale Netze</h1> + <div class="innerStep stepped lastInnerstep center"> + <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> + <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> </div> - </div> - <div id="boston" class="step slide" data-x="4000" data-y="0" data-z="5000"> + <div id="boston" class="step slide" data-x="2000" data-y="0" data-z="1000"> <h1>Das Problem – Die Boston-Häuserdatenreihe</h1> <div class="center"> <p class="emoji scale">:homes:</p> @@ -218,7 +218,7 @@ </script> </div> - <div id="boston-net" class="step slide" data-x="6000" data-y="0" data-z="5000"> + <div id="boston-net" class="step slide" data-x="3000" data-y="0" data-z="1000"> <h1>Ein künstliches neuronales Netz</h1> <h3>Und jetzt?</h3> <div class="innerStep scale center emoji"> @@ -236,94 +236,94 @@ </div> </div> - <div id="boston-simple" 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 id="boston-hidden" 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 id="boston-simple" class="step slide" data-x="3000" data-y="1000" data-z="0"> + <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 id="boston-hidden" class="step slide" data-x="3000" data-y="2000" data-z="0"> + <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 id="biasissue" 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 id="biasissue" class="step slide" data-x="3500" data-y="2000" data-z="-500" 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> - <div id="boston-bias" class="step slide" data-x="6000" data-y="6000" data-z="2500"> - <h3>(Eine geht noch.)</h3> - <p style="text-align: center; font-size: 175%;"> - 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 inputs, calculated, expected; - do { - var row = Math.floor(Math.random()*bostonset.length()); - inputs = bostonset.inputs(row); - calculated = bostonset.asOutput(weightsWrapper.calculate(inputs, 0)[0]); - expected = bostonset.expectedOutput(row); - console.log("calc", calculated, expected); - } while (Math.abs(calculated - expected) < 15); - 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 id="boston-bias" class="step slide" data-x="3000" data-y="3000" data-z="0"> + <h3>(Eine geht noch.)</h3> + <p style="text-align: center; font-size: 175%;"> + 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 inputs, calculated, expected; + do { + var row = Math.floor(Math.random()*bostonset.length()); + inputs = bostonset.inputs(row); + calculated = bostonset.asOutput(weightsWrapper.calculate(inputs, 0)[0]); + expected = bostonset.expectedOutput(row); + console.log("calc", calculated, expected); + } while (Math.abs(calculated - expected) < 15); + 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 id="training" class="step slide" data-x="8000" data-y="0" data-z="5000"> + <div id="training" class="step slide" data-x="4000" data-y="0" data-z="1000"> <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"> @@ -334,42 +334,42 @@ </div> </div> - <div id="trainhistory" class="step slide" data-x="8000" data-y="2000" data-z="2500"> - <h3>Trainingsverlauf</h3> - <div class="visContainer"></div> + <div id="trainhistory" class="step slide" data-x="4000" data-y="1000" data-z="0"> + <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> + <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 id="errorhistory" class="step slide" data-x="8000" data-y="4000" data-z="2500"> - <h3>Fehlerverlauf</h3> - <div class="errorContainer"></div> + <div id="errorhistory" class="step slide" data-x="4000" data-y="2000" data-z="0"> + <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> + <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 id="test" class="step slide" data-x="10000" data-y="0" data-z="5000"> + <div id="test" class="step slide" data-x="5000" data-y="0" data-z="1000"> <h3 class="emoji">Test :open_mouth:</h3> <div class="visContainer"></div> <p style="text-align: center; font-size: 175%;"> @@ -404,45 +404,45 @@ </script> </div> - <div id="conclusion" class="step slide" data-x="12000" data-y="0" data-z="5000"> - <h3 class="emoji">Fazit :thinking:</h3> - <div class="visContainer"></div> - <script type="text/javascript"> - new VisIntegrater(function(c) { - weightsWrapper.afterLoad(function() { - weightsWrapper.jumpTo(weightsWrapper.steps()-1); - weightsWrapper.openIn(c, false); - function calc() { - var inputs, calculated, expected; - do { - var row = Math.floor(Math.random()*bostonset.length()); - inputs = bostonset.inputs(row); - calculated = bostonset.asOutput(weightsWrapper.calculate(inputs)[0]); - expected = bostonset.expectedOutput(row); - console.log("calc", calculated, expected); - } while (Math.abs(calculated - expected) > 3); - d3.select(c).select(".calculated").text(calculated.toString()); - d3.select(c).select(".expected").text(expected.toString()); - weightsWrapper.activate(inputs); - } - calc(); - d3.select(c).select(".btn-calc").on("click", calc); - }); - }, function(c) { - weightsWrapper.remove(c); - }, ".visContainer"); - </script> - </div> + <div id="conclusion" class="step slide" data-x="6000" data-y="0" data-z="1000"> + <h3 class="emoji">Fazit :thinking:</h3> + <div class="visContainer"></div> + <script type="text/javascript"> + new VisIntegrater(function(c) { + weightsWrapper.afterLoad(function() { + weightsWrapper.jumpTo(weightsWrapper.steps()-1); + weightsWrapper.openIn(c, false); + function calc() { + var inputs, calculated, expected; + do { + var row = Math.floor(Math.random()*bostonset.length()); + inputs = bostonset.inputs(row); + calculated = bostonset.asOutput(weightsWrapper.calculate(inputs)[0]); + expected = bostonset.expectedOutput(row); + console.log("calc", calculated, expected); + } while (Math.abs(calculated - expected) > 3); + d3.select(c).select(".calculated").text(calculated.toString()); + d3.select(c).select(".expected").text(expected.toString()); + weightsWrapper.activate(inputs); + } + calc(); + d3.select(c).select(".btn-calc").on("click", calc); + }); + }, function(c) { + weightsWrapper.remove(c); + }, ".visContainer"); + </script> + </div> - <div id="sources" class="step slide" data-x="14000" data-y="0" data-z="5000"> + <div id="sources" class="step slide" data-x="7000" data-y="0" data-z="1000"> <h3>Quellen, Lizenzen & mehr</h3> </div> - <div id="thanx" class="step slide" data-x="14000" data-y="2000" data-z="5000"> + <div id="thanx" class="step slide" data-x="7000" data-y="1000" data-z="1000"> <h1 class="emoji">:blush:</h1> </div> - <div id="overview" class="step" data-x="7000" data-y="3000" data-scale="24"> + <div id="overview" class="step" data-x="3500" data-y="1500" data-scale="11"> <!-- overview --> </div> </div> |