Session 4: Vytváranie produkčných chatovacích aplikácií s Chainlit

Prehľad

Táto relácia sa zameriava na vytváranie produkčne pripravených chatovacích aplikácií pomocou Chainlit a Microsoft Foundry Local. Naučíte sa vytvárať moderné webové rozhrania pre AI konverzácie, implementovať streamovanie odpovedí a nasadzovať robustné chatovacie aplikácie s vhodným spracovaním chýb a dizajnom používateľského rozhrania.

Čo budete vytvárať:

Chainlit Chat App: Moderné webové UI so streamovaním odpovedí
WebGPU Demo: Inferencia v prehliadači pre aplikácie s prioritou ochrany súkromia
Integrácia Open WebUI: Profesionálne chatovacie rozhranie s Foundry Local
Produkčné vzory: Spracovanie chýb, monitorovanie a stratégie nasadenia

Ciele učenia

Vytvárať produkčne pripravené chatovacie aplikácie s Chainlit
Implementovať streamovanie odpovedí pre lepší používateľský zážitok
Ovládnuť integračné vzory Foundry Local SDK
Použiť správne spracovanie chýb a postupné zhoršovanie funkčnosti
Nasadzovať a konfigurovať chatovacie aplikácie pre rôzne prostredia
Pochopiť moderné vzory webového UI pre konverzačné AI

Predpoklady

Foundry Local: Nainštalovaný a spustený (Inštalačný sprievodca)
Python: Verzia 3.10 alebo novšia s podporou virtuálneho prostredia
Model: Aspoň jeden načítaný model (foundry model run phi-4-mini)
Prehliadač: Moderný webový prehliadač s podporou WebGPU (Chrome/Edge)
Docker: Pre integráciu Open WebUI (voliteľné)

Časť 1: Pochopenie moderných chatovacích aplikácií

Prehľad architektúry

User Browser ←→ Chainlit UI ←→ Python Backend ←→ Foundry Local ←→ AI Model
      ↓              ↓              ↓              ↓            ↓
   Web UI      Event Handlers   OpenAI Client   HTTP API    Local GPU

Kľúčové technológie

Vzory Foundry Local SDK:

FoundryLocalManager(alias): Automatické spravovanie služieb
manager.endpoint a manager.api_key: Detaily pripojenia
manager.get_model_info(alias).id: Identifikácia modelu

Rámec Chainlit:

@cl.on_chat_start: Inicializácia chatovacích relácií
@cl.on_message: Spracovanie prichádzajúcich správ od používateľov
cl.Message().stream_token(): Streamovanie v reálnom čase
Automatická generácia UI a správa WebSocketov

Časť 2: Rozhodovacia matica Lokálne vs Cloud

Charakteristiky výkonu

Aspekt	Lokálne (Foundry)	Cloud (Azure OpenAI)
Latencia	🚀 50-200ms (bez siete)	⏱️ 200-2000ms (závislé od siete)
Ochrana súkromia	🔒 Dáta nikdy neopúšťajú zariadenie	⚠️ Dáta sa posielajú do cloudu
Náklady	💰 Zadarmo po zakúpení hardvéru	💸 Platba za token
Offline	✅ Funguje bez internetu	❌ Vyžaduje internet
Veľkosť modelu	⚠️ Obmedzené hardvérom	✅ Prístup k najväčším modelom
Škálovanie	⚠️ Závislé od hardvéru	✅ Neobmedzené škálovanie

Hybridné stratégie

Lokálne najprv s možnosťou záložného riešenia:

async def hybrid_completion(prompt: str, complexity_threshold: int = 100):
    if len(prompt.split()) < complexity_threshold:
        return await local_completion(prompt)  # Fast, private
    else:
        return await cloud_completion(prompt)   # Complex reasoning

Smerovanie na základe úloh:

async def smart_routing(prompt: str, task_type: str):
    routing_rules = {
        "code_generation": "local",     # Privacy-sensitive
        "creative_writing": "cloud",    # Benefits from larger models
        "data_analysis": "local",       # Fast iteration needed
        "research": "cloud"             # Requires broad knowledge
    }
    
    if routing_rules.get(task_type) == "local":
        return await foundry_completion(prompt)
    else:
        return await azure_completion(prompt)

Časť 3: Ukážka 04 - Chainlit Chat Application

Rýchly štart

# Navigate to Module08 directory  
cd Module08

# Start your preferred model
foundry model run phi-4-mini

# Run the Chainlit application (avoiding port conflicts)
chainlit run samples\04\app.py -w --port 8080

Aplikácia sa automaticky otvorí na http://localhost:8080 s moderným chatovacím rozhraním.

Hlavná implementácia

Ukážka 04 demonštruje produkčne pripravené vzory:

Automatické vyhľadávanie služieb:

import chainlit as cl
from openai import OpenAI
from foundry_local import FoundryLocalManager

# Global variables for client and model
client = None
model_name = None

async def initialize_client():
    global client, model_name
    alias = os.environ.get("MODEL", "phi-4-mini")
    
    try:
        # Use FoundryLocalManager for proper service management
        manager = FoundryLocalManager(alias)
        model_info = manager.get_model_info(alias)
        
        client = OpenAI(
            base_url=manager.endpoint,
            api_key=manager.api_key or "not-required"
        )
        model_name = model_info.id if model_info else alias
        return True
    except Exception as e:
        # Fallback to manual configuration
        base_url = os.environ.get("BASE_URL", "http://localhost:51211")
        client = OpenAI(base_url=f"{base_url}/v1", api_key="not-required")
        model_name = alias
        return True

Spracovanie streamovania chatu:

@cl.on_message
async def main(message: cl.Message):
    # Create streaming response
    msg = cl.Message(content="")
    await msg.send()
    
    stream = client.chat.completions.create(
        model=model_name,
        messages=[
            {"role": "system", "content": "You are a helpful AI assistant."},
            {"role": "user", "content": message.content}
        ],
        stream=True
    )
    
    # Stream tokens in real-time
    for chunk in stream:
        if chunk.choices[0].delta.content:
            await msg.stream_token(chunk.choices[0].delta.content)
    
    await msg.update()

Možnosti konfigurácie

Premenné prostredia:

Premenná	Popis	Predvolená hodnota	Príklad
`MODEL`	Alias modelu na použitie	`phi-4-mini`	`qwen2.5-7b`
`BASE_URL`	Endpoint Foundry Local	Automaticky detekovaný	`http://localhost:51211`
`API_KEY`	API kľúč (voliteľný pre lokálne)	`""`	`your-api-key`

Pokročilé použitie:

# Use different model
set MODEL=qwen2.5-7b
chainlit run samples\04\app.py -w --port 8080

# Use different ports (avoid 51211 which is used by Foundry Local)
chainlit run samples\04\app.py -w --port 3000
chainlit run samples\04\app.py -w --port 5000

Časť 4: Vytváranie a používanie Jupyter notebookov

Prehľad podpory notebookov

Ukážka 04 obsahuje komplexný Jupyter notebook (chainlit_app.ipynb), ktorý poskytuje:

📚 Vzdelávací obsah: Krok za krokom učebné materiály
🔬 Interaktívne skúmanie: Spúšťanie a experimentovanie s bunkami kódu
📊 Vizualizácie: Grafy, diagramy a vizualizácia výstupov
🛠️ Nástroje na vývoj: Testovanie a ladenie

Vytváranie vlastných notebookov

Krok 1: Nastavenie prostredia Jupyter

# Ensure you're in the Module08 directory
cd Module08

# Activate your virtual environment
.venv\Scripts\activate

# Install Jupyter and dependencies
pip install jupyter notebook jupyterlab ipykernel
pip install -r requirements.txt

