Skip to content

README.md

Latest commit

 

History

History
454 lines (365 loc) · 12.7 KB

README.md

File metadata and controls

454 lines (365 loc) · 12.7 KB

Windows 11 Chat Sample - Foundry Local

En modern chattapplikation för Windows 11 som integrerar Microsoft Foundry Local med ett vackert, inbyggt gränssnitt. Byggd med Electron och följer Microsofts officiella Foundry Local-mönster.

Översikt

Detta exempel visar hur man skapar en produktionsklar chattapplikation som utnyttjar lokala AI-modeller via Foundry Local, vilket ger användare integritetsfokuserade AI-konversationer utan molnberoenden.

Funktioner

🎨 Windows 11 Native Design

  • Integration med Fluent Design System
  • Mica-materialeffekter och transparens
  • Stöd för inbyggd Windows 11-tema
  • Responsiv layout för alla skärmstorlekar
  • Automatisk växling mellan mörkt/ljust läge

🤖 AI-modellintegration

  • Integration med Foundry Local-tjänsten
  • Stöd för flera modeller med snabb växling
  • Realtidsströmmande svar
  • Växling mellan lokala och molnbaserade modeller
  • Övervakning av modellhälsa och status

💬 Chattupplevelse

  • Realtidsindikatorer för skrivande
  • Ihållande meddelandehistorik
  • Exportera chattkonversationer
  • Anpassade systemprompter
  • Hantering och förgrening av konversationer

⚡ Prestandafunktioner

  • Lazy loading och virtualisering
  • Optimerad rendering för långa konversationer
  • Förladdning av modeller i bakgrunden
  • Effektiv minneshantering
  • Smidiga animationer och övergångar

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

Förutsättningar

Systemkrav

  • OS: Windows 11 (22H2 eller senare rekommenderas)
  • RAM: Minst 8GB, 16GB+ rekommenderas för större modeller
  • Lagring: 10GB+ ledigt utrymme för modeller
  • GPU: Valfritt men rekommenderas för snabbare inferens

Programvarukrav

  • Node.js: v18.0.0 eller senare
  • Foundry Local: Senaste versionen från Microsoft
  • Git: För kloning och utveckling

Installation

1. Installera Foundry Local

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

# Verify installation
foundry --version

2. Klona och konfigurera

# Navigate to sample directory
cd Module08/samples/08

# Install dependencies
npm install

# Install Electron if not global
npm install -g electron

3. Konfigurera miljön

# 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

Djupdykning i nyckelfunktioner

Windows 11-integration

Fluent Design System

  • Mica-bakgrundsmaterial
  • Akryltransparenseffekter
  • Rundade hörn och modern spacing
  • Inbyggd Windows 11-färgpalett
  • Semantiska färgtokens för tillgänglighet

Inbyggda Windows-funktioner

  • Jump list-integration för senaste chattar
  • Windows-notifikationer för nya meddelanden
  • Aktivitetsfältets framsteg för modelloperationer
  • Systemfackintegration med snabbåtgärder
  • Stöd för Windows Hello-autentisering

AI-modellhantering

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

Hybridstöd för moln/lokalt

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

Funktioner i chattgränssnittet

Realtidsströmning

  • Token-för-token-svarvisning
  • Smidiga skrivanimationer
  • Avbrytbara förfrågningar
  • Indikatorer för skrivande och status

Hantering av konversationer

  • Ihållande chattlogg
  • Export/import av konversationer
  • Sök och filtrering av meddelanden
  • Förgrening av konversationer
  • Anpassade systemprompter per konversation

Tillgänglighet

  • Fullständig tangentbordsnavigering
  • Kompatibilitet med skärmläsare
  • Stöd för högkontrastläge
  • Anpassningsbara teckenstorlekar
  • Röstinmatningsintegration

Användningsexempel

Grundläggande chattintegration

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

Modellhantering

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

Inställningar och anpassning

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

Konfigurationsalternativ

Applikationsinställningar

  • Tema: Auto, ljust, mörkt läge
  • Modell: Standardval av modell
  • Prestanda: Inställningar för inferens
  • Integritet: Policyer för datalagring
  • Notifikationer: Meddelandevarningar
  • Snabbkommandon: Tangentbordsgenvägar

