BODIES IN MAKING

Notebook-Code

Code-Zelle 6

from IPython.display import display, HTML

html_code = """
<h2 style="margin-bottom: 20px;">Und? Hast du?</h2>

<form onsubmit="event.preventDefault(); 
  (function(form) {
    const answers = form.querySelectorAll('input[name=answer]');
    const result = form.querySelector('.result');
    let selected = false;

    answers.forEach(answer => {
      if (answer.checked) {
        selected = true;
        if (answer.value === 'correct') {
          result.textContent = 'Top! Scrolle weiter, um dein Wissen zu vertiefen &#x1F601;';
          result.style.color = 'blue';
        } else {
          result.textContent = 'Auch gut! Hier kannst du in die Welt des Wrestlings eintauchen 🙃';
          result.style.color = 'blue';
        }
      }
    });

    if (!selected) {
      result.textContent = '⚠️ Bitte wähle eine Antwort aus.';
      result.style.color = 'orange';
    }
  })(this);
">



  <label>
    <input type="radio" name="answer" value="correct">
    Ja!
  </label><br>

  <label>
    <input type="radio" name="answer" value="wrong">
    Nein!
  </label><br>


  <button type="submit">einloggen</button>

  <p class="result" style="font-weight: bold;"></p>
</form>
"""

display(HTML(html_code))

Code-Zelle 8

from IPython.display import YouTubeVideo

Code-Zelle 9

YouTubeVideo("7FRIuCSTlNs?si=XiWDXHWJTjIypimg&amp;start=234", width=600)

Code-Zelle 11

YouTubeVideo("B6cclM7I6U8", width=600)

Code-Zelle 14

import ipywidgets as widgets

widgets.Textarea(
    value='Schreibe hier deine Gedanken auf:',
    placeholder='Type something',
    layout=widgets.Layout(width='600px'),
    disabled=False
)

Code-Zelle 20

import ipywidgets as widgets

widgets.Textarea(
    value='Schreibe hier deine Gedanken auf:',
    placeholder='Type something',
    layout=widgets.Layout(width='600px'),
    disabled=False
)

Code-Zelle 28

import ipywidgets as widgets

widgets.Textarea(
    value='Beschreibe deinen Wrestling-Charakter (Aussehen und Eigenschaften):',
    placeholder='Type something',
    layout=widgets.Layout(width='600px'),
    disabled=False
)

Code-Zelle 32

from IPython.display import display, HTML

html_code = """
<h2 style="margin-bottom: 20px;">Hast du dein Bild erstellt?</h2>

<form onsubmit="event.preventDefault();
  (function(form) {
    const answers = form.querySelectorAll('input[name=answer]');
    const result = form.querySelector('.result');
    let selected = false;

    answers.forEach(answer => {
      if (answer.checked) {
        selected = true;
        if (answer.value === 'correct') {
          result.textContent = '&#x2B50; Super! Weiter gehts &#x2B50;';
          result.style.color = 'green';
        } else {
          result.textContent = 'Klick auf den obrigen Link, und los gehts! 🙃';
          result.style.color = 'red';
        }
      }
    });

    if (!selected) {
      result.textContent = '⚠️ Bitte wähle eine Antwort aus.';
      result.style.color = 'orange';
    }
  })(this);
">

  <label>
    <input type="radio" name="answer" value="correct">
    Ja
  </label><br>

  <label>
    <input type="radio" name="answer" value="wrong">
    Nein
  </label><br>

  <button type="submit">Antwort prüfen</button>

  <p class="result" style="font-weight: bold;"></p>
</form>
"""

display(HTML(html_code))

Code-Zelle 33

import ipywidgets as widgets

widgets.Textarea(
    value='Name deines Wrestling-Charakters:',
    placeholder='Type something',
    layout=widgets.Layout(width='600px'),
    disabled=False
)

Code-Zelle 34

import ipywidgets as widgets

widgets.Textarea(
    value='Catch Phrase deines Wrestling Charakters:',
    placeholder='Type something',
    layout=widgets.Layout(width='600px'),
    disabled=False
)

Code-Zelle 35

import ipywidgets as widgets

widgets.Textarea(
    value='Special Move/Spezialkraft deines Wrestling Charakters:',
    placeholder='Type something',
    layout=widgets.Layout(width='600px'),
    disabled=False
)

Code-Zelle 41

import ipywidgets as widgets

widgets.Textarea(
    value='Schreibe hier auf, was dir aufgefallen ist:',
    placeholder='Type something',
    layout=widgets.Layout(width='600px'),
    disabled=False
)

Code-Zelle 45

