83 KiB

Raw Blame History Unescape Escape

Vytvorenie chatového asistenta s AI

Pamätáte si na Star Trek, keď posádka neformálne komunikovala s počítačom lode, kládla mu zložité otázky a dostávala premyslené odpovede? To, čo sa v 60. rokoch zdalo ako čistá vedecká fikcia, je teraz niečo, čo môžete vytvoriť pomocou webových technológií, ktoré už poznáte.

V tejto lekcii vytvoríme AI chatového asistenta pomocou HTML, CSS, JavaScriptu a niektorých backendových integrácií. Objavíte, ako môžu rovnaké zručnosti, ktoré ste sa učili, spojiť sa s výkonnými AI službami, ktoré dokážu pochopiť kontext a generovať zmysluplné odpovede.

Predstavte si AI ako prístup k obrovskej knižnici, ktorá nielenže dokáže nájsť informácie, ale aj ich syntetizovať do zrozumiteľných odpovedí prispôsobených vašim konkrétnym otázkam. Namiesto prehľadávania tisícov stránok dostanete priame, kontextové odpovede.

Integrácia prebieha prostredníctvom známych webových technológií, ktoré spolupracujú. HTML vytvára chatovacie rozhranie, CSS sa stará o vizuálny dizajn, JavaScript riadi interakcie používateľa a backendové API všetko spája s AI službami. Je to podobné ako rôzne sekcie orchestra, ktoré spolupracujú na vytvorení symfónie.

V podstate budujeme most medzi prirodzenou ľudskou komunikáciou a strojovým spracovaním. Naučíte sa technickú implementáciu integrácie AI služieb a dizajnové vzory, ktoré robia interakcie intuitívnymi.

Na konci tejto lekcie bude integrácia AI menej záhadná a viac ako ďalšie API, s ktorým môžete pracovať. Pochopíte základné vzory, ktoré poháňajú aplikácie ako ChatGPT a Claude, pričom využijete rovnaké princípy webového vývoja, ktoré ste sa učili.

Takto bude vyzerať váš hotový projekt:

Pochopenie AI: Od tajomstva k majstrovstvu

Predtým, než sa pustíme do kódu, poďme pochopiť, s čím pracujeme. Ak ste už používali API, poznáte základný vzor: pošlite požiadavku, dostanete odpoveď.

AI API fungujú podobne, ale namiesto získavania preduložených údajov z databázy generujú nové odpovede na základe vzorov naučených z obrovského množstva textu. Predstavte si to ako rozdiel medzi katalógovým systémom knižnice a znalým knihovníkom, ktorý dokáže syntetizovať informácie z viacerých zdrojov.

Čo vlastne znamená "Generatívna AI"?

Predstavte si, ako Rosettská doska umožnila vedcom pochopiť egyptské hieroglyfy tým, že našli vzory medzi známymi a neznámymi jazykmi. Modely AI fungujú podobne – nachádzajú vzory v obrovskom množstve textu, aby pochopili, ako jazyk funguje, a potom tieto vzory využívajú na generovanie vhodných odpovedí na nové otázky.

Jednoduché porovnanie:

Tradičná databáza: Ako žiadosť o rodný list – vždy dostanete ten istý dokument
Vyhľadávač: Ako žiadosť knihovníkovi o knihy o mačkách – ukáže vám, čo je dostupné
Generatívna AI: Ako otázka znalému priateľovi o mačkách – povie vám zaujímavé veci vlastnými slovami, prispôsobené tomu, čo chcete vedieť

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

Ako sa modely AI učia (jednoduchá verzia)

Modely AI sa učia prostredníctvom vystavenia obrovským množstvám textov z kníh, článkov a konverzácií. Prostredníctvom tohto procesu identifikujú vzory v:

Štruktúre myšlienok v písomnej komunikácii
Kombináciách slov, ktoré sa často vyskytujú spolu
Typickom priebehu konverzácií
Kontextových rozdieloch medzi formálnou a neformálnou komunikáciou

Je to podobné ako dekódovanie starovekých jazykov archeológmi: analyzujú tisíce príkladov, aby pochopili gramatiku, slovnú zásobu a kultúrny kontext, a nakoniec dokážu interpretovať nové texty pomocou naučených vzorov.

Prečo GitHub Models?

Používame GitHub Models z praktického dôvodu – poskytuje nám prístup k AI na podnikovej úrovni bez nutnosti nastavovať vlastnú AI infraštruktúru (čo, verte mi, teraz nechcete robiť!). Je to v podstate "AI ako služba" a najlepšie na tom je, že začať je zadarmo, takže môžete experimentovať bez obáv z vysokých nákladov.

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

Použijeme GitHub Models na našu backendovú integráciu, ktorá poskytuje prístup k profesionálnym AI schopnostiam prostredníctvom rozhrania priateľského pre vývojárov. GitHub Models Playground slúži ako testovacie prostredie, kde môžete experimentovať s rôznymi AI modelmi a pochopiť ich schopnosti pred ich implementáciou do kódu.

Prečo je playground taký užitočný:

Vyskúšajte rôzne AI modely ako GPT-4o-mini, Claude a ďalšie (všetko zadarmo!)
Otestujte svoje nápady a otázky predtým, než napíšete akýkoľvek kód
Získajte hotové útržky kódu vo vašom obľúbenom programovacom jazyku
Upravte nastavenia ako úroveň kreativity a dĺžku odpovede, aby ste videli, ako ovplyvňujú výstup

Keď sa trochu pohráte, stačí kliknúť na kartu "Code" a vybrať si programovací jazyk, aby ste získali implementačný kód, ktorý potrebujete.

Nastavenie backendovej integrácie v Pythone

Teraz implementujeme integráciu AI pomocou Pythonu. Python je vynikajúci pre AI aplikácie vďaka svojej jednoduchej syntaxe a výkonným knižniciam. Začneme s kódom z GitHub Models playgroundu a potom ho upravíme na opakovane použiteľnú funkciu pripravenú na produkciu.

Pochopenie základnej implementácie

Keď si stiahnete Python kód z playgroundu, dostanete niečo, čo vyzerá takto. Nebojte sa, ak sa vám to na prvý pohľad zdá veľa – prejdeme si to krok za krokom:

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

Čo sa deje v tomto kóde:

Importujeme nástroje, ktoré potrebujeme: os na čítanie environmentálnych premenných a OpenAI na komunikáciu s AI
Nastavujeme klienta OpenAI, aby smeroval na servery GitHubu namiesto priamo na OpenAI
Autentifikujeme sa pomocou špeciálneho GitHub tokenu (o tom viac neskôr!)
Štruktúrujeme našu konverzáciu s rôznymi "rolami" – niečo ako nastavenie scény pre divadelnú hru
Posielame našu požiadavku na AI s niektorými parametrami jemného doladenia
Extrahujeme skutočný text odpovede zo všetkých údajov, ktoré sa vrátia

Pochopenie rolí správ: Rámec AI konverzácie

Konverzácie s AI používajú špecifickú štruktúru s rôznymi "rolami", ktoré majú odlišné účely:

messages=[
    {
        "role": "system",
        "content": "You are a helpful assistant who explains things simply."
    },
    {
        "role": "user", 
        "content": "What is machine learning?"
    }
]

Predstavte si to ako réžiu divadelnej hry:

Rola systému: Ako pokyny pre herca – hovorí AI, ako sa má správať, akú osobnosť má mať a ako má odpovedať
Rola používateľa: Skutočná otázka alebo správa od osoby používajúcej vašu aplikáciu
Rola asistenta: Odpoveď AI (tú neposielate, ale objaví sa v histórii konverzácie)

Analógia zo skutočného života: Predstavte si, že predstavujete priateľa niekomu na večierku:

Správa systému: "Toto je moja priateľka Sarah, je lekárka, ktorá vie skvele vysvetliť medicínske koncepty jednoduchým spôsobom"
Správa používateľa: "Môžete mi vysvetliť, ako fungujú vakcíny?"
Odpoveď asistenta: Sarah odpovedá ako priateľská lekárka, nie ako právnička alebo kuchárka

Pochopenie AI parametrov: Jemné doladenie správania odpovedí

Číselné parametre v API volaniach AI kontrolujú, ako model generuje odpovede. Tieto nastavenia vám umožňujú upraviť správanie AI pre rôzne použitia:

Teplota (0,0 až 2,0): Ovládanie kreativity

Čo robí: Kontroluje, ako kreatívne alebo predvídateľné budú odpovede AI.

Predstavte si to ako úroveň improvizácie jazzového hudobníka:

Teplota = 0,1: Hranie presne tej istej melódie vždy (veľmi predvídateľné)
Teplota = 0,7: Pridanie niekoľkých vkusných variácií pri zachovaní rozpoznateľnosti (vyvážená kreativita)
Teplota = 1,5: Plná experimentálna improvizácia s neočakávanými zmenami (veľmi nepredvídateľné)

# 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 až 4096+): Ovládanie dĺžky odpovede

Čo robí: Nastavuje limit na dĺžku odpovede AI.

Predstavte si tokeny ako približne ekvivalentné slovám (asi 1 token = 0,75 slova v angličtine):

max_tokens=50: Krátke a výstižné (ako textová správa)
max_tokens=500: Pekný odstavec alebo dva
max_tokens=2000: Podrobný výklad s príkladmi

# 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 až 1,0): Parameter zamerania

Čo robí: Kontroluje, ako sa AI sústredí na najpravdepodobnejšie odpovede.

Predstavte si AI s obrovskou slovnou zásobou, zoradenou podľa pravdepodobnosti každého slova:

top_p=0,1: Zvažuje iba 10% najpravdepodobnejších slov (veľmi zamerané)
top_p=0,9: Zvažuje 90% možných slov (viac kreatívne)
top_p=1,0: Zvažuje všetko (maximálna rozmanitosť)

Napríklad: Ak sa opýtate "Obloha je zvyčajne..."

Nízke top_p: Takmer určite odpovie "modrá"
Vysoké top_p: Môže odpovedať "modrá", "zamračená", "rozľahlá", "menlivá", "krásna" atď.

Spojenie všetkého: Kombinácie parametrov pre rôzne použitia

# 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
}

Prečo na týchto parametroch záleží: Rôzne aplikácie potrebujú rôzne typy odpovedí. Chatbot pre zákaznícku podporu by mal byť konzistentný a faktický (nízka teplota), zatiaľ čo kreatívny asistent pre písanie by mal byť imaginatívny a rozmanitý (vysoká teplota). Pochopenie týchto parametrov vám dáva kontrolu nad osobnosťou a štýlom odpovedí AI.


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

Pochopenie tejto vylepšenej funkcie:

Prijíma dva parametre: používateľský podnet a voliteľnú systémovú správu
Poskytuje predvolenú systémovú správu pre všeobecné správanie asistenta
Používa správne typové náznaky Pythonu pre lepšiu dokumentáciu kódu
Obsahuje podrobný docstring vysvetľujúci účel a parametre funkcie
Vracia iba obsah odpovede, čo uľahčuje jej použitie v našom webovom API
Zachováva rovnaké parametre modelu pre konzistentné správanie AI

Magia systémových podnetov: Programovanie osobnosti AI

Ak parametre kontrolujú, ako AI myslí, systémové podnety kontrolujú, kým si AI myslí, že je. Toto je úprimne jedna z najzaujímavejších častí práce s AI – v podstate dávate AI kompletnú osobnosť, úroveň odbornosti a štýl komunikácie.

Predstavte si systémové podnety ako obsadzovanie rôznych hercov do rôznych rolí: Namiesto jedného generického asistenta môžete vytvoriť špecializovaných expertov pre rôzne situácie. Potrebujete trpezlivého učiteľa? Kreatívneho partnera na brainstorming? Rázneho obchodného poradcu? Stačí zmeniť systémový podnet!

Prečo sú systémové podnety také silné

Tu je fascinujúca časť: Modely AI boli trénované na nespočetných konverzáciách, kde ľudia prijímajú rôzne role a úrovne odbornosti. Keď dáte AI konkrétnu rolu, je to ako zapnutie prepínača, ktorý aktivuje všetky tieto naučené vzory.

Je to ako metóda herectva pre AI: Povedzte hercovi "si múdry starý profesor" a sledujte, ako automaticky upraví svoje držanie tela, slovnú zásobu a správanie. AI robí niečo pozoruhodne podobné s jazykovými vzormi.

Tvorba efektívnych systémových podnetov: Umenie a veda

Anatómia skvelého systémového podnetu:

Rola/Identita: Kto je AI?
Odbornosť: Čo vie?
Štýl komunikácie: Ako hovorí?
Konkrétne pokyny: Na čo by sa mala zamerať?

# ❌ Vague system prompt
"You are helpful."

# ✅ Detailed, effective system prompt
"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."

Príklady systémových podnetov s kontextom

Pozrime sa, ako rôzne systémové podnety vytvárajú úplne odlišné osobnosti AI:

# Example 1: The Patient Teacher
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.
"""

# Example 2: The Creative Collaborator  
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.
"""

# Example 3: The Strategic Business Advisor
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.
"""

Ukážka systémových podnetov v praxi

Otestujme tú istú otázku s rôznymi systémovými podnetmi, aby sme videli dramatické rozdiely:

Otázka: "Ako mám riešiť autentifikáciu používateľov vo svojej webovej aplikácii?"

# With teacher prompt:
teacher_response = call_llm(
    "How do I handle user authentication in my web app?",
    teacher_prompt
)
# Typical response: "Great question! Let's break authentication down into simple steps. 
# Think of it like a nightclub bouncer checking IDs..."

# With business prompt:
business_response = call_llm(
    "How do I handle user authentication in my web app?", 
    business_prompt
)
# Typical response: "From a strategic perspective, authentication is crucial for user 
# trust and regulatory compliance. Let me outline a framework considering security, 
# user experience, and scalability..."

Pokročilé techniky systémových podnetov

1. Nastavenie kontextu: Poskytnite AI základné informácie

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. Formátovanie výstupu: Povedzte AI, ako má štruktúrovať odpovede

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. Nastavenie obmedzení: Definujte, čo AI nemá robiť

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.
"""

Prečo je to dôležité pre váš chatový asistent

Pochopenie systémových podnetov vám dáva neuveriteľnú moc vytvárať špecializovaných AI asistentov:

Chatbot pre zákaznícku podporu: Nápomocný, trpezlivý, oboznámený s politikami
Učiteľ: Povzbudzujúci, krok za krokom, kontroluje pochopenie
Kreatívny partner: Imaginatívny, rozvíja nápady, pýta sa "čo ak?"
Technický expert: Presný, detailný, zameraný na bezpečnosť

**Kľúčový Tu je dôvod, prečo je FastAPI ideálny pre to, čo budujeme:

Asynchrónne predvolene: Dokáže spracovať viacero požiadaviek na AI naraz bez toho, aby sa zasekol
Automatická dokumentácia: Navštívte /docs a získajte krásnu, interaktívnu stránku API dokumentácie zadarmo
Vstavaná validácia: Zachytí chyby skôr, než spôsobia problémy
Extrémne rýchly: Jeden z najrýchlejších Python frameworkov
Moderný Python: Využíva všetky najnovšie a najlepšie funkcie Pythonu

A tu je dôvod, prečo vôbec potrebujeme backend:

Bezpečnosť: Váš API kľúč pre AI je ako heslo – ak ho vložíte do frontendového JavaScriptu, ktokoľvek, kto si pozrie zdrojový kód vašej webovej stránky, ho môže ukradnúť a použiť vaše AI kredity. Backend uchováva citlivé údaje bezpečne.

Obmedzenie rýchlosti a kontrola: Backend vám umožňuje kontrolovať, ako často môžu používatelia posielať požiadavky, implementovať autentifikáciu používateľov a pridávať logovanie na sledovanie používania.

Spracovanie dát: Možno budete chcieť ukladať konverzácie, filtrovať nevhodný obsah alebo kombinovať viaceré AI služby. Backend je miesto, kde táto logika žije.

Architektúra pripomína model klient-server:

Frontend: Vrstva používateľského rozhrania pre interakciu
Backend API: Vrstva spracovania požiadaviek a smerovania
AI služba: Externé výpočty a generovanie odpovedí
Environment Variables: Bezpečné uloženie konfigurácie a prihlasovacích údajov

