# സാമ്പിൾ 04: Chainlit ഉപയോഗിച്ച് പ്രൊഡക്ഷൻ ചാറ്റ് ആപ്ലിക്കേഷനുകൾ

Microsoft Foundry Local ഉപയോഗിച്ച് പ്രൊഡക്ഷൻ-റെഡി ചാറ്റ് ആപ്ലിക്കേഷനുകൾ നിർമ്മിക്കുന്നതിനുള്ള വിവിധ സമീപനങ്ങൾ പ്രദർശിപ്പിക്കുന്ന സമഗ്ര സാമ്പിൾ, ആധുനിക വെബ് ഇന്റർഫേസുകൾ, സ്ട്രീമിംഗ് പ്രതികരണങ്ങൾ, ആധുനിക ബ്രൗസർ സാങ്കേതികവിദ്യകൾ എന്നിവ ഉൾക്കൊള്ളുന്നു.

## ഉൾപ്പെടുത്തിയിരിക്കുന്നത്

- **🚀 Chainlit Chat App** (`app.py`): സ്ട്രീമിംഗ് സവിശേഷതയുള്ള പ്രൊഡക്ഷൻ-റെഡി ചാറ്റ് ആപ്ലിക്കേഷൻ
- **🌐 WebGPU ഡെമോ** (`webgpu-demo/`): ഹാർഡ്‌വെയർ ആക്സിലറേഷൻ ഉപയോഗിച്ച് ബ്രൗസർ അടിസ്ഥാന AI ഇൻഫറൻസ്
- **🎨 Open WebUI ഇന്റഗ്രേഷൻ** (`open-webui-guide.md`): പ്രൊഫഷണൽ ChatGPT പോലുള്ള ഇന്റർഫേസ്
- **📚 വിദ്യാഭ്യാസ നോട്ട്‌ബുക്ക്** (`chainlit_app.ipynb`): ഇന്ററാക്ടീവ് പഠന സാമഗ്രികൾ

## വേഗത്തിലുള്ള ആരംഭം

### 1. Chainlit ചാറ്റ് ആപ്ലിക്കേഷൻ

```cmd
# Navigate to Module08 directory
cd Module08

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

# Run Chainlit app (using port 8080 to avoid conflicts)
chainlit run samples\04\app.py -w --port 8080
```

തുറക്കുന്നത്: `http://localhost:8080`

### 2. WebGPU ബ്രൗസർ ഡെമോ

```cmd
# Navigate to WebGPU demo
cd Module08\samples\04\webgpu-demo

# Serve the demo
python -m http.server 5173
```

തുറക്കുന്നത്: `http://localhost:5173`

### 3. Open WebUI സെറ്റപ്പ്

```cmd
# Run Open WebUI with Docker
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 \
  ghcr.io/open-webui/open-webui:main
```

തുറക്കുന്നത്: `http://localhost:3000`

## ആർക്കിടെക്ചർ പാറ്റേണുകൾ

### ലോക്കൽ vs ക്ലൗഡ് തീരുമാന മാട്രിക്സ്

| സീനാരിയോ | ശുപാർശ | കാരണം |
|----------|----------------|--------|
| **സ്വകാര്യത-സെൻസിറ്റീവ് ഡാറ്റ** | 🏠 ലോക്കൽ (Foundry) | ഡാറ്റ ഉപകരണത്തിൽ നിന്ന് പുറത്തുകടക്കാറില്ല |
| **സങ്കീർണ്ണമായ നിരൂപണം** | ☁️ ക്ലൗഡ് (Azure OpenAI) | വലിയ മോഡലുകളിലേക്ക് ആക്‌സസ് |
| **റിയൽ-ടൈം ചാറ്റ്** | 🏠 ലോക്കൽ (Foundry) | കുറഞ്ഞ ലാറ്റൻസി, വേഗത്തിലുള്ള പ്രതികരണങ്ങൾ |
| **ഡോക്യുമെന്റ് വിശകലനം** | 🔄 ഹൈബ്രിഡ് | എക്സ്ട്രാക്ഷനിന് ലോക്കൽ, വിശകലനത്തിന് ക്ലൗഡ് |
| **കോഡ് ജനറേഷൻ** | 🏠 ലോക്കൽ (Foundry) | സ്വകാര്യത + പ്രത്യേക മോഡലുകൾ |
| **ഗവേഷണ പ്രവർത്തനങ്ങൾ** | ☁️ ക്ലൗഡ് (Azure OpenAI) | വ്യാപകമായ അറിവ് ആവശ്യമാണ് |