from IPython.display import display, HTML

html_code = """
<h2 style="margin-bottom: 20px;">Was bedeutet generieren?</h2>

<form onsubmit="event.preventDefault();
  (function(form) {
    const answers = form.querySelectorAll('input[name=answer]');
    const result = form.querySelector('.result');
    let selected = false;

    answers.forEach(answer => {
      if (answer.checked) {
        selected = true;
        if (answer.value === 'correct') {
          result.textContent = '✅ Richtig! „Generieren“ bedeutet erstellen. Die generative KI erstellt Inhalte.';
          result.style.color = 'green';
        } else {
          result.textContent = '❌ Macht nix. Probiers gleich nochmal! 🙃';
          result.style.color = 'red';
        }
      }
    });

    if (!selected) {
      result.textContent = '⚠️ Bitte wähle eine Antwort aus.';
      result.style.color = 'orange';
    }
  })(this);
">

  <label>
    <input type="radio" name="answer" value="correct">
    erstellen
  </label><br>

  <label>
    <input type="radio" name="answer" value="wrong">
    kopieren
  </label><br>

  <label>
    <input type="radio" name="answer" value="wrong">
    verwalten
  </label><br>

  <label>
    <input type="radio" name="answer" value="wrong">
    erdenken
  </label><br><br>

  <button type="submit">Antwort prüfen</button>

  <p class="result" style="font-weight: bold;"></p>
</form>
"""

display(HTML(html_code))

Code-Zelle 48

from IPython.display import display, HTML

html_code = """
<h2 style="margin-bottom: 20px;">Wie viele Ebenen gibt es bei jeder KI?</h2>

<form onsubmit="event.preventDefault();
  (function(form) {
    const answers = form.querySelectorAll('input[name=answer]');
    const result = form.querySelector('.result');
    let selected = false;

    answers.forEach(answer => {
      if (answer.checked) {
        selected = true;
        if (answer.value === 'correct') {
          result.textContent = '✅ Richtig! Es gibt 3 Ebenen.';
          result.style.color = 'green';
        } else {
          result.textContent = '❌ Macht nix. Probiers gleich nochmal! 🙃';
          result.style.color = 'red';
        }
      }
    });

    if (!selected) {
      result.textContent = '⚠️ Bitte wähle eine Antwort aus.';
      result.style.color = 'orange';
    }
  })(this);
">

  <label>
    <input type="radio" name="answer" value="wrong"> 1
  </label><br>

  <label>
    <input type="radio" name="answer" value="wrong"> 2
  </label><br>

  <label>
    <input type="radio" name="answer" value="correct"> 3
  </label><br>

  <label>
    <input type="radio" name="answer" value="wrong"> 4
  </label><br><br>

  <button type="submit">Antwort prüfen</button>

  <p class="result" style="font-weight: bold;"></p>
</form>
"""

display(HTML(html_code))

Code-Zelle 50

from IPython.display import display, HTML

html_code = """
<h2 style="margin-bottom: 20px;">Was könnte die Eingabe Ebene sein?</h2>

<form onsubmit="event.preventDefault(); checkAnswer(this)">
  <label>
    <input type="radio" name="answer" value="wrong"> Die Homepage
  </label><br>

  <label>
    <input type="radio" name="answer" value="wrong"> Der Code
  </label><br>

  <label>
    <input type="radio" name="answer" value="correct"> Der Prompt
  </label><br>

  <label>
    <input type="radio" name="answer" value="wrong"> Die Parameter
  </label><br><br>

  <button type="submit">Antwort prüfen</button>

  <p class="result" style="font-weight: bold;"></p>
</form>

<script>
function checkAnswer(form) {
  const answers = form.querySelectorAll('input[name="answer"]');
  const result = form.querySelector('.result');
  let selected = false;

  answers.forEach(answer => {
    if (answer.checked) {
      selected = true;
      if (answer.value === "correct") {
        result.textContent = "✅ Richtig! Prompten bedeutet eingeben!";
        result.style.color = "green";
      } else {
        result.textContent = "❌ Macht nix. Probiers gleich nochmal! 🙃";
        result.style.color = "red";
      }
    }
  });

  if (!selected) {
    result.textContent = "⚠️ Bitte wähle eine Antwort aus.";
    result.style.color = "orange";
  }
}
</script>
"""

display(HTML(html_code))

Code-Zelle 51

from IPython.display import display, HTML

