|
|
# Erstelle einen Chat-Assistenten mit KI
|
|
|
|
|
|
Erinnerst du dich an Star Trek, als die Crew zwanglos mit dem Computer des Raumschiffs sprach, ihm komplexe Fragen stellte und durchdachte Antworten erhielt? Was in den 1960er Jahren wie reine Science-Fiction erschien, kannst du heute mit den Webtechnologien, die du bereits kennst, selbst bauen.
|
|
|
|
|
|
In dieser Lektion erstellen wir einen KI-Chat-Assistenten mithilfe von HTML, CSS, JavaScript und etwas Backend-Integration. Du wirst entdecken, wie die gleichen Fähigkeiten, die du gelernt hast, genutzt werden können, um leistungsstarke KI-Dienste zu verbinden, die Kontext verstehen und sinnvolle Antworten generieren können.
|
|
|
|
|
|
Stell dir KI wie den Zugriff auf eine riesige Bibliothek vor, die nicht nur Informationen findet, sondern sie auch zu kohärenten Antworten zusammenführt, die auf deine spezifischen Fragen zugeschnitten sind. Anstatt Tausende von Seiten zu durchsuchen, erhältst du direkte, kontextbezogene Antworten.
|
|
|
|
|
|
Die Integration erfolgt durch bekannte Webtechnologien, die zusammenarbeiten. HTML erstellt die Chat-Oberfläche, CSS übernimmt das visuelle Design, JavaScript steuert die Benutzerinteraktionen und ein Backend-API verbindet alles mit KI-Diensten. Es ist vergleichbar mit den unterschiedlichen Sektionen eines Orchesters, die zusammen eine Symphonie schaffen.
|
|
|
|
|
|
Wir bauen im Grunde eine Brücke zwischen natürlicher menschlicher Kommunikation und maschineller Verarbeitung. Du lernst sowohl die technische Umsetzung der KI-Dienstintegration als auch die Designmuster, die Interaktionen intuitiv wirken lassen.
|
|
|
|
|
|
Am Ende dieser Lektion wird sich die KI-Integration weniger wie ein mysteriöser Prozess anfühlen und mehr wie eine weitere API, mit der du arbeiten kannst. Du wirst die grundlegenden Muster verstehen, die Anwendungen wie ChatGPT und Claude antreiben – basierend auf den gleichen Webentwicklungsprinzipien, die du gelernt hast.
|
|
|
|
|
|
## ⚡ Was du in den nächsten 5 Minuten machen kannst
|
|
|
|
|
|
**Schneller Einstiegspfad für viel beschäftigte Entwickler**
|
|
|
|
|
|
```mermaid
|
|
|
flowchart LR
|
|
|
A[⚡ 5 Minuten] --> B[GitHub-Token bekommen]
|
|
|
B --> C[KI-Spielplatz testen]
|
|
|
C --> D[Python-Code kopieren]
|
|
|
D --> E[KI-Antworten ansehen]
|
|
|
```
|
|
|
- **Minute 1**: Besuche [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground) und erstelle ein persönliches Zugriffstoken
|
|
|
- **Minute 2**: Teste KI-Interaktionen direkt in der Playground-Oberfläche
|
|
|
- **Minute 3**: Klicke auf den Reiter „Code“ und kopiere den Python-Schnipsel
|
|
|
- **Minute 4**: Führe den Code lokal mit deinem Token aus: `GITHUB_TOKEN=dein_token python test.py`
|
|
|
- **Minute 5**: Sieh zu, wie deine erste KI-Antwort durch deinen eigenen Code generiert wird
|
|
|
|
|
|
**Test-Code zum schnellen Ausprobieren**:
|
|
|
```python
|
|
|
import os
|
|
|
from openai import OpenAI
|
|
|
|
|
|
client = OpenAI(
|
|
|
base_url="https://models.github.ai/inference",
|
|
|
api_key="your_token_here"
|
|
|
)
|
|
|
|
|
|
response = client.chat.completions.create(
|
|
|
messages=[{"role": "user", "content": "Hello AI!"}],
|
|
|
model="openai/gpt-4o-mini"
|
|
|
)
|
|
|
|
|
|
print(response.choices[0].message.content)
|
|
|
```
|
|
|
|
|
|
**Warum das wichtig ist**: Innerhalb von 5 Minuten wirst du die Magie programmatischer KI-Interaktion erleben. Das ist der grundlegende Baustein, der jede KI-Anwendung antreibt, die du benutzt.
|
|
|
|
|
|
So sieht dein fertiges Projekt aus:
|
|
|
|
|
|
|
|
|
|
|
|
## 🗺️ Deine Lernreise durch die KI-Anwendungsentwicklung
|
|
|
|
|
|
```mermaid
|
|
|
journey
|
|
|
title Von Webentwicklung zur KI-Integration
|
|
|
section Grundlagen der KI verstehen
|
|
|
Generative KI-Konzepte entdecken: 4: You
|
|
|
GitHub Models Plattform erkunden: 6: You
|
|
|
KI-Parameter und Prompts meistern: 8: You
|
|
|
section Backend-Integration
|
|
|
Python API-Server erstellen: 5: You
|
|
|
KI-Funktionsaufrufe implementieren: 7: You
|
|
|
Asynchrone Operationen handhaben: 8: You
|
|
|
section Frontend-Entwicklung
|
|
|
Modernes Chat-Interface erstellen: 6: You
|
|
|
Echtzeit-Interaktionen meistern: 8: You
|
|
|
Responsive Benutzererfahrung bauen: 9: You
|
|
|
section Professionelle Anwendung
|
|
|
Komplettes KI-System bereitstellen: 7: You
|
|
|
Leistungsoptimierungsmuster optimieren: 8: You
|
|
|
Produktionsreife App erstellen: 9: You
|
|
|
```
|
|
|
**Dein Ziel auf der Reise**: Am Ende dieser Lektion hast du eine vollständige, KI-gestützte Anwendung gebaut, die die gleichen Technologien und Muster nutzt, welche moderne KI-Assistenten wie ChatGPT, Claude und Google Bard antreiben.
|
|
|
|
|
|
## KI verstehen: Vom Geheimnis zur Meisterschaft
|
|
|
|
|
|
Bevor wir in den Code eintauchen, lass uns verstehen, womit wir es zu tun haben. Wenn du schon APIs verwendet hast, kennst du das Grundmuster: eine Anfrage senden, eine Antwort erhalten.
|
|
|
|
|
|
KI-APIs folgen einem ähnlichen Prinzip, aber anstatt vorgefertigte Daten aus einer Datenbank abzurufen, generieren sie neue Antworten basierend auf Mustern, die aus riesigen Textmengen gelernt wurden. Das ist wie der Unterschied zwischen einem Bibliothekskatalogsystem und einem kenntnisreichen Bibliothekar, der Informationen aus mehreren Quellen zusammenfassen kann.
|
|
|
|
|
|
### Was ist „Generative KI“ wirklich?
|
|
|
|
|
|
Denk daran, wie der Stein von Rosetta es Gelehrten erlaubte, ägyptische Hieroglyphen durch Mustererkennung zwischen bekannten und unbekannten Sprachen zu verstehen. KI-Modelle funktionieren ähnlich – sie finden Muster in riesigen Textmengen, um zu verstehen, wie Sprache funktioniert, und nutzen diese Muster, um passende Antworten auf neue Fragen zu generieren.
|
|
|
|
|
|
**Einfach erklärt mit einem Vergleich:**
|
|
|
- **Traditionelle Datenbank**: Wie wenn du deine Geburtsurkunde anfragst – du bekommst jedes Mal dasselbe Dokument
|
|
|
- **Suchmaschine**: Wie wenn du den Bibliothekar bittest, Bücher über Katzen zu finden – er zeigt dir, was verfügbar ist
|
|
|
- **Generative KI**: Wie wenn du einen kenntnisreichen Freund nach Katzen fragst – er erzählt dir interessante Dinge in seinen eigenen Worten, zugeschnitten auf das, was du wissen möchtest
|
|
|
|
|
|
```mermaid
|
|
|
graph LR
|
|
|
A[Deine Frage] --> B[KI-Modell]
|
|
|
B --> C[Mustererkennung]
|
|
|
C --> D[Inhaltserstellung]
|
|
|
D --> E[Kontextbezogene Antwort]
|
|
|
|
|
|
F[Trainingsdaten<br/>Bücher, Artikel, Web] --> B
|
|
|
```
|
|
|
### Wie KI-Modelle lernen (Die einfache Version)
|
|
|
|
|
|
KI-Modelle lernen durch das Studium riesiger Datensätze, die Texte aus Büchern, Artikeln und Gesprächen enthalten. Dabei erkennen sie Muster in:
|
|
|
- Wie Gedanken in schriftlicher Kommunikation strukturiert sind
|
|
|
- Welche Wörter häufig zusammen erscheinen
|
|
|
- Wie sich Gespräche typischerweise entwickeln
|
|
|
- Kontextuelle Unterschiede zwischen formeller und informeller Kommunikation
|
|
|
|
|
|
**Es ist ähnlich wie Archäologen, die alte Sprachen entziffern**: Sie analysieren Tausende von Beispielen, um Grammatik, Wortschatz und kulturellen Kontext zu verstehen und werden schließlich in der Lage, neue Texte mit den gelernten Mustern zu interpretieren.
|
|
|
|
|
|
### Warum GitHub Models?
|
|
|
|
|
|
Wir nutzen GitHub Models aus einem praktischen Grund – es gibt uns Zugang zu KI auf Enterprise-Niveau, ohne dass wir unsere eigene KI-Infrastruktur aufbauen müssen (was du mir glauben kannst, dass du gerade jetzt nicht machen willst!). Stell es dir vor wie die Nutzung einer Wetter-API, anstatt selbst Wetterstationen überall aufzustellen, um das Wetter vorherzusagen.
|
|
|
|
|
|
Es ist im Grunde „KI als Dienstleistung“, und das Beste daran? Du kannst kostenlos starten und experimentieren, ohne eine riesige Rechnung befürchten zu müssen.
|
|
|
|
|
|
```mermaid
|
|
|
graph LR
|
|
|
A[Frontend Chat-Benutzeroberfläche] --> B[Ihre Backend-API]
|
|
|
B --> C[GitHub Modelle API]
|
|
|
C --> D[KI Modellverarbeitung]
|
|
|
D --> C
|
|
|
C --> B
|
|
|
B --> A
|
|
|
```
|
|
|
Wir werden GitHub Models für unsere Backend-Integration verwenden, die professionell leistungsfähige KI-Funktionalitäten über eine Entwickler-freundliche Schnittstelle bereitstellt. Der [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground) dient als Testumgebung, in der du mit verschiedenen KI-Modellen experimentieren und deren Fähigkeiten verstehen kannst, bevor du sie im Code einsetzt.
|
|
|
|
|
|
## 🧠 Ökosystem der KI-Anwendungsentwicklung
|
|
|
|
|
|
```mermaid
|
|
|
mindmap
|
|
|
root((KI Entwicklung))
|
|
|
Verständnis der KI
|
|
|
Generative Modelle
|
|
|
Mustererkennung
|
|
|
Inhaltserstellung
|
|
|
Kontextverständnis
|
|
|
Antwortsynthese
|
|
|
KI Parameter
|
|
|
Temperatursteuerung
|
|
|
Token Begrenzungen
|
|
|
Top-p Filterung
|
|
|
Systemaufforderungen
|
|
|
Backend Architektur
|
|
|
API Integration
|
|
|
GitHub Modelle
|
|
|
Authentifizierung
|
|
|
Anfrageverwaltung
|
|
|
Fehlerverwaltung
|
|
|
Python Infrastruktur
|
|
|
FastAPI Framework
|
|
|
Asynchrone Operationen
|
|
|
Umgebungsicherheit
|
|
|
CORS Konfiguration
|
|
|
Frontend Erfahrung
|
|
|
Chat Schnittstelle
|
|
|
Echtzeit-Updates
|
|
|
Nachrichtenverlauf
|
|
|
Nutzerfeedback
|
|
|
Ladezustände
|
|
|
Moderne Web-Technologien
|
|
|
ES6 Klassen
|
|
|
Async/Await
|
|
|
DOM Manipulation
|
|
|
Ereignisverwaltung
|
|
|
Professionelle Muster
|
|
|
Sicherheitsbestimmungen
|
|
|
Token Verwaltung
|
|
|
Eingabevalidierung
|
|
|
XSS Verhinderung
|
|
|
Fehlergrenzen
|
|
|
Produktionsbereitschaft
|
|
|
Leistungsoptimierung
|
|
|
Responsives Design
|
|
|
Barrierefreiheit
|
|
|
Teststrategien
|
|
|
```
|
|
|
**Kernprinzip**: Die Entwicklung von KI-Anwendungen kombiniert traditionelle Webentwicklungsfähigkeiten mit KI-Dienstintegrationen und erschafft intelligente Anwendungen, die sich natürlich und reaktionsfreudig für Nutzer anfühlen.
|
|
|
|
|
|
|
|
|
|
|
|
**Das macht den Playground so nützlich:**
|
|
|
- **Teste** verschiedene KI-Modelle wie GPT-4o-mini, Claude und andere (alles kostenlos!)
|
|
|
- **Prüfe** deine Ideen und Eingaben, bevor du Code schreibst
|
|
|
- **Erhalte** gebrauchsfertige Code-Schnipsel in deiner Lieblingsprogrammiersprache
|
|
|
- **Passe** Einstellungen wie Kreativitätsgrad und Antwortlänge an, um zu sehen, wie das die Ausgabe beeinflusst
|
|
|
|
|
|
Wenn du ein wenig gespielt hast, klick einfach auf den Reiter „Code“ und wähle deine Programmiersprache, um den Implementierungscode zu erhalten, den du brauchst.
|
|
|
|
|
|
|
|
|
|
|
|
## Einrichtung der Python-Backend-Integration
|
|
|
|
|
|
Jetzt implementieren wir die KI-Integration mit Python. Python ist exzellent für KI-Anwendungen wegen seiner einfachen Syntax und leistungsstarken Bibliotheken. Wir starten mit dem Code aus dem GitHub Models Playground und refaktorieren ihn dann zu einer wiederverwendbaren, produktionsreifen Funktion.
|
|
|
|
|
|
### Verständnis der Basisimplementierung
|
|
|
|
|
|
Wenn du den Python-Code aus dem Playground holst, bekommst du etwa Folgendes. Kein Stress, wenn das zuerst viel aussieht – wir gehen es Schritt für Schritt durch:
|
|
|
|
|
|
```python
|
|
|
"""Run this model in Python
|
|
|
|
|
|
> pip install openai
|
|
|
"""
|
|
|
import os
|
|
|
from openai import OpenAI
|
|
|
|
|
|
# Um sich mit dem Modell zu authentifizieren, müssen Sie ein persönliches Zugriffstoken (PAT) in Ihren GitHub-Einstellungen generieren.
|
|
|
# Erstellen Sie Ihr PAT-Token, indem Sie den Anweisungen hier folgen: https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens
|
|
|
client = OpenAI(
|
|
|
base_url="https://models.github.ai/inference",
|
|
|
api_key=os.environ["GITHUB_TOKEN"],
|
|
|
)
|
|
|
|
|
|
response = client.chat.completions.create(
|
|
|
messages=[
|
|
|
{
|
|
|
"role": "system",
|
|
|
"content": "",
|
|
|
},
|
|
|
{
|
|
|
"role": "user",
|
|
|
"content": "What is the capital of France?",
|
|
|
}
|
|
|
],
|
|
|
model="openai/gpt-4o-mini",
|
|
|
temperature=1,
|
|
|
max_tokens=4096,
|
|
|
top_p=1
|
|
|
)
|
|
|
|
|
|
print(response.choices[0].message.content)
|
|
|
```
|
|
|
|
|
|
**Das passiert in diesem Code:**
|
|
|
- **Importieren** wir die benötigten Werkzeuge: `os` zum Lesen von Umgebungsvariablen und `OpenAI` für die Kommunikation mit der KI
|
|
|
- **Richten** wir den OpenAI-Client so ein, dass er auf die GitHub-KI-Server statt direkt auf OpenAI zugreift
|
|
|
- **Authentifizieren** wir uns mit einem speziellen GitHub-Token (dazu gleich mehr!)
|
|
|
- **Strukturieren** wir unsere Unterhaltung mit verschiedenen „Rollen“ – vergleichbar mit der Szenerie bei einem Theaterstück
|
|
|
- **Senden** wir unsere Anfrage an die KI mit einigen Feinabstimmungsparametern
|
|
|
- **Extrahieren** wir den eigentlichen Antworttext aus allen zurückgegebenen Daten
|
|
|
|
|
|
### Verständnis der Nachrichtenrollen: Das KI-Gesprächsrahmenwerk
|
|
|
|
|
|
KI-Konversationen nutzen eine spezifische Struktur mit verschiedenen „Rollen“, die unterschiedliche Zwecke erfüllen:
|
|
|
|
|
|
```python
|
|
|
messages=[
|
|
|
{
|
|
|
"role": "system",
|
|
|
"content": "You are a helpful assistant who explains things simply."
|
|
|
},
|
|
|
{
|
|
|
"role": "user",
|
|
|
"content": "What is machine learning?"
|
|
|
}
|
|
|
]
|
|
|
```
|
|
|
|
|
|
**Stell dir das vor wie eine Regieanweisung für ein Theaterstück:**
|
|
|
- **System-Rolle**: Wie Regieanweisungen für einen Schauspieler – sie sagt der KI, wie sie sich verhalten, welche Persönlichkeit sie haben und wie sie antworten soll
|
|
|
- **User-Rolle**: Die eigentliche Frage oder Nachricht von der Person, die deine Anwendung benutzt
|
|
|
- **Assistant-Rolle**: Die Antwort der KI (diese schickst du nicht mit, aber sie erscheint im Gesprächsverlauf)
|
|
|
|
|
|
**Echtes Beispiel**: Stell dir vor, du stellst einem Freund auf einer Party jemandem vor:
|
|
|
- **System-Nachricht**: „Das ist meine Freundin Sarah, sie ist Ärztin und erklärt medizinische Konzepte besonders einfach“
|
|
|
- **User-Nachricht**: „Kannst du erklären, wie Impfstoffe funktionieren?“
|
|
|
- **Assistant-Antwort**: Sarah antwortet als freundliche Ärztin, nicht als Anwältin oder Köchin
|
|
|
|
|
|
### Verständnis der KI-Parameter: Feineinstellung des Antwortverhaltens
|
|
|
|
|
|
Die numerischen Parameter in KI-API-Aufrufen steuern, wie das Modell Antworten generiert. Diese Einstellungen ermöglichen es dir, das Verhalten der KI an verschiedene Anwendungsfälle anzupassen:
|
|
|
|
|
|
#### Temperatur (0,0 bis 2,0): Der Kreativitätsregler
|
|
|
|
|
|
**Was sie bewirkt**: Steuert, wie kreativ oder vorhersagbar die Antworten der KI sind.
|
|
|
|
|
|
**Denk daran wie beim Improvisieren eines Jazzmusikers:**
|
|
|
- **Temperatur = 0,1**: Immer dieselbe Melodie spielen (sehr vorhersehbar)
|
|
|
- **Temperatur = 0,7**: Einige geschmackvolle Variationen hinzufügen, aber erkennbar bleiben (ausgewogene Kreativität)
|
|
|
- **Temperatur = 1,5**: Voll experimenteller Jazz mit unerwarteten Wendungen (sehr unvorhersehbar)
|
|
|
|
|
|
```python
|
|
|
# Sehr vorhersehbare Antworten (gut für sachliche Fragen)
|
|
|
response = client.chat.completions.create(
|
|
|
messages=[{"role": "user", "content": "What is 2+2?"}],
|
|
|
temperature=0.1 # Wird fast immer "4" sagen
|
|
|
)
|
|
|
|
|
|
# Kreative Antworten (gut für Brainstorming)
|
|
|
response = client.chat.completions.create(
|
|
|
messages=[{"role": "user", "content": "Write a creative story opening"}],
|
|
|
temperature=1.2 # Wird einzigartige, unerwartete Geschichten erzeugen
|
|
|
)
|
|
|
```
|
|
|
|
|
|
#### Max Tokens (1 bis 4096+): Der Antwortlängenregler
|
|
|
|
|
|
**Was sie bewirkt**: Legt eine Grenze fest, wie lang die Antwort der KI sein kann.
|
|
|
|
|
|
**Tokens sind grob vergleichbar mit Wörtern** (etwa 1 Token = 0,75 Wörter in Englisch):
|
|
|
- **max_tokens=50**: Kurz und knapp (wie eine SMS)
|
|
|
- **max_tokens=500**: Ein schöner Absatz oder zwei
|
|
|
- **max_tokens=2000**: Eine ausführliche Erklärung mit Beispielen
|
|
|
|
|
|
```python
|
|
|
# Kurze, prägnante Antworten
|
|
|
response = client.chat.completions.create(
|
|
|
messages=[{"role": "user", "content": "Explain JavaScript"}],
|
|
|
max_tokens=100 # Erzwingt eine kurze Erklärung
|
|
|
)
|
|
|
|
|
|
# Detaillierte, umfassende Antworten
|
|
|
response = client.chat.completions.create(
|
|
|
messages=[{"role": "user", "content": "Explain JavaScript"}],
|
|
|
max_tokens=1500 # Ermöglicht ausführliche Erklärungen mit Beispielen
|
|
|
)
|
|
|
```
|
|
|
|
|
|
#### Top_p (0,0 bis 1,0): Der Fokusparameter
|
|
|
|
|
|
**Was sie bewirkt**: Steuert, wie sehr die KI sich auf die wahrscheinlichsten Antworten konzentriert.
|
|
|
|
|
|
**Stell dir vor, die KI hat einen riesigen Wortschatz, sortiert nach Wahrscheinlichkeit:**
|
|
|
- **top_p=0,1**: Berücksichtigt nur die obersten 10 % der wahrscheinlichsten Wörter (sehr fokussiert)
|
|
|
- **top_p=0,9**: Berücksichtigt 90 % der möglichen Wörter (kreativer)
|
|
|
- **top_p=1,0**: Berücksichtigt alles (maximale Vielfalt)
|
|
|
|
|
|
**Zum Beispiel**: Wenn du fragst „Der Himmel ist meistens...”
|
|
|
- **Niedriges top_p**: Sagt fast immer „blau“
|
|
|
- **Hohes top_p**: Könnte sagen „blau“, „bewölkt“, „weit“, „wechselhaft“, „schön“ usw.
|
|
|
|
|
|
### Das Ganze zusammenfügen: Parameterkombinationen für verschiedene Anwendungsfälle
|
|
|
|
|
|
```python
|
|
|
# Für sachliche, konsistente Antworten (wie ein Dokumentations-Bot)
|
|
|
factual_params = {
|
|
|
"temperature": 0.2,
|
|
|
"max_tokens": 300,
|
|
|
"top_p": 0.3
|
|
|
}
|
|
|
|
|
|
# Für kreative Schreibunterstützung
|
|
|
creative_params = {
|
|
|
"temperature": 1.1,
|
|
|
"max_tokens": 1000,
|
|
|
"top_p": 0.9
|
|
|
}
|
|
|
|
|
|
# Für gesprächige, hilfreiche Antworten (ausgewogen)
|
|
|
conversational_params = {
|
|
|
"temperature": 0.7,
|
|
|
"max_tokens": 500,
|
|
|
"top_p": 0.8
|
|
|
}
|
|
|
```
|
|
|
|
|
|
```mermaid
|
|
|
quadrantChart
|
|
|
title KI-Parameter-Optimierungs-Matrix
|
|
|
x-axis Geringe Kreativität --> Hohe Kreativität
|
|
|
y-axis Kurze Antwort --> Lange Antwort
|
|
|
|
|
|
quadrant-1 Kreative Inhalte
|
|
|
quadrant-2 Detaillierte Analyse
|
|
|
quadrant-3 Schnelle Fakten
|
|
|
quadrant-4 Konversationelle KI
|
|
|
|
|
|
Documentation Bot: [0.2, 0.3]
|
|
|
Customer Service: [0.4, 0.4]
|
|
|
General Assistant: [0.7, 0.5]
|
|
|
Creative Writer: [0.9, 0.9]
|
|
|
Brainstorming Tool: [0.8, 0.8]
|
|
|
```
|
|
|
**Warum diese Parameter wichtig sind**: Verschiedene Anwendungen benötigen unterschiedliche Arten von Antworten. Ein Kundenservice-Bot sollte konsistent und sachlich sein (niedrige Temperatur), während ein kreativer Schreibassistent fantasievoll und vielfältig sein sollte (hohe Temperatur). Mit diesen Parametern steuerst du die Persönlichkeit und den Stil deiner KI-Antworten.
|
|
|
```
|
|
|
|
|
|
**Here's what's happening in this code:**
|
|
|
- **We import** the tools we need: `os` for reading environment variables and `OpenAI` for talking to the AI
|
|
|
- **We set up** the OpenAI client to point to GitHub's AI servers instead of OpenAI directly
|
|
|
- **We authenticate** using a special GitHub token (more on that in a minute!)
|
|
|
- **We structure** our conversation with different "roles" – think of it like setting the scene for a play
|
|
|
- **We send** our request to the AI with some fine-tuning parameters
|
|
|
- **We extract** the actual response text from all the data that comes back
|
|
|
|
|
|
> 🔐 **Security Note**: Never hardcode API keys in your source code! Always use environment variables to store sensitive credentials like your `GITHUB_TOKEN`.
|
|
|
|
|
|
### Creating a Reusable AI Function
|
|
|
|
|
|
Let's refactor this code into a clean, reusable function that we can easily integrate into our web application:
|
|
|
|
|
|
```python
|
|
|
import asyncio
|
|
|
from openai import AsyncOpenAI
|
|
|
|
|
|
# Use AsyncOpenAI for better performance
|
|
|
client = AsyncOpenAI(
|
|
|
base_url="https://models.github.ai/inference",
|
|
|
api_key=os.environ["GITHUB_TOKEN"],
|
|
|
)
|
|
|
|
|
|
async def call_llm_async(prompt: str, system_message: str = "You are a helpful assistant."):
|
|
|
"""
|
|
|
Sends a prompt to the AI model asynchronously and returns the response.
|
|
|
|
|
|
Args:
|
|
|
prompt: The user's question or message
|
|
|
system_message: Instructions that define the AI's behavior and personality
|
|
|
|
|
|
Returns:
|
|
|
str: The AI's response to the prompt
|
|
|
"""
|
|
|
try:
|
|
|
response = await client.chat.completions.create(
|
|
|
messages=[
|
|
|
{
|
|
|
"role": "system",
|
|
|
"content": system_message,
|
|
|
},
|
|
|
{
|
|
|
"role": "user",
|
|
|
"content": prompt,
|
|
|
}
|
|
|
],
|
|
|
model="openai/gpt-4o-mini",
|
|
|
temperature=1,
|
|
|
max_tokens=4096,
|
|
|
top_p=1
|
|
|
)
|
|
|
return response.choices[0].message.content
|
|
|
except Exception as e:
|
|
|
logger.error(f"AI API error: {str(e)}")
|
|
|
return "I'm sorry, I'm having trouble processing your request right now."
|
|
|
|
|
|
# Backward compatibility function for synchronous calls
|
|
|
def call_llm(prompt: str, system_message: str = "You are a helpful assistant."):
|
|
|
"""Synchronous wrapper for async AI calls."""
|
|
|
return asyncio.run(call_llm_async(prompt, system_message))
|
|
|
```
|
|
|
|
|
|
**Diese verbesserte Funktion verstehen:**
|
|
|
- **Akzeptiert** zwei Parameter: das Eingabe-Prompt des Nutzers und eine optionale Systemnachricht
|
|
|
- **Bietet** eine Standard-Systemnachricht für allgemeines Assistentenverhalten
|
|
|
- **Verwendet** Python-Typangaben für bessere Code-Dokumentation
|
|
|
- **Enthält** einen detaillierten Docstring, der Zweck und Parameter erklärt
|
|
|
- **Gibt** nur den Antwortinhalt zurück, was die Nutzung in unserer Web-API erleichtert
|
|
|
- **Behält** dieselben Modellparameter für konsistentes KI-Verhalten bei
|
|
|
|
|
|
### Die Magie der System-Prompts: KI-Persönlichkeit programmieren
|
|
|
|
|
|
Wenn Parameter steuern, wie die KI denkt, dann steuern System-Prompts, wer die KI denkt, dass sie ist. Das ist ehrlich gesagt einer der coolsten Aspekte bei der Arbeit mit KI – du gibst der KI eine komplette Persönlichkeit, ein Expertenniveau und einen Kommunikationsstil vor.
|
|
|
|
|
|
**Denk an System-Prompts wie die Besetzung verschiedener Rollen für unterschiedliche Schauspieler:** Statt einen generischen Assistenten zu haben, kannst du Spezialisten für unterschiedliche Situationen schaffen. Brauchst du eine geduldige Lehrerin? Einen kreativen Brainstorming-Partner? Einen sachlichen Business-Berater? Einfach den System-Prompt ändern!
|
|
|
|
|
|
#### Warum System-Prompts so mächtig sind
|
|
|
|
|
|
Hier kommt das Faszinierende: KI-Modelle wurden mit unzähligen Gesprächen trainiert, in denen Menschen unterschiedliche Rollen und Expertenniveaus eingenommen haben. Wenn du der KI eine bestimmte Rolle zuweist, ist das wie das Umschalten eines Schalters, der all diese gelernten Muster aktiviert.
|
|
|
|
|
|
**Es ist wie Method Acting für KI**: Sag zu einem Schauspieler „du bist ein weiser alter Professor“ und beobachte, wie er automatisch Haltung, Wortwahl und Gestik anpasst. KI macht etwas ganz Ähnliches mit Sprachmustern.
|
|
|
|
|
|
#### Effektive System-Prompts gestalten: Kunst und Wissenschaft
|
|
|
|
|
|
**Der Aufbau eines großartigen System-Prompts:**
|
|
|
1. **Rolle/Identität**: Wer ist die KI?
|
|
|
2. **Expertise**: Was weiß sie?
|
|
|
3. **Kommunikationsstil**: Wie spricht sie?
|
|
|
4. **Spezifische Anweisungen**: Worauf soll sie achten?
|
|
|
|
|
|
```python
|
|
|
# ❌ Vager System-Befehl
|
|
|
"You are helpful."
|
|
|
|
|
|
# ✅ Detaillierter, effektiver System-Befehl
|
|
|
"You are Dr. Sarah Chen, a senior software engineer with 15 years of experience at major tech companies. You explain programming concepts using real-world analogies and always provide practical examples. You're patient with beginners and enthusiastic about helping them understand complex topics."
|
|
|
```
|
|
|
|
|
|
#### Beispiele für System-Prompts mit Kontext
|
|
|
|
|
|
Lass uns ansehen, wie unterschiedliche System-Prompts komplett verschiedene KI-Persönlichkeiten erschaffen:
|
|
|
|
|
|
```python
|
|
|
# Beispiel 1: Der geduldige Lehrer
|
|
|
teacher_prompt = """
|
|
|
You are an experienced programming instructor who has taught thousands of students.
|
|
|
You break down complex concepts into simple steps, use analogies from everyday life,
|
|
|
and always check if the student understands before moving on. You're encouraging
|
|
|
and never make students feel bad for not knowing something.
|
|
|
"""
|
|
|
|
|
|
# Beispiel 2: Der kreative Mitarbeiter
|
|
|
creative_prompt = """
|
|
|
You are a creative writing partner who loves brainstorming wild ideas. You're
|
|
|
enthusiastic, imaginative, and always build on the user's ideas rather than
|
|
|
replacing them. You ask thought-provoking questions to spark creativity and
|
|
|
offer unexpected perspectives that make stories more interesting.
|
|
|
"""
|
|
|
|
|
|
# Beispiel 3: Der strategische Geschäftsberater
|
|
|
business_prompt = """
|
|
|
You are a strategic business consultant with an MBA and 20 years of experience
|
|
|
helping startups scale. You think in frameworks, provide structured advice,
|
|
|
and always consider both short-term tactics and long-term strategy. You ask
|
|
|
probing questions to understand the full business context before giving advice.
|
|
|
"""
|
|
|
```
|
|
|
|
|
|
#### System-Prompts in Aktion sehen
|
|
|
|
|
|
Lass uns dieselbe Frage mit verschiedenen System-Prompts testen, um die dramatischen Unterschiede zu sehen:
|
|
|
|
|
|
**Frage**: „Wie handhabe ich die Nutzer-Authentifizierung in meiner Web-App?“
|
|
|
|
|
|
```python
|
|
|
# Mit Lehrer-Aufforderung:
|
|
|
teacher_response = call_llm(
|
|
|
"How do I handle user authentication in my web app?",
|
|
|
teacher_prompt
|
|
|
)
|
|
|
# Typische Antwort: "Großartige Frage! Lassen Sie uns die Authentifizierung in einfache Schritte aufteilen.
|
|
|
# Stellen Sie sich das vor wie einen Türsteher im Nachtclub, der Ausweise überprüft..."
|
|
|
|
|
|
# Mit Geschäftliches-Aufforderung:
|
|
|
business_response = call_llm(
|
|
|
"How do I handle user authentication in my web app?",
|
|
|
business_prompt
|
|
|
)
|
|
|
# Typische Antwort: "Aus strategischer Sicht ist Authentifizierung entscheidend für das Vertrauen der Benutzer
|
|
|
# und die Einhaltung gesetzlicher Vorschriften. Lassen Sie mich einen Rahmen skizzieren, der Sicherheit,
|
|
|
# Benutzererfahrung und Skalierbarkeit berücksichtigt..."
|
|
|
```
|
|
|
|
|
|
#### Fortgeschrittene Techniken für System-Prompts
|
|
|
|
|
|
**1. Kontext setzen**: Gib der KI Hintergrundinformationen
|
|
|
```python
|
|
|
system_prompt = """
|
|
|
You are helping a junior developer who just started their first job at a startup.
|
|
|
They know basic HTML/CSS/JavaScript but are new to backend development and databases.
|
|
|
Be encouraging and explain things step-by-step without being condescending.
|
|
|
"""
|
|
|
```
|
|
|
|
|
|
**2. Ausgabeformatierung**: Anweisungen für die Strukturierung von Antworten an die KI
|
|
|
```python
|
|
|
system_prompt = """
|
|
|
You are a technical mentor. Always structure your responses as:
|
|
|
1. Quick Answer (1-2 sentences)
|
|
|
2. Detailed Explanation
|
|
|
3. Code Example
|
|
|
4. Common Pitfalls to Avoid
|
|
|
5. Next Steps for Learning
|
|
|
"""
|
|
|
```
|
|
|
|
|
|
**3. Einschränkungen festlegen**: Definieren, was die KI NICHT tun soll
|
|
|
```python
|
|
|
system_prompt = """
|
|
|
You are a coding tutor focused on teaching best practices. Never write complete
|
|
|
solutions for the user - instead, guide them with hints and questions so they
|
|
|
learn by doing. Always explain the 'why' behind coding decisions.
|
|
|
"""
|
|
|
```
|
|
|
|
|
|
#### Warum das für Ihren Chat-Assistenten wichtig ist
|
|
|
|
|
|
Das Verständnis von System-Prompts gibt Ihnen unglaubliche Macht, spezialisierte KI-Assistenten zu erstellen:
|
|
|
- **Kundendienst-Bot**: Hilfreich, geduldig, richtlinienbewusst
|
|
|
- **Lerntutor**: Ermutigend, schrittweise, überprüft das Verständnis
|
|
|
- **Kreativpartner**: Fantasievoll, baut auf Ideen auf, fragt „Was wäre wenn?“
|
|
|
- **Technischer Experte**: Präzise, detailliert, sicherheitsbewusst
|
|
|
|
|
|
**Der entscheidende Erkenntnis**: Sie rufen nicht nur eine KI-API auf – Sie kreieren eine individuelle KI-Persönlichkeit, die Ihren spezifischen Anwendungsfall bedient. Das macht moderne KI-Anwendungen maßgeschneidert und nützlich statt generisch.
|
|
|
|
|
|
### 🎯 Pädagogischer Check-in: KI-Persönlichkeitsprogrammierung
|
|
|
|
|
|
**Pause und Reflexion**: Sie haben gerade gelernt, KI-Persönlichkeiten durch System-Prompts zu programmieren. Das ist eine grundlegende Fähigkeit in der modernen KI-Entwicklung.
|
|
|
|
|
|
**Kurze Selbstbewertung**:
|
|
|
- Können Sie erklären, wie sich System-Prompts von regulären Benutzer-Nachrichten unterscheiden?
|
|
|
- Was ist der Unterschied zwischen Temperatur- und top_p-Parametern?
|
|
|
- Wie würden Sie einen System-Prompt für einen speziellen Anwendungsfall (z. B. einen Codetutor) erstellen?
|
|
|
|
|
|
**Verbindung zur Praxis**: Die von Ihnen gelernten System-Prompt-Techniken werden in jeder großen KI-Anwendung verwendet – von GitHub Copilots Code-Hilfe bis zur ChatGPT-Konversationsschnittstelle. Sie meistern dieselben Muster, die KI-Produktteams bei großen Tech-Unternehmen einsetzen.
|
|
|
|
|
|
**Herausforderungsfrage**: Wie könnten Sie verschiedene KI-Persönlichkeiten für unterschiedliche Benutzertypen (Anfänger vs. Experte) entwerfen? Überlegen Sie, wie dasselbe zugrundeliegende KI-Modell verschiedene Zielgruppen durch Prompt-Engineering bedienen könnte.
|
|
|
|
|
|
## Aufbau der Web-API mit FastAPI: Ihr Hochleistungs-KI-Kommunikations-Hub
|
|
|
|
|
|
Nun bauen wir das Backend, das Ihr Frontend mit den KI-Diensten verbindet. Wir verwenden FastAPI, ein modernes Python-Framework, das sich ideal zum Erstellen von APIs für KI-Anwendungen eignet.
|
|
|
|
|
|
FastAPI bietet mehrere Vorteile für dieses Projekt: integrierte asynchrone Unterstützung zur Bearbeitung paralleler Anfragen, automatische API-Dokumentationserstellung und hervorragende Performance. Ihr FastAPI-Server fungiert als Vermittler, der Anfragen vom Frontend empfängt, mit KI-Diensten kommuniziert und formatierte Antworten zurückgibt.
|
|
|
|
|
|
### Warum FastAPI für KI-Anwendungen?
|
|
|
|
|
|
Sie fragen sich vielleicht: „Kann ich die KI nicht direkt aus meinem Frontend-JavaScript aufrufen?“ oder „Warum FastAPI statt Flask oder Django?“ Tolle Fragen!
|
|
|
|
|
|
**Darum ist FastAPI perfekt für unser Vorhaben:**
|
|
|
- **Standardmäßig asynchron**: Kann mehrere KI-Anfragen gleichzeitig bearbeiten, ohne blockiert zu werden
|
|
|
- **Automatische Dokumentation**: Zugriff auf `/docs` für schöne, interaktive API-Dokumentationsseite kostenfrei
|
|
|
- **Integrierte Validierung**: Erfasst Fehler, bevor sie Probleme verursachen
|
|
|
- **Blitzschnell**: Eines der schnellsten Python-Frameworks überhaupt
|
|
|
- **Modernes Python**: Nutzt alle neuesten Python-Features
|
|
|
|
|
|
**Und deshalb brauchen wir überhaupt ein Backend:**
|
|
|
|
|
|
**Sicherheit**: Ihr KI-API-Schlüssel ist wie ein Passwort – wenn Sie ihn im Frontend-JavaScript speichern, kann jeder, der den Quellcode Ihrer Webseite anschaut, ihn stehlen und Ihre KI-Guthaben verbrauchen. Das Backend schützt sensible Zugangsdaten.
|
|
|
|
|
|
**Rate-Limiting & Kontrolle**: Das Backend erlaubt es Ihnen, zu steuern, wie oft Nutzer Anfragen stellen können, Benutzer-Authentifizierung umzusetzen und Nutzung zu protokollieren.
|
|
|
|
|
|
**Datenverarbeitung**: Sie möchten vielleicht Gespräche speichern, unangemessene Inhalte filtern oder mehrere KI-Dienste kombinieren. Das passiert im Backend.
|
|
|
|
|
|
**Die Architektur ähnelt einem Client-Server-Modell:**
|
|
|
- **Frontend**: Benutzerschnittstelle für Interaktion
|
|
|
- **Backend-API**: Schicht für Anfrageverarbeitung und -weiterleitung
|
|
|
- **KI-Dienst**: Externe Berechnung und Antwortgenerierung
|
|
|
- **Umgebungsvariablen**: Sichere Konfiguration und Zugangsdatenverwaltung
|
|
|
|
|
|
### Verständnis des Anfrage-Antwort-Ablaufs
|
|
|
|
|
|
Folgen wir dem Weg, wenn ein Nutzer eine Nachricht sendet:
|
|
|
|
|
|
```mermaid
|
|
|
sequenceDiagram
|
|
|
participant User as 👤 Benutzer
|
|
|
participant Frontend as 🌐 Frontend
|
|
|
participant API as 🔧 FastAPI Server
|
|
|
participant AI as 🤖 KI-Dienst
|
|
|
|
|
|
User->>Frontend: Tippt "Hallo KI!"
|
|
|
Frontend->>API: POST /hello {"message": "Hallo KI!"}
|
|
|
Note over API: Validiert Anfrage<br/>Fügt Systemaufforderung hinzu
|
|
|
API->>AI: Sendet formatierte Anfrage
|
|
|
AI->>API: Gibt KI-Antwort zurück
|
|
|
Note over API: Verarbeitet Antwort<br/>Protokolliert Gespräch
|
|
|
API->>Frontend: {"response": "Hallo! Wie kann ich helfen?"}
|
|
|
Frontend->>User: Zeigt KI-Nachricht an
|
|
|
```
|
|
|
**Jeder Schritt erklärt:**
|
|
|
1. **Benutzerinteraktion**: Person tippt in die Chatoberfläche
|
|
|
2. **Frontend-Verarbeitung**: JavaScript erfasst die Eingabe und formatiert sie als JSON
|
|
|
3. **API-Validierung**: FastAPI prüft die Anfrage automatisch mit Pydantic-Modellen
|
|
|
4. **KI-Integration**: Backend fügt Kontext (System-Prompt) hinzu und ruft den KI-Dienst auf
|
|
|
5. **Antwortbehandlung**: API empfängt KI-Antwort und kann sie bei Bedarf modifizieren
|
|
|
6. **Frontend-Anzeige**: JavaScript zeigt die Antwort im Chat an
|
|
|
|
|
|
### Verständnis der API-Architektur
|
|
|
|
|
|
```mermaid
|
|
|
sequenceDiagram
|
|
|
participant Frontend
|
|
|
participant FastAPI
|
|
|
participant AI Function
|
|
|
participant GitHub Models
|
|
|
|
|
|
Frontend->>FastAPI: POST /hello {"message": "Hallo KI!"}
|
|
|
FastAPI->>AI Function: call_llm(nachricht, system_aufforderung)
|
|
|
AI Function->>GitHub Models: API-Anfrage
|
|
|
GitHub Models->>AI Function: KI-Antwort
|
|
|
AI Function->>FastAPI: Antworttext
|
|
|
FastAPI->>Frontend: {"response": "Hallo! Wie kann ich helfen?"}
|
|
|
```
|
|
|
```mermaid
|
|
|
flowchart TD
|
|
|
A[Benutzereingabe] --> B[Frontend-Validierung]
|
|
|
B --> C[HTTP POST Anfrage]
|
|
|
C --> D[FastAPI Router]
|
|
|
D --> E[Pydantic Validierung]
|
|
|
E --> F[KI Funktionsaufruf]
|
|
|
F --> G[GitHub Modelle API]
|
|
|
G --> H[Antwortverarbeitung]
|
|
|
H --> I[JSON Antwort]
|
|
|
I --> J[Frontend Aktualisierung]
|
|
|
|
|
|
subgraph "Sicherheitsschicht"
|
|
|
K[CORS Middleware]
|
|
|
L[Umgebungsvariablen]
|
|
|
M[Fehlerbehandlung]
|
|
|
end
|
|
|
|
|
|
D --> K
|
|
|
F --> L
|
|
|
H --> M
|
|
|
```
|
|
|
### Erstellung der FastAPI-Anwendung
|
|
|
|
|
|
Wir bauen unsere API Schritt für Schritt auf. Erstellen Sie eine Datei namens `api.py` mit folgendem FastAPI-Code:
|
|
|
|
|
|
```python
|
|
|
# api.py
|
|
|
from fastapi import FastAPI, HTTPException
|
|
|
from fastapi.middleware.cors import CORSMiddleware
|
|
|
from pydantic import BaseModel
|
|
|
from llm import call_llm
|
|
|
import logging
|
|
|
|
|
|
# Protokollierung konfigurieren
|
|
|
logging.basicConfig(level=logging.INFO)
|
|
|
logger = logging.getLogger(__name__)
|
|
|
|
|
|
# FastAPI-Anwendung erstellen
|
|
|
app = FastAPI(
|
|
|
title="AI Chat API",
|
|
|
description="A high-performance API for AI-powered chat applications",
|
|
|
version="1.0.0"
|
|
|
)
|
|
|
|
|
|
# CORS konfigurieren
|
|
|
app.add_middleware(
|
|
|
CORSMiddleware,
|
|
|
allow_origins=["*"], # Für die Produktion entsprechend konfigurieren
|
|
|
allow_credentials=True,
|
|
|
allow_methods=["*"],
|
|
|
allow_headers=["*"],
|
|
|
)
|
|
|
|
|
|
# Pydantic-Modelle für Anforderungs-/Antwortvalidierung
|
|
|
class ChatMessage(BaseModel):
|
|
|
message: str
|
|
|
|
|
|
class ChatResponse(BaseModel):
|
|
|
response: str
|
|
|
|
|
|
@app.get("/")
|
|
|
async def root():
|
|
|
"""Root endpoint providing API information."""
|
|
|
return {
|
|
|
"message": "Welcome to the AI Chat API",
|
|
|
"docs": "/docs",
|
|
|
"health": "/health"
|
|
|
}
|
|
|
|
|
|
@app.get("/health")
|
|
|
async def health_check():
|
|
|
"""Health check endpoint."""
|
|
|
return {"status": "healthy", "service": "ai-chat-api"}
|
|
|
|
|
|
@app.post("/hello", response_model=ChatResponse)
|
|
|
async def chat_endpoint(chat_message: ChatMessage):
|
|
|
"""Main chat endpoint that processes messages and returns AI responses."""
|
|
|
try:
|
|
|
# Nachricht extrahieren und validieren
|
|
|
message = chat_message.message.strip()
|
|
|
if not message:
|
|
|
raise HTTPException(status_code=400, detail="Message cannot be empty")
|
|
|
|
|
|
logger.info(f"Processing message: {message[:50]}...")
|
|
|
|
|
|
# KI-Dienst aufrufen (Hinweis: call_llm sollte asynchron gemacht werden für bessere Leistung)
|
|
|
ai_response = await call_llm_async(message, "You are a helpful and friendly assistant.")
|
|
|
|
|
|
logger.info("AI response generated successfully")
|
|
|
return ChatResponse(response=ai_response)
|
|
|
|
|
|
except HTTPException:
|
|
|
raise
|
|
|
except Exception as e:
|
|
|
logger.error(f"Error processing chat message: {str(e)}")
|
|
|
raise HTTPException(status_code=500, detail="Internal server error")
|
|
|
|
|
|
if __name__ == "__main__":
|
|
|
import uvicorn
|
|
|
uvicorn.run(app, host="0.0.0.0", port=5000, reload=True)
|
|
|
```
|
|
|
|
|
|
**Verständnis der FastAPI-Implementierung:**
|
|
|
- **Importiert** FastAPI für moderne Web-Framework-Funktionalität und Pydantic für Datenvalidierung
|
|
|
- **Erstellt** automatische API-Dokumentation (unter `/docs`, wenn der Server läuft)
|
|
|
- **Aktiviert** CORS-Middleware, um Frontend-Anfragen von verschiedenen Ursprüngen zu erlauben
|
|
|
- **Definiert** Pydantic-Modelle für automatische Validierung und Dokumentation von Anfragen/Antworten
|
|
|
- **Verwendet** asynchrone Endpunkte für bessere Performance bei parallelen Anfragen
|
|
|
- **Implementiert** korrekte HTTP-Statuscodes und Fehlerbehandlung mit HTTPException
|
|
|
- **Beinhaltet** strukturiertes Logging zum Monitoring und Debuggen
|
|
|
- **Bietet** Health-Check-Endpunkt zur Überwachung des Dienststatus
|
|
|
|
|
|
**Wichtige FastAPI-Vorteile gegenüber traditionellen Frameworks:**
|
|
|
- **Automatische Validierung**: Pydantic-Modelle sichern Datenintegrität vor der Verarbeitung
|
|
|
- **Interaktive Dokus**: `/docs` bietet automatisch generierte und testbare API-Dokumentation
|
|
|
- **Typensicherheit**: Python-Typen verhindern Laufzeitfehler und verbessern Codequalität
|
|
|
- **Asynchrone Unterstützung**: Mehrere KI-Anfragen gleichzeitig ohne Blockieren bearbeiten
|
|
|
- **Performance**: Deutlich schnellere Anfrageverarbeitung für Echtzeitanwendungen
|
|
|
|
|
|
### Verständnis von CORS: Der Sicherheitswächter des Webs
|
|
|
|
|
|
CORS (Cross-Origin Resource Sharing) ist wie ein Sicherheitswächter an einem Gebäude, der prüft, ob Besucher eintreten dürfen. Verstehen wir, warum das wichtig ist und wie es Ihre Anwendung beeinflusst.
|
|
|
|
|
|
#### Was ist CORS und warum existiert es?
|
|
|
|
|
|
**Das Problem**: Stellen Sie sich vor, jede beliebige Webseite könnte ohne Ihre Zustimmung Anfragen an die Webseite Ihrer Bank stellen. Ein Sicherheitsalptraum! Browser verhindern dies standardmäßig mit der „Same-Origin Policy“.
|
|
|
|
|
|
**Same-Origin Policy**: Browser erlauben Webseiten nur, Anfragen an dieselbe Domain, denselben Port und dasselbe Protokoll zu senden, von denen sie geladen wurden.
|
|
|
|
|
|
**Analogie aus der Realität**: Es ist wie bei einem Wohnhaus-Sicherheitsdienst – nur Bewohner (gleiche Herkunft) dürfen das Gebäude betreten. Wenn Sie einem Freund (andere Herkunft) Besuch erlauben wollen, müssen Sie der Sicherheit explizit Bescheid geben.
|
|
|
|
|
|
#### CORS in Ihrer Entwicklungsumgebung
|
|
|
|
|
|
Während der Entwicklung laufen Frontend und Backend auf verschiedenen Ports:
|
|
|
- Frontend: `http://localhost:3000` (oder file://, wenn HTML direkt geöffnet)
|
|
|
- Backend: `http://localhost:5000`
|
|
|
|
|
|
Das werden als „verschiedene Ursprünge“ betrachtet, obwohl beide auf demselben Rechner sind!
|
|
|
|
|
|
```python
|
|
|
from fastapi.middleware.cors import CORSMiddleware
|
|
|
|
|
|
app = FastAPI(__name__)
|
|
|
CORS(app) # Dies teilt Browsern mit: "Es ist in Ordnung, dass andere Ursprünge Anfragen an diese API stellen."
|
|
|
```
|
|
|
|
|
|
**Was die CORS-Konfiguration praktisch macht:**
|
|
|
- **Fügt** spezielle HTTP-Header zu API-Antworten hinzu, die Browsern sagen „diese Cross-Origin-Anfrage ist erlaubt“
|
|
|
- **Behandelt** „Preflight“-Anfragen (Browser prüfen manchmal vorher Berechtigungen)
|
|
|
- **Verhindert** die gefürchtete Fehlermeldung „blocked by CORS policy“ in Ihrer Browser-Konsole
|
|
|
|
|
|
#### CORS-Sicherheit: Entwicklung vs. Produktion
|
|
|
|
|
|
```python
|
|
|
# 🚨 Entwicklung: Erlaubt ALLE Ursprünge (praktisch, aber unsicher)
|
|
|
CORS(app)
|
|
|
|
|
|
# ✅ Produktion: Nur deine spezifische Frontend-Domain erlauben
|
|
|
CORS(app, origins=["https://yourdomain.com", "https://www.yourdomain.com"])
|
|
|
|
|
|
# 🔒 Fortgeschritten: Verschiedene Ursprünge für unterschiedliche Umgebungen
|
|
|
if app.debug: # Entwicklungsmodus
|
|
|
CORS(app, origins=["http://localhost:3000", "http://127.0.0.1:3000"])
|
|
|
else: # Produktionsmodus
|
|
|
CORS(app, origins=["https://yourdomain.com"])
|
|
|
```
|
|
|
|
|
|
**Warum das wichtig ist**: In der Entwicklung ist `CORS(app)` wie eine unverschlossene Haustür – praktisch, aber nicht sicher. In der Produktion sollten Sie genau festlegen, welche Webseiten Ihre API ansprechen dürfen.
|
|
|
|
|
|
#### Gängige CORS-Szenarien und Lösungen
|
|
|
|
|
|
| Szenario | Problem | Lösung |
|
|
|
|-----------------------|--------------------------------|-------------------------------------|
|
|
|
| **Lokale Entwicklung** | Frontend erreicht Backend nicht | CORSMiddleware zu FastAPI hinzufügen |
|
|
|
| **GitHub Pages + Heroku** | Bereitgestelltes Frontend erreicht API nicht | GitHub Pages URL zu CORS-Ursprüngen hinzufügen |
|
|
|
| **Eigene Domain** | CORS-Fehler in Produktion | CORS-Ursprünge an Ihre Domain anpassen |
|
|
|
| **Mobile App** | App erreicht Web-API nicht | Domain der App hinzufügen oder `*` vorsichtig verwenden |
|
|
|
|
|
|
**Profi-Tipp**: Prüfen Sie CORS-Header in den Entwickler-Tools Ihres Browsers im Netzwerk-Tab. Achten Sie auf Header wie `Access-Control-Allow-Origin` in der Antwort.
|
|
|
|
|
|
### Fehlerbehandlung und Validierung
|
|
|
|
|
|
Beachten Sie, wie unsere API eine korrekte Fehlerbehandlung enthält:
|
|
|
|
|
|
```python
|
|
|
# Überprüfen Sie, ob wir eine Nachricht erhalten haben
|
|
|
if not message:
|
|
|
return jsonify({"error": "Message field is required"}), 400
|
|
|
```
|
|
|
|
|
|
**Wichtige Validierungsprinzipien:**
|
|
|
- **Prüft** erforderliche Felder vor der Anfragenverarbeitung
|
|
|
- **Gibt** aussagekräftige Fehlermeldungen im JSON-Format zurück
|
|
|
- **Verwendet** passende HTTP-Statuscodes (400 bei fehlerhaften Anfragen)
|
|
|
- **Bietet** klare Rückmeldungen zur Unterstützung der Frontend-Entwickler bei der Fehlersuche
|
|
|
|
|
|
## Einrichtung und Start Ihres Backends
|
|
|
|
|
|
Jetzt, wo wir unsere KI-Integration und den FastAPI-Server fertig haben, starten wir alles. Der Einrichtungsprozess umfasst die Installation von Python-Abhängigkeiten, Konfiguration von Umgebungsvariablen und Starten des Entwicklungsservers.
|
|
|
|
|
|
### Python-Umgebung einrichten
|
|
|
|
|
|
Legen wir Ihre Python-Entwicklungsumgebung an. Virtuelle Umgebungen sind wie das Manhattan-Projekt mit separaten Bereichen – jedes Projekt bekommt seinen eigenen isolierten Bereich mit spezifischen Tools und Abhängigkeiten, um Konflikte mit anderen Projekten zu vermeiden.
|
|
|
|
|
|
```bash
|
|
|
# Navigiere zu deinem Backend-Verzeichnis
|
|
|
cd backend
|
|
|
|
|
|
# Erstelle eine virtuelle Umgebung (wie das Einrichten eines sterilen Raums für dein Projekt)
|
|
|
python -m venv venv
|
|
|
|
|
|
# Aktiviere sie (Linux/Mac)
|
|
|
source ./venv/bin/activate
|
|
|
|
|
|
# Unter Windows verwende:
|
|
|
# venv\Scripts\activate
|
|
|
|
|
|
# Installiere die guten Sachen
|
|
|
pip install openai fastapi uvicorn python-dotenv
|
|
|
```
|
|
|
|
|
|
**Was wir gerade gemacht haben:**
|
|
|
- **Eine eigene kleine Python-Blase geschaffen**, in der wir Pakete installieren können, ohne andernorts etwas zu beeinflussen
|
|
|
- **Aktiviert**, damit unser Terminal genau diese Umgebung verwendet
|
|
|
- **Installation der Essentials**: OpenAI für KI-Magie, FastAPI für die Web-API, Uvicorn zum Ausführen des Servers und python-dotenv für sichere Geheimnisverwaltung
|
|
|
|
|
|
**Wichtige Abhängigkeiten erklärt:**
|
|
|
- **FastAPI**: Modernes, schnelles Web-Framework mit automatischer API-Dokumentation
|
|
|
- **Uvicorn**: Blitzschneller ASGI-Server zum Ausführen von FastAPI-Anwendungen
|
|
|
- **OpenAI**: Offizielle Bibliothek für GitHub-Modelle und OpenAI-API-Integration
|
|
|
- **python-dotenv**: Sicheres Laden von Umgebungsvariablen aus .env-Dateien
|
|
|
|
|
|
### Umgebung konfigurieren: Geheimnisse sicher verwahren
|
|
|
|
|
|
Bevor wir die API starten, sprechen wir über eine der wichtigsten Lektionen der Webentwicklung: Wie Sie Ihre Geheimnisse tatsächlich geheim halten. Umgebungsvariablen sind wie ein sicherer Tresor, auf den nur Ihre Anwendung Zugriff hat.
|
|
|
|
|
|
#### Was sind Umgebungsvariablen?
|
|
|
|
|
|
**Denken Sie an Umgebungsvariablen wie an einen Bankschließfach** – Sie legen Wertvolles hinein und nur Sie (und Ihre App) besitzen den Schlüssel. Statt sensible Informationen direkt im Code zu speichern (wo sie jeder sehen kann), bewahren Sie sie sicher in der Umgebung auf.
|
|
|
|
|
|
**Hier der Unterschied:**
|
|
|
- **Der falsche Weg**: Ihr Passwort auf ein Post-it schreiben und an den Monitor kleben
|
|
|
- **Der richtige Weg**: Ihr Passwort in einem sicheren Passwortmanager aufbewahren, auf den nur Sie Zugriff haben
|
|
|
|
|
|
#### Warum Umgebungsvariablen wichtig sind
|
|
|
|
|
|
```python
|
|
|
# 🚨 MACHE DAS NIEMALS - API-Schlüssel für alle sichtbar
|
|
|
client = OpenAI(
|
|
|
api_key="ghp_1234567890abcdef...", # Jeder kann ihn stehlen!
|
|
|
base_url="https://models.github.ai/inference"
|
|
|
)
|
|
|
|
|
|
# ✅ MACH DAS - API-Schlüssel sicher gespeichert
|
|
|
client = OpenAI(
|
|
|
api_key=os.environ["GITHUB_TOKEN"], # Nur deine App kann darauf zugreifen
|
|
|
base_url="https://models.github.ai/inference"
|
|
|
)
|
|
|
```
|
|
|
|
|
|
**Was passiert, wenn Sie Geheimnisse hardcoden:**
|
|
|
1. **Offenlegung im Versionskontrollsystem**: Jeder mit Zugriff auf Ihr Git-Repository sieht Ihren API-Schlüssel
|
|
|
2. **Öffentliche Repositories**: Wenn Sie zu GitHub pushen, ist Ihr Schlüssel für das ganze Internet sichtbar
|
|
|
3. **Teamfreigabe**: Andere Entwickler erhalten Zugriff auf Ihren persönlichen API-Schlüssel
|
|
|
4. **Sicherheitsverletzungen**: Wenn jemand Ihren Schlüssel stiehlt, kann er Ihre KI-Guthaben verbrauchen
|
|
|
|
|
|
#### Erstellung der Umgebungsdatei
|
|
|
|
|
|
Erstellen Sie eine `.env`-Datei in Ihrem Backend-Verzeichnis. Darin speichern Sie Ihre Geheimnisse lokal:
|
|
|
|
|
|
```bash
|
|
|
# .env-Datei - Diese sollte NIEMALS in Git eingecheckt werden
|
|
|
GITHUB_TOKEN=your_github_personal_access_token_here
|
|
|
FASTAPI_DEBUG=True
|
|
|
ENVIRONMENT=development
|
|
|
```
|
|
|
|
|
|
**Wie die .env-Datei funktioniert:**
|
|
|
- **Ein Geheimnis pro Zeile** im Format `KEY=value`
|
|
|
- **Keine Leerzeichen** um das Gleichheitszeichen
|
|
|
- **Keine Anführungszeichen** um Werte (in der Regel)
|
|
|
- **Kommentare** beginnen mit `#`
|
|
|
|
|
|
#### Erstellen Ihres persönlichen GitHub-Zugriffstokens
|
|
|
|
|
|
Ihr GitHub-Token ist wie ein spezielles Passwort, das Ihrer Anwendung erlaubt, GitHub-KI-Dienste zu nutzen:
|
|
|
|
|
|
**Schritt-für-Schritt Token-Erstellung:**
|
|
|
1. **Gehen Sie zu GitHub-Einstellungen** → Entwickler-Einstellungen → Personal Access Tokens → Tokens (classic)
|
|
|
2. **Klicken Sie auf „Generate new token (classic)“**
|
|
|
3. **Legen Sie das Ablaufdatum fest** (30 Tage für Tests, länger für Produktion)
|
|
|
4. **Wählen Sie Berechtigungen aus**: Aktivieren Sie „repo“ und alle weiteren benötigten Rechte
|
|
|
5. **Token generieren** und sofort kopieren (Sie sehen ihn danach nicht mehr!)
|
|
|
6. **In Ihre .env-Datei einfügen**
|
|
|
|
|
|
```bash
|
|
|
# Beispiel dafür, wie Ihr Token aussieht (dies ist gefälscht!)
|
|
|
GITHUB_TOKEN=ghp_1A2B3C4D5E6F7G8H9I0J1K2L3M4N5O6P7Q8R
|
|
|
```
|
|
|
|
|
|
#### Laden von Umgebungsvariablen in Python
|
|
|
|
|
|
```python
|
|
|
import os
|
|
|
from dotenv import load_dotenv
|
|
|
|
|
|
# Lade Umgebungsvariablen aus der .env-Datei
|
|
|
load_dotenv()
|
|
|
|
|
|
# Nun kannst du sicher auf sie zugreifen
|
|
|
api_key = os.environ.get("GITHUB_TOKEN")
|
|
|
if not api_key:
|
|
|
raise ValueError("GITHUB_TOKEN not found in environment variables!")
|
|
|
|
|
|
client = OpenAI(
|
|
|
api_key=api_key,
|
|
|
base_url="https://models.github.ai/inference"
|
|
|
)
|
|
|
```
|
|
|
|
|
|
**Was dieser Code macht:**
|
|
|
- **Lädt** Ihre .env-Datei und macht Variablen in Python verfügbar
|
|
|
- **Prüft**, ob das benötigte Token vorhanden ist (gute Fehlerbehandlung!)
|
|
|
- **Löst** einen klaren Fehler aus, wenn der Token fehlt
|
|
|
- **Verwendet** den Token sicher, ohne ihn im Code offenzulegen
|
|
|
|
|
|
#### Git-Sicherheit: Die .gitignore-Datei
|
|
|
|
|
|
Ihre `.gitignore`-Datei sagt Git, welche Dateien nie verfolgt oder hochgeladen werden sollen:
|
|
|
|
|
|
```bash
|
|
|
# .gitignore - Füge diese Zeilen hinzu
|
|
|
.env
|
|
|
*.env
|
|
|
.env.local
|
|
|
.env.production
|
|
|
__pycache__/
|
|
|
venv/
|
|
|
.vscode/
|
|
|
```
|
|
|
|
|
|
**Warum das entscheidend ist**: Sobald Sie `.env` in `.gitignore` aufnehmen, ignoriert Git Ihre Umgebungsdatei und verhindert versehentliches Hochladen Ihrer Geheimnisse zu GitHub.
|
|
|
|
|
|
#### Verschiedene Umgebungen, verschiedene Geheimnisse
|
|
|
|
|
|
Professionelle Anwendungen nutzen unterschiedliche API-Schlüssel für unterschiedliche Umgebungen:
|
|
|
|
|
|
```bash
|
|
|
# .env.entwicklung
|
|
|
GITHUB_TOKEN=your_development_token
|
|
|
DEBUG=True
|
|
|
|
|
|
# .env.produktion
|
|
|
GITHUB_TOKEN=your_production_token
|
|
|
DEBUG=False
|
|
|
```
|
|
|
|
|
|
**Warum das wichtig ist**: Sie wollen nicht, dass Ihre Entwicklungs-Experimente Ihr Produktiv-KI-Kontingent belasten, und Sie möchten verschiedene Sicherheitslevel für unterschiedliche Umgebungen.
|
|
|
|
|
|
### Starten Ihres Entwicklungsservers: Ihr FastAPI zum Leben erwecken
|
|
|
Jetzt kommt der spannende Moment – starten Sie Ihren FastAPI-Entwicklungsserver und sehen Sie, wie Ihre KI-Integration zum Leben erwacht! FastAPI verwendet Uvicorn, einen blitzschnellen ASGI-Server, der speziell für asynchrone Python-Anwendungen entwickelt wurde.
|
|
|
|
|
|
#### Verständnis des FastAPI-Server-Startprozesses
|
|
|
|
|
|
```bash
|
|
|
# Methode 1: Direkte Python-Ausführung (inklusive automatischem Neuladen)
|
|
|
python api.py
|
|
|
|
|
|
# Methode 2: Direkte Nutzung von Uvicorn (mehr Kontrolle)
|
|
|
uvicorn api:app --host 0.0.0.0 --port 5000 --reload
|
|
|
```
|
|
|
|
|
|
Wenn Sie diesen Befehl ausführen, passiert Folgendes hinter den Kulissen:
|
|
|
|
|
|
**1. Python lädt Ihre FastAPI-Anwendung**:
|
|
|
- Importiert alle erforderlichen Bibliotheken (FastAPI, Pydantic, OpenAI usw.)
|
|
|
- Lädt Umgebungsvariablen aus Ihrer `.env`-Datei
|
|
|
- Erstellt die FastAPI-Anwendungsinstanz mit automatischer Dokumentation
|
|
|
|
|
|
**2. Uvicorn konfiguriert den ASGI-Server**:
|
|
|
- Bindet an Port 5000 mit asynchronen Anfragenverarbeitungsfähigkeiten
|
|
|
- Richtet die Anfragen-Routing mit automatischer Validierung ein
|
|
|
- Aktiviert Hot Reload für die Entwicklung (Neustart bei Dateiänderungen)
|
|
|
- Generiert interaktive API-Dokumentation
|
|
|
|
|
|
**3. Server beginnt zu lauschen**:
|
|
|
- Ihr Terminal zeigt: `INFO: Uvicorn running on http://0.0.0.0:5000`
|
|
|
- Der Server kann mehrere gleichzeitige KI-Anfragen bearbeiten
|
|
|
- Ihre API ist bereit mit automatischer Dokumentation unter `http://localhost:5000/docs`
|
|
|
|
|
|
#### Was Sie sehen sollten, wenn alles funktioniert
|
|
|
|
|
|
```bash
|
|
|
$ python api.py
|
|
|
INFO: Will watch for changes in these directories: ['/your/project/path']
|
|
|
INFO: Uvicorn running on http://0.0.0.0:5000 (Press CTRL+C to quit)
|
|
|
INFO: Started reloader process [12345] using WatchFiles
|
|
|
INFO: Started server process [12346]
|
|
|
INFO: Waiting for application startup.
|
|
|
INFO: Application startup complete.
|
|
|
```
|
|
|
|
|
|
**Verstehen der FastAPI-Ausgabe:**
|
|
|
- **Will watch for changes**: Auto-Reload für die Entwicklung aktiviert
|
|
|
- **Uvicorn running**: Leistungsstarker ASGI-Server ist aktiv
|
|
|
- **Started reloader process**: Dateibeobachter für automatische Neustarts
|
|
|
- **Application startup complete**: FastAPI-Anwendung erfolgreich initialisiert
|
|
|
- **Interactive docs available**: Besuchen Sie `/docs` für automatische API-Dokumentation
|
|
|
|
|
|
#### Testen Ihrer FastAPI: Mehrere leistungsstarke Ansätze
|
|
|
|
|
|
FastAPI bietet mehrere bequeme Möglichkeiten, Ihre API zu testen, einschließlich automatischer interaktiver Dokumentation:
|
|
|
|
|
|
**Methode 1: Interaktive API-Dokumentation (empfohlen)**
|
|
|
1. Öffnen Sie Ihren Browser und gehen Sie zu `http://localhost:5000/docs`
|
|
|
2. Sie sehen Swagger UI mit allen dokumentierten Endpunkten
|
|
|
3. Klicken Sie auf `/hello` → „Try it out“ → Geben Sie eine Testnachricht ein → „Execute“
|
|
|
4. Sehen Sie die Antwort direkt im Browser mit korrekter Formatierung
|
|
|
|
|
|
**Methode 2: Einfacher Browser-Test**
|
|
|
1. Gehen Sie zu `http://localhost:5000` für den Root-Endpunkt
|
|
|
2. Gehen Sie zu `http://localhost:5000/health`, um die Servergesundheit zu prüfen
|
|
|
3. Dies bestätigt, dass Ihr FastAPI-Server ordnungsgemäß läuft
|
|
|
|
|
|
**Methode 2: Kommandozeilen-Test (Fortgeschritten)**
|
|
|
```bash
|
|
|
# Test mit curl (falls verfügbar)
|
|
|
curl -X POST http://localhost:5000/hello \
|
|
|
-H "Content-Type: application/json" \
|
|
|
-d '{"message": "Hello AI!"}'
|
|
|
|
|
|
# Erwartete Antwort:
|
|
|
# {"response": "Hallo! Ich bin Ihr KI-Assistent. Wie kann ich Ihnen heute helfen?"}
|
|
|
```
|
|
|
|
|
|
**Methode 3: Python-Testskript**
|
|
|
```python
|
|
|
# test_api.py - Erstelle diese Datei, um deine API zu testen
|
|
|
import requests
|
|
|
import json
|
|
|
|
|
|
# Teste den API-Endpunkt
|
|
|
url = "http://localhost:5000/hello"
|
|
|
data = {"message": "Tell me a joke about programming"}
|
|
|
|
|
|
response = requests.post(url, json=data)
|
|
|
if response.status_code == 200:
|
|
|
result = response.json()
|
|
|
print("AI Response:", result['response'])
|
|
|
else:
|
|
|
print("Error:", response.status_code, response.text)
|
|
|
```
|
|
|
|
|
|
#### Fehlerbehebung bei häufigen Startproblemen
|
|
|
|
|
|
| Fehlermeldung | Bedeutung | Lösung |
|
|
|
|---------------|------------|------------|
|
|
|
| `ModuleNotFoundError: No module named 'fastapi'` | FastAPI ist nicht installiert | Führen Sie `pip install fastapi uvicorn` in Ihrer virtuellen Umgebung aus |
|
|
|
| `ModuleNotFoundError: No module named 'uvicorn'` | ASGI-Server ist nicht installiert | Führen Sie `pip install uvicorn` in Ihrer virtuellen Umgebung aus |
|
|
|
| `KeyError: 'GITHUB_TOKEN'` | Umgebungsvariable nicht gefunden | Überprüfen Sie Ihre `.env`-Datei und den Aufruf von `load_dotenv()` |
|
|
|
| `Address already in use` | Port 5000 ist belegt | Beenden Sie andere Prozesse, die Port 5000 verwenden, oder ändern Sie den Port |
|
|
|
| `ValidationError` | Anfragedaten stimmen nicht mit Pydantic-Modell überein | Prüfen Sie, ob Ihr Anfrageformat dem erwarteten Schema entspricht |
|
|
|
| `HTTPException 422` | Nicht verarbeitbare Entität | Anfragevalidierung fehlgeschlagen, prüfen Sie `/docs` auf korrekte Formatierung |
|
|
|
| `OpenAI API error` | KI-Dienst-Authentifizierung fehlgeschlagen | Vergewissern Sie sich, dass Ihr GitHub-Token korrekt und berechtigt ist |
|
|
|
|
|
|
#### Best Practices für die Entwicklung
|
|
|
|
|
|
**Hot Reloading**: FastAPI mit Uvicorn bietet automatisches Neuladen, wenn Sie Änderungen an Ihren Python-Dateien speichern. Das bedeutet, Sie können Ihren Code ändern und sofort testen, ohne manuell neu starten zu müssen.
|
|
|
|
|
|
```python
|
|
|
# Hot Reloading explizit aktivieren
|
|
|
if __name__ == "__main__":
|
|
|
app.run(host="0.0.0.0", port=5000, debug=True) # debug=True aktiviert Hot Reload
|
|
|
```
|
|
|
|
|
|
**Logging für die Entwicklung**: Fügen Sie Logging hinzu, um zu verstehen, was passiert:
|
|
|
|
|
|
```python
|
|
|
import logging
|
|
|
|
|
|
# Logging einrichten
|
|
|
logging.basicConfig(level=logging.INFO)
|
|
|
logger = logging.getLogger(__name__)
|
|
|
|
|
|
@app.route("/hello", methods=["POST"])
|
|
|
def hello():
|
|
|
data = request.get_json()
|
|
|
message = data.get("message", "")
|
|
|
|
|
|
logger.info(f"Received message: {message}")
|
|
|
|
|
|
if not message:
|
|
|
logger.warning("Empty message received")
|
|
|
return jsonify({"error": "Message field is required"}), 400
|
|
|
|
|
|
try:
|
|
|
response = call_llm(message, "You are a helpful and friendly assistant.")
|
|
|
logger.info(f"AI response generated successfully")
|
|
|
return jsonify({"response": response})
|
|
|
except Exception as e:
|
|
|
logger.error(f"AI API error: {str(e)}")
|
|
|
return jsonify({"error": "AI service temporarily unavailable"}), 500
|
|
|
```
|
|
|
|
|
|
**Warum Logging hilft**: Während der Entwicklung können Sie genau sehen, welche Anfragen hereinkommen, wie die KI antwortet und wo Fehler auftreten. Dies beschleunigt die Fehlersuche erheblich.
|
|
|
|
|
|
### Einrichtung für GitHub Codespaces: Cloud-Entwicklung leicht gemacht
|
|
|
|
|
|
GitHub Codespaces ist wie ein leistungsfähiger Entwicklungscomputer in der Cloud, auf den Sie von jedem Browser aus zugreifen können. Wenn Sie in Codespaces arbeiten, gibt es ein paar zusätzliche Schritte, um Ihr Backend für Ihr Frontend zugänglich zu machen.
|
|
|
|
|
|
#### Verständnis der Codespaces-Netzwerkstruktur
|
|
|
|
|
|
In einer lokalen Entwicklungsumgebung läuft alles auf demselben Computer:
|
|
|
- Backend: `http://localhost:5000`
|
|
|
- Frontend: `http://localhost:3000` (oder file://)
|
|
|
|
|
|
In Codespaces läuft Ihre Entwicklungsumgebung auf den Servern von GitHub, daher hat „localhost“ eine andere Bedeutung. GitHub erstellt automatisch öffentliche URLs für Ihre Dienste, aber Sie müssen diese richtig konfigurieren.
|
|
|
|
|
|
#### Schritt-für-Schritt-Konfiguration für Codespaces
|
|
|
|
|
|
**1. Starten Sie Ihren Backend-Server**:
|
|
|
```bash
|
|
|
cd backend
|
|
|
python api.py
|
|
|
```
|
|
|
|
|
|
Sie sehen die bekannte FastAPI/Uvicorn-Startmeldung, aber beachten Sie, dass sie innerhalb der Codespace-Umgebung läuft.
|
|
|
|
|
|
**2. Konfigurieren Sie die Port-Sichtbarkeit**:
|
|
|
- Suchen Sie in VS Code im unteren Bereich die Registerkarte „Ports“
|
|
|
- Finden Sie Port 5000 in der Liste
|
|
|
- Rechtsklicken Sie auf Port 5000
|
|
|
- Wählen Sie „Port Visibility“ → „Public“ aus
|
|
|
|
|
|
**Warum öffentlich machen?** Standardmäßig sind Codespace-Ports privat (nur für Sie zugänglich). Öffentlich machen ermöglicht es Ihrem Frontend (das im Browser läuft), mit Ihrem Backend zu kommunizieren.
|
|
|
|
|
|
**3. Holen Sie sich Ihre öffentliche URL**:
|
|
|
Nach dem Öffentlichmachen sehen Sie eine URL wie:
|
|
|
```
|
|
|
https://your-codespace-name-5000.app.github.dev
|
|
|
```
|
|
|
|
|
|
**4. Aktualisieren Sie Ihre Frontend-Konfiguration**:
|
|
|
```javascript
|
|
|
// Aktualisiere in deiner Frontend-app.js die BASE_URL:
|
|
|
this.BASE_URL = "https://your-codespace-name-5000.app.github.dev";
|
|
|
```
|
|
|
|
|
|
#### Verständnis der Codespace-URLs
|
|
|
|
|
|
Codespace-URLs folgen einem vorhersehbaren Muster:
|
|
|
```
|
|
|
https://[codespace-name]-[port].app.github.dev
|
|
|
```
|
|
|
|
|
|
**Aufgeschlüsselt:**
|
|
|
- `codespace-name`: Ein eindeutiger Identifikator für Ihren Codespace (normalerweise mit Ihrem Benutzernamen)
|
|
|
- `port`: Die Portnummer, auf der Ihr Dienst läuft (5000 für unsere FastAPI-App)
|
|
|
- `app.github.dev`: Die GitHub-Domain für Codespace-Anwendungen
|
|
|
|
|
|
#### Testen Ihrer Codespace-Einrichtung
|
|
|
|
|
|
**1. Testen Sie das Backend direkt**:
|
|
|
Öffnen Sie Ihre öffentliche URL in einem neuen Browser-Tab. Sie sollten sehen:
|
|
|
```
|
|
|
Welcome to the AI Chat API. Send POST requests to /hello with JSON payload containing 'message' field.
|
|
|
```
|
|
|
|
|
|
**2. Testen Sie mit den Entwicklerwerkzeugen im Browser**:
|
|
|
```javascript
|
|
|
// Öffnen Sie die Browser-Konsole und testen Sie Ihre API
|
|
|
fetch('https://your-codespace-name-5000.app.github.dev/hello', {
|
|
|
method: 'POST',
|
|
|
headers: {'Content-Type': 'application/json'},
|
|
|
body: JSON.stringify({message: 'Hello from Codespaces!'})
|
|
|
})
|
|
|
.then(response => response.json())
|
|
|
.then(data => console.log(data));
|
|
|
```
|
|
|
|
|
|
#### Codespaces vs. lokale Entwicklung
|
|
|
|
|
|
| Aspekt | Lokale Entwicklung | GitHub Codespaces |
|
|
|
|--------|--------------------|-------------------|
|
|
|
| **Setup-Zeit** | Länger (Installation von Python, Abhängigkeiten) | Sofort (vorkonfigurierte Umgebung) |
|
|
|
| **URL-Zugriff** | `http://localhost:5000` | `https://xyz-5000.app.github.dev` |
|
|
|
| **Port-Konfiguration** | Automatisch | Manuell (Ports öffentlich machen) |
|
|
|
| **Dateipersistenz** | Lokaler Rechner | GitHub-Repository |
|
|
|
| **Zusammenarbeit** | Schwierige Freigabe der Umgebung | Einfaches Teilen des Codespace-Links |
|
|
|
| **Internetabhängigkeit** | Nur für KI-API-Aufrufe | Für alles erforderlich |
|
|
|
|
|
|
#### Tipps für die Entwicklung in Codespaces
|
|
|
|
|
|
**Umgebungsvariablen in Codespaces**:
|
|
|
Ihre `.env`-Datei funktioniert wie gewohnt in Codespaces, aber Sie können Umgebungsvariablen auch direkt in Codespaces setzen:
|
|
|
|
|
|
```bash
|
|
|
# Setze Umgebungsvariable für die aktuelle Sitzung
|
|
|
export GITHUB_TOKEN="your_token_here"
|
|
|
|
|
|
# Oder füge sie deiner .bashrc für die Persistenz hinzu
|
|
|
echo 'export GITHUB_TOKEN="your_token_here"' >> ~/.bashrc
|
|
|
```
|
|
|
|
|
|
**Port-Management**:
|
|
|
- Codespaces erkennt automatisch, wenn Ihre Anwendung beginnt, auf einem Port zu lauschen
|
|
|
- Sie können mehrere Ports gleichzeitig weiterleiten (nützlich, wenn Sie später eine Datenbank hinzufügen)
|
|
|
- Die Ports bleiben zugänglich, solange Ihr Codespace läuft
|
|
|
|
|
|
**Entwicklungs-Workflow**:
|
|
|
1. Code-Änderungen in VS Code vornehmen
|
|
|
2. FastAPI lädt automatisch neu (dank Uvicorns Reload-Modus)
|
|
|
3. Änderungen sofort über die öffentliche URL testen
|
|
|
4. Änderungen committen und pushen, wenn bereit
|
|
|
|
|
|
> 💡 **Pro Tipp**: Legen Sie während der Entwicklung ein Lesezeichen für die Backend-URL Ihres Codespaces an. Da Codespace-Namen stabil sind, ändert sich die URL nicht, solange Sie denselben Codespace verwenden.
|
|
|
|
|
|
## Erstellung der Frontend-Chat-Oberfläche: Wo Menschen auf KI treffen
|
|
|
|
|
|
Jetzt bauen wir die Benutzeroberfläche – den Teil, der bestimmt, wie Menschen mit Ihrem KI-Assistenten interagieren. Wie beim Design der ursprünglichen iPhone-Oberfläche konzentrieren wir uns darauf, komplexe Technologie intuitiv und natürlich bedienbar zu machen.
|
|
|
|
|
|
### Verständnis moderner Frontend-Architektur
|
|
|
|
|
|
Unsere Chat-Oberfläche wird das sein, was man eine „Single Page Application“ oder SPA nennt. Statt des alten Ansatzes, bei dem jeder Klick eine neue Seite lädt, aktualisiert unsere App sanft und sofort:
|
|
|
|
|
|
**Alte Webseiten**: Wie das Lesen eines physischen Buchs – Sie blättern komplett neue Seiten um
|
|
|
**Unsere Chat-App**: Wie die Nutzung Ihres Telefons – alles fließt und aktualisiert sich nahtlos
|
|
|
|
|
|
```mermaid
|
|
|
graph TD
|
|
|
A[Benutzer gibt Nachricht ein] --> B[JavaScript erfasst Eingabe]
|
|
|
B --> C[Daten validieren & formatieren]
|
|
|
C --> D[An Backend-API senden]
|
|
|
D --> E[Ladezustand anzeigen]
|
|
|
E --> F[KI-Antwort erhalten]
|
|
|
F --> G[Chat-Oberfläche aktualisieren]
|
|
|
G --> H[Bereit für nächste Nachricht]
|
|
|
```
|
|
|
```mermaid
|
|
|
classDiagram
|
|
|
class ChatApp {
|
|
|
+nachrichten: HTMLElement
|
|
|
+formular: HTMLElement
|
|
|
+eingabe: HTMLElement
|
|
|
+sendeButton: HTMLElement
|
|
|
+BASIS_URL: string
|
|
|
+API_ENDPOINT: string
|
|
|
|
|
|
+konstruktor()
|
|
|
+initialisiereEreignisListener()
|
|
|
+behandleAbsenden(ereignis)
|
|
|
+rufeAPIAuf(nachricht)
|
|
|
+fuegeNachrichtHinzu(text, rolle)
|
|
|
+escapeHtml(text)
|
|
|
+rolleNachUnten()
|
|
|
+setzeLaden(istLadend)
|
|
|
}
|
|
|
|
|
|
ChatApp --> DOM : manipuliert
|
|
|
ChatApp --> FastAPI : sendet Anfragen
|
|
|
```
|
|
|
### Die drei Säulen der Frontend-Entwicklung
|
|
|
|
|
|
Jede Frontend-Anwendung – von einfachen Webseiten bis zu komplexen Apps wie Discord oder Slack – basiert auf drei Kerntechnologien. Man kann sie als Fundament all dessen sehen, was Sie im Web sehen und bedienen:
|
|
|
|
|
|
**HTML (Struktur)**: Das ist Ihr Fundament
|
|
|
- Bestimmt, welche Elemente existieren (Buttons, Textfelder, Container)
|
|
|
- Gibt dem Inhalt Bedeutung (das ist eine Überschrift, das ist ein Formular usw.)
|
|
|
- Schafft die Grundstruktur, auf der alles andere aufbaut
|
|
|
|
|
|
**CSS (Präsentation)**: Das ist Ihr Innenarchitekt
|
|
|
- Sorgt dafür, dass alles schön aussieht (Farben, Schriftarten, Layouts)
|
|
|
- Kümmert sich um unterschiedliche Bildschirmgrößen (Telefon vs. Laptop vs. Tablet)
|
|
|
- Erzeugt sanfte Animationen und visuelles Feedback
|
|
|
|
|
|
**JavaScript (Verhalten)**: Das ist Ihr Gehirn
|
|
|
- Reagiert auf Nutzeraktionen (Klicks, Tippen, Scrollen)
|
|
|
- Kommuniziert mit Ihrem Backend und aktualisiert die Seite
|
|
|
- Macht alles interaktiv und dynamisch
|
|
|
|
|
|
**Man kann es sich vorstellen wie architektonisches Design:**
|
|
|
- **HTML**: Der strukturelle Bauplan (Definieren von Räumen und Beziehungen)
|
|
|
- **CSS**: Das ästhetische und umweltbezogene Design (visueller Stil und Nutzererlebnis)
|
|
|
- **JavaScript**: Die mechanischen Systeme (Funktionalität und Interaktivität)
|
|
|
|
|
|
### Warum moderne JavaScript-Architektur wichtig ist
|
|
|
|
|
|
Unsere Chat-Anwendung wird moderne JavaScript-Muster verwenden, die Sie auch in professionellen Anwendungen sehen. Das Verständnis dieser Konzepte hilft Ihnen beim Wachsen als Entwickler:
|
|
|
|
|
|
**Klassenbasierte Architektur**: Wir organisieren unseren Code in Klassen, was wie das Erstellen von Bauplänen für Objekte ist
|
|
|
**Async/Await**: Moderner Weg, um längere Operationen (z. B. API-Aufrufe) zu handhaben
|
|
|
**Eventgesteuerte Programmierung**: Unsere App reagiert auf Nutzeraktionen (Klicks, Tastendruck) statt in einer Schleife zu laufen
|
|
|
**DOM-Manipulation**: Dynamisches Aktualisieren des Webseiteninhalts basierend auf Nutzerinteraktionen und API-Antworten
|
|
|
|
|
|
### Projektstruktur-Einrichtung
|
|
|
|
|
|
Erstellen Sie ein Frontend-Verzeichnis mit dieser organisierten Struktur:
|
|
|
|
|
|
```text
|
|
|
frontend/
|
|
|
├── index.html # Main HTML structure
|
|
|
├── app.js # JavaScript functionality
|
|
|
└── styles.css # Visual styling
|
|
|
```
|
|
|
|
|
|
**Verständnis der Architektur:**
|
|
|
- **Trennt** die Verantwortlichkeiten zwischen Struktur (HTML), Verhalten (JavaScript) und Präsentation (CSS)
|
|
|
- **Bewahrt** eine einfache Dateistruktur, die leicht zu navigieren und zu ändern ist
|
|
|
- **Folgt** den Best Practices der Webentwicklung für Organisation und Wartbarkeit
|
|
|
|
|
|
### Aufbau des HTML-Fundaments: Semantische Struktur für Barrierefreiheit
|
|
|
|
|
|
Beginnen wir mit der HTML-Struktur. Moderne Webentwicklung legt Wert auf „semantisches HTML“ – die Verwendung von HTML-Elementen, die ihren Zweck klar beschreiben und nicht nur ihr Aussehen. Dies macht Ihre Anwendung zugänglich für Bildschirmleser, Suchmaschinen und andere Tools.
|
|
|
|
|
|
**Warum semantisches HTML wichtig ist**: Stellen Sie sich vor, Sie beschreiben Ihre Chat-App jemandem am Telefon. Sie würden sagen: „Es gibt einen Header mit dem Titel, einen Hauptbereich, in dem Gespräche stattfinden, und ein Formular unten für die Eingabe von Nachrichten.“ Semantisches HTML verwendet Elemente, die dieser natürlichen Beschreibung entsprechen.
|
|
|
|
|
|
Erstellen Sie `index.html` mit diesem durchdachten Markup:
|
|
|
|
|
|
```html
|
|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<title>AI Chat Assistant</title>
|
|
|
<link rel="stylesheet" href="styles.css">
|
|
|
</head>
|
|
|
<body>
|
|
|
<div class="chat-container">
|
|
|
<header class="chat-header">
|
|
|
<h1>AI Chat Assistant</h1>
|
|
|
<p>Ask me anything!</p>
|
|
|
</header>
|
|
|
|
|
|
<main class="chat-messages" id="messages" role="log" aria-live="polite">
|
|
|
<!-- Messages will be dynamically added here -->
|
|
|
</main>
|
|
|
|
|
|
<form class="chat-form" id="chatForm">
|
|
|
<div class="input-group">
|
|
|
<input
|
|
|
type="text"
|
|
|
id="messageInput"
|
|
|
placeholder="Type your message here..."
|
|
|
required
|
|
|
aria-label="Chat message input"
|
|
|
>
|
|
|
<button type="submit" id="sendBtn" aria-label="Send message">
|
|
|
Send
|
|
|
</button>
|
|
|
</div>
|
|
|
</form>
|
|
|
</div>
|
|
|
<script src="app.js"></script>
|
|
|
</body>
|
|
|
</html>
|
|
|
```
|
|
|
|
|
|
**Verstehen Sie jedes HTML-Element und seinen Zweck:**
|
|
|
|
|
|
#### Dokumentstruktur
|
|
|
- **`<!DOCTYPE html>`**: Teilt dem Browser mit, dass es sich um modernes HTML5 handelt
|
|
|
- **`<html lang="en">`**: Gibt die Sprache der Seite für Bildschirmleser und Übersetzungstools an
|
|
|
- **`<meta charset="UTF-8">`**: Stellt die richtige Zeichenkodierung für internationalen Text sicher
|
|
|
- **`<meta name="viewport"...>`**: Macht die Seite mobil-responsive durch Kontrolle von Zoom und Skalierung
|
|
|
|
|
|
#### Semantische Elemente
|
|
|
- **`<header>`**: Identifiziert klar den oberen Bereich mit Titel und Beschreibung
|
|
|
- **`<main>`**: Bezeichnet den Hauptinhalt (wo die Unterhaltungen stattfinden)
|
|
|
- **`<form>`**: Semantisch korrekt für Benutzereingaben, ermöglicht richtige Tastaturnavigation
|
|
|
|
|
|
#### Barrierefreiheitsmerkmale
|
|
|
- **`role="log"`**: Teilt Bildschirmlesern mit, dass dies ein chronologisches Nachrichtenprotokoll ist
|
|
|
- **`aria-live="polite"`**: Meldet neue Nachrichten an Bildschirmleser, ohne zu unterbrechen
|
|
|
- **`aria-label`**: Bietet beschreibende Labels für Formularelemente
|
|
|
- **`required`**: Browser validiert, dass Benutzer eine Nachricht eingeben, bevor sie senden
|
|
|
|
|
|
#### CSS- und JavaScript-Integration
|
|
|
- **`class`-Attribute**: Bieten Styling-Hooks für CSS (z. B. `chat-container`, `input-group`)
|
|
|
- **`id`-Attribute**: Ermöglichen es JavaScript, bestimmte Elemente zu finden und zu manipulieren
|
|
|
- **Skriptplatzierung**: JavaScript-Datei wird am Ende geladen, sodass HTML zuerst geladen wird
|
|
|
|
|
|
**Warum diese Struktur funktioniert:**
|
|
|
- **Logischer Ablauf**: Header → Hauptinhalt → Eingabeformular entspricht natürlicher Lesereihenfolge
|
|
|
- **Tastaturzugänglich**: Nutzer können durch alle interaktiven Elemente tabben
|
|
|
- **Bildschirmleserfreundlich**: Klare Orientierungspunkte und Beschreibungen für sehbehinderte Nutzer
|
|
|
- **Mobil responsiv**: Meta-Viewport-Tag ermöglicht responsives Design
|
|
|
- **Progressive Verbesserung**: Funktioniert auch, wenn CSS oder JavaScript nicht geladen wird
|
|
|
|
|
|
### Hinzufügen von interaktivem JavaScript: Logik moderner Webanwendungen
|
|
|
|
|
|
Jetzt erstellen wir das JavaScript, das unsere Chat-Oberfläche zum Leben erweckt. Wir verwenden moderne JavaScript-Patterns, die Sie in der professionellen Webentwicklung antreffen werden, einschließlich ES6-Klassen, async/await und ereignisgesteuerter Programmierung.
|
|
|
|
|
|
#### Verständnis der modernen JavaScript-Architektur
|
|
|
|
|
|
Anstatt prozeduralen Code zu schreiben (eine Reihe von Funktionen, die nacheinander ausgeführt werden), erstellen wir eine **klassenbasierte Architektur**. Denken Sie an eine Klasse als Blaupause zur Erzeugung von Objekten – wie ein Architekturplan, der für den Bau mehrerer Häuser verwendet werden kann.
|
|
|
|
|
|
**Warum Klassen für Webanwendungen verwenden?**
|
|
|
- **Organisation**: Alle zusammengehörigen Funktionen sind gruppiert
|
|
|
- **Wiederverwendbarkeit**: Sie könnten mehrere Chat-Instanzen auf derselben Seite erstellen
|
|
|
- **Wartbarkeit**: Einfacheres Debuggen und Modifizieren spezifischer Funktionen
|
|
|
- **Professioneller Standard**: Dieses Pattern wird in Frameworks wie React, Vue und Angular verwendet
|
|
|
|
|
|
Erstellen Sie `app.js` mit diesem modernen, gut strukturierten JavaScript:
|
|
|
|
|
|
```javascript
|
|
|
// app.js - Moderne Chat-Anwendungslogik
|
|
|
|
|
|
class ChatApp {
|
|
|
constructor() {
|
|
|
// Referenzen zu DOM-Elementen holen, die wir manipulieren müssen
|
|
|
this.messages = document.getElementById("messages");
|
|
|
this.form = document.getElementById("chatForm");
|
|
|
this.input = document.getElementById("messageInput");
|
|
|
this.sendButton = document.getElementById("sendBtn");
|
|
|
|
|
|
// Hier deine Backend-URL konfigurieren
|
|
|
this.BASE_URL = "http://localhost:5000"; // Passe dies für deine Umgebung an
|
|
|
this.API_ENDPOINT = `${this.BASE_URL}/hello`;
|
|
|
|
|
|
// Event-Listener einrichten, wenn die Chat-App erstellt wird
|
|
|
this.initializeEventListeners();
|
|
|
}
|
|
|
|
|
|
initializeEventListeners() {
|
|
|
// Auf Formularabsendung hören (wenn Nutzer auf Senden klickt oder Enter drückt)
|
|
|
this.form.addEventListener("submit", (e) => this.handleSubmit(e));
|
|
|
|
|
|
// Auch auf Enter-Taste im Eingabefeld hören (bessere UX)
|
|
|
this.input.addEventListener("keypress", (e) => {
|
|
|
if (e.key === "Enter" && !e.shiftKey) {
|
|
|
e.preventDefault();
|
|
|
this.handleSubmit(e);
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
|
|
|
async handleSubmit(event) {
|
|
|
event.preventDefault(); // Verhindere, dass das Formular die Seite neu lädt
|
|
|
|
|
|
const messageText = this.input.value.trim();
|
|
|
if (!messageText) return; // Keine leeren Nachrichten senden
|
|
|
|
|
|
// Nutzerfeedback geben, dass etwas passiert
|
|
|
this.setLoading(true);
|
|
|
|
|
|
// Nutzer-Nachricht sofort zum Chat hinzufügen (optimistische UI)
|
|
|
this.appendMessage(messageText, "user");
|
|
|
|
|
|
// Eingabefeld löschen, damit Nutzer nächste Nachricht tippen kann
|
|
|
this.input.value = '';
|
|
|
|
|
|
try {
|
|
|
// Die AI-API aufrufen und auf Antwort warten
|
|
|
const reply = await this.callAPI(messageText);
|
|
|
|
|
|
// AI-Antwort zum Chat hinzufügen
|
|
|
this.appendMessage(reply, "assistant");
|
|
|
} catch (error) {
|
|
|
console.error('API Error:', error);
|
|
|
this.appendMessage("Sorry, I'm having trouble connecting right now. Please try again.", "error");
|
|
|
} finally {
|
|
|
// Die Benutzeroberfläche unabhängig von Erfolg oder Fehler wieder aktivieren
|
|
|
this.setLoading(false);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
async callAPI(message) {
|
|
|
const response = await fetch(this.API_ENDPOINT, {
|
|
|
method: "POST",
|
|
|
headers: {
|
|
|
"Content-Type": "application/json"
|
|
|
},
|
|
|
body: JSON.stringify({ message })
|
|
|
});
|
|
|
|
|
|
if (!response.ok) {
|
|
|
throw new Error(`HTTP error! status: ${response.status}`);
|
|
|
}
|
|
|
|
|
|
const data = await response.json();
|
|
|
return data.response;
|
|
|
}
|
|
|
|
|
|
appendMessage(text, role) {
|
|
|
const messageElement = document.createElement("div");
|
|
|
messageElement.className = `message ${role}`;
|
|
|
messageElement.innerHTML = `
|
|
|
<div class="message-content">
|
|
|
<span class="message-text">${this.escapeHtml(text)}</span>
|
|
|
<span class="message-time">${new Date().toLocaleTimeString()}</span>
|
|
|
</div>
|
|
|
`;
|
|
|
|
|
|
this.messages.appendChild(messageElement);
|
|
|
this.scrollToBottom();
|
|
|
}
|
|
|
|
|
|
escapeHtml(text) {
|
|
|
const div = document.createElement('div');
|
|
|
div.textContent = text;
|
|
|
return div.innerHTML;
|
|
|
}
|
|
|
|
|
|
scrollToBottom() {
|
|
|
this.messages.scrollTop = this.messages.scrollHeight;
|
|
|
}
|
|
|
|
|
|
setLoading(isLoading) {
|
|
|
this.sendButton.disabled = isLoading;
|
|
|
this.input.disabled = isLoading;
|
|
|
this.sendButton.textContent = isLoading ? "Sending..." : "Send";
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// Die Chat-Anwendung initialisieren, wenn die Seite lädt
|
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
|
new ChatApp();
|
|
|
});
|
|
|
```
|
|
|
|
|
|
#### Verständnis der einzelnen JavaScript-Konzepte
|
|
|
|
|
|
**ES6-Klassenstruktur**:
|
|
|
```javascript
|
|
|
class ChatApp {
|
|
|
constructor() {
|
|
|
// Dies wird ausgeführt, wenn Sie eine neue ChatApp-Instanz erstellen
|
|
|
// Es ist wie die "Setup"-Funktion für Ihren Chat
|
|
|
}
|
|
|
|
|
|
methodName() {
|
|
|
// Methoden sind Funktionen, die zur Klasse gehören
|
|
|
// Sie können auf Klassen-Eigenschaften mit "this" zugreifen
|
|
|
}
|
|
|
}
|
|
|
```
|
|
|
|
|
|
**Async/Await-Pattern**:
|
|
|
```javascript
|
|
|
// Alte Methode (Callback-Hölle):
|
|
|
fetch(url)
|
|
|
.then(response => response.json())
|
|
|
.then(data => console.log(data))
|
|
|
.catch(error => console.error(error));
|
|
|
|
|
|
// Moderne Methode (async/await):
|
|
|
try {
|
|
|
const response = await fetch(url);
|
|
|
const data = await response.json();
|
|
|
console.log(data);
|
|
|
} catch (error) {
|
|
|
console.error(error);
|
|
|
}
|
|
|
```
|
|
|
|
|
|
**Ereignisgesteuerte Programmierung**:
|
|
|
Anstatt ständig zu prüfen, ob etwas passiert ist, "hören" wir auf Ereignisse:
|
|
|
```javascript
|
|
|
// Wenn das Formular abgesendet wird, führe handleSubmit aus
|
|
|
this.form.addEventListener("submit", (e) => this.handleSubmit(e));
|
|
|
|
|
|
// Wenn die Eingabetaste gedrückt wird, führe ebenfalls handleSubmit aus
|
|
|
this.input.addEventListener("keypress", (e) => { /* ... */ });
|
|
|
```
|
|
|
|
|
|
**DOM-Manipulation**:
|
|
|
```javascript
|
|
|
// Neue Elemente erstellen
|
|
|
const messageElement = document.createElement("div");
|
|
|
|
|
|
// Ihre Eigenschaften ändern
|
|
|
messageElement.className = "message user";
|
|
|
messageElement.innerHTML = "Hello world!";
|
|
|
|
|
|
// Zur Seite hinzufügen
|
|
|
this.messages.appendChild(messageElement);
|
|
|
```
|
|
|
|
|
|
#### Sicherheit und Best Practices
|
|
|
|
|
|
**XSS-Prävention**:
|
|
|
```javascript
|
|
|
escapeHtml(text) {
|
|
|
const div = document.createElement('div');
|
|
|
div.textContent = text; // Dies maskiert HTML automatisch
|
|
|
return div.innerHTML;
|
|
|
}
|
|
|
```
|
|
|
|
|
|
**Warum das wichtig ist**: Wenn ein Benutzer `<script>alert('hack')</script>` eintippt, sorgt diese Funktion dafür, dass es als Text angezeigt wird und nicht als Code ausgeführt wird.
|
|
|
|
|
|
**Fehlerbehandlung**:
|
|
|
```javascript
|
|
|
try {
|
|
|
const reply = await this.callAPI(messageText);
|
|
|
this.appendMessage(reply, "assistant");
|
|
|
} catch (error) {
|
|
|
// Zeige benutzerfreundliche Fehlermeldung anstelle des Absturzes der App
|
|
|
this.appendMessage("Sorry, I'm having trouble...", "error");
|
|
|
}
|
|
|
```
|
|
|
|
|
|
**Überlegungen zur Benutzererfahrung**:
|
|
|
- **Optimistische UI**: Benutzer-Nachricht sofort hinzufügen, nicht auf Server-Antwort warten
|
|
|
- **Ladezustände**: Buttons deaktivieren und "Senden..." anzeigen während des Wartens
|
|
|
- **Automatisches Scrollen**: Neueste Nachrichten sichtbar halten
|
|
|
- **Eingabevalidierung**: Keine leeren Nachrichten senden
|
|
|
- **Tastenkürzel**: Enter-Taste sendet Nachrichten (wie bei echten Chat-Apps)
|
|
|
|
|
|
#### Verständnis des Anwendungsablaufs
|
|
|
|
|
|
1. **Seite lädt** → `DOMContentLoaded` Event wird ausgelöst → `new ChatApp()` wird erstellt
|
|
|
2. **Konstruktor läuft** → Holt DOM-Element-Referenzen → Richtet Event-Listener ein
|
|
|
3. **Benutzer tippt Nachricht** → Drückt Enter oder klickt auf Senden → `handleSubmit` läuft
|
|
|
4. **handleSubmit** → Validiert Eingabe → Zeigt Ladezustand → Ruft API auf
|
|
|
5. **API antwortet** → Fügt AI-Nachricht in den Chat ein → Schnittstelle wird wieder aktiviert
|
|
|
6. **Bereit für nächste Nachricht** → Benutzer kann weiter chatten
|
|
|
|
|
|
Diese Architektur ist skalierbar – Sie können problemlos Funktionen wie Nachrichtenbearbeitung, Datei-Uploads oder mehrere Gesprächsfäden hinzufügen, ohne die Kernstruktur umzuschreiben.
|
|
|
|
|
|
### 🎯 Pädagogische Reflexion: Moderne Frontend-Architektur
|
|
|
|
|
|
**Verständnis der Architektur**: Sie haben eine komplette Single-Page-Anwendung mit modernen JavaScript-Patterns umgesetzt. Das repräsentiert professionelle Frontend-Entwicklung.
|
|
|
|
|
|
**Beherrschte Schlüsselkonzepte**:
|
|
|
- **ES6-Klassenarchitektur**: Organisierter, wartbarer Codeaufbau
|
|
|
- **Async/Await-Pattern**: Moderne asynchrone Programmierung
|
|
|
- **Ereignisgesteuerte Programmierung**: Reaktionsfähiges UI-Design
|
|
|
- **Beste Sicherheitspraktiken**: XSS-Schutz und Eingabevalidierung
|
|
|
|
|
|
**Branchenverbindung**: Die gelernten Patterns (klassenbasierte Architektur, asynchrone Operationen, DOM-Manipulation) bilden die Grundlage moderner Frameworks wie React, Vue und Angular. Sie entwickeln mit derselben Denkweise wie in produktiven Anwendungen.
|
|
|
|
|
|
**Reflexionsfrage**: Wie würden Sie diese Chat-Anwendung erweitern, um mehrere Gespräche oder Benutzer-Authentifizierung zu unterstützen? Überlegen Sie, welche architektonischen Änderungen nötig sind und wie sich die Klassenstruktur entwickeln würde.
|
|
|
|
|
|
### Gestaltung Ihrer Chat-Oberfläche
|
|
|
|
|
|
Nun erstellen wir eine moderne, optisch ansprechende Chat-Oberfläche mit CSS. Gutes Styling lässt Ihre Anwendung professionell wirken und verbessert das Benutzererlebnis insgesamt. Wir verwenden moderne CSS-Features wie Flexbox, CSS Grid und eigene Variablen für ein responsives und barrierefreies Design.
|
|
|
|
|
|
Erstellen Sie `styles.css` mit diesen umfassenden Styles:
|
|
|
|
|
|
```css
|
|
|
/* styles.css - Modern chat interface styling */
|
|
|
|
|
|
:root {
|
|
|
--primary-color: #2563eb;
|
|
|
--secondary-color: #f1f5f9;
|
|
|
--user-color: #3b82f6;
|
|
|
--assistant-color: #6b7280;
|
|
|
--error-color: #ef4444;
|
|
|
--text-primary: #1e293b;
|
|
|
--text-secondary: #64748b;
|
|
|
--border-radius: 12px;
|
|
|
--shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
|
|
}
|
|
|
|
|
|
* {
|
|
|
margin: 0;
|
|
|
padding: 0;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
body {
|
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
min-height: 100vh;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
padding: 20px;
|
|
|
}
|
|
|
|
|
|
.chat-container {
|
|
|
width: 100%;
|
|
|
max-width: 800px;
|
|
|
height: 600px;
|
|
|
background: white;
|
|
|
border-radius: var(--border-radius);
|
|
|
box-shadow: var(--shadow);
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
|
|
|
.chat-header {
|
|
|
background: var(--primary-color);
|
|
|
color: white;
|
|
|
padding: 20px;
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
.chat-header h1 {
|
|
|
font-size: 1.5rem;
|
|
|
margin-bottom: 5px;
|
|
|
}
|
|
|
|
|
|
.chat-header p {
|
|
|
opacity: 0.9;
|
|
|
font-size: 0.9rem;
|
|
|
}
|
|
|
|
|
|
.chat-messages {
|
|
|
flex: 1;
|
|
|
padding: 20px;
|
|
|
overflow-y: auto;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
gap: 15px;
|
|
|
background: var(--secondary-color);
|
|
|
}
|
|
|
|
|
|
.message {
|
|
|
display: flex;
|
|
|
max-width: 80%;
|
|
|
animation: slideIn 0.3s ease-out;
|
|
|
}
|
|
|
|
|
|
.message.user {
|
|
|
align-self: flex-end;
|
|
|
}
|
|
|
|
|
|
.message.user .message-content {
|
|
|
background: var(--user-color);
|
|
|
color: white;
|
|
|
border-radius: var(--border-radius) var(--border-radius) 4px var(--border-radius);
|
|
|
}
|
|
|
|
|
|
.message.assistant {
|
|
|
align-self: flex-start;
|
|
|
}
|
|
|
|
|
|
.message.assistant .message-content {
|
|
|
background: white;
|
|
|
color: var(--text-primary);
|
|
|
border-radius: var(--border-radius) var(--border-radius) var(--border-radius) 4px;
|
|
|
border: 1px solid #e2e8f0;
|
|
|
}
|
|
|
|
|
|
.message.error .message-content {
|
|
|
background: var(--error-color);
|
|
|
color: white;
|
|
|
border-radius: var(--border-radius);
|
|
|
}
|
|
|
|
|
|
.message-content {
|
|
|
padding: 12px 16px;
|
|
|
box-shadow: var(--shadow);
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
.message-text {
|
|
|
display: block;
|
|
|
line-height: 1.5;
|
|
|
word-wrap: break-word;
|
|
|
}
|
|
|
|
|
|
.message-time {
|
|
|
display: block;
|
|
|
font-size: 0.75rem;
|
|
|
opacity: 0.7;
|
|
|
margin-top: 5px;
|
|
|
}
|
|
|
|
|
|
.chat-form {
|
|
|
padding: 20px;
|
|
|
border-top: 1px solid #e2e8f0;
|
|
|
background: white;
|
|
|
}
|
|
|
|
|
|
.input-group {
|
|
|
display: flex;
|
|
|
gap: 10px;
|
|
|
align-items: center;
|
|
|
}
|
|
|
|
|
|
#messageInput {
|
|
|
flex: 1;
|
|
|
padding: 12px 16px;
|
|
|
border: 2px solid #e2e8f0;
|
|
|
border-radius: var(--border-radius);
|
|
|
font-size: 1rem;
|
|
|
outline: none;
|
|
|
transition: border-color 0.2s ease;
|
|
|
}
|
|
|
|
|
|
#messageInput:focus {
|
|
|
border-color: var(--primary-color);
|
|
|
}
|
|
|
|
|
|
#messageInput:disabled {
|
|
|
background: #f8fafc;
|
|
|
opacity: 0.6;
|
|
|
cursor: not-allowed;
|
|
|
}
|
|
|
|
|
|
#sendBtn {
|
|
|
padding: 12px 24px;
|
|
|
background: var(--primary-color);
|
|
|
color: white;
|
|
|
border: none;
|
|
|
border-radius: var(--border-radius);
|
|
|
font-size: 1rem;
|
|
|
font-weight: 600;
|
|
|
cursor: pointer;
|
|
|
transition: background-color 0.2s ease;
|
|
|
min-width: 80px;
|
|
|
}
|
|
|
|
|
|
#sendBtn:hover:not(:disabled) {
|
|
|
background: #1d4ed8;
|
|
|
}
|
|
|
|
|
|
#sendBtn:disabled {
|
|
|
background: #94a3b8;
|
|
|
cursor: not-allowed;
|
|
|
}
|
|
|
|
|
|
@keyframes slideIn {
|
|
|
from {
|
|
|
opacity: 0;
|
|
|
transform: translateY(10px);
|
|
|
}
|
|
|
to {
|
|
|
opacity: 1;
|
|
|
transform: translateY(0);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* Responsive design for mobile devices */
|
|
|
@media (max-width: 768px) {
|
|
|
body {
|
|
|
padding: 10px;
|
|
|
}
|
|
|
|
|
|
.chat-container {
|
|
|
height: calc(100vh - 20px);
|
|
|
border-radius: 8px;
|
|
|
}
|
|
|
|
|
|
.message {
|
|
|
max-width: 90%;
|
|
|
}
|
|
|
|
|
|
.input-group {
|
|
|
flex-direction: column;
|
|
|
gap: 10px;
|
|
|
}
|
|
|
|
|
|
#messageInput {
|
|
|
width: 100%;
|
|
|
}
|
|
|
|
|
|
#sendBtn {
|
|
|
width: 100%;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* Accessibility improvements */
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
|
.message {
|
|
|
animation: none;
|
|
|
}
|
|
|
|
|
|
* {
|
|
|
transition: none !important;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/* Dark mode support */
|
|
|
@media (prefers-color-scheme: dark) {
|
|
|
.chat-container {
|
|
|
background: #1e293b;
|
|
|
color: #f1f5f9;
|
|
|
}
|
|
|
|
|
|
.chat-messages {
|
|
|
background: #0f172a;
|
|
|
}
|
|
|
|
|
|
.message.assistant .message-content {
|
|
|
background: #334155;
|
|
|
color: #f1f5f9;
|
|
|
border-color: #475569;
|
|
|
}
|
|
|
|
|
|
.chat-form {
|
|
|
background: #1e293b;
|
|
|
border-color: #475569;
|
|
|
}
|
|
|
|
|
|
#messageInput {
|
|
|
background: #334155;
|
|
|
color: #f1f5f9;
|
|
|
border-color: #475569;
|
|
|
}
|
|
|
}
|
|
|
```
|
|
|
|
|
|
**Verständnis der CSS-Architektur:**
|
|
|
- **Verwendet** CSS-Custom-Properties (Variablen) für konsistentes Theming und einfache Pflege
|
|
|
- **Implementiert** Flexbox-Layout für responsives Design und korrekte Ausrichtung
|
|
|
- **Enthält** sanfte Animationen für das Erscheinen von Nachrichten ohne Ablenkung
|
|
|
- **Bietet** visuelle Unterscheidung zwischen Benutzer- und AI-Nachrichten sowie Fehlerzuständen
|
|
|
- **Unterstützt** responsives Design für Desktop und Mobilgeräte
|
|
|
- **Berücksichtigt** Barrierefreiheitsoptionen wie reduzierte Bewegung und passende Kontrastverhältnisse
|
|
|
- **Bietet** Dunkelmodus-Unterstützung basierend auf Systemeinstellungen des Nutzers
|
|
|
|
|
|
### Konfiguration Ihrer Backend-URL
|
|
|
|
|
|
Der letzte Schritt ist die Aktualisierung der `BASE_URL` in Ihrem JavaScript passend zu Ihrem Backend-Server:
|
|
|
|
|
|
```javascript
|
|
|
// Für die lokale Entwicklung
|
|
|
this.BASE_URL = "http://localhost:5000";
|
|
|
|
|
|
// Für GitHub Codespaces (ersetzen Sie dies durch Ihre tatsächliche URL)
|
|
|
this.BASE_URL = "https://your-codespace-name-5000.app.github.dev";
|
|
|
```
|
|
|
|
|
|
**Bestimmung Ihrer Backend-URL:**
|
|
|
- **Lokale Entwicklung**: `http://localhost:5000` verwenden, wenn Frontend und Backend lokal laufen
|
|
|
- **Codespaces**: Finden Sie Ihre Backend-URL im Ports-Tab, nachdem Port 5000 öffentlich gemacht wurde
|
|
|
- **Produktion**: Ersetzen Sie durch Ihre tatsächliche Domain beim Deployment auf einem Hosting-Service
|
|
|
|
|
|
> 💡 **Test-Tipp**: Sie können Ihr Backend direkt testen, indem Sie die Root-URL im Browser aufrufen. Dort sollte die Willkommensnachricht Ihres FastAPI-Servers erscheinen.
|
|
|
|
|
|
|
|
|
|
|
|
## Testen und Deployment
|
|
|
|
|
|
Jetzt, wo Sie Frontend und Backend gebaut haben, testen wir, ob alles zusammen funktioniert und erkunden Deployment-Optionen, um Ihren Chat-Assistenten mit anderen zu teilen.
|
|
|
|
|
|
### Lokaler Testablauf
|
|
|
|
|
|
Folgen Sie diesen Schritten, um Ihre komplette Anwendung zu testen:
|
|
|
|
|
|
```mermaid
|
|
|
graph TD
|
|
|
A[Backend-Server starten] --> B[Umgebungsvariablen konfigurieren]
|
|
|
B --> C[API-Endpunkte testen]
|
|
|
C --> D[Frontend im Browser öffnen]
|
|
|
D --> E[Chat-Funktionalität testen]
|
|
|
E --> F[Fehler beheben]
|
|
|
```
|
|
|
**Schritt-für-Schritt-Testprozess:**
|
|
|
|
|
|
1. **Starten Sie Ihren Backend-Server**:
|
|
|
```bash
|
|
|
cd backend
|
|
|
source venv/bin/activate # oder venv\Scripts\activate unter Windows
|
|
|
python api.py
|
|
|
```
|
|
|
|
|
|
2. **Überprüfen Sie, ob die API funktioniert**:
|
|
|
- Öffnen Sie `http://localhost:5000` im Browser
|
|
|
- Sie sollten die Willkommensnachricht Ihres FastAPI-Servers sehen
|
|
|
|
|
|
3. **Öffnen Sie Ihr Frontend**:
|
|
|
- Navigieren Sie in Ihr Frontend-Verzeichnis
|
|
|
- Öffnen Sie `index.html` im Webbrowser
|
|
|
- Oder verwenden Sie VS Code Live Server Extension für bessere Entwicklungs-Erfahrung
|
|
|
|
|
|
4. **Testen Sie die Chat-Funktionalität**:
|
|
|
- Tippen Sie eine Nachricht in das Eingabefeld
|
|
|
- Klicken Sie auf "Senden" oder drücken Sie Enter
|
|
|
- Vergewissern Sie sich, dass die KI angemessen antwortet
|
|
|
- Kontrollieren Sie die Browserkonsole auf JavaScript-Fehler
|
|
|
|
|
|
### Häufige Probleme und deren Lösung
|
|
|
|
|
|
| Problem | Symptome | Lösung |
|
|
|
|---------|----------|---------|
|
|
|
| **CORS-Fehler** | Frontend kann Backend nicht erreichen | Stellen Sie sicher, dass FastAPI CORSMiddleware korrekt konfiguriert ist |
|
|
|
| **API-Schlüssel-Fehler** | 401 Unauthorized-Antworten | Prüfen Sie Ihre `GITHUB_TOKEN` Umgebungsvariable |
|
|
|
| **Verbindung abgelehnt** | Netzwerkfehler im Frontend | Überprüfen Sie Backend-URL und dass der Flask-Server läuft |
|
|
|
| **Keine KI-Antwort** | Leere oder fehlerhafte Antworten | Prüfen Sie Backend-Logs auf API-Quota- oder Authentifizierungsprobleme |
|
|
|
|
|
|
**Übliche Debugging-Schritte:**
|
|
|
- **Prüfen** Sie die Entwicklerkonsole des Browsers auf JavaScript-Fehler
|
|
|
- **Verifizieren** Sie, dass im Netzwerk-Tab erfolgreiche API-Anfragen und -Antworten gezeigt werden
|
|
|
- **Überprüfen** Sie das Backend-Terminal auf Python-Fehler oder API-Probleme
|
|
|
- **Bestätigen** Sie, dass Umgebungsvariablen korrekt geladen und zugänglich sind
|
|
|
|
|
|
## 📈 Ihr Zeitplan für AI-Anwendungsentwicklung
|
|
|
|
|
|
```mermaid
|
|
|
timeline
|
|
|
title Vollständige Entwicklung einer KI-Anwendung
|
|
|
|
|
|
section KI-Grundlagen
|
|
|
Verstehen von Generativer KI
|
|
|
: Mustererkennungskonzepte erfassen
|
|
|
: KI-Parametersteuerung beherrschen
|
|
|
: Prompt-Engineering-Techniken erlernen
|
|
|
|
|
|
GitHub Modelle Integration
|
|
|
: KI-Service-Plattformen navigieren
|
|
|
: Authentifizierung sicher handhaben
|
|
|
: Modellparameter optimieren
|
|
|
|
|
|
section Backend-Entwicklung
|
|
|
Python API Architektur
|
|
|
: FastAPI-Anwendungen erstellen
|
|
|
: Asynchrone Operationen implementieren
|
|
|
: Sichere Endpunkte schaffen
|
|
|
|
|
|
KI-Service-Integration
|
|
|
: Verbindung zu externen KI-APIs herstellen
|
|
|
: Rate-Limiting handhaben
|
|
|
: Fehlergrenzen implementieren
|
|
|
|
|
|
section Frontend-Beherrschung
|
|
|
Moderne JavaScript-Muster
|
|
|
: ES6 Klassenarchitektur beherrschen
|
|
|
: Async/Await Abläufe implementieren
|
|
|
: Responsive Benutzeroberflächen erstellen
|
|
|
|
|
|
Echtzeit Benutzererfahrung
|
|
|
: Dynamische Chat-Interfaces erstellen
|
|
|
: Ladezustände handhaben
|
|
|
: Benutzerinteraktionen optimieren
|
|
|
|
|
|
section Produktionsreife
|
|
|
Sicherheit & Leistung
|
|
|
: Sichere Tokenverwaltung implementieren
|
|
|
: XSS-Schwachstellen verhindern
|
|
|
: API-Leistung optimieren
|
|
|
|
|
|
Professionelle Bereitstellung
|
|
|
: Skalierbare Architekturen erstellen
|
|
|
: Wartbaren Code schreiben
|
|
|
: Entwicklungsprozesse dokumentieren
|
|
|
```
|
|
|
**🎓 Abschluss-Meilenstein**: Sie haben erfolgreich eine voll funktionsfähige AI-gestützte Anwendung mit denselben Technologien und Architekturmustern erstellt, die moderne AI-Assistenten antreiben. Diese Fähigkeiten verbinden traditionelle Webentwicklung mit modernster AI-Integration.
|
|
|
|
|
|
**🔄 Nächste Fähigkeiten-Stufen**:
|
|
|
- Bereit zur Erforschung fortgeschrittener AI-Frameworks (LangChain, LangGraph)
|
|
|
- Befähigt, multimodale AI-Anwendungen zu bauen (Text, Bild, Sprache)
|
|
|
- Ausgerüstet für Implementierung von Vektor-Datenbanken und Retrieval-Systemen
|
|
|
- Fundament gelegt für Machine Learning und Feinabstimmung von AI-Modellen
|
|
|
|
|
|
## GitHub Copilot Agent Challenge 🚀
|
|
|
|
|
|
Nutzen Sie den Agent-Modus, um folgende Challenge zu meistern:
|
|
|
|
|
|
**Beschreibung:** Erweitern Sie den Chat-Assistenten um Gesprächsverlauf und Persistenz der Nachrichten. Diese Challenge hilft Ihnen, zu verstehen, wie man den Zustand in Chat-Anwendungen verwaltet und Datenspeicherung umsetzt für eine bessere Nutzererfahrung.
|
|
|
|
|
|
**Aufgabe:** Modifizieren Sie die Chat-Anwendung, damit Gesprächsverläufe zwischen Sessions gespeichert werden. Fügen Sie Funktionen hinzu, um Chat-Nachrichten im lokalen Speicher abzulegen, Gesprächshistorie beim Laden der Seite anzuzeigen und einen "Verlauf löschen"-Button. Implementieren Sie außerdem Tippindikatoren und Zeitstempel für Nachrichten, um das Chat-Erlebnis realistischer zu gestalten.
|
|
|
|
|
|
Erfahren Sie mehr über [Agent-Modus](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode).
|
|
|
|
|
|
## Aufgabe: Erstellen Sie Ihren persönlichen AI-Assistenten
|
|
|
|
|
|
Nun erstellen Sie Ihre eigene AI-Assistenten-Implementierung. Statt einfach den Tutorial-Code zu kopieren, ist dies eine Gelegenheit, die Konzepte anzuwenden und etwas zu bauen, das Ihre eigenen Interessen und Use Cases widerspiegelt.
|
|
|
|
|
|
### Projektanforderungen
|
|
|
|
|
|
Legen Sie Ihr Projekt mit einer sauberen, organisierten Struktur an:
|
|
|
|
|
|
```text
|
|
|
my-ai-assistant/
|
|
|
├── backend/
|
|
|
│ ├── api.py # Your FastAPI server
|
|
|
│ ├── llm.py # AI integration functions
|
|
|
│ ├── .env # Your secrets (keep this safe!)
|
|
|
│ └── requirements.txt # Python dependencies
|
|
|
├── frontend/
|
|
|
│ ├── index.html # Your chat interface
|
|
|
│ ├── app.js # The JavaScript magic
|
|
|
│ └── styles.css # Make it look amazing
|
|
|
└── README.md # Tell the world about your creation
|
|
|
```
|
|
|
|
|
|
### Kern-Implementierungsaufgaben
|
|
|
|
|
|
**Backend-Entwicklung:**
|
|
|
- **Übernehmen** Sie unseren FastAPI-Code und machen Sie ihn zu Ihrem eigenen
|
|
|
- **Erstellen** Sie eine einzigartige AI-Persönlichkeit – vielleicht ein hilfreicher Koch-Assistent, ein kreativer Schreibpartner oder ein Lernbuddy?
|
|
|
- **Fügen** Sie robuste Fehlerbehandlung hinzu, damit Ihre App nicht abstürzt, wenn etwas schiefgeht
|
|
|
- **Schreiben** Sie klare Dokumentation für alle, die Ihre API verstehen wollen
|
|
|
|
|
|
**Frontend-Entwicklung:**
|
|
|
- **Bauen** Sie eine Chat-Oberfläche, die intuitiv und einladend wirkt
|
|
|
- **Schreiben** Sie sauberes, modernes JavaScript, auf das Sie stolz anderen Entwicklern zeigen können
|
|
|
- **Gestalten** Sie ein individuelles Styling, das die Persönlichkeit Ihrer AI reflektiert – verspielt und farbenfroh? Sauber und minimalistisch? Ganz wie Sie möchten!
|
|
|
- **Stellen Sie sicher**, dass es auf Telefonen und Rechnern gleichermaßen gut funktioniert
|
|
|
|
|
|
**Personalisierungsanforderungen:**
|
|
|
- **Wählen** Sie einen einzigartigen Namen und Persönlichkeit für Ihren AI-Assistenten – vielleicht etwas, das Ihre Interessen oder Probleme widerspiegelt
|
|
|
- **Passen** Sie das visuelle Design an die Stimmung Ihres Assistenten an
|
|
|
- **Schreiben** Sie eine ansprechende Willkommensnachricht, die Lust auf Chatten macht
|
|
|
- **Testen** Sie Ihren Assistenten mit verschiedenen Fragearten, um zu sehen, wie er reagiert
|
|
|
|
|
|
### Erweiterungsideen (Optionale)
|
|
|
|
|
|
Möchten Sie Ihr Projekt auf die nächste Stufe heben? Hier sind einige unterhaltsame Ideen zum Erkunden:
|
|
|
|
|
|
| Feature | Beschreibung | Fähigkeiten, die Sie üben |
|
|
|
|---------|--------------|--------------------------|
|
|
|
| **Nachrichtenverlauf** | Gespräche auch nach Seiten-Neuladen speichern | Arbeiten mit localStorage, JSON-Verarbeitung |
|
|
|
| **Tippindikatoren** | Anzeigen von "KI tippt..." während Wartezeit | CSS-Animationen, asynchrone Programmierung |
|
|
|
| **Nachricht-Zeitstempel** | Zeigen, wann jede Nachricht gesendet wurde | Datums-/Zeitformatierung, UX-Design |
|
|
|
| **Chat exportieren** | Nutzer können Konversation herunterladen | Datei-Verarbeitung, Datenexport |
|
|
|
| **Themenwechsel** | Hell-/Dunkelmodus-Umschaltung | CSS-Variablen, Nutzerpräferenzen |
|
|
|
| **Sprach-Eingabe** | Sprache-zu-Text-Funktionalität hinzufügen | Web-APIs, Barrierefreiheit |
|
|
|
|
|
|
### Testen und Dokumentation
|
|
|
|
|
|
**Qualitätssicherung:**
|
|
|
- **Testen** Sie Ihre Anwendung mit verschiedenen Eingabetypen und Randfällen
|
|
|
- **Verifizieren** Sie, dass das responsive Design auf allen Bildschirmgrößen funktioniert
|
|
|
- **Prüfen** Sie Barrierefreiheit bei Tastaturnavigation und Screenreadern
|
|
|
- **Validieren** Sie HTML und CSS auf Standardskonformität
|
|
|
|
|
|
**Dokumentationsanforderungen:**
|
|
|
- **Schreiben** Sie eine README.md mit Beschreibung des Projekts und dessen Ausführung
|
|
|
- **Fügen** Sie Screenshots Ihrer Chat-Oberfläche hinzu
|
|
|
- **Dokumentieren** Sie alle einzigartigen Funktionen oder Anpassungen
|
|
|
- **Liefern** Sie klare Einrichtungsanweisungen für andere Entwickler
|
|
|
|
|
|
### Abgabe-Richtlinien
|
|
|
|
|
|
**Projektlieferungen:**
|
|
|
1. Vollständiger Projektordner mit allen Quellcodes
|
|
|
2. README.md mit Projektbeschreibung und Setup-Anweisungen
|
|
|
3. Screenshots, die Ihren Chat-Assistenten in Aktion zeigen
|
|
|
4. Kurze Reflexion, was Sie gelernt haben und welche Herausforderungen bestanden
|
|
|
|
|
|
**Bewertungskriterien:**
|
|
|
- **Funktionalität**: Funktioniert der Chat-Assistent wie erwartet?
|
|
|
- **Codequalität**: Ist der Code gut organisiert, kommentiert und wartbar?
|
|
|
- **Design**: Wirkt die Oberfläche ansprechend und benutzerfreundlich?
|
|
|
- **Kreativität**: Wie individuell und persönlich ist Ihre Umsetzung?
|
|
|
- **Dokumentation**: Sind die Einrichtungshinweise klar und vollständig?
|
|
|
|
|
|
> 💡 **Erfolgstipp**: Beginnen Sie erst mit den Grundanforderungen, dann fügen Sie Erweiterungen hinzu, sobald alles funktioniert. Konzentrieren Sie sich darauf, ein poliertes Kern-Erlebnis zu schaffen, bevor Sie mit fortgeschrittenen Features starten.
|
|
|
|
|
|
## Lösung
|
|
|
|
|
|
[Lösung](./solution/README.md)
|
|
|
|
|
|
## Bonus-Herausforderungen
|
|
|
|
|
|
Bereit, Ihren AI-Assistenten auf das nächste Level zu heben? Probieren Sie diese fortgeschrittenen Herausforderungen, die Ihr Verständnis der AI-Integration und Webentwicklung vertiefen.
|
|
|
|
|
|
### Persönlichkeit anpassen
|
|
|
|
|
|
Die wahre Magie geschieht, wenn Sie Ihrem AI-Assistenten eine einzigartige Persönlichkeit geben. Experimentieren Sie mit verschiedenen System-Prompts, um spezialisierte Assistenten zu erzeugen:
|
|
|
|
|
|
**Beispiel professioneller Assistent:**
|
|
|
```python
|
|
|
call_llm(message, "You are a professional business consultant with 20 years of experience. Provide structured, actionable advice with specific steps and considerations.")
|
|
|
```
|
|
|
|
|
|
**Beispiel kreativer Schreibhelfer:**
|
|
|
```python
|
|
|
call_llm(message, "You are an enthusiastic creative writing coach. Help users develop their storytelling skills with imaginative prompts and constructive feedback.")
|
|
|
```
|
|
|
|
|
|
**Beispiel technischer Mentor:**
|
|
|
```python
|
|
|
call_llm(message, "You are a patient senior developer who explains complex programming concepts using simple analogies and practical examples.")
|
|
|
```
|
|
|
|
|
|
### Frontend-Erweiterungen
|
|
|
|
|
|
Verwandeln Sie Ihre Chat-Oberfläche mit diesen visuellen und funktionalen Verbesserungen:
|
|
|
|
|
|
**Fortgeschrittene CSS-Funktionen:**
|
|
|
- **Implementieren** Sie sanfte Nachrichtenanimationen und Übergänge
|
|
|
- **Fügen** Sie eigene Chatblasen-Designs mit CSS-Formen und Verläufen hinzu
|
|
|
- **Erstellen** Sie eine Tippen-Indikator-Animation für das "Denken" der KI
|
|
|
- **Gestalten** Sie Emoji-Reaktionen oder ein Bewertungssystem für Nachrichten
|
|
|
|
|
|
**JavaScript-Erweiterungen:**
|
|
|
- **Fügen** Sie Tastenkombinationen hinzu (Strg+Enter zum Senden, Escape zum Löschen der Eingabe)
|
|
|
- **Implementieren** Sie Such- und Filterfunktionen für Nachrichten
|
|
|
- **Erstellen** Sie eine Exportfunktion für Gespräche (Download als Text oder JSON)
|
|
|
- **Fügen** Sie Auto-Save in localStorage hinzu, um Nachrichtenverlust zu vermeiden
|
|
|
|
|
|
### Fortgeschrittene AI-Integration
|
|
|
|
|
|
**Mehrere AI-Persönlichkeiten:**
|
|
|
- **Erstellen** Sie ein Dropdown zur Auswahl verschiedener AI-Persönlichkeiten
|
|
|
- **Speichern** Sie bevorzugte Persönlichkeit im localStorage
|
|
|
- **Implementieren** Sie Kontextwechsel, der den Gesprächsfluss erhält
|
|
|
- **Implementieren** Sie intelligente Vorschläge basierend auf dem Gesprächsthema
|
|
|
- **Erstellen** Sie Schnellantwort-Schaltflächen für häufige Fragen
|
|
|
|
|
|
> 🎯 **Lernziel**: Diese zusätzlichen Herausforderungen helfen Ihnen, fortgeschrittene Muster der Webentwicklung und Techniken zur KI-Integration zu verstehen, die in produktiven Anwendungen verwendet werden.
|
|
|
|
|
|
## Zusammenfassung und nächste Schritte
|
|
|
|
|
|
Herzlichen Glückwunsch! Sie haben erfolgreich einen vollständigen KI-gestützten Chat-Assistenten von Grund auf gebaut. Dieses Projekt hat Ihnen praktische Erfahrung mit modernen Webentwicklungstechnologien und KI-Integration vermittelt – Fähigkeiten, die in der heutigen Technologielandschaft immer wertvoller werden.
|
|
|
|
|
|
### Was Sie erreicht haben
|
|
|
|
|
|
Im Verlauf dieser Lektion haben Sie mehrere Schlüsseltechnologien und Konzepte gemeistert:
|
|
|
|
|
|
**Backend-Entwicklung:**
|
|
|
- **Integriert** mit GitHub Models API für KI-Funktionalität
|
|
|
- **Erstellt** eine RESTful-API mit Flask inklusive ordentlicher Fehlerbehandlung
|
|
|
- **Implementiert** sichere Authentifizierung mittels Umgebungsvariablen
|
|
|
- **Konfiguriert** CORS für Cross-Origin-Anfragen zwischen Frontend und Backend
|
|
|
|
|
|
**Frontend-Entwicklung:**
|
|
|
- **Erstellt** eine responsive Chat-Oberfläche mit semantischem HTML
|
|
|
- **Implementiert** modernes JavaScript mit async/await und klassenbasierter Architektur
|
|
|
- **Entworfen** eine ansprechende Benutzeroberfläche mit CSS Grid, Flexbox und Animationen
|
|
|
- **Hinzugefügt** Barrierefreiheitsfunktionen und Prinzipien des responsiven Designs
|
|
|
|
|
|
**Full-Stack-Integration:**
|
|
|
- **Verbunden** Frontend und Backend über HTTP API-Aufrufe
|
|
|
- **Verarbeitet** Echtzeit-Benutzerinteraktionen und asynchronen Datenfluss
|
|
|
- **Implementiert** Fehlerbehandlung und Nutzerfeedback im gesamten Anwendung
|
|
|
- **Getestet** den kompletten Anwendungsablauf von Benutzereingabe bis zur KI-Antwort
|
|
|
|
|
|
### Wichtige Lernergebnisse
|
|
|
|
|
|
```mermaid
|
|
|
mindmap
|
|
|
root((KI Chat App Fähigkeiten))
|
|
|
API Integration
|
|
|
Authentifizierung
|
|
|
Fehlerbehandlung
|
|
|
Asynchrone Programmierung
|
|
|
Web Entwicklung
|
|
|
HTML5 Semantik
|
|
|
Modernes CSS
|
|
|
ES6+ JavaScript
|
|
|
Benutzererfahrung
|
|
|
Responsives Design
|
|
|
Barrierefreiheit
|
|
|
Echtzeit-Interaktion
|
|
|
KI Verständnis
|
|
|
Prompt-Engineering
|
|
|
Modellparameter
|
|
|
Gesprächsverlauf
|
|
|
```
|
|
|
Dieses Projekt hat Sie mit den Grundlagen beim Erstellen KI-gestützter Anwendungen vertraut gemacht, die die Zukunft der Webentwicklung repräsentieren. Sie verstehen nun, wie man KI-Fähigkeiten in traditionelle Webanwendungen integriert und dabei fesselnde Nutzererfahrungen schafft, die intelligent und reaktionsfähig wirken.
|
|
|
|
|
|
### Berufliche Anwendungen
|
|
|
|
|
|
Die in dieser Lektion erlernten Fähigkeiten sind direkt auf moderne Softwareentwicklungsberufe anwendbar:
|
|
|
|
|
|
- **Full-Stack-Webentwicklung** mit modernen Frameworks und APIs
|
|
|
- **KI-Integration** in Webanwendungen und mobile Apps
|
|
|
- **API-Design und -Entwicklung** für Microservices-Architekturen
|
|
|
- **Entwicklung von Benutzeroberflächen** mit Fokus auf Barrierefreiheit und responsives Design
|
|
|
- **DevOps-Praktiken** einschließlich Umgebungs-Konfiguration und Deployment
|
|
|
|
|
|
### Fortsetzung Ihrer KI-Entwicklungsreise
|
|
|
|
|
|
**Nächste Lernschritte:**
|
|
|
- **Erkunden** Sie fortgeschrittenere KI-Modelle und APIs (GPT-4, Claude, Gemini)
|
|
|
- **Lernen** Sie Prompt-Engineering-Techniken für bessere KI-Antworten
|
|
|
- **Studieren** Sie Konversationsdesign und Prinzipien der Chatbot-Nutzererfahrung
|
|
|
- **Untersuchen** Sie KI-Sicherheit, Ethik und verantwortungsbewusste KI-Entwicklungspraktiken
|
|
|
- **Erstellen** Sie komplexere Anwendungen mit Konversationsspeicher und Kontextbewusstsein
|
|
|
|
|
|
**Fortgeschrittene Projektideen:**
|
|
|
- Mehrbenutzer-Chat-Räume mit KI-Moderation
|
|
|
- KI-gestützte Kundenservice-Chatbots
|
|
|
- Lernassistenzsysteme mit personalisiertem Bildungsangebot
|
|
|
- Kreative Schreibpartner mit unterschiedlichen KI-Persönlichkeiten
|
|
|
- Technische Dokumentationsassistenten für Entwickler
|
|
|
|
|
|
## Erste Schritte mit GitHub Codespaces
|
|
|
|
|
|
Möchten Sie dieses Projekt in einer Cloud-Entwicklungsumgebung ausprobieren? GitHub Codespaces bietet eine komplette Entwicklungsumgebung im Browser, ideal zum Experimentieren mit KI-Anwendungen ohne lokale Einrichtung.
|
|
|
|
|
|
### Einrichten Ihrer Entwicklungsumgebung
|
|
|
|
|
|
**Schritt 1: Erstellung aus Vorlage**
|
|
|
- **Navigieren** Sie zum [Web Dev For Beginners repository](https://github.com/microsoft/Web-Dev-For-Beginners)
|
|
|
- **Klicken** Sie oben rechts auf „Use this template“ (stellen Sie sicher, dass Sie bei GitHub angemeldet sind)
|
|
|
|
|
|
|
|
|
|
|
|
**Schritt 2: Codespaces starten**
|
|
|
- **Öffnen** Sie Ihr neu erstelltes Repository
|
|
|
- **Klicken** Sie den grünen „Code“-Button und wählen Sie „Codespaces“
|
|
|
- **Wählen** Sie „Create codespace on main“, um Ihre Entwicklungsumgebung zu starten
|
|
|
|
|
|
|
|
|
|
|
|
**Schritt 3: Konfiguration der Umgebung**
|
|
|
Sobald Ihr Codespace geladen ist, haben Sie Zugriff auf:
|
|
|
- **Vorinstalliertes** Python, Node.js und alle notwendigen Entwicklungstools
|
|
|
- **VS Code-Oberfläche** mit Extensions für Webentwicklung
|
|
|
- **Terminalzugriff** zum Ausführen von Backend- und Frontend-Servern
|
|
|
- **Portweiterleitung** zum Testen Ihrer Anwendungen
|
|
|
|
|
|
**Was Codespaces bietet:**
|
|
|
- **Eliminiert** Probleme bei der lokalen Einrichtung und Konfiguration der Umgebung
|
|
|
- **Bietet** eine konsistente Entwicklungsumgebung auf verschiedenen Geräten
|
|
|
- **Beinhaltet** vorkonfigurierte Tools und Erweiterungen für Webentwicklung
|
|
|
- **Ermöglicht** nahtlose Integration mit GitHub für Versionskontrolle und Zusammenarbeit
|
|
|
|
|
|
> 🚀 **Profi-Tipp**: Codespaces ist perfekt zum Lernen und Prototyping von KI-Anwendungen, da es alle komplexen Umgebungs-Konfigurationen automatisch übernimmt und Sie sich somit auf das Bauen und Lernen konzentrieren können statt auf Fehlerbehebung bei der Einrichtung.
|
|
|
|
|
|
---
|
|
|
|
|
|
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
|
|
**Haftungsausschluss**:
|
|
|
Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir um Genauigkeit bemüht sind, bitten wir zu beachten, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner Ursprungssprache ist als verbindliche Quelle zu betrachten. Für wichtige Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die durch die Nutzung dieser Übersetzung entstehen.
|
|
|
<!-- CO-OP TRANSLATOR DISCLAIMER END --> |
