# KI verstehen – von den Anfängen bis zu Agenten-Schwärmen

CANCOM-Vortragsdeck im HTML-Format. Ein File, kein Build, kein Bundler –
per Doppelklick lauffähig, per Mail/Teams/SharePoint verteilbar.

## Dateien

| Datei | Zweck |
|---|---|
| `ki-verstehen.html` | Das eigentliche Deck. 44 Slides, 1920×1080, per `E` editierbar. |
| `config.html` | Präsentations-Konfigurator: Slides für den Vortrag ein-/ausblenden. |
| `slides-manifest.js` | Gemeinsame Titel-/Reihenfolge-Liste, von Deck **und** Konfigurator geladen. |
| `Sprecher.md` | Sprecherkarten je Folie – **nicht** Teil des Docker-Images. |
| `font-vorschau.html` | Vergleichsseite für Headline-Schriften (Rückblick auf die Font-Auswahl). |
| `DESIGN.md` | Design-System: Tokens, Typografie, Layout, Motion – verbindlich für Umbauten. |
| `PATTERNS.md` | Copy-Paste-Bausteine für einzelne Slide-Typen. |
| `deck-template.html` | Leerer Startpunkt für ein neues Deck im selben Look. |
| `Dockerfile`, `docker-compose.yml`, `nginx.conf` | Deck als Webdienst ausliefern (siehe unten). |

## Präsentieren

```bash
open ki-verstehen.html
```

- `→` / Leertaste / Mausrad / Swipe: nächste Slide · `←`: vorherige · `Home`/`End`: Anfang/Ende
- `E`: Live-Editor (Text direkt auf der Bühne korrigieren, z. B. bei Kundenwunsch „anderes Wort")
- `C` oder das ⚙-Symbol oben links (Hotzone): zum Konfigurator
- 🔈-Symbol unten rechts auf der Titelfolie: erzeugter Ambient-Sound (Web Audio, keine externe Datei)

## Slides für einen Vortrag auswählen

`config.html` öffnen, Häkchen setzen/entfernen, auf „Speichern & zur Präsentation" klicken.
Die Auswahl wird als URL-Parameter ans Deck übergeben (zuverlässig auch bei `file://`, wo
`localStorage` zwischen einzelnen HTML-Dateien nicht immer geteilt wird – v. a. Safari).
Titelfolie und Closing sind fest verankert und lassen sich nicht abwählen.

## Aufbau des Decks (36 Slides in 7 Kapiteln)

1. **Titel** + **Hook** (Handzeichen-Frage)
2. **Kapitel 1 · Wie alles begann** – Zeitstrahl, verschachtelte Kreise (KI/ML/DL/GenAI), wie eine Maschine lernt, ANI vs. AGI
3. **Kapitel 2 · Wie ein LLM funktioniert** – Mitmach-Spiel „Alle meine Entchen …", Autovervollständigung, Token & Parameter, Reasoning-Modelle, System-/User-Prompt & Context, Kontext-Limit & Compact
4. **Kapitel 3 · Die Modell-Landschaft** – woher das Wissen kommt, Anbieter-Übersicht, Geschäftsmodelle, SEO vs. GEO, wo man Modelle findet
5. **Kapitel 4 · Vom Chatbot zum Agenten** – Eskalationsleiter, MCP
6. **Kapitel 5 · Die Grenzen der KI** – Schwächen-Übersicht, Halluzination im Detail
7. **Kapitel 6 · Sicherheit im Umgang mit KI** – Prompt Injection, weitere Security-Punkte
8. **Kapitel 7 · Praxis & Ausblick** – Tipps, Ausblick, Glossar, Closing

Begriffe wie *Token*, *LLM*, *MCP*, *GPT*, *ANI/AGI* u. a. sind im Fließtext anklickbar
(gepunktete Unterstreichung) und öffnen eine kurze Erklärung.

## Als Webdienst betreiben (Docker)

Statt die Datei zu verteilen, kann das Deck auch als kleiner Webdienst laufen –
praktisch für Präsentationsrechner, Intranet oder Teilnehmer-Zugriff im Nachgang.

```bash
docker compose up -d --build
```

Danach: **http://localhost:8080** → öffnet direkt das Deck, `…/config.html` den Konfigurator.

```bash
docker compose down          # stoppen
docker compose logs -f deck  # Logs ansehen
```

Ein schlanker `nginx:alpine` liefert die statischen Dateien aus (gzip halbiert die
Übertragung auf ~44 KB). Port lässt sich in `docker-compose.yml` ändern.

**Was bewusst NICHT im Image liegt:** `Sprecher.md` (Sprechernotizen!), `DESIGN.md`,
`PATTERNS.md`, `deck-template.html` und die lokalen Backup-Dateien. Das Dockerfile
kopiert einzelne Dateien statt `COPY . .` – beim Ergänzen neuer Assets muss die Liste
im `Dockerfile` mitgepflegt werden, sonst fehlen sie im Container.

Zum Weiterbauen am Deck ohne Rebuild: die `volumes:`-Zeilen in `docker-compose.yml`
einkommentieren, dann werden die Dateien live aus dem Projektordner gelesen.

Nebeneffekt gegenüber `file://`: Über `http://localhost` gilt die Seite als sicherer
Kontext – der 💾-Button im Edit-Modus kann dort direkt in den gewählten Ordner speichern.

## Neues Deck bauen

Siehe `DESIGN.md` Abschnitt 8 und `PATTERNS.md` für Copy-Paste-Bausteine.
`deck-template.html` kopieren, umbenennen, Slides zusammenstellen.