html_code = """
<h2 style="margin-bottom: 20px;">Was könnte die Ausgabe Ebene sein?</h2>

<form onsubmit="event.preventDefault(); 
  (function(form) {
    const answers = form.querySelectorAll('input[name=answer]');
    const result = form.querySelector('.result');
    let selected = false;

    answers.forEach(answer => {
      if (answer.checked) {
        selected = true;
        if (answer.value === 'correct') {
          result.textContent = '✅ Richtig! Die Ausgabe ist das Bild, das generiert wird!';
          result.style.color = 'green';
        } else {
          result.textContent = '❌ Macht nix. Probiers gleich nochmal! 🙃';
          result.style.color = 'red';
        }
      }
    });

    if (!selected) {
      result.textContent = '⚠️ Bitte wähle eine Antwort aus.';
      result.style.color = 'orange';
    }
  })(this);
">

  <label>
    <input type="radio" name="answer" value="correct">
    Das generierte Bild
  </label><br>

  <label>
    <input type="radio" name="answer" value="wrong">
    Die Zeit die es braucht
  </label><br>

  <label>
    <input type="radio" name="answer" value="wrong">
    Unsere Interpretation
  </label><br>

  <label>
    <input type="radio" name="answer" value="wrong">
    Der gesamte Prozess
  </label><br><br>

  <button type="submit">Antwort prüfen</button>

  <p class="result" style="font-weight: bold;"></p>
</form>
"""

display(HTML(html_code))

Code-Zelle 54

from IPython.display import display, HTML

html_code = """
<h2 style="margin-bottom: 20px;">Wo kommen neuronale Netzwerke noch vor?</h2>

<form id="quiz2">
  <label>
    <input type="radio" name="answer2" value="wrong">
    in der Fischerei
  </label><br>

  <label>
    <input type="radio" name="answer2" value="correct">
    im Gehirn
  </label><br>

  <label>
    <input type="radio" name="answer2" value="wrong">
    im Werkzeugkasten
  </label><br>

  <label>
    <input type="radio" name="answer2" value="wrong">
    in der Schule
  </label><br><br>

  <button type="button" onclick="checkAnswer2()">Antwort prüfen</button>
</form>

<p id="result2" style="font-weight: bold;"></p>

<script>
function checkAnswer2() {
  const answers = document.getElementsByName("answer2");
  let result = document.getElementById("result2");
  let selected = false;

  for (let i = 0; i < answers.length; i++) {
    if (answers[i].checked) {
      selected = true;
      if (answers[i].value === "correct") {
        result.innerHTML = "✅ Richtig! Neuronale Netzwerke kommen im Gehirn vor.";
        result.style.color = "green";
      } else {
        result.innerHTML = "❌ Macht nix. Noch ein Versuch! 🙃";
        result.style.color = "red";
      }
    }
  }

  if (!selected) {
    result.innerHTML = "⚠️ Bitte wähle eine Antwort aus.";
    result.style.color = "orange";
  }
}
</script>
"""

display(HTML(html_code))

Code-Zelle 63

from IPython.display import display, HTML

html_code = """
<h2 style="margin-bottom: 20px;">Was wird gebraucht, um eine KI zu trainieren?</h2>

<form onsubmit="event.preventDefault(); 
  (function(form) {
    const answers = form.querySelectorAll('input[name=answer]');
    const result = form.querySelector('.result');
    let selected = false;

    answers.forEach(answer => {
      if (answer.checked) {
        selected = true;
        if (answer.value === 'correct') {
          result.textContent = '✅ Richtig! Als 1. Schritt wird mit unbearbeitete Daten trainiert!';
          result.style.color = 'green';
        } else {
          result.textContent = '❌ Macht nix. Probiers gleich nochmal! 🙃';
          result.style.color = 'red';
        }
      }
    });

    if (!selected) {
      result.textContent = '⚠️ Bitte wähle eine Antwort aus.';
      result.style.color = 'orange';
    }
  })(this);
">

  <label>
    <input type="radio" name="answer" value="wrong">
    medizinische Befunde
  </label><br>

  <label>
    <input type="radio" name="answer" value="wrong">
    gelabelte Daten
  </label><br>

  <label>
    <input type="radio" name="answer" value="wrong">
    Videos
  </label><br>

  <label>
    <input type="radio" name="answer" value="correct">
    unbearbeitete Daten
  </label><br><br>

  <button type="submit">Antwort prüfen</button>

  <p class="result" style="font-weight: bold;"></p>
</form>
"""

display(HTML(html_code))

Code-Zelle 64

from IPython.display import display, HTML

