84 KiB

Raw Blame History Unescape Escape

Vytvořte chatovacího asistenta s AI

Pamatujete si na Star Trek, kdy posádka neformálně komunikovala s počítačem lodi, kladla mu složité otázky a dostávala promyšlené odpovědi? Co v 60. letech vypadalo jako čistá sci-fi, je nyní něco, co můžete vytvořit pomocí webových technologií, které už znáte.

V této lekci vytvoříme chatovacího asistenta s umělou inteligencí pomocí HTML, CSS, JavaScriptu a integrace backendu. Zjistíte, jak mohou dovednosti, které jste se učili, propojit s výkonnými AI službami, které rozumí kontextu a generují smysluplné odpovědi.

Představte si AI jako přístup k obrovské knihovně, která nejenže dokáže najít informace, ale také je syntetizovat do koherentních odpovědí přizpůsobených vašim konkrétním otázkám. Místo prohledávání tisíců stránek získáte přímé, kontextové odpovědi.

Integrace probíhá prostřednictvím známých webových technologií, které spolupracují. HTML vytváří rozhraní chatu, CSS se stará o vizuální design, JavaScript spravuje interakce uživatele a backendové API vše propojuje s AI službami. Je to podobné jako spolupráce různých sekcí orchestru při tvorbě symfonie.

V podstatě budujeme most mezi přirozenou lidskou komunikací a strojovým zpracováním. Naučíte se jak technickou implementaci integrace AI služeb, tak i návrhové vzory, které činí interakce intuitivními.

Na konci této lekce vám integrace AI nebude připadat jako tajemný proces, ale spíše jako další API, se kterým můžete pracovat. Pochopíte základní vzory, které pohánějí aplikace jako ChatGPT a Claude, a to pomocí stejných principů webového vývoje, které jste se učili.

Takto bude váš hotový projekt vypadat:

Porozumění AI: Od tajemství k mistrovství

Než se pustíme do kódu, pojďme si ujasnit, s čím pracujeme. Pokud jste už někdy používali API, znáte základní vzor: odeslat požadavek, přijmout odpověď.

API pro AI fungují podobně, ale místo získávání předem uložených dat z databáze generují nové odpovědi na základě vzorů naučených z obrovského množství textu. Je to jako rozdíl mezi katalogovým systémem knihovny a znalým knihovníkem, který dokáže syntetizovat informace z více zdrojů.

Co vlastně znamená "Generativní AI"?

Představte si, jak Rosettská deska umožnila vědcům porozumět egyptským hieroglyfům tím, že našli vzory mezi známými a neznámými jazyky. AI modely fungují podobně – hledají vzory v obrovském množství textu, aby pochopily, jak jazyk funguje, a poté tyto vzory využívají k generování vhodných odpovědí na nové otázky.

Jednoduché srovnání:

Tradiční databáze: Jako když žádáte o svůj rodný list – pokaždé dostanete stejný dokument
Vyhledávač: Jako když žádáte knihovníka, aby našel knihy o kočkách – ukáže vám, co je k dispozici
Generativní AI: Jako když se ptáte znalého přítele na kočky – řekne vám zajímavé věci svými vlastními slovy, přizpůsobené tomu, co chcete vědět

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

Jak se AI modely učí (jednodušená verze)

AI modely se učí prostřednictvím expozice obrovským datovým sadám obsahujícím texty z knih, článků a konverzací. Během tohoto procesu identifikují vzory v:

Struktuře myšlenek v psané komunikaci
Slovních spojeních, která se často objevují společně
Typickém průběhu konverzací
Kontextových rozdílech mezi formální a neformální komunikací

Je to podobné jako když archeologové rozlušťují starověké jazyky: analyzují tisíce příkladů, aby pochopili gramatiku, slovní zásobu a kulturní kontext, a nakonec dokážou interpretovat nové texty pomocí naučených vzorů.

Proč GitHub Models?

Používáme GitHub Models z praktického důvodu – poskytuje nám přístup k AI na podnikové úrovni, aniž bychom museli nastavovat vlastní AI infrastrukturu (což, věřte mi, teď nechcete dělat!). Je to jako používat API pro počasí místo pokusu o předpověď počasí sami tím, že všude rozmístíte meteorologické stanice.

Je to v podstatě "AI jako služba" a nejlepší na tom je? Začít je zdarma, takže můžete experimentovat, aniž byste se museli obávat vysokých nákladů.

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 pro naši backendovou integraci, která poskytuje přístup k profesionálním AI schopnostem prostřednictvím rozhraní přívětivého pro vývojáře. GitHub Models Playground slouží jako testovací prostředí, kde můžete experimentovat s různými AI modely a pochopit jejich schopnosti před jejich implementací do kódu.

Co dělá playground tak užitečným:

Vyzkoušejte různé AI modely jako GPT-4o-mini, Claude a další (vše zdarma!)
Otestujte své nápady a výzvy před psaním kódu
Získejte připravené úryvky kódu ve vašem oblíbeném programovacím jazyce
Upravte nastavení jako úroveň kreativity a délku odpovědi, abyste viděli, jak ovlivňují výstup

Jakmile si trochu pohrajete, stačí kliknout na záložku "Code" a vybrat svůj programovací jazyk, abyste získali implementační kód, který potřebujete.

Nastavení backendové integrace v Pythonu

Nyní implementujeme integraci AI pomocí Pythonu. Python je skvělý pro AI aplikace díky své jednoduché syntaxi a výkonným knihovnám. Začneme s kódem z GitHub Models playground a poté ho upravíme do znovupoužitelné funkce připravené pro produkci.

Porozumění základní implementaci

Když si stáhnete Python kód z playgroundu, dostanete něco, co vypadá takto. Nebojte se, pokud to na první pohled vypadá složitě – projdeme si to krok za krokem:

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

Co se v tomto kódu děje:

Importujeme nástroje, které potřebujeme: os pro čtení environmentálních proměnných a OpenAI pro komunikaci s AI
Nastavujeme klienta OpenAI, aby ukazoval na servery GitHubu místo přímo na OpenAI
Autentizujeme pomocí speciálního GitHub tokenu (více o tom za chvíli!)
Strukturalizujeme naši konverzaci s různými "rolemi" – je to jako nastavení scény pro divadelní hru
Odesíláme náš požadavek na AI s některými parametry pro jemné doladění
Extrahujeme skutečný text odpovědi ze všech dat, která se vrátí

Porozumění rolím zpráv: Rámec AI konverzace

Konverzace s AI používají specifickou strukturu s různými "rolemi", které mají odlišné účely:

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

Představte si to jako režii divadelní hry:

Role systému: Jako scénické pokyny pro herce – říká AI, jak se chovat, jakou osobnost mít a jak odpovídat
Role uživatele: Skutečná otázka nebo zpráva od osoby používající vaši aplikaci
Role asistenta: Odpověď AI (tuto roli neposíláte, ale objevuje se v historii konverzace)

Analogická situace v reálném světě: Představte si, že představujete svého přítele někomu na večírku:

Zpráva systému: "Tohle je moje kamarádka Sarah, je to doktorka, která skvěle vysvětluje lékařské koncepty jednoduchými slovy"
Zpráva uživatele: "Můžete mi vysvětlit, jak fungují vakcíny?"
Odpověď asistenta: Sarah odpovídá jako přátelská doktorka, ne jako právník nebo kuchař

Porozumění parametrům AI: Jemné ladění chování odpovědí

Číselné parametry v API voláních AI kontrolují, jak model generuje odpovědi. Tato nastavení vám umožňují upravit chování AI pro různé případy použití:

Teplota (0.0 až 2.0): Ovladač kreativity

Co dělá: Řídí, jak kreativní nebo předvídatelné budou odpovědi AI.

Představte si to jako úroveň improvizace jazzového hudebníka:

