{"id":65912,"date":"2025-07-20T08:49:46","date_gmt":"2025-07-20T06:49:46","guid":{"rendered":"https:\/\/www.herr-rau.de\/wordpress\/?p=65912"},"modified":"2025-07-24T17:39:32","modified_gmt":"2025-07-24T15:39:32","slug":"stilwell-brain-revisited-und-mein-erstes-javascript-programm","status":"publish","type":"post","link":"https:\/\/www.herr-rau.de\/wordpress\/2025\/07\/stilwell-brain-revisited-und-mein-erstes-javascript-programm.htm","title":{"rendered":"Stilwell Brain Revisited, und mein erstes JavaScript-Programm"},"content":{"rendered":"<div style='text-align:right;'><small>(<a href='https:\/\/www.herr-rau.de\/wordpress\/2025\/07\/stilwell-brain-revisited-und-mein-erstes-javascript-programm.htm#comments'>8 Kommentare.<\/a>)<\/small> <\/div>\n<p><em>Das letzte Neuronale Netz f\u00fcr eine Weile, VERSPROCHEN! Wer ihn nicht liest, k\u00f6nnte wenigstens ganz unten meine JavaScript-K\u00fcnste bewundern und will umherklicken.<\/em><\/p>\n\n\n\n<p>Ich habe k\u00fcrzlich (<a href=\"https:\/\/www.herr-rau.de\/wordpress\/2025\/07\/neuronales-netz-in-calcexcel-mit-softmax.htm\">Blogeintrag<\/a>) ein Neuronales Netz in Calc nachgebaut und wollte das mal ganz konkret f\u00fcr eine \u00fcberarbeitete Version des Stilwell Brain (<a href=\"https:\/\/www.herr-rau.de\/wordpress\/2025\/06\/the-stilwell-brain-kleine-analyse.htm\">Blogeintrag<\/a>) einsetzen. Kurzfassung: Letzteres kann gezeichnete Ziffern in einer 5&#215;5-Matrix erkennen, wobei jedes der 25 Felder schwarz oder wei\u00df ist, also ohne Graut\u00f6ne. M\u00f6glicherweise ist es dem menschlichen Sehen nachempfunden, dazu wei\u00df ich zu wenig, tats\u00e4chlich ist es aber ein sehr einfaches Neuronales Netz mit 25 Eingangsneuronen, 10 Ausgangsneuronen, und dazwischen <em>mehreren <\/em>versteckten Schichten. Jeder Knoten ist nur mit wenigen anderen Knoten verbunden, hei\u00dft: als vollst\u00e4ndig verbundenes Netz betrachtet ist die Gewichtung der Kanten meist 0; sonst ist sie immer 1; die Aktivierungsfunktion ist Hard Limit.<\/p>\n\n\n\n<p>Ich habe das Netz etwas vereinfacht, insbesondere auf eine <em>einzige <\/em>versteckte Schicht reduziert, ohne semantisch irgend etwas zu \u00e4ndern. Das habe ich in eine einzelne Tabellenseite gepackt, die sieht so aus (zum Vergr\u00f6\u00dfern anklicken):<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.herr-rau.de\/wordpress\/archiv\/neural_net_stilwell_one_layer_calc2.png\"><img loading=\"lazy\" decoding=\"async\" width=\"3344\" height=\"1065\" src=\"https:\/\/www.herr-rau.de\/wordpress\/archiv\/neural_net_stilwell_one_layer_calc2.png\" alt=\"\" class=\"wp-image-66071\" srcset=\"https:\/\/www.herr-rau.de\/wordpress\/archiv\/neural_net_stilwell_one_layer_calc2.png 3344w, https:\/\/www.herr-rau.de\/wordpress\/archiv\/neural_net_stilwell_one_layer_calc2-300x96.png 300w, https:\/\/www.herr-rau.de\/wordpress\/archiv\/neural_net_stilwell_one_layer_calc2-700x223.png 700w, https:\/\/www.herr-rau.de\/wordpress\/archiv\/neural_net_stilwell_one_layer_calc2-150x48.png 150w, https:\/\/www.herr-rau.de\/wordpress\/archiv\/neural_net_stilwell_one_layer_calc2-1536x489.png 1536w, https:\/\/www.herr-rau.de\/wordpress\/archiv\/neural_net_stilwell_one_layer_calc2-2048x652.png 2048w\" sizes=\"auto, (max-width: 3344px) 100vw, 3344px\" \/><\/a><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Links oben zeichnet man die Ziffer ein, indem man die Zellen mit 1 oder 0 bef\u00fcllt (oder sie leer l\u00e4sst).<\/li>\n\n\n\n<li>Die gelben Zellen sind die daraus entstandenen 25 Eingangsknoten.<\/li>\n\n\n\n<li>Die roten Zellen sind die 57 Knoten in der versteckten Schicht; links deren Bezeichner, gew\u00e4hlte Aktivierungsfunktion, Rechenschritte; rechts jeweils Schwellwert \u03b8 und 25 Gewichtungen. Das \u03b8 entspricht dem h\u00e4ufigeren Bias, nur mit umgekehrtem Vorzeichen; hier entspricht es immer einer logischen UND-Funktion, das hei\u00dft, <em>alle <\/em>beobachteten Neuronen der Input-Schicht m\u00fcssen feuern, damit 1 ausgegeben wird.<\/li>\n\n\n\n<li>Die gr\u00fcnen Zellen sind die 10 Knoten der Output-Schicht, \u00e4hnlich aufgebaut, nur dass der Schwellwert jeweils einer ODER-Funktion entspricht: wenn mindestens <em>ein <\/em>beobachtetes Neuron der roten Schicht feuert, wird 1 ausgegeben.<\/li>\n<\/ul>\n\n\n\n<p>Die roten 57 Knoten der versteckten Schicht, nummeriert von 11 bis 247, beobachten jeweils folgende blau markierte Knoten der Input-Schicht, angeordnet als 5&#215;5-Diagramm, weil man dann sieht, warum sie ausgerechnet diese Knoten beobachten:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.herr-rau.de\/wordpress\/archiv\/neural_net_stilwell_one_layer_visualisiert.png\"><img loading=\"lazy\" decoding=\"async\" width=\"840\" height=\"342\" src=\"https:\/\/www.herr-rau.de\/wordpress\/archiv\/neural_net_stilwell_one_layer_visualisiert.png\" alt=\"\" class=\"wp-image-65927\" srcset=\"https:\/\/www.herr-rau.de\/wordpress\/archiv\/neural_net_stilwell_one_layer_visualisiert.png 840w, https:\/\/www.herr-rau.de\/wordpress\/archiv\/neural_net_stilwell_one_layer_visualisiert-300x122.png 300w, https:\/\/www.herr-rau.de\/wordpress\/archiv\/neural_net_stilwell_one_layer_visualisiert-700x285.png 700w, https:\/\/www.herr-rau.de\/wordpress\/archiv\/neural_net_stilwell_one_layer_visualisiert-150x61.png 150w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><\/a><\/figure>\n\n\n\n<p>Die Zahlen unter den 5&#215;5-Zeichnungen sind die Nummern des jeweiligen Knotens in der versteckten Schicht. Diese Nummern stammen aus der urspr\u00fcnglichen Python-Quelle, wo die Ziffern 1 und 7 anders behandelt werden; deshalb die merkw\u00fcrdige Reihenfolge.<\/p>\n\n\n\n<p>Es fallen vor allem zwei Dinge auf:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Wenn man die in den Knoten 216 bis 217 erkannte 7 um eine Zeile nach unten versetzt zeichnet, wird diese nicht erkannt. Wenn die 0 etwas breiter wird, ditto.<\/li>\n\n\n\n<li>Dem k\u00f6nnte man leicht abhelfen durch die Einf\u00fchrung weiter Knoten; sch\u00f6n w\u00e4re das nicht, weil Neuronale Netze eben nicht dazu da sind, manuell alle m\u00f6glichen L\u00f6sungen einzutragen, sondern im Gegenteil genau dann verwendet werden, wenn man als Mensch die L\u00f6sungen eben nicht so leicht vorhersagen kann.<\/li>\n\n\n\n<li>Die Knoten 171 bis 172 sind \u00fcberfl\u00fcssig, weil die Knoten 174 bis 175, jeweils eine Teilmenge davon, bereits als 2 erkannt werden; \u00e4hnlich 181 bis 183 und 196 bis 198.<\/li>\n\n\n\n<li>Wenn man die erste Zeichnung oben genau betrachtet, sieht man, dass bei den eingezeichneten Zellen nicht nur das 2-Neuron eine 1 meldet, sondern ebenso das 3- und das 7-Neuron. Klar: Die eingezeichneten 12 Pixel enthalten jeweils alle n\u00f6tigen Pixel f\u00fcr eine der 3er oder 7er. Deshalb geben die auch Signal, und deshalb existiert beim Stilwell-Brain die Hilfsregel, dass bei mehreren potentiellen Ausgaben immer die erste L\u00f6sung nach einer bestimmten Reihenfolge gew\u00e4hlt wird, n\u00e4mlich 8-9-0-2-3-7-6-4-5-1.<\/li>\n\n\n\n<li>Auf die Spitze getrieben: Wenn ich alle 25 Pixel anmale, melden alle 10 Ausgangsneuronen ein Signal. Unbefriedigend.<\/li>\n\n\n\n<li>Das l\u00e4sst sich aber leicht verbessern, wenn man mit Calc arbeitet statt wie im Stilwell-Brain mit menschlichen Freiwilligen: Wir f\u00fchren einfach negative Gewichtungen ein, und daf\u00fcr reicht uns bereits die versteckte, rote, Schicht. Da hei\u00dft eine Gewichtung von 1, dass das Pixel gesetzt sein muss, eine Gewichtung von 0, dass &#8211; wie bisher &#8211; das Pixel einfach ignoriert wird, und eine Gewichtung von -1, dass das Pixel nicht gesetzt sein <em>darf<\/em> &#8211; weil dann der begrenzende Biaswert nicht mehr erreicht wird.<\/li>\n<\/ul>\n\n\n\n<p>Das k\u00f6nnte ich mal Sch\u00fcler und Sch\u00fclerinnen machen lassen. Bei den 5&#215;5-Minigrafiken oben w\u00e4ren dann wohl neben den blauen Pixeln (hei\u00dft: verlangt) einfach alle anderen orange (hei\u00dft: verboten). Immer noch ein naives System. Immerhin: Bei der 1 k\u00f6nnte man links oben, bei der 4 rechts in der Mitte eine Gewichtung mit 0 belassen, also ein Pixel optional machen, um Varianten zuzulassen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Zur Sicherheit: Unterschiede zu einem richtigen Neuronalen Netz<\/h2>\n\n\n\n<p>Bei einem richtigen Netz w\u00e4hlt man Bias und Gewichtung nicht von Hand aus, sondern l\u00e4sst das durch Training automatisch geschehen. Damit das geschehen kann, gibt es da auch nicht nur 0 und 1 oder -1, sondern beliebige Zahlen, insbesondere Kommazahlen, und eine Aktivierungsfunktion, die eben nicht nur 0 oder 1 ausspuckt, sondern Kommazahlen, oft zwischen 0 und 1.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Ausprobieren!<\/h2>\n\n\n\n<p>Zum Ausprobieren habe ich Online-Tabellendokumente erstellt, einfach auf den Link klicken und das Passwort eingeben:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>In dieser Variante kann man nur die 25 Pixel der zu erkennenden Ziffer einzeichnen, und zwar als 0, 1 oder leer. Einfach ein paar Pixel einzeichnen oder l\u00f6schen und schauen, was passiert!<br><a href=\"https:\/\/0186.drive.bycs.de\/s\/MjvtPiNTfcOwUbv\">https:\/\/0186.drive.bycs.de\/s\/MjvtPiNTfcOwUbv<\/a><br>Passwort: Ernsthaft1!11<\/li>\n\n\n\n<li>Wie oben, aber man kann zus\u00e4tzlich Bias und Gewichte anpassen und damit die ganze Semantik des Netzes ver\u00e4ndern. Einfach mal eine erfolgreich erkannte Zahl einzeichnen und ein zus\u00e4tzliches, st\u00f6rendes Pixel erg\u00e4nzen, und f\u00fcr dieses die entsprechende Gewichtung auf -1 setzen. (Nach \u00c4nderungen evtl. wieder aufr\u00e4umen?)<br><a href=\"https:\/\/0186.drive.bycs.de\/s\/NLqnsiReakeGbrk\">https:\/\/0186.drive.bycs.de\/s\/NLqnsiReakeGbrk<\/a><br>Passwort: Ernsthaft1!11<\/li>\n\n\n\n<li>V\u00f6llig ungesch\u00fctzt, aber man kann die Datei nur als Kopie herunterladen und sie nicht online bearbeiten:<br><a href=\"https:\/\/0186.drive.bycs.de\/s\/OYLbILxZmoPGcIL\">https:\/\/0186.drive.bycs.de\/s\/OYLbILxZmoPGcIL<\/a><br>Passwort: Ernsthaft1!11<\/li>\n<\/ol>\n\n\n\n<p>Wenn ich endlich JavaScript lernte, k\u00f6nnte ich das als Webseite nachbauen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">(Eine Woche sp\u00e4ter)<\/h2>\n\n\n\n<p>Also gut, habe ich halt ein bisschen JavaScript gelernt und mein erstes Programm geschrieben und hier unten als Seite eingebettet. Hei\u00dft: Das ist keine Grafik, sondern eine HTML-Seite, auf der man viel anklicken und eingeben kann. Das hat die Tabellenkalkulationsdatei \u00fcberfl\u00fcssig gemacht. CSS und JS sind in der HTML-Seite enthalten, beide nicht sch\u00f6n. (Code-Dopplungen, Magic Numbers. Aber sch\u00f6n, mal nur verhalten objektorientiert zu programmieren.) Das Prinzip ist wie oben. Im Bereich mit der versteckten Schicht kann man vertikal scrollen, in der Ausgabeschicht horizontal. Die Modi:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Nur Zeichnen (Startmodus):<\/strong> Zum Einstieg. Da kann man nur die 25 gro\u00dfen Pixel anklicken und schauen, was sich in der Ausgabeschicht dann so tut.<\/li>\n\n\n\n<li><strong>Freie Eingabe: <\/strong>Zum Ausprobieren. Da kann man zus\u00e4tzlich alle Biases und Gewichte ver\u00e4ndern. Und man kann in der versteckten Schicht auf eine Zelle klicken, am besten in der Bias-Spalte, dann sieht man eine Vorschau auf den gew\u00e4hlten Knoten. Auch Kommazahlen sind nat\u00fcrlich m\u00f6glich.<\/li>\n\n\n\n<li><strong>Toggle und Cycle:<\/strong> F\u00fcr Eilige. Man kann weiterhin alles Ver\u00e4nderbare mit der Tastatur ver\u00e4ndern, aber ein Mausklick auf die Gewichte (nicht: Bias) \u00e4ndert den Wert darin automatisch &#8211; das ist ung\u00fcnstig, wenn man sich die Knoten nur mal eben visualisieren m\u00f6chte, aber praktisch, um sie schnell zu ver\u00e4ndern.<\/li>\n<\/ul>\n\n\n\n<iframe loading=\"lazy\" title=\"\" width=\"700px\" height=\"700px\" src=\"https:\/\/www.herr-rau.de\/wordpress\/archiv\/neuronales\/zahlen_erkennen.html\"><\/iframe>\n\n\n\n<p>Irgendwann k\u00f6nnte ich den Code zu Codeberg tun, mit Beispielaufgaben dazu und Erweiterung auf ausw\u00e4hlbar viele Knoten in den verschiedenen Schichten, also auch f\u00fcr andere Aufgaben, und dann vielleicht doch mit Backpropagation?<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>(8 Kommentare.) Das letzte Neuronale Netz f\u00fcr eine Weile, VERSPROCHEN! Wer ihn nicht liest, k\u00f6nnte wenigstens ganz unten meine JavaScript-K\u00fcnste bewundern und will umherklicken. Ich habe k\u00fcrzlich (Blogeintrag) ein Neuronales Netz in Calc nachgebaut und wollte das mal ganz konkret f\u00fcr eine \u00fcberarbeitete Version des Stilwell Brain (Blogeintrag) einsetzen. Kurzfassung: Letzteres kann gezeichnete Ziffern in [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":66007,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[25],"tags":[227,254],"class_list":["post-65912","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-informatik","tag-informatik","tag-ki"],"jetpack_featured_media_url":"https:\/\/www.herr-rau.de\/wordpress\/archiv\/neuronales_netz_ziffern_javascript.png","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.herr-rau.de\/wordpress\/wp-json\/wp\/v2\/posts\/65912","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.herr-rau.de\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.herr-rau.de\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.herr-rau.de\/wordpress\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.herr-rau.de\/wordpress\/wp-json\/wp\/v2\/comments?post=65912"}],"version-history":[{"count":2,"href":"https:\/\/www.herr-rau.de\/wordpress\/wp-json\/wp\/v2\/posts\/65912\/revisions"}],"predecessor-version":[{"id":66072,"href":"https:\/\/www.herr-rau.de\/wordpress\/wp-json\/wp\/v2\/posts\/65912\/revisions\/66072"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.herr-rau.de\/wordpress\/wp-json\/wp\/v2\/media\/66007"}],"wp:attachment":[{"href":"https:\/\/www.herr-rau.de\/wordpress\/wp-json\/wp\/v2\/media?parent=65912"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.herr-rau.de\/wordpress\/wp-json\/wp\/v2\/categories?post=65912"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.herr-rau.de\/wordpress\/wp-json\/wp\/v2\/tags?post=65912"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}