html_code = """
<h2 style="margin-bottom: 20px;">Eine KI soll auf Grundlage von Fotos Hautkrebs früherkennen. Womit müssen wir sie tunen?</h2>

<form onsubmit="event.preventDefault(); 
  (function(form) {
    const answers = form.querySelectorAll('input[name=answer]');
    const result = form.querySelector('.result');
    let selected = false;

    answers.forEach(answer => {
      if (answer.checked) {
        selected = true;
        if (answer.value === 'correct') {
          result.textContent = '✅ Richtig! Die KI wird anhand vorbearbeiteter Daten trainiert, um spezifische Aufgaben zu lösen';
          result.style.color = 'green';
        } else {
          result.textContent = '❌ Macht nix. Probiers gleich nochmal! 🙃';
          result.style.color = 'red';
        }
      }
    });

    if (!selected) {
      result.textContent = '⚠️ Bitte wähle eine Antwort aus.';
      result.style.color = 'orange';
    }
  })(this);
">

  <label>
    <input type="radio" name="answer" value="wrong">
    Fotos, auf denen Haut zu sehen ist
  </label><br>

  <label>
    <input type="radio" name="answer" value="correct">
    Fotos, auf denen markiert ist, ob es sich um Hautkrebs handelt
  </label><br>

  <label>
    <input type="radio" name="answer" value="wrong">
    Transkripte von medizinischen Gesprächen
  </label><br>

  <label>
    <input type="radio" name="answer" value="wrong">
    verschiedene Fotos mit vielen Motiven
  </label><br><br>

  <button type="submit">Antwort prüfen</button>

  <p class="result" style="font-weight: bold;"></p>
</form>
"""

display(HTML(html_code))

Code-Zelle 68

import ipywidgets as widgets

widgets.Textarea(
    value='Schreibe hier deine Überlegungen auf:',
    placeholder='Type something',
    layout=widgets.Layout(width='600px'),
    disabled=False
)

Code-Zelle 76

import ipywidgets as widgets

widgets.Textarea(
    value='Schreibe hier deine Gedanken auf:',
    placeholder='Type something',
    layout=widgets.Layout(width='600px'),
    disabled=False
)

Technik - Körperbilder - Selbstermächtigung

Erstelle deinen eigenen Wrestling-Charakter!

DIE WELT DES WRESTLING

Und? Hast du?

Was sind deine Gedanken/Gefühle zu Wrestling?

👉 Klick hier! 👈

👉 Und hier! 👈

👉 Letzter Klick! 👈

Was fällt dir hinsichtlich der Körper dieser Charaktere auf?

Gibt es eine spezielle "Norm", wie alle ausschauen sollen? Wie unterscheiden sie sich?

Jetzt bist du dran! Prompte deine eigene Wrestling-Figur:

Überlege dir, was deine Wrestling-Figur für Eigenschaften haben soll.

Wie soll meine Wrestling-Figur sein?

💥 Jetzt erstellst du ein Bild deiner Wrestling-Figur!!! 💥

👉 Klick! 👈

Hast du dein Bild erstellt?

Wenn du willst, können wir bei deinem nächsten technischen Museum Wien Besuch deine Sammelkarte im techLAB 🎇lasercutten🎇!

So oder so ähnlich könnte deine Sammelkarte aussehen 😍

👉 Klick! 👈

Welche Ähnlichkeiten hatten alle KI‑generierten Bilder? Was ist immer wieder vorgekommen?

👉 Klick! 👈

Aber wie funktioniert das Ganze jetzt?

Was bedeutet generieren?

👉 Klick! 👈

Wie viele Ebenen gibt es bei jeder KI?

👉 Klick! 👈

Was könnte die Eingabe Ebene sein?

Was könnte die Ausgabe Ebene sein?

Aber was ist jetzt die versteckte Ebene???

Wo kommen neuronale Netzwerke noch vor?

👉 Klick! 👈

Wie kommt die versteckte Ebene zustande?

👉 Klick! für Phase 1 👈

👉 Klick! für Phase 2 👈

👉 Klick! für Phase 3 👈

👉 Klick! Für Zusammenfassung 👈

Was wird gebraucht, um eine KI zu trainieren?

Eine KI soll auf Grundlage von Fotos Hautkrebs früherkennen. Womit müssen wir sie tunen?

Aber woher kommen jetzt die Daten für das Training???

Oder:

Wo gibt es überall Bilder im Internet?

👉 Klick! 👈

Hier werden die Daten verarbeitet:

Abschlussfrage:

Wenn ich der KI nur Bilder von Tasteninstrumente füttere, kann sie dann ein Bild von einem Blasinstrument erzeugen?

Was sagt uns das generell darüber, was KI kann und was KI nicht kann?

Danke fürs Mitmachen!!!