ML4K hinzugefügt und überarbeitet

https://machinelearningforkids.co.uk/
https://plyr.io/
und figcaption für Video- und Bildbeschriftungen

README.md

@@ -4,7 +4,7 @@ In diesem Repository findest du ausgewählte Bereiche der Informatik in Schulbuc
 
 Hast du einen Fehler gefunden oder möchtest eine Verbesserung einpflegen freue ich mich auf einen Pull Request, einen Eintrag unter Issue oder eine klassische [Mail](https://wi-wissen.de/contact.php).
 
-Meine Programm für den Unterricht findest du hier: http://apps.informatik.cc/
+Meine Programme für den Unterricht findest du hier: http://apps.informatik.cc/
 
 Bist du SchülerIn findest du alle Arbeitsblätter hier: https://schule.informatik.cc/
 

ki/_sidebar.md

@@ -6,10 +6,15 @@
     * [Daten für KNN vorbereiten](datenaufbereiten.md)
     * [Ein KNN entscheidet](entscheidung.md)
     * [Ein KNN lernt](lernen.md)
+  * [Wohnungen klassifizieren](r2d3.md)
   * Beispiele
     * [Gesichtererkennung](gesichtererkennung.md)
+    * [Objekte erkennen](ml4k-objektkennung.md)
+    * [Welche Affen beißen?](ml4k-affen.md)
+    * [Zombie Escape!](ml4k-zombies.md)
     * [Grundlagen in JavaScript umgesetzt](tensorflowjs.md)
     * [ml5.js](ml5js.md)
 * [Unsupervised Learning](unsupervised.md)
 * [Reinforcement Learning](reinforcement.md)
+* [Gesellschaftliche Perspektive](gesellschaft.md)
 * [Autoren](autoren.md)

ki/css/custom.css

@@ -10,4 +10,23 @@
 
 .markdown-section tr:nth-child(2n) {
     background-color: #ffffff;
+}
+
+figcaption{
+	text-align: center;
+	margin-top: 0.2em;
+	margin-bottom: 1.2em;
+	font-size: 0.9em !important;
+}
+
+.plyr {
+	margin-top: 1.2em;
+}
+
+p > img {
+  margin-bottom: -1.0em !important;
+}
+
+p:has(img) {
+	margin-bottom: 0.2em;
 }

ki/entscheidung.md

@@ -10,7 +10,7 @@ in eine Zahlenfolge umgewandelt:
 
 Neben der Zahlenfolge ist die Konstante `-1`, welche für die BIAS-Berechnung benötigt wird. Der BIAS wird auch Schwellenwert genannt. 
 
-t> Arbeite die Schritte am besten gleich weiter mit. Dazu benötigst dazu das im letzten Schritt bereits ausgefüllte [Tabellenkalkulationsdokument](/knn/assets/convolutional_network.xlsx ':ignore') und kannst dann alle Schritte mitrechnen.
+t> Arbeite die Schritte am besten gleich weiter mit. Dazu benötigst dazu das im letzten Schritt bereits ausgefüllte [Tabellenkalkulationsdokument](/ki/assets/convolutional_network.xlsx ':ignore') und kannst dann alle Schritte mitrechnen.
 
 ## Fully Connected Layer
 

ki/gesellschaft.md

@@ -0,0 +1,38 @@
+# Gesellschaftliche Perspektive
+
+1. Spiele das [Entscheidungspiel Moral Machine](http://moralmachine.mit.edu/hl/de).
+2. [Hör](https://www.amazon.de/QualityLand-CDs-dunkle-Marc-Uwe-Kling/dp/3957130948) oder [lies](https://www.amazon.de/QualityLand-Roman-helle-Marc-Uwe-Kling/dp/3550050232/) dir das Buch Qualityland von Marc Uwe Kling an.
+
+Tipp: Ein wichtiges Kapitel wird im folgenden Video sieben Minuten lang vorgelesen:
+
+<div class="plyr__video-embed" id="player">
+<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/h5MJn_Yy7aA?origin=https://buch.informatik.cc&amp;iv_load_policy=3&amp;modestbranding=1&amp;playsinline=1&amp;showinfo=0&amp;rel=0&amp;enablejsapi=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+</div>
+
+<figcaption>Video bei <a href="https://youtu.be/h5MJn_Yy7aA">YouTube</a> ansehen </figcaption>
+
+## Filme
+Was, wenn künstliche Intelligenzen in Robotern stecken die intelligenter und stärker als wir selbst sind? Isaac Asimov hat dafür bereits 1942 drei Gesetze erschaffen, die die Menschheit schützen sollen: 
+1. Ein Roboter darf kein menschliches Wesen (wissentlich) verletzen oder durch Untätigkeit (wissentlich) zulassen, dass einem menschlichen Wesen Schaden zugefügt wird.
+2. Ein Roboter muss den ihm von einem Menschen gegebenen Befehlen gehorchen – es sei denn, ein solcher Befehl würde mit Regel eins kollidieren.
+3. Ein Roboter muss seine Existenz beschützen, solange dieser Schutz nicht mit Regel eins oder zwei kollidiert.
+
+Klingt gut, doch wie gut sind diese Gesetze wirklich? Sieh es dir in den Filmempfehlungen an.
+
+### I Am Mother
+<div class="plyr__video-embed" id="player">
+<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/r36gZQbOvaY?origin=https://buch.informatik.cc&amp;iv_load_policy=3&amp;modestbranding=1&amp;playsinline=1&amp;showinfo=0&amp;rel=0&amp;enablejsapi=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+</div>
+
+<figcaption>Video bei <a href="https://youtu.be/r36gZQbOvaY">YouTube</a> ansehen </figcaption>
+
+Video in deiner <a href="https://www.werstreamt.es/film/details/1728750/i-am-mother/">Flatrate</a> finden.
+
+### I, Robot
+<div class="plyr__video-embed" id="player">
+<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/7Dlo-VB0-HI?origin=https://buch.informatik.cc&amp;iv_load_policy=3&amp;modestbranding=1&amp;playsinline=1&amp;showinfo=0&amp;rel=0&amp;enablejsapi=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+</div>
+
+<figcaption>Video bei <a href="https://youtu.be/7Dlo-VB0-HI">YouTube</a> ansehen </figcaption>
+
+Video in deiner <a href="https://www.werstreamt.es/film/details/4730/i-robot/">Flatrate</a> finden.

ki/gesichtererkennung.md

@@ -1,6 +1,6 @@
 # Gesichtererkennung
 
-Wir können uns hier ein Beispiel ansehen, wie Gesichter erkannt werden. Die Beispiele kannst du dank der [face-api.js](https://github.com/justadudewhohacks/face-api.js) von [justadudewhohacks](https://github.com/justadudewhohacks) [**hier**](https://justadudewhohacks.github.io/face-api.js/face_and_landmark_detection) ausprobieren. (Beachte, dass dafür wirklich viele Daten runtergeladen werden müssen.)
+i>Die folgenden Beispiele kannst du dank der [face-api.js](https://github.com/justadudewhohacks/face-api.js) von [justadudewhohacks](https://github.com/justadudewhohacks) [**hier**](https://justadudewhohacks.github.io/face-api.js/face_and_landmark_detection) ausprobieren. (Beachte, dass dafür wirklich viele Daten runtergeladen werden müssen.)
 
 ![bbt-0](img/bbt-0.jpeg)
 
@@ -34,6 +34,24 @@ w> Alle Bilder sind Eigentum der jeweiligen Urheber. [Der vollständige Artikel]
 
 
 
+## Eine virtuelle Clownsnase aufsetzen.
+
+Hast du schonmal in die Wolken gesehen oder die Raufasertapete interessiert gemustert und plötzlich ein Gesicht gesehen? Das ist ganz normal. Für Menschen ist es sehr wichtig Gesichter zu sehen, daher kann das schonmal sein, dass wir da ein wenig über das Ziel hinaus schießen. Folglich hat man das auch sehr schnell den Rechnern beigebracht.
+
+Hier werden wir uns eine virtuelle Clownsnase aufsetzen:
+
+<div class="plyr__video-embed" id="player">
+<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/mN__yB4-P-4?origin=https://buch.informatik.cc&amp;iv_load_policy=3&amp;modestbranding=1&amp;playsinline=1&amp;showinfo=0&amp;rel=0&amp;enablejsapi=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+</div>
+
+<figcaption>Video bei <a href="https://youtu.be/mN__yB4-P-4">YouTube</a> ansehen </figcaption>
+
+Hinweis: Dein Kamerabild wird auf deinem Rechner verarbeitet, du musst dir also keine Sorgen machen, dass es im Internet landet. Du kannst das Internet in der Zeit auch von dir trennen.
+
+t> Expertenaufgabe: Schaffst du es anstelle des Kreises einen Smilie passend über dein Gesicht zu legen.
+
+Du fragst dich wie viele Gesichter sich eine künstliche Intelligenz ansehen musste, um diese sicher zu erkennen? Nunja mehr ist besser, aber hier waren es über 32.000 Photos mit darauf 390.000 Gesichtern.
+
 ## lokal Ausprobieren
 
 i> Hier ist eine [Online-Demonstration](https://justadudewhohacks.github.io/face-api.js/face_and_landmark_detection).

ki/index.html

@@ -16,6 +16,7 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
   <meta name="description" content="Description">
   <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+  <link rel="stylesheet" href="css/plyr.css" />
   <link rel="stylesheet" href="css/vue.css">
   <link rel="stylesheet" href="css/vue-boxes.css">
   <link rel="stylesheet" href="css/custom.css">
@@ -24,9 +25,12 @@
 
 <body>
   <div id="app"></div>
+
+  <script src="js/plyr.js"></script>
+
   <script>
     window.$docsify = {
-      name: 'Künstliche neuronale Netze',
+      name: 'Künstliche Intelligenz',
       homepage: 'index.md',
       auto2top: true,
       loadSidebar: true,
@@ -83,14 +87,36 @@
             return "<p style='text-align:right;'>{docsify-updated}<p>\n\n" + html
               + '\n\n----\n'
               + editHtml
-          })
+          });
+
+		  hook.doneEach(function() {
+			const players = Plyr.setup('.plyr__video-embed');
+		  });
         }
       ],
-    }
+    };
   </script>
   <script src="js/docsify.min.js"></script>
   <script src="js/search.min.js"></script>
   <script src="js/prism.js"></script>
