73 KiB

Raw Blame History Unescape Escape

Építs egy Chat Asszisztenst AI-val

Emlékszel a Star Trekben, amikor a legénység lazán beszélgetett a hajó számítógépével, összetett kérdéseket tett fel, és átgondolt válaszokat kapott? Ami az 1960-as években tiszta tudományos fantasztikumnak tűnt, ma már valami olyasmi, amit a meglévő webes technológiákkal te is megépíthetsz.

Ebben a leckében egy AI chat asszisztenst fogunk létrehozni HTML, CSS, JavaScript és némi backend integráció segítségével. Megtudhatod, hogyan kapcsolhatók össze az általad már ismert készségek olyan erőteljes AI szolgáltatásokkal, amelyek képesek megérteni a kontextust és értelmes válaszokat generálni.

Gondolj az AI-ra úgy, mint egy hatalmas könyvtárra, amely nemcsak információt talál, hanem azt is képes összefoglalni és személyre szabott válaszokat adni a konkrét kérdéseidre. Ahelyett, hogy több ezer oldalt kellene átböngészned, közvetlen, kontextushoz illeszkedő válaszokat kapsz.

Az integráció ismerős webes technológiák együttműködésével történik. A HTML létrehozza a chat felületet, a CSS kezeli a vizuális megjelenést, a JavaScript az interakciókat irányítja, és egy backend API kapcsolja össze mindezt az AI szolgáltatásokkal. Ez olyan, mint amikor egy zenekar különböző szekciói együtt dolgoznak egy szimfónia megalkotásán.

Lényegében egy hidat építünk a természetes emberi kommunikáció és a gépi feldolgozás között. Megtanulod az AI szolgáltatások technikai megvalósítását és azokat a tervezési mintákat, amelyek intuitívvá teszik az interakciókat.

A lecke végére az AI integráció kevésbé fog misztikus folyamatnak tűnni, és inkább egy újabb API-nak, amellyel dolgozhatsz. Megérted azokat az alapvető mintákat, amelyek olyan alkalmazásokat működtetnek, mint a ChatGPT és Claude, ugyanazokat a webfejlesztési elveket használva, amelyeket már tanultál.

Így fog kinézni a kész projekted:

Az AI megértése: A rejtélytől a mesteri szintig

Mielőtt belevágnánk a kódolásba, értsük meg, mivel dolgozunk. Ha már használtál API-kat, ismered az alapmintát: küldj egy kérést, kapj egy választ.

Az AI API-k hasonló struktúrát követnek, de ahelyett, hogy előre tárolt adatokat kérnének le egy adatbázisból, új válaszokat generálnak a hatalmas mennyiségű szövegből tanult minták alapján. Gondolj rá úgy, mint a különbségre egy könyvtári katalógusrendszer és egy tájékozott könyvtáros között, aki több forrásból szintetizál információt.

Mi is az a "Generatív AI" valójában?

Gondolj arra, hogyan segítette a Rosetta-kő a tudósokat az egyiptomi hieroglifák megértésében az ismert és ismeretlen nyelvek közötti minták megtalálásával. Az AI modellek hasonlóan működnek – hatalmas mennyiségű szövegben találják meg a mintákat, hogy megértsék, hogyan működik a nyelv, majd ezeket a mintákat használják arra, hogy megfelelő válaszokat generáljanak új kérdésekre.

Egyszerű összehasonlítás:

Hagyományos adatbázis: Mint amikor a születési anyakönyvi kivonatodat kéred – mindig ugyanazt a dokumentumot kapod
Keresőmotor: Mint amikor egy könyvtárostól kérsz könyveket macskákról – megmutatja, mi érhető el
Generatív AI: Mint amikor egy tájékozott barátot kérdezel a macskákról – érdekes dolgokat mond saját szavaival, az igényeidhez igazítva

graph LR
    A[Your Question] --> B[AI Model]
    B --> C[Pattern Recognition]
    C --> D[Content Generation]
    D --> E[Contextual Response]
    
    F[Training Data<br/>Books, Articles, Web] --> B

Hogyan tanulnak az AI modellek (Egyszerű verzió)

Az AI modellek hatalmas adatállományokból tanulnak, amelyek könyvekből, cikkekből és beszélgetésekből származó szövegeket tartalmaznak. E folyamat során az alábbi mintákat azonosítják:

Hogyan strukturálódnak a gondolatok az írásos kommunikációban
Mely szavak jelennek meg gyakran együtt
Hogyan zajlanak általában a beszélgetések
A formális és informális kommunikáció közötti kontextuális különbségek

Ez hasonló ahhoz, ahogyan a régészek dekódolják az ősi nyelveket: több ezer példát elemeznek, hogy megértsék a nyelvtant, szókincset és kulturális kontextust, végül képesek lesznek új szövegeket értelmezni a tanult minták alapján.

Miért GitHub Modellek?

A GitHub Modelleket elég praktikus okból használjuk – hozzáférést biztosít vállalati szintű AI-hoz anélkül, hogy saját AI infrastruktúrát kellene beállítanunk (amit most valószínűleg nem szeretnél megtenni!). Ez olyan, mint egy időjárási API használata, ahelyett, hogy magad próbálnád megjósolni az időjárást azzal, hogy mindenhol meteorológiai állomásokat állítasz fel.

Ez lényegében "AI mint szolgáltatás", és a legjobb rész? Ingyenesen elkezdheted, így kísérletezhetsz anélkül, hogy aggódnod kellene a magas költségek miatt.

graph LR
    A[Frontend Chat UI] --> B[Your Backend API]
    B --> C[GitHub Models API]
    C --> D[AI Model Processing]
    D --> C
    C --> B
    B --> A

A GitHub Modelleket fogjuk használni a backend integrációhoz, amely professzionális szintű AI képességeket biztosít fejlesztőbarát felületen keresztül. A GitHub Models Playground egy tesztkörnyezet, ahol különböző AI modellekkel kísérletezhetsz, és megértheted képességeiket, mielőtt implementálnád őket a kódba.

Amiért a playground hasznos:

Kipróbálhatod különböző AI modelleket, mint például GPT-4o-mini, Claude és mások (mind ingyenes!)
Tesztelheted az ötleteidet és promptjaidat, mielőtt kódot írnál
Kaphatsz kész kódrészleteket a kedvenc programozási nyelveden
Finomhangolhatod a beállításokat, mint például a kreativitási szintet és a válasz hosszát, hogy lásd, hogyan befolyásolják az eredményt

Miután egy kicsit játszottál, csak kattints a "Code" fülre, és válaszd ki a programozási nyelvet, hogy megkapd a szükséges implementációs kódot.

Python backend integráció beállítása

Most implementáljuk az AI integrációt Python segítségével. A Python kiváló AI alkalmazásokhoz egyszerű szintaxisa és erőteljes könyvtárai miatt. A GitHub Models playground kódjával kezdünk, majd átalakítjuk egy újrafelhasználható, gyártásra kész funkcióvá.

Az alap implementáció megértése

Amikor a Python kódot letöltöd a playgroundból, valami ilyesmit kapsz. Ne aggódj, ha elsőre soknak tűnik – lépésről lépésre végigmegyünk rajta:

"""Run this model in Python

> pip install openai
"""
import os
from openai import OpenAI

# To authenticate with the model you will need to generate a personal access token (PAT) in your GitHub settings. 
# Create your PAT token by following instructions here: 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"],
)