### സാങ്കേതികവിദ്യ താരതമ്യം

| സാങ്കേതികവിദ്യ | ഉപയോഗം | ഗുണങ്ങൾ | ദോഷങ്ങൾ |
|------------|----------|------|------|
| **Chainlit** | Python ഡെവലപ്പർമാർ, വേഗത്തിലുള്ള പ്രോട്ടോടൈപ്പിംഗ് | എളുപ്പം സെറ്റ്‌അപ്പ്, സ്ട്രീമിംഗ് പിന്തുണ | Python മാത്രം |
| **WebGPU** | പരമാവധി സ്വകാര്യത, ഓഫ്‌ലൈൻ സീനാരിയോകൾ | ബ്രൗസർ-നേറ്റീവ്, സെർവർ ആവശ്യമില്ല | മോഡൽ വലുപ്പം പരിമിതമാണ് |
| **Open WebUI** | പ്രൊഡക്ഷൻ ഡിപ്ലോയ്മെന്റ്, ടീമുകൾ | പ്രൊഫഷണൽ UI, ഉപയോക്തൃ മാനേജ്മെന്റ് | Docker ആവശ്യമാണ് |

## മുൻ‌ആവശ്യങ്ങൾ

- **Foundry Local**: ഇൻസ്റ്റാൾ ചെയ്ത് പ്രവർത്തനക്ഷമമാക്കി ([ഡൗൺലോഡ്](https://aka.ms/foundry-local-installer))
- **Python**: 3.10+ വേർച്വൽ എൻവയോൺമെന്റോടെ
- **മോഡൽ**: കുറഞ്ഞത് ഒരു മോഡൽ ലോഡ് ചെയ്തിരിക്കുന്നത് (`foundry model run phi-4-mini`)
- **ബ്രൗസർ**: ഡെമോകൾക്കായി WebGPU പിന്തുണയുള്ള Chrome/Edge
- **Docker**: Open WebUI-ക്കായി (ഐച്ഛികം)

## ഇൻസ്റ്റലേഷൻ & സെറ്റപ്പ്

### 1. Python എൻവയോൺമെന്റ് സെറ്റപ്പ്

```cmd
# Navigate to Module08 directory
cd Module08

# Create and activate virtual environment
py -m venv .venv
.venv\Scripts\activate

# Install dependencies
pip install -r requirements.txt
```

### 2. Foundry Local സെറ്റപ്പ്

```cmd
# Verify Foundry Local installation
foundry --version

# Start the service
foundry service start

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

# Verify model is running
foundry service ps
```

## സാമ്പിൾ ആപ്ലിക്കേഷനുകൾ

### Chainlit ചാറ്റ് ആപ്ലിക്കേഷൻ

**സവിശേഷതകൾ:**
- 🚀 **റിയൽ-ടൈം സ്ട്രീമിംഗ്**: ടോക്കണുകൾ സൃഷ്ടിക്കുമ്പോൾ തന്നെ കാണിക്കുന്നു
- 🛡️ **ദൃഢമായ പിശക് കൈകാര്യം**: സുഖപ്രദമായ ഡിഗ്രേഡേഷൻ, പുനരുദ്ധാരണം
- 🎨 **ആധുനിക UI**: ബോക്സിൽ നിന്നുള്ള പ്രൊഫഷണൽ ചാറ്റ് ഇന്റർഫേസ്
- 🔧 **ഫ്ലെക്സിബിൾ കോൺഫിഗറേഷൻ**: എൻവയോൺമെന്റ് വേരിയബിളുകളും ഓട്ടോ-ഡിറ്റക്ഷനും
- 📱 **പ്രതികരണശീലമായ ഡിസൈൻ**: ഡെസ്ക്ടോപ്പിലും മൊബൈലിലും പ്രവർത്തിക്കുന്നു

**വേഗത്തിലുള്ള ആരംഭം:**
```cmd
# Run with default settings (recommended)
chainlit run samples\04\app.py -w --port 8080

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

# Manual endpoint configuration
set BASE_URL=http://localhost:51211
set API_KEY=your-api-key
chainlit run samples\04\app.py -w --port 8080
```

### WebGPU ബ്രൗസർ ഡെമോ

**സവിശേഷതകൾ:**
- 🌐 **ബ്രൗസർ-നേറ്റീവ് AI**: സെർവർ ആവശ്യമില്ല, മുഴുവൻ ബ്രൗസറിലാണു പ്രവർത്തിക്കുന്നത്
- ⚡ **WebGPU ആക്സിലറേഷൻ**: ലഭ്യമായപ്പോൾ ഹാർഡ്‌വെയർ ആക്സിലറേഷൻ
- 🔒 **പരമാവധി സ്വകാര്യത**: നിങ്ങളുടെ ഉപകരണത്തിൽ നിന്ന് ഡാറ്റ പുറത്തുകടക്കാറില്ല
- 🎯 **സീറോ ഇൻസ്റ്റാൾ**: യാതൊരു ഇൻസ്റ്റലേഷനും വേണ്ടാതെ പ്രവർത്തിക്കുന്നു
- 🔄 **സുഖപ്രദമായ ഫാൾബാക്ക്**: WebGPU ലഭ്യമല്ലെങ്കിൽ CPU-യിലേക്ക് സ്വയം മാറുന്നു

**പ്രവർത്തനം:**
```cmd
cd samples\04\webgpu-demo
python -m http.server 5173
# Open http://localhost:5173
```

### Open WebUI ഇന്റഗ്രേഷൻ

**സവിശേഷതകൾ:**
- 🎨 **ChatGPT പോലുള്ള ഇന്റർഫേസ്**: പ്രൊഫഷണൽ, പരിചിതമായ UI
- 👥 **മൾട്ടി-ഉപയോക്തൃ പിന്തുണ**: ഉപയോക്തൃ അക്കൗണ്ടുകളും സംഭാഷണ ചരിത്രവും
- 📁 **ഫയൽ പ്രോസസ്സിംഗ്**: ഡോക്യുമെന്റുകൾ അപ്‌ലോഡ് ചെയ്ത് വിശകലനം ചെയ്യുക
- 🔄 **മോഡൽ സ്വിച്ച് ചെയ്യൽ**: വ്യത്യസ്ത മോഡലുകൾക്കിടയിൽ എളുപ്പത്തിൽ മാറാം
- 🐳 **Docker ഡിപ്ലോയ്മെന്റ്**: പ്രൊഡക്ഷൻ-റെഡി കണ്ടെയ്‌നറൈസ്ഡ് സെറ്റപ്പ്

**വേഗത്തിലുള്ള സെറ്റപ്പ്:**
```cmd
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 \
  ghcr.io/open-webui/open-webui:main
```

## കോൺഫിഗറേഷൻ റഫറൻസ്

### എൻവയോൺമെന്റ് വേരിയബിളുകൾ

| വേരിയബിള്‍ | വിവരണം | ഡിഫോൾട്ട് | ഉദാഹരണം |
|----------|-------------|---------|----------|
| `MODEL` | ഉപയോഗിക്കാനുള്ള മോഡൽ അലിയാസ് | `phi-4-mini` | `qwen2.5-7b` |
| `BASE_URL` | Foundry Local എന്റ്പോയിന്റ് | ഓട്ടോ-ഡിറ്റക്ട് | `http://localhost:51211` |
| `API_KEY` | API കീ (ലോക്കലിന് ഐച്ഛികം) | `""` | `your-api-key` |

## പ്രശ്നപരിഹാരം

### സാധാരണ പ്രശ്നങ്ങൾ

**Chainlit ആപ്ലിക്കേഷൻ:**

1. **സർവീസ് ലഭ്യമല്ല:**
   ```cmd
   # Check Foundry Local status
   foundry service status
   foundry service ps
   
   # Validate API endpoint (note: port 51211)
   curl http://localhost:51211/v1/models
   ```

2. **പോർട്ട് കോൺഫ്ലിക്റ്റുകൾ:**
   ```cmd
   # Check what's using port 8080
   netstat -ano | findstr :8080
   
   # Use different port if needed
   chainlit run samples\04\app.py -w --port 3000
   ```

3. **Python എൻവയോൺമെന്റ് പ്രശ്നങ്ങൾ:**
   ```cmd
   # Verify correct interpreter in VS Code
   # Ctrl+Shift+P → Python: Select Interpreter
   # Choose: Module08/.venv/Scripts/python.exe
   
   # Reinstall dependencies
   pip install -r requirements.txt
   ```

**WebGPU ഡെമോ:**

1. **WebGPU പിന്തുണയില്ല:**
   - Chrome/Edge 113+ ലേക്ക് അപ്ഡേറ്റ് ചെയ്യുക
   - WebGPU സജീവമാക്കുക: `chrome://flags/#enable-unsafe-webgpu`
   - GPU നില പരിശോധിക്കുക: `chrome://gpu`
   - ഡെമോ സ്വയം CPU-യിലേക്ക് മാറും

2. **മോഡൽ ലോഡിംഗ് പിശകുകൾ:**
   - മോഡൽ ഡൗൺലോഡിനായി ഇന്റർനെറ്റ് കണക്ഷൻ ഉറപ്പാക്കുക
   - ബ്രൗസർ കോൺസോളിൽ CORS പിശകുകൾ പരിശോധിക്കുക
   - HTTP വഴി സർവ് ചെയ്യുന്നതാണെന്ന് ഉറപ്പാക്കുക (file:// അല്ല)

**Open WebUI:**

1. **കണക്ഷൻ നിരസിച്ചു:**
   ```cmd
   # Check Docker is running
   docker --version
   
   # Check container status
   docker ps | findstr open-webui
   
   # View container logs
   docker logs open-webui
   ```

2. **മോഡലുകൾ കാണുന്നില്ല:**
   ```cmd
   # Verify Foundry Local endpoint
   curl http://localhost:51211/v1/models
   
   # Restart Open WebUI
   docker restart open-webui
   ```

### പരിശോധനാ പട്ടിക

```cmd
# ✅ 1. Foundry Local Setup
foundry --version                    # Should show version
foundry service status               # Should show "running"
foundry model list                   # Should show loaded models
curl http://localhost:51211/v1/models  # Should return JSON

# ✅ 2. Python Environment  
python --version                     # Should be 3.10+
pip list | findstr chainlit         # Should show chainlit package
pip list | findstr openai           # Should show openai package

# ✅ 3. Application Testing
chainlit run samples\04\app.py -w --port 8080  # Should open browser
# Test WebGPU demo at localhost:5173
# Test Open WebUI at localhost:3000
```

## ഉയർന്ന തലത്തിലുള്ള ഉപയോഗം

### പ്രകടന മെച്ചപ്പെടുത്തൽ

**Chainlit:**
- മെച്ചപ്പെട്ട പ്രകടനത്തിനായി സ്ട്രീമിംഗ് ഉപയോഗിക്കുക
- ഉയർന്ന സമകാലികതയ്ക്കായി കണക്ഷൻ പൂളിംഗ് നടപ്പിലാക്കുക
- ആവർത്തിക്കുന്ന ചോദ്യങ്ങൾക്ക് മോഡൽ പ്രതികരണങ്ങൾ കാഷ് ചെയ്യുക
- വലിയ സംഭാഷണ ചരിത്രങ്ങൾക്കായി മെമ്മറി ഉപയോഗം നിരീക്ഷിക്കുക

**WebGPU:**
- പരമാവധി സ്വകാര്യതക്കും വേഗത്തിനും WebGPU ഉപയോഗിക്കുക
- ചെറിയ മോഡലുകൾക്കായി മോഡൽ ക്വാണ്ടൈസേഷൻ നടപ്പിലാക്കുക
- പശ്ചാത്തല പ്രോസസ്സിംഗിനായി വെബ് വർക്കേഴ്സ് ഉപയോഗിക്കുക
- ബ്രൗസർ സ്റ്റോറേജിൽ കംപൈൽ ചെയ്ത മോഡലുകൾ കാഷ് ചെയ്യുക

**Open WebUI:**
- സംഭാഷണ ചരിത്രത്തിനായി സ്ഥിരതയുള്ള വോളിയങ്ങൾ ഉപയോഗിക്കുക
- Docker കണ്ടെയ്‌നറിനായി റിസോഴ്‌സ് പരിധികൾ കോൺഫിഗർ ചെയ്യുക
- ഉപയോക്തൃ ഡാറ്റയ്ക്ക് ബാക്കപ്പ് തന്ത്രങ്ങൾ നടപ്പിലാക്കുക
- SSL ടെർമിനേഷനായി റിവേഴ്സ് പ്രോക്സി സെറ്റ് ചെയ്യുക

### ഇന്റഗ്രേഷൻ പാറ്റേണുകൾ

**ഹൈബ്രിഡ് ലോക്കൽ/ക്ലൗഡ്:**
```python
# സങ്കീർണ്ണതയും സ്വകാര്യത ആവശ്യകതകളും അടിസ്ഥാനമാക്കി മാർഗ്ഗം
async def intelligent_routing(prompt: str, metadata: dict):
    if metadata.get("contains_pii"):
        return await foundry_local_completion(prompt)  # സ്വകാര്യത-സൂക്ഷ്മം
    elif len(prompt.split()) > 200:
        return await azure_openai_completion(prompt)   # സങ്കീർണ്ണമായ നിരൂപണം
    else:
        return await foundry_local_completion(prompt)  # ഡിഫോൾട്ട് ലോക്കൽ
```

**മൾട്ടി-മോഡൽ പൈപ്പ്‌ലൈൻ:**
```python
# വ്യത്യസ്ത AI കഴിവുകൾ സംയോജിപ്പിക്കുക
async def analyze_document(file_path: str):
    # 1. OCR വെബ്GPU ഉപയോഗിച്ച് (ബ്രൗസർ അടിസ്ഥാനമാക്കി)
    text = await webgpu_ocr(file_path)
    
    # 2. ഫൗണ്ട്രി ലോക്കലുമായി വിശകലനം (സ്വകാര്യ)
    summary = await foundry_local_analyze(text)
    
    # 3. ക്ലൗഡുമായി മെച്ചപ്പെടുത്തൽ (ആവശ്യമായാൽ)
    if summary.confidence < 0.8:
        summary = await azure_openai_enhance(summary)
    
    return summary
```

## പ്രൊഡക്ഷൻ ഡിപ്ലോയ്മെന്റ്

### സുരക്ഷാ പരിഗണനകൾ

- **API കീകൾ**: എൻവയോൺമെന്റ് വേരിയബിളുകൾ ഉപയോഗിക്കുക, ഹാർഡ്‌കോഡ് ചെയ്യരുത്
- **നെറ്റ്‌വർക്ക്**: പ്രൊഡക്ഷനിൽ HTTPS ഉപയോഗിക്കുക, ടീമിന്റെ ആക്‌സസിനായി VPN പരിഗണിക്കുക
- **ആക്‌സസ് നിയന്ത്രണം**: Open WebUI-ക്കായി ഓതന്റിക്കേഷൻ നടപ്പിലാക്കുക
- **ഡാറ്റ സ്വകാര്യത**: ഏത് ഡാറ്റ ലോക്കലിൽ തുടരുന്നു, ഏത് ക്ലൗഡിലേക്ക് പോകുന്നു എന്ന് ഓഡിറ്റ് ചെയ്യുക
- **അപ്ഡേറ്റുകൾ**: Foundry Localയും കണ്ടെയ്‌നറുകളും അപ്ഡേറ്റ് ചെയ്തിരിക്കണം

### നിരീക്ഷണവും പരിപാലനവും

- **ഹെൽത്ത് ചെക്കുകൾ**: എന്റ്പോയിന്റ് നിരീക്ഷണം നടപ്പിലാക്കുക
- **ലോഗിംഗ്**: എല്ലാ ഘടകങ്ങളിലെയും ലോഗുകൾ കേന്ദ്രികൃതമാക്കുക
- **മെട്രിക്‌സ്**: പ്രതികരണ സമയം, പിശക് നിരക്ക്, റിസോഴ്‌സ് ഉപയോഗം ട്രാക്ക് ചെയ്യുക
- **ബാക്കപ്പ്**: സംഭാഷണ ഡാറ്റയും കോൺഫിഗറേഷനുകളും নিয়മിതമായി ബാക്കപ്പ് എടുക്കുക

## റഫറൻസുകളും വിഭവങ്ങളും

### ഡോക്യുമെന്റേഷൻ
- [Chainlit ഡോക്യുമെന്റേഷൻ](https://docs.chainlit.io/) - സമഗ്ര ഫ്രെയിംവർക്ക് ഗൈഡ്
- [Foundry Local ഡോക്യുമെന്റേഷൻ](https://learn.microsoft.com/azure/ai-foundry/foundry-local/) - ഔദ്യോഗിക Microsoft ഡോക്സ്
- [ONNX റൺടൈം വെബ്](https://onnxruntime.ai/docs/get-started/with-javascript/web.html) - WebGPU ഇന്റഗ്രേഷൻ
- [Open WebUI ഡോക്യുമെന്റേഷൻ](https://docs.openwebui.com/) - ഉയർന്ന തലത്തിലുള്ള കോൺഫിഗറേഷൻ

### സാമ്പിൾ ഫയലുകൾ
- [`app.py`](../../../../../Module08/samples/04/app.py) - പ്രൊഡക്ഷൻ Chainlit ആപ്ലിക്കേഷൻ
- [`chainlit_app.ipynb`](./chainlit_app.ipynb) - വിദ്യാഭ്യാസ നോട്ട്‌ബുക്ക്
- [`webgpu-demo/`](../../../../../Module08/samples/04/webgpu-demo) - ബ്രൗസർ അടിസ്ഥാന AI ഇൻഫറൻസ്
- [`open-webui-guide.md`](./open-webui-guide.md) - സമഗ്ര Open WebUI സെറ്റപ്പ്

### ബന്ധപ്പെട്ട സാമ്പിളുകൾ
- [സെഷൻ 4 ഡോക്യുമെന്റേഷൻ](../../04.CuttingEdgeModels.md) - സമഗ്ര സെഷൻ ഗൈഡ്
- [Foundry Local സാമ്പിളുകൾ](https://github.com/microsoft/foundry-local/tree/main/samples) - ഔദ്യോഗിക സാമ്പിളുകൾ

---

<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**അസൂയാപത്രം**:  
ഈ രേഖ AI വിവർത്തന സേവനം [Co-op Translator](https://github.com/Azure/co-op-translator) ഉപയോഗിച്ച് വിവർത്തനം ചെയ്തതാണ്. നാം കൃത്യതയ്ക്ക് ശ്രമിച്ചിട്ടുണ്ടെങ്കിലും, സ്വയം പ്രവർത്തിക്കുന്ന വിവർത്തനങ്ങളിൽ പിശകുകൾ അല്ലെങ്കിൽ തെറ്റുകൾ ഉണ്ടാകാമെന്ന് ദയവായി ശ്രദ്ധിക്കുക. അതിന്റെ മാതൃഭാഷയിലുള്ള യഥാർത്ഥ രേഖയാണ് പ്രാമാണികമായ ഉറവിടം എന്ന് പരിഗണിക്കേണ്ടതാണ്. നിർണായകമായ വിവരങ്ങൾക്ക്, പ്രൊഫഷണൽ മനുഷ്യ വിവർത്തനം ശുപാർശ ചെയ്യപ്പെടുന്നു. ഈ വിവർത്തനം ഉപയോഗിക്കുന്നതിൽ നിന്നുണ്ടാകുന്ന ഏതെങ്കിലും തെറ്റിദ്ധാരണകൾക്കോ തെറ്റായ വ്യാഖ്യാനങ്ങൾക്കോ ഞങ്ങൾ ഉത്തരവാദികളല്ല.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->