# Register the kernel for VS Code
python -m ipykernel install --user --name=foundry-local --display-name="Foundry Local"

Krok 2: Vytvorenie nového notebooku

Použitie VS Code:

Otvorte VS Code v adresári Module08
Vytvorte nový súbor s príponou .ipynb
Vyberte "Foundry Local" kernel, keď sa zobrazí výzva
Začnite pridávať bunky s obsahom

Použitie Jupyter Lab:

# Start Jupyter Lab
jupyter lab

# Navigate to samples/04/ and create new notebook
# Choose Python 3 kernel

Najlepšie praktiky štruktúry notebookov

Organizácia buniek

# Cell 1: Imports and Setup
import os
import sys
import chainlit as cl
from openai import OpenAI
from foundry_local import FoundryLocalManager

print("✅ Libraries imported successfully")

# Cell 2: Configuration and Client Setup
class FoundryClientManager:
    def __init__(self, model_name="phi-4-mini"):
        self.model_name = model_name
        self.client = None
        
    def initialize_client(self):
        # Client initialization logic
        pass

# Initialize and test
client_manager = FoundryClientManager()
result = client_manager.initialize_client()
print(f"Client initialized: {result}")

Interaktívne príklady a cvičenia

Cvičenie 1: Testovanie konfigurácie klienta

# Test different configuration methods
configurations = [
    {"method": "foundry_sdk", "model": "phi-4-mini"},
    {"method": "manual", "base_url": "http://localhost:51211", "model": "qwen2.5-7b"},
]

for config in configurations:
    print(f"\n🧪 Testing {config['method']} configuration...")
    # Implementation here
    result = test_configuration(config)
    print(f"Result: {'✅ Success' if result['status'] == 'ok' else '❌ Failed'}")

Cvičenie 2: Simulácia streamovania odpovedí

import asyncio

async def simulate_streaming_response(text, delay=0.1):
    """Simulate how streaming works in Chainlit."""
    print("🌊 Simulating streaming response...")
    
    for char in text:
        print(char, end='', flush=True)
        await asyncio.sleep(delay)
    
    print("\n✅ Streaming complete!")

# Test the simulation
sample_text = "This is how streaming responses work in Chainlit applications!"
await simulate_streaming_response(sample_text)

Časť 5: WebGPU Demo inferencie v prehliadači

Prehľad

WebGPU umožňuje spúšťať AI modely priamo v prehliadači pre maximálnu ochranu súkromia a zážitok bez nutnosti inštalácie. Táto ukážka demonštruje ONNX Runtime Web s WebGPU vykonávaním.

Krok 1: Skontrolujte podporu WebGPU

Požiadavky na prehliadač:

Chrome/Edge 113+ s povoleným WebGPU
Skontrolujte: chrome://gpu → potvrďte stav "WebGPU"
Programová kontrola: if (!('gpu' in navigator)) { /* no WebGPU */ }

Krok 2: Vytvorenie WebGPU Demo

Vytvorte adresár: samples/04/webgpu-demo/

