Windows 11 Chat Sample - Foundry Local

Moderná chatovacia aplikácia pre Windows 11, ktorá integruje Microsoft Foundry Local s krásnym natívnym rozhraním. Vytvorená pomocou Electronu a podľa oficiálnych vzorov Microsoft Foundry Local.

Prehľad

Tento príklad ukazuje, ako vytvoriť produkčne pripravenú chatovaciu aplikáciu, ktorá využíva lokálne AI modely prostredníctvom Foundry Local, poskytujúc používateľom súkromné AI konverzácie bez závislosti na cloude.

Funkcie

🎨 Natívny dizajn Windows 11

Integrácia Fluent Design System
Efekty materiálu Mica a transparentnosť
Podpora natívneho tematického vzhľadu Windows 11
Responzívne rozloženie pre všetky veľkosti obrazovky
Automatické prepínanie medzi tmavým a svetlým režimom

🤖 Integrácia AI modelov

Integrácia služby Foundry Local
Podpora viacerých modelov s možnosťou ich výmeny
Odpovede v reálnom čase
Prepínanie medzi lokálnymi a cloudovými modelmi
Monitorovanie stavu modelov

💬 Chatovacia skúsenosť

Indikátory písania v reálnom čase
Ukladanie histórie správ
Export chatových konverzácií
Vlastné systémové výzvy
Vetvenie a správa konverzácií

⚡ Výkonnostné funkcie

Lazy loading a virtualizácia
Optimalizované vykresľovanie pre dlhé konverzácie
Predbežné načítanie modelov na pozadí
Efektívne spravovanie pamäte
Plynulé animácie a prechody

Architektúra

┌─────────────────────────────────────────────────────────────┐
│                    Windows 11 Chat App                     │
├─────────────────┬─────────────────┬─────────────────────────┤
│   Electron UI   │   IPC Bridge    │    Foundry Manager      │
│                 │                 │                         │
│ • Fluent Design │ • Secure Comms  │ • Model Loading         │
│ • Chat Interface│ • Event Routing │ • Health Monitoring     │
│ • Settings      │ • State Sync    │ • Performance Tracking │
│ • Themes        │ • Error Handler │ • Resource Management   │
└─────────────────┴─────────────────┴─────────────────────────┘
                           │
                           ▼
┌─────────────────────────────────────────────────────────────┐
│               Microsoft Foundry Local Service               │
│                                                             │
│ • Local Model Hosting    • OpenAI API Compatibility        │
│ • Real-time Inference    • Model Catalog Management        │
│ • Streaming Responses    • Health & Status Monitoring      │
└─────────────────────────────────────────────────────────────┘

Predpoklady

Systémové požiadavky

OS: Windows 11 (odporúčaný 22H2 alebo novší)
RAM: Minimálne 8GB, odporúčaných 16GB+ pre väčšie modely
Úložisko: 10GB+ voľného miesta pre modely
GPU: Voliteľné, ale odporúčané pre rýchlejšie spracovanie

Softvérové závislosti

Node.js: v18.0.0 alebo novší
Foundry Local: Najnovšia verzia od Microsoftu
Git: Na klonovanie a vývoj

Inštalácia

1. Inštalácia Foundry Local

# Download from GitHub releases and install
winget install Microsoft.FoundryLocal

# Verify installation
foundry --version

2. Klonovanie a nastavenie

# Navigate to sample directory
cd Module08/samples/08

# Install dependencies
npm install

# Install Electron if not global
npm install -g electron

3. Konfigurácia prostredia

# Optional: Set cloud model credentials for hybrid mode
$env:AZURE_OPENAI_KEY="your-api-key"
$env:AZURE_OPENAI_ENDPOINT="your-endpoint"
$env:AZURE_OPENAI_MODEL="gpt-4"

4. Spustenie aplikácie

# Development mode
npm start

# Production build
npm run build
npm run dist

Štruktúra projektu