Chattinställningar

  • Strömning: Aktivera/inaktivera realtidssvar
  • Kontextlängd: Minneskapacitet för konversationer
  • Temperatur: Kreativitet i svar
  • Max Tokens: Begränsningar för svarslängd
  • Systemprompter: Standardbeteende för assistenten

Modellinställningar

  • Auto-nedladdning: Automatiska modelluppdateringar
  • Cache-storlek: Begränsningar för lokal modellagring
  • Prestandaläge: CPU kontra GPU-preferenser
  • Hälsokontroller: Övervakningsintervaller

Utveckling

Bygga från källkod

# Install development dependencies
npm install

# Run in development mode
npm run dev

# Build for production
npm run build

# Create installer
npm run dist

Felsökning

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

# View developer tools
# Press F12 in the application

Testning

# Run unit tests
npm test

# Run integration tests
npm run test:integration

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

Prestandaoptimering

Minneshantering

  • Effektiv virtualisering av meddelanden
  • Automatisk garbage collection
  • Övervakning av modellminne
  • Resursrensning vid avslut

Renderingoptimering

  • Virtuell scrollning för långa konversationer
  • Lazy loading av meddelandehistorik
  • Optimerade React/DOM-uppdateringar
  • GPU-accelererade animationer

Nätverksoptimering

  • Poolning av anslutningar
  • Batchning av förfrågningar
  • Automatisk återförsökslogik
  • Stöd för offline-läge

Säkerhetsöverväganden

Dataintegritet

  • Lokal-först-arkitektur
  • Ingen dataöverföring till molnet (lokalt läge)
  • Krypterad lagring av konversationer
  • Säker hantering av autentiseringsuppgifter

Applikationssäkerhet

  • Sandlåda för renderer-processer
  • Content Security Policy (CSP)
  • Ingen fjärrkodskörning
  • Säker IPC-kommunikation

Felsökning

Vanliga problem

Foundry Local startar inte

# Check service status
foundry status

# Restart service
foundry restart

# Check logs
foundry logs

Fel vid modellinladdning

  • Kontrollera tillräckligt med diskutrymme
  • Kontrollera internetanslutning för nedladdningar
  • Se till att GPU-drivrutiner är uppdaterade
  • Testa olika modellvarianter

Prestandaproblem

  • Övervaka systemresurser
  • Justera modellinställningar
  • Aktivera hårdvaruacceleration
  • Stäng andra resurskrävande applikationer

Debug-läge

Aktivera felsökningsloggning genom att ställa in miljövariabler:

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

Bidra

Utvecklingsinställning

  1. Forka repositoryn
  2. Skapa en feature branch
  3. Installera beroenden: npm install
  4. Gör ändringar och testa
  5. Skicka in en pull request

Kodstil

  • ESLint-konfiguration tillhandahålls
  • Prettier för kodformatering
  • TypeScript för typkontroll
  • JSDoc-kommentarer för dokumentation

Lärandemål

Efter att ha slutfört detta exempel kommer du att förstå:

  1. Windows 11-inbyggd utveckling

    • Implementering av Fluent Design System
    • Integration med Windows-funktioner
    • Säkerhetsbästa praxis för Electron

  2. AI-modellintegration

    • Arkitektur för Foundry Local-tjänsten
    • Hantering av modellens livscykel
    • Övervakning och optimering av prestanda

  3. Realtidssystem för chatt

    • Hantering av strömmande svar
    • Hantering av konversationsstatus
    • Mönster för användarupplevelse

  4. Utveckling av produktionsapplikationer

    • Felhantering och återhämtning
    • Prestandaoptimering
    • Säkerhetsöverväganden
    • Teststrategier

Nästa steg

  • Exempel 09: Multi-Agent Orchestration System
  • Exempel 10: Foundry Local som verktygsintegration
  • Avancerade ämnen: Anpassad modellfinjustering
  • Distribution: Mönster för företagsdistribution

Licens

Detta exempel följer samma licens som Microsoft Foundry Local-projektet.
⚡