index.html:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>WebGPU + ONNX Runtime Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/onnxruntime-web/dist/ort.webgpu.min.js"></script>
    <style>
        body { font-family: system-ui, sans-serif; margin: 2rem; }
        pre { background: #f5f5f5; padding: 1rem; overflow: auto; }
        .status { padding: 1rem; background: #e3f2fd; border-radius: 4px; }
    </style>
</head>
<body>
    <h1>🚀 WebGPU + Foundry Local Integration</h1>
    <div id="status" class="status">Initializing...</div>
    <pre id="output"></pre>
    <script type="module" src="./main.js"></script>
</body>
</html>

main.js:

const statusEl = document.getElementById('status');
const outputEl = document.getElementById('output');

function log(msg) {
    outputEl.textContent += `${msg}\n`;
    console.log(msg);
}

(async () => {
    try {
        if (!('gpu' in navigator)) {
            statusEl.textContent = '❌ WebGPU not available';
            return;
        }
        
        statusEl.textContent = '🔍 WebGPU detected. Loading model...';
        
        // Use a small ONNX model for demo
        const modelUrl = 'https://huggingface.co/onnx/models/resolve/main/vision/classification/mnist-12/mnist-12.onnx';
        
        const session = await ort.InferenceSession.create(modelUrl, {
            executionProviders: ['webgpu']
        });
        
        log('✅ ONNX Runtime session created with WebGPU');
        log(`📊 Input names: ${session.inputNames.join(', ')}`);
        log(`📊 Output names: ${session.outputNames.join(', ')}`);
        
        // Create dummy input (MNIST expects 1x1x28x28)
        const inputData = new Float32Array(1 * 1 * 28 * 28).fill(0.1);
        const input = new ort.Tensor('float32', inputData, [1, 1, 28, 28]);
        
        const feeds = {};
        feeds[session.inputNames[0]] = input;
        
        const results = await session.run(feeds);
        const output = results[session.outputNames[0]];
        
        // Find prediction (argmax)
        let maxIdx = 0;
        for (let i = 1; i < output.data.length; i++) {
            if (output.data[i] > output.data[maxIdx]) maxIdx = i;
        }
        
        statusEl.textContent = '✅ WebGPU inference complete!';
        log(`🎯 Predicted class: ${maxIdx}`);
        log(`📈 Confidence scores: [${Array.from(output.data).map(x => x.toFixed(3)).join(', ')}]`);
        
    } catch (error) {
        statusEl.textContent = `❌ Error: ${error.message}`;
        log(`Error: ${error.message}`);
        console.error(error);
    }
})();

Krok 3: Spustenie ukážky

# Create demo directory
mkdir samples\04\webgpu-demo
cd samples\04\webgpu-demo

# Save HTML and JS files, then serve
python -m http.server 5173

# Open browser to http://localhost:5173

Časť 6: Integrácia Open WebUI

Prehľad

Open WebUI poskytuje profesionálne rozhranie podobné ChatGPT, ktoré sa pripája k OpenAI-kompatibilnému API Foundry Local.

Krok 1: Predpoklady

# Verify Foundry Local is running
foundry service status

# Start a model
foundry model run phi-4-mini

# Confirm API endpoint is accessible
curl http://localhost:51211/v1/models

Krok 2: Nastavenie Dockeru (odporúčané)

# Pull Open WebUI image
docker pull ghcr.io/open-webui/open-webui:main

# Run with Foundry Local connection
docker run -d --name open-webui -p 3000:8080 ^
  -e OPENAI_API_BASE_URL=http://host.docker.internal:51211/v1 ^
  -e OPENAI_API_KEY=foundry-local-key ^
  -v open-webui-data:/app/backend/data ^
  ghcr.io/open-webui/open-webui:main

Poznámka: host.docker.internal umožňuje Docker kontajnerom prístup k hostiteľskému počítaču na Windows.

Krok 3: Konfigurácia

Otvorte prehliadač: Prejdite na http://localhost:3000
Počiatočné nastavenie: Vytvorte administrátorský účet
Konfigurácia modelu:
- Nastavenia → Modely → OpenAI API
- Základná URL: http://host.docker.internal:51211/v1
- API kľúč: foundry-local-key (akákoľvek hodnota funguje)
Test pripojenia: Modely by sa mali zobraziť v rozbaľovacom zozname

Riešenie problémov

Bežné problémy:

Pripojenie odmietnuté:

# Check Foundry Local status
foundry service ps
netstat -ano | findstr :51211

Modely sa nezobrazujú:
- Overte, či je model načítaný: foundry model list
- Skontrolujte odpoveď API: curl http://localhost:51211/v1/models
- Reštartujte kontajner Open WebUI

Časť 7: Úvahy o produkčnom nasadení

Konfigurácia prostredia

Vývojové nastavenie:

# Development with auto-reload and debugging
chainlit run samples\04\app.py -w --port 8080 --debug

Produkčné nasadenie:

# Production mode with optimizations
chainlit run samples\04\app.py --host 0.0.0.0 --port 8080 --no-cache

Bežné problémy s portami a ich riešenia

Prevencia konfliktov portu 51211:

# Check what's using Foundry Local port
netstat -ano | findstr :51211

# Use different port for Chainlit
chainlit run samples\04\app.py -w --port 8080

Monitorovanie výkonu

Implementácia kontroly stavu:

@cl.on_chat_start
async def health_check():
    try:
        # Test model availability
        response = client.chat.completions.create(
            model=model_name,
            messages=[{"role": "user", "content": "test"}],
            max_tokens=1
        )
        return {"status": "healthy", "model": model_name}
    except Exception as e:
        return {"status": "unhealthy", "error": str(e)}

Zhrnutie

Relácia 4 pokryla vytváranie produkčne pripravených aplikácií Chainlit pre konverzačné AI. Naučili ste sa:

✅ Rámec Chainlit: Moderné UI a podpora streamovania pre chatovacie aplikácie
✅ Integrácia Foundry Local: Použitie SDK a vzory konfigurácie
✅ Inferencia WebGPU: AI v prehliadači pre maximálnu ochranu súkromia
✅ Nastavenie Open WebUI: Nasadenie profesionálneho chatovacieho rozhrania
✅ Produkčné vzory: Spracovanie chýb, monitorovanie a škálovanie

Ukážka 04 demonštruje najlepšie praktiky pre vytváranie robustných chatovacích rozhraní, ktoré využívajú lokálne AI modely prostredníctvom Microsoft Foundry Local a zároveň poskytujú vynikajúci používateľský zážitok.

Referencie

Ukážka 04: Chainlit Application: Kompletná aplikácia s dokumentáciou
Vzdelávací notebook Chainlit: Interaktívne učebné materiály
Dokumentácia Foundry Local: Kompletná dokumentácia platformy
Dokumentácia Chainlit: Oficiálna dokumentácia rámca
Sprievodca integráciou Open WebUI: Oficiálny tutoriál

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

FilesExpand file tree

04.CuttingEdgeModels.md

Latest commit

History

04.CuttingEdgeModels.md

File metadata and controls

Session 4: Vytváranie produkčných chatovacích aplikácií s Chainlit

Prehľad

Ciele učenia

Predpoklady

Časť 1: Pochopenie moderných chatovacích aplikácií

Prehľad architektúry

Kľúčové technológie

Časť 2: Rozhodovacia matica Lokálne vs Cloud

Charakteristiky výkonu

Hybridné stratégie

Časť 3: Ukážka 04 - Chainlit Chat Application

Rýchly štart

Hlavná implementácia

Možnosti konfigurácie

Časť 4: Vytváranie a používanie Jupyter notebookov

Prehľad podpory notebookov

Vytváranie vlastných notebookov

Krok 1: Nastavenie prostredia Jupyter

Krok 2: Vytvorenie nového notebooku

Najlepšie praktiky štruktúry notebookov

Organizácia buniek

Interaktívne príklady a cvičenia

Cvičenie 1: Testovanie konfigurácie klienta

Cvičenie 2: Simulácia streamovania odpovedí

Časť 5: WebGPU Demo inferencie v prehliadači

Prehľad

Krok 1: Skontrolujte podporu WebGPU

Krok 2: Vytvorenie WebGPU Demo

Krok 3: Spustenie ukážky

Časť 6: Integrácia Open WebUI

Prehľad

Krok 1: Predpoklady

Krok 2: Nastavenie Dockeru (odporúčané)

Krok 3: Konfigurácia

Riešenie problémov

Časť 7: Úvahy o produkčnom nasadení

Konfigurácia prostredia

Bežné problémy s portami a ich riešenia

Monitorovanie výkonu

Zhrnutie

Referencie