Anton-KI-Trainer

Trainiere eine KI direkt im Browser – ohne Anmeldung, ohne Cloud, ohne Datenweitergabe.

🔒 100 % lokal  ·  🟢 100 % freie Software  ·  🛡️ 100 % DSGVO-konform
📷
Verfügbar
Einsteiger

Bild­erkennung

Trainiere die KI mit Kamera­aufnahmen. Klassifiziere Objekte, Gesten oder Umgebungen.

🎵
Verfügbar
Einsteiger

Ton­erkennung

Klassifiziere Klang­muster via Mikrofon – Sprache, Instrumente oder Klopf­geräusche.

🕺
Verfügbar
Einsteiger

Pose­erkennung

Die KI erkennt Körper­haltungen anhand von Skelett­punkten – unabhängig von Kleidung.

✏️
Verfügbar
Einsteiger

Zeichen­erkennung

Zeichne Skizzen auf dem Touchscreen und lass die KI erkennen, was du gezeichnet hast.

😊
Verfügbar
Fortgeschritten

Mimik­erkennung

Spiegel-Avatar, Ausdrucks-Analyse und eigenes Training – mit kritischem Blick auf die Grenzen von Emotions-KI.

📊
Verfügbar
Fortgeschritten

Zahlen­daten

KI ohne Kamera: Klassifiziere strukturierte Messdaten. Mit Palmer-Pinguinen als Einstieg.

🔬
Hintergrundwissen

Wie funktioniert das hier?

Bibliotheken, Lernmethoden, und was es sonst noch gibt – für alle, die mehr wissen wollen.

🔬 Wie funktioniert das hier?

🤖 Was ist Künstliche Intelligenz?

Stell dir vor, du bringst einem kleinen Kind bei, Katzen zu erkennen. Du zeigst ihm viele Bilder: „Das ist eine Katze. Das auch. Das hier nicht – das ist ein Hund." Nach vielen Beispielen kann das Kind neue Bilder selbst einordnen – auch Katzen, die es noch nie gesehen hat.

Genau so funktioniert Künstliche Intelligenz (KI): Ein Computer bekommt viele Beispiele und lernt daraus Regeln – ohne dass jemand diese Regeln aufschreibt. Das nennt man Maschinelles Lernen.

KI steckt heute überall: in Sprachassistenten, beim Entsperren deines Handys per Gesicht, in Übersetzungsapps, beim Streaming wenn dir neue Filme empfohlen werden oder beim E-Mail-Filter, der Spam aussortiert.

📚 Wie lernt eine KI? Die drei Hauptmethoden

👩‍🏫

Überwachtes Lernen

Die KI bekommt Beispiele mit der richtigen Antwort. Du zeigst ihr: „Das ist Klasse A, das ist Klasse B." Sie lernt, den Unterschied zu erkennen.

🔍

Unüberwachtes Lernen

Die KI bekommt Daten ohne Beschriftung und sucht selbst nach Mustern und Gruppen. „Was gehört zusammen?"

🎮

Bestärkendes Lernen

Die KI probiert verschiedene Aktionen aus und bekommt Punkte für gute Entscheidungen – wie ein Videospiel. So lernt sie Schach oder steuert Roboter.

🧠 Der Anton-KI-Trainer nutzt: Überwachtes Lernen

Du bist die Lehrerin oder der Lehrer! Du zeigst der KI Beispiele und gibst ihnen Namen – zum Beispiel „Daumen hoch" und „Daumen runter". Die KI lernt, neue Bilder in diese Kategorien einzuordnen.

