# నమూనా 04: చైన్‌లిట్‌తో ప్రొడక్షన్ చాట్ అప్లికేషన్లు

మైక్రోసాఫ్ట్ ఫౌండ్రీ లోకల్ ఉపయోగించి ప్రొడక్షన్-రెడీ చాట్ అప్లికేషన్లు నిర్మించడానికి బహుళ విధానాలను చూపించే సమగ్ర నమూనా, ఆధునిక వెబ్ ఇంటర్‌ఫేస్‌లు, స్ట్రీమింగ్ ప్రతిస్పందనలు మరియు ఆధునిక బ్రౌజర్ సాంకేతికతలతో.

## ఏమి ఉన్నాయి

- **🚀 చైన్‌లిట్ చాట్ యాప్** (`app.py`): స్ట్రీమింగ్‌తో ప్రొడక్షన్-రెడీ చాట్ అప్లికేషన్
- **🌐 WebGPU డెమో** (`webgpu-demo/`): హార్డ్‌వేర్ యాక్సిలరేషన్‌తో బ్రౌజర్ ఆధారిత AI ఇన్ఫరెన్స్
- **🎨 ఓపెన్ వెబ్UI ఇంటిగ్రేషన్** (`open-webui-guide.md`): ప్రొఫెషనల్ ChatGPT-లాగా ఇంటర్‌ఫేస్
- **📚 విద్యా నోట్బుక్** (`chainlit_app.ipynb`): ఇంటరాక్టివ్ లెర్నింగ్ మెటీరియల్స్

## త్వరిత ప్రారంభం

### 1. చైన్‌లిట్ చాట్ అప్లికేషన్

```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. ఓపెన్ వెబ్UI సెటప్

```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 క్లౌడ్ నిర్ణయ మ్యాట్రిక్స్

| పరిస్థితి | సిఫార్సు | కారణం |
|----------|----------------|--------|
| **గోప్యత-సున్నితమైన డేటా** | 🏠 లోకల్ (ఫౌండ్రీ) | డేటా ఎప్పుడూ పరికరం నుండి బయటకు పోదు |
| **సంక్లిష్ట తర్కం** | ☁️ క్లౌడ్ (Azure OpenAI) | పెద్ద మోడల్స్‌కు యాక్సెస్ |
| **రియల్-టైమ్ చాట్** | 🏠 లోకల్ (ఫౌండ్రీ) | తక్కువ లేటెన్సీ, వేగవంతమైన ప్రతిస్పందనలు |
| **డాక్యుమెంట్ విశ్లేషణ** | 🔄 హైబ్రిడ్ | ఎక్స్‌ట్రాక్షన్ కోసం లోకల్, విశ్లేషణ కోసం క్లౌడ్ |
| **కోడ్ జనరేషన్** | 🏠 లోకల్ (ఫౌండ్రీ) | గోప్యత + ప్రత్యేక మోడల్స్ |
| **శోధన పనులు** | ☁️ క్లౌడ్ (Azure OpenAI) | విస్తృత జ్ఞాన బేస్ అవసరం |

### సాంకేతికత తులన

| సాంకేతికత | ఉపయోగం | లాభాలు | నష్టాలు |
|------------|----------|------|------|
| **చైన్‌లిట్** | పైథాన్ డెవలపర్లు, వేగవంతమైన ప్రోటోటైపింగ్ | సులభ సెటప్, స్ట్రీమింగ్ మద్దతు | పైథాన్ మాత్రమే |
| **WebGPU** | గరిష్ట గోప్యత, ఆఫ్‌లైన్ పరిస్థితులు | బ్రౌజర్-నేటివ్, సర్వర్ అవసరం లేదు | పరిమిత మోడల్ పరిమాణం |
| **ఓపెన్ వెబ్UI** | ప్రొడక్షన్ డిప్లాయ్‌మెంట్, టీమ్స్ | ప్రొఫెషనల్ UI, యూజర్ మేనేజ్‌మెంట్ | డాకర్ అవసరం |

## ముందస్తు అవసరాలు