08/
├── README.md                 # This documentation
├── package.json             # Project dependencies and scripts
├── electron.js              # Main Electron process
├── preload.js              # Secure preload script
├── src/
│   ├── index.html          # Main application UI
│   ├── styles/
│   │   ├── fluent.css      # Windows 11 Fluent Design
│   │   ├── chat.css        # Chat interface styles
│   │   └── themes.css      # Light/Dark theme support
│   ├── scripts/
│   │   ├── app.js          # Main application logic
│   │   ├── chat.js         # Chat functionality
│   │   ├── models.js       # Model management
│   │   ├── settings.js     # Settings and preferences
│   │   └── utils.js        # Utility functions
│   └── assets/
│       ├── icons/          # Application icons
│       ├── sounds/         # Notification sounds
│       └── images/         # UI images and illustrations
├── foundry/
│   ├── manager.js          # Foundry Local integration
│   └── health.js           # Health monitoring
└── build/
    ├── icon.ico            # Windows application icon
    └── installer.nsi       # NSIS installer script

Podrobný pohľad na kľúčové funkcie

Integrácia Windows 11

Fluent Design System

Materiály pozadia Mica
Efekty transparentnosti Acrylic
Zaoblené rohy a moderné rozostupy
Natívna farebná paleta Windows 11
Semantické farebné tokeny pre prístupnosť

Natívne funkcie Windows

Integrácia zoznamu skokov pre nedávne chaty
Notifikácie Windows pre nové správy
Pokrok na paneli úloh pre operácie modelov
Integrácia systémovej lišty s rýchlymi akciami
Podpora autentifikácie Windows Hello

Správa AI modelov

Lokálne modely

// Automatic model discovery and loading
const models = await foundryManager.discoverModels();
await foundryManager.loadModel('phi-4-mini');

// Model health monitoring
const health = await foundryManager.checkHealth();
console.log(`Model Status: ${health.status}`);
console.log(`Memory Usage: ${health.memoryUsage}MB`);

Hybridná podpora cloudu/lokálneho režimu

// Seamless switching between local and cloud models
if (useCloudModel) {
    await chatManager.switchToCloud('gpt-4');
} else {
    await chatManager.switchToLocal('phi-4-mini');
}

Funkcie chatovacieho rozhrania

Streamovanie v reálnom čase

Zobrazenie odpovedí po tokenoch
Plynulé animácie písania
Možnosť zrušenia požiadaviek
Indikátory písania a stavu

Správa konverzácií

Ukladanie histórie chatu
Export/import konverzácií
Vyhľadávanie a filtrovanie správ
Vetvenie konverzácií
Vlastné systémové výzvy pre každú konverzáciu

Prístupnosť

Plná navigácia pomocou klávesnice
Kompatibilita so čítačkami obrazovky
Podpora režimu vysokého kontrastu
Prispôsobiteľné veľkosti písma
Integrácia hlasového vstupu

Príklady použitia

Základná integrácia chatu

// Initialize the chat system
const chat = new ChatManager({
    foundryEndpoint: 'http://localhost:5273',
    defaultModel: 'phi-4-mini',
    streaming: true
});

// Send a message
const response = await chat.sendMessage({
    content: 'Explain quantum computing',
    model: 'phi-4-mini',
    systemPrompt: 'You are a helpful physics teacher.'
});

// Handle streaming responses
chat.on('chunk', (chunk) => {
    appendMessageChunk(chunk.content);
});

Správa modelov

// Load a new model
await modelManager.loadModel('qwen2.5-coder-0.5b', {
    showProgress: true,
    autoStart: true
});

// Monitor model performance
modelManager.on('performance', (metrics) => {
    updatePerformanceUI(metrics);
});

// Switch models mid-conversation
await chat.switchModel('phi-4-mini', {
    preserveContext: true
});

Nastavenia a prispôsobenie

// Configure chat behavior
const settings = {
    theme: 'system', // auto, light, dark
    model: 'phi-4-mini',
    streaming: true,
    maxTokens: 1000,
    temperature: 0.7,
    systemPrompt: 'You are a helpful assistant.'
};

await settingsManager.updateSettings(settings);

Možnosti konfigurácie

Nastavenia aplikácie

Téma: Automatický, svetlý, tmavý režim
Model: Predvolený výber modelu
Výkon: Nastavenia spracovania
Súkromie: Politiky uchovávania údajov
Notifikácie: Upozornenia na správy
Skratky: Klávesové skratky

Nastavenia chatu