Teplota = 0.1: Hraje pokaždé stejnou melodii (velmi předvídatelné)
Teplota = 0.7: Přidává nějaké vkusné variace, ale zůstává rozpoznatelný (vyvážená kreativita)
Teplota = 1.5: Plná experimentální improvizace s nečekanými zvraty (velmi nepředvídatelné)

# 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+): Ovladač délky odpovědi

Co dělá: Nastavuje limit na délku odpovědi AI.

Představte si tokeny jako přibližně ekvivalentní slovům (asi 1 token = 0.75 slova v angličtině):

max_tokens=50: Krátké a výstižné (jako textová zpráva)
max_tokens=500: Pěkný odstavec nebo dva
max_tokens=2000: Podrobný výklad s příklady

# 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): Parametr zaměření

Co dělá: Řídí, jak moc se AI soustředí na nejpravděpodobnější odpovědi.

Představte si AI s obrovskou slovní zásobou, seřazenou podle pravděpodobnosti každého slova:

top_p=0.1: Zvažuje pouze 10 % nejpravděpodobnějších slov (velmi zaměřené)
top_p=0.9: Zvažuje 90 % možných slov (více kreativní)
top_p=1.0: Zvažuje všechno (maximální rozmanitost)

Například: Pokud se zeptáte "Obloha je obvykle..."

Nízké top_p: Téměř jistě odpoví "modrá"
Vysoké top_p: Může odpovědět "modrá", "zamračená", "rozlehlá", "měnící se", "krásná" atd.

Spojení všeho dohromady: Kombinace parametrů pro různé případy použití

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

Proč na těchto parametrech záleží: Různé aplikace potřebují různé typy odpovědí. Bot zákaznické podpory by měl být konzistentní a faktický (nízká teplota), zatímco asistent pro kreativní psaní by měl být nápaditý a rozmanitý (vysoká teplota). Porozumění těmto parametrům vám dává kontrolu nad osobností a stylem odpovědí 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))

Porozumění této vylepšené funkci:

Přijímá dva parametry: uživatelský dotaz a volitelnou systémovou zprávu
Poskytuje výchozí systémovou zprávu pro obecné chování asistenta
Používá správné typové nápovědy Pythonu pro lepší dokumentaci kódu
Vrací pouze obsah odpovědi, což usnadňuje použití v našem webovém API
Zachovává stejné parametry modelu pro konzistentní chování AI

Kouzlo systémových výzev: Programování osobnosti AI

Pokud parametry kontrolují, jak AI přemýšlí, systémové výzvy kontrolují, kým AI si myslí, že je. To je upřímně jedna z nejúžasnějších částí práce s AI – v podstatě dáváte AI kompletní osobnost, úroveň odbornosti a styl komunikace.

Představte si systémové výzvy jako obsazování různých herců do různých rolí: Místo jednoho obecného asistenta můžete vytvořit specializované odborníky pro různé situace. Potřebujete trpělivého učitele? Kreativního partnera pro brainstorming? Neústupného obchodního poradce? Stačí změnit systémovou výzvu!

Proč jsou systémové výzvy tak silné

Tady je fascinující část: AI modely byly vyškoleny na nesčetných konverzacích, kde lidé přijímají různé role a úrovně odbornosti. Když dáte AI konkrétní roli, je to jako přepnutí přepínače, který aktivuje všechny tyto naučené vzory.

Je to jako metoda herectví pro AI: Řekněte herci "jste moudrý starý profesor" a sledujte, jak automaticky upraví své držení těla, slovní zásobu a způsoby. AI dělá něco pozoruhodně podobného s jazykovými vzory.

Tvorba efektivních systémových výzev: Umění a věda

Anatomie skvělé systémové výzvy:

Role/Identita: Kdo je AI?
Odbornost: Co ví?
Styl komunikace: Jak mluví?
Specifické pokyny: Na co by se měla zaměřit?

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

Příklady systémových výzev s kontextem

Podívejme se, jak různé systémové výzvy vytvářejí zcela odlišné osobnosti AI:

# Example 1: The Patient Teacher
teacher_prompt = """
You are an experienced programming instructor who has taught thousands of students. 
You break down complex concepts into simple steps, use analogies from everyday life, 
and always check if the student understands before moving on. You're encouraging 
and never make students feel bad for not knowing something.
"""

# Example 2: The Creative Collaborator  
creative_prompt = """
You are a creative writing partner who loves brainstorming wild ideas. You're 
enthusiastic, imaginative, and always build on the user's ideas rather than 
replacing them. You ask thought-provoking questions to spark creativity and 
offer unexpected perspectives that make stories more interesting.
"""

# Example 3: The Strategic Business Advisor
business_prompt = """
You are a strategic business consultant with an MBA and 20 years of experience 
helping startups scale. You think in frameworks, provide structured advice, 
and always consider both short-term tactics and long-term strategy. You ask 
probing questions to understand the full business context before giving advice.
"""

Vidět systémové výzvy v akci

Otestujme stejnou otázku s různými systémovými výzvami, abychom viděli dramatické rozdíly:

Otázka: "Jak mám řešit autentizaci uživatelů ve své webové aplikaci?"

# 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 výzev

1. Nastavení kontextu: Poskytněte AI základní informace

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átování výstupu: Řekněte AI, jak má strukturovat odpovědi

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. Nastavení omezení: Definujte, co AI nemá dělat

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

Proč je to důležité pro vašeho chatovacího asistenta

Porozumění systémovým výzvám vám dává neuvěřitelnou moc vytvářet specializované AI asistenty:

Bot zákaznické podpory: Nápomocný, trpělivý, obeznámený s politikami
Učitel: Povzbuzující, krok za krokem, kontroluje porozumění
Kreativní partner: Nápaditý, rozvíjí nápady, ptá se "co kdyby?"
Technický expert: Přesný, detailní, dbá na bezpečnost

Klíčový poznatek: Nejenže voláte API AI – vytváříte vlastní AI osobnost, která slouží vašemu konkrétnímu účelu. To je to, co dělá moderní AI aplikace přizpůsobené a užitečné.

Vytvoření webového API s FastAPI: Váš vysoce výkonný

Proč je FastAPI ideální pro to, co stavíme:

Asynchronní ve výchozím nastavení: Může zpracovávat více požadavků na AI najednou, aniž by se zasekl
Automatická dokumentace: Navštivte /docs a získáte krásnou, interaktivní stránku API dokumentace zdarma
Vestavěná validace: Zachytí chyby dříve, než způsobí problémy
Bleskově rychlé: Jedna z nejrychlejších Python frameworků
Moderní Python: Využívá všechny nejnovější a nejlepší funkce Pythonu

A proč vůbec potřebujeme backend:

Bezpečnost: Váš API klíč pro AI je jako heslo – pokud ho vložíte do frontendového JavaScriptu, kdokoli, kdo si prohlédne zdrojový kód vašeho webu, ho může ukrást a použít vaše AI kredity. Backend uchovává citlivé údaje v bezpečí.

Omezení rychlosti a kontrola: Backend vám umožňuje kontrolovat, jak často mohou uživatelé posílat požadavky, implementovat autentizaci uživatelů a přidat logování pro sledování využití.

Zpracování dat: Možná budete chtít ukládat konverzace, filtrovat nevhodný obsah nebo kombinovat více AI služeb. Backend je místo, kde tato logika žije.

Architektura připomíná model klient-server:

Frontend: Vrstva uživatelského rozhraní pro interakci
Backend API: Vrstva pro zpracování požadavků a směrování
AI služba: Externí výpočty a generování odpovědí
Environmentální proměnné: Bezpečné ukládání konfigurace a přihlašovacích údajů

Porozumění toku požadavků a odpovědí

Podívejme se, co se stane, když uživatel odešle zprávu:

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

Porozumění jednotlivým krokům:

Interakce uživatele: Osoba napíše zprávu do chatovacího rozhraní
Zpracování na frontendu: JavaScript zachytí vstup a naformátuje ho jako JSON
Validace API: FastAPI automaticky validuje požadavek pomocí modelů Pydantic
Integrace AI: Backend přidá kontext (systémový prompt) a zavolá AI službu
Zpracování odpovědi: API obdrží odpověď od AI a může ji upravit, pokud je to potřeba
Zobrazení na frontendu: JavaScript zobrazí odpověď v chatovacím rozhraní

Porozumění architektuře API

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

Vytvoření aplikace FastAPI

Postupně vytvoříme naše API. Vytvořte soubor api.py s následujícím kódem pro FastAPI:

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

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

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

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

# Pydantic models for request/response validation
class ChatMessage(BaseModel):
    message: str

class ChatResponse(BaseModel):
    response: str

@app.get("/")
async def root():
    """Root endpoint providing API information."""
    return {
        "message": "Welcome to the AI Chat API",
        "docs": "/docs",
        "health": "/health"
    }

@app.get("/health")
async def health_check():
    """Health check endpoint."""
    return {"status": "healthy", "service": "ai-chat-api"}

@app.post("/hello", response_model=ChatResponse)
async def chat_endpoint(chat_message: ChatMessage):
    """Main chat endpoint that processes messages and returns AI responses."""
    try:
        # Extract and validate message
        message = chat_message.message.strip()
        if not message:
            raise HTTPException(status_code=400, detail="Message cannot be empty")
        
        logger.info(f"Processing message: {message[:50]}...")
        
        # Call AI service (note: call_llm should be made async for better performance)
        ai_response = await call_llm_async(message, "You are a helpful and friendly assistant.")
        
        logger.info("AI response generated successfully")
        return ChatResponse(response=ai_response)
        
    except HTTPException:
        raise
    except Exception as e:
        logger.error(f"Error processing chat message: {str(e)}")
        raise HTTPException(status_code=500, detail="Internal server error")

if __name__ == "__main__":
    import uvicorn
    uvicorn.run(app, host="0.0.0.0", port=5000, reload=True)

Porozumění implementaci FastAPI:

Importuje FastAPI pro moderní funkce webového frameworku a Pydantic pro validaci dat
Vytváří automatickou dokumentaci API (dostupnou na /docs, když server běží)
Povoluje middleware CORS, aby umožnil požadavky z frontendu z různých zdrojů
Definuje modely Pydantic pro automatickou validaci požadavků/odpovědí a dokumentaci
Používá asynchronní endpointy pro lepší výkon při současných požadavcích
Implementuje správné HTTP status kódy a zpracování chyb pomocí HTTPException
Zahrnuje strukturované logování pro monitorování a ladění
Poskytuje endpoint pro kontrolu stavu služby

Klíčové výhody FastAPI oproti tradičním frameworkům:

Automatická validace: Modely Pydantic zajišťují integritu dat před zpracováním
Interaktivní dokumentace: Navštivte /docs pro automaticky generovanou, testovatelnou dokumentaci API
Bezpečnost typů: Typové anotace v Pythonu zabraňují chybám za běhu a zlepšují kvalitu kódu
Podpora asynchronních operací: Zpracování více požadavků na AI současně bez blokování
Výkon: Výrazně rychlejší zpracování požadavků pro aplikace v reálném čase

Porozumění CORS: Bezpečnostní stráž webu

CORS (Cross-Origin Resource Sharing) je jako bezpečnostní stráž v budově, která kontroluje, zda návštěvníci mají povolení vstoupit. Pojďme pochopit, proč na tom záleží a jak to ovlivňuje vaši aplikaci.

Co je CORS a proč existuje?

Problém: Představte si, že by jakýkoli web mohl posílat požadavky na web vaší banky vaším jménem bez vašeho svolení. To by byla bezpečnostní noční můra! Prohlížeče tomu ve výchozím nastavení brání pomocí "Politiky stejného původu".

Politika stejného původu: Prohlížeče umožňují webovým stránkám posílat požadavky pouze na stejnou doménu, port a protokol, ze kterého byly načteny.

Analogická situace: Je to jako bezpečnost v bytovém domě – pouze rezidenti (stejný původ) mají přístup do budovy ve výchozím nastavení. Pokud chcete, aby vás navštívil přítel (jiný původ), musíte explicitně říct bezpečnosti, že je to v pořádku.

CORS ve vašem vývojovém prostředí

Během vývoje váš frontend a backend běží na různých portech:

Frontend: http://localhost:3000 (nebo file:// při přímém otevření HTML)
Backend: http://localhost:5000

Tyto jsou považovány za "různé původy", i když jsou na stejném počítači!

from fastapi.middleware.cors import CORSMiddleware

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

Co konfigurace CORS prakticky dělá:

Přidává speciální HTTP hlavičky do odpovědí API, které říkají prohlížečům "tento požadavek z jiného původu je povolen"
Zpracovává "preflight" požadavky (prohlížeče někdy kontrolují oprávnění před odesláním skutečného požadavku)
Zabraňuje obávané chybě "zablokováno politikou CORS" v konzoli vašeho prohlížeče

Bezpečnost CORS: Vývoj vs produkce

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

Proč na tom záleží: Ve vývoji je CORS(app) jako nechat odemčené dveře – pohodlné, ale ne bezpečné. V produkci chcete přesně určit, které weby mohou komunikovat s vaším API.

Běžné scénáře CORS a jejich řešení

Scénář	Problém	Řešení
Lokální vývoj	Frontend nemůže dosáhnout na backend	Přidejte CORSMiddleware do FastAPI
GitHub Pages + Heroku	Nasazený frontend nemůže dosáhnout na API	Přidejte URL GitHub Pages do původů CORS
Vlastní doména	Chyby CORS v produkci	Aktualizujte původy CORS tak, aby odpovídaly vaší doméně
Mobilní aplikace	Aplikace nemůže dosáhnout na webové API	Přidejte doménu aplikace nebo opatrně použijte `*`

Tip: Můžete zkontrolovat hlavičky CORS v nástrojích pro vývojáře vašeho prohlížeče na kartě Síť. Hledejte hlavičky jako Access-Control-Allow-Origin v odpovědi.

Zpracování chyb a validace

Všimněte si, jak naše API zahrnuje správné zpracování chyb:

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

Klíčové principy validace:

Kontroluje požadovaná pole před zpracováním požadavků
Vrací smysluplné chybové zprávy ve formátu JSON
Používá vhodné HTTP status kódy (400 pro špatné požadavky)
Poskytuje jasnou zpětnou vazbu, která pomáhá vývojářům frontendu ladit problémy

Nastavení a spuštění backendu

Nyní, když máme připravenou integraci AI a server FastAPI, pojďme vše spustit. Proces nastavení zahrnuje instalaci Python závislostí, konfiguraci environmentálních proměnných a spuštění vývojového serveru.

Nastavení Python prostředí

Pojďme nastavit vaše Python vývojové prostředí. Virtuální prostředí jsou jako přístup k odděleným prostorům – každý projekt má svůj vlastní izolovaný prostor se specifickými nástroji a závislostmi, což zabraňuje konfliktům mezi různými projekty.

# 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

Co jsme právě udělali:

Vytvořili jsme vlastní malou Python bublinu, kde můžeme instalovat balíčky, aniž bychom ovlivnili cokoli jiného
Aktivovali jsme ji, aby náš terminál věděl, že má používat toto konkrétní prostředí
Nainstalovali jsme základní nástroje: OpenAI pro AI magii, FastAPI pro naše webové API, Uvicorn pro jeho spuštění a python-dotenv pro bezpečné spravování tajných údajů

Klíčové závislosti vysvětleny:

FastAPI: Moderní, rychlý webový framework s automatickou dokumentací API
Uvicorn: Bleskově rychlý ASGI server, který spouští aplikace FastAPI
OpenAI: Oficiální knihovna pro modely GitHub a integraci OpenAI API
python-dotenv: Bezpečné načítání environmentálních proměnných ze souborů .env

Konfigurace prostředí: Udržování tajemství v bezpečí

