Skip to content

README.md

Latest commit

 

History

History
454 lines (365 loc) · 12.5 KB

README.md

File metadata and controls

454 lines (365 loc) · 12.5 KB

Windows 11 Chat Eksempel - Foundry Local

En moderne chatapplikation til Windows 11, der integrerer Microsoft Foundry Local med en smuk, indbygget grænseflade. Bygget med Electron og følger Microsofts officielle Foundry Local-mønstre.

Oversigt

Dette eksempel viser, hvordan man opretter en produktionsklar chatapplikation, der udnytter lokale AI-modeller via Foundry Local, og giver brugerne privatlivsfokuserede AI-samtaler uden afhængighed af skyen.

Funktioner

🎨 Windows 11 Indbygget Design

  • Integration med Fluent Design System
  • Mica-materialeeffekter og gennemsigtighed
  • Understøttelse af indbygget Windows 11-tema
  • Responsivt layout til alle skærmstørrelser
  • Automatisk skift mellem mørk/lys tilstand

🤖 AI Model Integration

  • Integration med Foundry Local-tjenesten
  • Understøttelse af flere modeller med hot-swapping
  • Streaming-svar i realtid
  • Skift mellem lokale og cloud-modeller
  • Overvågning af modelstatus og sundhed

💬 Chatoplevelse

  • Skriveindikatorer i realtid
  • Vedvarende beskedhistorik
  • Eksport af chat-samtaler
  • Tilpassede systemprompter
  • Forgrening og styring af samtaler

⚡ Ydelsesfunktioner

  • Lazy loading og virtualisering
  • Optimeret rendering til lange samtaler
  • Forudindlæsning af modeller i baggrunden
  • Effektiv hukommelseshåndtering
  • Glatte animationer og overgange

Arkitektur

┌─────────────────────────────────────────────────────────────┐
│                    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      │
└─────────────────────────────────────────────────────────────┘

Forudsætninger

Systemkrav

  • OS: Windows 11 (22H2 eller nyere anbefales)
  • RAM: Minimum 8GB, 16GB+ anbefales til større modeller
  • Lagring: 10GB+ ledig plads til modeller
  • GPU: Valgfrit, men anbefales til hurtigere inferens

Softwareafhængigheder

  • Node.js: v18.0.0 eller nyere
  • Foundry Local: Seneste version fra Microsoft
  • Git: Til kloning og udvikling

Installation

1. Installer Foundry Local

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

# Verify installation
foundry --version

2. Klon og opsæt

# Navigate to sample directory
cd Module08/samples/08

# Install dependencies
npm install

# Install Electron if not global
npm install -g electron

3. Konfigurer miljø

# 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. Kør applikationen

# Development mode
npm start

# Production build
npm run build
npm run dist

Projektstruktur

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

Dybdegående funktioner

Windows 11 Integration

Fluent Design System

  • Mica baggrundsmaterialer
  • Akryl gennemsigtighedseffekter
  • Afrundede hjørner og moderne afstand
  • Indbygget Windows 11 farvepalet
  • Semantiske farvetokens for tilgængelighed

Indbyggede Windows-funktioner

  • Jump list-integration til nylige chats
  • Windows-notifikationer for nye beskeder
  • Processtatus på proceslinjen for modeloperationer
  • Systembakkeintegration med hurtige handlinger
  • Understøttelse af Windows Hello-godkendelse

AI Modelhåndtering

Lokale modeller

// 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`);

Hybrid Cloud/Lokal Support

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

Chatgrænsefladefunktioner

Streaming i realtid

  • Token-for-token svarvisning
  • Glatte skriveanimationer
  • Annullerbare forespørgsler
  • Skriveindikatorer og status

Samtalestyring

  • Vedvarende chat-historik
  • Eksport/import af samtaler
  • Beskedsøgning og filtrering
  • Forgrening af samtaler
  • Tilpassede systemprompter pr. samtale

Tilgængelighed

  • Fuld tastaturnavigation
  • Kompatibilitet med skærmlæsere
  • Understøttelse af høj kontrast-tilstand
  • Tilpasning af skrifttypestørrelser
  • Integration af stemmeinput

Brugs Eksempler

Grundlæggende Chat Integration

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

Modelhåndtering

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

Indstillinger og Tilpasning

// 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);

Konfigurationsmuligheder