Streamovanie: Povolenie/zakázanie odpovedí v reálnom čase
Dĺžka kontextu: Pamäť konverzácie
Teplota: Kreativita odpovedí
Maximálny počet tokenov: Limity dĺžky odpovedí
Systémové výzvy: Predvolené správanie asistenta

Nastavenia modelov

Automatické sťahovanie: Automatické aktualizácie modelov
Veľkosť cache: Limity úložiska lokálnych modelov
Režim výkonu: Preferencie CPU vs GPU
Kontroly stavu: Intervaly monitorovania

Vývoj

Vytvorenie zo zdroja

# Install development dependencies
npm install

# Run in development mode
npm run dev

# Build for production
npm run build

# Create installer
npm run dist

Ladenie

# Enable debug mode
set DEBUG=foundry-chat:*
npm start

# View developer tools
# Press F12 in the application

Testovanie

# Run unit tests
npm test

# Run integration tests
npm run test:integration

# Run end-to-end tests
npm run test:e2e

Optimalizácia výkonu

Správa pamäte

Efektívna virtualizácia správ
Automatické zberanie odpadu
Monitorovanie pamäte modelov
Vyčistenie zdrojov pri ukončení

Optimalizácia vykresľovania

Virtuálne rolovanie pre dlhé konverzácie
Lazy loading histórie správ
Optimalizované aktualizácie React/DOM
Animácie akcelerované GPU

Optimalizácia siete

Pooling pripojení
Dávkovanie požiadaviek
Automatická logika opakovania
Podpora offline režimu

Bezpečnostné aspekty

Ochrana údajov

Architektúra orientovaná na lokálne spracovanie
Žiadny prenos údajov do cloudu (lokálny režim)
Šifrované ukladanie konverzácií
Bezpečné spravovanie poverení

Bezpečnosť aplikácie

Procesy rendereru v sandboxe
Politika bezpečnosti obsahu (CSP)
Žiadne vzdialené vykonávanie kódu
Bezpečná komunikácia IPC

Riešenie problémov

Bežné problémy

Foundry Local sa nespúšťa

# Check service status
foundry status

# Restart service
foundry restart

# Check logs
foundry logs

Zlyhanie načítania modelov

Skontrolujte dostatok miesta na disku
Overte internetové pripojenie pre sťahovanie
Uistite sa, že ovládače GPU sú aktuálne
Vyskúšajte rôzne varianty modelov

Problémy s výkonom

Monitorujte systémové zdroje
Upravte nastavenia modelov
Povolenie hardvérovej akcelerácie
Zatvorte iné aplikácie náročné na zdroje

Režim ladenia

Povolenie logovania ladenia nastavením premenných prostredia:

$env:DEBUG="foundry:*"
$env:FOUNDRY_LOG_LEVEL="debug"

Prispievanie

Nastavenie vývoja

Forknite repozitár
Vytvorte vetvu pre funkciu
Nainštalujte závislosti: npm install
Urobte zmeny a otestujte
Podajte pull request

Štýl kódu

Poskytnutá konfigurácia ESLint
Prettier na formátovanie kódu
TypeScript pre typovú bezpečnosť
JSDoc komentáre pre dokumentáciu

Výsledky učenia

Po dokončení tohto príkladu budete rozumieť:

Natívny vývoj pre Windows 11
- Implementácia Fluent Design System
- Integrácia natívnych funkcií Windows
- Najlepšie praktiky bezpečnosti Electronu
Integrácia AI modelov
- Architektúra služby Foundry Local
- Správa životného cyklu modelov
- Monitorovanie výkonu a optimalizácia
Systémy chatu v reálnom čase
- Spracovanie odpovedí v reálnom čase
- Správa stavu konverzácie
- Vzory používateľskej skúsenosti
Vývoj produkčných aplikácií
- Riešenie chýb a obnova
- Optimalizácia výkonu
- Bezpečnostné aspekty
- Testovacie stratégie

Ďalšie kroky

Príklad 09: Systém orchestrácie viacerých agentov
Príklad 10: Integrácia Foundry Local ako nástroja
Pokročilé témy: Jemné doladenie vlastných modelov
Nasadenie: Vzory nasadenia pre podniky

Licencia

Tento príklad nasleduje rovnakú licenciu ako projekt Microsoft Foundry Local.

FilesExpand file tree

README.md

Latest commit

History