Než spustíme naše API, musíme si promluvit o jedné z nejdůležitějších lekcí ve webovém vývoji: jak udržet vaše tajemství skutečně tajná. Environmentální proměnné jsou jako bezpečný trezor, ke kterému má přístup pouze vaše aplikace.

Co jsou environmentální proměnné?

Představte si environmentální proměnné jako bezpečnostní schránku – vložíte tam své cenné věci a pouze vy (a vaše aplikace) máte klíč k jejich získání. Místo psaní citlivých informací přímo do kódu (kde je může vidět doslova kdokoli) je bezpečně uložíte v prostředí.

Tady je rozdíl:

Špatný způsob: Napsat si heslo na lístek a přilepit ho na monitor
Správný způsob: Uložit heslo do bezpečného správce hesel, ke kterému máte přístup jen vy

Proč na environmentálních proměnných záleží

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

Co se stane, když tvrdě zakódujete tajemství:

Expozice verzovacího systému: Každý, kdo má přístup k vašemu Git repozitáři, vidí váš API klíč
Veřejné repozitáře: Pokud nahrajete na GitHub, váš klíč je viditelný pro celý internet
Sdílení týmu: Ostatní vývojáři pracující na vašem projektu získají přístup k vašemu osobnímu API klíči
Bezpečnostní narušení: Pokud někdo ukradne váš API klíč, může použít vaše AI kredity

Nastavení souboru prostředí

Vytvořte soubor .env ve vašem backendovém adresáři. Tento soubor ukládá vaše tajemství lokálně:

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

Porozumění souboru .env:

Jedno tajemství na řádek ve formátu KLÍČ=hodnota
Žádné mezery kolem znaménka rovnosti
Není potřeba uvozovek kolem hodnot (obvykle)
Komentáře začínají #

Vytvoření osobního přístupového tokenu GitHub

Váš GitHub token je jako speciální heslo, které dává vaší aplikaci oprávnění používat AI služby GitHub:

Postup vytvoření tokenu:

Přejděte do Nastavení GitHub → Nastavení vývojáře → Osobní přístupové tokeny → Tokeny (klasické)
Klikněte na "Vytvořit nový token (klasický)"
Nastavte expiraci (30 dní pro testování, delší pro produkci)
Vyberte oprávnění: Zaškrtněte "repo" a jakákoli další potřebná oprávnění
Vygenerujte token a ihned ho zkopírujte (později ho už neuvidíte!)
Vložte ho do svého souboru .env

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

Načítání environmentálních proměnných v Pythonu

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

Co tento kód dělá:

Načítá váš soubor .env a zpřístupňuje proměnné Pythonu
Kontroluje, zda existuje požadovaný token (dobré zpracování chyb!)
Vyvolává jasnou chybu, pokud token chybí
Používá token bezpečně, aniž by ho odhaloval v kódu

Bezpečnost Git: Soubor .gitignore

Váš soubor .gitignore říká Gitu, které soubory nikdy nesledovat nebo nahrávat:

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

Proč je to důležité: Jakmile přidáte .env do .gitignore, Git bude ignorovat váš environmentální soubor, což vám zabrání náhodně nahrát vaše tajemství na GitHub.

Různá prostředí, různá tajemství

Profesionální aplikace používají různé API klíče pro různá prostředí:

# .env.development
GITHUB_TOKEN=your_development_token
DEBUG=True

# .env.production  
GITHUB_TOKEN=your_production_token
DEBUG=False

Proč na tom záleží: Nechcete, aby vaše experimenty ve vývoji ovlivnily váš produkční AI kvótu, a chcete různé úrovně bezpečnosti pro různá prostředí.

Spuštění vývojového serveru: Oživení vašeho FastAPI

Nyní přichází vzrušující okamžik – spuštění vývojového serveru FastAPI a sledování, jak vaše integrace AI ožívá! FastAPI používá Uvicorn, bleskově rychlý ASGI server, který je speciálně navržen pro asynchronní Python aplikace.

Porozumění procesu spuštění serveru FastAPI

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

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

Když spustíte tento příkaz, zde je, co se děje v zákulisí:

1. Python načte vaši aplikaci FastAPI:

Importuje všechny potřebné knihovny (FastAPI, Pydantic, OpenAI, atd.)
Načte environmentální proměnné ze souboru .env
Vytvoří instanci aplikace FastAPI s automatickou dokumentací

2. Uvicorn konfiguruje ASGI server:

Připojí se k portu 5000 s možnostmi asynchronního zpracování požadavků
Nastaví směrování požadavků s automatickou validací
Povolí automatické obnovení pro vývoj (restartuje se při změně souborů)
Generuje interaktivní dokumentaci API

3. Server začne naslouchat:

Váš terminál zobrazí: INFO: Uvicorn running on http://0.0.0.0:5000
Server může zpracovávat více současných požadavků na AI
Vaše API je připraveno s automatickou dokumentací na http://localhost:5000/docs

Co byste měli vidět, když vše 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.

Porozumění výstupu FastAPI:

Sleduje změny: Automatické obnovení povoleno pro vývoj
Uvicorn běží: Vysoce výkonný ASGI server je aktivní
Proces obnovení spuštěn: Sledování souborů pro automatické restartování
Spuštění aplikace dokončeno: Aplikace FastAPI úspěšně inicializována
Interaktivní dokumentace dostupná: Navštivte /docs pro automatickou dokumentaci API

Testování vašeho FastAPI: Několik výkonných přístupů

FastAPI poskytuje několik pohodlných způsobů

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

Řešení běžných problémů při spuštění

Chybová zpráva	Co znamená	Jak opravit
`ModuleNotFoundError: No module named 'fastapi'`	FastAPI není nainstalováno	Spusťte `pip install fastapi uvicorn` ve svém virtuálním prostředí
`ModuleNotFoundError: No module named 'uvicorn'`	ASGI server není nainstalován	Spusťte `pip install uvicorn` ve svém virtuálním prostředí
`KeyError: 'GITHUB_TOKEN'`	Environmentální proměnná nebyla nalezena	Zkontrolujte svůj soubor `.env` a volání `load_dotenv()`
`Address already in use`	Port 5000 je obsazen	Ukončete ostatní procesy používající port 5000 nebo změňte port
`ValidationError`	Data požadavku neodpovídají modelu Pydantic	Zkontrolujte, zda formát vašeho požadavku odpovídá očekávanému schématu
`HTTPException 422`	Nezpracovatelná entita	Validace požadavku selhala, zkontrolujte `/docs` pro správný formát
`OpenAI API error`	Autentizace AI služby selhala	Ověřte, zda je váš GitHub token správný a má odpovídající oprávnění

Nejlepší postupy při vývoji

Automatické načítání změn: FastAPI s Uvicornem poskytuje automatické načítání změn při ukládání úprav v Python souborech. To znamená, že můžete upravovat kód a ihned ho testovat bez nutnosti ručního restartování.

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

Logování pro vývoj: Přidejte logování, abyste lépe pochopili, co se děje:

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

Proč logování pomáhá: Během vývoje můžete přesně vidět, jaké požadavky přicházejí, jak AI odpovídá a kde dochází k chybám. To výrazně urychluje ladění.

Konfigurace pro GitHub Codespaces: Snadný vývoj v cloudu

GitHub Codespaces je jako mít výkonný vývojový počítač v cloudu, ke kterému máte přístup z jakéhokoli prohlížeče. Pokud pracujete v Codespaces, existuje několik dalších kroků, jak zpřístupnit backend vašemu frontendu.

Porozumění síťování v Codespaces

V lokálním vývojovém prostředí vše běží na stejném počítači:

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

V Codespaces běží vaše vývojové prostředí na serverech GitHubu, takže "localhost" má jiný význam. GitHub automaticky vytváří veřejné URL pro vaše služby, ale je třeba je správně nakonfigurovat.

Krok za krokem: Konfigurace Codespaces

1. Spusťte svůj backend server:

cd backend
python api.py