```python
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)

Ami ebben a kódban történik:

Importáljuk a szükséges eszközöket: os a környezeti változók olvasásához, OpenAI az AI-val való kommunikációhoz
Beállítjuk az OpenAI klienst, hogy a GitHub AI szervereire mutasson, nem közvetlenül az OpenAI-ra
Hitelesítünk egy speciális GitHub tokennel (erről később!)
Strukturáljuk a beszélgetést különböző "szerepekkel" – gondolj rá úgy, mint egy színdarab színpadképére
Elküldjük a kérésünket az AI-nak néhány finomhangolási paraméterrel
Kinyerjük a tényleges válasz szövegét az összes visszaérkező adatból

Üzenet szerepek megértése: Az AI beszélgetési keretrendszer

Az AI beszélgetések egy specifikus struktúrát használnak különböző "szerepekkel", amelyek különböző célokat szolgálnak:

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índarab rendezésére:

Rendszer szerep: Mint a színpadi utasítások egy színésznek – megmondja az AI-nak, hogyan viselkedjen, milyen személyisége legyen, és hogyan válaszoljon
Felhasználói szerep: A tényleges kérdés vagy üzenet az alkalmazást használó személytől
Asszisztens szerep: Az AI válasza (ezt nem küldöd el, de megjelenik a beszélgetési előzményekben)

Valós analógia: Képzeld el, hogy bemutatsz egy barátot valakinek egy buliban:

Rendszer üzenet: "Ő itt Sarah, egy orvos, aki remekül elmagyarázza az orvosi fogalmakat egyszerűen"
Felhasználói üzenet: "El tudnád magyarázni, hogyan működnek a vakcinák?"
Asszisztens válasz: Sarah válaszol, mint egy barátságos orvos, nem mint ügyvéd vagy szakács

AI paraméterek megértése: A válasz viselkedésének finomhangolása

Az AI API hívásokban szereplő numerikus paraméterek szabályozzák, hogyan generálja a modell a válaszokat. Ezek a beállítások lehetővé teszik, hogy az AI viselkedését különböző felhasználási esetekhez igazítsd:

Hőmérséklet (0.0-tól 2.0-ig): A kreativitás szabályozója

Mit csinál: Szabályozza, hogy az AI válaszai mennyire legyenek kreatívak vagy kiszámíthatóak.

Gondolj rá úgy, mint egy jazz zenész improvizációs szintjére:

Hőmérséklet = 0.1: Mindig 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érletező jazz váratlan fordulatokkal (nagyon kiszámíthatatlan)

# Very predictable responses (good for factual questions)
response = client.chat.completions.create(
    messages=[{"role": "user", "content": "What is 2+2?"}],
    temperature=0.1  # Will almost always say "4"
)

# Creative responses (good for brainstorming)
response = client.chat.completions.create(
    messages=[{"role": "user", "content": "Write a creative story opening"}],
    temperature=1.2  # Will generate unique, unexpected stories
)

Max Tokens (1-től 4096+-ig): A válasz hosszának szabályozója

Mit csinál: Meghatározza, hogy az AI válasza milyen hosszú lehet.

Gondolj a tokenekre, mint nagyjából szavakra (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

# Short, concise answers
response = client.chat.completions.create(
    messages=[{"role": "user", "content": "Explain JavaScript"}],
    max_tokens=100  # Forces a brief explanation
)

# Detailed, comprehensive answers  
response = client.chat.completions.create(
    messages=[{"role": "user", "content": "Explain JavaScript"}],
    max_tokens=1500  # Allows for detailed explanations with examples
)

Top_p (0.0-tól 1.0-ig): A fókusz paraméter

Mit csinál: Szabályozza, hogy az AI mennyire maradjon a legvalószínűbb válaszoknál.

Képzeld el, hogy az AI-nak hatalmas szókincse van, amelyet a szavak valószínűsége alapján rangsorolnak:

top_p=0.1: Csak a legvalószínűbb 10%-ot veszi figyelembe (nagyon fókuszált)
top_p=0.9: A lehetséges szavak 90%-át veszi figyelembe (kreatívabb)
top_p=1.0: Mindent figyelembe vesz (maximális változatosság)

Például: Ha megkérdezed "Az ég általában..."

Alacsony top_p: Szinte biztosan azt mondja, hogy "kék"
Magas top_p: Mondhatja, hogy "kék", "felhős", "végtelen", "változó", "gyönyörű" stb.

Mindezt összefoglalva: Paraméter kombinációk különböző felhasználási esetekhez

# For factual, consistent answers (like a documentation bot)
factual_params = {
    "temperature": 0.2,
    "max_tokens": 300,
    "top_p": 0.3
}

# For creative writing assistance
creative_params = {
    "temperature": 1.1,
    "max_tokens": 1000,
    "top_p": 0.9
}

# For conversational, helpful responses (balanced)
conversational_params = {
    "temperature": 0.7,
    "max_tokens": 500,
    "top_p": 0.8
}

Miért fontosak ezek a paraméterek: Különböző alkalmazások különböző típusú válaszokat 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ási asszisztensnek képzeletgazdagnak és változatosnak (magas hőmérséklet). Ezeknek a paramétereknek a megértése lehetővé teszi, hogy irányítsd az AI személyiségét és válaszstílusát.


**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))

Az új funkció megértése:

Két paramétert fogad el: a felhasználó promptját és egy opcionális rendszerüzenetet
Alapértelmezett rendszerüzenetet biztosít általános asszisztens viselkedéshez
Megfelelő Python típusjelzéseket használ a jobb kód dokumentáció érdekében
Csak a válasz tartalmát adja vissza, így könnyen használható a webes API-ban
Ugyanazokat a modellparamétereket tartja meg a következetes AI viselkedés érdekében

A rendszerüzenetek varázsa: Az AI személyiségének programozása

Ha a paraméterek szabályozzák, hogyan gondolkodik az AI, akkor a rendszerüzenetek szabályozzák, hogy ki az AI. Ez őszintén az egyik legmenőbb része az AI-val való munkának – lényegében egy teljes személyiséget, szakértelem szintet és kommunikációs stílust adsz az AI-nak.

Gondolj a rendszerüzenetekre úgy, mint különböző színészek szerepeire: Ahelyett, hogy egy általános asszisztensed lenne, különleges szakértőket hozhatsz létre különböző helyzetekhez. Szükséged van egy türelmes tanárra? Egy kreatív ötletelési partnerre? Egy határozott üzleti tanácsadóra? Csak változtasd meg a rendszerüzenetet!

Miért olyan erőteljesek a rendszerüzenetek?

Itt jön az érdekes rész: Az AI modellek számtalan beszélgetésen tanultak, ahol az emberek különböző szerepeket és szakértelem szinteket vettek fel. Amikor egy konkrét szerepet adsz az AI-nak, az olyan, mintha egy kapcsolót kapcsolnál, amely aktiválja az összes tanult mintát.

Ez olyan, mint a módszínészet az AI számára: Mondj egy színésznek, hogy "te egy bölcs öreg professzor vagy", és figyeld, hogyan igazítja automatikusan a testtartását, szókincsét és modorát. Az AI valami hasonlót tesz a nyelvi mintákkal.

Hatékony rendszerüzenetek megalkotása: Művészet és tudomány

Egy nagyszerű rendszerüzenet anatómiája:

**Szerep/Személyis Íme, miért tökéletes a FastAPI ahhoz, amit építünk:

Alapértelmezett aszinkron működés: Egyszerre több AI-kérést is kezel, anélkül hogy elakadna
Automatikus dokumentáció: Látogass el a /docs oldalra, és ingyen kapj egy gyönyörű, interaktív API dokumentációs oldalt
Beépített validáció: Hibákat fog el, mielőtt problémát okoznának
Villámgyors: Az egyik leggyorsabb Python keretrendszer
Modern Python: A legújabb és legjobb Python funkciókat használja

És íme, miért van szükségünk egy backendre egyáltalán:

Biztonság: Az AI API kulcsod olyan, mint egy jelszó – ha frontend JavaScriptben helyezed el, bárki, aki megnézi a weboldalad forráskódját, ellophatja, és felhasználhatja az 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, hogy szabályozd, milyen gyakran küldhetnek kéréseket a felhasználók, felhasználói hitelesítést valósíts meg, és naplózást adj hozzá a használat nyomon követéséhez.

Adatfeldolgozás: Lehet, hogy el akarod menteni a beszélgetéseket, szűrni a nem megfelelő tartalmat, vagy több AI-szolgáltatást kombinálni. A backend az a hely, ahol ez a logika él.

Az architektúra hasonlít egy kliens-szerver modellre:

Frontend: Felhasználói felület réteg az interakcióhoz
Backend API: Kérésfeldolgozó és útválasztó 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ő adatok tárolása

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:

sequenceDiagram
    participant User as 👤 User
    participant Frontend as 🌐 Frontend
    participant API as 🔧 FastAPI Server
    participant AI as 🤖 AI Service
    
    User->>Frontend: Types "Hello AI!"
    Frontend->>API: POST /hello {"message": "Hello AI!"}
    Note over API: Validates request<br/>Adds system prompt
    API->>AI: Sends formatted request
    AI->>API: Returns AI response
    Note over API: Processes response<br/>Logs conversation
    API->>Frontend: {"response": "Hello! How can I help?"}
    Frontend->>User: Displays AI message

Az egyes lépések megértése:

Felhasználói interakció: A személy begépeli az üzenetet a chat felületén
Frontend feldolgozás: A JavaScript rögzíti a bemenetet, és JSON formátumba alakítja
API validáció: A FastAPI automatikusan validálja a kérést Pydantic modellek segítségével
AI integráció: A backend hozzáadja a kontextust (rendszerprompt), és hívja az AI szolgáltatást
Válaszkezelés: Az API megkapja az AI válaszát, és szükség esetén módosíthatja
Frontend megjelenítés: A JavaScript megjeleníti a választ a chat felületen

Az API architektúra megértése

sequenceDiagram
    participant Frontend
    participant FastAPI
    participant AI Function
    participant GitHub Models
    
    Frontend->>FastAPI: POST /hello {"message": "Hello AI!"}
    FastAPI->>AI Function: call_llm(message, system_prompt)
    AI Function->>GitHub Models: API request
    GitHub Models->>AI Function: AI response
    AI Function->>FastAPI: response text
    FastAPI->>Frontend: {"response": "Hello! How can I help?"}

A FastAPI alkalmazás létrehozása

Építsük fel lépésről lépésre az API-t. Hozz létre egy api.py nevű fájlt a következő FastAPI kóddal:

# api.py
from fastapi import FastAPI, HTTPException
from fastapi.middleware.cors import CORSMiddleware
from pydantic import BaseModel
from llm import call_llm
import logging

# Configure logging
logging.basicConfig(level=logging.INFO)
logger = logging.getLogger(__name__)

# Create FastAPI application
app = FastAPI(
    title="AI Chat API",
    description="A high-performance API for AI-powered chat applications",
    version="1.0.0"
)

# Configure CORS
app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],  # Configure appropriately for production
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

# Pydantic models for request/response validation
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:
        # Extract and validate message
        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]}...")
        
        # Call AI service (note: call_llm should be made async for better performance)
        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 az adatvalidációhoz
Automatikus API dokumentációt hoz létre (elérhető a /docs címen, amikor a szerver fut)
Engedélyezi a CORS middleware-t, hogy a frontend kéréseket különböző eredetekből fogadja
Meghatározza a Pydantic modelleket az automatikus kérés/válasz validációhoz és dokumentációhoz
Aszinkron végpontokat használ a jobb teljesítmény érdekében, egyidejű kérések esetén
Megvalósítja a megfelelő HTTP státuszkódokat és hibakezelést HTTPException segítségével
Strukturált naplózást tartalmaz a monitorozáshoz és hibakereséshez
Egészségügyi ellenőrzési végpontot biztosít a szolgáltatás állapotának monitorozásához

A FastAPI kulcsfontosságú előnyei a hagyományos keretrendszerekkel szemben:

Automatikus validáció: A Pydantic modellek biztosítják az adatok integritását a feldolgozás előtt
Interaktív dokumentáció: Látogass el a /docs oldalra az automatikusan generált, tesztelhető API dokumentációért
Típusbiztonság: A Python típusjelzések megakadályozzák a futásidejű hibákat, és javítják a kód minőségét
Aszinkron támogatás: Egyszerre több AI-kérést kezel, anélkül hogy blokkolná a folyamatot
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ületben, aki ellenőrzi, hogy a látogatók beléphetnek-e. Nézzük meg, miért fontos ez, és hogyan érinti az alkalmazásodat.

Mi az a CORS, és miért létezik?

A probléma: Képzeld el, hogy bármely weboldal kérhetne a bankod weboldalától az engedélyed nélkül. Ez biztonsági rémálom lenne! A böngészők ezt alapértelmezés szerint megakadályozzák az "azonos eredetű politika" révén.

Azonos eredetű politika: A böngészők csak azokat a weboldalakat engedik kérni, amelyek ugyanazon domainről, portról és protokollról töltődtek be.

Valós példázat: Olyan, mint egy lakóépület biztonsága – alapértelmezés szerint csak a lakók (azonos eredet) férhetnek hozzá az épülethez. Ha egy barátot (különböző eredet) szeretnél beengedni, kifejezetten meg kell mondanod a biztonsági őrnek, hogy rendben van.

CORS a fejlesztési környezetben

Fejlesztés közben a frontend és a backend különböző portokon fut:

Frontend: http://localhost:3000 (vagy file://, ha közvetlenül HTML-t nyitsz meg)
Backend: http://localhost:5000

Ezek "különböző eredetnek" számítanak, még akkor is, ha ugyanazon a számítógépen vannak!

from fastapi.middleware.cors import CORSMiddleware

app = FastAPI(__name__)
CORS(app)   # This tells browsers: "It's okay for other origins to make requests to this API"

Mit csinál a CORS konfiguráció a gyakorlatban:

Speciális HTTP fejléceket ad hozzá az API válaszokhoz, amelyek azt mondják a böngészőknek, hogy "ez a kereszt-eredetű kérés engedélyezett"
Kezeli az "előzetes" kéréseket (a böngészők néha ellenőrzik az engedélyeket, mielőtt elküldenék a tényleges kérést)
Megelőzi a böngésző konzolban megjelenő "CORS policy által blokkolva" hibát

CORS biztonság: Fejlesztés vs. Éles környezet

# 🚨 Development: Allows ALL origins (convenient but insecure)
CORS(app)

# ✅ Production: Only allow your specific frontend domain
CORS(app, origins=["https://yourdomain.com", "https://www.yourdomain.com"])

# 🔒 Advanced: Different origins for different environments
if app.debug:  # Development mode
    CORS(app, origins=["http://localhost:3000", "http://127.0.0.1:3000"])
else:  # Production mode
    CORS(app, origins=["https://yourdomain.com"])

Miért fontos ez: Fejlesztés során a CORS(app) olyan, mintha nyitva hagynád az ajtót – kényelmes, de nem biztonságos. Éles környezetben pontosan meg kell határoznod, hogy mely weboldalak kommunikálhatnak az API-val.

Gyakori CORS helyzetek és megoldások

Helyzet	Probléma	Megoldás
Helyi fejlesztés	A frontend nem éri el a backendet	Add hozzá a CORSMiddleware-t a FastAPI-hoz
GitHub Pages + Heroku	A telepített 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 illeszkedjenek a domainhez
Mobilalkalmazás	Az alkalmazás nem éri el a webes API-t	Add hozzá az alkalmazás domainjét, vagy óvatosan használj `*`-ot

Profi tipp: Ellenőrizheted a CORS fejléceket a böngésződ Fejlesztői eszközeiben, a Hálózat fül alatt. Keresd az olyan fejléceket, mint az Access-Control-Allow-Origin a válaszban.

Hibakezelés és validáció

Figyeld meg, hogyan tartalmazza az API a megfelelő hibakezelést:

# Validate that we received a message
if not message:
    return jsonify({"error": "Message field is required"}), 400

Kulcsfontosságú validációs elvek:

Ellenőrzi a szükséges mezőket a kérések feldolgozása előtt
Értelmes hibaüzeneteket ad vissza JSON formátumban
Megfelelő HTTP státuszkódokat használ (400 a hibás kérésekhez)
Világos visszajelzést ad, hogy segítse a frontend fejlesztőket a hibák elhárításában

A backend beállítása és futtatása

Most, hogy készen áll az AI integráció és a FastAPI szerver, indítsuk el az egészet. A beállítási folyamat magában foglalja a Python függőségek telepítését, a környezeti változók konfigurálását és a fejlesztői szerver indítását.

Python környezet beállítása

Állítsuk be a Python fejlesztői környezetet. A virtuális környezetek olyanok, mint a Manhattan Projekt elkülönített megközelítése – minden projekt saját, izolált teret kap specifikus eszközökkel és függőségekkel, megelőzve a különböző projektek közötti konfliktusokat.

# Navigate to your backend directory
cd backend

# Create a virtual environment (like creating a clean room for your project)
python -m venv venv

# Activate it (Linux/Mac)
source ./venv/bin/activate

# On Windows, use:
# venv\Scripts\activate

# Install the good stuff
pip install openai fastapi uvicorn python-dotenv

Amit éppen csináltunk:

Létrehoztuk a saját Python buborékunkat, ahol telepíthetünk csomagokat anélkül, hogy bármi mást befolyásolnánk
Aktiváltuk, hogy a terminál tudja, hogy ezt a specifikus környezetet használja
Telepítettük az alapvető eszközöket: OpenAI az AI varázslathoz, FastAPI a webes API-hoz, Uvicorn a futtatáshoz, és python-dotenv a biztonságos titokkezeléshez

Kulcsfontosságú függőségek magyarázata:

FastAPI: Modern, gyors webes keretrendszer automatikus API dokumentációval
Uvicorn: Villámgyors ASGI szerver, amely FastAPI alkalmazásokat futtat
OpenAI: Hivatalos könyvtár 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 elindítanánk az API-t, beszélnünk kell a webfejlesztés egyik legfontosabb leckéjéről: hogyan tartsuk a titkokat valóban titokban. A környezeti változók olyanok, mint egy biztonságos széf, amelyhez csak az alkalmazásod fér hozzá.

Mik azok a környezeti változók?

Gondolj a környezeti változókra, mint egy biztonsági letéti dobozra – értékes dolgokat teszel bele, és csak te (és az alkalmazásod) férsz hozzá. Ahelyett, hogy érzékeny információkat közvetlenül a kódba írnál (ahol bárki láthatja), biztonságosan tárolod őket a környezetben.

Íme a különbség:

Rossz módszer: A jelszavadat egy cetlire írni, és a monitorodra ragasztani
Jó módszer: A jelszavadat egy biztonságos jelszókezelőben tartani, amelyhez csak te férsz hozzá

Miért fontosak a környezeti változók

# 🚨 NEVER DO THIS - API key visible to everyone
client = OpenAI(
    api_key="ghp_1234567890abcdef...",  # Anyone can steal this!
    base_url="https://models.github.ai/inference"
)

# ✅ DO THIS - API key stored securely
client = OpenAI(
    api_key=os.environ["GITHUB_TOKEN"],  # Only your app can access this
    base_url="https://models.github.ai/inference"
)

Mi történik, ha titkokat írsz a kódba:

Verziókezelési kitettség: Bárki, aki hozzáfér a Git repódhoz, látja az API kulcsodat
Nyilvános repók: Ha feltöltöd GitHubra, a kulcsod látható az egész internet számára
Csapatmegosztás: Más fejlesztők, akik a projekten dolgoznak, hozzáférnek a személyes API kulcsodhoz
Biztonsági rések: Ha valaki ellopja az API kulcsodat, felhasználhatja az AI-krediteidet

Környezeti fájl létrehozása

Hozz létre egy .env fájlt a backend könyvtáradban. Ez a fájl helyileg tárolja a titkaidat:

# .env file - This should NEVER be committed to Git
GITHUB_TOKEN=your_github_personal_access_token_here
FASTAPI_DEBUG=True
ENVIRONMENT=development

A .env fájl megértése:

Egy titok soronként KULCS=érték formátumban
Nincsenek szóközök az egyenlőségjel körül
Nincsenek idézőjelek az értékek körül (általában)
Megjegyzések #-el 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 alkalmazásodnak, hogy használja a GitHub AI szolgáltatásait:

Lépésről lépésre token létrehozása:

Menj a GitHub Beállításokhoz → Fejlesztői beállítások → Személyes hozzáférési tokenek → Tokenek (klasszikus)
Kattints a "Generate new token (classic)" gombra
Állítsd be a lejárati időt (30 nap teszteléshez, hosszabb időtartam éles környezethez)
Válassz jogosultságokat: Jelöld be a "repo"-t és bármely más szükséges engedélyt
Generáld a tokent, és azonnal másold ki (később nem fogod látni!)
Illeszd be a .env fájlba

# Example of what your token looks like (this is fake!)
GITHUB_TOKEN=ghp_1A2B3C4D5E6F7G8H9I0J1K2L3M4N5O6P7Q8R

Környezeti változók betöltése Pythonban

import os
from dotenv import load_dotenv

# Load environment variables from .env file
load_dotenv()

# Now you can access them securely
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 a .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!)
Egyértelmű hibát dob, ha a token hiányzik
Biztonságosan használja a tokent anélkül, hogy kódba írnád

Git biztonság: A .gitignore fájl

A .gitignore fájl megmondja a Gitnek, hogy mely fájlokat ne kövesse nyomon vagy töltse fel:

# .gitignore - Add these lines
.env
*.env
.env.local
.env.production
__pycache__/
venv/
.vscode/

Miért fontos ez: Ha hozzáadod a .env fájlt a .gitignore-hoz, a Git figyelmen kívül hagyja a környezeti fájlt, megakadályozva, hogy véletlenül feltöltsd a titkaidat a GitHubra.

Különböző környezetek, különböző titkok

Professzionális alkalmazások különböző API kulcsokat használnak különböző környezetekhez:

# .env.development
GITHUB_TOKEN=your_development_token
DEBUG=True

# .env.production  
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át, és különböző biztonsági szinteket szeretnél különböző környezetekhez.

A fejlesztői szerver indítása: A FastAPI életre keltése

Most jön az izgalmas pillanat – a FastAPI fejlesztői szerver indítása, és az AI integráció életre keltése! A FastAPI az Uvicornt használja, egy villámgyors ASGI szervert, amely kifejezetten aszinkron Python alkalmazásokhoz készült.

A FastAPI

# test_api.py - Create this file to test your API
import requests
import json

# Test the API endpoint
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 ki
`ModuleNotFoundError: No module named 'fastapi'`	A FastAPI nincs telepítve	Futtasd a `pip install fastapi uvicorn` parancsot a virtuális környezetedben
`ModuleNotFoundError: No module named 'uvicorn'`	Az ASGI szerver nincs telepítve	Futtasd a `pip install uvicorn` parancsot a virtuális környezetedben
`KeyError: 'GITHUB_TOKEN'`	A 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 5000-es portot használó más folyamatokat, vagy változtasd meg a portot
`ValidationError`	A kérés adatai nem felelnek meg a Pydantic modellnek	Ellenőrizd, hogy a kérés formátuma megfelel-e a várt sémának
`HTTPException 422`	Feldolgozhatatlan entitás	A kérés validálása sikertelen, ellenőrizd a `/docs` oldalon a helyes formátumot
`OpenAI API error`	Az AI szolgáltatás hitelesítése sikertelen	Ellenőrizd, hogy a GitHub token helyes-e, és rendelkezik-e megfelelő jogosultságokkal

Fejlesztési legjobb gyakorlatok

Automatikus újratöltés: A FastAPI és Uvicorn automatikus újratöltést biztosít, amikor mented a Python fájlokat. Ez azt jelenti, hogy azonnal módosíthatod és tesztelheted a kódot anélkül, hogy manuálisan újra kellene indítanod.

# Enable hot reloading explicitly
if __name__ == "__main__":
    app.run(host="0.0.0.0", port=5000, debug=True)  # debug=True enables hot reload

Fejlesztési naplózás: Adj hozzá naplózást, hogy megértsd, mi történik:

import logging

# Set up logging
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áthatod, milyen kérések érkeznek, hogyan válaszol az AI, és hol történnek 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 számítógéped lenne a felhőben, amelyet bármely böngészőből elérhetsz. Ha Codespaces-ben dolgozol, van néhány további lépés, hogy a backend elérhető legyen a frontend számára.

A Codespaces hálózatának megértése

Egy helyi fejlesztési környezetben minden ugyanazon a számító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" jelentése eltérő. A GitHub automatikusan nyilvános URL-eket hoz létre a szolgáltatásaidhoz, de ezeket megfelelően kell konfigurálnod.

Lépésről lépésre Codespaces konfiguráció

1. Indítsd el a backend szervert:

cd backend
python api.py

Látni fogod a megszokott FastAPI/Uvicorn indítási üzenetet, de vedd észre, hogy ez a Codespace környezetben fut.

2. Állítsd be a port láthatóságát:

Keresd meg a "Ports" fület a VS Code alsó paneljén
Keresd meg az 5000-es portot a listában
Kattints jobb gombbal az 5000-es portra
Válaszd a "Port Visibility" → "Public" opciót

Miért legyen nyilvános? Alapértelmezés szerint a Codespace portok privátak (csak te férsz hozzájuk). Ha nyilvánossá teszed, a frontend (amely a böngészőben fut) kommunikálhat a backenddel.

3. Szerezd meg a nyilvános URL-t: Miután a portot nyilvánossá tetted, egy ilyen URL-t fogsz látni:

https://your-codespace-name-5000.app.github.dev

4. Frissítsd a frontend konfigurációt:

// In your frontend app.js, update the BASE_URL:
this.BASE_URL = "https://your-codespace-name-5000.app.github.dev";

A Codespace URL-ek megértése

A Codespace URL-ek kiszámítható mintát követnek:

https://[codespace-name]-[port].app.github.dev

Részletek:

codespace-name: Egyedi azonosító a Codespace-hez (általában tartalmazza a felhasználónevedet)
port: A portszám, amelyen a szolgáltatás fut (5000 a FastAPI alkalmazásunkhoz)
app.github.dev: A GitHub domainje a Codespace alkalmazásokhoz

A Codespace beállítás tesztelése

1. Teszteld közvetlenül a backendet: 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:

// Open browser console and test your API
fetch('https://your-codespace-name-5000.app.github.dev/hello', {
  method: 'POST',
  headers: {'Content-Type': 'application/json'},
  body: JSON.stringify({message: 'Hello from Codespaces!'})
})
.then(response => response.json())
.then(data => console.log(data));

Codespaces vs 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 hozzáférés	`http://localhost:5000`	`https://xyz-5000.app.github.dev`
Port konfiguráció	Automatikus	Manuális (portok nyilvánossá tétele)
Fájlok megőrzése	Helyi gép	GitHub repository
Együttműködés	Nehéz megosztani a környezetet	Könnyű megosztani a Codespace linket
Internet függőség	Csak az AI API hívásokhoz	Mindenhez szükséges