Pochopenie toku požiadaviek a odpovedí

Pozrime sa, čo sa stane, keď používateľ pošle správu:

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

Pochopenie jednotlivých krokov:

Interakcia používateľa: Osoba píše do rozhrania chatu
Spracovanie na frontende: JavaScript zachytí vstup a formátuje ho ako JSON
Validácia API: FastAPI automaticky validuje požiadavku pomocou Pydantic modelov
Integrácia AI: Backend pridá kontext (systémový prompt) a zavolá AI službu
Spracovanie odpovede: API prijme odpoveď od AI a môže ju upraviť, ak je to potrebné
Zobrazenie na frontende: JavaScript zobrazí odpoveď v rozhraní chatu

Pochopenie architektúry API

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?"}

Vytvorenie aplikácie FastAPI

Postupne si vytvoríme naše API. Vytvorte súbor s názvom api.py s nasledujúcim kódom pre FastAPI:

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

Pochopenie implementácie FastAPI:

Importuje FastAPI pre moderné funkcie webového frameworku a Pydantic pre validáciu dát
Vytvára automatickú dokumentáciu API (dostupnú na /docs po spustení servera)
Povoľuje CORS middleware, aby umožnil požiadavky z frontendu z rôznych zdrojov
Definuje Pydantic modely pre automatickú validáciu požiadaviek/odpovedí a dokumentáciu
Používa asynchrónne endpointy pre lepší výkon pri súbežných požiadavkách
Implementuje správne HTTP status kódy a spracovanie chýb pomocou HTTPException
Zahŕňa štruktúrované logovanie pre monitorovanie a ladenie
Poskytuje endpoint na kontrolu stavu služby

Kľúčové výhody FastAPI oproti tradičným frameworkom:

Automatická validácia: Pydantic modely zabezpečujú integritu dát pred ich spracovaním
Interaktívna dokumentácia: Navštívte /docs pre automaticky generovanú, testovateľnú dokumentáciu API
Typová bezpečnosť: Typové anotácie v Pythone zabraňujú chybám počas behu a zlepšujú kvalitu kódu
Podpora asynchrónnosti: Spracovanie viacerých požiadaviek na AI súčasne bez blokovania
Výkon: Výrazne rýchlejšie spracovanie požiadaviek pre aplikácie v reálnom čase

Pochopenie CORS: Strážca bezpečnosti webu

CORS (Cross-Origin Resource Sharing) je ako strážca bezpečnosti v budove, ktorý kontroluje, či sú návštevníci oprávnení vstúpiť. Poďme pochopiť, prečo je to dôležité a ako to ovplyvňuje vašu aplikáciu.

Čo je CORS a prečo existuje?

Problém: Predstavte si, že by akákoľvek webová stránka mohla posielať požiadavky na webovú stránku vašej banky vo vašom mene bez vášho povolenia. To by bola bezpečnostná nočná mora! Prehliadače tomu predchádzajú predvoleným nastavením "Same-Origin Policy."

Same-Origin Policy: Prehliadače umožňujú webovým stránkam posielať požiadavky iba na rovnakú doménu, port a protokol, z ktorých boli načítané.

Analógia zo skutočného sveta: Je to ako bezpečnosť v bytovom dome – iba obyvatelia (rovnaký pôvod) môžu predvolene vstúpiť do budovy. Ak chcete, aby vás navštívil priateľ (iný pôvod), musíte výslovne povedať bezpečnosti, že je to v poriadku.

CORS vo vašom vývojovom prostredí

Počas vývoja váš frontend a backend bežia na rôznych portoch:

Frontend: http://localhost:3000 (alebo file:// ak otvárate HTML priamo)
Backend: http://localhost:5000

Tieto sa považujú za "rôzne pôvody," aj keď sú na rovnakom počítači!

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"

Čo CORS konfigurácia robí v praxi:

Pridáva špeciálne HTTP hlavičky do odpovedí API, ktoré hovoria prehliadačom "táto požiadavka z iného pôvodu je povolená"
Spracováva "preflight" požiadavky (prehliadače niekedy kontrolujú povolenia pred odoslaním skutočnej požiadavky)
Zabraňuje obávanému chybe "blocked by CORS policy" vo vašej konzole prehliadača

CORS bezpečnosť: Vývoj vs produkcia

# 🚨 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"])

Prečo na tom záleží: Vo vývoji je CORS(app) ako nechať odomknuté dvere – pohodlné, ale nie bezpečné. V produkcii chcete presne špecifikovať, ktoré webové stránky môžu komunikovať s vaším API.

Bežné scenáre CORS a riešenia

Scenár	Problém	Riešenie
Lokálny vývoj	Frontend nemôže dosiahnuť backend	Pridajte CORSMiddleware do FastAPI
GitHub Pages + Heroku	Nasadený frontend nemôže dosiahnuť API	Pridajte URL GitHub Pages do CORS pôvodov
Vlastná doména	CORS chyby v produkcii	Aktualizujte CORS pôvody tak, aby zodpovedali vašej doméne
Mobilná aplikácia	Aplikácia nemôže dosiahnuť webové API	Pridajte doménu aplikácie alebo opatrne použite `*`

Tip: Môžete skontrolovať CORS hlavičky v nástrojoch pre vývojárov prehliadača v záložke Sieť. Hľadajte hlavičky ako Access-Control-Allow-Origin v odpovedi.

Spracovanie chýb a validácia

Všimnite si, ako naše API zahŕňa správne spracovanie chýb:

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

Kľúčové princípy validácie:

Kontroluje požadované polia pred spracovaním požiadaviek
Vracia zmysluplné chybové správy vo formáte JSON
Používa vhodné HTTP status kódy (400 pre zlé požiadavky)
Poskytuje jasnú spätnú väzbu, ktorá pomáha frontendovým vývojárom odstraňovať problémy

Nastavenie a spustenie vášho backendu

Teraz, keď máme pripravenú integráciu AI a server FastAPI, poďme všetko spustiť. Proces nastavenia zahŕňa inštaláciu Python závislostí, konfiguráciu environmentálnych premenných a spustenie vášho vývojového servera.

Nastavenie Python prostredia

Poďme nastaviť vaše Python vývojové prostredie. Virtuálne prostredia sú ako oddelené priestory – každý projekt má svoj vlastný izolovaný priestor so špecifickými nástrojmi a závislosťami, čo zabraňuje konfliktom medzi rôznymi projektmi.

# 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

Čo sme práve urobili:

Vytvorili sme vlastnú malú Python bublinu, kde môžeme inštalovať balíčky bez ovplyvnenia čohokoľvek iného
Aktivovali sme ju, aby náš terminál vedel používať toto konkrétne prostredie
Nainštalovali sme základné veci: OpenAI pre AI, FastAPI pre naše webové API, Uvicorn na jeho spustenie a python-dotenv na bezpečné spravovanie tajných údajov

Kľúčové závislosti vysvetlené:

FastAPI: Moderný, rýchly webový framework s automatickou dokumentáciou API
Uvicorn: Extrémne rýchly ASGI server, ktorý spúšťa aplikácie FastAPI
OpenAI: Oficiálna knižnica pre GitHub Models a integráciu OpenAI API
python-dotenv: Bezpečné načítanie environmentálnych premenných zo súborov .env

Konfigurácia prostredia: Udržanie tajomstiev v bezpečí

Predtým, než spustíme naše API, musíme sa porozprávať o jednej z najdôležitejších lekcií vo webovom vývoji: ako udržať vaše tajomstvá skutočne tajné. Environmentálne premenné sú ako bezpečný trezor, ku ktorému má prístup iba vaša aplikácia.

Čo sú environmentálne premenné?

Predstavte si environmentálne premenné ako bezpečnostnú schránku – vložíte tam svoje cennosti a iba vy (a vaša aplikácia) máte kľúč na ich získanie. Namiesto toho, aby ste písali citlivé informácie priamo do vášho kódu (kde ich môže vidieť doslova každý), ich bezpečne uložíte do prostredia.

Tu je rozdiel:

Nesprávny spôsob: Napísať svoje heslo na lepiaci papierik a prilepiť ho na monitor
Správny spôsob: Uchovávať svoje heslo v bezpečnom správcovi hesiel, ku ktorému máte prístup iba vy

