# 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ť
```mermaid
graph LR
A[Your Question] --> B[AI Model]
B --> C[Pattern Recognition]
C --> D[Content Generation]
D --> E[Contextual Response]
F[Training Data 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.
```mermaid
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](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/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:
```python
"""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:
```python
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é)
```python
# 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
```python
# 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
```python
# 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:**
1. **Rola/Identita**: Kto je AI?
2. **Odbornosť**: Čo vie?
3. **Štýl komunikácie**: Ako hovorí?
4. **Konkrétne pokyny**: Na čo by sa mala zamerať?
```python
# ❌ 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:
```python
# 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?"
```python
# 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
```python
system_prompt = """
You are helping a junior developer who just started their first job at a startup.
They know basic HTML/CSS/JavaScript but are new to backend development and databases.
Be encouraging and explain things step-by-step without being condescending.
"""
```
**2. Formátovanie výstupu**: Povedzte AI, ako má štruktúrovať odpovede
```python
system_prompt = """
You are a technical mentor. Always structure your responses as:
1. Quick Answer (1-2 sentences)
2. Detailed Explanation
3. Code Example
4. Common Pitfalls to Avoid
5. Next Steps for Learning
"""
```
**3. Nastavenie obmedzení**: Definujte, čo AI nemá robiť
```python
system_prompt = """
You are a coding tutor focused on teaching best practices. Never write complete
solutions for the user - instead, guide them with hints and questions so they
learn by doing. Always explain the 'why' behind coding decisions.
"""
```
#### 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:
```mermaid
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 Adds system prompt
API->>AI: Sends formatted request
AI->>API: Returns AI response
Note over API: Processes response Logs conversation
API->>Frontend: {"response": "Hello! How can I help?"}
Frontend->>User: Displays AI message
```
**Pochopenie jednotlivých krokov:**
1. **Interakcia používateľa**: Osoba píše do rozhrania chatu
2. **Spracovanie na frontende**: JavaScript zachytí vstup a formátuje ho ako JSON
3. **Validácia API**: FastAPI automaticky validuje požiadavku pomocou Pydantic modelov
4. **Integrácia AI**: Backend pridá kontext (systémový prompt) a zavolá AI službu
5. **Spracovanie odpovede**: API prijme odpoveď od AI a môže ju upraviť, ak je to potrebné
6. **Zobrazenie na frontende**: JavaScript zobrazí odpoveď v rozhraní chatu
### Pochopenie architektúry API
```mermaid
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:
```python
# api.py
from fastapi import FastAPI, HTTPException
from fastapi.middleware.cors import CORSMiddleware
from pydantic import BaseModel
from llm import call_llm
import logging
# 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!
```python
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
```python
# 🚨 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:
```python
# 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.
```bash
# 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é
```python
# 🚨 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á:**
1. **Zverejnenie vo verziovom systéme**: Každý, kto má prístup k vášmu Git repozitáru, vidí váš API kľúč
2. **Verejné repozitáre**: Ak ich nahráte na GitHub, váš kľúč je viditeľný pre celý internet
3. **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
4. **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:
```bash
# .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:**
1. **Prejdite na GitHub Nastavenia** → Nastavenia vývojára → Osobné prístupové tokeny → Tokeny (klasické)
2. **Kliknite na "Vytvoriť nový token (klasický)"**
3. **Nastavte expiráciu** (30 dní na testovanie, dlhšie na produkciu)
4. **Vyberte oprávnenia**: Zaškrtnite "repo" a akékoľvek ďalšie potrebné povolenia
5. **Vytvorte token** a okamžite ho skopírujte (neskôr ho už neuvidíte!)
6. **Vložte ho do vášho .env súboru**
```bash
# Example of what your token looks like (this is fake!)
GITHUB_TOKEN=ghp_1A2B3C4D5E6F7G8H9I0J1K2L3M4N5O6P7Q8R
```
#### Načítanie environmentálnych premenných v Pythone
```python
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ť:
```bash
# .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:
```bash
# .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
```bash
# 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
```bash
$ python api.py
INFO: Will watch for changes in these directories: ['/your/project/path']
INFO: Uvicorn running on http://0.0.0.0:5000 (Press CTRL+C to quit)
INFO: Started reloader process [12345] using WatchFiles
INFO: Started server process [12346]
INFO: Waiting for application startup.
INFO: Application startup complete.
```
**Pochopenie výstupu FastAPI:**
-
```python
# 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.
```python
# 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:
```python
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**:
```bash
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**:
```javascript
// 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**:
```javascript
// 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:
```bash
# 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**:
1. Upravte kód vo VS Code
2. FastAPI sa automaticky načíta (vďaka režimu reload v Uvicorn)
3. Okamžite testujte zmeny cez verejné URL
4. 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
```mermaid
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:
```text
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:
```html
AI Chat Assistant
AI Chat Assistant
Ask me anything!
```
**Pochopenie každého HTML prvku a jeho účelu:**
#### Štruktúra dokumentu
- **``**: Informuje prehliadač, že ide o moderný HTML5
- **``**: Určuje jazyk stránky pre čítačky obrazovky a nástroje na preklad
- **``**: Zabezpečuje správne kódovanie znakov pre medzinárodný text
- **``**: Robí stránku mobilne responzívnou kontrolou priblíženia a mierky
#### Semantické prvky
- **``**: Jasne identifikuje hornú sekciu s názvom a popisom
- **``**: Označuje primárnu obsahovú oblasť (kde prebiehajú konverzácie)
- **`