Codespace fejlesztési tippek

Környezeti változók a Codespaces-ben: A .env fájl ugyanúgy működik a Codespaces-ben, de közvetlenül is beállíthatsz környezeti változókat a Codespace-ben:

# Set environment variable for the current session
export GITHUB_TOKEN="your_token_here"

# Or add to your .bashrc for persistence
echo 'export GITHUB_TOKEN="your_token_here"' >> ~/.bashrc

Port kezelés:

A Codespaces automatikusan érzékeli, amikor az alkalmazás elkezd hallgatni egy porton
Több portot is egyszerre továbbíthatsz (hasznos, ha később adatbázist adsz hozzá)
A portok elérhetők maradnak, amíg a Codespace fut

Fejlesztési munkafolyamat:

Végezz kódmódosításokat a VS Code-ban
A FastAPI automatikusan újratölt (köszönhetően a Uvicorn újratöltési módjának)
Azonnal teszteld a változtatásokat a nyilvános URL-en keresztül
Commit és push, amikor készen állsz

💡 Tipp: Mentsd el a Codespace backend URL-t a fejlesztés során. Mivel a Codespace nevek stabilak, az URL nem változik, amíg ugyanazt a Codespace-t használod.

A 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 lépnek kapcsolatba az emberek az AI asszisztenssel. Akárcsak az eredeti iPhone felületének tervezésekor, arra összpontosítunk, hogy a komplex 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. Ahelyett, hogy minden kattintás új oldalt töltene be, az alkalmazásunk zökkenőmentesen és azonnal frissül:

Régi weboldalak: Mint egy fizikai könyv olvasása – teljesen új oldalakat lapozol A chat alkalmazásunk: Mint a telefonod használata – minden gördülékenyen és zökkenőmentesen frissül

graph TD
    A[User Types Message] --> B[JavaScript Captures Input]
    B --> C[Validate & Format Data]
    C --> D[Send to Backend API]
    D --> E[Display Loading State]
    E --> F[Receive AI Response]
    F --> G[Update Chat Interface]
    G --> H[Ready for Next Message]

A frontend fejlesztés három pillére

Minden frontend alkalmazás – az egyszerű weboldalaktól a komplex alkalmazásokig, mint a Discord vagy a Slack – három alapvető technológiára épül. Gondolj rájuk úgy, mint az alapokra, amelyekre minden webes megjelenés és interakció épül:

HTML (Struktúra): Ez az alap

Meghatározza, milyen elemek léteznek (gombok, szövegmezők, konténerek)
Jelentést ad a tartalomnak (ez egy fejléc, ez egy űrlap stb.)
Létrehozza az alapvető struktúrát, amelyre minden más épül

CSS (Megjelenés): Ez a belsőépítész

Minden szép megjelenést biztosít (színek, betűtípusok, elrendezések)
Kezeli a különböző képernyőméreteket (telefon vs laptop vs tablet)
Létrehozza a sima animációkat és vizuális visszajelzéseket