Prečo sú environmentálne premenné dôležité

# 🚨 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"
)

Čo sa stane, keď tvrdohlavo zakódujete tajomstvá:

Zverejnenie vo verziovom systéme: Každý, kto má prístup k vášmu Git repozitáru, vidí váš API kľúč
Verejné repozitáre: Ak ich nahráte na GitHub, váš kľúč je viditeľný pre celý internet
Zdieľanie v tíme: Ostatní vývojári pracujúci na vašom projekte získajú prístup k vášmu osobnému API kľúču
Bezpečnostné porušenia: Ak niekto ukradne váš API kľúč, môže použiť vaše AI kredity

Nastavenie súboru prostredia

Vytvorte súbor .env vo vašom backendovom adresári. Tento súbor uchováva vaše tajomstvá lokálne:

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

Pochopenie súboru .env:

Jedno tajomstvo na riadok vo formáte KEY=value
Žiadne medzery okolo znamienka rovnosti
Nie sú potrebné úvodzovky okolo hodnôt (zvyčajne)
Komentáre začínajú #

Vytvorenie osobného prístupového tokenu GitHub

Váš GitHub token je ako špeciálne heslo, ktoré dáva vašej aplikácii povolenie používať AI služby GitHub:

Krok za krokom vytvorenie tokenu:

Prejdite na GitHub Nastavenia → Nastavenia vývojára → Osobné prístupové tokeny → Tokeny (klasické)
Kliknite na "Vytvoriť nový token (klasický)"
Nastavte expiráciu (30 dní na testovanie, dlhšie na produkciu)
Vyberte oprávnenia: Zaškrtnite "repo" a akékoľvek ďalšie potrebné povolenia
Vytvorte token a okamžite ho skopírujte (neskôr ho už neuvidíte!)
Vložte ho do vášho .env súboru

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

Načítanie environmentálnych premenných v Pythone

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

Čo tento kód robí:

Načíta váš .env súbor a sprístupní premenné pre Python
Skontroluje, či existuje požadovaný token (dobré spracovanie chýb!)
Vyvolá jasnú chybu, ak token chýba
Používa token bezpečne bez jeho zverejnenia v kóde

Git bezpečnosť: Súbor .gitignore

Váš .gitignore súbor hovorí Git-u, ktoré súbory nikdy nesledovať alebo nahrávať:

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

Prečo je to dôležité: Keď pridáte .env do .gitignore, Git bude ignorovať váš environmentálny súbor, čím zabránite jeho náhodnému nahratiu na GitHub.

Rôzne prostredia, rôzne tajomstvá

Profesionálne aplikácie používajú rôzne API kľúče pre rôzne prostredia:

# .env.development
GITHUB_TOKEN=your_development_token
DEBUG=True

# .env.production  
GITHUB_TOKEN=your_production_token
DEBUG=False

Prečo na tom záleží: Nechcete, aby vaše experimenty vo vývoji ovplyvnili váš produkčný AI kvótu, a chcete rôzne úrovne bezpečnosti pre rôzne prostredia.

Spustenie vášho vývojového servera: Oživenie vášho FastAPI

Teraz prichádza vzrušujúci moment – spustenie vášho vývojového servera FastAPI a sledovanie, ako vaša AI integrácia ožíva! FastAPI používa Uvicorn, extrémne rýchly ASGI server, ktorý je špeciálne navrhnutý pre asynchrónne Python aplikácie.

Pochopenie procesu spustenia servera FastAPI

# Method 1: Direct Python execution (includes auto-reload)
python api.py

# Method 2: Using Uvicorn directly (more control)
uvicorn api:app --host 0.0.0.0 --port 5000 --reload

Keď spustíte tento príkaz, tu je, čo sa deje v zákulisí:

1. Python načíta vašu aplikáciu FastAPI:

Importuje všetky potrebné knižnice (FastAPI, Pydantic, OpenAI, atď.)
Načíta environmentálne premenné z vášho .env súboru
Vytvorí inštanciu aplikácie FastAPI s automatickou dokumentáciou

2. Uvicorn konfiguruje ASGI server:

Pripojí sa na port 5000 s možnosťami asynchrónneho spracovania požiadaviek
Nastaví smerovanie požiadaviek s automatickou validáciou
Povoľuje automatické obnovenie počas vývoja (reštart pri zmene súborov)
Generuje interaktívnu dokumentáciu API

3. Server začne počúvať:

Váš terminál ukáže: INFO: Uvicorn running on http://0.0.0.0:5000
Server dokáže spracovať viacero súbežných požiadaviek na AI
Vaše API je pripravené s automatickou dokumentáciou na http://localhost:5000/docs

Čo by ste mali vidieť, keď všetko funguje

$ 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.

Pochopenie výstupu 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)

Riešenie bežných problémov pri spustení

Chybová správa	Čo znamená	Ako opraviť
`ModuleNotFoundError: No module named 'fastapi'`	FastAPI nie je nainštalovaný	Spustite `pip install fastapi uvicorn` vo vašom virtuálnom prostredí
`ModuleNotFoundError: No module named 'uvicorn'`	ASGI server nie je nainštalovaný	Spustite `pip install uvicorn` vo vašom virtuálnom prostredí
`KeyError: 'GITHUB_TOKEN'`	Premenná prostredia nebola nájdená	Skontrolujte váš súbor `.env` a volanie `load_dotenv()`
`Address already in use`	Port 5000 je obsadený	Ukončite iné procesy používajúce port 5000 alebo zmeňte port
`ValidationError`	Dáta požiadavky nezodpovedajú modelu Pydantic	Skontrolujte, či formát vašej požiadavky zodpovedá očakávanej schéme
`HTTPException 422`	Nepoužiteľná entita	Validácia požiadavky zlyhala, skontrolujte `/docs` pre správny formát
`OpenAI API error`	Autentifikácia AI služby zlyhala	Overte, či je váš GitHub token správny a má potrebné povolenia

Najlepšie praktiky pri vývoji

Automatické načítanie zmien: FastAPI s Uvicorn poskytuje automatické načítanie zmien pri ukladaní zmien v súboroch Pythonu. To znamená, že môžete upravovať kód a okamžite ho testovať bez manuálneho reštartovania.

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

Logovanie pre vývoj: Pridajte logovanie, aby ste pochopili, čo sa deje:

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

Prečo logovanie pomáha: Počas vývoja môžete presne vidieť, aké požiadavky prichádzajú, aké odpovede poskytuje AI a kde sa vyskytujú chyby. To výrazne urýchľuje proces ladenia.

Konfigurácia pre GitHub Codespaces: Jednoduchý vývoj v cloude

GitHub Codespaces je ako mať výkonný vývojový počítač v cloude, ku ktorému máte prístup z akéhokoľvek prehliadača. Ak pracujete v Codespaces, existuje niekoľko dodatočných krokov, aby bol váš backend prístupný pre frontend.

Pochopenie siete Codespaces

V lokálnom vývojovom prostredí všetko beží na rovnakom počítači:

Backend: http://localhost:5000
Frontend: http://localhost:3000 (alebo file://)

V Codespaces vaše vývojové prostredie beží na serveroch GitHubu, takže "localhost" má iný význam. GitHub automaticky vytvára verejné URL pre vaše služby, ale musíte ich správne nakonfigurovať.

Krok za krokom konfigurácia Codespaces

1. Spustite váš backend server:

cd backend
python api.py

Uvidíte známe štartovacie hlásenie FastAPI/Uvicorn, ale všimnite si, že beží vo vnútri prostredia Codespace.

2. Konfigurujte viditeľnosť portu:

Nájdite kartu "Ports" v dolnom paneli VS Code
Nájdite port 5000 v zozname
Kliknite pravým tlačidlom na port 5000
Vyberte "Port Visibility" → "Public"

Prečo ho sprístupniť verejne? Štandardne sú porty Codespace súkromné (prístupné iba vám). Sprístupnenie verejne umožňuje vášmu frontendu (ktorý beží v prehliadači) komunikovať s backendom.

3. Získajte vaše verejné URL: Po sprístupnení portu verejne uvidíte URL ako:

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

4. Aktualizujte konfiguráciu frontendu:

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

Pochopenie URL Codespace

URL Codespace majú predvídateľný vzor:

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

Rozdelenie:

codespace-name: Jedinečný identifikátor pre váš Codespace (zvyčajne obsahuje vaše používateľské meno)
port: Číslo portu, na ktorom beží vaša služba (5000 pre našu aplikáciu FastAPI)
app.github.dev: Doména GitHubu pre aplikácie Codespace

Testovanie nastavenia Codespace

1. Testujte backend priamo: Otvorte vaše verejné URL v novom okne prehliadača. Mali by ste vidieť:

Welcome to the AI Chat API. Send POST requests to /hello with JSON payload containing 'message' field.

2. Testujte pomocou vývojárskych nástrojov prehliadača:

// 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 Lokálny vývoj

Aspekt	Lokálny vývoj	GitHub Codespaces
Čas nastavenia	Dlhší (inštalácia Pythonu, závislostí)	Okamžitý (predkonfigurované prostredie)
Prístup k URL	`http://localhost:5000`	`https://xyz-5000.app.github.dev`
Konfigurácia portov	Automatická	Manuálna (sprístupnenie portov verejne)
Ukladanie súborov	Lokálny počítač	GitHub repozitár
Spolupráca	Ťažké zdieľanie prostredia	Jednoduché zdieľanie odkazu na Codespace
Závislosť na internete	Iba pre volania AI API	Potrebná pre všetko

Tipy pre vývoj v Codespaces

Premenné prostredia v Codespaces: Váš súbor .env funguje rovnako v Codespaces, ale premenné prostredia môžete nastaviť aj priamo v Codespace:

# 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

Správa portov:

Codespaces automaticky detekuje, keď vaša aplikácia začne počúvať na porte
Môžete súčasne presmerovať viacero portov (užitočné, ak neskôr pridáte databázu)
Porty zostanú prístupné, pokiaľ váš Codespace beží

Pracovný postup vývoja:

Upravte kód vo VS Code
FastAPI sa automaticky načíta (vďaka režimu reload v Uvicorn)
Okamžite testujte zmeny cez verejné URL
Uložte a odošlite zmeny, keď ste pripravení

💡 Tip: Počas vývoja si uložte záložku na URL vášho backendu Codespace. Keďže názvy Codespace sú stabilné, URL sa nezmení, pokiaľ používate ten istý Codespace.

Vytvorenie frontendového rozhrania pre chat: Miesto, kde sa stretávajú ľudia a AI

Teraz vytvoríme používateľské rozhranie – časť, ktorá určuje, ako ľudia komunikujú s vaším AI asistentom. Rovnako ako dizajn rozhrania pôvodného iPhonu, zameriavame sa na to, aby bola zložitá technológia intuitívna a prirodzená na používanie.

Pochopenie modernej frontendovej architektúry

Naše rozhranie pre chat bude tzv. "Jednostránková aplikácia" alebo SPA. Namiesto staromódneho prístupu, kde každé kliknutie načíta novú stránku, naša aplikácia sa bude aktualizovať plynulo a okamžite:

Staré webové stránky: Ako čítanie fyzickej knihy – otáčate na úplne nové stránky Naša chatovacia aplikácia: Ako používanie telefónu – všetko plynule prechádza a aktualizuje sa

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]

Tri piliere frontendového vývoja

Každá frontendová aplikácia – od jednoduchých webových stránok po komplexné aplikácie ako Discord alebo Slack – je postavená na troch základných technológiách. Myslite na ne ako na základ všetkého, čo vidíte a s čím interagujete na webe:

HTML (Štruktúra): Toto je váš základ

Určuje, aké prvky existujú (tlačidlá, textové polia, kontajnery)
Dáva obsahu význam (toto je nadpis, toto je formulár, atď.)
Vytvára základnú štruktúru, na ktorej sa všetko ostatné stavia

CSS (Prezentácia): Toto je váš interiérový dizajnér

Robí všetko krásnym (farby, písma, rozloženia)
Rieši rôzne veľkosti obrazoviek (telefón vs laptop vs tablet)
Vytvára plynulé animácie a vizuálnu spätnú väzbu

JavaScript (Správanie): Toto je váš mozog

Reaguje na to, čo používatelia robia (kliknutia, písanie, posúvanie)
Komunikuje s backendom a aktualizuje stránku
Robí všetko interaktívnym a dynamickým

Myslite na to ako na architektonický dizajn:

HTML: Štrukturálny plán (definovanie priestorov a vzťahov)
CSS: Estetický a environmentálny dizajn (vizuálny štýl a používateľská skúsenosť)
JavaScript: Mechanické systémy (funkcionalita a interaktivita)

Prečo záleží na modernej architektúre JavaScriptu

Naša chatovacia aplikácia bude používať moderné JavaScriptové vzory, ktoré uvidíte v profesionálnych aplikáciách. Pochopenie týchto konceptov vám pomôže rásť ako vývojár:

Architektúra založená na triedach: Organizujeme náš kód do tried, čo je ako vytváranie plánov pre objekty
Async/Await: Moderný spôsob, ako spracovať operácie, ktoré trvajú určitý čas (napr. volania API)
Programovanie riadené udalosťami: Naša aplikácia reaguje na akcie používateľa (kliknutia, stlačenia kláves) namiesto toho, aby bežala v slučke
Manipulácia s DOM: Dynamická aktualizácia obsahu webovej stránky na základe interakcií používateľa a odpovedí API

Nastavenie štruktúry projektu

Vytvorte frontendový adresár s touto organizovanou štruktúrou:

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

Pochopenie architektúry:

Oddelenie záležitostí medzi štruktúrou (HTML), správaním (JavaScript) a prezentáciou (CSS)
Udržiavanie jednoduchej štruktúry súborov, ktorá je ľahko navigovateľná a upraviteľná
Dodržiavanie najlepších praktík webového vývoja pre organizáciu a udržateľnosť

Vytvorenie HTML základu: Semantická štruktúra pre prístupnosť

Začnime štruktúrou HTML. Moderný webový vývoj kladie dôraz na "semantické HTML" – používanie HTML prvkov, ktoré jasne opisujú svoj účel, nielen svoj vzhľad. To robí vašu aplikáciu prístupnou pre čítačky obrazovky, vyhľadávače a iné nástroje.

Prečo záleží na semantickom HTML: Predstavte si, že opisujete svoju chatovaciu aplikáciu niekomu cez telefón. Povedali by ste "je tam hlavička s názvom, hlavná oblasť, kde sa zobrazujú konverzácie, a formulár na spodku na písanie správ." Semantické HTML používa prvky, ktoré zodpovedajú tomuto prirodzenému opisu.

Vytvorte index.html s touto premyslenou štruktúrou:

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

Pochopenie každého HTML prvku a jeho účelu:

Štruktúra dokumentu

<!DOCTYPE html>: Informuje prehliadač, že ide o moderný HTML5
<html lang="en">: Určuje jazyk stránky pre čítačky obrazovky a nástroje na preklad
<meta charset="UTF-8">: Zabezpečuje správne kódovanie znakov pre medzinárodný text
<meta name="viewport"...>: Robí stránku mobilne responzívnou kontrolou priblíženia a mierky

Semantické prvky

<header>: Jasne identifikuje hornú sekciu s názvom a popisom
<main>: Označuje primárnu obsahovú oblasť (kde prebiehajú konverzácie)
<form>: Semanticky správne pre vstup používateľa, umožňuje správnu navigáciu klávesnicou

Funkcie prístupnosti

role="log": Informuje čítačky obrazovky, že táto oblasť obsahuje chronologický záznam správ
aria-live="polite": Oznámi nové správy čítačkám obrazovky bez prerušenia
aria-label: Poskytuje popisné označenia pre ovládacie prvky formulára
required: Prehliadač overí, že používateľ zadal správu pred odoslaním

Integrácia CSS a JavaScriptu

class atribúty: Poskytujú háčiky na štýlovanie pre CSS (napr. chat-container, input-group)
id atribúty: Umožňujú JavaScriptu nájsť a manipulovať konkrétne prvky
Umiestnenie skriptu: Súbor JavaScript sa načíta na konci, aby sa najskôr načítal HTML

Prečo táto štruktúra funguje:

Logický tok: Hlavička → Hlavný obsah → Formulár na zadávanie správ zodpovedá prirodzenému poradiu čítania
Prístupné klávesnicou: Používatelia môžu prechádzať všetky interaktívne prvky pomocou klávesnice
Prívetivé pre čítačky obrazovky: Jasné orientačné body a popisy pre zrakovo postihnutých používateľov
Mobilne responzívne: Meta tag viewport umožňuje responzívny dizajn
Progresívne vylepšenie: Funguje aj v prípade, že CSS alebo JavaScript zlyhá

Pridanie interaktívneho JavaScriptu: Logika modernej webovej aplikácie

Teraz vytvoríme JavaScript, ktorý oživí naše chatovacie rozhranie. Použijeme moderné JavaScriptové vzory, ktoré sa vyskytujú v profesionálnom webovom vývoji, vrátane tried ES6, async/await a programovania riadeného udalosťami.

Pochopenie modernej JavaScriptovej architektúry

Namiesto písania procedurálneho kódu (séria funkcií, ktoré sa vykonávajú v poradí), vytvoríme architektúru založenú na triedach. Myslite na triedu ako na plán na vytvorenie objektov – podobne ako plán architekta môže byť použitý na stavbu viacerých domov.

Prečo používať triedy pre webové aplikácie?

Organizácia: Všetka súvisiaca funkcionalita je zoskupená
Znovupoužiteľnosť: Môžete vytvoriť viacero chatovacích inštancií na tej istej stránke
Udržateľnosť: Jednoduchšie ladíte a upravujete konkrétne funkcie
Profesionálny štandard: Tento vzor sa používa v frameworkoch ako React, Vue a Angular

Vytvorte app.js s týmto moderným, dobre štruktúrovaným JavaScriptom:

// app.js - Modern chat application logic

class ChatApp {
    constructor() {
        // Get references to DOM elements we'll need to manipulate
        this.messages = document.getElementById("messages");
        this.form = document.getElementById("chatForm");
        this.input = document.getElementById("messageInput");
        this.sendButton = document.getElementById("sendBtn");
        
        // Configure your backend URL here
        this.BASE_URL = "http://localhost:5000"; // Update this for your environment
        this.API_ENDPOINT = `${this.BASE_URL}/hello`;
        
        // Set up event listeners when the chat app is created
        this.initializeEventListeners();
    }
    
    initializeEventListeners() {
        // Listen for form submission (when user clicks Send or presses Enter)
        this.form.addEventListener("submit", (e) => this.handleSubmit(e));
        
        // Also listen for Enter key in the input field (better UX)
        this.input.addEventListener("keypress", (e) => {
            if (e.key === "Enter" && !e.shiftKey) {
                e.preventDefault();
                this.handleSubmit(e);
            }
        });
    }
    