Uvidíte známou zprávu o spuštění FastAPI/Uvicorn, ale všimněte si, že běží uvnitř prostředí Codespaces.

2. Nastavte viditelnost portu:

Najděte záložku "Ports" v dolním panelu VS Code
Najděte port 5000 v seznamu
Klikněte pravým tlačítkem na port 5000
Vyberte "Port Visibility" → "Public"

Proč ho udělat veřejným? Ve výchozím nastavení jsou porty Codespaces soukromé (přístupné pouze vám). Zveřejnění umožní vašemu frontendu (který běží v prohlížeči) komunikovat s backendem.

3. Získejte veřejné URL: Po zveřejnění portu uvidíte URL jako:

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

4. Aktualizujte konfiguraci frontendu:

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

Porozumění URL adresám Codespaces

URL adresy Codespaces mají předvídatelný vzor:

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

Rozbor:

codespace-name: Jedinečný identifikátor vašeho Codespace (obvykle obsahuje vaše uživatelské jméno)
port: Číslo portu, na kterém běží vaše služba (5000 pro naši aplikaci FastAPI)
app.github.dev: Doména GitHubu pro aplikace Codespace

Testování nastavení Codespaces

1. Otestujte backend přímo: Otevřete své veřejné URL v novém okně prohlížeče. Měli byste vidět:

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

2. Testujte pomocí nástrojů pro vývojáře v prohlížeči:

// 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ální vývoj

Aspekt	Lokální vývoj	GitHub Codespaces
Doba nastavení	Delší (instalace Pythonu, závislostí)	Okamžitá (předkonfigurované prostředí)
Přístup k URL	`http://localhost:5000`	`https://xyz-5000.app.github.dev`
Konfigurace portů	Automatická	Manuální (zveřejnění portů)
Ukládání souborů	Lokální počítač	GitHub repozitář
Spolupráce	Obtížné sdílení prostředí	Snadné sdílení odkazu na Codespace
Závislost na internetu	Pouze pro volání AI API	Nutná pro vše

Tipy pro vývoj v Codespaces

Environmentální proměnné v Codespaces: Váš soubor .env funguje stejně v Codespaces, ale environmentální proměnné můžete nastavit přímo v Codespace:

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

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

Správa portů:

Codespaces automaticky detekuje, když vaše aplikace začne naslouchat na portu
Můžete současně přesměrovat více portů (užitečné, pokud později přidáte databázi)
Porty zůstávají přístupné, dokud váš Codespace běží

Pracovní postup vývoje:

Provádějte změny kódu ve VS Code
FastAPI se automaticky znovu načte (díky režimu reload v Uvicornu)
Okamžitě testujte změny prostřednictvím veřejného URL
Uložte a odešlete změny, až budete připraveni

💡 Tip: Během vývoje si uložte záložku na URL adresu backendu Codespace. Protože názvy Codespace jsou stabilní, URL se nezmění, pokud používáte stejný Codespace.

Vytvoření uživatelského rozhraní pro chat: Kde se lidé setkávají s AI

Nyní vytvoříme uživatelské rozhraní – část, která určuje, jak lidé komunikují s vaším AI asistentem. Stejně jako design původního rozhraní iPhonu se zaměříme na to, aby složitá technologie působila intuitivně a přirozeně.

Porozumění moderní architektuře frontendu

Naše chatovací rozhraní bude tzv. "Single Page Application" (SPA). Místo staromódního přístupu, kdy každý klik načítá novou stránku, naše aplikace bude aktualizovat plynule a okamžitě:

Staré webové stránky: Jako čtení fyzické knihy – otáčíte na zcela nové stránky Naše chatovací aplikace: Jako používání telefonu – vše plyne a aktualizuje se hladce

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]

Tři pilíře vývoje frontendu

Každá frontendová aplikace – od jednoduchých webových stránek po složité aplikace jako Discord nebo Slack – je postavena na třech základních technologiích. Představte si je jako základ všeho, co na webu vidíte a s čím interagujete:

HTML (Struktura): To je váš základ

Určuje, jaké prvky existují (tlačítka, textová pole, kontejnery)
Dává obsahu význam (toto je nadpis, toto je formulář, atd.)
Vytváří základní strukturu, na které vše ostatní staví

CSS (Prezentace): To je váš interiérový designér

Dělá vše krásné (barvy, písma, rozvržení)
Přizpůsobuje se různým velikostem obrazovky (telefon vs notebook vs tablet)
Vytváří plynulé animace a vizuální odezvu

JavaScript (Chování): To je váš mozek

Reaguje na to, co uživatelé dělají (klikání, psaní, posouvání)
Komunikuje s backendem a aktualizuje stránku
Dělá vše interaktivní a dynamické

Představte si to jako architektonický design:

HTML: Strukturní plán (definování prostorů a vztahů)
CSS: Estetický a uživatelský design (vizuální styl a uživatelský zážitek)
JavaScript: Mechanické systémy (funkčnost a interaktivita)

Proč záleží na moderní architektuře JavaScriptu

Naše chatovací aplikace bude používat moderní JavaScriptové vzory, které uvidíte v profesionálních aplikacích. Porozumění těmto konceptům vám pomůže růst jako vývojáři:

Architektura založená na třídách: Organizujeme náš kód do tříd, což je jako vytváření plánů pro objekty Async/Await: Moderní způsob, jak zpracovávat operace, které trvají (např. volání API) Programování řízené událostmi: Naše aplikace reaguje na akce uživatele (klikání, stisk kláves) místo běhu v cyklu Manipulace s DOM: Dynamické aktualizování obsahu webové stránky na základě interakcí uživatele a odpovědí API

Nastavení struktury projektu

Vytvořte adresář frontendu s touto organizovanou strukturou:

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

Porozumění architektuře:

Odděluje záležitosti mezi strukturou (HTML), chováním (JavaScript) a prezentací (CSS)
Udržuje jednoduchou strukturu souborů, která je snadno přístupná a upravitelná
Dodržuje nejlepší praktiky webového vývoje pro organizaci a udržitelnost

Vytvoření HTML základu: Semantická struktura pro přístupnost

Začněme strukturou HTML. Moderní webový vývoj klade důraz na "semantické HTML" – používání HTML prvků, které jasně popisují svůj účel, nejen svůj vzhled. To činí vaši aplikaci přístupnou pro čtečky obrazovky, vyhledávače a další nástroje.

Proč na semantickém HTML záleží: Představte si, že popisujete svou chatovací aplikaci někomu po telefonu. Řekli byste "je tam záhlaví s názvem, hlavní oblast, kde se objevují konverzace, a dole formulář pro psaní zpráv." Semantické HTML používá prvky, které odpovídají tomuto přirozenému popisu.

Vytvořte index.html s tímto promyšleně strukturovaným označením:

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

Porozumění každému HTML prvku a jeho účelu:

Struktura dokumentu

<!DOCTYPE html>: Říká prohlížeči, že se jedná o moderní HTML5
<html lang="en">: Určuje jazyk stránky pro čtečky obrazovky a nástroje pro překlad
<meta charset="UTF-8">: Zajišťuje správné kódování znaků pro mezinárodní text
<meta name="viewport"...>: Dělá stránku mobilně přívětivou kontrolou přiblížení a měřítka

Semantické prvky

<header>: Jasně identifikuje horní část s názvem a popisem
<main>: Označuje hlavní obsahovou oblast (kde probíhají konverzace)
<form>: Semanticky správné pro uživatelský vstup, umožňuje správnou navigaci klávesnicí

Funkce pro přístupnost

role="log": Říká čtečkám obrazovky, že tato oblast obsahuje chronologický záznam zpráv
aria-live="polite": Oznámí nové zprávy čtečkám obrazovky bez přerušení
aria-label: Poskytuje popisné štítky pro ovládací prvky formuláře
required: Prohlížeč ověří, že uživatel zadal zprávu před odesláním

Integrace CSS a JavaScriptu