Konkret passiert Folgendes: Ein vortrainiertes Netz (MobileNet) erkennt zuerst Merkmale in deinem Bild – Formen, Farben, Kanten. Dann merkt sich ein einfacher Algorithmus (KNN, siehe Tab „Für Fortgeschrittene"), welche Merkmale zu welcher Klasse gehören. Das Training dauert nur Sekunden!

💡 Wichtig: Alles passiert direkt in deinem Browser. Kein Bild, kein Ton und kein Skelettbild verlässt dein Gerät. Das ist DSGVO-konform und funktioniert sogar ohne Internetverbindung.

❓ Häufige Fragen

?
Kann die KI falsch liegen?
Ja! Eine KI ist kein Zauberer. Je mehr und vielfältigere Beispiele du gibst, desto besser wird sie. Mit nur 3 Beispielen pro Klasse macht sie viele Fehler.
?
Wird das Modell gespeichert?
Nur im Browser – und nur so lange das Fenster offen ist. Du kannst es als Datei herunterladen, wenn du es behalten möchtest.
?
Was sind die Grenzen?
Der Trainer erkennt nur das, was du ihm gezeigt hast. Er kann nicht denken, fühlen oder verstehen – er findet nur Muster in Zahlen.
🛠 Wie diese Seite entstanden ist
Der Anton-KI-Trainer wurde von einer Lehrkraft am St.-Antonius-Gymnasium Lüdinghausen entwickelt – mit Claude (Anthropic) als Werkzeug. Die KI hat Code geschrieben, Texte formuliert und Designentscheidungen umgesetzt; alle inhaltlichen Entscheidungen, pädagogischen Überlegungen und das finale Ergebnis liegen beim Menschen. Der Quellcode ist vollständig offen einsehbar. Das Projekt ist selbst ein Beispiel dafür, wie KI als Werkzeug eingesetzt werden kann – nicht als Ersatz für menschliches Urteilsvermögen.

💾 Was passiert beim „Modell herunterladen"?

Wenn du auf „⬇ Modell herunterladen" klickst, speichert der Anton-KI-Trainer eine JSON-Datei auf deinem Gerät. Diese Datei enthält keine Kamerabilder – nur die numerischen Merkmalsvektoren (Feature-Vektoren), die das Netz aus deinen Trainingsbeispielen berechnet hat, sowie die Klassenbezeichnungen.

MobileNet selbst (~9 MB) ist nicht in der Datei enthalten – es wird beim Einbinden neu geladen. Das hält die Datei klein (typisch 10–200 KB).

🌐 Modell in einer eigenen Webseite nutzen (JavaScript)

1
Bibliotheken einbinden – TF.js, MobileNet und KNN Classifier als Script-Tags.
2
JSON laden – mit fetch('modell.json').
3
KNN befüllen – Feature-Vektoren aus der JSON-Datei als Tensoren rekonstruieren.
4
Live erkennen – Kamerabild → MobileNet → Feature-Vektor → KNN.predictClass().
<!-- 1. Bibliotheken --> <script src="https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]/dist/tf.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/[email protected]/dist/mobilenet.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/[email protected]/dist/knn-classifier.min.js"></script> <script> async function init() { // 2. Modell laden const net = await mobilenet.load({ version: 2, alpha: 0.5 }); const knn = knnClassifier.create(); // 3. Gespeicherten Datensatz rekonstruieren const saved = await fetch('modell.json').then(r => r.json()); saved.dataset.forEach(({ classId, data, shape }) => { knn.addExample(tf.tensor(data, shape), classId); }); // 4. Live erkennen const video = document.getElementById('cam'); setInterval(async () => { const feat = net.infer(video, true); const result = await knn.predictClass(feat, 3); document.getElementById('label').textContent = saved.classes[result.label].name + ' (' + Math.round(result.confidences[result.label] * 100) + '%)'; }, 200); } init(); </script>

🐍 Modell in Python verwenden

In Python kannst du die gespeicherte JSON-Datei nicht direkt laden – das KNN-Format ist TF.js-spezifisch. Es gibt zwei Wege:

A
Feature-Vektoren direkt nutzen: Die JSON-Datei enthält Float32-Arrays. Du kannst sie in Python einlesen und mit scikit-learn's KNeighborsClassifier nachbauen.
import json, numpy as np from sklearn.neighbors import KNeighborsClassifier # JSON laden with open('modell.json') as f: saved = json.load(f) # Daten aufbereiten X, y = [], [] for entry in saved['dataset']: X.append(entry['data']) y.append(entry['classId']) X = np.array(X) # KNN-Klassifikator trainieren knn = KNeighborsClassifier(n_neighbors=3) knn.fit(X, y) # Klassen-Lookup classes = {str(c['id']): c['name'] for c in saved['classes']} # Beispielvorhersage (feat_vector = 1024-dimensionaler Vektor von MobileNet) # prediction = knn.predict([feat_vector])[0] # print(classes[str(prediction)])
B
Neu trainieren mit Python + TensorFlow: Bilder erneut aufnehmen, MobileNet in Python als Feature-Extraktor nutzen (tensorflow-hub) und KNN oder einen anderen Klassifikator trainieren. Empfehlenswert für größere Projekte.
import tensorflow as tf import tensorflow_hub as hub import numpy as np from sklearn.neighbors import KNeighborsClassifier from PIL import Image # MobileNet als Feature-Extraktor laden model = hub.load("https://tfhub.dev/google/imagenet/mobilenet_v2_050_224/feature_vector/5") def extract_features(image_path): img = Image.open(image_path).resize((224, 224)) arr = np.array(img) / 255.0 return model(arr[np.newaxis, ...]).numpy()[0] # Beispiel: Features für eigene Bilder extrahieren # feat = extract_features("mein_bild.jpg") # knn.predict([feat])

📱 Modell auf dem iPad / Handy nutzen

Da der Anton-KI-Trainer eine normale Webseite ist, läuft er auf jedem Gerät mit modernem Browser – iPad, iPhone, Android. Einfach die URL öffnen, fertig. Für Offline-Nutzung kannst du die HTML-Datei zusammen mit der JSON-Modelldatei und den Modell-Ordnern lokal speichern.

💡 Für ein richtiges App-Erlebnis kannst du die Seite als PWA (Progressive Web App) verpacken – dann erscheint ein App-Icon auf dem Homescreen und sie funktioniert offline.

🧮 k-Nearest Neighbors – die Idee

KNN ist einer der intuitivsten Algorithmen im maschinellen Lernen: „Sag mir, wer deine Nachbarn sind – und ich sage dir, wer du bist."

Wenn du eine neue Eingabe klassifizieren willst, sucht KNN die k ähnlichsten bekannten Beispiele aus dem Training und schaut, welche Klasse dort am häufigsten vorkommt. Im Anton-KI-Trainer ist k = 3.

🔢 Wie funktioniert das Schritt für Schritt?

1
Feature-Extraktion: MobileNet (oder MoveNet) wandelt die Eingabe in einen Zahlen-Vektor um – z. B. 1.024 Zahlen für ein Bild. Dieser Vektor ist der „Fingerabdruck" der Eingabe im mehrdimensionalen Raum.
2
Training = Speichern: Beim Gedrückthalten speichert der KI-Trainer den Fingerabdruck zusammen mit der gewählten Klasse. Kein Gradient Descent, kein Backpropagation – nur Abspeichern.
3
Abstand berechnen: Bei der Erkennung wird der neue Fingerabdruck mit allen gespeicherten verglichen. Der Abstand zwischen zwei Vektoren ist die euklidische Distanz – wie der Abstand zweier Punkte im Raum, nur in 1.024 Dimensionen.
4
Mehrheitsentscheidung: Die 3 nächsten Nachbarn (k = 3) werden gefunden. Welche Klasse kommt am häufigsten vor? Das ist das Ergebnis. Die Konfidenz ist der Anteil der Nachbarn dieser Klasse (z. B. 2/3 = 67 %).

✅ Warum KNN hier ideal ist

Kein Training im klassischen Sinn: Neue Beispiele können jederzeit hinzugefügt werden, ohne alles neu zu berechnen. Das macht KNN interaktiv und sofort.

Nachvollziehbar: Man kann sich bildlich vorstellen, warum eine Klasse erkannt wird – die Nachbarn sind konkrete Trainingsbeispiele, die du selbst eingegeben hast.

Kombinierbar: KNN alleine wäre bei rohen Pixeln nutzlos (zu viele Dimensionen, zu viel Rauschen). Erst die Features von MobileNet machen den Raum „sinnvoll" – ähnliche Bilder liegen dann wirklich nah beieinander.

⚠️ Grenzen von KNN

Langsam bei großen Datenmengen: Mit 10.000 Trainingsbeispielen muss jede Erkennung 10.000 Abstände berechnen. Im Schulkontext (50–200 Beispiele) ist das kein Problem.

Braucht gute Features: Wenn die Features nicht aussagekräftig sind (z. B. rohe Pixel ohne MobileNet), funktioniert KNN schlecht.

Kein „Lernen" aus Mustern: KNN erkennt keine abstrakten Regeln – es vergleicht nur. Ein tiefes neuronales Netz könnte das Konzept „Hund" verstehen, KNN kennt nur die konkreten Beispiele, die du ihm gezeigt hast.

🟢 Anton-KI-Trainer ist Freie Software

Dieses Projekt und alle verwendeten Bibliotheken sind Open Source und stehen unter der Apache-2.0-Lizenz. Das bedeutet: Du kannst den Quellcode frei lesen, verwenden, verändern und weitergeben – auch für den Unterricht oder eigene Projekte. Die Apache-2.0-Lizenz erlaubt ausdrücklich die kommerzielle Nutzung und das Hosten auf eigenen Servern. Einzige Bedingung: Der Copyright-Hinweis muss erhalten bleiben.

📄 Apache-2.0-Lizenztext
🔶

TensorFlow.js Fundament

Google · Apache 2.0 · Version 4.15

Führt neuronale Netze direkt im Browser aus – auf CPU oder WebGL-GPU. Grundlage für alle KI-Berechnungen im Anton-KI-Trainer.
⭐ GitHub 🌐 Website
📷

MobileNet v2 Bildverstehen

Google · Apache 2.0 · vortrainiert auf 1,2 Mio. Bildern

Vortrainiertes Bildverarbeitungsmodell. Wandelt Kamerabilder in numerische Fingerabdrücke um, die der KNN-Algorithmus vergleichen kann.
⭐ GitHub 📦 Kaggle
🕺

MoveNet Pose-Erkennung

Google · Apache 2.0 · SinglePose Lightning

Erkennt 17 Körperpunkte (Gelenke, Nase, Augen) in Echtzeit. Datenschutzfreundlich: Es werden keine Kamerabilder gespeichert, nur abstrakte Koordinaten.
⭐ GitHub 📦 Kaggle
🧮

KNN Classifier Lernalgorithmus

TensorFlow.js · Apache 2.0 · k-Nearest Neighbors

Implementiert den k-Nearest-Neighbors-Algorithmus. Speichert Feature-Vektoren und klassifiziert neue Eingaben durch Abstandsvergleich.
⭐ GitHub
🎵

Speech Commands Tonerkennung

TensorFlow.js · Apache 2.0

Erkennt kurze Audiosequenzen via Mikrofon durch Spektrogramm-Analyse. Wird im Modul Tonerkennung verwendet.
⭐ GitHub

📷 Bilderkennung

Lädt…

📷 So trainierst du die Bilderkennung

1
Kamera starten: Klicke auf „📷 Kamera starten" und erlaube den Kamerazugriff im Browser.
2
Klassen anlegen: Klicke auf „+ Klasse hinzufügen" und gib ihr einen Namen, z. B. „Daumen hoch". Lege mindestens 2 Klassen an.
3
Bilder aufnehmen: Halte den grünen Aufnahme-Button bei einer Klasse gedrückt und zeig der Kamera das Objekt / die Geste. Je mehr Bilder (mind. 20), desto besser!
4
Alle Klassen befüllen: Wiederhole Schritt 3 für jede Klasse – aus verschiedenen Winkeln und Positionen.
5
Trainieren: Klicke auf „⚡ Jetzt trainieren". Das dauert nur wenige Sekunden.
6
Live-Erkennung: Klicke auf „▶ Live-Erkennung starten" und halte verschiedene Objekte in die Kamera – die KI erkennt sie in Echtzeit!
💡 Tipp: Wenn die Erkennung schlecht ist, nimm mehr Bilder auf – besonders aus verschiedenen Winkeln, bei verschiedener Beleuchtung und mit verschiedenem Hintergrund.
📷 Kamera
📷

Kamera starten, um Bilder aufzunehmen.

🏷️ Klassen
⚡ Training & Erkennung
Mind. 2 Klassen mit je 10+ Bildern → trainieren → Live-Erkennung. Alles bleibt im Browser.
Noch kein Training.

Was steckt in der JSON-Datei?

Keine Kamerabilder – nur Feature-Vektoren, die MobileNet aus jedem Bild extrahiert hat.

  • classes – Klassenbezeichnungen
  • dataset – Feature-Matrix (Float32-Arrays)
  • Hinweis: MobileNet (~9 MB) wird beim Laden neu geladen.

In eigener Seite einbinden

  1. TF.js, MobileNet & KNN-Classifier per Script-Tag einbinden
  2. JSON-Datei per fetch() laden
  3. KNN-Datensatz aus gespeicherten Tensoren wiederherstellen
  4. Kamera starten und live klassifizieren
const net = await mobilenet.load({version:2, alpha:0.5}); const knn = knnClassifier.create(); const saved = await fetch('modell.json').then(r => r.json()); saved.dataset.forEach(({classId, data, shape}) => { knn.addExample(tf.tensor(data, shape), classId); }); // Live-Vorhersage: const feat = net.infer(videoEl, true); const result = await knn.predictClass(feat, 3); console.log(saved.classes[result.label].name);

Unterrichtsprojekte

  • Gestenerkennung → browserbasiertes Spiel
  • Klasse trainiert gemeinsam, ein Schüler baut die Demo-Seite
  • 5 vs. 50 Bilder vergleichen – Genauigkeitsunterschied messen
  • Biologie: Pflanzenbestimmung, Kunst: Stilklassifikation

🎵 Tonerkennung

Bereit

🎵 So trainierst du die Tonerkennung

1
Mikrofon starten: Klicke auf „🎙️ Mikrofon starten" und erlaube den Mikrofonzugriff im Browser.
2
Klassen anlegen: Klicke auf „+ Klasse hinzufügen" und gib ihr einen Namen, z. B. „Klatschen" oder „Pfeifen".
3
Töne aufnehmen: Halte den Aufnahme-Button bei einer Klasse gedrückt und erzeuge den Ton (z. B. klatschen, sprechen, Instrument spielen). Mind. 10–15 Aufnahmen pro Klasse.
4
Alle Klassen befüllen: Wiederhole Schritt 3 für jede Klasse. Nimm auch „Stille" als eigene Klasse auf, wenn du Pausen erkennen möchtest.
5
Trainieren: Klicke auf „⚡ Jetzt trainieren".
6
Live-Test: Klicke auf „▶ Live-Erkennung starten" und erzeuge Töne – die KI reagiert in Echtzeit.
💡 Tipp: Je kürzer und eindeutiger die Töne, desto besser die Erkennung. Vermeide Hintergrundgeräusche beim Aufnehmen.
🎙️ Mikrofon

Das Mikrofon analysiert Frequenzmuster – wie ein Fingerabdruck des Klangs.

🏷️ Klassen
⚡ Training & Erkennung
Die KI berechnet ein Frequenzspektrum (256 Werte) aus jedem Ton-Schnappschuss und lernt diese Muster zu unterscheiden.
Noch kein Training.

Was steckt in der JSON-Datei?

Nur Frequenzspektren als Float-Arrays. Kein Audio-Rohmaterial.

  • Vorteil: Kein externes Modell nötig – nur Web Audio API
  • Hinweis: Mikrofon-Qualität beeinflusst Ergebnisse stark

In eigener Seite einbinden

  1. TF.js & KNN-Classifier einbinden (kein MobileNet nötig!)
  2. Web Audio API für Mikrofon-Zugriff initialisieren
  3. JSON laden, KNN-Datensatz wiederherstellen
  4. Frequenz-Snapshots live klassifizieren
const ctx = new AudioContext(); const analyser = ctx.createAnalyser(); analyser.fftSize = 512; ctx.createMediaStreamSource(stream).connect(analyser); function getFeatures() { const buf = new Float32Array(analyser.frequencyBinCount); analyser.getFloatFrequencyData(buf); return buf.map(v => Math.max(0, Math.min(1, (v+140)/140))); } const feat = tf.tensor2d([getFeatures()]); const result = await knn.predictClass(feat, 3);

Unterrichtsprojekte

  • Vokale A/E/I/O/U – Artikulation verändert das Spektrum sichtbar
  • Instrumente klassifizieren (Klavier vs. Gitarre vs. Stimme)
  • Klopfmuster-Steuerung für eine browserbasierte App
  • Dasselbe Wort in 3 Sprachen – erkennt die KI die Unterschiede?

🕺 Poseerkennung

Lädt…

🕺 So trainierst du die Poseerkennung

1
Kamera starten: Klicke auf „📷 Kamera starten". Du siehst dich selbst – und bunte Punkte auf deinen Gelenken (das Skelett).
2
Klassen anlegen: Klicke auf „+ Klasse hinzufügen" und gib ihr einen Namen, z. B. „Arme hoch" oder „Hocke".
3
Pose einnehmen und aufnehmen: Nimm die gewünschte Körperhaltung ein, halte den Aufnahme-Button gedrückt und bleib dabei möglichst still. Mind. 15 Aufnahmen pro Pose.
4
Alle Klassen befüllen: Wiederhole für jede Pose. Variiere die Position leicht – etwas links, etwas rechts – damit die KI robust wird.
5
Trainieren: Klicke auf „⚡ Jetzt trainieren".
6
Live-Test: Klicke auf „▶ Live-Erkennung" und bewege dich – die KI zeigt in Echtzeit, welche Pose sie erkennt.
💡 Datenschutz: Die KI speichert nur 17 Gelenk-Koordinaten, keine Kamerabilder. Dein Aussehen bleibt privat!
📷 Kamera + Skelett
🕺

Kamera starten für Pose-Erkennung.

Warte auf Kamera…
🏷️ Posen-Klassen
⚡ Training & Erkennung
Die KI sieht keine Pixel, nur 17 Körperpunkte. Hintergrund und Kleidung sind irrelevant!
Noch kein Training.

Was steckt in der JSON-Datei?

Nur normalisierte Koordinaten der 17 Körperpunkte. Kein einziges Pixel wird gespeichert.

In eigener Seite einbinden

  1. TF.js, Pose-Detection & KNN-Classifier einbinden
  2. MoveNet-Detektor initialisieren
  3. JSON laden, Datensatz wiederherstellen
  4. Frame: Pose schätzen → normalisieren → klassifizieren
const detector = await poseDetection.createDetector( poseDetection.SupportedModels.MoveNet); const poses = await detector.estimatePoses(video); const kps = poses[0].keypoints; const cx = (kps[5].x + kps[6].x) / 2; const cy = (kps[5].y + kps[6].y) / 2; const scale = Math.hypot(kps[6].x-kps[5].x, kps[6].y-kps[5].y); const vec = kps.flatMap(k => [(k.x-cx)/scale, (k.y-cy)/scale, k.score ?? 0]); const result = await knn.predictClass(tf.tensor2d([vec]), 3);

Unterrichtsprojekte

  • Sport-Feedback: Kniebeuge korrekt vs. falsch
  • Gebärdensprache: 5 Zeichen lernen und erkennen lassen
  • Historische Posen nachstellen (Statuen, Gemälde)
  • Tanzschritte → Musik-Player reagiert auf Posen

✏️ Zeichenerkennung

Lädt…

✏️ So trainierst du die Zeichenerkennung

1
Klassen anlegen: Klicke auf „+ Klasse hinzufügen" und gib ihr einen Namen, z. B. „Kreis" oder „Haus".
2
Zeichnen: Male auf der weißen Fläche das erste Beispiel. Nutze Maus, Finger oder Stift.
3
Aufnehmen: Klicke den Aufnahme-Button bei der passenden Klasse. Dann auf „🗑 Löschen" und das nächste Beispiel zeichnen. Wiederhole das mind. 15× pro Klasse.
4
Variiere deine Zeichnungen: Zeichne die Form unterschiedlich groß, an verschiedenen Positionen, mit verschiedener Strichstärke.
5
Trainieren: Klicke auf „⚡ Jetzt trainieren".
6
Live-Test: Zeichne etwas in den Bereich und klicke auf „🔍 Erkennen" – die KI sagt dir, was sie sieht.
💡 Tipp: Starte mit einfachen, klar unterschiedlichen Formen (z. B. Dreieck, Kreis, Quadrat). Zu ähnliche Formen verwirren die KI.
✏️ Zeichenbereich

Zeichne, füge der Klasse hinzu, wiederhole mit anderer Variation.

🏷️ Klassen
⚡ Training & Erkennung
Zeichne dasselbe Zeichen in vielen Variationen: Größen, Positionen, Strichstärken. Je vielfältiger, desto robuster!
Noch kein Training.

Was steckt in der JSON-Datei?

MobileNet-Feature-Vektoren der Zeichnungen. Die Zeichnungen selbst werden nicht gespeichert.

  • Tipp: Canvas auf 224×224 px normieren vor Klassifikation

In eigener Seite einbinden

// Canvas → Features → Klassifikation async function classify(canvas, net, knn) { const feat = tf.tidy(() => net.infer( tf.browser.fromPixels(canvas), true)); const result = await knn.predictClass(feat, 3); feat.dispose(); return result; }

Unterrichtsprojekte

  • Quick-Draw-Spiel: 20 s zeichnen, KI rät
  • Mathe: +, −, ×, ÷ zeichnen → Rechner erkennt Operatoren
  • Fremdsprachen: chinesische Zeichen oder arabische Buchstaben
  • Kunst: Stilrichtungen trainieren → KI gibt Stilfeedback

😊 Mimikerkennung

Lädt…

😊 Mimikerkennung – drei Modi

1
Kamera starten – das Modell läuft lokal, keine Daten verlassen das Gerät.
2
Spiegel-Tab: Ein Katzen-Avatar spiegelt deine Gesichtsbewegungen live – powered by 468 Keypoints.
3
Erkunden-Tab: Geometrisch berechnete Ausdruckswerte – teste ob sie mit deiner echten Emotion übereinstimmen.
4
Trainieren-Tab: Trainiere eine eigene KI auf deine Mimik mit dem KNN-Prinzip aus den anderen Modulen.
5
Experiment: Teste dein trainiertes Modell bei Mitschüler*innen – funktioniert es? Warum (nicht)?
6
Diskussion: Lies den Wissenschafts-Hinweis im Erkunden-Tab und diskutiere den Einsatz von Emotions-KI.
💡 Starte im Spiegel-Tab – der Aha-Moment kommt wenn du lächelst und die Katze mitlacht.
⚠️ Wichtig: Dieses Modul erkennt Gesichtsbewegungen, keine echten Emotionen. Alle Berechnungen laufen lokal im Browser – keine Daten werden übertragen oder gespeichert. Die Grenzen dieser Technik sind Teil des Lernziels.
📷 Kamera & Avatar
😊

Kamera starten

🐱 Wie der Avatar funktioniert

Der Avatar liest 468 Gesichts-Keypoints aus und berechnet daraus Mund­öffnung, Lächeln, Augenbrauen­position und Augen­öffnung. Dieselben Keypoints nutzt du im Trainieren-Tab als Eingabe für die KI.

🔬 Beobachte: Halte eine Augenbraue hoch – reagiert die Katze? Forme ein Lächeln ohne Zähne – erkennt der Avatar den Unterschied zu einem offenen Lächeln? Was passiert, wenn du den Kopf zur Seite neigst?
🔍 Berechnete Ausdruckswerte

Aus den Keypoints werden geometrische Kennzahlen berechnet – keine Black Box, sondern Abstände und Verhältnisse.

🧪 Das Ekman-Problem
Diese Werte basieren auf Paul Ekmans Theorie „universeller Basisemotionen" (1970er). Neuere Forschung (Lisa Feldman Barrett u.a.) zeigt: Gesichtsausdrücke sind kulturell geprägt und kontextabhängig. Ein Lächeln kann Freude, Nervosität oder Höflichkeit bedeuten. Teste selbst: Kann die Analyse unterscheiden, ob dein Lächeln echt oder erzwungen ist?
💡 Klassenexperiment: Erzeugt dieselbe „Emotion" bei verschiedenen Personen dieselben Werte? Was bedeutet das für den Einsatz von Emotions-KI in Schule, Bewerbungsgesprächen oder der Justiz?
🏷️ Klassen
Noch kein Training.
📊 Live-Erkennung
🔬 Experiment: Trainiere die KI auf deiner Mimik. Lasse eine Mitschüler*in denselben Ausdruck zeigen. Erkennt deine KI ihn? Wenn nicht – was fehlt ihr?

📊 Zahlendaten

Bereit

📊 So nutzt du das Zahlendaten-Modul

1
Schnellstart: Klicke auf „🐧 Pinguine laden" – 150 Beispiele werden direkt als Trainingsdaten übernommen.
2
Merkmale: Die Eigenschaften (z.B. Schnabellänge) werden automatisch aus dem Datensatz gelesen. Für eigene Daten kannst du sie manuell definieren.
3
CSV-Upload: Eigene Tabelle hochladen – beliebige Spalten, eine davon als Klassen-Label wählen.
4
Manuell: Messwerte direkt eintippen – gut für selbst erhobene Daten (Blätter messen, Schrittzählen etc.).
5
Trainieren und dann unter „Vorhersage" neue Messwerte eingeben und klassifizieren lassen.
6
Vergleiche: Wie ändert sich die Genauigkeit wenn du einzelne Merkmale weglässt?
💡 Der Unterschied zu den anderen Modulen: Hier gibt es kein Kamerabild – die KI lernt aus reinen Zahlen.
📂 Datensatz
🔢 Merkmale (Features)
🏷️ Klassen & Trainingsbeispiele
Noch kein Training.
🔮 Vorhersage – neue Messung eingeben