+
+	<!-- Matomo -->
+	<script type="text/javascript">
+	  var _paq = _paq || [];
+	  /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
+	  _paq.push(['trackPageView']);
+	  _paq.push(['enableLinkTracking']);
+	  (function() {
+		var u="//piwik.wi-wissen.de/";
+		_paq.push(['setTrackerUrl', u+'piwik.php']);
+		_paq.push(['setSiteId', '4']);
+		var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
+		g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
+	  })();
+	</script>
+	<noscript><p><img src="//piwik.wi-wissen.de/piwik.php?idsite=4&amp;rec=1" style="border:0;" alt="" /></p></noscript>
+	<!-- End Matomo Code -->
+
 </body>
 
 </html>

ki/index.md

@@ -4,11 +4,19 @@ Das Wort künstliche Intelligenz ist in aller Munde. Was damit gemeint ist, ist
 
 t> Schau dir das Video an, wenn du jünger als 14 Jahre bist:
 
-<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/unAdsyOZB9c" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+<div class="plyr__video-embed" id="player">
+<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/unAdsyOZB9c?origin=https://buch.informatik.cc&amp;iv_load_policy=3&amp;modestbranding=1&amp;playsinline=1&amp;showinfo=0&amp;rel=0&amp;enablejsapi=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+</div>
 