Applikationsindstillinger

  • Tema: Auto, lys, mørk tilstand
  • Model: Standard modelvalg
  • Ydelse: Indstillinger for inferens
  • Privatliv: Politik for dataopbevaring
  • Notifikationer: Beskedalarmer
  • Genveje: Tastaturgenveje

Chatindstillinger

  • Streaming: Aktiver/deaktiver svar i realtid
  • Kontekstens længde: Samtalens hukommelse
  • Temperatur: Kreativitet i svar
  • Maksimale tokens: Begrænsninger for svarlængde
  • Systemprompter: Standardassistentens adfærd

Modelindstillinger

  • Auto-download: Automatiske modelopdateringer
  • Cache-størrelse: Begrænsninger for lokal modelopbevaring
  • Ydelsestilstand: CPU vs GPU præferencer
  • Sundhedstjek: Overvågningsintervaller

Udvikling

Byg fra kilde

# Install development dependencies
npm install

# Run in development mode
npm run dev

# Build for production
npm run build

# Create installer
npm run dist

Fejlfinding

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

# View developer tools
# Press F12 in the application

Test

# Run unit tests
npm test

# Run integration tests
npm run test:integration

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

Ydelsesoptimering

Hukommelseshåndtering

  • Effektiv virtualisering af beskeder
  • Automatisk affaldsindsamling
  • Overvågning af modelhukommelse
  • Ressourceoprydning ved afslutning

Renderingoptimering

  • Virtuel scrolling til lange samtaler
  • Lazy loading af beskedhistorik
  • Optimerede React/DOM-opdateringer
  • GPU-accelererede animationer

Netværksoptimering

  • Forbindelsespooling
  • Batchning af forespørgsler
  • Automatisk genforsøg
  • Understøttelse af offline-tilstand

Sikkerhedsovervejelser

Dataprivacy

  • Lokal-først arkitektur
  • Ingen dataoverførsel til skyen (lokal tilstand)
  • Krypteret samtaleopbevaring
  • Sikker håndtering af legitimationsoplysninger

Applikationssikkerhed

  • Sandkasse til renderer-processer
  • Content Security Policy (CSP)
  • Ingen fjernudførelse af kode
  • Sikker IPC-kommunikation

Fejlfinding

Almindelige Problemer

Foundry Local Starter Ikke

# Check service status
foundry status

# Restart service
foundry restart

# Check logs
foundry logs

Fejl ved Modelloading

  • Kontroller tilstrækkelig diskplads
  • Tjek internetforbindelse til downloads
  • Sørg for, at GPU-drivere er opdaterede
  • Prøv forskellige modelvarianter

Ydelsesproblemer

  • Overvåg systemressourcer
  • Juster modelindstillinger
  • Aktiver hardwareacceleration
  • Luk andre ressourcekrævende applikationer

Fejltilstand

Aktiver fejllogning ved at indstille miljøvariabler:

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

Bidrag

Udviklingsopsætning

  1. Fork repositoryet
  2. Opret en feature branch
  3. Installer afhængigheder: npm install
  4. Foretag ændringer og test
  5. Indsend en pull request

Kodestil

  • ESLint-konfiguration inkluderet
  • Prettier til kodeformatering
  • TypeScript for type-sikkerhed
  • JSDoc-kommentarer til dokumentation

Læringsresultater

Efter at have gennemført dette eksempel vil du forstå:

  1. Windows 11 Indbygget Udvikling

    • Implementering af Fluent Design System
    • Integration med Windows-funktioner
    • Elektron-sikkerheds bedste praksis

  2. AI Model Integration

    • Foundry Local servicearkitektur
    • Håndtering af modellivscyklus
    • Ydelsesovervågning og optimering

  3. Chat Systemer i Real-tid

    • Håndtering af streaming-svar
    • Styring af samtaletilstand
    • Brugeroplevelsesmønstre

  4. Udvikling af Produktionsapplikationer

    • Fejlhåndtering og genopretning
    • Ydelsesoptimering
    • Sikkerhedsovervejelser
    • Teststrategier

Næste Skridt

  • Eksempel 09: Multi-Agent Orchestration System
  • Eksempel 10: Foundry Local som værktøjsintegration
  • Avancerede Emner: Tilpasning af model finjustering
  • Udrulning: Mønstre for virksomhedsudrulning

Licens

Dette eksempel følger samme licens som Microsoft Foundry Local-projektet.