JavaScript (Viselkedés): Ez az agy

Reagál arra, amit a felhasználók csinálnak (kattintások, gépelés, görgetés)
Kommunikál a backenddel és frissíti az oldalt
Minden interaktív és dinamikus funkciót biztosít

Gondolj rá úgy, mint az építészeti tervezésre:

HTML: A szerkezeti tervrajz (terek és kapcsolatok meghatározása)
CSS: Az esztétikai és környezeti tervezés (vizuális stílus é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 modern JavaScript mintákat fog használni, amelyeket professzionális alkalmazásokban is láthatsz. Ezeknek a koncepcióknak a megértése segít abban, hogy fejlesztőként fejlődj:

Osztály-alapú architektúra: A kódunkat osztályokba szervezzük, ami olyan, mintha tervrajzokat készítenénk objektumokhoz Async/Await: Modern módja az időigényes műveletek kezelésének (például API hívások) Eseményvezérelt programozás: Az alkalmazásunk a felhasználói műveletekre (kattintások, billentyűleütések) reagál, nem pedig egy ciklusban fut DOM manipuláció: Dinamikusan frissíti a weboldal tartalmát a felhasználói interakciók és API válaszok alapján

Projekt struktúra beállítása

Hozz létre egy frontend könyvtárat ezzel a rendezett struktúrával:

frontend/
├── index.html      # Main HTML structure
├── app.js          # JavaScript functionality
└── styles.css      # Visual styling

Az architektúra megértése:

Elvá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ési legjobb gyakorlatokat a szervezettség és karbantarthatóság érdekében

Az HTML alapok é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 céljukat, nem csak megjelenésüket. Ez akadálymentessé teszi az alkalmazást képernyőolvasók, keresőmotorok és más eszközök számára.

Miért fontos a szemantikus HTML: Képzeld el, hogy telefonon keresztül írod le a chat alkalmazásodat valakinek. Azt mondanád: "Van egy fejléc a címmel, egy fő terület, ahol a beszélgetések megjelennek, és egy űrlap alul az üzenetek gépeléséhez." A szemantikus HTML olyan elemeket használ, amelyek megfelelnek ennek a természetes leírásnak.

Hozz létre egy index.html fájlt ezzel az átgondoltan strukturált jelöléssel:

<!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>

Az egyes HTML elemek és céljuk megértése:

Dokumentum struktúra

<!DOCTYPE html>: Megmondja a böngészőnek, hogy ez modern HTML5
<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"...>: Mobilbaráttá teszi az oldalt a nagyítás és méretezés szabályozásával

Szemantikus elemek

<header>: Egyértelműen azonosítja a felső szekciót címmel és leírással
<main>: Kijelöli az elsődleges tartalmi területet (ahol a beszélgetések történnek)
<form>: Szemantikailag helyes a felhasználói bevitelhez, lehetővé teszi a megfelelő billentyűzet navigációt

Akadálymentességi funkciók

role="log": Megmondja a képernyőolvasóknak, hogy ez a terület üzenetek időrendi naplóját tartalmazza
aria-live="polite": Bejelenti az új üzeneteket a képernyőolvasóknak anélkül, hogy megszakítaná
aria-label: Leíró címkéket biztosít az űrlapvezérlők számára
required: A böngésző ellenőrzi, hogy a felhasználók üzenetet írnak-e be küldés előtt

CSS és JavaScript integráció

class attribútumok: Stíluskapcsolók CSS-hez (pl. chat-container, input-group)
id attribútumok: Lehetővé teszik a JavaScript számára, hogy megtalálja és manipulálja az egyes elemeket
Script elhelyezése: A JavaScript fájl a végén töltődik be, így az HTML először betöltődik

Miért működik ez a struktúra:

Logikus folyamat: Fejléc → Fő tartalom → Beviteli űrlap megfelel a természetes olvasási sorrendnek
Billentyűzet hozzáférhető: A felhasználók végig tudnak tabulálni az összes interaktív elemen
Képernyőolvasó barát: Egyértelmű tájékozódási pontok és leírások a látássérült felhasználók számára
Mobilbarát: A viewport meta tag lehetővé teszi a reszponzív dizájnt
Progresszív fejlesztés: Akkor is működik, ha a 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 chat felületet. Modern JavaScript mintákat fogunk használni, amelyeket professzionális webfejlesztésben is találhatsz, beleértve az ES6 osztályokat, az async/await-et és az eseményvezérelt programozást.

A modern JavaScript architektúra megértése

Ahelyett, hogy procedurális kódot írnánk (egy sorban futó függvények), egy osztály-alapú architektúrát hozunk létre. Gondolj egy osztályra úgy, mint egy tervrajzra, amely objektumok létrehozására szolgál – mint ahogy egy építész tervrajza több ház építésére is használható.

Miért használjunk osztályokat webalkalmazásokhoz?

Szervezettség: Minden kapcsolódó funkció egy helyen van csoportosítva
Újrafelhasználhatóság: Több chat példányt is létrehozhatsz ugyanazon az oldalon
Karbantarthatóság: Könnyebb hibakeresni és módosítani az egyes funkciókat Ez az architektúra skálázható – könnyedén hozzáadhat olyan funkciókat, mint az üzenetek szerkesztése, fájlok feltöltése vagy több beszélgetési szál anélkül, hogy újra kellene írni az alapstruktúrát.

A chatfelület stílusának kialakítása

Most hozzunk létre egy modern, vizuálisan vonzó chatfelületet CSS segítségével. A jó stílus professzionális megjelenést kölcsönöz az alkalmazásnak, és javítja a felhasználói élményt. Modern CSS funkciókat fogunk használni, mint például a Flexbox, CSS Grid és egyedi tulajdonságok a reszponzív, hozzáférhető dizájn érdekében.

Hozd létre a styles.css fájlt ezekkel az átfogó stílusokkal:

/* 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 egyedi tulajdonságokat (változókat) a következetes témázás és könnyű karbantartás érdekében
Alkalmaz Flexbox elrendezést a reszponzív dizájnhoz és megfelelő igazításhoz
Tartalmaz sima animációkat az üzenetek megjelenítéséhez, anélkül hogy zavaró lenne
Biztosít vizuális különbséget a felhasználói üzenetek, AI válaszok és hibák között
Támogatja a reszponzív dizájnt, amely asztali és mobil eszközökön is működik
Figyelembe veszi a hozzáférhetőséget csökkentett mozgás preferenciákkal és megfelelő kontrasztarányokkal
Kínál sötét mód támogatást a felhasználó rendszerbeállításai alapján

A backend URL konfigurálása

Az utolsó lépés a BASE_URL frissítése a JavaScriptben, hogy illeszkedjen a backend szerverhez:

// For local development
this.BASE_URL = "http://localhost:5000";

// For GitHub Codespaces (replace with your actual URL)
this.BASE_URL = "https://your-codespace-name-5000.app.github.dev";

A backend URL meghatározása:

Helyi fejlesztés: Használj http://localhost:5000-t, ha a frontend és a backend is helyben fut
Codespaces: Keresd meg a backend URL-t a Ports fülön, miután a 5000-es portot nyilvánossá tetted
Éles környezet: Cseréld le a tényleges domainre, amikor hosting szolgáltatásra telepíted

💡 Tesztelési tipp: Közvetlenül 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 elkészítetted a frontend és backend komponenseket, teszteljük, hogy minden együtt működik, és fedezzük fel a telepítési lehetőségeket, hogy megoszthasd a chat asszisztenst másokkal.

Helyi tesztelési munkafolyamat

Kövesd ezeket a lépéseket az alkalmazás teljes teszteléséhez:

graph TD
    A[Start Backend Server] --> B[Configure Environment Variables]
    B --> C[Test API Endpoints]
    C --> D[Open Frontend in Browser]
    D --> E[Test Chat Functionality]
    E --> F[Debug Any Issues]

Lépésről lépésre tesztelési folyamat:

Indítsd el a backend szervert:

cd backend
source venv/bin/activate  # or venv\Scripts\activate on Windows
python api.py

Ellenőrizd az API működését:
- Nyisd meg a http://localhost:5000-t a böngésződben
- Látnod kell a FastAPI szerver üdvözlő üzenetét
Nyisd meg a frontendet:
- Navigálj a frontend könyvtárba
- Nyisd meg az index.html-t a web böngésződben
- Vagy használd a VS Code Live Server kiterjesztését a jobb fejlesztési élmény érdekében
Teszteld a chat funkciót:
- Írj egy üzenetet a beviteli mezőbe
- Kattints a "Küldés" gombra vagy nyomd meg az Entert
- Ellenőrizd, hogy az AI megfelelően válaszol-e
- Nézd meg a böngésző konzolját, hogy van-e JavaScript hiba

Gyakori problémák elhárítása

Probléma	Tünetek	Megoldás
CORS hiba	A frontend nem éri el a backendet	Győződj meg róla, hogy a FastAPI CORSMiddleware megfelelően van konfigurálva
API kulcs hiba	401 Unauthorized válaszok	Ellenőrizd a `GITHUB_TOKEN` környezeti változót
Kapcsolat megtagadva	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

Gyakori hibakeresési lépések:

Ellenőrizd a böngésző Fejlesztői Eszközök Konzolját JavaScript hibákért
Ellenőrizd a Hálózat fület, hogy sikeresek-e az API kérések és válaszok
Nézd át a backend terminál kimenetét Python hibák vagy API problémák miatt
Győződj meg róla, hogy a környezeti változók megfelelően betöltődtek és elérhetők

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 a chat asszisztenst beszélgetési előzmények és üzenetmegőrzés hozzáadásával. Ez a kihívás segít megérteni, hogyan lehet kezelni az állapotot a chat alkalmazásokban, és megvalósítani az adatmentést a jobb felhasználói élmény érdekében.

Feladat: Módosítsd a chat alkalmazást úgy, hogy tartalmazza a beszélgetési előzményeket, amelyek megmaradnak a munkamenetek között. Adj hozzá funkciót az üzenetek mentéséhez a helyi tárolóba, jelenítsd meg a beszélgetési előzményeket az oldal betöltésekor, és adj hozzá egy "Előzmények törlése" gombot. Valósíts meg gépelési jelzéseket és üzenet időbélyegeket, hogy a chat élmény valósághűbb legyen.

További információért az agent mode funkcióról kattints ide.

Feladat: Építsd meg saját AI asszisztensedet

Most létrehozhatod saját AI asszisztensedet. Ahelyett, hogy egyszerűen lemásolnád a bemutató kódot, ez egy lehetőség arra, hogy alkalmazd a koncepciókat, miközben valami olyat építesz, ami tükrözi saját érdeklődési körödet és felhasználási eseteidet.

Projektkövetelmények

Állítsd be a projektedet egy tiszta, rendezett struktúrával:

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 alakítsd sajátoddá
Hozz létre egy egyedi AI személyiséget – talán egy segítőkész főzési asszisztenst, egy kreatív írópartnert vagy egy tanulótársat?
Adj hozzá megbízható hibakezelést, hogy az alkalmazás ne omoljon össze, ha valami rosszul sül el
Írj egyértelmű dokumentációt azok számára, akik meg akarják érteni, hogyan működik az API-d

Frontend fejlesztés:

Építs egy intuitív és barátságos chatfelületet
Írj tiszta, modern JavaScriptet, amit büszkén mutatnál meg más fejlesztőknek
Tervezd meg az AI személyiségét tükröző egyedi stílust – vidám és színes? Tiszta és minimalista? Teljesen rajtad múlik!
Biztosítsd, hogy telefonokon és számítógépeken is remekül működjön

Személyre szabási követelmények:

Válassz egy egyedi nevet és személyiséget az AI asszisztensednek – talán valami, ami tükrözi az érdeklődési körödet vagy a megoldani kívánt problémákat
Testreszabás a vizuális dizájnt, hogy illeszkedjen az asszisztensed hangulatához
Írj egy meggyőző üdvözlő üzenetet, amely arra ösztönzi az embereket, hogy elkezdjenek beszélgetni
Teszteld az asszisztenst különböző típusú kérdésekkel, hogy lásd, hogyan reagál

Fejlesztési ötletek (opcionális)

Szeretnéd a projektedet a következő szintre emelni? Íme néhány szórakoztató ötlet, amit felfedezhetsz:

Funkció	Leírás	Gyakorolt készségek
Üzenet előzmények	Emlékezzen a beszélgetésekre még az oldal frissítése után is	Helyi tárolás kezelése, JSON feldolgozás
Gépelési jelzések	Mutassa, hogy "AI gépel..." válaszra várva	CSS animációk, aszinkron programozás
Üzenet időbélyegek	Mutassa, mikor küldték az egyes üzeneteket	Dátum/idő formázás, UX tervezés
Chat exportálása	Engedje meg a felhasználóknak, hogy letöltsék a beszélgetésüket	Fájlkezelés, adatexportálás
Téma váltás	Világos/sötét mód váltása	CSS változók, felhasználói preferenciák
Hangbevitel	Adj hozzá beszéd-szöveg funkciót	Web API-k, hozzáférhetőség

Tesztelés és dokumentáció

Minőségbiztosítás:

Teszteld az alkalmazást különböző bemeneti típusokkal és szélsőséges esetekkel
Ellenőrizd, hogy a reszponzív dizájn működik különböző képernyőméreteken
Vizsgáld meg a hozzáférhetőséget billentyűzet navigációval és képernyőolvasókkal
Érvényesítsd a HTML-t és CSS-t a szabványoknak megfelelően

Dokumentációs követelmények:

Írj egy README.md fájlt, amely elmagyarázza a projektedet és hogyan kell futtatni
Mellékelj képernyőképeket a chatfelület működéséről
Dokumentáld az általad hozzáadott egyedi funkciókat vagy testreszabásokat
Adj meg egyértelmű telepítési utasításokat más fejlesztők számára

Beküldési irányelvek

Projekt leadandók:

Teljes projektmappa az összes forráskóddal
README.md a projekt leírásával és telepítési utasításokkal
Képernyőképek, amelyek bemutatják a chat asszisztenst működés közben
Rövid reflexió arról, hogy mit tanultál és milyen kihívásokkal szembesültél

Értékelési kritériumok:

Funkcionalitás: Az asszisztens megfelelően működik?
Kódminőség: A kód jól szervezett, kommentált és karbantartható?
Dizájn: A felület vizuálisan vonzó és felhasználóbarát?
Kreativitás: Mennyire egyedi és személyre szabott a megvalósítás?
Dokumentáció: Egyértelműek és teljesek a telepítési utasítások?

💡 Siker tipp: Kezdd az alapkövetelményekkel, majd adj hozzá fejlesztéseket, miután minden működik. Koncentrálj egy kifinomult alapélmény létrehozására, mielőtt fejlett funkciókat adnál hozzá.

Megoldás

Bónusz kihívások

Készen állsz arra, hogy AI asszisztensedet a következő szintre emeld? Próbáld ki ezeket a haladó kihívásokat, amelyek mélyítik az AI integráció és webfejlesztés megértését.

Személyiség testreszabása

Az igazi varázslat akkor történik, amikor AI asszisztensednek egyedi személyiséget adsz. Kísérletezz különböző rendszerpromptokkal, hogy specializált asszisztenseket hozz létre:

Professzionális asszisztens példa:

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ósegéd példa:

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:

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 chatfelü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 chatbuborék dizájnt CSS formákkal és színátmenetekkel
Hozz létre gépelési jelzés animációt, amikor az AI "gondolkodik"
Tervezd meg emoji reakciókat vagy üzenet értékelési rendszert

JavaScript fejlesztések:

Adj hozzá billentyűparancsokat (Ctrl+Enter küldéshez, Escape a bevitel törléséhez)
Valósíts meg üzenet keresési és szűrési funkciót
Hozz létre beszélgetés exportálási funkciót (letöltés szövegként vagy JSON formátumban)
Adj hozzá automatikus mentést a helyi tárolóba, hogy elkerüld az üzenetvesztést

Haladó AI integráció

Több AI személyiség:

Hozz létre egy legördülő menüt különböző AI személyiségek közötti váltáshoz
Mentsd el a felhasználó preferált személyiségét a helyi tárolóba
Valósíts meg kontextusváltást, amely fenntartja a beszélgetés folyamatát

Okos válasz funkciók:

Adj hozzá beszélgetési kontextus tudatosságot (AI emlékszik az előző üzenetekre)
Valósíts meg okos 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 haladó webfejlesztési mintákat és AI integrációs technikákat, amelyeket a termelési alkalmazásokban használnak.

Összegzés és következő lépések

Gratulálunk! Sikeresen létrehoztál egy teljes AI-alapú chat asszisztenst a semmiből. Ez a projekt gyakorlati tapasztalatot adott a modern webfejlesztési technológiákkal és AI integrációval – olyan készségekkel, amelyek egyre értékesebbek a mai technológiai környezetben.

Amit elértél

A leckében számos kulcsfontosságú technológiát és koncepciót sajátítottál el:

Backend fejlesztés:

Integráltad a GitHub Models API-t az AI funkciókhoz
Létrehoztál egy RESTful API-t Flask segítségével megfelelő hibakezeléssel
Megvalósítottad a biztonságos hitelesítést környezeti változók használatával
Konfiguráltad a CORS-t a frontend és backend közötti kereszt-origin kérésekhez

Frontend fejlesztés:

Létrehoztál egy reszponzív chatfelületet szemantikus HTML segítségével
Megvalósítottál modern JavaScriptet async/await és osztály-alapú architektú
Porttovábbítás az alkalmazások teszteléséhez

Amit a Codespaces nyújt:

Megszünteti a helyi környezet beállításával és konfigurációjával kapcsolatos problémákat
Biztosít egységes fejlesztési környezetet különböző eszközökön
Tartalmaz előre konfigurált eszközöket és bővítményeket webfejlesztéshez
Kínál zökkenőmentes integrációt a GitHubbal verziókezeléshez és együttműködéshez

🚀 Profi tipp: A Codespaces tökéletes AI alkalmazások tanulásához és prototípus készítéséhez, mivel automatikusan kezeli az összetett környezet beállítását, így Ön a fejlesztésre és tanulásra koncentrálhat ahelyett, hogy a konfigurációs problémákkal foglalkozna.

Felelősség kizárása:
Ez a dokumentum az AI fordítási szolgáltatás Co-op Translator segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Fontos információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.

73 KiB Raw Blame History Unescape Escape

Építs egy Chat Asszisztenst AI-val

Az AI megértése: A rejtélytől a mesteri szintig

Mi is az a "Generatív AI" valójában?

Hogyan tanulnak az AI modellek (Egyszerű verzió)

Miért GitHub Modellek?

Python backend integráció beállítása

Az alap implementáció megértése

Üzenet szerepek megértése: Az AI beszélgetési keretrendszer

AI paraméterek megértése: A válasz viselkedésének finomhangolása

Hőmérséklet (0.0-tól 2.0-ig): A kreativitás szabályozója

Max Tokens (1-től 4096+-ig): A válasz hosszának szabályozója

Top_p (0.0-tól 1.0-ig): A fókusz paraméter

Mindezt összefoglalva: Paraméter kombinációk különböző felhasználási esetekhez

A rendszerüzenetek varázsa: Az AI személyiségének programozása

Miért olyan erőteljesek a rendszerüzenetek?

Hatékony rendszerüzenetek megalkotása: Művészet és tudomány

A kérés-válasz folyamat megértése

Az API architektúra megértése

A FastAPI alkalmazás létrehozása

A CORS megértése: A web biztonsági őre

Mi az a CORS, és miért létezik?

CORS a fejlesztési környezetben

CORS biztonság: Fejlesztés vs. Éles környezet

Gyakori CORS helyzetek és megoldások

Hibakezelés és validáció

A backend beállítása és futtatása

Python környezet beállítása

Környezeti konfiguráció: Titkok biztonságban tartása

Mik azok a környezeti változók?

Miért fontosak a környezeti változók

Környezeti fájl létrehozása

GitHub személyes hozzáférési token létrehozása

Környezeti változók betöltése Pythonban

Git biztonság: A .gitignore fájl

Különböző környezetek, különböző titkok

A fejlesztői szerver indítása: A FastAPI életre keltése

A FastAPI

Gyakori indítási problémák elhárítása

Fejlesztési legjobb gyakorlatok

GitHub Codespaces konfigurálása: Felhőalapú fejlesztés egyszerűen

A Codespaces hálózatának megértése

Lépésről lépésre Codespaces konfiguráció

A Codespace URL-ek megértése

A Codespace beállítás tesztelése

Codespaces vs helyi fejlesztés

Codespace fejlesztési tippek

A frontend chat felület létrehozása: ahol az emberek találkoznak az AI-val

A modern frontend architektúra megértése

A frontend fejlesztés három pillére

Miért fontos a modern JavaScript architektúra?

Projekt struktúra beállítása

Az HTML alapok építése: Szemantikus struktúra az akadálymentességért

Dokumentum struktúra

Szemantikus elemek

Akadálymentességi funkciók

CSS és JavaScript integráció

Interaktív JavaScript hozzáadása: Modern webalkalmazás logika

A modern JavaScript architektúra megértése

A chatfelület stílusának kialakítása

A backend URL konfigurálása

Tesztelés és telepítés

Helyi tesztelési munkafolyamat

Gyakori problémák elhárítása

GitHub Copilot Agent kihívás 🚀

Feladat: Építsd meg saját AI asszisztensedet

Projektkövetelmények

Alapvető megvalósítási feladatok

Fejlesztési ötletek (opcionális)

Tesztelés és dokumentáció

Beküldési irányelvek

Megoldás

Bónusz kihívások

Személyiség testreszabása

Frontend fejlesztések

Haladó AI integráció

Összegzés és következő lépések

Amit elértél

73 KiB

Raw Blame History Unescape Escape