-t> Schau dir das Video an, wenn du mindestens 14 Jahre bist:
+<figcaption>Video bei <a href="https://youtu.be/unAdsyOZB9c">YouTube</a> ansehen </figcaption>
 
-<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/3RsmRMqX2IY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+t> Schau dir das Video an, wenn du schon 14 Jahre oder älter bist:
+
+<div class="plyr__video-embed" id="player">
+<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/3RsmRMqX2IY?origin=https://buch.informatik.cc&amp;iv_load_policy=3&amp;modestbranding=1&amp;playsinline=1&amp;showinfo=0&amp;rel=0&amp;enablejsapi=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+</div>
+
+<figcaption>Video bei <a href="https://youtu.be/3RsmRMqX2IY">YouTube</a> ansehen </figcaption>
 
 ## Ziel dieses Kapitels
 
@@ -38,22 +46,35 @@ Machine Learning gliedert sich in drei große Bereiche:
 
 ![ms-1](img/ms-1.jpg)
 
-(Bild von [Iskender Dirik](https://id.vc/) und [Microsoft](https://news.microsoft.com/de-de/deep-learning-whitepaper/))
+
+<figcaption>
+Bild von [Iskender Dirik](https://id.vc/) und [Microsoft](https://news.microsoft.com/de-de/deep-learning-whitepaper/)
+</figcaption>
 
 Fairerweise muss gesagt werden, dass Unsupervised Learning nicht nur mit Katzen und Hunden funktioniert. So ist es etwa super spannend das Einkaufsverhalten in Online-Shops zu beobachten. Für einen Menschen das pure Chaos, aber für einen Rechner durchaus nachvollziehbar. Klar, dass jemand der Zahnpaste kauft vermutlich auch eine Zahnbürste kauft, aber was kaufen eigentlich Menschen die einen Panda-Blumentopf kaufen?
 
 ![amazon-1](img/amazon-1.png)
 
-(Screenshot von Amazon.de)
+<figcaption>
+Screenshot von amazon.de
+</figcaption>
 
 ## Geschichte der KI
 
-<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/09LotPHTZtU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+<div class="plyr__video-embed" id="player">
+<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/09LotPHTZtU?origin=https://buch.informatik.cc&amp;iv_load_policy=3&amp;modestbranding=1&amp;playsinline=1&amp;showinfo=0&amp;rel=0&amp;enablejsapi=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+</div>
+
+<figcaption>Video bei <a href="https://youtu.be/09LotPHTZtU">YouTube</a> ansehen </figcaption>
 
 ## Wie das Gehirn lernt
 
 i> In diesem Kapitel wird davon ausgegangen, dass bereits grundlegend bekannt ist, wie das Gehirn grundlegend lernt. Die Inhalte sind aber auch ohne dieses Wissen gut verständlich.
 
 Hier ist eine kleine Wiederholung aus dem Biologieunterricht:
 
-<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/EGKTH60rvoU?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
+<div class="plyr__video-embed" id="player">
+<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/EGKTH60rvoU?origin=https://buch.informatik.cc&amp;iv_load_policy=3&amp;modestbranding=1&amp;playsinline=1&amp;showinfo=0&amp;rel=0&amp;enablejsapi=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+</div>
+
+<figcaption>Video bei <a href="https://youtu.be/EGKTH60rvoU">YouTube</a> ansehen </figcaption>