class atributy: Poskytují styly pro CSS (např. chat-container, input-group)
id atributy: Umožňují JavaScriptu najít a manipulovat s konkrétními prvky
Umístění skriptu: JavaScriptový soubor se načítá na konci, aby se HTML načetlo jako první

Proč tato struktura funguje:

Logický tok: Záhlaví → Hlavní obsah → Formulář pro vstup odpovídá přirozenému pořadí čtení
Přístupné klávesnicí: Uživatelé mohou procházet všechny interaktivní prvky pomocí klávesy Tab
Přátelské pro čtečky obrazovky: Jasné orientační body a popisy pro zrakově postižené uživatele
Mobilně přívětivé: Meta tag viewport umožňuje responzivní design
Progresivní vylepšení: Funguje i v případě, že se CSS nebo JavaScript nenačte

Přidání interaktivního JavaScriptu: Logika moderní webové aplikace

Nyní vytvoříme JavaScript, který oživí naše chatovací rozhraní. Použijeme moderní JavaScriptové vzory, které se běžně používají v profesionálním webovém vývoji, včetně ES6 tříd, async/await a programování řízeného událostmi.

Porozumění moderní architektuře JavaScriptu

Místo psaní procedurálního kódu (série funkcí, které se spouštějí v pořadí) vytvoříme architekturu založenou na třídách. Třídu si můžete představit jako plán pro vytváření objektů – podobně jako plán architekta může být použit k výstavbě více domů.

Proč používat třídy pro webové aplikace?

Organizace: Veškerá související funkcionalita je seskupena dohromady
Znovupoužitelnost: Můžete vytvořit více instancí chatu na stejné stránce
Udržitelnost: Snadnější ladění a úpravy konkrétních funkcí
Profesionální standard: Tento vzor se používá v frameworkech jako React, Vue a Angular

Vytvořte app.js s tímto moderním, dobře strukturovaným JavaScriptem:

// app.js - Modern chat application logic

class ChatApp {
    constructor() {
        // Get references to DOM elements we'll need to manipulate
        this.messages = document.getElementById("messages");
        this.form = document.getElementById("chatForm");
        this.input = document.getElementById("messageInput");
        this.sendButton = document.getElementById("sendBtn");
        
        // Configure your backend URL here
        this.BASE_URL = "http://localhost:5000"; // Update this for your environment
        this.API_ENDPOINT = `${this.BASE_URL}/hello`;
        
        // Set up event listeners when the chat app is created
        this.initializeEventListeners();
    }
    
    initializeEventListeners() {
        // Listen for form submission (when user clicks Send or presses Enter)
        this.form.addEventListener("submit", (e) => this.handleSubmit(e));
        
        // Also listen for Enter key in the input field (better UX)
        this.input.addEventListener("keypress", (e) => {
            if (e.key === "Enter" && !e.shiftKey) {
                e.preventDefault();
                this.handleSubmit(e);
            }
        });
    }
    
    async handleSubmit(event) {
        event.preventDefault(); // Prevent form from refreshing the page
        
        const messageText = this.input.value.trim();
        if (!messageText) return; // Don't send empty messages
        
        // Provide user feedback that something is happening
        this.setLoading(true);
        
        // Add user message to chat immediately (optimistic UI)
        this.appendMessage(messageText, "user");
        
        // Clear input field so user can type next message
        this.input.value = '';
        
        try {
            // Call the AI API and wait for response
            const reply = await this.callAPI(messageText);
            
            // Add AI response to chat
            this.appendMessage(reply, "assistant");
        } catch (error) {
            console.error('API Error:', error);
            this.appendMessage("Sorry, I'm having trouble connecting right now. Please try again.", "error");
        } finally {
            // Re-enable the interface regardless of success or failure
            this.setLoading(false);
        }
    }
    
    async callAPI(message) {
        const response = await fetch(this.API_ENDPOINT, {
            method: "POST",
            headers: { 
                "Content-Type": "application/json" 
            },
            body: JSON.stringify({ message })
        });
        
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        
        const data = await response.json();
        return data.response;
    }
    
    appendMessage(text, role) {
        const messageElement = document.createElement("div");
        messageElement.className = `message ${role}`;
        messageElement.innerHTML = `
            <div class="message-content">
                <span class="message-text">${this.escapeHtml(text)}</span>
                <span class="message-time">${new Date().toLocaleTimeString()}</span>
            </div>
        `;
        
        this.messages.appendChild(messageElement);
        this.scrollToBottom();
    }
    
    escapeHtml(text) {
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }
    
    scrollToBottom() {
        this.messages.scrollTop = this.messages.scrollHeight;
    }
    
    setLoading(isLoading) {
        this.sendButton.disabled = isLoading;
        this.input.disabled = isLoading;
        this.sendButton.textContent = isLoading ? "Sending..." : "Send";
    }
}

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

Porozumění každému JavaScriptovému konceptu

Struktura ES6 třídy:

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

Async/Await vzor:

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

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

Programování řízené událostmi: Namísto neustálého kontrolování, zda se něco stalo, "posloucháme" události:

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

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

Manipulace s DOM:

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

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

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

Bezpečnost a nejlepší postupy

Prevence XSS:

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

Proč na tom záleží: Pokud uživatel napíše <script>alert('hack')</script>, tato funkce zajistí, že se zobrazí jako text, místo aby se vykonala jako kód.

Zpracování chyb:

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

Úvahy o uživatelském zážitku:

Optimistické UI: Přidejte uživatelskou zprávu okamžitě, nečekejte na odpověď serveru
Stavy načítání: Deaktivujte tlačítka a zobrazte "Odesílání..." během čekání
Automatické posouvání: Udržujte viditelné nejnovější zprávy
Validace vstupu: Neodesílejte prázdné zprávy
Klávesové zkratky: Kláves Tato architektura je škálovatelná – můžete snadno přidat funkce jako úpravy zpráv, nahrávání souborů nebo více konverzačních vláken, aniž byste museli přepisovat základní strukturu.

Stylování vašeho chatovacího rozhraní

Nyní vytvoříme moderní, vizuálně atraktivní chatovací rozhraní pomocí CSS. Dobré stylování dodává vaší aplikaci profesionální vzhled a zlepšuje celkový uživatelský zážitek. Použijeme moderní funkce CSS, jako jsou Flexbox, CSS Grid a vlastní vlastnosti pro responzivní a přístupný design.

Vytvořte styles.css s těmito komplexními styly:

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

Porozumění architektuře CSS:

Používá vlastní vlastnosti CSS (proměnné) pro konzistentní vzhled a snadnou údržbu
Implementuje rozložení Flexbox pro responzivní design a správné zarovnání
Obsahuje plynulé animace pro zobrazení zpráv, které nejsou rušivé
Poskytuje vizuální rozlišení mezi zprávami uživatele, odpověďmi AI a chybovými stavy
Podporuje responzivní design, který funguje na stolních počítačích i mobilních zařízeních
Zohledňuje přístupnost s preferencemi sníženého pohybu a správnými kontrastními poměry
Nabízí podporu tmavého režimu na základě systémových preferencí uživatele

Konfigurace URL backendu

Posledním krokem je aktualizace BASE_URL ve vašem JavaScriptu tak, aby odpovídala vašemu backendovému serveru:

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

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

Určení URL backendu:

Lokální vývoj: Použijte http://localhost:5000, pokud běžíte frontend i backend lokálně
Codespaces: Najděte URL svého backendu na kartě Ports poté, co nastavíte port 5000 jako veřejný
Produkce: Nahraďte skutečnou doménou při nasazení na hostingovou službu

💡 Tip pro testování: Můžete otestovat svůj backend přímo návštěvou kořenové URL ve vašem prohlížeči. Měli byste vidět uvítací zprávu z vašeho serveru FastAPI.

Testování a nasazení

Nyní, když máte vytvořené komponenty frontendu i backendu, otestujeme, zda vše funguje společně, a prozkoumáme možnosti nasazení, abyste mohli svůj chatovací asistent sdílet s ostatními.

