localizeflow[bot]
d01b0740e4
|
4 months ago | |
|---|---|---|
| .. | ||
| solution | 4 months ago | |
| README.md | 4 months ago | |
README.md
Vytvorte chat asistenta s AI
Pamätáte si Star Trek, keď posádka voľne komunikovala s počítačom lode, pýtala sa zložité otázky a dostávala premyslené odpovede? To, čo v 60. rokoch vyzeralo ako čistá sci-fi, je dnes niečo, čo môžete vytvoriť pomocou webových technológií, ktoré už poznáte.
V tejto lekcii vytvoríme AI chat asistenta pomocou HTML, CSS, JavaScriptu a určitej backendovej integrácie. Objavíte, ako rovnaké zručnosti, ktoré sa učíte, môžu byť prepojené s výkonnými AI službami, ktoré rozumejú kontextu a generujú zmysluplné odpovede.
Myslite na AI ako na prístup k obrovskej knižnici, ktorá nielenže nájde informácie, ale aj ich syntetizuje do koherentných odpovedí prispôsobených vašim konkrétnym otázkam. Namiesto prehľadávania tisícok strán dostanete priame, kontextové odpovede.
Integrácia prebieha cez známe webové technológie pracujúce spolu. HTML vytvára chatové rozhranie, CSS rieši vizuálny dizajn, JavaScript spravuje interakcie používateľa a backendové API spája všetko s AI službami. Je to podobné, ako keď rôzne sekcie orchestra 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 aj návrhové vzory, ktoré robia interakcie intuitívnymi.
Na konci tejto lekcie bude integrácia AI pôsobiť menej tajomne 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, za použitia rovnakých webových vývojárskych princípov, ktoré sa učíte.
⚡ Čo môžete spraviť za nasledujúcich 5 minút
Rýchla cesta pre zaneprázdnených vývojárov
flowchart LR
A[⚡ 5 minút] --> B[Získajte GitHub token]
B --> C[Otestujte AI ihrisko]
C --> D[Skopírujte Python kód]
D --> E[Zobrazte odpovede AI]
- Minúta 1: Navštívte GitHub Models Playground a vytvorte si osobný prístupový token
- Minúta 2: Testujte AI interakcie priamo v rozhraní playgroundu
- Minúta 3: Kliknite na záložku "Code" a skopírujte pythonovský útržok
- Minúta 4: Spustite kód lokálne so svojím tokenom:
GITHUB_TOKEN=your_token python test.py - Minúta 5: Sledujte, ako vaša prvá AI odpoveď vzniká z vášho vlastného kódu
Rýchly testovací kód:
import os
from openai import OpenAI
client = OpenAI(
base_url="https://models.github.ai/inference",
api_key="your_token_here"
)
response = client.chat.completions.create(
messages=[{"role": "user", "content": "Hello AI!"}],
model="openai/gpt-4o-mini"
)
print(response.choices[0].message.content)
Prečo je to dôležité: Za 5 minút zažijete kúzlo programovej AI interakcie. Toto reprezentuje základný stavebný blok, ktorý poháňa každú AI aplikáciu, ktorú používate.
Takto bude vyzerať váš hotový projekt:
🗺️ Vaša cesta učenia sa vývoja AI aplikácií
journey
title Od webového vývoja po integráciu AI
section Porozumenie základom AI
Objavte koncepty generatívnej AI: 4: You
Preskúmajte platformu GitHub Models: 6: You
Ovládnite parametre a prompt AI: 8: You
section Integrácia backendu
Vytvorte Python API server: 5: You
Implementujte volania funkcií AI: 7: You
Spravujte asynchrónne operácie: 8: You
section Vývoj frontend
Vytvorte moderné chatové rozhranie: 6: You
Ovládnite interakcie v reálnom čase: 8: You
Vytvorte responzívny používateľský zážitok: 9: You
section Profesionálna aplikácia
Nasadzujte kompletný AI systém: 7: You
Optimalizujte výkonnostné vzory: 8: You
Vytvorte aplikáciu pripravenú na produkciu: 9: You
Cieľ vašej cesty: Na konci tejto lekcie ste vytvorili kompletnú AI poháňanú aplikáciu pomocou tých istých technológií a vzorov, ktoré poháňajú moderných AI asistentov ako ChatGPT, Claude a Google Bard.
Pochopenie AI: Od záhady k majstrovstvu
Predtým, než sa pustíme do kódu, poďme pochopiť, s čím pracujeme. Ak ste už použili API, poznáte základný vzor: pošlite požiadavku, príjmite odpoveď.
AI API fungujú podobne, ale namiesto vyhľadávania v databáze generujú nové odpovede na základe vzorov naučených z obrovského množstva textu. Predstavte si to ako rozdiel medzi knižničným katalógom a znalým knihovníkom, ktorý vie syntetizovať informácie z viacerých zdrojov.
Čo je vlastne "Generatívna AI"?
Zvažujte, ako Rosettská doska umožnila vedcom porozumieť egyptským hieroglyfom tým, že našla vzory medzi známymi a neznámymi jazykmi. AI modely pracujú podobne – nachádzajú vzory v enormnom množstve textu, aby pochopili, ako jazyk funguje, a potom používajú tieto vzory na generovanie vhodných odpovedí na nové otázky.
Rozoberme si to na jednoduchom porovnaní:
- Tradičná databáza: Ako keď si žiadate rodný list – získate vždy ten istý presný dokument
- Vyhľadávač: Ako keď žiadate knihovníka nájsť knihy o mačkách – ukáže vám, čo je dostupné
- Generatívna AI: Ako keď sa pýtate znalého priateľa na mačky – povie vám zaujímavé veci svojimi slovami, prispôsobené tomu, čo chcete vedieť
graph LR
A[Vaša otázka] --> B[AI Model]
B --> C[Rozpoznávanie vzorov]
C --> D[Generovanie obsahu]
D --> E[Kontextuálna odpoveď]
F[Tréningové dáta<br/>Knihy, články, web] --> B
Ako sa AI modely učia (jednoduchá verzia)
AI modely sa učia vystavením obrovským datasetom obsahujúcim texty z kníh, článkov a rozhovorov. Počas tohto procesu identifikujú vzory v:
- Štruktúre myšlienok v písanej komunikácii
- Ktoré slová sa často vyskytujú spolu
- Ako plynú bežné konverzácie
- Kontextových rozdieloch medzi formálnou a neformálnou komunikáciou
Je to podobné ako keď archeológovia dešifrujú staroveké jazyky: analyzujú tisícky príkladov, aby pochopili gramatiku, slovnú zásobu a kultúrny kontext, a nakoniec sú schopní 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 podnikovej úrovni AI bez potreby zriaďovať vlastnú AI infraštruktúru (verím, že to teraz nechcete robiť!). Predstavte si to ako používanie API pre počasie namiesto pokusu predpovedať počasie sami zriadením počasia všade.
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 o vysoké náklady.
graph LR
A[Frontend Chat UI] --> B[Vaše Backend API]
B --> C[GitHub Models API]
C --> D[Spracovanie AI modelu]
D --> C
C --> B
B --> A
Budeme používať GitHub Models pre našu backendovú integráciu, ktorá poskytuje prístup k profesionálnym AI schopnostiam cez vývojársky priateľské rozhranie. GitHub Models Playground slúži ako testovacie prostredie, kde môžete experimentovať s rôznymi AI modelmi a pochopiť ich schopnosti pred implementáciou v kóde.
🧠 Ekosystém vývoja AI aplikácií
mindmap
root((Vývoj AI))
Understanding AI
Generative Models
Rozpoznávanie vzorov
Generovanie obsahu
Pochopenie kontextu
Syntéza odpovedí
AI Parameters
Riadenie teploty
Limity tokenov
Top-p filtrovanie
Systémové prompt-y
Backend Architecture
API Integration
GitHub modely
Autentifikácia
Spracovanie požiadaviek
Správa chýb
Python Infrastructure
FastAPI rámec
Asynchrónne operácie
Bezpečnosť prostredia
Konfigurácia CORS
Frontend Experience
Chat Interface
Aktualizácie v reálnom čase
História správ
Spätná väzba užívateľa
Stav načítania
Modern Web Tech
ES6 triedy
Async/Await
Manipulácia s DOM
Spracovanie udalostí
Professional Patterns
Security Best Practices
Správa tokenov
Validácia vstupu
Prevencia XSS
Chybové hranice
Production Readiness
Optimalizácia výkonu
Responzívny dizajn
Prístupnosť
Testovacie stratégie
Základný princíp: Vývoj AI aplikácií kombinuje tradičné webové vývojárske zručnosti s integráciou AI služieb, čím vytvára inteligentné aplikácie, ktoré pôsobia prirodzene a reagujú na používateľov.
Čo robí playground tak užitočným:
- Vyskúšajte rôzne AI modely ako GPT-4o-mini, Claude a ďalšie (všetky zadarmo!)
- Testujte svoje nápady a vstupy pred písaním kódu
- Získajte hotové kódy vo vašom obľúbenom programovacom jazyku
- Ladte nastavenia ako úroveň kreativity a dĺžka odpovede a sledujte ich vplyv na výstup
Keď si trošku pohrajete, stačí kliknúť na záložku "Code" a vybrať programovací jazyk, aby ste získali implementačný kód, ktorý budete potrebovať.
Nastavenie backendovej integrácie v Pythone
Teraz implementujeme integráciu AI pomocou Pythonu. Python je výborný pre AI aplikácie vďaka svojej jednoduchej syntaxe a výkonným knižniciam. Začneme so kódom z GitHub Models playground a potom ho preformulujeme do znovu použiteľnej, produkčne pripravenej funkcie.
Pochopenie základnej implementácie
Keď si stiahnete Python kód z playgroundu, dostanete niečo takéto. Nebojte sa, ak sa vám to na začiatok zdá veľa – pozrieme si to krok za krokom:
"""Run this model in Python
> pip install openai
"""
import os
from openai import OpenAI
# Na overenie pomocou modelu budete potrebovať vytvoriť osobný prístupový token (PAT) vo vašich nastaveniach GitHubu.
# Vytvorte si svoj PAT token podľa pokynov tu: https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens
client = OpenAI(
base_url="https://models.github.ai/inference",
api_key=os.environ["GITHUB_TOKEN"],
)
response = client.chat.completions.create(
messages=[
{
"role": "system",
"content": "",
},
{
"role": "user",
"content": "What is the capital of France?",
}
],
model="openai/gpt-4o-mini",
temperature=1,
max_tokens=4096,
top_p=1
)
print(response.choices[0].message.content)
Čo sa v tomto kóde deje:
- Importujeme nástroje, ktoré potrebujeme:
ospre čítanie premenných prostredia aOpenAIna komunikáciu s AI - Nastavujeme klienta OpenAI, aby smeroval na GitHub AI servery namiesto priamo na OpenAI
- Autentifikujeme sa špeciálnym GitHub tokenom (viac o tom o chvíľu!)
- Štruktúrujeme našu konverzáciu s rôznymi "rolami" – predstavte si to ako nastavenie scény pre divadlo
- Posielame požiadavku AI s niektorými ladenými parametrami
- Vyťahujeme skutočný text odpovede zo všetkých prijatých dát
Pochopenie rolí správ: Rámec AI konverzácie
AI konverzácie používajú špecifickú štruktúru s rôznymi "rolami", ktoré majú rôzne úč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 režisérsku réžiu:
- Systémová rola: Ako režijné poznámky pre herca – hovorí AI, ako sa má správať, akú má mať osobnosť a ako odpovedať
- Používateľská rola: Skutočná otázka alebo správa od osoby používajúcej vašu aplikáciu
- Asistentova rola: AI odpoveď (tú neodosielate, ale zobrazuje sa v histórii konverzácie)
Analógia z reálneho sveta: Predstavte si, že predstavujete priateľa niekomu na párty:
- Systémová správa: "Toto je moja priateľka Sarah, je lekárka, ktorá skvele vysvetľuje lekárske koncepty jednoduchým spôsobom"
- Používateľská správa: "Môžeš mi vysvetliť, ako fungujú vakcíny?"
- Asistentova odpoveď: Sarah odpovedá ako priateľská lekárka, nie ako právnička alebo kuchár
Pochopenie AI parametrov: Ladenie správania odpovede
Číselné parametre v AI API volaniach riadia, ako model generuje odpovede. Tieto nastavenia umožňujú upraviť správanie AI pre rôzne použitia:
Temperaturu (0.0 až 2.0): Regulátor kreativity
Čo robí: Riadi, ako kreatívne alebo predvídateľné budú odpovede AI.
Predstavte si to ako mieru improvizácie jazzového hudobníka:
- Temperatúra = 0.1: Hrá presne tú istú melódiu zakaždým (veľmi predvídateľné)
- Temperatúra = 0.7: Pridáva chutné variácie, pričom zostáva rozpoznateľný (vyvážená kreativita)
- Temperatúra = 1.5: Plná experimentálna jazzová hra s nečakanými obratmi (veľmi nepredvídateľné)
# Veľmi predvídateľné odpovede (dobré pre faktické otázky)
response = client.chat.completions.create(
messages=[{"role": "user", "content": "What is 2+2?"}],
temperature=0.1 # Takmer vždy povie "4"
)
# Kreatívne odpovede (dobré na brainstorming)
response = client.chat.completions.create(
messages=[{"role": "user", "content": "Write a creative story opening"}],
temperature=1.2 # Vygeneruje jedinečné, nečakané príbehy
)
Max Tokens (1 až 4096+): Regulátor dĺžky odpovede
Čo robí: Určuje limit, ako dlhá môže byť odpoveď AI.
Predstavte si tokeny ako približne ekvivalent slov (asi 1 token = 0,75 slova v angličtine):
- max_tokens=50: Krátke a výstižné (ako SMS)
- max_tokens=500: Pekný odstavec alebo dva
- max_tokens=2000: Detailné vysvetlenie s príkladmi
# Krátke, výstižné odpovede
response = client.chat.completions.create(
messages=[{"role": "user", "content": "Explain JavaScript"}],
max_tokens=100 # Vyžaduje stručné vysvetlenie
)
# Podrobné, komplexné odpovede
response = client.chat.completions.create(
messages=[{"role": "user", "content": "Explain JavaScript"}],
max_tokens=1500 # Umožňuje podrobné vysvetlenia s príkladmi
)
Top_p (0.0 až 1.0): Parameter zamerania
Čo robí: Riadi, ako veľmi sa AI drží pravdepodobných odpovedí.
Predstavte si AI s obrovskou slovnou zásobou zoradenou podľa pravdepodobnosti použitia slov:
- top_p=0.1: Zohľadňuje iba najlepších 10 % pravdepodobných slov (veľmi zamerané)
- top_p=0.9: Zohľadňuje 90 % možných slov (kreatívnejšie)
- top_p=1.0: Zohľadňuje všetky slová (maximálna rozmanitosť)
Napríklad: Ak sa pýtate "Obloha je zvyčajne..."
- Nízke top_p: Skoro určite "modrá"
- Vysoké top_p: Môže povedať "modrá", "zamračená", "rozľahlá", "mení sa", "krásna" atď.
Dáme to dokopy: Kombinácie parametrov pre rôzne prípady použitia
# Pre faktické, konzistentné odpovede (ako dokumentačný bot)
factual_params = {
"temperature": 0.2,
"max_tokens": 300,
"top_p": 0.3
}
# Pre pomoc pri tvorivom písaní
creative_params = {
"temperature": 1.1,
"max_tokens": 1000,
"top_p": 0.9
}
# Pre konverzačné, užitočné odpovede (vyvážené)
conversational_params = {
"temperature": 0.7,
"max_tokens": 500,
"top_p": 0.8
}
quadrantChart
title Matica optimalizácie parametrov AI
x-axis Nízka kreativita --> Vysoká kreativita
y-axis Krátka odozva --> Dlhá odozva
quadrant-1 Kreatívny obsah
quadrant-2 Podrobná analýza
quadrant-3 Rýchle fakty
quadrant-4 Konverzačná AI
Documentation Bot: [0.2, 0.3]
Customer Service: [0.4, 0.4]
General Assistant: [0.7, 0.5]
Creative Writer: [0.9, 0.9]
Brainstorming Tool: [0.8, 0.8]
Prečo tieto parametre záležia: Rôzne aplikácie potrebujú rôzne typy odpovedí. Zákaznícky servis bot by mal byť konzistentný a faktický (nízka teplota), zatiaľ čo kreatívny asistent písania by mal byť nápaditý 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: požiadavku používateľa a voliteľnú systémovú správu
- Poskytuje predvolenú systémovú správu pre všeobecné správanie asistenta
- Používa správne typové anotácie Pythonu pre lepšiu dokumentáciu kódu
- Obsahuje detailný docstring vysvetľujúci účel a parametre funkcie
- Vracia iba obsah odpovede, čo uľahčuje použitie v našom webovom API
- Udržiava rovnaké modelové parametre pre konzistentné správanie AI
Magia systémových promptov: Programovanie osobnosti AI
Ak parametre riadia, ako AI premýšľa, systémové prompty riadia, kým 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 komunikačný štýl.
Myslite na systémové prompty ako na obsadzovanie hercov do rôznych rolí: Namiesto jednej generickej asistentky môžete vytvoriť špecializovaných expertov pre rôzne situácie. Potrebujete trpezlivého učiteľa? Kreatívneho brainstorming partnera? Rezolútneho obchodného poradcu? Stačí zmeniť systémový prompt!
Prečo sú systémové prompty také silné
Tu je fascinujúca časť: AI modely boli trénované na nespočítateľných konverzáciách, kde ľudia prijímajú rôzne roly a úrovne odbornosti. Keď dáte AI špecifickú rolu, je to ako prepnutie spínača, ktorý aktivuje všetky naučené vzory.
Je to ako metóda herectva pre AI: Povedzte hercovi "ste múdry starý profesor" a sledujte, ako automaticky prispôsobí držanie tela, slovnú zásobu a spôsoby. AI robí niečo pozoruhodne podobné s jazykovými vzormi.
Tvorba efektívnych systémových promptov: umenie a veda
Anatómia skvelého systémového promptu:
- Rola/Identita: Kto je AI?
- Odbornosť: Čo vie?
- Komunikačný štýl: Ako hovorí?
- Konkrétne inštrukcie: Na čo sa má zamerať?
# ❌ Nejasný systémový príkaz
"You are helpful."
# ✅ Detailný, efektívny systémový príkaz
"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 promptov s kontextom
Pozrime sa, ako rôzne systémové prompty vytvárajú úplne odlišné osobnosti AI:
# Príklad 1: Trpezlivý učiteľ
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.
"""
# Príklad 2: Kreatívny spolupracovník
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.
"""
# Príklad 3: Strategický obchodný poradca
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.
"""
Ako systémové prompty fungujú v akcii
Otestujme tú istú otázku s rôznymi systémovými promptmi a sledujme dramatické rozdiely:
Otázka: "Ako riešim autentifikáciu používateľov vo svojej webovej aplikácii?"
# S otázkou od učiteľa:
teacher_response = call_llm(
"How do I handle user authentication in my web app?",
teacher_prompt
)
# Typická odpoveď: "Skvelá otázka! Poďme si rozobrať autentifikáciu na jednoduché kroky.
# Predstavte si to ako vrátnika v nočnom klube, ktorý kontroluje občianske preukazy..."
# S otázkou z podnikateľského prostredia:
business_response = call_llm(
"How do I handle user authentication in my web app?",
business_prompt
)
# Typická odpoveď: "Z strategického hľadiska je autentifikácia kľúčová pre dôveru používateľov
# a dodržiavanie predpisov. Nechajte ma načrtnúť rámec, ktorý zohľadňuje bezpečnosť,
# používateľskú skúsenosť a škálovateľnosť..."
Pokročilé techniky systémových promptov
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 š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 NESMIE 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áš chatovací asistent
Pochopenie systémových promptov vám dáva neuveriteľnú moc vytvárať špecializovaných AI asistentov:
- Chatbot zákazníckej podpory: Užitočný, trpezlivý, oboznámený s pravidlami
- Učebný lektor: Povzbudzujúci, krok za krokom, overuje porozumenie
- Tvorivý partner: Fantazijný, stavia na nápadoch, pýta sa „čo keby?"
- Technický expert: Presný, detailný, so zameraním na bezpečnosť
Kľúčový poznatok: Nevoláte iba AI API – vytvárate vlastnú AI osobnosť, ktorá slúži vášmu konkrétnemu prípadu použitia. Práve to spôsobuje, že moderné AI aplikácie pôsobia prispôsobene a užitočne namiesto obecne.
🎯 Pedagogické zhodnotenie: Programovanie AI osobnosti
Zastavte sa a zamyslite sa: Práve ste sa naučili programovať AI osobnosti cez systémové prompty. Toto je základná zručnosť v modernom vývoji AI aplikácií.
Rýchle sebahodnotenie:
- Viete vysvetliť, čím sa systémové prompty líšia od bežných používateľských správ?
- Aký je rozdiel medzi parametrami temperature a top_p?
- Ako by ste vytvorili systémový prompt pre konkrétny prípad použitia (napr. koderského lektora)?
Spojenie s reálnym svetom: Techniky systémových promptov, ktoré ste sa naučili, sú používané v každej hlavnej AI aplikácii – od GitHub Copilot pomoci pri kódovaní až po konverzačné rozhranie ChatGPT. Ovládate rovnaké vzory, ktoré využívajú AI tímy v popredných technologických firmách.
Výzva: Ako by ste navrhli rôzne AI osobnosti pre rôzne typy používateľov (začiatočník vs expert)? Zvážte, ako môže ten istý základný AI model slúžiť rôznym publikám cez inžinierstvo promptov.
Budovanie Web API s FastAPI: Vaše výkonné AI komunikačné centrum
Teraz si postavme backend, ktorý prepája váš frontend s AI službami. Použijeme FastAPI, moderný Python framework, ktorý exceluje vo vývoji API pre AI aplikácie.
FastAPI ponúka niekoľko výhod pre tento typ projektu: vstavaná podpora asynchrónnosti pre spracovanie paralelných požiadaviek, automatické generovanie dokumentácie API a vynikajúci výkon. Váš FastAPI server slúži ako sprostredkovateľ, ktorý prijíma požiadavky z frontendu, komunikuje s AI službami a vráti naformátované odpovede.
Prečo FastAPI pre AI aplikácie?
Možno sa pýtate: „Nemôžem volať AI priamo z môjho frontend JavaScriptu?“ alebo „Prečo FastAPI namiesto Flask alebo Django?“ Skvelé otázky!
Tu je dôvod, prečo je FastAPI ideálny pre to, čo stavame:
- Asynchrónny štandardne: Vie súčasne spracovávať viac AI požiadaviek bez zaseknutia
- Automatická dokumentácia: Navštívte
/docsa získate krásnu, interaktívnu API dokumentáciu zadarmo - Vstavaná validácia: Odhalí chyby ešte pred ich spracovaním
- Bleskovo rýchly: Jeden z najrýchlejších Python frameworkov
- Moderný Python: Využíva všetky najnovšie Python funkcie
A prečo vôbec potrebujeme backend:
Bezpečnosť: Váš AI API kľúč je ako heslo – ak ho uložíte do frontend JavaScriptu, ktokoľvek, kto prezrie zdrojový kód vašej stránky, si ho môže ukradnúť a použiť vaše AI kredity. Backend udržiava citlivé údaje v bezpečí.
Limitovanie počtu požiadaviek a kontrola: Backend 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: Môžete chcieť ukladať rozhovory, filtrovať nevhodný obsah alebo kombinovať viac AI služieb. Toto všetko beží na backendovej logike.
Architektúra pripomína klient-server model:
- Frontend: Vrstva používateľského rozhrania
- Backend API: Vrstva na spracovanie a smerovanie požiadaviek
- AI služba: Externý výpočtový zdroj a generátor odpovedí
- Premenné prostredia: Bezpečné ukladanie konfigurácie a údajov
Pochopenie toku požiadavka a odpovede
Pozrime sa, čo sa stane, keď používateľ odošle správu:
sequenceDiagram
participant User as 👤 Používateľ
participant Frontend as 🌐 Frontend
participant API as 🔧 FastAPI Server
participant AI as 🤖 AI služba
User->>Frontend: Zadáva "Ahoj AI!"
Frontend->>API: POST /hello {"message": "Ahoj AI!"}
Note over API: Overuje požiadavku<br/>Pridáva systémový prompt
API->>AI: Posiela naformátovanú požiadavku
AI->>API: Vracia odpoveď AI
Note over API: Spracováva odpoveď<br/>Zaznamenáva konverzáciu
API->>Frontend: {"response": "Ahoj! Ako vám môžem pomôcť?"}
Frontend->>User: Zobrazuje správu AI
Pochopenie každého kroku:
- Interakcia používateľa: Osoba zadá text do chatu
- Spracovanie frontendom: JavaScript zachytí vstup a naformátuje ho do JSONu
- Validácia API: FastAPI automaticky overí 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ť podľa potreby
- Zobrazenie vo frontende: JavaScript ukáže odpoveď v chatovom rozhraní
Pochopenie architektúry API
sequenceDiagram
participant Frontend
participant FastAPI
participant AI Function
participant GitHub Models
Frontend->>FastAPI: POST /hello {"message": "Ahoj 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": "Ahoj! Ako vám môžem pomôcť?"}
flowchart TD
A[Zadanie používateľa] --> B[Frontend Validácia]
B --> C[HTTP POST Žiadosť]
C --> D[FastAPI Router]
D --> E[Pydantic Validácia]
E --> F[Volanie AI Funkcie]
F --> G[GitHub Models API]
G --> H[Spracovanie Odpovede]
H --> I[JSON Odpoveď]
I --> J[Aktualizácia Frontendu]
subgraph "Bezpečnostná Vrstva"
K[CORS Middleware]
L[Premenné Prostredia]
M[Spracovanie Chýb]
end
D --> K
F --> L
H --> M
Vytvorenie FastAPI aplikácie
Postupne si vytvorme API. Vytvorte súbor api.py s nasledujúcim FastAPI kódom:
# api.py
from fastapi import FastAPI, HTTPException
from fastapi.middleware.cors import CORSMiddleware
from pydantic import BaseModel
from llm import call_llm
import logging
# Konfigurácia logovania
logging.basicConfig(level=logging.INFO)
logger = logging.getLogger(__name__)
# Vytvorte aplikáciu FastAPI
app = FastAPI(
title="AI Chat API",
description="A high-performance API for AI-powered chat applications",
version="1.0.0"
)
# Konfigurácia CORS
app.add_middleware(
CORSMiddleware,
allow_origins=["*"], # Konfigurujte vhodne pre produkciu
allow_credentials=True,
allow_methods=["*"],
allow_headers=["*"],
)
# Pydantic modely na validáciu požiadaviek/odpovedí
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:
# Extrahujte a overte správu
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]}...")
# Zavolajte AI službu (poznámka: call_llm by mala byť asynchrónna pre lepší výkon)
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ú webovú funkcionalitu a Pydantic pre validáciu dát
- Vytvára automatickú dokumentáciu API (dostupnú na
/docspočas behu servera) - Povoľuje CORS middleware, ktorý umožňuje požiadavky frontendu z iných 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 health check endpoint pre monitorovanie 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
/docspre auto-generovanú a testovateľnú API dokumentáciu - Typová bezpečnosť: Python typové anotácie zabraňujú runtime chybám a zvyšujú kvalitu kódu
- Podpora asynchrónnosti: Spracovanie viacerých AI požiadaviek súčasne bez blokovania
- Výkon: Výrazne rýchlejšie spracovanie požiadaviek vhodné pre realtime aplikácie
Pochopenie CORS: Ochranca bezpečnosti webu
CORS (Cross-Origin Resource Sharing) je ako ochranca na budove, ktorý kontroluje, či návštevníci môžu vstúpiť. Pozrime sa, 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 ktorákoľvek webstránka mohla robiť požiadavky na váš bankový web bez vášho súhlasu. To by bola bezpečnostná nočná mora! Browsery to predvolene zakazujú cez „Same-Origin Policy“.
Same-Origin Policy: Browsery povoľujú webstránkam robiť požiadavky len na rovnakú doménu, port a protokol, z ktorého boli načítané.
Analógia z reálneho sveta: Je to ako bezpečnostná služba v obytnom dome – predvolene môžu vstúpiť len obyvatelia (rovnaký origin). Ak chcete pustiť návštevu (iný origin), musíte ochranku explicitne upozorniť.
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
Prehliadače ich teda považujú za „různe originy“, hoci sú na tom istom počítači!
from fastapi.middleware.cors import CORSMiddleware
app = FastAPI(__name__)
CORS(app) # Toto hovorí prehliadačom: "Je v poriadku, ak iné pôvody robia požiadavky na toto API"
Čo CORS konfigurácia robí v praxi:
- Pridáva špeciálne HTTP hlavičky do odpovedí API, ktoré prehliadaču hovoria „táto cross-origin požiadavka je povolená“
- Spracováva „preflight“ požiadavky (browsere niekedy najprv kontrolujú povolenia pred skutočnou požiadavkou)
- Zabraňuje nepríjemnej chybe „blocked by CORS policy“ vo vašej konzole prehliadača
CORS bezpečnosť: vývoj vs produkcia
# 🚨 Vývoj: Povoliť VŠETKY pôvody (pohodlné, ale nebezpečné)
CORS(app)
# ✅ Produkcia: Povoliť iba konkrétnu doménu frontendu
CORS(app, origins=["https://yourdomain.com", "https://www.yourdomain.com"])
# 🔒 Pokročilé: Rôzne pôvody pre rôzne prostredia
if app.debug: # Režim vývoja
CORS(app, origins=["http://localhost:3000", "http://127.0.0.1:3000"])
else: # Režim produkcie
CORS(app, origins=["https://yourdomain.com"])
Prečo je to dôležité: Vo vývoji je CORS(app) ako nechať dvere otvorené – pohodlné, ale nie bezpečné. V produkcii chcete presne určiť, ktoré webstránky môžu komunikovať s vašim API.
Bežné scenáre a riešenia CORS
| Scenár | Problém | Riešenie |
|---|---|---|
| Lokálny vývoj | Frontend nedosiahne backend | Pridajte CORSMiddleware do FastAPI |
| GitHub Pages + Heroku | Nasadený frontend nepristupuje k API | Pridajte URL GitHub Pages do CORS origins |
| Vlastná doména | CORS chyby v produkcii | Aktualizujte CORS origins podľa vašej domény |
| Mobilná aplikácia | Aplikácia nedosiahne webové API | Pridajte doménu aplikácie alebo opatrne použite * |
Tip: Môžete kontrolovať CORS hlavičky v Nástrojoch pre vývojárov vášho 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, že naše API obsahuje správne spracovanie chýb:
# Overiť, či sme prijali správu
if not message:
return jsonify({"error": "Message field is required"}), 400
Kľúčové princípy validácie:
- Overuje povinné polia ešte pred spracovaním požiadavky
- Vracia zmysluplné chybové správy v JSON formáte
- Používa správne HTTP status kódy (napr. 400 pre zlé požiadavky)
- Poskytuje jasnú spätnú väzbu, ktorá pomáha frontend vývojárom chyby odstrániť
Nastavenie a spustenie vášho backendu
Teraz, keď máme AI integráciu a FastAPI server pripravené, poďme všetko spustiť. Proces nastavenia zahŕňa inštaláciu Python závislostí, konfiguráciu premenných prostredia a spustenie vývojového servera.
Nastavenie Python prostredia
Nastavme si Python vývojové prostredie. Virtuálne prostredia sú ako Manhattan Project – každý projekt dostane vlastné izolované miesto so špecifickými nástrojmi a závislosťami, aby sa predišlo konfliktom medzi projektmi.
# Prejdite do svojho backend adresára
cd backend
# Vytvorte virtuálne prostredie (ako vytvorenie čistej miestnosti pre váš projekt)
python -m venv venv
# Aktivujte ho (Linux/Mac)
source ./venv/bin/activate
# Na Windows použite:
# venv\Scripts\activate
# Nainštalujte potrebné veci
pip install openai fastapi uvicorn python-dotenv
Čo sme práve urobili:
- Vytvorili vlastný malý Python bublinu, kde môžeme inštalovať balíčky bez ovplyvnenia ostatných projektov
- Aktivovali ju, aby náš terminál vedel používať toto konkrétne prostredie
- Inštalovali základné knižnice: OpenAI pre AI zázraky, FastAPI pre naše webové API, Uvicorn na spustenie servera, a python-dotenv pre bezpečné spravovanie tajomstiev
Vysvetlenie hlavných závislostí:
- FastAPI: Moderný, rýchly webový framework s automatickou dokumentáciou API
- Uvicorn: Bleskurýchly ASGI server spúšťajúci FastAPI aplikácie
- OpenAI: Oficiálna knižnica pre GitHub modely a integráciu OpenAI API
- python-dotenv: Bezpečné načítavanie premenných prostredia z .env súborov
Konfigurácia prostredia: Ako udržať tajomstvá v bezpečí
Predtým, než spustíme API, musíme si povedať jedno z najdôležitejších pravidiel webového vývoja: ako naozaj držať vaše tajomstvá tajnými. Premenné prostredia sú ako bezpečný trezor, ku ktorému má prístup iba vaša aplikácia.
Čo sú premenné prostredia?
Predstavte si ich ako bezpečnostnú schránku – vložíte tam svoje cennosti a len vy (a vaša aplikácia) máte kľúč. Namiesto písania citlivých údajov priamo v kóde (kde ich môže každý vidieť), ich bezpečne ukladáte do prostredia.
Rozdiel je tento:
- Zlý prístup: Napísať si heslo na lístok a prilepiť ho na monitor
- Správny prístup: Uchovávať heslo v bezpečnom manažéri hesiel, ku ktorému máte prístup len vy
Prečo sú premenné prostredia dôležité
# 🚨 NIKDY TO NEROBTE - API kľúč viditeľný pre všetkých
client = OpenAI(
api_key="ghp_1234567890abcdef...", # Každý ho môže ukradnúť!
base_url="https://models.github.ai/inference"
)
# ✅ ROBTE TO - API kľúč bezpečne uložený
client = OpenAI(
api_key=os.environ["GITHUB_TOKEN"], # K tomu má prístup iba vaša aplikácia
base_url="https://models.github.ai/inference"
)
Čo sa stane, ak natvrdo zadáte tajomstvá do kódu:
- Expozícia v riadení verzií: Každý s prístupom ku Git repozitáru vidí váš API kľúč
- Verejné repozitáre: Ak ho pushnete na GitHub, kľúč je viditeľný pre celý internet
- Zdieľanie s tímom: Iní vývojári získajú prístup k vášmu osobnému API kľúču
- Bezpečnostné incidenty: Ak niekto ukradne váš API kľúč, môže míňať vaše AI kredity
Nastavenie súboru prostredia
Vytvorte .env súbor v adresári backendu. Tento súbor bezpečne uloží vaše tajomstvá lokálne:
# .env súbor - Tento by sa NIKDY nemal commitovať do Gitu
GITHUB_TOKEN=your_github_personal_access_token_here
FASTAPI_DEBUG=True
ENVIRONMENT=development
Ako funguje súbor .env:
- Jeden kľúč a jedna hodnota na riadok vo formáte
KEY=value - Bez medzier okolo rovná sa
- Zväčša bez úvodzoviek okolo hodnôt
- Komentáre začínajú znakom
#
Vytvorenie osobného prístupového tokenu GitHub
Váš GitHub token je špeciálne heslo, ktoré umožňuje vašej aplikácii používať AI služby GitHubu:
Postupný návod na vytvorenie tokenu:
- Prejdite do GitHub nastavení → Developer settings → Personal access tokens → Tokens (classic)
- Kliknite na "Generate new token (classic)"
- Nastavte platnosť (30 dní na testovanie, dlhšie pre produkciu)
- Vyberte oprávnenia: Zaškrtnite „repo“ a ďalšie, ktoré potrebujete
- Vygenerujte token a hneď si ho skopírujte (už ho neuvidíte!)
- Vložte ho do vášho .env súboru
# Príklad toho, ako vyzerá váš token (toto je falošné!)
GITHUB_TOKEN=ghp_1A2B3C4D5E6F7G8H9I0J1K2L3M4N5O6P7Q8R
Načítanie premenných prostredia v Pythone
import os
from dotenv import load_dotenv
# Načítajte premenné prostredia zo súboru .env
load_dotenv()
# Teraz k nim môžete bezpečne pristupovať
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é Pythonu
- Skontroluje, či požadovaný token existuje (dobré spracovanie chýb!)
- Vyrukuje s jasnou chybou, ak chýba token
- Bezpečne používa token bez jeho zverejnenia v kóde
Git bezpečnosť: Súbor .gitignore
Váš .gitignore súbor hovorí Gitu, ktoré súbory nikdy nesledovať alebo nahrávať:
# .gitignore - Pridajte tieto riadky
.env
*.env
.env.local
.env.production
__pycache__/
venv/
.vscode/
Prečo je to kľúčové: Keď pridáte .env do .gitignore, Git ignoruje váš .env súbor, čím zabraňuje náhodnému uploadu tajomstiev na GitHub.
Rôzne prostredia, rôzne tajomstvá
Profesionálne aplikácie používajú rozdielne API kľúče pre rôzne prostredia:
# .env.vývoj
GITHUB_TOKEN=your_development_token
DEBUG=True
# .env.produkcia
GITHUB_TOKEN=your_production_token
DEBUG=False
Prečo to má význam: Nechcete, aby vaše vývojové experimenty ovplyvnili produkčnú AI kvótu a chcete rôzne bezpečnostné úrovne pre rôzne prostredia.
Spustenie vývojového servera: Oživenie vášho FastAPI
Teraz prichádza vzrušujúci moment – spustenie vývojového servera FastAPI a sledovanie, ako vaša AI integrácia ožíva! FastAPI používa Uvicorn, bleskovo rýchly ASGI server, ktorý je špeciálne navrhnutý pre asynchrónne Python aplikácie.
Pochopenie procesu spustenia servera FastAPI
# Metóda 1: Priame vykonanie v Pythone (zahŕňa automatické obnovenie)
python api.py
# Metóda 2: Priame použitie Uvicornu (viac kontroly)
uvicorn api:app --host 0.0.0.0 --port 5000 --reload
Keď spustíte tento príkaz, za scénou sa deje toto:
1. Python načíta vašu FastAPI aplikáciu:
- Importuje všetky požadované knižnice (FastAPI, Pydantic, OpenAI atď.)
- Načíta premenné prostredia z vášho
.envsúboru - Vytvorí inštanciu FastAPI aplikácie s automatickou dokumentáciou
2. Uvicorn konfiguruje ASGI server:
- Pripája sa na port 5000 s asynchrónnym spracovaním požiadaviek
- Nastaví smerovanie požiadaviek s automatickou validáciou
- Povolenie hot reload pre vývoj (reštart pri zmene súborov)
- Generuje interaktívnu API dokumentáciu
3. Server začne počúvať:
- Vo vašom termináli sa zobrazí:
INFO: Uvicorn running on http://0.0.0.0:5000 - Server zvládne viacero súčasných AI požiadaviek
- 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:
- Bude sledovať zmeny: Auto-reload povolený pre vývoj
- Uvicorn beží: Výkonný ASGI server je aktívny
- Spustený proces reloadera: Sledovač súborov pre automatické reštarty
- Spustenie aplikácie dokončené: FastAPI app úspešne inicializovaná
- Interaktívna dokumentácia dostupná: Navštívte
/docspre automatickú API dokumentáciu
Testovanie FastAPI: Viaceré výkonné prístupy
FastAPI poskytuje niekoľko pohodlných spôsobov, ako otestovať vaše API, vrátane automatickej interaktívnej dokumentácie:
Metóda 1: Interaktívna API dokumentácia (odporúčaná)
- Otvorte prehliadač a choďte na
http://localhost:5000/docs - Uvidíte Swagger UI so všetkými zdokumentovanými koncovými bodmi
- Kliknite na
/hello→ "Try it out" → Zadajte testovaciu správu → "Execute" - Odpoveď uvidíte priamo v prehliadači s správnym formátovaním
Metóda 2: Základný test v prehliadači
- Choďte na
http://localhost:5000pre koreňový endpoint - Choďte na
http://localhost:5000/healthpre kontrolu stavu servera - Týmto potvrdíte, že váš FastAPI server funguje správne
Metóda 2: Test z príkazového riadku (pokročilé)
# Testujte s curl (ak je k dispozícii)
curl -X POST http://localhost:5000/hello \
-H "Content-Type: application/json" \
-d '{"message": "Hello AI!"}'
# Očakávaná odpoveď:
# {"response": "Ahoj! Som tvoj AI asistent. Ako ti môžem dnes pomôcť?"}
Metóda 3: Python testovací skript
# test_api.py - Vytvorte tento súbor na otestovanie vášho API
import requests
import json
# Otestujte API koncový bod
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 so spustením
| Chybové hlásenie | Čo to znamená | Ako to 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 chýba | Skontrolujte svoj .env súbor 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ú Pydantic modelu | Skontrolujte, či formát požiadavky zodpovedá očakávanej schéme |
HTTPException 422 |
Entita sa nedá spracovať | Validácia požiadavky zlyhala, skontrolujte správny formát v /docs |
OpenAI API error |
Overenie AI služby zlyhalo | Overte, či váš GitHub token je správny a má potrebné oprávnenia |
Najlepšie praktiky pre vývoj
Hot Reloading: FastAPI s Uvicorn umožňuje automatický reload pri uložení zmien v Python súboroch. To znamená, že môžete meniť kód a okamžite testovať bez manuálneho reštartu.
# Explicitne povoliť horúce preťaženie
if __name__ == "__main__":
app.run(host="0.0.0.0", port=5000, debug=True) # debug=True povoľuje horúce preťaženie
Logging pre vývoj: Pridajte logovanie, aby ste rozumeli tomu, čo sa deje:
import logging
# Nastaviť protokolovanie
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 je logging užitočný: Počas vývoja presne vidíte, aké požiadavky prichádzajú, aké odpovede AI vracia a kde sa vyskytli chyby. To urýchľuje ladenie.
Konfigurácia pre GitHub Codespaces: Cloudový vývoj jednoducho
GitHub Codespaces je ako mať výkonný vývojový počítač v cloude, ku ktorému pristupujete z ľubovoľného prehliadača. Ak pracujete v Codespaces, je potrebné vykonať niekoľko ďalších krokov, aby bol váš backend prístupný fronendovej časti.
Pochopenie sieťovania v 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 prostredie beží na serveroch GitHubu, preto "localhost" znamená niečo iné. GitHub automaticky vytvára verejné URL pre vaše služby, ale musíte ich správne nakonfigurovať.
Konfigurácia Codespaces krok za krokom
1. Spustite svoj backend server:
cd backend
python api.py
Uvidíte známe spúšťacie 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 spodnom 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ť? Štandardne sú porty v Codespace súkromné (prístupné len vám). Verejný port umožní, aby sa váš frontend (bežiaci v prehliadači) mohol spojiť s backendom.
3. Získajte verejnú URL adresu: Po sprístupnení portu uvidíte URL podobné tejto:
https://your-codespace-name-5000.app.github.dev
4. Aktualizujte konfiguráciu frontendu:
// Vo vašom frontend app.js aktualizujte BASE_URL:
this.BASE_URL = "https://your-codespace-name-5000.app.github.dev";
Pochopenie URL adries Codespace
URL adresy v Codespace majú predvídateľný vzor:
https://[codespace-name]-[port].app.github.dev
Rozdelenie:
codespace-name: Jedinečný identifikátor vášho Codespace (často obsahuje vaše používateľské meno)port: Číslo portu, na ktorom beží služba (5000 pre našu FastAPI aplikáciu)app.github.dev: Doména GitHubu pre aplikácie Codespace
Testovanie nastavenia Codespace
1. Otestujte backend priamo: Otvorte vašu verejnú URL v novom prehliadači. Mali by ste vidieť:
Welcome to the AI Chat API. Send POST requests to /hello with JSON payload containing 'message' field.
2. Testujte pomocou developerských nástrojov prehliadača:
// Otvorte konzolu prehliadača a otestujte svoje 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ístupniť porty) |
| Ukladanie súborov | Lokálny počítač | GitHub repozitár |
| Spolupráca | Ťažké zdieľať prostredie | Ľahké zdieľať odkaz na Codespace |
| Závislosť od internetu | Len pre AI API volania | Nutná pre všetko |
Tipy pre vývoj v Codespaces
Premenné prostredia v Codespaces:
Váš .env súbor funguje rovnako v Codespaces, ale premenné prostredia môžete nastaviť aj priamo v Codespace:
# Nastavte premennú prostredia pre aktuálnu reláciu
export GITHUB_TOKEN="your_token_here"
# Alebo pridajte do vášho .bashrc pre trvalosť
echo 'export GITHUB_TOKEN="your_token_here"' >> ~/.bashrc
Správa portov:
- Codespaces automaticky rozpozná, keď aplikácia začne počúvať na porte
- Môžete presmerovať viacero portov súčasne (užitočné pri pridávaní databázy)
- Porty zostanú prístupné, kým váš Codespace beží
Vývojový pracovný tok:
- Robte zmeny v kóde vo VS Code
- FastAPI sa automaticky preloží (vďaka reload módu Uvicornu)
- Okamžite testujte zmeny cez verejnú URL
- Po ukončení uložte zmeny a pushnite
💡 Tip: Počas vývoja si uložte záložku s URL adresou backendu v Codespace. Pretože názvy Codespace sú stabilné, táto URL sa nezmení, pokiaľ používate ten istý Codespace.
Vytvorenie frontendového chatového rozhrania: Kde sa stretávajú ľudia s AI
Teraz postavíme používateľské rozhranie – časť, ktorá určuje, ako ľudia interagujú s vaším AI asistentom. Podobne ako dizajn pôvodného iPhonu, kladieme dôraz na to, aby bola zložitá technológia intuitívna a prirodzená na používanie.
Pochopenie modernej frontend architektúry
Naše chatové rozhranie bude to, čomu hovoríme "Single Page Application" alebo SPA. Namiesto starého modelu, kde každé kliknutie načítavalo novú stránku, naša appka sa aktualizuje plynulo a okamžite:
Staré weby: Ako čítanie fyzickej knihy – listujete celými novými stránkami
Náš chat: Ako používanie telefónu – všetko plynie a aktualizuje sa hladko a bez prerušenia
graph TD
A[Používateľ napíše správu] --> B[JavaScript zachytí vstup]
B --> C[Overiť a naformátovať dáta]
C --> D[Odoslať do backend API]
D --> E[Zobraziť stav načítania]
E --> F[Prijať odpoveď AI]
F --> G[Aktualizovať chat rozhranie]
G --> H[Pripravené na ďalšiu správu]
classDiagram
class ChatApp {
+messages: HTMLElement
+form: HTMLElement
+input: HTMLElement
+sendButton: HTMLElement
+BASE_URL: string
+API_ENDPOINT: string
+constructor()
+initializeEventListeners()
+handleSubmit(event)
+callAPI(message)
+appendMessage(text, role)
+escapeHtml(text)
+scrollToBottom()
+setLoading(isLoading)
}
ChatApp --> DOM : manipuluje
ChatApp --> FastAPI : posiela požiadavky
Tri piliere frontendového vývoja
Každá frontendová aplikácia – od jednoduchých stránok až po zložité appky ako Discord alebo Slack – je postavená na troch základných technológiách. Považujte ich za základ všetkého, čo na webe vidíte a s čím interagujete:
HTML (Štruktúra): To je váš základ
- Určuje, ktoré prvky existujú (tlačidlá, textové polia, kontajnery)
- Dáva význam obsahu (toto je hlavička, toto je formulár, atď.)
- Vytvára základnú štruktúru, na ktorú sa stavia všetko ostatné
CSS (Prezentácia): To je váš interiérový dizajnér
- Robí všetko pekným (farby, fonty, rozloženia)
- Zabezpečuje responzívnosť na rôznych zariadeniach (mobil, notebook, tablet)
- Vytvára plynulé animácie a vizuálnu spätnú väzbu
JavaScript (Správanie): To je váš mozog
- Reaguje na akcie používateľov (kliknutia, písanie, rolovanie)
- Komunikuje s backendom a aktualizuje stránku
- Robí všetko interaktívnym a dynamickým
Predstavte si to ako 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ý zážitok)
- JavaScript: Mechanické systémy (funkcionalita a interaktivita)
Prečo je dôležitá moderná JavaScript architektúra
Naša chatová 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 ako developerovi rásť:
Architektúra založená na triedach: Organizujeme kód do tried, čo je ako vytváranie plánov pre objekty
Async/Await: Moderný spôsob spracovania operácií trvajúcich nejaký čas (napríklad volania API)
Programovanie riadené udalosťami: Aplikácia reaguje na používateľské akcie (kliknutia, stlačenia kláves) namiesto stáleho cyklu
Manipulácia s DOM: Dynamická aktualizácia obsahu stránky podľa používateľských akcií a odpovedí API
Nastavenie projektovej štruktúry
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:
- Oddelzuje zodpovednosti medzi štruktúru (HTML), správanie (JavaScript) a prezentáciu (CSS)
- Udržiava jednoduchú štruktúru súborov, ktorú je ľahké prehliadať a meniť
- Nasleduje najlepšie webové praktiky pre organizáciu a údržbu
Budovanie HTML základu: Semantická štruktúra pre prístupnosť
Začnime s HTML štruktúrou. Moderný webový vývoj zdôrazňuje "semantický HTML" – používanie HTML elementov, ktoré jasne opisujú svoj účel, nie len vzhľad. To robí vašu aplikáciu prístupnou pre čítačky obrazovky, vyhľadávače a iné nástroje.
Prečo je semantický HTML dôležitý: Predstavte si, že opisujete svoju chatovú appku niekomu cez telefón. Povedali by ste: "je tam hlavička s titulom, hlavná plocha, kde prebiehajú konverzácie, a formulár v spodnej časti, kde sa píšu správy." Semantický HTML používa elementy, 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 jednotlivých HTML prvkov a ich účelu:
Štruktúra dokumentu
<!DOCTYPE html>: Oznamuje prehliadaču, že ide o moderný HTML5 dokument<html lang="en">: Určuje jazyk stránky pre čítačky obrazovky a preklady<meta charset="UTF-8">: Zaisťuje správne kódovanie znakov pre medzinárodný text<meta name="viewport"...>: Umožňuje responzívny dizajn pre mobily riadením zoomu a mierky
Semantické elementy
<header>: Jasne označuje hornú časť s titulom a popisom<main>: Určuje primárnu obsahovú časť (kde sa zobrazujú konverzácie)<form>: Semanticky správny pre vstup používateľa, podporuje správnu navigáciu klávesnicou
Prvky prístupnosti
role="log": Informuje čítačky obrazovky, že táto oblasť obsahuje chronologický záznam správaria-live="polite": Oznamuje nové správy čítačkám obrazovky bez prerušovaniaaria-label: Poskytuje popisné označenia pre ovládacie prvky formulárarequired: Prehliadač kontroluje, že používateľ zadal správu pred odoslaním
Integrácia CSS a JavaScriptu
classatribúty: Poskytujú štýlovacie háky pre CSS (napr.chat-container,input-group)idatribúty: Umožňujú JavaScriptu nájsť a manipulovať s konkrétnymi prvkami- Umiesťovanie skriptu: JavaScript súbor je načítaný na konci, aby sa HTML načítalo ako prvé
Prečo táto štruktúra funguje:
- Logický tok: Hlavička → Hlavný obsah → Vstupný formulár zodpovedá prirodzenému poradiu čítania
- Prístupné pomocou klávesnice: Používatelia môžu prechádzať všetky interaktívne prvky tabulátorom
- Používateľsky prívetivé pre čítačky obrazovky: Jasné orientačné body a popisy pre zrakovo postihnutých
- Responzívnosť na mobily: Meta tag viewport umožňuje responzívny dizajn
- Postupné vylepšovanie: Funguje aj keď CSS alebo JavaScript nie sú načítané
Pridanie interaktívneho JavaScriptu: Logika modernej webovej aplikácie
Teraz vytvorme JavaScript, ktorý oživí naše chatové rozhranie. Použijeme moderné javascriptové vzory, s ktorými sa stretnete v profesionálnom webovom vývoji, vrátane ES6 tried, async/await a programovania založeného na udalostiach.
Pochopenie modernej architektúry JavaScriptu
Namiesto písania procedurálneho kódu (séria funkcií spustených v poradí) vytvoríme architektúru založenú na triedach. Predstavte si triedu ako plán na vytváranie objektov – podobne ako architektov plán 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á dohromady
- Znovupoužiteľnosť: Môžete na rovnakej stránke vytvoriť viacero inštancií chatu
- Údržba: Jednoduchšie ladovanie a modifikácia špecifických funkcií
- Profesionálny štandard: Tento vzor sa používa v rámci ako React, Vue a Angular
Vytvorte app.js s týmto moderným, dobre štruktúrovaným JavaScriptom:
// app.js - Logika modernej chat aplikácie
class ChatApp {
constructor() {
// Získajte odkazy na DOM elementy, ktoré budeme potrebovať manipulovať
this.messages = document.getElementById("messages");
this.form = document.getElementById("chatForm");
this.input = document.getElementById("messageInput");
this.sendButton = document.getElementById("sendBtn");
// Nastavte URL adresu vášho backendu tu
this.BASE_URL = "http://localhost:5000"; // Aktualizujte to podľa vášho prostredia
this.API_ENDPOINT = `${this.BASE_URL}/hello`;
// Nastavte poslucháčov udalostí pri vytvorení chat aplikácie
this.initializeEventListeners();
}
initializeEventListeners() {
// Počúvajte odoslanie formulára (keď používateľ klikne na Odošli alebo stlačí Enter)
this.form.addEventListener("submit", (e) => this.handleSubmit(e));
// Tiež počúvajte kláves Enter v poli pre zadávanie (lepšie používateľské prostredie)
this.input.addEventListener("keypress", (e) => {
if (e.key === "Enter" && !e.shiftKey) {
e.preventDefault();
this.handleSubmit(e);
}
});
}
async handleSubmit(event) {
event.preventDefault(); // Zabraňte obnove stránky po odoslaní formulára
const messageText = this.input.value.trim();
if (!messageText) return; // Neodosielajte prázdne správy
// Poskytnite používateľovi spätnú väzbu, že sa niečo deje
this.setLoading(true);
// Pridajte správu používateľa do chatu okamžite (optimistické UI)
this.appendMessage(messageText, "user");
// Vymažte pole pre zadávanie, aby používateľ mohol napísať ďalšiu správu
this.input.value = '';
try {
// Zavolajte AI API a čakajte na odpoveď
const reply = await this.callAPI(messageText);
// Pridajte odpoveď AI do chatu
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 {
// Opätovne povoľte rozhranie bez ohľadu na úspech alebo zlyhanie
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";
}
}
// Inicializujte chat aplikáciu pri načítaní stránky
document.addEventListener("DOMContentLoaded", () => {
new ChatApp();
});
Pochopenie každého javascriptového konceptu
Štruktúra ES6 triedy:
class ChatApp {
constructor() {
// Toto sa spustí, keď vytvoríte novú inštanciu ChatApp
// Je to ako funkcia "setup" pre váš chat
}
methodName() {
// Metódy sú funkcie, ktoré patria do triedy
// Môžu pristupovať k vlastnostiam triedy pomocou "this"
}
}
Vzorec Async/Await:
// Starý spôsob (callback peklo):
fetch(url)
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
// Moderný spôsob (async/await):
try {
const response = await fetch(url);
const data = await response.json();
console.log(data);
} catch (error) {
console.error(error);
}
Programovanie založené na udalostiach: Namiesto neustáleho kontrolovania, či sa niečo stalo, „počúvame“ udalosti:
// Keď je formulár odoslaný, spusti handleSubmit
this.form.addEventListener("submit", (e) => this.handleSubmit(e));
// Keď je stlačená klávesa Enter, tiež spusti handleSubmit
this.input.addEventListener("keypress", (e) => { /* ... */ });
Manipulácia s DOM:
// Vytvoriť nové prvky
const messageElement = document.createElement("div");
// Upraviť ich vlastnosti
messageElement.className = "message user";
messageElement.innerHTML = "Hello world!";
// Pridať na stránku
this.messages.appendChild(messageElement);
Bezpečnosť a najlepšie praktiky
Prevencia XSS:
escapeHtml(text) {
const div = document.createElement('div');
div.textContent = text; // Toto automaticky unikne HTML
return div.innerHTML;
}
Prečo je to dôležité: Ak používateľ napíše <script>alert('hack')</script>, táto funkcia zabezpečí, že sa zobrazí ako text, nie ako vykonaný kód.
Spracovanie chýb:
try {
const reply = await this.callAPI(messageText);
this.appendMessage(reply, "assistant");
} catch (error) {
// Zobraziť používateľsky prívetivú chybu namiesto toho, aby aplikácia spadla
this.appendMessage("Sorry, I'm having trouble...", "error");
}
Úvahy o používateľskej skúsenosti:
- Optimistické UI: Pridajte správu používateľa okamžite, nečakajte na odpoveď servera
- Stavy načítania: Deaktivujte tlačidlá a zobrazte "Odosielanie..." počas čakania
- Automatické posúvanie: Udržujte viditeľné najnovšie správy
- Validácia vstupu: Neposielajte prázdne správy
- Klávesové skratky: Kláves Enter odošle správu (ako v reálnych chat aplikáciách)
Pochopenie toku aplikácie
- Stránka sa načíta → spustí sa udalosť
DOMContentLoaded→ vytvorí sanew ChatApp() - Beží konštruktor → Získa referencie na DOM elementy → Nastaví poslucháčov udalostí
- Používateľ píše správu → Stlačí Enter alebo klikne na Odoslať → Spustí sa
handleSubmit - handleSubmit → Validuje vstup → Zobrazí stav načítania → Zavolá API
- API odpovedá → Pridá správu AI do chatu → Znovu povolí rozhranie
- Pripravený na ďalšiu správu → Používateľ môže pokračovať v chatovaní
Táto architektúra je škálovateľná – môžete ľahko pridať funkcie ako úprava správ, nahrávanie súborov, alebo viaceré konverzačné vlákna bez prepísania základnej štruktúry.
🎯 Pedagogická kontrola: Moderná frontend architektúra
Pochopenie architektúry: Implementovali ste kompletnú jednorazovú aplikáciu s použitím moderných JavaScript vzorov. To reprezentuje profesionálnu úroveň frontend vývoja.
Osvojené kľúčové koncepty:
- ES6 triedna architektúra: Organizovaná, udržiavateľná štruktúra kódu
- Async/Await vzorce: Moderné asynchrónne programovanie
- Programovanie založené na udalostiach: Reaktívny dizajn užívateľského rozhrania
- Najlepšie praktiky bezpečnosti: Prevencia XSS a validácia vstupov
Prepojenie s praxou: Vzory, ktoré ste sa naučili (architektúra založená na triedach, asynchrónne operácie, manipulácia s DOM), sú základom moderných frameworkov ako React, Vue a Angular. Budujete s rovnakým architektonickým myslením ako používa produkčný softvér.
Reflexná otázka: Ako by ste rozšírili túto chatovú aplikáciu, aby zvládala viaceré konverzácie alebo autentifikáciu používateľov? Zamyslite sa nad potrebnými architektonickými zmenami a ako by sa vyvíjala štruktúra triedy.
Štýlovanie vášho chatového rozhrania
Teraz vytvorme moderné, vizuálne príťažlivé chatové rozhranie pomocou CSS. Dobré štýlovanie robí vašu aplikáciu profesionálnejšou a zlepšuje celkový používateľský zážitok. Použijeme moderné CSS vlastnosti ako Flexbox, CSS Grid a vlastné premenné 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;
}
}
Pochopenie CSS architektúry:
- Používa CSS vlastné premenné (variables) pre konzistentné tematizovanie a jednoduchú údržbu
- Implementuje Flexbox rozloženie pre responzívny dizajn a správne zarovnanie
- Zahŕňa plynulé animácie pre zobrazovanie správ bez rušenia
- Poskytuje vizuálne rozlíšenie medzi správami používateľa, odpoveďami AI a stavmi chýb
- Podporuje responzívny dizajn vhodný pre desktop aj mobilné zariadenia
- Zohľadňuje prístupnosť s preferenciami zníženia pohybu a vhodnými kontrastami
- Ponúka podporu tmavého režimu podľa preferencií používateľa systému
Konfigurácia URL vášho backendu
Posledným krokom je aktualizácia BASE_URL vo vašom JavaScripte tak, aby zodpovedala vášmu backend serveru:
// Pre miestny vývoj
this.BASE_URL = "http://localhost:5000";
// Pre GitHub Codespaces (nahraďte svojou skutočnou URL)
this.BASE_URL = "https://your-codespace-name-5000.app.github.dev";
Určenie URL backendu:
- Lokálny vývoj: Použite
http://localhost:5000, ak beží frontend a backend lokálne - Codespaces: Nájdite URL backendu v záložke Ports po sprístupnení portu 5000
- Produkcia: Nahraďte skutočnou doménou pri nasadzovaní na hosting
💡 Tip na testovanie: Backend môžete priamo otestovať otvorením hlavnej URL vo vašom prehliadači. Mali by ste vidieť uvítaciu správu od FastAPI servera.
Testovanie a nasadenie
Teraz, keď máte hotové frontend aj backend komponenty, otestujme ich spoluprácu a preskúmajme možnosti nasadenia, ako zdieľať váš chatový asistent s ostatnými.
Lokálny testovací workflow
Postupujte podľa týchto krokov pre otestovanie celej vašej aplikácie:
graph TD
A[Spustiť backendový server] --> B[Konfigurovať premenné prostredia]
B --> C[Testovať API koncové body]
C --> D[Otvoriť frontend v prehliadači]
D --> E[Testovať funkčnosť chatu]
E --> F[Ladiť prípadné problémy]
Krok za krokom testovací proces:
-
Spustite backend server:
cd backend source venv/bin/activate # alebo venv\Scripts\activate vo Windows python api.py -
Overte, že API funguje:
- Otvorte
http://localhost:5000vo vašom prehliadači - Mali by ste vidieť uvítaciu správu od FastAPI servera
- Otvorte
-
Otvorte frontend:
- Prejdite do priečinka frontend
- Otvorte
index.htmlvo webovom prehliadači - Alebo použite VS Code rozšírenie Live Server 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 správne odpovedá
- Skontrolujte konzolu prehliadača pre prípadné JavaScript chyby
Riešenie bežných problémov
| Problém | Príznaky | Riešenie |
|---|---|---|
| CORS chyba | Frontend nemôže dosiahnuť backend | Skontrolujte správnu konfiguráciu CORSMiddleware vo FastAPI |
| Chyba API kľúča | Odpovede 401 Unauthorized | Skontrolujte vašu premennú prostredia GITHUB_TOKEN |
| Pripojenie odmietnuté | Sieťové chyby vo fronte | Overte URL backendu a či beží Flask server |
| Žiadna odpoveď AI | Prázdne alebo chybné odpovede | Skontrolujte backend logy kvóty API alebo autentifikácie |
Bežné kroky ladovania:
- Kontrola Konzoly v nástrojoch pre vývojárov pre JavaScript chyby
- Overenie Záložky Sieť (Network) ukazujú úspešné API požiadavky a odpovede
- Preskúmanie výstupu backend terminálu pre chyby Pythonu alebo API problémy
- Potvrdenie načítania a prístupu k premenným prostredia
📈 Váš časový rámec ovládania vývoja AI aplikácie
timeline
title Kompletná cesta vývoja AI aplikácií
section Základy AI
Pochopenie generatívnej AI
: Ovládnuť koncepty rozpoznávania vzorov
: Ovládnuť riadenie parametrov AI
: Naučiť sa techniky promptového inžinierstva
Integrácia modelov GitHub
: Orientovať sa na platformách AI služieb
: Bezpečne spravovať autentifikáciu
: Optimalizovať parametre modelov
section Vývoj backendu
Architektúra Python API
: Stavať aplikácie FastAPI
: Implementovať asynchrónne operácie
: Vytvárať zabezpečené koncové body
Integrácia AI služieb
: Pripojiť sa k externým AI API
: Riešiť obmedzenia rýchlosti požiadaviek
: Implementovať hranice chýb
section Zvládnutie frontendu
Moderné JavaScript vzory
: Ovládnuť architektúru tried ES6
: Implementovať async/await toky
: Stavať responzívne rozhrania
Užívateľský zážitok v reálnom čase
: Vytvárať dynamické chatovacie rozhrania
: Riešiť stavy načítania
: Optimalizovať interakcie používateľov
section Pripravenosť na produkciu
Bezpečnosť a výkon
: Implementovať bezpečnú správu tokenov
: Predchádzať zraniteľnostiam XSS
: Optimalizovať výkon API
Profesionálne nasadenie
: Stavať škálovateľné architektúry
: Vytvárať udržiavateľný kód
: Dokumentovať vývojové procesy
🎓 Uzávierkový míľnik: Úspešne ste vytvorili kompletnú AI aplikáciu poháňanú rovnakými technológiami a architektonickými vzormi, ktoré používajú moderní AI asistenti. Tieto schopnosti predstavujú prienik tradičného webového vývoja a špičkovej AI integrácie.
🔄 Schopnosti na ďalšej úrovni:
- Pripravení preskúmať pokročilé AI rámce (LangChain, LangGraph)
- Zaúčtovaní na stavbu multimodálnych AI aplikácií (text, obrázok, hlas)
- Osvojený základ pre implementáciu vektorových databáz a vyhľadávacích systémov
- Položený základ pre strojové učenie a doladenie AI modelov
Výzva GitHub Copilot Agent 🚀
Využite režim Agenta na splnenie nasledujúcej výzvy:
Popis: Vylepšite chatový asistent pridaním histórie konverzácií a trvalosti správ. Táto výzva vám pomôže pochopiť, ako spravovať stav v chat aplikáciách a implementovať ukladanie dát pre lepší používateľský zážitok.
Zadanie: Upravte chatovú aplikáciu tak, aby zahŕňala históriu konverzácií, ktorá pretrváva medzi reláciami. Pridajte funkciu ukladania správ do lokálneho úložiska (localStorage), zobrazte históriu konverzácie pri načítaní stránky a pridajte tlačidlo „Vyčistiť históriu“. Implementujte tiež indikátory písania a časové pečiatky správ, aby bol chat realistickejší.
Viac o agent mode sa dozviete tu.
Zadanie: Vytvorte svojho osobného AI asistenta
Teraz si vytvoríte vlastnú implementáciu AI asistenta. Namiesto jednoduchého kopírovania ukážkového kódu máte príležitosť aplikovať koncepty na tvorbu niečoho, čo odráža vaše záujmy a použitie.
Požiadavky projektu
Nastavme váš projekt s čistou, usporiadanou š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
Základné implementačné úlohy
Backend vývoj:
- Prevezmite naše FastAPI kódy a prispôsobte si ich
- Vytvorte jedinečnú AI osobnosť – možno užitočný kuchársky asistent, kreatívny partner na písanie alebo študijný kamarát?
- Pridajte spoľahlivé spracovanie chýb, aby sa aplikácia nezrútila pri problémoch
- Napíšte zrozumiteľnú dokumentáciu pre kohokoľvek, kto chce pochopiť vašu API
Frontend vývoj:
- Vytvorte chatové rozhranie, ktoré je intuitívne a prívetivé
- Napíšte čistý, moderný JavaScript, na ktorý budete hrdí predviesť iným vývojárom
- Navrhnite vlastné štýly, ktoré odzrkadľujú osobnosť vášho AI – zábavný a farebný? Čistý a minimalistický? Celkom na vás!
- Zabezpečte, že skvele funguje na telefónoch aj počítačoch
Požiadavky na personalizáciu:
- Vyberte jedinečné meno a osobnosť 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, aby ladil s atmosférou asistenta
- Napíšte pútavú uvítaciu správu, ktorá povzbudí ľudí začať chatovať
- Otestujte svojho asistenta s rôznymi typmi otázok a sledujte odpovede
Nápady na rozšírenie (voliteľné)
Chcete projekt posunúť na ďalšiu úroveň? Tu je niekoľko zábavných nápadov na preskúmanie:
| Funkcia | Popis | Zručnosti, ktoré si precvičíte |
|---|---|---|
| História správ | Zapamätajte si konverzácie aj po obnovení stránky | Práca s localStorage, manipulácia s JSON |
| Indikátory písania | Zobrazte „AI píše...“ počas čakania na odpoveď | CSS animácie, asynchrónne programovanie |
| Časové značky správ | Ukážte, kedy bola každá správa odoslaná | Formátovanie dátumu/času, UX dizajn |
| Export chatu | Umožnite používateľom stiahnuť si konverzáciu | Práca so súbormi, export dát |
| Prepínanie tém | Prepínač svetlého/tmavého režimu | CSS premenné, používateľské preferencie |
| Hlasový vstup | Pridajte funkciu prevodu reči na text | Web API, prístupnosť |
Testovanie a dokumentácia
Zabezpečenie kvality:
- Testujte aplikáciu s rôznymi vstupmi a hraničnými prípadmi
- Overte responzívnosť dizajnu na rôznych veľkostiach obrazovky
- Skontrolujte prístupnosť s navigáciou klávesnicou a čítačkami obrazovky
- Validujte HTML a CSS pre dodržiavanie štandardov
Požiadavky na dokumentáciu:
- Napíšte README.md, ktorý vysvetľuje projekt a ako ho spustiť
- Priložte screenshoty chatového rozhrania v akcii
- Zdokumentujte všetky jedinečné funkcie alebo vlastné úpravy
- Poskytnite jasné inštrukcie na nastavenie pre iných vývojárov
Pokyny na odovzdanie
Projektové výstupy:
- Kompletný priečinok projektu so všetkým zdrojovým kódom
- README.md s popisom projektu a inštrukciami na spustenie
- Screenshoty prezentujúce vášho chatového 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 chatový asistent podľa očakávania?
- Kvalita kódu: Je kód dobre organizovaný, komentovaný a udržiavateľný?
- Dizajn: Je rozhranie vizuálne príťažlivé a používateľsky prívetivé?
- Kreativita: Ako jedinečná a personalizovaná je vaša implementácia?
- Dokumentácia: Sú inštrukcie na nastavenie jasné a kompletné?
💡 Tip na úspech: Začnite s základnými požiadavkami, potom pridajte rozšírenia, keď všetko funguje. Zamerajte sa na vytvorenie vycibreného jadra pred implementáciou pokročilých funkcií.
Riešenie
Bonusové výzvy
Pripravení posunúť svojho AI asistenta na ďalšiu úroveň? Vyskúšajte tieto pokročilé výzvy, ktoré prehĺbia vaše chápanie AI integrácie a webového vývoja.
Personalizácia osobnosti
Skutočná mágia sa deje, keď dáte svojmu AI asistentovi jedinečnú osobnosť. Experimentujte s rôznymi systémovými promptmi pre 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 na písanie:
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.")
Frontendové vylepšenia
Premeňte svoje chatové rozhranie týmito vizuálnymi a funkčnými vylepšeniami:
Pokročilé CSS funkcie:
- Implementujte plynulé animácie a prechody správ
- Pridajte vlastné dizajny bublín chatu s CSS tvarmi a gradientmi
- Vytvorte animáciu indikátora písania, keď AI „premýšľa“
- Navrhnite reakcie emoji alebo hodnotiaci systém správ
JavaScript vylepšenia:
- Pridajte klávesové skratky (Ctrl+Enter na odoslanie, Escape na vyčistenie vstupu)
- Implementujte vyhľadávanie a filtrovanie správ
- Vytvorte funkciu exportu konverzácií (stiahnuť ako text alebo JSON)
- Pridajte automatické ukladanie do localStorage pre zabránenie strate správ
Pokročilá AI integrácia
Viaceré AI osobnosti:
- Vytvorte rozbaľovací zoznam na prepínanie medzi rôznymi AI osobnosťami
- Uložte preferovanú osobnosť používateľa v localStorage
- Implementujte prepínanie kontextu, ktoré udržiava tok konverzácie
Funkcie inteligentnej odpovede:
- Pridajte vedomie kontextu konverzácie (AI si pamätá predchádzajúce správy)
- Implementujte inteligentné návrhy na základe témy konverzácie
- Vytvorte rýchle tlačidlá odpovede pre bežné otázky
🎯 Cieľ učenia: Tieto bonusové výzvy vám pomôžu pochopiť pokročilé vzory vývoja webu 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 chat asistenta s podporou AI od základov. Tento projekt vám poskytol praktické skúsenosti s modernými webovými technológiami a integráciou AI – zručnosti, ktoré sú čoraz cennejšie v dnešnom tech prostredí.
Čo ste dosiahli
Počas tejto lekcie ste zvládli niekoľko kľúčových technológií a konceptov:
Backend vývoj:
- Integrovali ste sa s GitHub Models API pre AI funkcionalitu
- Postavili ste RESTful API pomocou Flask s riadnym spracovaním chýb
- Implementovali ste bezpečnú autentifikáciu pomocou environmentálnych premenných
- Nakonfigurovali ste CORS pre požiadavky medzi frontend a backend
Frontend vývoj:
- Vytvorili ste responzívne chat rozhranie pomocou semantického HTML
- Implementovali ste moderný JavaScript s async/await a architektúrou založenou na triedach
- Navrhli ste pútavé užívateľské rozhranie pomocou CSS Grid, Flexbox a animácií
- Pridali ste funkcie prístupnosti a princípy responzívneho dizajnu
Full-stack integrácia:
- Prepojili ste frontend a backend cez HTTP API volania
- Spracovávali ste interakcie používateľa v reálnom čase a asynchrónny tok dát
- Implementovali ste spracovanie chýb a spätnú väzbu pre používateľa v celej aplikácii
- Otestovali ste kompletný pracovný tok aplikácie od vstupu používateľa až po odpoveď AI
Kľúčové výsledky učenia
mindmap
root((Dovednosti AI Chat Aplikácie))
API Integration
Authentication
Error Handling
Async Programming
Web Development
HTML5 Semantics
Modern CSS
ES6+ JavaScript
User Experience
Responzívny Dizajn
Prístupnosť
Interakcia v Reálnom Čase
AI Understanding
Návrh Promptov
Parametre Modelu
Tok Konverzácie
Tento projekt vás zoznámil so základmi tvorby AI-poháňaných aplikácií, ktoré predstavujú 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 interaktívne.
Profesionálne uplatnenie
Zručnosti, ktoré ste získali v tejto lekcii, sa priamo uplatnia v moderných kariérach softvérového vývoja:
- Full-stack webový vývoj s modernými frameworkmi a API
- Integrácia AI vo webových a mobilných aplikáciách
- Návrh a vývoj API pre mikroservisné architektúry
- Vývoj užívateľského rozhrania so zameraním na prístupnosť a responzívny dizajn
- DevOps praktiky vrátane konfigurácie prostredia a nasadenia
Pokračovanie vo vašej AI vývojovej ceste
Ďalšie kroky učenia:
- Preskúmajte pokročilejšie AI modely a API (GPT-4, Claude, Gemini)
- Naučte sa techniky prompt inžinierstva pre lepšie odpovede AI
- Študujte návrh konverzácií a princípy používateľského zážitku chatbotov
- Preskúmajte bezpečnosť AI, etiku a zodpovedné praktiky vývoja AI
- Vytvorte zložitejšie aplikácie s pamäťou konverzácií a kontextovým povedomím
Návrhy pokročilých projektov:
- Viacužívateľské chat miestnosti s AI moderovaním
- AI-poháňané chatboty pre zákaznícku podporu
- Vzdelávacie tutoriály s personalizovaným učením
- Kreatívni spoluautori písania s rôznymi AI osobnosťami
- Asistenti technickej dokumentácie pre vývojárov
Začíname s GitHub Codespaces
Chcete si tento projekt vyskúšať v cloudovom vývojovom prostredí? GitHub Codespaces poskytuje kompletné vývojové prostredie priamo v prehliadači, ideálne na experimentovanie s AI aplikáciami bez nutnosti lokálneho nastavenia.
Nastavenie vývojového prostredia
Krok 1: Vytvorte z šablóny
- Prejdite na Web Dev For Beginners repository
- Kliknite na "Use this template" v pravom hornom rohu (uistite sa, že ste prihlásení do GitHubu)
Krok 2: Spustite Codespaces
- Otvorte práve vytvorený repozitár
- Kliknite na zelené tlačidlo "Code" a vyberte "Codespaces"
- Zvoľte "Create codespace on main" pre spustenie vývojového prostredia
Krok 3: Konfigurácia prostredia Po načítaní Codespace budete mať prístup k:
- Predinštalovanému Python, Node.js a všetkým potrebným vývojovým nástrojom
- VS Code rozhraniu s rozšíreniami pre webový vývoj
- Terminálu pre spustenie backendových a frontendových serverov
- Presmerovaniu portov na testovanie vašich aplikácií
Čo Codespaces poskytuje:
- Odstraňuje potrebu lokálneho nastavenia a konfigurácie prostredia
- Zabezpečuje jednotné vývojové prostredie na rôznych zariadeniach
- Obsahuje predkonfigurované nástroje a rozšírenia pre webový vývoj
- Ponúka plynulú integráciu s GitHubom pre správu verzií a spoluprácu
🚀 Profesionálna rada: Codespaces je ideálne na učenie a prototypovanie AI aplikácií, pretože všetko zložité nastavenie prostredia zvládne automaticky, čím vám umožní sústrediť sa na tvorbu a učenie, nie na riešenie konfigurácie.
Zrieknutie sa zodpovednosti: Tento dokument bol preložený pomocou AI prekladateľskej služby Co-op Translator. Aj keď sa snažíme o presnosť, vezmite prosím na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho pôvodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre dôležité informácie sa odporúča profesionálny ľudský preklad. Nie sme zodpovední za akékoľvek nedorozumenia alebo nesprávne výklady vyplývajúce z použitia tohto prekladu.