- **ఫౌండ్రీ లోకల్**: ఇన్‌స్టాల్ చేసి నడుస్తోంది ([డౌన్లోడ్](https://aka.ms/foundry-local-installer))
- **పైథాన్**: 3.10+ వర్చువల్ ఎన్విరాన్‌మెంట్‌తో
- **మోడల్**: కనీసం ఒకటి లోడ్ చేయబడింది (`foundry model run phi-4-mini`)
- **బ్రౌజర్**: డెమోల కోసం WebGPU మద్దతుతో క్రోమ్/ఎడ్జ్
- **డాకర్**: ఓపెన్ వెబ్UI కోసం (ఐచ్ఛికం)

## ఇన్‌స్టాలేషన్ & సెటప్

### 1. పైథాన్ ఎన్విరాన్‌మెంట్ సెటప్

```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. ఫౌండ్రీ లోకల్ సెటప్

```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
```

## నమూనా అప్లికేషన్లు

### చైన్‌లిట్ చాట్ అప్లికేషన్

**ఫీచర్లు:**
- 🚀 **రియల్-టైమ్ స్ట్రీమింగ్**: టోకెన్లు ఉత్పత్తి అవుతున్న వెంటనే కనిపిస్తాయి
- 🛡️ **బలమైన లోపాల నిర్వహణ**: సున్నితమైన డిగ్రేడేషన్ మరియు పునరుద్ధరణ
- 🎨 **ఆధునిక 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
```

### ఓపెన్ వెబ్UI ఇంటిగ్రేషన్

**ఫీచర్లు:**
- 🎨 **ChatGPT-లాగా ఇంటర్‌ఫేస్**: ప్రొఫెషనల్, పరిచయమైన UI
- 👥 **బహుళ-వినియోగదారు మద్దతు**: యూజర్ ఖాతాలు మరియు సంభాషణ చరిత్ర
- 📁 **ఫైల్ ప్రాసెసింగ్**: డాక్యుమెంట్లను అప్‌లోడ్ చేసి విశ్లేషణ
- 🔄 **మోడల్ స్విచ్చింగ్**: వివిధ మోడల్స్ మధ్య సులభ మార్పిడి
- 🐳 **డాకర్ డిప్లాయ్‌మెంట్**: ప్రొడక్షన్-రెడీ కంటైనరైజ్డ్ సెటప్

**త్వరిత సెటప్:**
```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` | ఫౌండ్రీ లోకల్ ఎండ్‌పాయింట్ | ఆటో-డిటెక్ట్ | `http://localhost:51211` |
| `API_KEY` | API కీ (లోకల్ కోసం ఐచ్ఛికం) | `""` | `your-api-key` |

## సమస్య పరిష్కారం

### సాధారణ సమస్యలు

**చైన్‌లిట్ అప్లికేషన్:**

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. **పైథాన్ ఎన్విరాన్‌మెంట్ సమస్యలు:**
   ```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 మద్దతు లేదు:**
   - క్రోమ్/ఎడ్జ్ 113+కి అప్‌డేట్ చేయండి
   - WebGPU ఎనేబుల్ చేయండి: `chrome://flags/#enable-unsafe-webgpu`
   - GPU స్థితి తనిఖీ చేయండి: `chrome://gpu`
   - డెమో ఆటోమేటిక్‌గా CPUకి మారుతుంది

2. **మోడల్ లోడింగ్ లోపాలు:**
   - మోడల్ డౌన్లోడ్ కోసం ఇంటర్నెట్ కనెక్షన్ నిర్ధారించండి
   - బ్రౌజర్ కన్సోల్‌లో CORS లోపాలు తనిఖీ చేయండి
   - మీరు HTTP ద్వారా సర్వ్ చేస్తున్నారా (file:// కాదు) అని నిర్ధారించండి

**ఓపెన్ వెబ్UI:**

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
```

## అధునాతన ఉపయోగం

### పనితీరు ఆప్టిమైజేషన్

**చైన్‌లిట్:**
- మెరుగైన అనుభవం కోసం స్ట్రీమింగ్ ఉపయోగించండి
- అధిక సమాంతరత కోసం కనెక్షన్ పూలింగ్ అమలు చేయండి
- పునరావృత ప్రశ్నల కోసం మోడల్ ప్రతిస్పందనలను క్యాష్ చేయండి
- పెద్ద సంభాషణ చరిత్రలతో మెమరీ వినియోగాన్ని పర్యవేక్షించండి

**WebGPU:**
- గరిష్ట గోప్యత మరియు వేగం కోసం WebGPU ఉపయోగించండి
- చిన్న మోడల్స్ కోసం మోడల్ క్వాంటైజేషన్ అమలు చేయండి
- బ్యాక్‌గ్రౌండ్ ప్రాసెసింగ్ కోసం వెబ్ వర్కర్స్ ఉపయోగించండి
- బ్రౌజర్ స్టోరేజ్‌లో కంపైల్ చేసిన మోడల్స్ క్యాష్ చేయండి

**ఓపెన్ వెబ్UI:**
- సంభాషణ చరిత్ర కోసం పర్సిస్టెంట్ వాల్యూమ్స్ ఉపయోగించండి
- డాకర్ కంటైనర్ కోసం వనరుల పరిమితులను కాన్ఫిగర్ చేయండి
- యూజర్ డేటా కోసం బ్యాకప్ వ్యూహాలు అమలు చేయండి
- 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 ను WebGPU తో (బ్రౌజర్ ఆధారితంగా)
    text = await webgpu_ocr(file_path)
    
    # 2. Foundry Local తో విశ్లేషణ (ప్రైవేట్)
    summary = await foundry_local_analyze(text)
    
    # 3. క్లౌడ్ తో మెరుగుదల (అవసరమైతే)
    if summary.confidence < 0.8:
        summary = await azure_openai_enhance(summary)
    
    return summary
```

## ప్రొడక్షన్ డిప్లాయ్‌మెంట్

### భద్రతా పరిగణనలు

- **API కీలు**: ఎన్విరాన్‌మెంట్ వేరియబుల్స్ ఉపయోగించండి, ఎప్పుడూ హార్డ్‌కోడ్ చేయవద్దు
- **నెట్‌వర్క్**: ప్రొడక్షన్‌లో HTTPS ఉపయోగించండి, టీమ్ యాక్సెస్ కోసం VPN పరిగణించండి
- **యాక్సెస్ కంట్రోల్**: ఓపెన్ వెబ్UI కోసం ఆథెంటికేషన్ అమలు చేయండి
- **డేటా గోప్యత**: ఏ డేటా లోకల్‌లోనే ఉంటుందో, ఏది క్లౌడ్‌కు వెళ్తుందో ఆడిట్ చేయండి
- **అప్‌డేట్లు**: ఫౌండ్రీ లోకల్ మరియు కంటైనర్లను నవీకరించండి

### మానిటరింగ్ మరియు నిర్వహణ

- **హెల్త్ చెక్స్**: ఎండ్‌పాయింట్ మానిటరింగ్ అమలు చేయండి
- **లాగింగ్**: అన్ని భాగాల నుండి లాగ్‌లను కేంద్రీకరించండి
- **మెట్రిక్స్**: ప్రతిస్పందన సమయాలు, లోపాల రేట్లు, వనరు వినియోగం ట్రాక్ చేయండి
- **బ్యాకప్**: సంభాషణ డేటా మరియు కాన్ఫిగరేషన్లను నియమితంగా బ్యాకప్ చేయండి

## సూచనలు మరియు వనరులు

### డాక్యుమెంటేషన్
- [Chainlit Documentation](https://docs.chainlit.io/) - పూర్తి ఫ్రేమ్‌వర్క్ గైడ్
- [Foundry Local Documentation](https://learn.microsoft.com/azure/ai-foundry/foundry-local/) - అధికారిక మైక్రోసాఫ్ట్ డాక్స్
- [ONNX Runtime Web](https://onnxruntime.ai/docs/get-started/with-javascript/web.html) - WebGPU ఇంటిగ్రేషన్
- [Open WebUI Documentation](https://docs.openwebui.com/) - అధునాతన కాన్ఫిగరేషన్

### నమూనా ఫైళ్లు
- [`app.py`](../../../../../Module08/samples/04/app.py) - ప్రొడక్షన్ చైన్‌లిట్ అప్లికేషన్
- [`chainlit_app.ipynb`](./chainlit_app.ipynb) - విద్యా నోట్బుక్
- [`webgpu-demo/`](../../../../../Module08/samples/04/webgpu-demo) - బ్రౌజర్ ఆధారిత AI ఇన్ఫరెన్స్
- [`open-webui-guide.md`](./open-webui-guide.md) - పూర్తి ఓపెన్ వెబ్UI సెటప్

### సంబంధిత నమూనాలు
- [సెషన్ 4 డాక్యుమెంటేషన్](../../04.CuttingEdgeModels.md) - పూర్తి సెషన్ గైడ్
- [ఫౌండ్రీ లోకల్ నమూనాలు](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 -->