Workflow lokálního testování

Postupujte podle těchto kroků pro testování celé aplikace:

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

Postup testování krok za krokem:

Spusťte backendový server:

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

Ověřte funkčnost API:
- Otevřete http://localhost:5000 ve svém prohlížeči
- Měli byste vidět uvítací zprávu z vašeho serveru FastAPI
Otevřete frontend:
- Přejděte do adresáře frontendu
- Otevřete index.html ve svém webovém prohlížeči
- Nebo použijte rozšíření Live Server v VS Code pro lepší vývojové prostředí
Otestujte funkčnost chatu:
- Napište zprávu do vstupního pole
- Klikněte na "Odeslat" nebo stiskněte Enter
- Ověřte, zda AI odpovídá správně
- Zkontrolujte konzoli prohlížeče, zda neobsahuje chyby JavaScriptu

Řešení běžných problémů

Problém	Příznaky	Řešení
CORS Error	Frontend nemůže dosáhnout na backend	Ujistěte se, že FastAPI CORSMiddleware je správně nakonfigurován
API Key Error	401 Neautorizované odpovědi	Zkontrolujte proměnnou prostředí `GITHUB_TOKEN`
Connection Refused	Síťové chyby ve frontendu	Ověřte URL backendu a zda server Flask běží
No AI Response	Prázdné nebo chybové odpovědi	Zkontrolujte logy backendu kvůli problémům s kvótou API nebo autentizací

Běžné kroky při ladění:

Zkontrolujte konzoli nástrojů pro vývojáře v prohlížeči kvůli chybám JavaScriptu
Ověřte, že karta Síť ukazuje úspěšné požadavky a odpovědi API
Projděte výstup terminálu backendu kvůli chybám Pythonu nebo problémům s API
Potvrďte, že proměnné prostředí jsou správně načteny a dostupné

Výzva GitHub Copilot Agent 🚀

Použijte režim Agent k dokončení následující výzvy:

Popis: Vylepšete chatovacího asistenta přidáním historie konverzací a uchovávání zpráv. Tato výzva vám pomůže pochopit, jak spravovat stav v chatovacích aplikacích a implementovat ukládání dat pro lepší uživatelský zážitek.

Úkol: Upravte chatovací aplikaci tak, aby zahrnovala historii konverzací, která přetrvává mezi relacemi. Přidejte funkci pro ukládání zpráv do místního úložiště, zobrazte historii konverzací při načtení stránky a přidejte tlačítko "Vymazat historii". Také implementujte indikátory psaní a časové značky zpráv, aby byl zážitek z chatu realističtější.

Více o režimu agent se dozvíte zde.

Zadání: Vytvořte svého osobního AI asistenta

Nyní vytvoříte vlastní implementaci AI asistenta. Místo pouhého kopírování kódu z tutoriálu je to příležitost aplikovat koncepty a vytvořit něco, co odráží vaše vlastní zájmy a potřeby.

Požadavky na projekt

Nastavme váš projekt s čistou, organizovanou strukturou:

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í úkoly implementace

Vývoj backendu:

Přizpůsobte náš kód FastAPI podle svých potřeb
Vytvořte jedinečnou osobnost AI – třeba užitečného kuchařského asistenta, kreativního partnera pro psaní nebo studijního pomocníka?
Přidejte spolehlivé zpracování chyb, aby vaše aplikace nezkolabovala při problémech
Napište jasnou dokumentaci pro každého, kdo chce pochopit, jak vaše API funguje

Vývoj frontendu:

Vytvořte chatovací rozhraní, které působí intuitivně a přívětivě
Napište čistý, moderní JavaScript, na který byste byli hrdí
Navrhněte vlastní stylování, které odráží osobnost vašeho AI – zábavné a barevné? Čisté a minimalistické? Je to zcela na vás!
Ujistěte se, že funguje skvěle na telefonech i počítačích

Požadavky na personalizaci:

Vyberte jedinečné jméno a osobnost pro svého AI asistenta – možná něco, co odráží vaše zájmy nebo problémy, které chcete řešit
Přizpůsobte vizuální design tak, aby odpovídal stylu vašeho asistenta
Napište poutavou uvítací zprávu, která lidi přiměje začít chatovat
Otestujte svého asistenta s různými typy otázek, abyste viděli, jak reaguje

Nápady na vylepšení (volitelné)

Chcete svůj projekt posunout na vyšší úroveň? Zde je několik zajímavých nápadů k prozkoumání:

Funkce	Popis	Dovednosti, které procvičíte
Historie zpráv	Pamatujte si konverzace i po obnovení stránky	Práce s localStorage, zpracování JSON
Indikátory psaní	Zobrazte "AI píše..." při čekání na odpovědi	Animace CSS, asynchronní programování
Časové značky zpráv	Zobrazte, kdy byla každá zpráva odeslána	Formátování data/času, UX design
Export chatu	Umožněte uživatelům stáhnout jejich konverzaci	Práce se soubory, export dat
Přepínání témat	Přepínač mezi světlým/tmavým režimem	Proměnné CSS, uživatelské preference
Hlasový vstup	Přidejte funkci převodu řeči na text	Webové API, přístupnost

Testování a dokumentace

Zajištění kvality:

Otestujte svou aplikaci s různými typy vstupů a hraničními případy
Ověřte, že responzivní design funguje na různých velikostech obrazovky
Zkontrolujte přístupnost pomocí navigace klávesnicí a čteček obrazovky
Validujte HTML a CSS podle standardů

Požadavky na dokumentaci:

Napište README.md vysvětlující váš projekt a jak jej spustit
Přidejte snímky obrazovky vašeho chatovacího rozhraní v akci
Zdokumentujte jakékoli jedinečné funkce nebo úpravy, které jste přidali
Poskytněte jasné pokyny k nastavení pro ostatní vývojáře

Pokyny k odevzdání

Výstupy projektu:

Kompletní složka projektu se všemi zdrojovými kódy
README.md s popisem projektu a pokyny k nastavení
Snímky obrazovky ukazující vašeho chatovacího asistenta v akci
Krátká reflexe o tom, co jste se naučili a jaké výzvy jste čelili

Kritéria hodnocení:

Funkčnost: Funguje chatovací asistent podle očekávání?
Kvalita kódu: Je kód dobře organizovaný, okomentovaný a udržovatelný?
Design: Je rozhraní vizuálně atraktivní a uživatelsky přívětivé?
Kreativita: Jak jedinečná a personalizovaná je vaše implementace?
Dokumentace: Jsou pokyny k nastavení jasné a kompletní?

💡 Tip pro úspěch: Začněte nejprve se základními požadavky, poté přidejte vylepšení, jakmile vše funguje. Zaměřte se na vytvoření propracovaného základního zážitku, než přidáte pokročilé funkce.

Řešení

Bonusové výzvy

Připraveni posunout svého AI asistenta na další úroveň? Vyzkoušejte tyto pokročilé výzvy, které prohloubí vaše znalosti integrace AI a webového vývoje.

Personalizace osobnosti

Skutečná magie nastává, když dáte svému AI asistentovi jedinečnou osobnost. Experimentujte s různými systémovými výzvami pro vytvoření specializovaných asistentů:

Příklad profesionálního asistenta:

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

Příklad pomocníka pro kreativní psaní:

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

Příklad technického mentora:

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

Vylepšení frontendu

Transformujte své chatovací rozhraní pomocí těchto vizuálních a funkčních vylepšení:

Pokročilé funkce CSS:

Implementujte plynulé animace a přechody zpráv
Přidejte vlastní design bublin chatu pomocí tvarů a přechodů CSS
Vytvořte animaci indikátoru psaní pro chvíle, kdy AI "přemýšlí"
Navrhněte emoji reakce nebo systém hodnocení zpráv

Vylepšení JavaScriptu:

Přidejte klávesové zkratky (Ctrl+Enter pro odeslání, Escape pro vymazání vstupu)
Implementujte funkci vyhledávání a filtrování zpráv
Vytvořte funkci exportu konverzace (stáhnout jako text nebo JSON)
Přidejte automatické ukládání do localStorage, aby nedošlo ke ztrátě zpráv

Pokročilá integrace AI

Více osobností AI:

Vytvořte rozbalovací nabídku pro přepínání mezi různými osobnostmi AI
Uložte preferovanou osobnost uživatele do localStorage
Implementujte přepínání kontextu, které udržuje tok konverzace

Funkce chytré odpovědi:

Přidejte povědomí o kontextu konverzace (AI si pamatuje předchozí zprávy)
Implementujte chytré návrhy na základě tématu konverzace
Vytvořte tlačítka rychlé odpovědi na běžné otázky

🎯 Cíl učení: Tyto bonusové výzvy vám pomohou pochopit pokročilé vzory webového vývoje a techniky integrace AI, které se používají v produkčních aplikacích.

Shrnutí a další kroky

Gratulujeme! Úspěšně jste vytvořili kompletní chatovacího asistenta poháněného AI od základu. Tento projekt vám poskytl praktické zkušenosti s moderními technologiemi webového vývoje a integrací AI – dovednosti, které jsou stále cennější v dnešním technologickém prostředí.

Co jste dosáhli

Během této lekce jste zvládli několik klíčových technologií a konceptů:

Vývoj backendu:

Integrace s GitHub Models API pro funkčnost AI
Vytvoření RESTful API pomocí Flasku s řádným zpracováním chyb
Implementace bezpečné autentizace pomocí proměnných prostředí
Konfigurace CORS pro požadavky mezi frontendem a backendem

Vývoj frontendu:

Vytvoření responzivního chatovacího rozhraní pomocí sémantického HTML
Implementace moderního JavaScriptu s async/await a architekturou založenou na třídách
Navržení poutavého uživatelského rozhraní pomocí CSS Grid, Flexboxu a animací
Přidání funkcí přístupnosti a principů responzivního designu

Integrace full-stack:

Propojení frontendu a backendu prostřednictvím HTTP API volání
Zpracování interakcí uživatele v reálném čase a asynchronního toku dat
Implementace zpracování chyb a zpětné vazby uživatele v celé aplikaci
Testování kompletního workflow aplikace od vstupu uživatele po odpověď AI

Klíčové výsledky učení

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

Tento projekt vás seznámil se základy budování aplikací poháněných AI, což představuje budoucnost webového vývoje. Nyní rozumíte tomu, jak integrovat schopnosti AI do tradičních webových aplikací a vytvářet poutavé uživatelské zážitky, které působí inteligentně a reagují na potřeby uživatelů.

Profesionální aplikace

Dovednosti, které jste si během této lekce osvojili, jsou přímo použitelné v moderních kariérách v oblasti softwarového vývoje:

Full-stack webový vývoj s využitím moderních frameworků a API
Integrace AI do webových aplikací a mobilních aplikací
Návrh a vývoj API pro architektury mikroslužeb
Vývoj uživatelského rozhraní se zaměřením na přístupnost a responzivní design
DevOps praktiky, včetně konfigurace prostředí a nasazení

Pokračování vaší cesty vývoje AI

Další kroky v učení:

Prozkoumejte pokročilejší modely AI a API (
Přesměrování portů pro testování vašich aplikací

Co Codespaces poskytuje:

Odstraňuje problémy s nastavením a konfigurací lokálního prostředí
Zajišťuje konzistentní vývojové prostředí na různých zařízeních
Obsahuje předem nakonfigurované nástroje a rozšíření pro webový vývoj
Nabízí bezproblémovou integraci s GitHubem pro správu verzí a spolupráci

🚀 Tip pro profesionály: Codespaces je ideální pro učení a prototypování AI aplikací, protože automaticky řeší veškeré složité nastavení prostředí, což vám umožní soustředit se na tvorbu a učení místo řešení problémů s konfigurací.

Prohlášení:
Tento dokument byl přeložen pomocí služby AI pro překlady Co-op Translator. I když se snažíme o přesnost, mějte prosím na paměti, že automatizované překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro důležité informace se doporučuje profesionální lidský překlad. Neodpovídáme za žádná nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu.

84 KiB Raw Blame History Unescape Escape

Vytvořte chatovacího asistenta s AI

Porozumění AI: Od tajemství k mistrovství

Co vlastně znamená "Generativní AI"?

Jak se AI modely učí (jednodušená verze)

Proč GitHub Models?

Nastavení backendové integrace v Pythonu

Porozumění základní implementaci

Porozumění rolím zpráv: Rámec AI konverzace

Porozumění parametrům AI: Jemné ladění chování odpovědí

Teplota (0.0 až 2.0): Ovladač kreativity

Max Tokens (1 až 4096+): Ovladač délky odpovědi

Top_p (0.0 až 1.0): Parametr zaměření

Spojení všeho dohromady: Kombinace parametrů pro různé případy použití

Kouzlo systémových výzev: Programování osobnosti AI

Proč jsou systémové výzvy tak silné

Tvorba efektivních systémových výzev: Umění a věda

Příklady systémových výzev s kontextem

Vidět systémové výzvy v akci

Pokročilé techniky systémových výzev

Proč je to důležité pro vašeho chatovacího asistenta

Vytvoření webového API s FastAPI: Váš vysoce výkonný

Porozumění toku požadavků a odpovědí

Porozumění architektuře API

Vytvoření aplikace FastAPI

Porozumění CORS: Bezpečnostní stráž webu

Co je CORS a proč existuje?

CORS ve vašem vývojovém prostředí

Bezpečnost CORS: Vývoj vs produkce

Běžné scénáře CORS a jejich řešení

Zpracování chyb a validace

Nastavení a spuštění backendu

Nastavení Python prostředí

Konfigurace prostředí: Udržování tajemství v bezpečí

Co jsou environmentální proměnné?

Proč na environmentálních proměnných záleží

Nastavení souboru prostředí

Vytvoření osobního přístupového tokenu GitHub

Načítání environmentálních proměnných v Pythonu

Bezpečnost Git: Soubor .gitignore

Různá prostředí, různá tajemství

Spuštění vývojového serveru: Oživení vašeho FastAPI

Porozumění procesu spuštění serveru FastAPI

Co byste měli vidět, když vše funguje

Testování vašeho FastAPI: Několik výkonných přístupů

Řešení běžných problémů při spuštění

Nejlepší postupy při vývoji

Konfigurace pro GitHub Codespaces: Snadný vývoj v cloudu

Porozumění síťování v Codespaces

Krok za krokem: Konfigurace Codespaces

Porozumění URL adresám Codespaces

Testování nastavení Codespaces

Codespaces vs Lokální vývoj

Tipy pro vývoj v Codespaces

Vytvoření uživatelského rozhraní pro chat: Kde se lidé setkávají s AI

Porozumění moderní architektuře frontendu

Tři pilíře vývoje frontendu

Proč záleží na moderní architektuře JavaScriptu

Nastavení struktury projektu

Vytvoření HTML základu: Semantická struktura pro přístupnost

Struktura dokumentu

Semantické prvky

Funkce pro přístupnost

Integrace CSS a JavaScriptu

Přidání interaktivního JavaScriptu: Logika moderní webové aplikace

Porozumění moderní architektuře JavaScriptu

Porozumění každému JavaScriptovému konceptu

Bezpečnost a nejlepší postupy

Stylování vašeho chatovacího rozhraní

Konfigurace URL backendu

Testování a nasazení

Workflow lokálního testování

Řešení běžných problémů

Výzva GitHub Copilot Agent 🚀

Zadání: Vytvořte svého osobního AI asistenta

Požadavky na projekt

Základní úkoly implementace

Nápady na vylepšení (volitelné)

Testování a dokumentace

Pokyny k odevzdání

84 KiB

Raw Blame History Unescape Escape