|
|
# Chat asszisztens építése MI segítségével
|
|
|
|
|
|
Emlékszel a Star Trek-re, amikor a legénység lazán beszélgetett a hajó számítógépével, bonyolult kérdéseket tett fel neki, és átgondolt válaszokat kapott? Ami a 1960-as években tiszta sci-fi-nek tűnt, ma már olyan dolog, amit ismert webes technológiákkal megépíthetsz.
|
|
|
|
|
|
Ebben a leckében egy MI chat asszisztenst hozunk létre HTML, CSS, JavaScript és némi backend integráció segítségével. Megtudhatod, hogyan kapcsolhatók össze azok a készségek, amelyeket már tanulsz, olyan hatalmas MI szolgáltatásokkal, amelyek megértik a kontextust és értelmes válaszokat generálnak.
|
|
|
|
|
|
Gondolj az MI-re úgy, mint egy hatalmas könyvtárhoz való hozzáférésre, amely nemcsak megtalálja az információkat, hanem szintetizálja is azokat koherens válaszokká, a te konkrét kérdéseidhez igazítva. Ez helyettesíti a több ezer oldal átgörgetését, így közvetlen, kontextuális válaszokat kapsz.
|
|
|
|
|
|
Az integráció ismert webes technológiák együttműködésével történik. A HTML készíti a csevegőfelületet, a CSS kezeli a vizuális megjelenést, a JavaScript a felhasználói interakciókat, a backend API pedig összeköti az egészet az MI szolgáltatásokkal. Ez hasonló ahhoz, ahogy egy zenekar különböző szekciói együtt dolgoznak egy szimfónia létrehozásán.
|
|
|
|
|
|
Lényegében hidat építünk az emberi természetes kommunikáció és a gépi feldolgozás között. Megtanulod mind az MI szolgáltatás integráció technikai megvalósítását, mind pedig azokat a tervezési mintákat, amelyek az interakciókat intuitívvá teszik.
|
|
|
|
|
|
A lecke végére az MI integráció kevésbé fog titokzatos folyamatnak tűnni, inkább egy újabb API lesz, amivel dolgozhatsz. Meg fogod érteni azokat az alapmintákat, amelyek olyan alkalmazásokat működtetnek, mint a ChatGPT vagy Claude, a már ismert webfejlesztési alapelvekkel.
|
|
|
|
|
|
## ⚡ Amit az elkövetkező 5 percben megtehetsz
|
|
|
|
|
|
**Gyors kezdő útvonal elfoglalt fejlesztők számára**
|
|
|
|
|
|
```mermaid
|
|
|
flowchart LR
|
|
|
A[⚡ 5 perc] --> B[GitHub token beszerzése]
|
|
|
B --> C[AI játszótér tesztelése]
|
|
|
C --> D[Python kód másolása]
|
|
|
D --> E[AI válaszok megtekintése]
|
|
|
```
|
|
|
- **1. perc**: Látogass el a [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground) oldalra, és hozz létre egy személyes hozzáférési tokent
|
|
|
- **2. perc**: Teszteld az MI interakciókat közvetlenül a playground felületén
|
|
|
- **3. perc**: Kattints a "Code" fülre, és másold ki a Python kódrészletet
|
|
|
- **4. perc**: Futtasd a kódot helyileg a tokeneddel: `GITHUB_TOKEN=your_token python test.py`
|
|
|
- **5. perc**: Nézd meg, hogyan generálódik az első MI válasz a saját kódodból
|
|
|
|
|
|
**Gyors tesztkód**:
|
|
|
```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)
|
|
|
```
|
|
|
|
|
|
**Miért fontos ez**: 5 perc alatt megtapasztalod a programozott MI interakció varázsát. Ez az alapköve minden MI alkalmazásnak, amit használsz.
|
|
|
|
|
|
Így fog kinézni a kész projekted:
|
|
|
|
|
|
|
|
|
|
|
|
## 🗺️ Tanulási utad az MI alkalmazásfejlesztésben
|
|
|
|
|
|
```mermaid
|
|
|
journey
|
|
|
title A webfejlesztéstől az MI integrációig
|
|
|
section Az MI alapjainak megértése
|
|
|
Fedezd fel a generatív MI koncepciókat: 4: You
|
|
|
Fedezd fel a GitHub Models platformot: 6: You
|
|
|
Sajátítsd el az MI paramétereket és promptokat: 8: You
|
|
|
section Backend integráció
|
|
|
Építs Python API szervert: 5: You
|
|
|
Valósítsd meg az MI függvényhívásokat: 7: You
|
|
|
Kezeld az aszinkron műveleteket: 8: You
|
|
|
section Frontend fejlesztés
|
|
|
Hozz létre modern chat felületet: 6: You
|
|
|
Sajátítsd el a valós idejű interakciókat: 8: You
|
|
|
Építs reszponzív felhasználói élményt: 9: You
|
|
|
section Professzionális alkalmazás
|
|
|
Telepítsd a teljes MI rendszert: 7: You
|
|
|
Optimalizáld a teljesítmény mintákat: 8: You
|
|
|
Hozz létre éles használatra kész alkalmazást: 9: You
|
|
|
```
|
|
|
**Úticélod**: A lecke végére teljes értékű, MI által vezérelt alkalmazást építesz a modern MI asszisztensek, például ChatGPT, Claude és Google Bard működését meghajtó technológiákkal és mintákkal.
|
|
|
|
|
|
## Az MI megértése: A rejtélytől a mesterségig
|
|
|
|
|
|
Mielőtt belevágnánk a kódba, értsük meg, mivel dolgozunk. Ha már használtál API-kat, tudod az alap mintát: elküldesz egy kérést, kapsz egy választ.
|
|
|
|
|
|
Az MI API-k ugyanilyen struktúrát követnek, de ahelyett, hogy előre tárolt adatokat kérnének le egy adatbázisból, újszerű válaszokat generálnak, a hatalmas mennyiségű szövegből tanult minták alapján. Olyan ez, mint a különbség egy könyvtári katalógus között és egy tudós könyvtáros között, aki több forrásból származó információkat tud szintetizálni.
|
|
|
|
|
|
### Mi is az a "Generatív MI"?
|
|
|
|
|
|
Gondolj arra, hogyan segítette a Rosetta-kő a tudósokat az egyiptomi hieroglifák megértésében, azáltal, hogy mintákat találtak az ismert és ismeretlen nyelvek között. Az MI modellek hasonlóan működnek – óriási szövegmennyiségekben keresnek mintákat, hogy megértsék a nyelvet, majd ezeket a mintákat használják új kérdések megfelelő válaszainak generálására.
|
|
|
|
|
|
**Egyszerű összehasonlításban:**
|
|
|
- **Hagyományos adatbázis**: Olyan, mint amikor a születési anyakönyvi kivonatodat kéred – mindig ugyanazt a dokumentumot kapod meg
|
|
|
- **Keresőmotor**: Olyan, mintha megkérnél egy könyvtárost, hogy keressen neked könyveket macskákról – megmutatja, mi elérhető
|
|
|
- **Generatív MI**: Olyan, mintha megkérdeznél egy tájékozott barátot a macskákról – saját szavaival mond érdekes dolgokat, az alapján, amit tudni szeretnél
|
|
|
|
|
|
```mermaid
|
|
|
graph LR
|
|
|
A[Az Ön Kérdése] --> B[AI Modell]
|
|
|
B --> C[Minta Felismerés]
|
|
|
C --> D[Tartalom Generálás]
|
|
|
D --> E[Kontextusfüggő Válasz]
|
|
|
|
|
|
F[Képzési Adatok<br/>Könyvek, Cikkek, Web] --> B
|
|
|
```
|
|
|
### Hogyan tanulnak az MI modellek (Egyszerű verzió)
|
|
|
|
|
|
Az MI modellek hatalmas szövegállományokat tartalmazó adatbázisokat dolgoznak fel, könyvekből, cikkekből, beszélgetésekből. Ennek során mintákat azonosítanak:
|
|
|
- Hogyan épülnek fel a gondolatok írott kommunikációban
|
|
|
- Milyen szavak gyakran fordulnak elő együtt
|
|
|
- Hogyan zajlik általában egy beszélgetés
|
|
|
- A formális és informális kommunikáció kontextuális különbségei
|
|
|
|
|
|
**Ez hasonló az archeológusokhoz, akik ősi nyelveket fejtettek meg**: ezernyi példát elemeztek, hogy megértsék a nyelvtant, szókincset és kulturális kontextust, végül képesek új szövegeket megfejteni a tanult minták alapján.
|
|
|
|
|
|
### Miért GitHub Models?
|
|
|
|
|
|
A GitHub Modelseket egy elég praktikus okból használjuk – hozzáférést ad nekünk vállalati szintű MI-hez anélkül, hogy saját MI infrastruktúrát kellene kiépítenünk (őszintén, ezt most nem akarod!). Olyan, mintha egy időjárás API-t használnál ahelyett, hogy mindenhová saját meteorológiai állomásokat telepítenél.
|
|
|
|
|
|
Ez alapvetően „MI-szolgáltatásként”, és a legjobb az egészben: ingyenesen kezdheted el, így kísérletezhetsz anélkül, hogy hatalmas számláktól kellene tartanod.
|
|
|
|
|
|
```mermaid
|
|
|
graph LR
|
|
|
A[Frontend Chat UI] --> B[A háttér API-d]
|
|
|
B --> C[GitHub Modellek API]
|
|
|
C --> D[MI modell feldolgozás]
|
|
|
D --> C
|
|
|
C --> B
|
|
|
B --> A
|
|
|
```
|
|
|
A backend integrációnkhoz a GitHub Modelseket fogjuk használni, amely professzionális MI képességeket biztosít fejlesztőbarát felületen keresztül. A [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground) egy tesztkörnyezet, ahol különböző MI modellek kipróbálhatók, és felfedezhető, mire képesek, mielőtt kodban megvalósítanánk őket.
|
|
|
|
|
|
## 🧠 MI alkalmazásfejlesztési ökoszisztéma
|
|
|
|
|
|
```mermaid
|
|
|
mindmap
|
|
|
root((AI Fejlesztés))
|
|
|
Understanding AI
|
|
|
Generative Models
|
|
|
Minta Felismerés
|
|
|
Tartalom Generálás
|
|
|
Kontextus Megértés
|
|
|
Válasz Szintézis
|
|
|
AI Parameters
|
|
|
Hőmérséklet Szabályozás
|
|
|
Token Korlátok
|
|
|
Top-p Szűrés
|
|
|
Rendszer Parancsok
|
|
|
Backend Architecture
|
|
|
API Integration
|
|
|
GitHub Modellek
|
|
|
Hitelesítés
|
|
|
Kérés Kezelés
|
|
|
Hibakezelés
|
|
|
Python Infrastructure
|
|
|
FastAPI Keretrendszer
|
|
|
Aszinkron Műveletek
|
|
|
Környezet Biztonság
|
|
|
CORS Konfiguráció
|
|
|
Frontend Experience
|
|
|
Chat Interface
|
|
|
Valós Idejű Frissítések
|
|
|
Üzenet Előzmények
|
|
|
Felhasználói Visszajelzés
|
|
|
Betöltési Állapotok
|
|
|
Modern Web Tech
|
|
|
ES6 Osztályok
|
|
|
Async/Await
|
|
|
DOM Manipuláció
|
|
|
Esemény Kezelés
|
|
|
Professional Patterns
|
|
|
Security Best Practices
|
|
|
Token Kezelés
|
|
|
Bemenet Érvényesítés
|
|
|
XSS Megelőzés
|
|
|
Hiba Határok
|
|
|
Production Readiness
|
|
|
Teljesítmény Optimalizálás
|
|
|
Reszponzív Dizájn
|
|
|
Akadálymentesség
|
|
|
Tesztelési Stratégiák
|
|
|
```
|
|
|
**Alapelv**: Az MI alkalmazásfejlesztés a hagyományos webfejlesztési készségeket ötvözi MI szolgáltatás integrációval, így olyan intelligens alkalmazásokat hoz létre, amelyek természetesnek és reagálónak érződnek a felhasználók számára.
|
|
|
|
|
|
|
|
|
|
|
|
**Ez teszi a playgroundot olyan hasznossá:**
|
|
|
- **Próbálj ki** különböző MI modelleket, mint a GPT-4o-mini, Claude és mások (mind ingyen!)
|
|
|
- **Teszteld** ötleteidet és promptjaidat mielőtt kódot írnál
|
|
|
- **Szerezz** kész kódrészleteket a kedvenc programozási nyelveden
|
|
|
- **Állítsd be** a kreativitás mértékét és a válasz hosszát, hogy lássad, miként befolyásolják az eredményt
|
|
|
|
|
|
Miután játszottál egy kicsit, csak kattints a "Code" fülre, és válaszd ki a programozási nyelved, hogy megkapd a szükséges implementációs kódot.
|
|
|
|
|
|
|
|
|
|
|
|
## Python backend integráció beállítása
|
|
|
|
|
|
Most valósítsuk meg az MI integrációt Python segítségével. A Python kiváló MI alkalmazásokhoz egyszerű szintaxisa és erős könyvtárai miatt. A playgroundból vett kóddal indulunk, majd átalakítjuk újrahasznosítható, éles használatra alkalmas függvénnyé.
|
|
|
|
|
|
### Az alap implementáció megértése
|
|
|
|
|
|
Amikor megkapod a Python kódot a playgroundból, valami ilyesmit kapsz. Ne aggódj, ha először soknak tűnik – nézzük át lépésről lépésre:
|
|
|
|
|
|
```python
|
|
|
"""Run this model in Python
|
|
|
|
|
|
> pip install openai
|
|
|
"""
|
|
|
import os
|
|
|
from openai import OpenAI
|
|
|
|
|
|
# A modellel való hitelesítéshez személyes hozzáférési tokent (PAT) kell létrehoznia a GitHub beállításaiban.
|
|
|
# Hozza létre PAT tokenjét az itt található utasításokat követve: 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)
|
|
|
```
|
|
|
|
|
|
**Ez történik a kódban:**
|
|
|
- **Importáljuk** a szükséges eszközöket: `os` környezeti változók olvasásához és `OpenAI` az MI-vel való beszélgetéshez
|
|
|
- **Beállítjuk** az OpenAI klienset, hogy a GitHub MI szerverein fusson, ne az OpenAI-n
|
|
|
- **Hitelesítünk** egy speciális GitHub tokennel (erről hamarosan többet!)
|
|
|
- **Felépítjük** a beszélgetésünket különböző "szerepekkel" – gondolj rá úgy, mint egy színdarab jelenetének megadása
|
|
|
- **Elküldjük** kérésünket az MI-nek némi finomhangolási paraméterrel
|
|
|
- **Kinyerjük** a tényleges válasz szövegét a visszakapott adathalmazból
|
|
|
|
|
|
### Üzenet szerepek megértése: Az MI beszélgetési keretrendszere
|
|
|
|
|
|
Az MI beszélgetések speciális struktúrával dolgoznak különböző "szerepekkel", amelyek különböző funkciókat töltenek be:
|
|
|
|
|
|
```python
|
|
|
messages=[
|
|
|
{
|
|
|
"role": "system",
|
|
|
"content": "You are a helpful assistant who explains things simply."
|
|
|
},
|
|
|
{
|
|
|
"role": "user",
|
|
|
"content": "What is machine learning?"
|
|
|
}
|
|
|
]
|
|
|
```
|
|
|
|
|
|
**Gondolj rá úgy, mint egy színdarabra:**
|
|
|
- **Rendszer szerep**: Olyan, mint a színpadi utasítás egy színésznek – megmondja az MI-nek, hogyan viselkedjen, milyen személyisége legyen, hogyan válaszoljon
|
|
|
- **Felhasználó szerep**: A tényleges kérdés vagy üzenet a te alkalmazásodat használó személytől
|
|
|
- **Asszisztens szerep**: Az MI válasza (ezt nem küldöd be, de megjelenik a beszélgetés előzményeiben)
|
|
|
|
|
|
**Gyakorlati példa**: Képzeld el, hogy bemutatod a barátodat valakinek egy bulin:
|
|
|
- **Rendszer üzenet**: „Ez a barátom, Sarah, ő orvos, és kiválóan magyarázza el az orvosi fogalmakat egyszerűen”
|
|
|
- **Felhasználó üzenet**: „El tudnád magyarázni, hogyan működnek a vakcinák?”
|
|
|
- **Asszisztens válasz**: Sarah barátságos orvosként válaszol, nem ügyvédként vagy séfként
|
|
|
|
|
|
### Az MI paraméterek megértése: A válasz viselkedés finomhangolása
|
|
|
|
|
|
Az MI API hívások numerikus paraméterei irányítják, hogyan generálja a modell a válaszokat. Ezekkel a beállításokkal szabályozhatod az MI viselkedését különböző felhasználási esetekhez:
|
|
|
|
|
|
#### Hőmérséklet (0.0-tól 2.0-ig): A kreativitás szabályzója
|
|
|
|
|
|
**Mit tesz**: Szabályozza, milyen kreatív vagy kiszámítható lesz az MI válasza.
|
|
|
|
|
|
**Gondolj rá úgy, mint egy jazz zenész improvizációs szintjére:**
|
|
|
- **Hőmérséklet = 0.1**: Minden alkalommal ugyanazt a dallamot játssza (nagyon kiszámítható)
|
|
|
- **Hőmérséklet = 0.7**: Ízléses variációkat ad hozzá, miközben felismerhető marad (kiegyensúlyozott kreativitás)
|
|
|
- **Hőmérséklet = 1.5**: Teljesen kísérleti jazz váratlan fordulatokkal (nagyon kiszámíthatatlan)
|
|
|
|
|
|
```python
|
|
|
# Nagyon kiszámítható válaszok (jó tényszerű kérdésekhez)
|
|
|
response = client.chat.completions.create(
|
|
|
messages=[{"role": "user", "content": "What is 2+2?"}],
|
|
|
temperature=0.1 # Szinte mindig "4"-et fog mondani
|
|
|
)
|
|
|
|
|
|
# Kreatív válaszok (jó ötleteléshez)
|
|
|
response = client.chat.completions.create(
|
|
|
messages=[{"role": "user", "content": "Write a creative story opening"}],
|
|
|
temperature=1.2 # Egyedi, váratlan történeteket fog generálni
|
|
|
)
|
|
|
```
|
|
|
|
|
|
#### Max Tokenek (1-től 4096+-ig): A válasz hosszának szabályozója
|
|
|
|
|
|
**Mit tesz**: Limitálja, mennyi lehet a válasz hossza.
|
|
|
|
|
|
**A tokenek nagyjából a szavakkal egyenértékűek** (kb. 1 token = 0,75 szó angolul):
|
|
|
- **max_tokens=50**: Rövid és tömör (mint egy SMS)
|
|
|
- **max_tokens=500**: Egy szép bekezdés vagy kettő
|
|
|
- **max_tokens=2000**: Részletes magyarázat példákkal
|
|
|
|
|
|
```python
|
|
|
# Rövid, tömör válaszok
|
|
|
response = client.chat.completions.create(
|
|
|
messages=[{"role": "user", "content": "Explain JavaScript"}],
|
|
|
max_tokens=100 # Rövid magyarázatot kényszerít
|
|
|
)
|
|
|
|
|
|
# Részletes, átfogó válaszok
|
|
|
response = client.chat.completions.create(
|
|
|
messages=[{"role": "user", "content": "Explain JavaScript"}],
|
|
|
max_tokens=1500 # Részletes magyarázatot enged példákkal
|
|
|
)
|
|
|
```
|
|
|
|
|
|
#### Top_p (0.0-tól 1.0-ig): A fókusz paraméter
|
|
|
|
|
|
**Mit tesz**: Szabályozza, mennyire koncentrál az MI a legvalószínűbb válaszokra.
|
|
|
|
|
|
**Képzeld el, hogy az MI-nek hatalmas szókincse van, amelyek valószínűség szerint rangsorolva vannak:**
|
|
|
- **top_p=0.1**: Csak a legvalószínűbb 10%-ot veszi figyelembe (nagyon fókuszált)
|
|
|
- **top_p=0.9**: A szavak 90%-át figyelembe veszi (kreatívabb)
|
|
|
- **top_p=1.0**: Mindent figyelembe vesz (maximális változatosság)
|
|
|
|
|
|
**Például**: Ha azt kérdezed: "Az ég általában..."
|
|
|
- **Alacsony top_p**: Szinte biztosan "kék"-et mond
|
|
|
- **Magas top_p**: Mondhatja, hogy „kék”, „felhős”, „tágas”, „változó”, „szép”, stb.
|
|
|
|
|
|
### Összerakva: Paraméter kombinációk különböző felhasználási esetekre
|
|
|
|
|
|
```python
|
|
|
# Tényfeltáró, egyértelmű válaszokhoz (például dokumentációs bot)
|
|
|
factual_params = {
|
|
|
"temperature": 0.2,
|
|
|
"max_tokens": 300,
|
|
|
"top_p": 0.3
|
|
|
}
|
|
|
|
|
|
# Kreatív írássegítéshez
|
|
|
creative_params = {
|
|
|
"temperature": 1.1,
|
|
|
"max_tokens": 1000,
|
|
|
"top_p": 0.9
|
|
|
}
|
|
|
|
|
|
# Beszélgetős, segítőkész válaszokhoz (kiegyensúlyozott)
|
|
|
conversational_params = {
|
|
|
"temperature": 0.7,
|
|
|
"max_tokens": 500,
|
|
|
"top_p": 0.8
|
|
|
}
|
|
|
```
|
|
|
|
|
|
```mermaid
|
|
|
quadrantChart
|
|
|
title MI Paraméteroptimalizálási Mátrix
|
|
|
x-axis Alacsony Kreativitás --> Magas Kreativitás
|
|
|
y-axis Rövid Válasz --> Hosszú Válasz
|
|
|
|
|
|
quadrant-1 Kreatív Tartalom
|
|
|
quadrant-2 Részletes Elemzés
|
|
|
quadrant-3 Gyors Ténytár
|
|
|
quadrant-4 Beszélgető MI
|
|
|
|
|
|
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]
|
|
|
```
|
|
|
**Miért fontosak ezek a paraméterek**: A különböző alkalmazások különböző válaszfajtákat igényelnek. Egy ügyfélszolgálati botnak következetesnek és tényszerűnek kell lennie (alacsony hőmérséklet), míg egy kreatív íróasszisztensnek képzeletgazdagnak és változatosnak (magas hőmérséklet). Ezeknek a paramétereknek a megértése lehetőséget ad az MI személyiségének és válaszstílusának szabályozására.
|
|
|
```
|
|
|
|
|
|
**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))
|
|
|
```
|
|
|
|
|
|
**Ez a javított függvény mit tud:**
|
|
|
- **Két paramétert fogad**: a felhasználó promptját és opcionálisan a rendszer üzenetet
|
|
|
- **Alapértelmezett rendszerüzenetet ad** az általános asszisztens viselkedéshez
|
|
|
- **Használja** a Python típusannotációkat a jobb dokumentáció érdekében
|
|
|
- **Részletes docstring** magyarázza a függvény célját és paramétereit
|
|
|
- **Csak a válasz tartalmát adja vissza**, így könnyen használható a web API-ban
|
|
|
- **Megőrzi** ugyanazokat a modellparamétereket a következetes MI viselkedésért
|
|
|
|
|
|
### A rendszer promptok varázsa: az MI személyiség programozása
|
|
|
|
|
|
Ha a paraméterek az MI gondolkodását szabályozzák, a rendszer promptok azt irányítják, hogy az MI minek képzeli magát. Ez az MI-vel való munka egyik legmenőbb része – gyakorlatilag teljes személyiséget, szakértelmi szintet és kommunikációs stílust adsz az MI-nek.
|
|
|
|
|
|
**Gondolj a rendszer promptokra úgy, mint különböző színészek szereposztására**: Egyetlen általános asszisztens helyett szakosodott szakértőket hozhatsz létre különböző helyzetekre. Szükséged van türelmes tanárra? Kreatív ötletelőtársra? Egy üzleti tanácsadóra, aki nem kertel? Csak változtasd meg a rendszer promptot!
|
|
|
|
|
|
#### Miért ilyen erőteljesek a rendszer promptok?
|
|
|
|
|
|
Az érdekes rész: az MI modelleket rengeteg beszélgetéssel képezték, ahol az emberek különböző szerepeket és szakértelmi szinteket vettek fel. Ha egy adott szerepet adsz az MI-nek, az olyan, mintha kapcsolót kapcsolnál, ami aktiválja az összes tanult mintát.
|
|
|
|
|
|
**Ez olyan, mint a színész módszeres alakítása**: Mondd azt egy színésznek, hogy „te egy bölcs öreg professzor vagy”, és nézd meg, hogyan állítja be automatikusan a testtartását, szókincsét és modorát. Az MI valami hasonlót tesz a nyelvi mintákkal.
|
|
|
|
|
|
#### Hatékony rendszer promptok alkotása: művészet és tudomány
|
|
|
|
|
|
**Egy jól működő rendszer prompt anatómiája:**
|
|
|
1. **Szerep/Identitás**: Ki az MI?
|
|
|
2. **Szakértelem**: Mit tud?
|
|
|
3. **Kommunikáció stílusa**: Hogyan beszél?
|
|
|
4. **Specifikus utasítások**: Mire fókuszáljon?
|
|
|
|
|
|
```python
|
|
|
# ❌ Homályos rendszerutasítás
|
|
|
"You are helpful."
|
|
|
|
|
|
# ✅ Részletes, hatékony rendszerutasítás
|
|
|
"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."
|
|
|
```
|
|
|
|
|
|
#### Rendszer prompt példák kontextussal
|
|
|
|
|
|
Nézzük, hogyan hoznak létre teljesen eltérő MI személyiségeket különböző rendszer promptok:
|
|
|
|
|
|
```python
|
|
|
# Példa 1: A türelmes tanár
|
|
|
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.
|
|
|
"""
|
|
|
|
|
|
# Példa 2: A kreatív együttműködő
|
|
|
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.
|
|
|
"""
|
|
|
|
|
|
# Példa 3: A stratégiai üzleti tanácsadó
|
|
|
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.
|
|
|
"""
|
|
|
```
|
|
|
|
|
|
#### Rendszer promptok kipróbálása
|
|
|
|
|
|
Teszteljük ugyanazt a kérdést különböző rendszer promptokkal, hogy lássuk a drámai eltéréseket:
|
|
|
|
|
|
**Kérdés**: „Hogyan kezeljem a felhasználói hitelesítést a webalkalmazásomban?”
|
|
|
|
|
|
```python
|
|
|
# Tanári felszólítással:
|
|
|
teacher_response = call_llm(
|
|
|
"How do I handle user authentication in my web app?",
|
|
|
teacher_prompt
|
|
|
)
|
|
|
# Tipikus válasz: "Remek kérdés! Nézzük meg az azonosítást egyszerű lépésekre bontva.
|
|
|
# Gondolj rá úgy, mint egy éjszakai klub kapusára, aki ellenőrzi a személyi igazolványokat..."
|
|
|
|
|
|
# Üzleti felszólítással:
|
|
|
business_response = call_llm(
|
|
|
"How do I handle user authentication in my web app?",
|
|
|
business_prompt
|
|
|
)
|
|
|
# Tipikus válasz: "Stratégiai szempontból az azonosítás kulcsfontosságú a felhasználói
|
|
|
# bizalom és a szabályozási megfelelés szempontjából. Hadd vázoljak egy keretrendszert, amely figyelembe veszi a biztonságot,
|
|
|
# a felhasználói élményt és a skálázhatóságot..."
|
|
|
```
|
|
|
|
|
|
#### Haladó rendszer prompt technikák
|
|
|
|
|
|
**1. Kontextus beállítása**: Adj az MI-nek háttérinformációt
|
|
|
```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. Kimenet formázása**: Mondd meg a mesterséges intelligenciának, hogyan strukturálja a válaszokat
|
|
|
```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. Korlátozások beállítása**: Határozd meg, mit NEM szabad a mesterséges intelligenciának tennie
|
|
|
```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.
|
|
|
"""
|
|
|
```
|
|
|
|
|
|
#### Miért fontos ez a chat asszisztensed számára
|
|
|
|
|
|
A rendszerparancsok megértése hihetetlen hatalmat ad ahhoz, hogy specializált AI asszisztenseket hozz létre:
|
|
|
- **Ügyfélszolgálati bot**: Segítőkész, türelmes, szabályzat-tudatos
|
|
|
- **Tanulási tutor**: Bátorító, lépésről lépésre, ellenőrzi a megértést
|
|
|
- **Kreatív partner**: Képzelőerős, ötletekre épít, kérdezgeti: „mi lenne, ha?”
|
|
|
- **Technikai szakértő**: Precíz, részletes, biztonságtudatos
|
|
|
|
|
|
**A kulcsmegfigyelés**: Nem csak egy AI API-t hívsz meg – te egy testreszabott AI személyiséget hozol létre, amely az adott használati esetet szolgálja. Ez az, ami miatt a modern AI alkalmazások személyre szabottabbnak és hasznosabbnak érződnek, nem pedig általánosnak.
|
|
|
|
|
|
### 🎯 Pedagógiai ellenőrzés: AI személyiség programozás
|
|
|
|
|
|
**Állj meg és gondolkodj**: Most tanultad meg, hogyan programozz AI személyiségeket rendszerparancsok segítségével. Ez alapvető képesség a modern AI alkalmazásfejlesztésben.
|
|
|
|
|
|
**Gyors önértékelés**:
|
|
|
- El tudod magyarázni, miben különböznek a rendszerparancsok a rendes felhasználói üzenetektől?
|
|
|
- Mi a különbség a temperature és a top_p paraméterek között?
|
|
|
- Hogyan hoznál létre rendszerparancsot egy adott használati esethez (például kódolási tanárhoz)?
|
|
|
|
|
|
**Valós összefüggés**: A megtanult rendszerparancs-technika minden jelentős AI alkalmazásban használatos – a GitHub Copilot kódíró segédjétől a ChatGPT beszélgetési felületéig. Ugyanazokat a mintákat sajátítod el, amelyeket a nagy tech cégek AI fejlesztő csapatai is alkalmaznak.
|
|
|
|
|
|
**Kihívás kérdés**: Hogyan terveznél különböző AI személyiségeket különböző felhasználói típusok számára (kezdő vs szakértő)? Gondolkodj el azon, hogyan szolgálhatná ugyanaz az AI modell különböző közönségeket a prompt mérnökségen keresztül.
|
|
|
|
|
|
## Web API építése FastAPI-vel: A magas teljesítményű AI kommunikációs központod
|
|
|
|
|
|
Most építsük meg a backendet, amely összeköti a frontendet az AI szolgáltatásokkal. A FastAPI-t fogjuk használni, egy modern Python keretrendszert, amely kiváló AI alkalmazások API-jainak építéséhez.
|
|
|
|
|
|
A FastAPI számos előnyt kínál ehhez a projekthez: beépített async támogatás párhuzamos kérések kezelésére, automatikus API dokumentáció generálás, és kiváló teljesítmény. A FastAPI szervered közvetítőként működik, amely fogadja a frontend kéréseit, kommunikál az AI szolgáltatásokkal, és formázott válaszokat ad vissza.
|
|
|
|
|
|
### Miért pont FastAPI AI alkalmazásokhoz?
|
|
|
|
|
|
Lehet, hogy azt kérded: „Nem hívhatnám meg az AI-t közvetlenül a frontend JavaScriptből?” vagy „Miért FastAPI Flask vagy Django helyett?” Remek kérdések!
|
|
|
|
|
|
**Ezért tökéletes a FastAPI arra, amit építünk:**
|
|
|
- **Alapból async**: Több AI kérést tud egyszerre kezelni akadálymentesen
|
|
|
- **Automatikus dokumentáció**: Látogasd meg a `/docs` oldalt, és ingyen kapsz egy gyönyörű, interaktív API dokumentációt
|
|
|
- **Beépített validáció**: Hibákat elkap, mielőtt problémát okoznának
|
|
|
- **Villámgyors**: Az egyik leggyorsabb Python keretrendszer
|
|
|
- **Modern Python**: Használja a Python legújabb és legjobb funkcióit
|
|
|
|
|
|
**És miért van egyáltalán szükség backendre:**
|
|
|
|
|
|
**Biztonság**: Az AI API kulcsod olyan, mint egy jelszó – ha beteszed a frontend JavaScriptbe, bárki, aki megnézi a webhely forráskódját, ellophatja és használhatja a AI krediteidet. A backend biztonságban tartja az érzékeny hitelesítő adatokat.
|
|
|
|
|
|
**Kéréskorlátozás és vezérlés**: A backend lehetővé teszi a felhasználói kérések gyakoriságának szabályozását, felhasználói hitelesítés bevezetését, és naplózás hozzáadását a használat nyomon követésére.
|
|
|
|
|
|
**Adatfeldolgozás**: Előfordulhat, hogy beszélgetéseket szeretnél menteni, nem megfelelő tartalmat szűrni vagy több AI szolgáltatást kombinálni. A backendben él ez az üzleti logika.
|
|
|
|
|
|
**Az architektúra egy kliens-szerver modellre emlékeztet:**
|
|
|
- **Frontend**: Felhasználói felület az interakcióhoz
|
|
|
- **Backend API**: Kérés feldolgozási és irányítási réteg
|
|
|
- **AI Szolgáltatás**: Külső számítás és válaszgenerálás
|
|
|
- **Környezeti változók**: Biztonságos konfiguráció és hitelesítő adattárolás
|
|
|
|
|
|
### A kérés-válasz folyamat megértése
|
|
|
|
|
|
Nézzük meg, mi történik, amikor egy felhasználó üzenetet küld:
|
|
|
|
|
|
```mermaid
|
|
|
sequenceDiagram
|
|
|
participant User as 👤 Felhasználó
|
|
|
participant Frontend as 🌐 Frontend
|
|
|
participant API as 🔧 FastAPI szerver
|
|
|
participant AI as 🤖 AI szolgáltatás
|
|
|
|
|
|
User->>Frontend: Beírja "Hello AI!"
|
|
|
Frontend->>API: POST /hello {"message": "Hello AI!"}
|
|
|
Note over API: Ellenőrzi a kérést<br/>Hozzáadja a rendszer üzenetet
|
|
|
API->>AI: Formázott kérést küld
|
|
|
AI->>API: Visszaküldi az AI választ
|
|
|
Note over API: Feldolgozza a választ<br/>Naplózza a beszélgetést
|
|
|
API->>Frontend: {"response": "Hello! Hogyan segíthetek?"}
|
|
|
Frontend->>User: Megjeleníti az AI üzenetet
|
|
|
```
|
|
|
**Az egyes lépések megértése:**
|
|
|
1. **Felhasználói interakció**: A személy beír a chat felületbe
|
|
|
2. **Frontend feldolgozás**: A JavaScript elfogja a bemenetet és JSON-ként formázza
|
|
|
3. **API validáció**: A FastAPI automatikusan ellenőrzi a kérelmet Pydantic modellek segítségével
|
|
|
4. **AI integráció**: A backend hozzáadja a kontextust (rendszerparancs), és meghívja az AI szolgáltatást
|
|
|
5. **Válasz kezelése**: Az API megkapja az AI választ, és szükség esetén módosíthatja
|
|
|
6. **Frontend megjelenítés**: A JavaScript megjeleníti a választ a chat felületen
|
|
|
|
|
|
### Az API architektúra megértése
|
|
|
|
|
|
```mermaid
|
|
|
sequenceDiagram
|
|
|
participant Frontend
|
|
|
participant FastAPI
|
|
|
participant AI Function
|
|
|
participant GitHub Models
|
|
|
|
|
|
Frontend->>FastAPI: POST /hello {"message": "Helló MI!"}
|
|
|
FastAPI->>AI Function: call_llm(message, system_prompt)
|
|
|
AI Function->>GitHub Models: API kérés
|
|
|
GitHub Models->>AI Function: MI válasz
|
|
|
AI Function->>FastAPI: válasz szöveg
|
|
|
FastAPI->>Frontend: {"response": "Szia! Miben segíthetek?"}
|
|
|
```
|
|
|
```mermaid
|
|
|
flowchart TD
|
|
|
A[Felhasználói Bemenet] --> B[Frontend Érvényesítés]
|
|
|
B --> C[HTTP POST Kérés]
|
|
|
C --> D[FastAPI Útválasztó]
|
|
|
D --> E[Pydantic Érvényesítés]
|
|
|
E --> F[AI Függvény Hívás]
|
|
|
F --> G[GitHub Modellek API]
|
|
|
G --> H[Válasz Feldolgozás]
|
|
|
H --> I[JSON Válasz]
|
|
|
I --> J[Frontend Frissítés]
|
|
|
|
|
|
subgraph "Biztonsági Réteg"
|
|
|
K[CORS Köztesréteg]
|
|
|
L[Környezeti Változók]
|
|
|
M[Hibakezelés]
|
|
|
end
|
|
|
|
|
|
D --> K
|
|
|
F --> L
|
|
|
H --> M
|
|
|
```
|
|
|
### A FastAPI alkalmazás létrehozása
|
|
|
|
|
|
Építsük fel az API-t lépésről lépésre. Hozz létre egy `api.py` nevű fájlt a következő FastAPI kóddal:
|
|
|
|
|
|
```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
|
|
|
|
|
|
# Naplózás konfigurálása
|
|
|
logging.basicConfig(level=logging.INFO)
|
|
|
logger = logging.getLogger(__name__)
|
|
|
|
|
|
# FastAPI alkalmazás létrehozása
|
|
|
app = FastAPI(
|
|
|
title="AI Chat API",
|
|
|
description="A high-performance API for AI-powered chat applications",
|
|
|
version="1.0.0"
|
|
|
)
|
|
|
|
|
|
# CORS konfigurálása
|
|
|
app.add_middleware(
|
|
|
CORSMiddleware,
|
|
|
allow_origins=["*"], # Megfelelő konfiguráció éles környezethez
|
|
|
allow_credentials=True,
|
|
|
allow_methods=["*"],
|
|
|
allow_headers=["*"],
|
|
|
)
|
|
|
|
|
|
# Pydantic modellek kérés/válasz érvényesítéshez
|
|
|
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:
|
|
|
# Üzenet kinyerése és érvényesítése
|
|
|
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]}...")
|
|
|
|
|
|
# AI szolgáltatás meghívása (megjegyzés: a call_llm-nek aszinkronnak kell lennie a jobb teljesítmény érdekében)
|
|
|
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)
|
|
|
```
|
|
|
|
|
|
**A FastAPI implementáció megértése:**
|
|
|
- **Importálja** a FastAPI-t a modern webes keretrendszer funkcióihoz és a Pydanticot adatvalidációhoz
|
|
|
- **Létrehozza** az automatikus API dokumentációt (a szerverindítás után elérhető a `/docs` alatt)
|
|
|
- **Engedélyezi** a CORS köztes szoftvert, hogy a frontend kérések különböző eredetűekről is érkezzenek
|
|
|
- **Definiálja** a Pydantic modelleket az automatikus kérés/válasz validációhoz és dokumentációhoz
|
|
|
- **Használ** async végpontokat a jobb teljesítményért párhuzamos kérések esetén
|
|
|
- **Megvalósítja** a megfelelő HTTP státuszkódokat és hibakezelést HTTPException segítségével
|
|
|
- **Tartalmaz** strukturált naplózást a szolgáltatás figyeléséhez és hibakereséshez
|
|
|
- **Biztosít** egészségügyi ellenőrző végpontot a szolgáltatás állapotának monitorozásához
|
|
|
|
|
|
**A FastAPI fő előnyei a hagyományos keretrendszerekkel szemben:**
|
|
|
- **Automatikus validáció**: A Pydantic modellek biztosítják az adat integritását feldolgozás előtt
|
|
|
- **Interaktív dokumentáció**: Látogasd meg a `/docs` oldalt az automatikusan generált, tesztelhető API dokumentációért
|
|
|
- **Típusbiztonság**: Python típusjelölések megakadályozzák a futásidejű hibákat és javítják a kód minőségét
|
|
|
- **Async támogatás**: Több AI kérést kezel egyszerre blokkolás nélkül
|
|
|
- **Teljesítmény**: Jelentősen gyorsabb kérésfeldolgozás valós idejű alkalmazásokhoz
|
|
|
|
|
|
### A CORS megértése: A web biztonsági őre
|
|
|
|
|
|
A CORS (Cross-Origin Resource Sharing) olyan, mint egy biztonsági őr egy épületnél, aki ellenőrzi, hogy a látogatók bejöhetnek-e. Nézzük meg, miért fontos, és hogyan befolyásolja az alkalmazásodat.
|
|
|
|
|
|
#### Mi az a CORS és miért létezik?
|
|
|
|
|
|
**A probléma**: Képzeld el, hogy bármely weboldal kérdéseket intézhetne a bankod weboldalához a nevedben engedély nélkül! Ez egy biztonsági rémálom lenne! A böngészők ezt alapértelmezetten megakadályozzák az „Egyező eredet szabály” („Same-Origin Policy”) révén.
|
|
|
|
|
|
**Egyező eredet szabály**: A böngészők csak olyan domainre, portról és protokollról engedélyezik a kéréseket, ahonnan a weboldalt betöltötték.
|
|
|
|
|
|
**Valós világ analógia**: Olyasmi, mint a lakóépület biztonság – alapértelmezésben csak a lakók (egyező eredetűek) léphetnek be. Ha barátot szeretnél beengedni (más eredetű), azt külön meg kell engedned a biztonságnak.
|
|
|
|
|
|
#### CORS a fejlesztői környezetedben
|
|
|
|
|
|
Fejlesztés alatt többnyire a frontend és a backend külön porton futnak:
|
|
|
- Frontend: `http://localhost:3000` (vagy file://, ha közvetlenül HTML-t nyitsz meg)
|
|
|
- Backend: `http://localhost:5000`
|
|
|
|
|
|
Ezeket „különböző eredetűnek” tekintik, még akkor is, ha ugyanazon a gépen vannak!
|
|
|
|
|
|
```python
|
|
|
from fastapi.middleware.cors import CORSMiddleware
|
|
|
|
|
|
app = FastAPI(__name__)
|
|
|
CORS(app) # Ez azt mondja a böngészőknek: "Rendben van, ha más eredetek kérdéseket intéznek ehhez az API-hoz"
|
|
|
```
|
|
|
|
|
|
**Mit csinál a CORS konfiguráció a gyakorlatban:**
|
|
|
- **Hozzáad** speciális HTTP fejlécet az API válaszokhoz, hogy a böngésző tudja: „ez a cross-origin kérés engedélyezett”
|
|
|
- **Kezeli** az előzetes „preflight” kéréseket (a böngészők néha előzetes engedélyt kérnek, mielőtt a tényleges kérést elküldenék)
|
|
|
- **Megakadályozza** a rettegett „blokk a CORS szabály miatt” hibát a böngésző konzoljában
|
|
|
|
|
|
#### CORS biztonság: fejlesztés vs éles környezet
|
|
|
|
|
|
```python
|
|
|
# 🚨 Fejlesztés: Minden forrást engedélyez (kényelmes, de nem biztonságos)
|
|
|
CORS(app)
|
|
|
|
|
|
# ✅ Éles üzem: Csak a saját frontend domained engedélyezése
|
|
|
CORS(app, origins=["https://yourdomain.com", "https://www.yourdomain.com"])
|
|
|
|
|
|
# 🔒 Haladó: Különböző források a különböző környezetekhez
|
|
|
if app.debug: # Fejlesztői mód
|
|
|
CORS(app, origins=["http://localhost:3000", "http://127.0.0.1:3000"])
|
|
|
else: # Éles üzem mód
|
|
|
CORS(app, origins=["https://yourdomain.com"])
|
|
|
```
|
|
|
|
|
|
**Miért fontos ez**: Fejlesztés során a `CORS(app)` olyan, mintha nyitva hagynád a bejárati ajtót – kényelmes, de nem biztonságos. Éles környezetben pontosan meg akarod adni, mely weboldalak kommunikálhatnak az API-dal.
|
|
|
|
|
|
#### Gyakori CORS helyzetek és megoldások
|
|
|
|
|
|
| Eset | Probléma | Megoldás |
|
|
|
|----------|---------|----------|
|
|
|
| **Helyi fejlesztés** | A frontend nem éri el a backendet | Add hozzá a CORSMiddleware-t a FastAPI-hez |
|
|
|
| **GitHub Pages + Heroku** | Az éles frontend nem éri el az API-t | Add hozzá a GitHub Pages URL-t a CORS eredetekhez |
|
|
|
| **Egyedi domain** | CORS hibák éles környezetben | Frissítsd a CORS eredeteket, hogy megfeleljenek a domainnek |
|
|
|
| **Mobilalkalmazás** | Az app nem éri el a web API-t | Add hozzá az app domainjét vagy használj \* karaktert körültekintően |
|
|
|
|
|
|
**Tipp**: Megnézheted a CORS fejléceket a böngésződ Fejlesztői eszközeiben a Hálózat (Network) fül alatt. Keresd az `Access-Control-Allow-Origin` szerű fejlécet a válaszokban.
|
|
|
|
|
|
### Hibakezelés és validáció
|
|
|
|
|
|
Figyeld meg, hogyan kezeli megfelelően az API a hibákat:
|
|
|
|
|
|
```python
|
|
|
# Ellenőrizze, hogy kaptunk-e üzenetet
|
|
|
if not message:
|
|
|
return jsonify({"error": "Message field is required"}), 400
|
|
|
```
|
|
|
|
|
|
**Fontos validációs alapelvek:**
|
|
|
- **Ellenőrzi** a kötelező mezőket a kérés feldolgozása előtt
|
|
|
- **Visszaad** értelmes hibaüzeneteket JSON formátumban
|
|
|
- **Használ** megfelelő HTTP státuszkódokat (400 a hibás kérelmekhez)
|
|
|
- **Nyújt** egyértelmű visszacsatolást a frontend fejlesztőknek a hibakereséshez
|
|
|
|
|
|
## A backend beállítása és futtatása
|
|
|
|
|
|
Most, hogy készen áll az AI integrációnk és a FastAPI szerverünk, indítsuk el mindezt. A telepítési folyamat a Python függőségek telepítéséből, a környezeti változók konfigurálásából, és a fejlesztői szerver indításából áll.
|
|
|
|
|
|
### Python környezet beállítása
|
|
|
|
|
|
Állítsd be a Python fejlesztői környezetedet. A virtuális környezetek olyanok, mint a Manhattan Projekt elkülönített részei – minden projekt megkapja a saját izolált terét a speciális eszközökkel és függőségekkel, megakadályozva az összeütközéseket a projektek között.
|
|
|
|
|
|
```bash
|
|
|
# Navigálj a backend könyvtáradba
|
|
|
cd backend
|
|
|
|
|
|
# Hozz létre egy virtuális környezetet (mint egy tiszta szoba létrehozása a projektednek)
|
|
|
python -m venv venv
|
|
|
|
|
|
# Aktiváld azt (Linux/Mac)
|
|
|
source ./venv/bin/activate
|
|
|
|
|
|
# Windows esetén használd:
|
|
|
# venv\Scripts\activate
|
|
|
|
|
|
# Telepítsd a fontos cuccokat
|
|
|
pip install openai fastapi uvicorn python-dotenv
|
|
|
```
|
|
|
|
|
|
**Mit csináltunk most:**
|
|
|
- **Létrehoztuk** a saját kis Python buborékunkat, ahol telepíthetünk csomagokat anélkül, hogy bármi mást befolyásolnánk
|
|
|
- **Aktiváltuk** azt, hogy a terminál tudja, ezt a környezetet használja
|
|
|
- **Telepítettük** az alapvetőket: OpenAI az AI varázshoz, FastAPI a web API-hoz, Uvicorn hogy futtassa, és python-dotenv a biztonságos titkok kezeléséhez
|
|
|
|
|
|
**Fontos függőségek magyarázata:**
|
|
|
- **FastAPI**: Modern, gyors web keretrendszer automatikus API dokumentációval
|
|
|
- **Uvicorn**: Villámgyors ASGI szerver FastAPI alkalmazások futtatásához
|
|
|
- **OpenAI**: Hivatalos könyvtár a GitHub modellekhez és OpenAI API integrációhoz
|
|
|
- **python-dotenv**: Biztonságos környezeti változó betöltés `.env` fájlokból
|
|
|
|
|
|
### Környezeti konfiguráció: Titkok biztonságban tartása
|
|
|
|
|
|
Mielőtt elkezdenénk az API-t, beszélnünk kell az egyik legfontosabb leckéről a webfejlesztésben: hogyan tartsd titkaidat tényleg titokban. A környezeti változók olyanok, mint egy biztonságos páncélszekrény, amelyhez csak az alkalmazásod férhet hozzá.
|
|
|
|
|
|
#### Mik azok a környezeti változók?
|
|
|
|
|
|
**Gondolj a környezeti változókra, mint egy értékmegőrző széf:** – beleteszed az értékeidet, és csak te (és az appod) tudják kivenni őket. Ahelyett, hogy az érzékeny adatokat közvetlenül a kódodba írnád (ahol bárki láthatja), biztonságosan tárolod a környezetben.
|
|
|
|
|
|
**Ez a különbség:**
|
|
|
- **Helytelen mód**: Írod a jelszavad egy cetlire, és kiragasztod a monitorodra
|
|
|
- **Helyes mód**: Egy biztonságos jelszókezelőben tartod a jelszavad, amit csak te érhetsz el
|
|
|
|
|
|
#### Miért fontosak a környezeti változók
|
|
|
|
|
|
```python
|
|
|
# 🚨 SOHA NE EZT - API kulcs mindenki számára látható
|
|
|
client = OpenAI(
|
|
|
api_key="ghp_1234567890abcdef...", # Bárki ellophatja ezt!
|
|
|
base_url="https://models.github.ai/inference"
|
|
|
)
|
|
|
|
|
|
# ✅ EZZEL CSINÁLD - API kulcs biztonságosan tárolva
|
|
|
client = OpenAI(
|
|
|
api_key=os.environ["GITHUB_TOKEN"], # Csak az alkalmazásod férhet hozzá ehhez
|
|
|
base_url="https://models.github.ai/inference"
|
|
|
)
|
|
|
```
|
|
|
|
|
|
**Mi történik, ha keménykódolod a titkokat:**
|
|
|
1. **Verziókezelés kitettsége**: Bárki, akinek hozzáférése van a Git repóhoz, látja az API kulcsot
|
|
|
2. **Nyilvános repók**: Ha Githubra tolod, a kulcsod látja az egész internet
|
|
|
3. **Csapatmegosztás**: Más fejlesztők a projekten hozzáférnek a személyes API kulcsodhoz
|
|
|
4. **Biztonsági incidensek**: Ha valaki ellopja az API kulcsot, használhatja az AI kreditjeidet
|
|
|
|
|
|
#### A környezeti fájl beállítása
|
|
|
|
|
|
Hozz létre egy `.env` fájlt a backend könyvtáradban. Ebben a fájlban tárolódnak helyileg a titkaid:
|
|
|
|
|
|
```bash
|
|
|
# .env fájl - Ezt SOHA nem szabad Git-be feltölteni
|
|
|
GITHUB_TOKEN=your_github_personal_access_token_here
|
|
|
FASTAPI_DEBUG=True
|
|
|
ENVIRONMENT=development
|
|
|
```
|
|
|
|
|
|
**Az .env fájl megértése:**
|
|
|
- **Egy titok soronként** `KEY=érték` formátumban
|
|
|
- **Nincsenek szóközök** az egyenlőségjel körül
|
|
|
- **Nem kell idézőjel** az értékek köré (általában)
|
|
|
- **Kommentek** `#` karakterrel kezdődnek
|
|
|
|
|
|
#### GitHub személyes hozzáférési token létrehozása
|
|
|
|
|
|
A GitHub tokened olyan, mint egy speciális jelszó, amely engedélyt ad az appodnak a GitHub AI szolgáltatásainak használatához:
|
|
|
|
|
|
**Token létrehozás lépésről lépésre:**
|
|
|
1. **Menj a GitHub Beállításokhoz** → Fejlesztői beállítások → Személyes hozzáférési tokenek → Tokenek (klasszikus)
|
|
|
2. **Kattints az „Új token generálása (klasszikus)” gombra**
|
|
|
3. **Állítsd be a lejáratot** (30 nap teszteléshez, hosszabb az éleshez)
|
|
|
4. **Válaszd ki a jogosultságokat**: Jelöld be a „repo” és más szükséges engedélyeket
|
|
|
5. **Generáld a tokent**, és azonnal másold ki (többet nem fogod látni!)
|
|
|
6. **Illeszd be az .env fájlodba**
|
|
|
|
|
|
```bash
|
|
|
# Példa arra, hogyan néz ki a tokened (ez hamis!)
|
|
|
GITHUB_TOKEN=ghp_1A2B3C4D5E6F7G8H9I0J1K2L3M4N5O6P7Q8R
|
|
|
```
|
|
|
|
|
|
#### Környezeti változók betöltése Pythonban
|
|
|
|
|
|
```python
|
|
|
import os
|
|
|
from dotenv import load_dotenv
|
|
|
|
|
|
# Környezeti változók betöltése a .env fájlból
|
|
|
load_dotenv()
|
|
|
|
|
|
# Most már biztonságosan hozzáférhetsz hozzájuk
|
|
|
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"
|
|
|
)
|
|
|
```
|
|
|
|
|
|
**Mit csinál ez a kód:**
|
|
|
- **Betölti** az `.env` fájlt és elérhetővé teszi a változókat Pythonban
|
|
|
- **Ellenőrzi**, hogy a szükséges token létezik-e (jó hibakezelés!)
|
|
|
- **Világos hibát dob**, ha a token hiányzik
|
|
|
- **Biztonságosan használja** a tokent anélkül, hogy kódba építené
|
|
|
|
|
|
#### Git biztonság: A .gitignore fájl
|
|
|
|
|
|
A `.gitignore` fájl megmondja a Gitnek, mely fájlokat ne kezeljen vagy töltsön fel:
|
|
|
|
|
|
```bash
|
|
|
# .gitignore - Add hozzá ezeket a sorokat
|
|
|
.env
|
|
|
*.env
|
|
|
.env.local
|
|
|
.env.production
|
|
|
__pycache__/
|
|
|
venv/
|
|
|
.vscode/
|
|
|
```
|
|
|
|
|
|
**Miért fontos ez**: Ha hozzáadod az `.env`-t a `.gitignore`-hoz, a Git figyelmen kívül hagyja a környezet fájlt, így véletlenül sem töltheted fel a titkaidat GitHubra.
|
|
|
|
|
|
#### Különböző környezetek, különböző titkok
|
|
|
|
|
|
A professzionális alkalmazások különböző API kulcsokat használnak különböző környezetekhez:
|
|
|
|
|
|
```bash
|
|
|
# .env.fejlesztés
|
|
|
GITHUB_TOKEN=your_development_token
|
|
|
DEBUG=True
|
|
|
|
|
|
# .env.termelés
|
|
|
GITHUB_TOKEN=your_production_token
|
|
|
DEBUG=False
|
|
|
```
|
|
|
|
|
|
**Miért fontos ez:** Nem akarod, hogy a fejlesztési kísérleteid befolyásolják az éles AI használati kvótádat, és eltérő biztonsági szinteket akarsz különböző környezetekhez.
|
|
|
|
|
|
### Fejlesztői szerver indítása: Élesítsd a FastAPI-dat
|
|
|
Most jön a izgalmas pillanat – indítsd el FastAPI fejlesztői szervered, és nézd meg, ahogy az AI integrációd életre kel! A FastAPI az Uvicorn-t használja, ami egy villámgyors ASGI szerver, kifejezetten aszinkron Python alkalmazásokhoz tervezve.
|
|
|
|
|
|
#### A FastAPI szerver indítási folyamatának megértése
|
|
|
|
|
|
```bash
|
|
|
# Módszer 1: Közvetlen Python végrehajtás (tartalmazza az automatikus újratöltést)
|
|
|
python api.py
|
|
|
|
|
|
# Módszer 2: Uvicorn közvetlen használata (nagyobb irányítás)
|
|
|
uvicorn api:app --host 0.0.0.0 --port 5000 --reload
|
|
|
```
|
|
|
|
|
|
Amikor ezt a parancsot futtatod, a háttérben a következők történnek:
|
|
|
|
|
|
**1. A Python betölti a FastAPI alkalmazásodat**:
|
|
|
- Importálja az összes szükséges könyvtárat (FastAPI, Pydantic, OpenAI stb.)
|
|
|
- Betölti a környezeti változókat a `.env` fájlból
|
|
|
- Létrehozza a FastAPI alkalmazás példányát automatikus dokumentációval együtt
|
|
|
|
|
|
**2. Az Uvicorn konfigurálja az ASGI szervert**:
|
|
|
- A 5000-es porthoz kötődik aszinkron kérések kezelésére
|
|
|
- Beállítja a kérések útvonalát automatikus validációval
|
|
|
- Engedélyezi a hot reload-ot fejlesztéshez (fájlváltozás esetén újraindul)
|
|
|
- Interaktív API dokumentációt generál
|
|
|
|
|
|
**3. A szerver elkezd figyelni**:
|
|
|
- A terminálban ez látható: `INFO: Uvicorn running on http://0.0.0.0:5000`
|
|
|
- A szerver képes több párhuzamos AI kérést kezelni
|
|
|
- Az API készen áll az automatikus dokumentációval a `http://localhost:5000/docs` címen
|
|
|
|
|
|
#### Amit látnod kell, ha minden működik
|
|
|
|
|
|
```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.
|
|
|
```
|
|
|
|
|
|
**A FastAPI kimenetének megértése:**
|
|
|
- **Figyelni fog változásokat**: A fejlesztéshez automatikus újratöltés engedélyezve
|
|
|
- **Uvicorn fut**: Magas teljesítményű ASGI szerver aktív
|
|
|
- **Elindult az újratöltő folyamat**: Fájlfigyelő automatikus újraindításokhoz
|
|
|
- **Alkalmazás indítása sikeres**: FastAPI alkalmazás sikeresen inicializálva
|
|
|
- **Interaktív dokumentáció elérhető**: Látogasd meg a `/docs` oldalt az automatikus API dokumentációért
|
|
|
|
|
|
#### A FastAPI tesztelése: Több erőteljes lehetőség
|
|
|
|
|
|
A FastAPI több kényelmes módot kínál az API tesztelésére, többek között automatikus interaktív dokumentációt:
|
|
|
|
|
|
**1. Módszer: Interaktív API dokumentáció (Ajánlott)**
|
|
|
1. Nyisd meg a böngészőt és menj a `http://localhost:5000/docs` címre
|
|
|
2. Megjelenik a Swagger UI az összes végponttal dokumentálva
|
|
|
3. Kattints a `/hello` végpontra → "Try it out" → Írj be egy tesztüzenetet → "Execute"
|
|
|
4. Nézd meg a választ közvetlenül a böngészőben megfelelő formázással
|
|
|
|
|
|
**2. Módszer: Egyszerű böngészős teszt**
|
|
|
1. Menj a `http://localhost:5000` gyökér végpontra
|
|
|
2. Menj a `http://localhost:5000/health` címre a szerver állapotának ellenőrzéséhez
|
|
|
3. Ez megerősíti, hogy a FastAPI szerver megfelelően fut
|
|
|
|
|
|
**2. Módszer: Parancssoros teszt (Haladó)**
|
|
|
```bash
|
|
|
# Teszt curl-lel (ha elérhető)
|
|
|
curl -X POST http://localhost:5000/hello \
|
|
|
-H "Content-Type: application/json" \
|
|
|
-d '{"message": "Hello AI!"}'
|
|
|
|
|
|
# Várt válasz:
|
|
|
# {"response": "Helló! Én vagyok az AI asszisztensed. Miben segíthetek ma?"}
|
|
|
```
|
|
|
|
|
|
**3. Módszer: Python teszt szkript**
|
|
|
```python
|
|
|
# test_api.py - Hozd létre ezt a fájlt az API teszteléséhez
|
|
|
import requests
|
|
|
import json
|
|
|
|
|
|
# Teszteld az API végpontot
|
|
|
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)
|
|
|
```
|
|
|
|
|
|
#### Gyakori indítási problémák elhárítása
|
|
|
|
|
|
| Hibaüzenet | Mit jelent | Hogyan javítsd |
|
|
|
|------------|------------|----------------|
|
|
|
| `ModuleNotFoundError: No module named 'fastapi'` | FastAPI nincs telepítve | Futtasd a `pip install fastapi uvicorn` parancsot a virtuális környezetben |
|
|
|
| `ModuleNotFoundError: No module named 'uvicorn'` | ASGI szerver nincs telepítve | Futtasd a `pip install uvicorn` parancsot a virtuális környezetben |
|
|
|
| `KeyError: 'GITHUB_TOKEN'` | Környezeti változó nem található | Ellenőrizd a `.env` fájlt és a `load_dotenv()` hívást |
|
|
|
| `Address already in use` | A 5000-es port foglalt | Állítsd le a portot használó folyamatokat vagy válts portot |
|
|
|
| `ValidationError` | A kérés adatai nem egyeznek a Pydantic modellel | Ellenőrizd, hogy a kérés formátuma megfelel-e a várt sémának |
|
|
|
| `HTTPException 422` | Feldolgozhatatlan entitás | Kérés validáció sikertelen, nézd meg a `/docs` oldalt a helyes formátumért |
|
|
|
| `OpenAI API error` | AI szolgáltatás hitelesítés sikertelen | Ellenőrizd, hogy a GitHub token helyes és megfelelő jogosultságokkal rendelkezik |
|
|
|
|
|
|
#### Fejlesztési legjobb gyakorlatok
|
|
|
|
|
|
**Hot Reloading**: A FastAPI Uvicorn-nal automatikusan újratölti az alkalmazást, amikor elmented a változtatásokat a Python fájlokban. Ez azt jelenti, hogy módosítás után azonnal tesztelhetsz újra manuális újraindítás nélkül.
|
|
|
|
|
|
```python
|
|
|
# Hot reload explicite engedélyezése
|
|
|
if __name__ == "__main__":
|
|
|
app.run(host="0.0.0.0", port=5000, debug=True) # debug=True engedélyezi a hot reloadot
|
|
|
```
|
|
|
|
|
|
**Fejlesztési naplózás hozzáadása**: Így láthatod, mi történik:
|
|
|
|
|
|
```python
|
|
|
import logging
|
|
|
|
|
|
# Naplózás beállítása
|
|
|
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
|
|
|
```
|
|
|
|
|
|
**Miért hasznos a naplózás**: Fejlesztés közben pontosan látod, milyen kérések érkeznek, mit válaszol az AI, és hol vannak hibák. Ez jelentősen felgyorsítja a hibakeresést.
|
|
|
|
|
|
### GitHub Codespaces konfigurálása: Felhőalapú fejlesztés egyszerűen
|
|
|
|
|
|
A GitHub Codespaces olyan, mintha egy erős fejlesztői géped lenne a felhőben, amit bármilyen böngészőből elérsz. Ha Codespaces-ben dolgozol, van néhány extra lépés, hogy a backend elérhető legyen a frontend számára.
|
|
|
|
|
|
#### Codespaces hálózat megértése
|
|
|
|
|
|
Helyi fejlesztési környezetben minden ugyanazon a gépen fut:
|
|
|
- Backend: `http://localhost:5000`
|
|
|
- Frontend: `http://localhost:3000` (vagy file://)
|
|
|
|
|
|
Codespaces-ben a fejlesztési környezet a GitHub szerverein fut, így a "localhost" mást jelent. A GitHub automatikusan létrehoz nyilvános URL-eket a szolgáltatásaidhoz, de ezeket megfelelően kell konfigurálnod.
|
|
|
|
|
|
#### Lépésről lépésre Codespaces konfigurálás
|
|
|
|
|
|
**1. Indítsd el a backend szervert**:
|
|
|
```bash
|
|
|
cd backend
|
|
|
python api.py
|
|
|
```
|
|
|
|
|
|
Ismerős FastAPI/Uvicorn indítási üzenetet fogsz látni, de észre fogod venni, hogy a Codespace környezeten belül fut.
|
|
|
|
|
|
**2. Állítsd be a port láthatóságát**:
|
|
|
- Keresd meg a "Ports" fület a VS Code alsó paneljén
|
|
|
- Találd meg az 5000-es portot a listában
|
|
|
- Jobb klikk az 5000-es portr
|
|
|
- Válaszd a "Port Visibility" → "Public" opciót
|
|
|
|
|
|
**Miért állítsd nyilvánosra?** Alapértelmezés szerint a Codespace portok privátak (csak neked elérhetők). A nyilvánossá tétel lehetővé teszi, hogy a frontend (ami a böngészőben fut) kommunikáljon a backenddel.
|
|
|
|
|
|
**3. Szerezd meg a nyilvános URL-t**:
|
|
|
A port nyilvánossá tételét követően egy ilyen URL jelenik meg:
|
|
|
```
|
|
|
https://your-codespace-name-5000.app.github.dev
|
|
|
```
|
|
|
|
|
|
**4. Frissítsd a frontend konfigurációját**:
|
|
|
```javascript
|
|
|
// A frontend app.js fájlodban frissítsd a BASE_URL-t:
|
|
|
this.BASE_URL = "https://your-codespace-name-5000.app.github.dev";
|
|
|
```
|
|
|
|
|
|
#### Codespace URL-ek megértése
|
|
|
|
|
|
A Codespace URL-ek előre látható minta szerint alakulnak:
|
|
|
```
|
|
|
https://[codespace-name]-[port].app.github.dev
|
|
|
```
|
|
|
|
|
|
**Magyarázat:**
|
|
|
- `codespace-name`: Egyedi azonosító a Codespace-hez (általában tartalmazza a felhasználóneved)
|
|
|
- `port`: A szolgáltatás futtatott portja (nálunk 5000 a FastAPI alkalmazás)
|
|
|
- `app.github.dev`: A GitHub domaine Codespaces alkalmazásokhoz
|
|
|
|
|
|
#### A Codespace beállítás tesztelése
|
|
|
|
|
|
**1. Teszteld közvetlenül a backend-et**:
|
|
|
Nyisd meg a nyilvános URL-t egy új böngészőfülön. Ezt kell látnod:
|
|
|
```
|
|
|
Welcome to the AI Chat API. Send POST requests to /hello with JSON payload containing 'message' field.
|
|
|
```
|
|
|
|
|
|
**2. Teszteld a böngésző fejlesztői eszközeivel**:
|
|
|
```javascript
|
|
|
// Nyissa meg a böngésző konzolját, és tesztelje az API-ját
|
|
|
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 helyi fejlesztés
|
|
|
|
|
|
| Szempont | Helyi fejlesztés | GitHub Codespaces |
|
|
|
|----------|------------------|-------------------|
|
|
|
| **Beállítási idő** | Hosszabb (Python, függőségek telepítése) | Azonnali (előre konfigurált környezet) |
|
|
|
| **URL elérés** | `http://localhost:5000` | `https://xyz-5000.app.github.dev` |
|
|
|
| **Port konfiguráció** | Automatikus | Manuális (portokat nyilvánossá kell tenni) |
|
|
|
| **Fájlmegőrzés** | Helyi gépen | GitHub tárolóban |
|
|
|
| **Együttműködés** | Nehéz megosztani a környezetet | Könnyű megosztani a Codespace linket |
|
|
|
| **Internet függőség** | Csak AI API hívásokhoz | Mindenhez szükséges |
|
|
|
|
|
|
#### Codespace fejlesztési tippek
|
|
|
|
|
|
**Környezeti változók Codespaces-ben**:
|
|
|
A `.env` fájl ugyanúgy működik a Codespaces-ben, de állíthatsz környezeti változókat közvetlenül is a Codespace-ben:
|
|
|
|
|
|
```bash
|
|
|
# Környezeti változó beállítása az aktuális munkamenetre
|
|
|
export GITHUB_TOKEN="your_token_here"
|
|
|
|
|
|
# Vagy add hozzá a .bashrc fájlodhoz a tartósság érdekében
|
|
|
echo 'export GITHUB_TOKEN="your_token_here"' >> ~/.bashrc
|
|
|
```
|
|
|
|
|
|
**Port kezelés**:
|
|
|
- A Codespaces automatikusan érzékeli, mikor kezd a alkalmazás porton figyelni
|
|
|
- Egyszerre több portot is továbbíthatsz (pl. ha adatbázist is hozzáadsz később)
|
|
|
- A portok elérhetőek maradnak, amíg a Codespace fut
|
|
|
|
|
|
**Fejlesztési munkafolyamat**:
|
|
|
1. Módosítsd a kódot VS Code-ban
|
|
|
2. FastAPI automatikusan újratölt (köszönhetően az Uvicorn reload módjának)
|
|
|
3. Azonnal teszteld a változtatásokat a nyilvános URL-en
|
|
|
4. Commitolj és push-olj ha készen állsz
|
|
|
|
|
|
> 💡 **Szakértői tipp**: Használj könyvjelzőt a Codespace backend URL-re fejlesztés közben. Mivel a Codespace nevek stabilak, az URL nem fog változni, amíg ugyanazt a Codespace-et használod.
|
|
|
|
|
|
## Frontend chat felület létrehozása: ahol az emberek találkoznak az AI-val
|
|
|
|
|
|
Most megépítjük a felhasználói felületet – azt a részt, amely meghatározza, hogyan kommunikálnak az emberek az AI asszisztenseddel. Ahogy az eredeti iPhone felületének dizájnjánál, itt is arra koncentrálunk, hogy a bonyolult technológia intuitív és természetes legyen.
|
|
|
|
|
|
### A modern frontend architektúra megértése
|
|
|
|
|
|
A chat felületünk egy úgynevezett „Single Page Application” vagy SPA lesz. Az öreg stílusú megközelítés helyett, ahol minden kattintás új oldalt tölt be, az appunk zökkenőmentesen és azonnal frissül:
|
|
|
|
|
|
**Régi weboldalak**: Olyan, mint egy fizikai könyv olvasása – teljesen új oldalra lapozol
|
|
|
**A mi chat appunk**: Olyan, mint a telefonod használata – minden folyamatosan frissül és áramlik
|
|
|
|
|
|
```mermaid
|
|
|
graph TD
|
|
|
A[Felhasználó Üzenetet Ír] --> B[JavaScript Rögzíti a Bemenetet]
|
|
|
B --> C[Adatok Ellenőrzése és Formázása]
|
|
|
C --> D[Backend API-nak Küldés]
|
|
|
D --> E[Betöltési Állapot Megjelenítése]
|
|
|
E --> F[AI Válasz Fogadása]
|
|
|
F --> G[Chat Felület Frissítése]
|
|
|
G --> H[Kész a Következő Üzenetre]
|
|
|
```
|
|
|
```mermaid
|
|
|
classDiagram
|
|
|
class ChatApp {
|
|
|
+messages: HTMLElement
|
|
|
+form: HTMLElement
|
|
|
+input: HTMLElement
|
|
|
+sendButton: HTMLElement
|
|
|
+BASE_URL: string
|
|
|
+API_ENDPOINT: string
|
|
|
|
|
|
+constructor()
|
|
|
+initializeEventListeners()
|
|
|
+handleSubmit(event)
|
|
|
+callAPI(message)
|
|
|
+appendMessage(szöveg, szerep)
|
|
|
+escapeHtml(szöveg)
|
|
|
+scrollToBottom()
|
|
|
+setLoading(betöltésFolyamatban)
|
|
|
}
|
|
|
|
|
|
ChatApp --> DOM : manipulálja
|
|
|
ChatApp --> FastAPI : kéréseket küld
|
|
|
```
|
|
|
### A frontend fejlesztés három pillére
|
|
|
|
|
|
Minden frontend alkalmazás – az egyszerű weboldalaktól a komplex appokig, mint a Discord vagy Slack – három alapvető technológián alapul. Gondolj rájuk úgy, mint a minden látott és használt dolog alapjára a weben:
|
|
|
|
|
|
**HTML (Struktúra)**: Ez az alap
|
|
|
- Meghatározza, milyen elemek vannak (gombok, szövegmezők, konténerek)
|
|
|
- Jelentést ad a tartalomnak (ez fejléc, ez űrlap stb.)
|
|
|
- Létrehozza az alapvető struktúrát, amire minden más épül
|
|
|
|
|
|
**CSS (Megjelenés)**: Ez a belsőépítész
|
|
|
- Szép megjelenést ad mindennek (színek, betűk, elrendezés)
|
|
|
- Kezeli a különböző képernyőméreteket (telefon, laptop, tablet)
|
|
|
- Létrehozza a sima animációkat és vizuális visszacsatolást
|
|
|
|
|
|
**JavaScript (Viselkedés)**: Ez az agy
|
|
|
- Reagál, amit a felhasználók tesznek (kattintás, gépelés, görgetés)
|
|
|
- Kommunikál a backenddel és frissíti az oldalt
|
|
|
- Mindent interaktívvá és dinamikussá tesz
|
|
|
|
|
|
**Gondolj rá, mint építészeti tervezésre:**
|
|
|
- **HTML**: A szerkezeti tervrajz (helyiségek és kapcsolatok meghatározása)
|
|
|
- **CSS**: Az esztétikai és környezeti tervezés (látvány és felhasználói élmény)
|
|
|
- **JavaScript**: A mechanikai rendszerek (funkcionalitás és interaktivitás)
|
|
|
|
|
|
### Miért fontos a modern JavaScript architektúra
|
|
|
|
|
|
A chat alkalmazásunk korszerű JavaScript mintákat használ, amiket professzionális alkalmazásokban is látni fogsz. Ezek megértése segít fejlesztőként fejlődni:
|
|
|
|
|
|
**Osztály alapú architektúra**: A kódot osztályokba fogjuk szervezni, ami olyan, mintha tervrajzokat készítenél az objektumokhoz
|
|
|
**Async/Await**: Modern módszer az időigényes műveletek kezelésére (pl. API hívások)
|
|
|
**Eseményvezérelt programozás**: Az app a felhasználói műveletekre (kattintás, billentyűleütés) reagál, nem pedig folyamatos ciklusban fut
|
|
|
**DOM manipuláció**: Dinamikusan frissíti az oldal tartalmát a felhasználói interakciók és API válaszok alapján
|
|
|
|
|
|
### Projekt struktúra kialakítása
|
|
|
|
|
|
Hozz létre egy frontend könyvtárat ezzel a szervezett struktúrával:
|
|
|
|
|
|
```text
|
|
|
frontend/
|
|
|
├── index.html # Main HTML structure
|
|
|
├── app.js # JavaScript functionality
|
|
|
└── styles.css # Visual styling
|
|
|
```
|
|
|
|
|
|
**Az architektúra megértése:**
|
|
|
- **Szétválasztja** a struktúrát (HTML), viselkedést (JavaScript) és megjelenést (CSS)
|
|
|
- **Egyszerű fájlstruktúrát tart fenn**, amely könnyen navigálható és módosítható
|
|
|
- **Követi** a webfejlesztés legjobb gyakorlatait a szervezettség és fenntarthatóság érdekében
|
|
|
|
|
|
### Az HTML alap megépítése: szemantikus struktúra az akadálymentességért
|
|
|
|
|
|
Kezdjük az HTML struktúrával. A modern webfejlesztés hangsúlyozza a „szemantikus HTML”-t – olyan HTML elemek használatát, amelyek egyértelműen leírják a funkciójukat, nem csak a kinézetüket. Ez elérhetővé teszi az alkalmazásodat képernyőolvasók, keresőmotorok és egyéb eszközök számára.
|
|
|
|
|
|
**Miért fontos a szemantikus HTML?** Képzeld el, hogy telefonon írod le a chat appodat valakinek. Azt mondanád: „Van egy fejléc a címmel, egy fő terület a beszélgetéseknek, és egy űrlap alul az üzenetek gépeléséhez.” A szemantikus HTML olyan elemeket használ, amik ezt a természetes leírást tükrözik.
|
|
|
|
|
|
Hozd létre az `index.html` fájlt ezzel a gondosan strukturált markupkal:
|
|
|
|
|
|
```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>
|
|
|
```
|
|
|
|
|
|
**Minden HTML elem jelentése és célja:**
|
|
|
|
|
|
#### Dokumentum szerkezete
|
|
|
- **`<!DOCTYPE html>`**: Jelzi a böngészőnek, hogy modern HTML5 dokumentum
|
|
|
- **`<html lang="en">`**: Meghatározza az oldal nyelvét képernyőolvasók és fordító eszközök számára
|
|
|
- **`<meta charset="UTF-8">`**: Biztosítja a megfelelő karakterkódolást nemzetközi szövegekhez
|
|
|
- **`<meta name="viewport"...>`**: Mobilra optimalizált nézet beállítása (nagyítás és méretezés szabályozása)
|
|
|
|
|
|
#### Szemantikus elemek
|
|
|
- **`<header>`**: Egyértelműen az oldal tetejét jelöli a címmel és leírással
|
|
|
- **`<main>`**: A fő tartalmi területet jelöli (ahol a beszélgetések zajlanak)
|
|
|
- **`<form>`**: Helyes szemantikai elem a felhasználói bevitelhez, támogatja a billentyűzetes navigációt
|
|
|
|
|
|
#### Akadálymentességi funkciók
|
|
|
- **`role="log"`**: Jelzi a képernyőolvasónak, hogy ez egy kronologikus üzenetnapló
|
|
|
- **`aria-live="polite"`**: Új üzeneteket jelenti be a képernyőolvasón megszakítás nélkül
|
|
|
- **`aria-label`**: Leíró címkék az űrlap vezérlőihez
|
|
|
- **`required`**: Böngésző ellenőrzi, hogy a felhasználó üzenetet adott-e meg küldés előtt
|
|
|
|
|
|
#### CSS és JavaScript integráció
|
|
|
- **`class` attribútumok**: Stílusolási pontokat biztosítanak a CSS-nek (pl. `chat-container`, `input-group`)
|
|
|
- **`id` attribútumok**: JavaScript képes megtalálni és manipulálni adott elemeket
|
|
|
- **Script elhelyezése**: JavaScript fájl a végén töltődik be, így először az HTML töltődik be
|
|
|
|
|
|
**Miért működik ez a struktúra:**
|
|
|
- **Logikus folyamat**: Fejléc → Fő tartalom → Bemeneti űrlap illeszkedik a természetes olvasási sorrendhez
|
|
|
- **Billentyűzet-barát**: A felhasználók tabulátorral végigjárhatják az összes interaktív elemet
|
|
|
- **Képernyőolvasó-barát**: Egyértelmű tájékozódási pontok és leírás a látássérült felhasználók számára
|
|
|
- **Mobilra optimalizált**: A viewport meta tag támogatja a reszponzív dizájnt
|
|
|
- **Progresszív fejlesztés**: Működik akkor is, ha CSS vagy JavaScript nem töltődik be
|
|
|
|
|
|
### Interaktív JavaScript hozzáadása: modern webalkalmazás logika
|
|
|
|
|
|
Most építsük meg azt a JavaScriptet, amely életre kelti a csevegőfelületünket. Modern JavaScript mintákat fogunk használni, amelyekkel a professzionális webfejlesztésben is találkozhatsz, beleértve az ES6 osztályokat, async/await-et és eseményvezérelt programozást.
|
|
|
|
|
|
#### A modern JavaScript architektúra megértése
|
|
|
|
|
|
Ahelyett, hogy procedurális kódot írnánk (egy sor függvényt, amelyek sorban futnak le), egy **osztály-alapú architektúrát** hozunk létre. Gondolj úgy az osztályra, mint egy tervrajzra az objektumok létrehozásához – mint ahogy az építész tervrajzából több házat is lehet építeni.
|
|
|
|
|
|
**Miért használjunk osztályokat webalkalmazásokhoz?**
|
|
|
- **Szervezettség**: Minden kapcsolódó funkció együtt van csoportosítva
|
|
|
- **Újrafelhasználhatóság**: Több csevegőpéldányt is létrehozhatsz ugyanazon az oldalon
|
|
|
- **Karbantarthatóság**: Könnyebb hibakeresés és egyes funkciók módosítása
|
|
|
- **Professzionális szabvány**: Ezt a mintát használják olyan keretrendszerekben, mint a React, Vue és Angular
|
|
|
|
|
|
Hozd létre az `app.js` fájlt ezzel a modern, jól strukturált JavaScripttel:
|
|
|
|
|
|
```javascript
|
|
|
// app.js - Modern chat alkalmazás logika
|
|
|
|
|
|
class ChatApp {
|
|
|
constructor() {
|
|
|
// Hivatkozások lekérése a manipulálni kívánt DOM elemekre
|
|
|
this.messages = document.getElementById("messages");
|
|
|
this.form = document.getElementById("chatForm");
|
|
|
this.input = document.getElementById("messageInput");
|
|
|
this.sendButton = document.getElementById("sendBtn");
|
|
|
|
|
|
// Állítsd be itt a backend URL-jét
|
|
|
this.BASE_URL = "http://localhost:5000"; // Frissítsd ezt a környezetednek megfelelően
|
|
|
this.API_ENDPOINT = `${this.BASE_URL}/hello`;
|
|
|
|
|
|
// Eseményfigyelők beállítása a chat alkalmazás létrehozásakor
|
|
|
this.initializeEventListeners();
|
|
|
}
|
|
|
|
|
|
initializeEventListeners() {
|
|
|
// Figyelj a űrlap beküldésére (amikor a felhasználó a Küldésre kattint vagy Entert nyom)
|
|
|
this.form.addEventListener("submit", (e) => this.handleSubmit(e));
|
|
|
|
|
|
// Figyelj az Enter gombra a beviteli mezőben is (jobb felhasználói élmény)
|
|
|
this.input.addEventListener("keypress", (e) => {
|
|
|
if (e.key === "Enter" && !e.shiftKey) {
|
|
|
e.preventDefault();
|
|
|
this.handleSubmit(e);
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
|
|
|
async handleSubmit(event) {
|
|
|
event.preventDefault(); // Megakadályozza, hogy az űrlap frissítse az oldalt
|
|
|
|
|
|
const messageText = this.input.value.trim();
|
|
|
if (!messageText) return; // Ne küldj üres üzeneteket
|
|
|
|
|
|
// Nyújts visszajelzést a felhasználónak, hogy történik valami
|
|
|
this.setLoading(true);
|
|
|
|
|
|
// Azonnal add hozzá a felhasználó üzenetét a csevegéshez (optimista UI)
|
|
|
this.appendMessage(messageText, "user");
|
|
|
|
|
|
// Töröld a beviteli mezőt, hogy a felhasználó írni tudja a következő üzenetet
|
|
|
this.input.value = '';
|
|
|
|
|
|
try {
|
|
|
// Hívd meg az AI API-t és várd meg a választ
|
|
|
const reply = await this.callAPI(messageText);
|
|
|
|
|
|
// Add hozzá az AI válaszát a csevegéshez
|
|
|
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 {
|
|
|
// Engedélyezd újra a felületet siker vagy hiba esetén is
|
|
|
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";
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// Inicializáld a chat alkalmazást az oldal betöltődésekor
|
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
|
new ChatApp();
|
|
|
});
|
|
|
```
|
|
|
|
|
|
#### Minden egyes JavaScript koncepció megértése
|
|
|
|
|
|
**ES6 osztályszerkezet**:
|
|
|
```javascript
|
|
|
class ChatApp {
|
|
|
constructor() {
|
|
|
// Ez fut, amikor létrehozol egy új ChatApp példányt
|
|
|
// Olyan, mint a "beállítás" funkció a csevegésedhez
|
|
|
}
|
|
|
|
|
|
methodName() {
|
|
|
// A metódusok osztályhoz tartozó függvények
|
|
|
// Hozzáférhetnek az osztály tulajdonságaihoz a "this" használatával
|
|
|
}
|
|
|
}
|
|
|
```
|
|
|
|
|
|
**Async/Await minta**:
|
|
|
```javascript
|
|
|
// Régi mód (callback pokol):
|
|
|
fetch(url)
|
|
|
.then(response => response.json())
|
|
|
.then(data => console.log(data))
|
|
|
.catch(error => console.error(error));
|
|
|
|
|
|
// Modern mód (async/await):
|
|
|
try {
|
|
|
const response = await fetch(url);
|
|
|
const data = await response.json();
|
|
|
console.log(data);
|
|
|
} catch (error) {
|
|
|
console.error(error);
|
|
|
}
|
|
|
```
|
|
|
|
|
|
**Eseményvezérelt programozás**:
|
|
|
Ahelyett, hogy folyamatosan ellenőriznénk, történt-e valami, "hallgatunk" az eseményekre:
|
|
|
```javascript
|
|
|
// Amikor az űrlapot elküldik, futtassa a handleSubmit-et
|
|
|
this.form.addEventListener("submit", (e) => this.handleSubmit(e));
|
|
|
|
|
|
// Amikor az Enter billentyűt lenyomják, szintén futtassa a handleSubmit-et
|
|
|
this.input.addEventListener("keypress", (e) => { /* ... */ });
|
|
|
```
|
|
|
|
|
|
**DOM manipuláció**:
|
|
|
```javascript
|
|
|
// Új elemek létrehozása
|
|
|
const messageElement = document.createElement("div");
|
|
|
|
|
|
// Tulajdonságaik módosítása
|
|
|
messageElement.className = "message user";
|
|
|
messageElement.innerHTML = "Hello world!";
|
|
|
|
|
|
// Hozzáadás az oldalhoz
|
|
|
this.messages.appendChild(messageElement);
|
|
|
```
|
|
|
|
|
|
#### Biztonság és legjobb gyakorlatok
|
|
|
|
|
|
**XSS megelőzés**:
|
|
|
```javascript
|
|
|
escapeHtml(text) {
|
|
|
const div = document.createElement('div');
|
|
|
div.textContent = text; // Ez automatikusan kimenti az HTML-t
|
|
|
return div.innerHTML;
|
|
|
}
|
|
|
```
|
|
|
|
|
|
**Miért fontos ez**: Ha a felhasználó beírja, hogy `<script>alert('hack')</script>`, ez a függvény biztosítja, hogy szövegként jelenjen meg, ne futtasson kódot.
|
|
|
|
|
|
**Hibakezelés**:
|
|
|
```javascript
|
|
|
try {
|
|
|
const reply = await this.callAPI(messageText);
|
|
|
this.appendMessage(reply, "assistant");
|
|
|
} catch (error) {
|
|
|
// Barátságos hibát jelenítsen meg ahelyett, hogy összeomlana az alkalmazás
|
|
|
this.appendMessage("Sorry, I'm having trouble...", "error");
|
|
|
}
|
|
|
```
|
|
|
|
|
|
**Felhasználói élmény szempontok**:
|
|
|
- **Optimista UI**: Azonnal hozzáadja a felhasználó üzenetét, nem vár a szerver válaszára
|
|
|
- **Betöltési állapotok**: Letiltja a gombokat és megjeleníti a "Küldés..." állapotot várakozás közben
|
|
|
- **Automatikus görgetés**: Az új üzenetek mindig láthatóak maradnak
|
|
|
- **Bemenet validáció**: Nem küld üres üzeneteket
|
|
|
- **Billentyűparancsok**: Az Enter gomb küld üzenetet (mint a valódi csetalkalmazásokban)
|
|
|
|
|
|
#### Az alkalmazás folyamata
|
|
|
|
|
|
1. **Az oldal betöltődik** → `DOMContentLoaded` esemény lefut → `new ChatApp()` példány jön létre
|
|
|
2. **A konstruktor fut** → Betölti a DOM elem hivatkozásokat → Beállítja az eseménykezelőket
|
|
|
3. **A felhasználó gépel** → Entert nyom vagy a Küldés gombra kattint → lefut a `handleSubmit`
|
|
|
4. **A `handleSubmit`** → Ellenőrzi a bemenetet → Megjeleníti a betöltő állapotot → Meghívja az API-t
|
|
|
5. **Az API válaszol** → Hozzáadja az AI üzenetet a csethez → Újra engedélyezi a felületet
|
|
|
6. **Készen áll a következő üzenetre** → A felhasználó folytathatja a csevegést
|
|
|
|
|
|
Ez az architektúra skálázható – könnyedén hozzáadhatsz funkciókat, mint üzenet szerkesztés, fájl feltöltés vagy több beszélgetési szál anélkül, hogy az egész szerkezetet újra kellene írni.
|
|
|
|
|
|
### 🎯 Pedagógiai ellenőrzőpont: Modern frontend architektúra
|
|
|
|
|
|
**Architektúra megértése**: Teljes, egyoldalas alkalmazást valósítottál meg modern JavaScript mintákkal. Ez a professzionális frontend fejlesztés szintjét képviseli.
|
|
|
|
|
|
**Mesteri fogalmak**:
|
|
|
- **ES6 osztály architektúra**: Szervezett, karbantartható kódszerkezet
|
|
|
- **Async/Await minták**: Modern aszinkron programozás
|
|
|
- **Eseményvezérelt programozás**: Reaktív felhasználói felület tervezés
|
|
|
- **Biztonsági legjobb gyakorlatok**: XSS megelőzés és bemenet validáció
|
|
|
|
|
|
**Iparági kapcsolat**: Az elsajátított minták (osztály alapú architektúra, aszinkron műveletek, DOM manipuláció) a modern keretrendszerek, mint a React, Vue és Angular alapjai. Ugyanazzal a gondolkodásmóddal építesz, mint amit a termelési alkalmazásokban használnak.
|
|
|
|
|
|
**Reflektáló kérdés**: Hogyan bővítenéd ezt a csevegőalkalmazást több beszélgetés vagy felhasználói hitelesítés kezelésére? Gondold át az architektúrális módosításokat és az osztálystruktúra fejlődését.
|
|
|
|
|
|
### A csevegőfelület stílusozása
|
|
|
|
|
|
Most hozzunk létre egy modern, látványos csevegőfelületet CSS segítségével. A jó stílus professzionális érzetet kölcsönöz az alkalmazásnak, és javítja a felhasználói élményt. Modern CSS funkciókat fogunk alkalmazni, mint a Flexbox, CSS Grid és egyedi tulajdonságok egy reszponzív, akadálymentes dizájnért.
|
|
|
|
|
|
Hozd létre a `styles.css` fájlt ezekkel az átfogó stílusokkal:
|
|
|
|
|
|
```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;
|
|
|
}
|
|
|
}
|
|
|
```
|
|
|
|
|
|
**A CSS architektúra megértése:**
|
|
|
- **Használ** CSS egyéni tulajdonságokat (változókat) az egységes téma és könnyű karbantartás érdekében
|
|
|
- **Alkalmaz** Flexbox elrendezést a reszponzív dizájn és megfelelő igazítás érdekében
|
|
|
- **Tartalmaz** sima animációkat az üzenetek megjelenítéséhez anélkül, hogy zavaró lenne
|
|
|
- **Biztosít** vizuális megkülönböztetést a felhasználói üzenetek, AI válaszok és hibaállapotok között
|
|
|
- **Támogat** reszponzív kialakítást asztali és mobil eszközökön egyaránt
|
|
|
- **Figyelembe vesz** akadálymentességi szempontokat, mint a mozgáscsökkentés preferencia és megfelelő kontrasztarányok
|
|
|
- **Kínál** sötét mód támogatást a felhasználó rendszerbeállításai alapján
|
|
|
|
|
|
### Háttér URL konfigurálása
|
|
|
|
|
|
Az utolsó lépés a `BASE_URL` frissítése a JavaScriptben, hogy megfeleljen a háttérszervered URL-jének:
|
|
|
|
|
|
```javascript
|
|
|
// Helyi fejlesztéshez
|
|
|
this.BASE_URL = "http://localhost:5000";
|
|
|
|
|
|
// GitHub Codespaces-hez (cseréld le a tényleges URL-edre)
|
|
|
this.BASE_URL = "https://your-codespace-name-5000.app.github.dev";
|
|
|
```
|
|
|
|
|
|
**Hogyan határozd meg a háttér URL-jét:**
|
|
|
- **Lokális fejlesztés**: Használd a `http://localhost:5000` címet, ha a frontend és a backend is helyben fut
|
|
|
- **Codespaces**: A Portok fülön keresd meg a háttér URL-jét, miután a 5000-es portot nyilvánossá tetted
|
|
|
- **Éles üzem**: Cseréld le a tényleges domain nevedre, amikor hosztolási szolgáltatáshoz telepítesz
|
|
|
|
|
|
> 💡 **Tesztelési tipp**: Közvetlenül is tesztelheted a backendet, ha meglátogatod a gyökér URL-t a böngésződben. Látnod kell a FastAPI szerver üdvözlő üzenetét.
|
|
|
|
|
|
|
|
|
|
|
|
## Tesztelés és telepítés
|
|
|
|
|
|
Most, hogy megvannak a frontend és backend komponensek, teszteljük, hogy minden együtt működik-e, és fedezzük fel a telepítési lehetőségeket, hogy megoszthasd a csevegő asszisztenst másokkal.
|
|
|
|
|
|
### Lokális tesztelési munkafolyamat
|
|
|
|
|
|
Kövesd az alábbi lépéseket, hogy teszteld a teljes alkalmazásod:
|
|
|
|
|
|
```mermaid
|
|
|
graph TD
|
|
|
A[Backend szerver indítása] --> B[Környezeti változók beállítása]
|
|
|
B --> C[API végpontok tesztelése]
|
|
|
C --> D[Frontend megnyitása a böngészőben]
|
|
|
D --> E[Chat funkció tesztelése]
|
|
|
E --> F[Hibák hibakeresése]
|
|
|
```
|
|
|
**Lépésről lépésre tesztelési folyamat:**
|
|
|
|
|
|
1. **Indítsd el a háttér szervered**:
|
|
|
```bash
|
|
|
cd backend
|
|
|
source venv/bin/activate # vagy venv\Scripts\activate Windows rendszeren
|
|
|
python api.py
|
|
|
```
|
|
|
|
|
|
2. **Ellenőrizd az API működését**:
|
|
|
- Nyisd meg a `http://localhost:5000` címet a böngésződben
|
|
|
- Látni fogod az üdvözlő üzenetet a FastAPI szerveredtől
|
|
|
|
|
|
3. **Nyisd meg a frontendet**:
|
|
|
- Navigálj a frontend könyvtáradba
|
|
|
- Nyisd meg az `index.html` fájlt a böngészőben
|
|
|
- Vagy használd a VS Code Live Server kiterjesztését jobb fejlesztési élményért
|
|
|
|
|
|
4. **Teszteld a csevegő funkciót**:
|
|
|
- Írj be egy üzenetet a beviteli mezőbe
|
|
|
- Kattints a "Küldés" gombra vagy nyomj Entert
|
|
|
- Ellenőrizd, hogy az AI megfelelő választ ad-e
|
|
|
- Nézd meg a böngésző konzolját esetleges JavaScript hibákért
|
|
|
|
|
|
### Gyakori problémák elhárítása
|
|
|
|
|
|
| Probléma | Tünetek | Megoldás |
|
|
|
|---------|----------|----------|
|
|
|
| **CORS hiba** | A frontend nem éri el a backendet | Ellenőrizd, hogy a FastAPI CORSMiddleware megfelelően van-e beállítva |
|
|
|
| **API kulcs hiba** | 401 Jogosulatlan válaszok | Ellenőrizd a `GITHUB_TOKEN` környezeti változót |
|
|
|
| **Kapcsolat elutasítva** | Hálózati hibák a frontenden | Ellenőrizd a backend URL-t és hogy a Flask szerver fut-e |
|
|
|
| **Nincs AI válasz** | Üres vagy hibás válaszok | Ellenőrizd a backend naplókat API kvóta vagy hitelesítési problémák miatt |
|
|
|
|
|
|
**Általános hibakeresési lépések:**
|
|
|
- **Nézd meg** a böngésző fejlesztői eszközök Konzol fülét JavaScript hibákért
|
|
|
- **Ellenőrizd** a Hálózat fület, hogy sikeres API kérések és válaszok látszanak-e
|
|
|
- **Vizsgáld át** a backend terminál kimenetét Python hibák vagy API problémák miatt
|
|
|
- **Győződj meg arról**, hogy a környezeti változók megfelelően betöltődtek és elérhetők
|
|
|
|
|
|
## 📈 Az AI alkalmazásfejlesztési tudásod idővonala
|
|
|
|
|
|
```mermaid
|
|
|
timeline
|
|
|
title Teljes AI Alkalmazásfejlesztési Út
|
|
|
|
|
|
section AI Alapok
|
|
|
Generatív AI Megértése
|
|
|
: Mintafelismerési fogalmak elsajátítása
|
|
|
: AI paramétervezérlés mesterfokon
|
|
|
: Prompt tervezési technikák elsajátítása
|
|
|
|
|
|
GitHub Modellek Integrációja
|
|
|
: AI szolgáltatás platformok navigálása
|
|
|
: Biztonságos hitelesítés kezelése
|
|
|
: Modell paraméterek optimalizálása
|
|
|
|
|
|
section Backend Fejlesztés
|
|
|
Python API Architektúra
|
|
|
: FastAPI alkalmazások építése
|
|
|
: Aszinkron műveletek megvalósítása
|
|
|
: Biztonságos végpontok létrehozása
|
|
|
|
|
|
AI Szolgáltatás Integráció
|
|
|
: Külső AI API-khoz kapcsolódás
|
|
|
: Sebességkorlátozás kezelése
|
|
|
: Hibahatárok megvalósítása
|
|
|
|
|
|
section Frontend Mesterség
|
|
|
Modern JavaScript Minták
|
|
|
: ES6 osztályarchitektúra mesterfok
|
|
|
: Aszinkron/await folyamatok megvalósítása
|
|
|
: Reszponzív felületek létrehozása
|
|
|
|
|
|
Valós idejű Felhasználói Élmény
|
|
|
: Dinamikus csevegőfelületek készítése
|
|
|
: Betöltési állapotok kezelése
|
|
|
: Felhasználói interakciók optimalizálása
|
|
|
|
|
|
section Produkcióra Kész
|
|
|
Biztonság & Teljesítmény
|
|
|
: Biztonságos tokenkezelés megvalósítása
|
|
|
: XSS sebezhetőségek megelőzése
|
|
|
: API teljesítmény optimalizálása
|
|
|
|
|
|
Professzionális Telepítés
|
|
|
: Skálázható architektúrák építése
|
|
|
: Fenntartható kód létrehozása
|
|
|
: Fejlesztési folyamatok dokumentálása
|
|
|
```
|
|
|
**🎓 Diploma mérföldkő**: Sikeresen építettél egy teljes AI-meghajtású alkalmazást a modern technológiákat és architektúrális mintákat felhasználva, amelyek az élvonalbeli AI asszisztenseket működtetik. Ezek a készségek a hagyományos webfejlesztés és a korszerű AI integráció metszéspontját képviselik.
|
|
|
|
|
|
**🔄 Következő szintű képességek**:
|
|
|
- Készen állsz haladó AI keretrendszerek felfedezésére (LangChain, LangGraph)
|
|
|
- Fel vagy készülve többmodalitású AI alkalmazások építésére (szöveg, kép, hang)
|
|
|
- Fel vagy szerelve vektoradatbázisok és visszakereső rendszerek megvalósítására
|
|
|
- Alapot adtál gépi tanulás és AI modell finomhangolás számára
|
|
|
|
|
|
## GitHub Copilot Agent kihívás 🚀
|
|
|
|
|
|
Használd az Agent módot a következő kihívás teljesítéséhez:
|
|
|
|
|
|
**Leírás:** Fejleszd tovább a csevegő asszisztenst úgy, hogy beszélgetési előzményeket és üzenettárolást adj hozzá. Ez a kihívás segít megérteni, hogyan kezeljük az állapotot csevegőalkalmazásokban, és hogyan implementáljunk adatmentést jobb felhasználói élményért.
|
|
|
|
|
|
**Feladat:** Módosítsd a csevegőalkalmazást úgy, hogy tartalmazzon beszélgetés előzményeket, amelyek megmaradnak a munkamenetek között. Adj funkciót az üzenetek helyi tárolásba mentésére, a beszélgetési előzmények megjelenítésére az oldal betöltésekor, és egy "Előzmények törlése" gombot is. Valamint valósíts meg gépelés-jelzőket és üzenet időbélyegeket, hogy a csevegés élménye valósághűbb legyen.
|
|
|
|
|
|
További információért a [agent mód-ról](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) kattints ide.
|
|
|
|
|
|
## Feladat: Építsd meg a saját személyes AI asszisztensedet
|
|
|
|
|
|
Most saját AI asszisztensedet valósítod meg. Nem csupán a bemutató kódját ismétled meg, hanem lehetőség nyílik arra, hogy alkalmazd a koncepciókat és valami saját érdeklődési körödnek és használati eseteidnek megfelelőt hozz létre.
|
|
|
|
|
|
### Projekt követelmények
|
|
|
|
|
|
Állítsd be a projekted egy tiszta, rendezett struktúrával:
|
|
|
|
|
|
```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
|
|
|
```
|
|
|
|
|
|
### Alapvető megvalósítási feladatok
|
|
|
|
|
|
**Backend fejlesztés:**
|
|
|
- **Vedd át** a FastAPI kódunkat és tedd egyedivé
|
|
|
- **Alkoss** egy egyedi AI személyiséget – talán egy segítőkész főzési segédet, kreatív írási partnert vagy tanulótársat?
|
|
|
- **Adj hozzá** megbízható hibakezelést, hogy az app ne omoljon össze hiba esetén
|
|
|
- **Írj** tiszta dokumentációt bárki számára, aki érteni szeretné az API működését
|
|
|
|
|
|
**Frontend fejlesztés:**
|
|
|
- **Építs** egy intuitív és barátságos csevegőfelületet
|
|
|
- **Írj** tiszta, modern JavaScriptet, amit büszkén mutathatsz más fejlesztőknek
|
|
|
- **Tervezd meg** a stílust egyedi módon, amely tükrözi az AI személyiségét – vidám és színes? Tiszta és minimalista? Teljesen rád van bízva!
|
|
|
- **Győződj meg arról**, hogy telefonon és számítógépen is jól működik
|
|
|
|
|
|
**Személyre szabási követelmények:**
|
|
|
- **Válassz** egy egyedi nevet és személyiséget az AI asszisztensednek – talán olyat, ami tükrözi az érdeklődési köreidet vagy azokat a problémákat, amiket meg akarsz oldani
|
|
|
- **Személyre szabjad** a vizuális dizájnt az asszisztensed hangulatának megfelelően
|
|
|
- **Írj** egy vonzó üdvözlő üzenetet, ami arra ösztönöz, hogy elkezdjenek csevegni veled
|
|
|
- **Teszteld** az asszisztenst különféle kérdésekkel, hogy lásd, hogyan válaszol
|
|
|
|
|
|
### Fejlesztési ötletek (opcionális)
|
|
|
|
|
|
Szeretnéd továbbvinni a projektedet? Íme néhány szórakoztató ötlet a bővítéshez:
|
|
|
|
|
|
| Funkció | Leírás | Gyakorolt készségek |
|
|
|
|---------|-------------|------------------------|
|
|
|
| **Üzenet előzmények** | Megőrzi a beszélgetéseket oldalfrissítés után is | localStorage használat, JSON kezelés |
|
|
|
| **Gépelési jelzők** | Megjeleníti, hogy „AI gépel...” várakozás alatt | CSS animációk, async programozás |
|
|
|
| **Üzenet időbélyegek** | Megmutatja, mikor küldték az egyes üzeneteket | Dátum/idő formázás, UX tervezés |
|
|
|
| **Csevegés exportálás** | A felhasználók letölthetik a beszélgetést | Fájlfeldolgozás, adat exportálás |
|
|
|
| **Téma váltás** | Világos/sötét mód kapcsoló | CSS változók, felhasználói preferenciák |
|
|
|
| **Hangalapú beviteli lehetőség** | Beszéd-szöveg funkció hozzáadása | Web API-k, akadálymentesség |
|
|
|
|
|
|
### Tesztelés és dokumentáció
|
|
|
|
|
|
**Minőségbiztosítás:**
|
|
|
- **Teszteld** az alkalmazást különféle bemenetekkel és szélsőséges esetekkel
|
|
|
- **Ellenőrizd** a reszponzív dizájn működését különböző képernyőméreteken
|
|
|
- **Vizsgáld meg** az akadálymentességet billentyűzettel és képernyőolvasóval
|
|
|
- **Validáld** az HTML és CSS szabványkövetésének megfelelését
|
|
|
|
|
|
**Dokumentáció követelmények:**
|
|
|
- **Írj** README.md-et, amely elmagyarázza a projektedet és hogy hogyan kell futtatni
|
|
|
- **Tartsd benne** a csevegőfelületed képernyőképeit működés közben
|
|
|
- **Dokumentáld** bármilyen egyedi funkciót vagy személyre szabást, amit hozzáadtál
|
|
|
- **Adj meg** világos telepítési útmutatót más fejlesztők számára
|
|
|
|
|
|
### Beküldési irányelvek
|
|
|
|
|
|
**Projekt leadandók:**
|
|
|
1. Teljes projekt könyvtár az összes forráskóddal
|
|
|
2. README.md a projekt leírásával és telepítési útmutatóval
|
|
|
3. Képernyőképek, amelyek bemutatják a csevegő asszisztenst működés közben
|
|
|
4. Rövid reflexió arról, mit tanultál és milyen kihívásokkal szembesültél
|
|
|
|
|
|
**Értékelési szempontok:**
|
|
|
- **Funkcionalitás**: Működik-e a csevegő asszisztens a vártak szerint?
|
|
|
- **Kódminőség**: Jól szervezett, kommentált és karbantartható-e a kód?
|
|
|
- **Dizájn**: Vonzó és felhasználóbarát a felület?
|
|
|
- **Kreativitás**: Mennyire egyedi és személyre szabott a megvalósítás?
|
|
|
- **Dokumentáció**: Világosak és teljesek a telepítési instrukciók?
|
|
|
|
|
|
> 💡 **Siker tipp**: Kezdd az alapkövetelményekkel, majd adj hozzá fejlesztéseket, amikor minden működik. Először egy kifinomult magélményt hozz létre, aztán jöhetnek a haladó funkciók.
|
|
|
|
|
|
## Megoldás
|
|
|
|
|
|
[Solution](./solution/README.md)
|
|
|
|
|
|
## Bónusz kihívások
|
|
|
|
|
|
Készen állsz arra, hogy a következő szintre emeld az AI asszisztensed? Próbáld ki a haladó kihívásokat, amelyek elmélyítik az AI integráció és a webfejlesztés ismereteidet.
|
|
|
|
|
|
### Személyiség testreszabás
|
|
|
|
|
|
Az igazi varázslat akkor történik, amikor az AI asszisztensed egyedi személyiséget kap. Kísérletezz különböző rendszerüzenetekkel, hogy speciális asszisztenseket hozz létre:
|
|
|
|
|
|
**Professzionális asszisztens példa:**
|
|
|
```python
|
|
|
call_llm(message, "You are a professional business consultant with 20 years of experience. Provide structured, actionable advice with specific steps and considerations.")
|
|
|
```
|
|
|
|
|
|
**Kreatív írás segéd példa:**
|
|
|
```python
|
|
|
call_llm(message, "You are an enthusiastic creative writing coach. Help users develop their storytelling skills with imaginative prompts and constructive feedback.")
|
|
|
```
|
|
|
|
|
|
**Technikai mentor példa:**
|
|
|
```python
|
|
|
call_llm(message, "You are a patient senior developer who explains complex programming concepts using simple analogies and practical examples.")
|
|
|
```
|
|
|
|
|
|
### Frontend fejlesztések
|
|
|
|
|
|
Alakítsd át a csevegőfelületet ezekkel a vizuális és funkcionális fejlesztésekkel:
|
|
|
|
|
|
**Haladó CSS funkciók:**
|
|
|
- **Valósíts meg** sima üzenet animációkat és átmeneteket
|
|
|
- **Adj hozzá** egyedi csevegő buborék dizájnokat CSS formákkal és gradiensekkel
|
|
|
- **Készíts** gépelő jelző animációt az AI „gondolkodik” állapotához
|
|
|
- **Tervezd meg** az emoji reakciókat vagy az üzenet értékelési rendszert
|
|
|
|
|
|
**JavaScript fejlesztések:**
|
|
|
- **Adj hozzá** billentyűparancsokat (Ctrl+Enter küldéshez, Escape a bevitel törléséhez)
|
|
|
- **Implementálj** üzenet kereső és szűrő funkciót
|
|
|
- **Készíts** beszélgetés exportáló funkciót (letöltés szövegként vagy JSON-ként)
|
|
|
- **Add hozzá** az automatikus mentést localStorage-ba az üzenetvesztés elkerülésére
|
|
|
|
|
|
### Haladó AI integráció
|
|
|
|
|
|
**Több AI személyiség:**
|
|
|
- **Hozz létre** egy legördülő menüt az AI személyiségek közti váltáshoz
|
|
|
- **Mentsd el** a felhasználó kedvenc személyiségét localStorage-ban
|
|
|
- **Valósíts meg** kontextus váltást, amely megőrzi a beszélgetés folyamatosságát
|
|
|
|
|
|
**Intelligens válaszfunkciók:**
|
|
|
- **Adj hozzá** beszélgetési kontextus tudatosságot (az AI emlékszik korábbi üzenetekre)
|
|
|
- **Valósíts meg** intelligens javaslatokat a beszélgetés témája alapján
|
|
|
- **Hozz létre** gyors válasz gombokat gyakori kérdésekhez
|
|
|
|
|
|
> 🎯 **Tanulási cél**: Ezek a bónusz kihívások segítenek megérteni a fejlett webfejlesztési mintákat és a mesterséges intelligencia integrációs technikáit, amelyeket termelési alkalmazásokban használnak.
|
|
|
|
|
|
## Összefoglalás és következő lépések
|
|
|
|
|
|
Gratulálunk! Sikeresen felépítettél egy teljesen AI-vezérelt chat asszisztenst a semmiből. Ez a projekt kézzel fogható tapasztalatot adott a modern webfejlesztési technológiákkal és az AI integrációval kapcsolatban – olyan készségeket, amelyek egyre értékesebbek a mai technológiai környezetben.
|
|
|
|
|
|
### Amit elértél
|
|
|
|
|
|
A tanfolyam során elsajátítottál több kulcsfontosságú technológiát és koncepciót:
|
|
|
|
|
|
**Backend fejlesztés:**
|
|
|
- **Integráltad** a GitHub Models API-t az AI funkciókhoz
|
|
|
- **Felépítettél** egy RESTful API-t Flask segítségével megfelelő hibakezeléssel
|
|
|
- **Megvalósítottál** biztonságos hitelesítést környezeti változókkal
|
|
|
- **Beállítottad** a CORS-t frontend és backend közötti cross-origin kérésekhez
|
|
|
|
|
|
**Frontend fejlesztés:**
|
|
|
- **Készítettél** reszponzív chat felületet szemantikus HTML használatával
|
|
|
- **Megvalósítottál** modern JavaScript-et async/await és osztály alapú architektúrával
|
|
|
- **Megterveztél** egy vonzó felhasználói felületet CSS Grid, Flexbox és animációk használatával
|
|
|
- **Hozzáadtál** hozzáférhetőségi funkciókat és reszponzív dizájn elveket
|
|
|
|
|
|
**Full-stack integráció:**
|
|
|
- **Összekapcsoltad** a frontend és backend részeket HTTP API hívásokon keresztül
|
|
|
- **Kezelted** valós idejű felhasználói interakciókat és aszinkron adatfolyamot
|
|
|
- **Megvalósítottad** a hibakezelést és a felhasználói visszajelzést az egész alkalmazásban
|
|
|
- **Letesztelted** az alkalmazás teljes munkafolyamatát a felhasználói bemenettől az AI válaszig
|
|
|
|
|
|
### Fő tanulási eredmények
|
|
|
|
|
|
```mermaid
|
|
|
mindmap
|
|
|
root((AI Csevegőalkalmazás Készségek))
|
|
|
API Integráció
|
|
|
Hitelesítés
|
|
|
Hibakezelés
|
|
|
Aszinkron Programozás
|
|
|
Webfejlesztés
|
|
|
HTML5 Szemantika
|
|
|
Modern CSS
|
|
|
ES6+ JavaScript
|
|
|
Felhasználói Élmény
|
|
|
Reszponzív Dizájn
|
|
|
Hozzáférhetőség
|
|
|
Valós idejű Interakció
|
|
|
AI Megértés
|
|
|
Prompt Mérnökség
|
|
|
Modell Paraméterek
|
|
|
Beszélgetés Menete
|
|
|
```
|
|
|
Ez a projekt bevezetést nyújtott az AI-vezérelt alkalmazások építésének alapjaiba, amelyek a webfejlesztés jövőjét képviselik. Most már érted, hogyan lehet AI-képességeket integrálni hagyományos webalkalmazásokba oly módon, hogy vonzó és intelligens, érzékeny felhasználói élmények jöjjenek létre.
|
|
|
|
|
|
### Szakmai alkalmazások
|
|
|
|
|
|
Az ebben a leckében megszerzett készségek közvetlenül alkalmazhatók a modern szoftverfejlesztési karrierekben:
|
|
|
|
|
|
- **Full-stack webfejlesztés** modern keretrendszerekkel és API-kkal
|
|
|
- **AI integráció** webalkalmazásokban és mobilalkalmazásokban
|
|
|
- **API tervezés és fejlesztés** mikroszolgáltatási architektúrákhoz
|
|
|
- **Felhasználói felület fejlesztés** hozzáférhetőség és reszponzív dizájn szempontokkal
|
|
|
- **DevOps gyakorlatok**, beleértve a környezet konfigurálását és telepítését
|
|
|
|
|
|
### Folytasd az AI fejlesztői utadat
|
|
|
|
|
|
**Következő tanulási lépések:**
|
|
|
- **Fedezd fel** az ennél fejlettebb AI modelleket és API-kat (GPT-4, Claude, Gemini)
|
|
|
- **Tanulj** prompt tervezési technikákról a jobb AI válaszokért
|
|
|
- **Ismerkedj meg** a beszélgetés tervezéssel és chatbot felhasználói élmény elveivel
|
|
|
- **Vizsgáld meg** az AI biztonságát, etikáját és a felelős AI fejlesztési gyakorlatokat
|
|
|
- **Építs** komplexebb alkalmazásokat beszélgetési memória és kontextusérzékenység használatával
|
|
|
|
|
|
**Fejlett projekt ötletek:**
|
|
|
- Többfelhasználós chat szobák AI moderációval
|
|
|
- AI-vezérelt ügyfélszolgálati chatbotok
|
|
|
- Oktatási tutor asszisztensek személyre szabott tanulással
|
|
|
- Kreatív írói kollégák különféle AI személyiségekkel
|
|
|
- Műszaki dokumentációs asszisztensek fejlesztőknek
|
|
|
|
|
|
## A GitHub Codespaces használata
|
|
|
|
|
|
Szeretnéd kipróbálni ezt a projektet egy felhő alapú fejlesztői környezetben? A GitHub Codespaces teljes fejlesztői környezetet biztosít a böngésződben, ideális az AI alkalmazásokkal való kísérletezéshez helyi beállítási követelmények nélkül.
|
|
|
|
|
|
### Fejlesztői környezet beállítása
|
|
|
|
|
|
**1. lépés: Készítés sablonból**
|
|
|
- **Navigálj** a [Web Dev For Beginners repository](https://github.com/microsoft/Web-Dev-For-Beginners) oldalra
|
|
|
- **Kattints** a jobb felső sarokban a "Use this template" gombra (győződj meg róla, hogy be vagy jelentkezve GitHub-ra)
|
|
|
|
|
|
|
|
|
|
|
|
**2. lépés: Codespaces indítása**
|
|
|
- **Nyisd meg** az újonnan létrehozott repository-t
|
|
|
- **Kattints** a zöld "Code" gombra, és válaszd a "Codespaces" lehetőséget
|
|
|
- **Válaszd** a "Create codespace on main" opciót a fejlesztői környezet indításához
|
|
|
|
|
|
|
|
|
|
|
|
**3. lépés: Környezet beállítása**
|
|
|
Amint betölt a Codespace, hozzáférést kapsz:
|
|
|
- **Előre telepített** Python, Node.js és minden szükséges fejlesztői eszköz
|
|
|
- **VS Code felület** bővítményekkel webfejlesztéshez
|
|
|
- **Terminál hozzáférés** backend és frontend szerverek futtatásához
|
|
|
- **Port továbbítás** az alkalmazások teszteléséhez
|
|
|
|
|
|
**Mit nyújt a Codespaces:**
|
|
|
- **Megszünteti** a helyi környezet telepítési és konfigurációs problémákat
|
|
|
- **Konzisztens fejlesztői környezetet biztosít** különféle eszközök között
|
|
|
- **Előre konfigurált eszközök és bővítmények** webfejlesztéshez
|
|
|
- **Zökkenőmentes integrációt nyújt** a GitHub verziókezelés és együttműködés céljából
|
|
|
|
|
|
> 🚀 **Pro Tipp**: A Codespaces tökéletes az AI alkalmazások tanulásához és prototípus készítéséhez, mert automatikusan kezeli a bonyolult környezetbeállításokat, így te az építésre és a tanulásra koncentrálhatsz ahelyett, hogy konfigurációs problémákkal bajlódnál.
|
|
|
|
|
|
---
|
|
|
|
|
|
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
|
|
**Jogi nyilatkozat**:
|
|
|
Ez a dokumentum az AI fordítási szolgáltatás, a [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével készült. Bár a pontosságra törekszünk, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti, anyanyelvi dokumentum tekintendő hiteles forrásnak. Fontos információk esetén javasolt szakmai, emberi fordítást igénybe venni. Nem vállalunk felelősséget a fordítás használatából eredő félreértésekért vagy hibás értelmezésekért.
|
|
|
<!-- CO-OP TRANSLATOR DISCLAIMER END --> |
