Teachable Machine

Was ist Teachable Machine?

Teachable Machine ist eine einfache, webbasierte Anwendung von Google, mit der man Machine-Learning-Modelle trainieren kann. Sie funktioniert mit Bildern, Tönen oder Bewegungen. Das Ergebnis ist ein Modell, das in Webseiten, Spiele oder kreative Projekte eingebunden werden kann.

Umgang mit Teachable Machine

Nützliche Links

Begriffsklärungen

Beispiel-Code für die Nutzung mit p5.js

 let imageModelURL = 'https://teachablemachine.withgoogle.com/models/6eL2SJyis/';

      let classifier;
    
 function preload() {
      classifier = ml5.imageClassifier(imageModelURL + ‚model.json');
    }
    
function setup() {
          createCanvas(320, 260);
          video = createCapture(VIDEO);
          video.size(320, 240);
          video.hide();
          classifyVideo();
        }
        
function draw() {
      background(0);
      image(video, 0, 0);
      fill(255);
      textSize(16);
      textAlign(CENTER);
      text(label, width / 2, height - 4);
    }
    
function classifyVideo() {
        classifier.classify(video, gotResult);
      }
      
function gotResult(results) {
          label = results[0].label;
          classifyVideo(); // Starte direkt wieder die nächste Analyse
        }

Weitere Beispiele

Bild-Drop: 

canvas.dragOver(function () {
          message = "Uh yeah, drop it";
          bgcolor = "#ccc";
        });
        
        canvas.dragLeave(function () {
          bgcolor = "white";
          message = defaultMessage;
        });
        
        canvas.drop(handleFile, function () {
          bgcolor = "white";
          message = "";
        });
        
function handleFile(file) {
            if (file.type === "image") {
              img = createImg(file.data, "uploaded image");
              img.hide();
              classifyImage(img);
            }
          }

Zeichnen auf dem Canvas: 

cnv = createCanvas(200, 200);
        cnv.parent("sketch");
        background(255);
      
if (mouseIsPressed) {
          let weight = dist(px, py, mouseX, mouseY);
          strokeWeight(constrain(weight, 1, 10));
          line(px, py, mouseX, mouseY);
        }
        px = mouseX;
        py = mouseY;

Markdown

Markdown ist ein leichtgewichtiger Markup-Standard, der darauf abzielt, Text menschenlesbar und gleichzeitig maschinenfreundlich zu strukturieren. Markdown-Dateien (.md) können in einfache HTML-Dokumente umgewandelt werden und helfen, Informationen klar und organisiert zu präsentieren.

Wie man Markdown richtig anwendet in Visual Studio Code (VSCode):

Bedeutung Markdown-Syntax
Heading 1 (größte Überschrift) # Überschrift
Heading 2 (mittlere Überschrift) ## Überschrift
Heading 3 (kleinste Überschrift) ### Überschrift
Liste (Bulletpoints) - Punkt 1 * Punkt 1
Zitat (Blockquote) > Dies ist ein Zitat.
Inline-Code `console.log("Hello World!");`
Fetter Text **Fett**
Kursiver Text *Kursiv*
Link [Text](URL)
Bild ![Beschreibung](URL)

Markdown-Erweiterungen und Tools in VSCode:

Umgang mit Künstlicher Intelligenz

Wenn KIs mit veränderlichen Daten arbeiten, wie z.B. aktuellen Ereignissen, fehlt oft der Kontext im Training. Um dieses Problem zu lösen, müssen wir der KI explizit Informationen mitgeben, damit sie die Daten korrekt verarbeiten kann. Wenn wir möchten, dass sich das Modell auf bestimmte Weise verhält, müssen wir es mit entsprechendem Kontext versorgen.

Gerade bei der Arbeit mit KIs wie ChatGPT ist der Kontext entscheidend: Um präzisere Antworten zu erhalten, ist es wichtig, der KI klare Anweisungen zu geben und den Hintergrund einer Frage oder Aufgabe zu erklären. Der Text wird dabei in kleinere Einheiten zerlegt, die sogenannten Tokens. Ein Token kann ein Wort, ein Satzzeichen oder ein Teil eines Wortes sein. Je mehr Kontext in Form von Tokens zur Verfügung steht, desto besser kann die KI die Anfrage verstehen und darauf reagieren.

Debate Club

Heutzutage ist KI schon stark in der Gesellschaft vertreten – ob in kreativen Bereichen, der öffentlichen Sicherheit, der generellen Arbeitswelt oder allen möglichen anderen Bereichen. Die rasant zunehmende Nutzung von Künstlicher Intelligenz zieht aber auch ein Spannungsfeld zwischen Potenzial und Moral mit sich, da sie einerseits als effiziente Entlastung für Menschen dienen, andererseits aber auch gesellschaftliche und ethische Konsequenzen mit sich bringen kann.

Da das Arbeiten und Integrieren von KI dieses Semester Thema war, haben wir uns auch mit den auseinandergehenden Meinungen dazu beschäftigt und einen Debattierclub geführt. Eine Hälfte des Kurses war für die Nutzung von KI, die andere eher negativ eingestellt. Nach einer Vorstellung der Aspekte beider Seiten kam man dann ins Diskutieren; dabei stand zum Beispiel der Punkt Effizienz gegen den Punkt Verdrängung, wirtschaftlicher Nutzen gegen Umweltzerstörung, Missbrauch gegen Sicherheit. Richtig einig wurde man sich nicht, aber am Ende schien die Seite mit den positiven Aspekten überzeugender zu sein.

Ich finde die Unterhaltung über KI sehr wichtig, und gerade wenn man sich anschaut, was wir studieren, wird es auch weiterhin ein großes Thema für uns sein. Am Anfang war mir meine Position relativ klar: Natürlich ist KI vor allem sehr gefährlich und führt nur zu weiterer Spaltung der Gesellschaft. Deswegen war ich auch sehr froh, dass ich mich auf der Con-Seite befand. Allerdings hat die Debatte dazu geführt, dass meine Sorge ein wenig abnahm und ich eingestanden habe, dass Katastrophenszenarien jetzt vielleicht doch nicht so leicht eintreten werden. Trotzdem bleibe ich bei dem Punkt, dass sich Menschen mit der zunehmenden Nutzung von Künstlicher Intelligenz in allen Bereichen nicht unbedingt einen Gefallen machen.

Syntax & Coding-Grundlagen

Konzepte und Elemente

Struktur:

Typografie:

Interaktivität & Styling:

Diese Seite

Bedeutung HTML CSS
Navigation mit Links <nav><ul><li><a href="#..."></a></li></ul></nav> nav ul { display: flex; gap: 20px; }
Seitenabschnitt <section id="..."></section> section { background: white; }
Große Überschrift <h2>...</h2> h2 { color: #2575fc; text-align: center; }
Mittlere Überschrift <h3>...</h3> h3 { margin-top: 40px; border-left: 4px solid #2575fc; }
Absatz <p>...</p> p { font-size: 1rem; color: #555; }
Liste <ul><li>...</li></ul> ul { padding-left: 10px; } li { margin-bottom: 10px; }
Links <a href="..." target="_blank"class="text-link">...</a> .text-link { color: #2575fc; font-weight: bold; } .text-link:hover { transform: scale(1.2); }
Tabelle table class="table"<table><thead><tr><th></th></tr></thead><tbody><tr><td></td></tr></tbody></table> .table { width: 100%; border-collapse: collapse; }
Codeblock <pre><code>...</code></pre> pre { background: #f0f0f0; padding: 15px; }

Grundlagen JS

Bedeutung Syntax und *Beispiele*
Variable deklarieren (neu) let *x* = *5*;
Konstante (nicht veränderbar) const *name* = "*Lynn*";
Funktion definieren function *greet*() { console.log(*"Hallo!"*); }
Funktion aufrufen *greet*();
Bedingung (if-Anweisung) if (*x > 3*) { console.log(*"Größer als 3"*); }
Wiederholung (Schleife) for (let i = 0; i < 5; i++) { console.log(i); }
Array (Liste) let farben = ["rot", "grün", "blau"];
Zugriff auf Array-Element farben[0]; // ergibt "rot"
Objekt erstellen let person = { name: "Lynn", alter: 22 };
Eigenschaft auslesen person.name; // ergibt "Lynn"
Konsole zum Debuggen console.log("Hallo Welt");
Zufallszahl erzeugen let z = random(0, 10);
Mausposition abfragen (p5.js) mouseX, mouseY

Variablen und Funktionen

JavaScript führt Anweisungen Schritt für Schritt von oben nach unten aus – Zeile für Zeile. Dabei können wir bestimmte Informationen speichern, z. B. in sogenannten Variablen, und ganze Befehlspakete zusammenfassen, die wir bei Bedarf immer wieder verwenden können – das geschieht mit Funktionen.

let name = "Max";

      function greet() {
        console.log("Hallo, " + name + "!");
      }
      
      greet();

Konstante und Bedingung

In JavaScript kann man mit Konstanten (const) feste Werte speichern, die sich im Laufe des Programms nicht mehr ändern sollen. Mit Bedingungen (if) kann man entscheiden, ob ein bestimmter Teil des Codes ausgeführt werden soll – je nachdem, ob etwas true oder false ist. 

 const age = 18;
      const isAdult = (age >= 18);  
      
      if (isAdult === true) {
        console.log("Du bist volljährig.");
      }

Arrays und Schleifen

Arrays dienen dazu, mehrere Werte übersichtlich zusammen in einer einzigen Variablen zu speichern. Wiederholungen (Schleifen) ermöglichen es, bestimmte Anweisungen mehrmals automatisch auszuführen, zum Beispiel um jedes Element in einem Array nacheinander zu verarbeiten, ohne den Code dafür mehrfach schreiben zu müssen.

let farben = ["Rot", "Blau", "Grün", "Gelb"]; 

      for (let i = 0; i < farben.length; i++) {
        console.log("Farbe " + (i + 1) + ": " + farben[i]);
      }

Zufallswert und Benutzerinteraktion

 
  let name = "Sara"; 

  let hobbies = ["Lesen", "Schwimmen", "Programmieren"]; 
      
    function checkDrivingPermission(age) {
    const legalDrivingAge = 18; 
    const isAllowed = (age >= legalDrivingAge); 
      
  let result = "";
      
  if (isAllowed) {
    result += name + " darf Auto fahren.<br>";
  } else {
    result += name + " darf noch kein Auto fahren.<br>";
  }
      
  result += name + " hat folgende Hobbys:<br><ul>";
      
  for (let i = 0; i < hobbies.length; i++) {
    result += "<li>" + hobbies[i] + "</li>";
  }
      
  result += "</ul>";
      
  let random = Math.floor(Math.random() * hobbies.length);
  let randomHobby = hobbies[random];
  
  result += "<br>Ein zufälliges Hobby von " + name + " ist: <strong>" 
  + randomHobby + "</strong>";
      
  return result;
  }
      
  document.getElementById("checkBtn").addEventListener
  ("click", () => {
   const age 
   = parseInt(document.getElementById("ageInput").value, 10);
   const output = checkDrivingPermission(age);
   document.getElementById("output").innerHTML = output;
  });

Beispiel HTML: 

 
      <body>
      <h1>Führerschein-Check</h1>
      
      <label for="ageInput">Alter eingeben: </label>
      <input type="number" id="ageInput" value="20" />
      <button id="checkBtn">Prüfen</button>
      
      <div id="output"></div>
      </body>