    async handleSubmit(event) {
        event.preventDefault(); // Prevent form from refreshing the page
        
        const messageText = this.input.value.trim();
        if (!messageText) return; // Don't send empty messages
        
        // Provide user feedback that something is happening
        this.setLoading(true);
        
        // Add user message to chat immediately (optimistic UI)
        this.appendMessage(messageText, "user");
        
        // Clear input field so user can type next message
        this.input.value = '';
        
        try {
            // Call the AI API and wait for response
            const reply = await this.callAPI(messageText);
            
            // Add AI response to chat
            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 {
            // Re-enable the interface regardless of success or failure
            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";
    }
}

// Initialize the chat application when the page loads
document.addEventListener("DOMContentLoaded", () => {
    new ChatApp();
});

Pochopenie každého JavaScriptového konceptu

Štruktúra tried ES6:

class ChatApp {
    constructor() {
        // This runs when you create a new ChatApp instance
        // It's like the "setup" function for your chat
    }
    
    methodName() {
        // Methods are functions that belong to the class
        // They can access class properties using "this"
    }
}

Async/Await vzor:

// Old way (callback hell):
fetch(url)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

// Modern way (async/await):
try {
    const response = await fetch(url);
    const data = await response.json();
    console.log(data);
} catch (error) {
    console.error(error);
}

Programovanie riadené udalosťami: Namiesto neustáleho kontrolovania, či sa niečo stalo, "počúvame" udalosti:

// When form is submitted, run handleSubmit
this.form.addEventListener("submit", (e) => this.handleSubmit(e));

// When Enter key is pressed, also run handleSubmit
this.input.addEventListener("keypress", (e) => { /* ... */ });

Manipulácia s DOM:

// Create new elements
const messageElement = document.createElement("div");

// Modify their properties
messageElement.className = "message user";
messageElement.innerHTML = "Hello world!";

// Add to the page
this.messages.appendChild(messageElement);

Bezpečnosť a najlepšie praktiky

Prevencia XSS:

escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;  // This automatically escapes HTML
    return div.innerHTML;
}

Prečo na tom záleží: Ak používateľ napíše <script>alert('hack')</script>, táto funkcia zabezpečí, že sa zobrazí ako text, namiesto toho, aby sa vykonala ako kód.

Spracovanie chýb:

try {
    const reply = await this.callAPI(messageText);
    this.appendMessage(reply, "assistant");
} catch (error) {
    // Show user-friendly error instead of breaking the app
    this.appendMessage("Sorry, I'm having trouble...", "error");
}

**Úvahy o používateľ Táto architektúra je škálovateľná – môžete ľahko pridať funkcie ako úprava správ, nahrávanie súborov alebo viaceré vlákna konverzácií bez potreby prepisovania základnej štruktúry.

Štýlovanie vášho chatovacieho rozhrania

Teraz vytvoríme moderné, vizuálne atraktívne chatovacie rozhranie pomocou CSS. Dobré štýlovanie dodáva vašej aplikácii profesionálny vzhľad a zlepšuje celkový používateľský zážitok. Použijeme moderné funkcie CSS ako Flexbox, CSS Grid a vlastné vlastnosti pre responzívny a prístupný dizajn.

Vytvorte styles.css s týmito komplexnými štýlmi:

/* 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;
    }
}

Porozumenie architektúre CSS:

Používa vlastné vlastnosti CSS (premenné) pre konzistentnú tému a jednoduchú údržbu
Implementuje rozloženie Flexbox pre responzívny dizajn a správne zarovnanie
Zahŕňa plynulé animácie pre zobrazovanie správ bez rušivých efektov
Poskytuje vizuálne rozlíšenie medzi správami používateľa, odpoveďami AI a chybovými stavmi
Podporuje responzívny dizajn, ktorý funguje na stolných počítačoch aj mobilných zariadeniach
Zohľadňuje prístupnosť s preferenciami zníženého pohybu a správnymi kontrastnými pomermi
Ponúka podporu tmavého režimu na základe preferencií systému používateľa

Konfigurácia URL adresy vášho backendu

Posledným krokom je aktualizácia BASE_URL vo vašom JavaScripte tak, aby zodpovedala vášmu backend serveru:

// 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";

Určenie URL adresy vášho backendu:

Lokálny vývoj: Použite http://localhost:5000, ak spúšťate frontend aj backend lokálne
Codespaces: Nájdite URL adresu vášho backendu na karte Ports po tom, ako sprístupníte port 5000
Produkcia: Nahraďte skutočnou doménou pri nasadení na hostingovú službu

💡 Tip na testovanie: Môžete testovať váš backend priamo návštevou koreňovej URL adresy vo vašom prehliadači. Mali by ste vidieť uvítaciu správu z vášho FastAPI servera.

Testovanie a nasadenie

Teraz, keď máte postavené frontendové aj backendové komponenty, otestujme, či všetko funguje spolu, a preskúmajme možnosti nasadenia na zdieľanie vášho chatovacieho asistenta s ostatnými.

Lokálny testovací postup

Postupujte podľa týchto krokov na testovanie vašej kompletnej aplikácie:

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]

Postup krok za krokom:

Spustite váš backend server:

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

Overte, že API funguje:
- Otvorte http://localhost:5000 vo vašom prehliadači
- Mali by ste vidieť uvítaciu správu z vášho FastAPI servera
Otvorte váš frontend:
- Prejdite do adresára vášho frontendu
- Otvorte index.html vo vašom webovom prehliadači
- Alebo použite rozšírenie Live Server vo VS Code pre lepší vývojový zážitok
Otestujte funkčnosť chatu:
- Napíšte správu do vstupného poľa
- Kliknite na "Odoslať" alebo stlačte Enter
- Overte, či AI odpovedá správne
- Skontrolujte konzolu prehliadača pre akékoľvek chyby v JavaScripte

Riešenie bežných problémov

Problém	Príznaky	Riešenie
CORS chyba	Frontend nemôže dosiahnuť backend	Uistite sa, že FastAPI CORSMiddleware je správne nakonfigurovaný
Chyba API kľúča	401 Neautorizované odpovede	Skontrolujte vašu environmentálnu premennú `GITHUB_TOKEN`
Odmietnuté pripojenie	Sieťové chyby vo fronte	Overte URL adresu backendu a či Flask server beží
Žiadna odpoveď AI	Prázdne alebo chybové odpovede	Skontrolujte logy backendu pre problémy s kvótou API alebo autentifikáciou

Bežné kroky pri ladení:

Skontrolujte konzolu nástrojov pre vývojárov prehliadača pre chyby v JavaScripte
Overte kartu Siete, či ukazuje úspešné API požiadavky a odpovede
Preskúmajte výstup terminálu backendu pre chyby v Pythone alebo problémy s API
Potvrďte, že environmentálne premenné sú správne načítané a dostupné

Výzva GitHub Copilot Agent 🚀

Použite režim Agent na splnenie nasledujúcej výzvy:

Popis: Vylepšite chatovacieho asistenta pridaním histórie konverzácií a uchovávaním správ. Táto výzva vám pomôže pochopiť, ako spravovať stav v chatovacích aplikáciách a implementovať ukladanie dát pre lepší používateľský zážitok.

Úloha: Upraviť chatovaciu aplikáciu tak, aby obsahovala históriu konverzácií, ktorá pretrváva medzi reláciami. Pridajte funkciu na uloženie správ do lokálneho úložiska, zobrazte históriu konverzácií pri načítaní stránky a pridajte tlačidlo "Vymazať históriu". Tiež implementujte indikátory písania a časové pečiatky správ, aby bol zážitok z chatu realistickejší.

Viac informácií o režime agent nájdete tu.

Zadanie: Vytvorte svojho osobného AI asistenta

Teraz vytvoríte vlastnú implementáciu AI asistenta. Namiesto jednoduchého kopírovania kódu z tutoriálu je to príležitosť aplikovať koncepty a vytvoriť niečo, čo odráža vaše vlastné záujmy a použitie.

Požiadavky na projekt

Nastavme váš projekt s čistou, organizovanou štruktúrou:

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

Hlavné úlohy implementácie

Vývoj backendu:

Použite náš kód FastAPI a prispôsobte si ho
Vytvorte jedinečnú osobnosť AI – možno užitočný kuchársky asistent, kreatívny partner na písanie alebo študijný pomocník?
Pridajte spoľahlivé spracovanie chýb, aby sa vaša aplikácia nezrútila, keď sa niečo pokazí
Napíšte jasnú dokumentáciu pre každého, kto chce pochopiť, ako váš API funguje

Vývoj frontendu:

Vytvorte chatovacie rozhranie, ktoré je intuitívne a príjemné
Napíšte čistý, moderný JavaScript, na ktorý budete hrdí
Navrhnite vlastné štýlovanie, ktoré odráža osobnosť vášho AI – zábavné a farebné? Čisté a minimalistické? Je to úplne na vás!
Uistite sa, že funguje skvele na telefónoch aj počítačoch

Požiadavky na personalizáciu:

Vyberte jedinečné meno a osobnosť pre vášho AI asistenta – možno niečo, čo odráža vaše záujmy alebo problémy, ktoré chcete riešiť
Prispôsobte vizuálny dizajn tak, aby zodpovedal štýlu vášho asistenta
Napíšte presvedčivú uvítaciu správu, ktorá motivuje ľudí začať chatovať
Otestujte vášho asistenta s rôznymi typmi otázok, aby ste videli, ako reaguje

Nápady na vylepšenie (voliteľné)

Chcete posunúť svoj projekt na vyššiu úroveň? Tu je niekoľko zaujímavých nápadov na preskúmanie:

Funkcia	Popis	Zručnosti, ktoré si precvičíte
História správ	Pamätajte si konverzácie aj po obnovení stránky	Práca s localStorage, manipulácia s JSON
Indikátory písania	Zobrazenie "AI píše..." počas čakania na odpovede	Animácie v CSS, asynchrónne programovanie
Časové pečiatky správ	Zobrazenie času odoslania každej správy	Formátovanie dátumu/času, UX dizajn
Export chatu	Umožnite používateľom stiahnuť ich konverzáciu	Práca so súbormi, export dát
Prepínanie témy	Prepínač medzi svetlým/tmavým režimom	Premenné CSS, preferencie používateľa
Hlasový vstup	Pridajte funkciu prevodu reči na text	Webové API, prístupnosť

Testovanie a dokumentácia

Zabezpečenie kvality:

Testujte vašu aplikáciu s rôznymi typmi vstupov a hraničnými prípadmi
Overte, že responzívny dizajn funguje na rôznych veľkostiach obrazovky
Skontrolujte prístupnosť pomocou navigácie klávesnicou a čítačiek obrazovky
Validujte HTML a CSS pre súlad so štandardmi

Požiadavky na dokumentáciu:

Napíšte README.md, ktorý vysvetľuje váš projekt a ako ho spustiť
Priložte snímky obrazovky vášho chatovacieho rozhrania v akcii
Zdokumentujte akékoľvek jedinečné funkcie alebo prispôsobenia, ktoré ste pridali
Poskytnite jasné pokyny na nastavenie pre ostatných vývojárov

Pokyny na odovzdanie

Výstupy projektu:

Kompletný priečinok projektu so všetkým zdrojovým kódom
README.md s popisom projektu a pokynmi na nastavenie
Snímky obrazovky demonštrujúce vášho chatovacieho asistenta v akcii
Krátka reflexia o tom, čo ste sa naučili a aké výzvy ste čelili

Kritériá hodnotenia:

Funkčnosť: Funguje chatovací asistent podľa očakávania?
Kvalita kódu: Je kód dobre organizovaný, komentovaný a udržiavateľný?
Dizajn: Je rozhranie vizuálne atraktívne a užívateľsky prívetivé?
Kreativita: Aká jedinečná a personalizovaná je vaša implementácia?
Dokumentácia: Sú pokyny na nastavenie jasné a kompletné?

💡 Tip na úspech: Začnite najprv so základnými požiadavkami, potom pridajte vylepšenia, keď bude všetko fungovať. Zamerajte sa na vytvorenie vylešteného základného zážitku pred pridaním pokročilých funkcií.

Riešenie

Bonusové výzvy

Pripravení posunúť váš AI asistent na vyššiu úroveň? Vyskúšajte tieto pokročilé výzvy, ktoré prehĺbia vaše porozumenie integrácie AI a webového vývoja.

Prispôsobenie osobnosti

Skutočná mágia nastáva, keď dáte svojmu AI asistentovi jedinečnú osobnosť. Experimentujte s rôznymi systémovými výzvami na vytvorenie špecializovaných asistentov:

Príklad profesionálneho asistenta:

call_llm(message, "You are a professional business consultant with 20 years of experience. Provide structured, actionable advice with specific steps and considerations.")

Príklad kreatívneho pomocníka pri písaní:

call_llm(message, "You are an enthusiastic creative writing coach. Help users develop their storytelling skills with imaginative prompts and constructive feedback.")

Príklad technického mentora:

call_llm(message, "You are a patient senior developer who explains complex programming concepts using simple analogies and practical examples.")

Vylepšenia frontendu

Transformujte svoje chatovacie rozhranie pomocou týchto vizuálnych a funkčných vylepšení:

Pokročilé funkcie CSS:

Implementujte plynulé animácie a prechody správ
Pridajte vlastné dizajny bublín chatu s tvarmi a gradientmi v CSS
Vytvorte animáciu indikátora písania, keď AI "premýšľa"
Navrhnite emoji reakcie alebo systém hodnotenia správ

Vylepšenia JavaScriptu:

Pridajte klávesové skratky (Ctrl+Enter na odoslanie, Escape na vymazanie vstupu)
Implementujte funkciu vyhľadávania a filtrovania správ
Vytvorte funkciu exportu konverzácie (stiahnutie ako text alebo JSON)
Pridajte automatické ukladanie do localStorage, aby sa zabránilo strate správ

Pokročilá integrácia AI

Viacero osobností AI:

Vytvorte rozbaľovací zoznam na prepínanie medzi rôznymi osobnosťami AI
Uložte preferovanú osobnosť používateľa do localStorage
Implementujte prepínanie kontextu, ktoré udržiava tok konverzácie

Funkcie inteligentnej odpovede:

Pridajte povedomie o kontexte konverzácie (AI si pamätá predchádzajúce správy)
Implementujte inteligentné návrhy na základe témy konverzácie
Vytvorte tlačidlá rýchlej odpovede na bežné otázky

🎯 Cieľ učenia: Tieto bonusové výzvy vám pomôžu pochopiť pokročilé vzory webového vývoja a techniky integrácie AI, ktoré sa používajú v produkčných aplikáciách.

Zhrnutie a ďalšie kroky

Gratulujeme! Úspešne ste vytvorili kompletného AI-powered chatovacieho asistenta od základu. Tento projekt vám poskytol praktické skúsenosti s modernými technológiami webového vývoja a integráciou AI – zručnosti, ktoré sú čoraz cennejšie v dnešnom technologickom prostredí.

Čo ste dosiahli

Počas tejto lekcie ste zvládli niekoľko kľúčových technológií a konceptov:

Vývoj backendu:

Integrácia s GitHub Models API pre funkčnosť AI
Vytvorenie RESTful API pomocou Flasku s riadnym spracovaním chýb
Implementácia bezpečnej autentifikácie pomocou environmentálnych premenných
Konfigurácia CORS pre požiadavky medzi frontendom a backendom

Vývoj frontendu:

Vytvorenie responzívneho chatovacieho rozhrania pomocou sémantického HTML
Implementácia moderného JavaScriptu s async/await a architektúrou založenou na triedach
Navrhnutie pútavého používateľského rozhrania s CSS Grid, Flexboxom a animáciami
Pridanie funkcií prístupnosti a princípov responzívneho dizajnu

Integrácia full-stacku:

Prepojenie frontendu a backendu prostredníctvom HTTP API volaní
Spracovanie interakcií používateľov v reálnom čase a asynchrónneho toku dát
Implementácia spracovania chýb a spätnej väzby používateľovi v celej aplikácii
Testovanie kompletného pracovného toku aplikácie od vstupu používateľa po odpoveď AI

Kľúčové výsledky učenia

mindmap
  root((AI Chat App Skills))
    API Integration
      Authentication
      Error Handling
      Async Programming
    Web Development
      HTML5 Semantics
      Modern CSS
      ES6+ JavaScript
    User Experience
      Responsive Design
      Accessibility
      Real-time Interaction
    AI Understanding
      Prompt Engineering
      Model Parameters
      Conversation Flow

Tento projekt vás uviedol do základov budovania aplikácií poháňaných AI, čo predstavuje budúcnosť webového vývoja. Teraz rozumiete, ako integrovať schopnosti AI do tradičných webových aplikácií, čím vytvárate pútavé používateľské zážitky, ktoré pôsobia inteligentne a reagujú.

Profesionálne aplikácie

Zručnosti, ktoré ste si osvojili v tejto lekcii, sú priamo aplikovateľné na moderné kariéry v oblasti softvérového vývoja:

Full-stack webový vývoj pomocou moderných frameworkov a API
Integrácia AI do webových aplik
Presmerovanie portov na testovanie vašich aplikácií

Čo poskytuje Codespaces:

Odstraňuje problémy s nastavením a konfiguráciou lokálneho prostredia
Zabezpečuje konzistentné vývojové prostredie na rôznych zariadeniach
Obsahuje predkonfigurované nástroje a rozšírenia pre webový vývoj
Ponúka bezproblémovú integráciu s GitHubom pre správu verzií a spoluprácu

🚀 Profesionálny tip: Codespaces je ideálny na učenie a prototypovanie AI aplikácií, pretože automaticky rieši všetky zložité nastavenia prostredia, čo vám umožní sústrediť sa na tvorbu a učenie namiesto riešenia problémov s konfiguráciou.

Zrieknutie sa zodpovednosti:
Tento dokument bol preložený pomocou služby AI prekladu Co-op Translator. Aj keď sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho rodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nie sme zodpovední za žiadne nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.

83 KiB Raw Blame History Unescape Escape

Vytvorenie chatového asistenta s AI

Pochopenie AI: Od tajomstva k majstrovstvu

Čo vlastne znamená "Generatívna AI"?

Ako sa modely AI učia (jednoduchá verzia)

Prečo GitHub Models?

Nastavenie backendovej integrácie v Pythone

Pochopenie základnej implementácie

Pochopenie rolí správ: Rámec AI konverzácie

Pochopenie AI parametrov: Jemné doladenie správania odpovedí

Teplota (0,0 až 2,0): Ovládanie kreativity

Max Tokens (1 až 4096+): Ovládanie dĺžky odpovede

Top_p (0,0 až 1,0): Parameter zamerania

Spojenie všetkého: Kombinácie parametrov pre rôzne použitia

Magia systémových podnetov: Programovanie osobnosti AI

Prečo sú systémové podnety také silné

Tvorba efektívnych systémových podnetov: Umenie a veda

Príklady systémových podnetov s kontextom

Ukážka systémových podnetov v praxi

Pokročilé techniky systémových podnetov

Prečo je to dôležité pre váš chatový asistent

Pochopenie toku požiadaviek a odpovedí

Pochopenie architektúry API

Vytvorenie aplikácie FastAPI

Pochopenie CORS: Strážca bezpečnosti webu

Čo je CORS a prečo existuje?

CORS vo vašom vývojovom prostredí

CORS bezpečnosť: Vývoj vs produkcia

Bežné scenáre CORS a riešenia

Spracovanie chýb a validácia

Nastavenie a spustenie vášho backendu

Nastavenie Python prostredia

Konfigurácia prostredia: Udržanie tajomstiev v bezpečí

Čo sú environmentálne premenné?

Prečo sú environmentálne premenné dôležité

Nastavenie súboru prostredia

Vytvorenie osobného prístupového tokenu GitHub

Načítanie environmentálnych premenných v Pythone

Git bezpečnosť: Súbor .gitignore

Rôzne prostredia, rôzne tajomstvá

Spustenie vášho vývojového servera: Oživenie vášho FastAPI

Pochopenie procesu spustenia servera FastAPI

Čo by ste mali vidieť, keď všetko funguje

Pochopenie výstupu FastAPI:

Riešenie bežných problémov pri spustení

Najlepšie praktiky pri vývoji

Konfigurácia pre GitHub Codespaces: Jednoduchý vývoj v cloude

Pochopenie siete Codespaces

Krok za krokom konfigurácia Codespaces

Pochopenie URL Codespace

Testovanie nastavenia Codespace

Codespaces vs Lokálny vývoj

Tipy pre vývoj v Codespaces

Vytvorenie frontendového rozhrania pre chat: Miesto, kde sa stretávajú ľudia a AI

Pochopenie modernej frontendovej architektúry

Tri piliere frontendového vývoja

Prečo záleží na modernej architektúre JavaScriptu

Nastavenie štruktúry projektu

Vytvorenie HTML základu: Semantická štruktúra pre prístupnosť

Štruktúra dokumentu

Semantické prvky

Funkcie prístupnosti

Integrácia CSS a JavaScriptu

Pridanie interaktívneho JavaScriptu: Logika modernej webovej aplikácie

Pochopenie modernej JavaScriptovej architektúry

Pochopenie každého JavaScriptového konceptu

Bezpečnosť a najlepšie praktiky

Štýlovanie vášho chatovacieho rozhrania

Konfigurácia URL adresy vášho backendu

Testovanie a nasadenie

Lokálny testovací postup

Riešenie bežných problémov

Výzva GitHub Copilot Agent 🚀

Zadanie: Vytvorte svojho osobného AI asistenta

Požiadavky na projekt

Hlavné úlohy implementácie

Nápady na vylepšenie (voliteľné)

Testovanie a dokumentácia

Pokyny na odovzdanie

Riešenie

83 KiB

Raw Blame History Unescape Escape