new deign

.claude/settings.local.json

@@ -7,7 +7,11 @@
       "WebFetch(domain:huggingface.co)",
       "WebFetch(domain:huggingface.co)",
       "WebFetch(domain:huggingface.co)",
-      "Bash(rm:*)"
+      "Bash(rm:*)",
+      "Bash(ls:*)",
+      "Bash(find:*)",
+      "Bash(npm create:*)",
+      "Bash(npx sv@latest create:*)"
     ],
     "deny": []
   }

CLAUDE.md

@@ -4,51 +4,102 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 
 ## Project Overview
 
-DigiPal is an advanced AI-powered virtual monster companion application built with Gradio 5.34.2, featuring deep AI conversations using Qwen 2.5 models, comprehensive monster care systems, and sophisticated evolution mechanics. This is a complex multi-component system designed for deployment on Hugging Face Spaces with Zero GPU optimization.
+DigiPal is an advanced AI-powered virtual monster companion application built with Gradio 5.34.2, featuring deep AI conversations using Qwen 2.5 models, comprehensive monster care systems, sophisticated evolution mechanics, and 3D model generation capabilities. This is a complex multi-component system designed for deployment on Hugging Face Spaces with Zero GPU optimization.
 
 ## Architecture
 
 ### Core Technologies
 - **Frontend**: Gradio 5.34.2 with custom CSS and streaming support
 - **AI Models**: Qwen 2.5-1.5B-Instruct for conversations, Faster Whisper for speech
+- **3D Pipeline**: Hunyuan3D and open-source alternatives for 3D model generation
 - **Framework**: Python 3.11+ with asyncio for concurrent operations
 - **Database**: SQLite for monster persistence with async operations
-- **Deployment**: Hugging Face Spaces with Zero GPU optimization
+- **Deployment**: Hugging Face Spaces with Zero GPU optimization, Docker support
 
 ### Component Structure
 ```
 src/
-├── ai/                    # AI processing components
-│   ├── qwen_processor.py  # Qwen 2.5 conversation engine
-│   └── speech_engine.py   # Whisper speech recognition
-├── core/                  # Core game logic
-│   ├── monster_engine.py  # Monster stats, evolution, persistence
-│   └── evolution_system.py # Evolution mechanics
-├── ui/                    # User interface
-│   ├── gradio_interface.py # Main Gradio interface
-│   └── state_manager.py   # Browser state management
-├── deployment/            # Deployment optimization
-│   └── zero_gpu_optimizer.py # Zero GPU resource management
-└── utils/                 # Utilities
-    └── performance_tracker.py # Performance monitoring
+├── ai/                         # AI processing components
+│   ├── qwen_processor.py       # Qwen 2.5 conversation engine
+│   └── speech_engine.py        # Whisper speech recognition
+├── core/                       # Core game logic
+│   ├── monster_engine.py       # Monster stats, evolution, persistence
+│   ├── monster_engine_dw1.py   # DW1-aligned monster mechanics
+│   ├── evolution_system.py     # Evolution mechanics
+│   ├── monster_3d_integration.py      # 3D model integration
+│   └── monster_3d_hunyuan_integration.py  # Hunyuan3D specific integration
+├── pipelines/                  # 3D generation pipelines
+│   ├── hunyuan3d_pipeline.py   # Hunyuan3D integration
+│   ├── opensource_3d_pipeline.py  # Open-source 3D with MCP support
+│   ├── opensource_3d_pipeline_v2.py  # Enhanced 3D pipeline
+│   └── text_to_3d_pipeline.py  # Text-to-3D abstraction
+├── ui/                         # User interface
+│   ├── gradio_interface.py     # Main Gradio interface
+│   ├── gradio_interface_v2.py  # V2 interface with 3D features
+│   └── state_manager.py        # Browser state management
+├── deployment/                 # Deployment optimization
+│   └── zero_gpu_optimizer.py   # Zero GPU resource management
+└── utils/                      # Utilities
+    └── performance_tracker.py  # Performance monitoring
 ```
 
 ## Development Commands
 
+### Running the Application
 ```bash
-# Run the application locally
+# Run the unified backend with API server
 python app.py
 
 # Run with debug logging
 LOG_LEVEL=DEBUG python app.py
 
 # Run with specific configuration
-SERVER_PORT=8080 SHARE=true python app.py
+SERVER_PORT=8080 API_PORT=8081 SHARE=true python app.py
 
-# Development tools (if available)
-pytest                    # Run tests
-black src/               # Code formatting
-ruff src/                # Linting
+# Run with MCP enabled
+MCP_ENDPOINT=https://your-mcp-server MCP_API_KEY=your-key python app.py
+```
+
+### Running the Svelte Frontend
+```bash
+# Navigate to frontend directory
+cd frontend
+
+# Install dependencies (first time only)
+npm install
+
+# Run development server
+npm run dev
+
+# Build for production
+npm run build
+
+# Preview production build
+npm run preview
+```
+
+### Docker Development
+```bash
+# Build Docker image
+docker build -t digipal .
+
+# Run Docker container
+docker run -p 7860:7860 digipal
+
+# Run with volume mounting for data persistence
+docker run -p 7860:7860 -v $(pwd)/data:/app/data digipal
+```
+
+### Development Tools
+```bash
+# Code formatting (requires black installation)
+black src/
+
+# Linting (requires ruff installation)  
+ruff src/
+
+# Testing (test suite not yet implemented)
+pytest
 ```
 
 ## Key Implementation Details
@@ -59,6 +110,7 @@ ruff src/                # Linting
 - **Evolution stages**: egg → baby → child → adult → champion → ultimate
 - **Complex evolution requirements**: age, level, care quality, training, battles, social interaction
 - **Personality types**: friendly, energetic, calm, curious, brave with stat modifiers
+- **DW1 alignment**: Optional mode following Digimon World 1 mechanics
 
 ### AI Conversation System
 - **Qwen 2.5 integration** with quantization support (8-bit) for GPU efficiency
@@ -67,6 +119,13 @@ ruff src/                # Linting
 - **Conversation history management** with automatic truncation
 - **Flash Attention 2** optimization when available
 
+### 3D Generation Pipeline
+- **Multiple model providers**: Hunyuan3D, open-source models via Hugging Face, MCP protocol
+- **Text-to-3D conversion**: Generate 3D models from text descriptions
+- **Model caching**: Efficient reuse of generated 3D assets
+- **Async generation**: Non-blocking 3D model creation
+- **MCP integration**: Access to external model services via Model Context Protocol
+
 ### State Management
 - **Async SQLite operations** for monster persistence
 - **Browser state management** for session continuity
@@ -95,17 +154,27 @@ CREATE TABLE monsters (
 
 ## Environment Variables
 
-Key environment variables for configuration:
+### Core Configuration
 - `LOG_LEVEL`: Logging level (DEBUG, INFO, WARNING, ERROR)
 - `SERVER_NAME`: Server hostname (default: 0.0.0.0)
 - `SERVER_PORT`: Server port (default: 7860)
 - `SHARE`: Enable public sharing (true/false)
 - `DEBUG`: Enable debug mode (true/false)
 - `MAX_THREADS`: Maximum Gradio threads (default: 40)
+
+### Feature Toggles (V2)
+- `ENABLE_3D`: Enable 3D generation features (default: true)
+- `ENABLE_AI`: Enable AI conversation features (default: true)
+
+### GPU Configuration
 - `CUDA_VISIBLE_DEVICES`: GPU device selection
 - `TRANSFORMERS_CACHE`: Model cache directory
 - `HF_HOME`: HuggingFace cache directory
 
+### MCP Configuration
+- `MCP_ENDPOINT`: MCP service endpoint URL
+- `MCP_API_KEY`: MCP service authentication key
+
 ## Hugging Face Space Configuration
 
 Configured as a Gradio Space with:
@@ -134,4 +203,27 @@ Key ZeroGPU considerations:
 - Decorators applied at function level, not class level
 - Duration specified based on expected GPU usage time
 - Fallback to CPU operations when GPU not available
-- Wrapper functions handle Spaces environment detection
+- Wrapper functions handle Spaces environment detection
+
+## MCP (Model Context Protocol) Integration
+
+DigiPal supports MCP for flexible model deployment:
+- **ModelProvider enum**: Includes MCP alongside HUGGINGFACE, LOCAL, and SPACES
+- **MCPFluxWrapper**: Integrates Flux text-to-image models through MCP
+- **Configuration options**: MCP endpoint and API key support
+- **Server mode**: Gradio interface can run as an MCP server
+
+## Project Architecture
+
+### Backend
+- **Unified app.py**: FastAPI server on port 7861 with all features enabled
+- **Gradio Admin**: Running on port 7860 as fallback/admin interface
+- **WebSocket Support**: Real-time updates for stats and model changes
+
+### Frontend
+- **SvelteKit Application**: Located in `/frontend` directory
+- **Voice-First UI**: DigiVice-style interface with voice commands
+- **3D Rendering**: Using Threlte for monster visualization
+- **Cyberpunk-Retro Theme**: Custom styling with neon effects
+
+See [CLAUDE_SVELTE_FRONTEND_GUIDE.md](CLAUDE_SVELTE_FRONTEND_GUIDE.md) for detailed frontend documentation.

CLAUDE_SVELTE_FRONTEND_GUIDE.md

@@ -0,0 +1,186 @@
+# **Claude Development Guide: DigiPal Svelte Frontend**
+
+This document outlines the plan for the complete UI overhaul of DigiPal, moving from Gradio to a custom SvelteKit application with voice-first interaction.
+
+## **Status: Implementation Complete ✅**
+
+All major components have been implemented:
+- ✅ Unified backend with FastAPI + WebSocket support
+- ✅ SvelteKit frontend structure
+- ✅ Voice-first interaction system  
+- ✅ DigiVice-style UI components
+- ✅ 3D rendering with Threlte
+- ✅ MCP integration
+- ✅ Real-time WebSocket updates
+- ✅ Cyberpunk-retro styling
+
+## **1. Project Architecture**
+
+### **Backend (Python)**
+- **Main Application**: `app.py` - Unified application with all features enabled
+- **API Server**: FastAPI on port 7861
+- **Gradio Admin**: Running on port 7860 as fallback/admin interface
+- **WebSocket**: Real-time stat updates and model changes
+- **MCP Support**: Configurable via environment variables
+
+### **Frontend (SvelteKit)** 
+Located in `/frontend` directory:
+- **Framework**: SvelteKit with TypeScript
+- **3D Rendering**: Threlte (Three.js wrapper for Svelte)
+- **Styling**: Tailwind CSS with custom cyberpunk-retro theme
+- **Voice**: Web Speech API with intent parsing
+- **State**: Svelte stores for reactive state management
+
+## **2. Running the Application**
+
+### **Backend Setup**
+```bash
+# Install Python dependencies
+pip install -r requirements.txt
+
+# Run the unified backend
+python app.py
+
+# Or with MCP enabled
+MCP_ENDPOINT=https://your-mcp-endpoint MCP_API_KEY=your-key python app.py
+```
+
+### **Frontend Setup**
+```bash
+# Navigate to frontend directory
+cd frontend
+
+# Install dependencies
+npm install
+
+# Run development server
+npm run dev
+
+# Build for production
+npm run build
+```
+
+## **3. API Endpoints**
+
+The backend exposes these REST endpoints on port 7861:
+
+- `GET /api/monsters` - List all monsters
+- `POST /api/monsters` - Create new monster
+- `GET /api/monsters/{id}` - Get monster details
+- `POST /api/monsters/{id}/action` - Perform care action
+- `POST /api/monsters/{id}/talk` - Send message
+- `POST /api/monsters/{id}/generate-3d` - Generate 3D model
+- `WS /api/monsters/{id}/ws` - WebSocket for real-time updates
+
+## **4. Voice Commands**
+
+The system recognizes these voice intents:
+
+### **Care Actions**
+- "Feed [food type]" → `feed` action
+- "Train [skill]" → `train` action  
+- "Play with monster" → `play` action
+- "Clean monster" → `clean` action
+- "Heal monster" → `heal` action
+- "Let monster rest" → `rest` action
+- "Discipline monster" → `discipline` action
+
+### **3D Generation**
+- "Generate 3D model" → triggers 3D generation
+- "Create a [description]" → generates with description
+
+### **Conversation**
+- Any other speech → sent as conversation to monster
+
+## **5. Component Structure**
+
+### **Core Components**
+- `Device.svelte` - Main device container
+- `Screen.svelte` - 3D display with CRT effect
+- `MonsterScene.svelte` - Three.js scene for monster
+- `Dpad.svelte` - Directional pad control
+- `ActionButton.svelte` - A/B buttons
+- `VoiceButton.svelte` - Voice activation
+- `HolographicStats.svelte` - Stats overlay
+
+### **Services**
+- `api.ts` - Backend communication
+- `voice.ts` - Speech recognition & intent parsing
+- `mcp.ts` - Model Context Protocol integration
+
+### **Stores**
+- `monsterStore.ts` - Monster state management
+- `voiceStore.ts` - Voice input state
+
+## **6. Styling Guide**
+
+The UI uses a cyberpunk-retro aesthetic:
+
+### **Color Palette**
+- DigiPal Orange: `#FF6B00`
+- DigiPal Teal: `#00CED1`
+- DigiPal Gray: `#2D2D2D`
+- Neon Magenta: `#FF00FF`
+- Neon Cyan: `#00FFFF`
+
+### **Effects**
+- CRT scanlines animation
+- Holographic glitch effect
+- Neon glow shadows
+- Pixel fonts for UI text
+
+## **7. MCP Integration**
+
+When MCP is configured, the system will:
+1. Use MCP for AI conversations instead of local Qwen
+2. Use MCP for 3D generation instead of local pipeline
+3. Optionally use MCP for speech-to-text
+
+Configure via environment variables:
+```bash
+MCP_ENDPOINT=https://your-mcp-server.com
+MCP_API_KEY=your-api-key
+```
+
+## **8. Development Tips**
+
+### **Adding New Voice Commands**
+1. Update intent parsing in `voice.ts`
+2. Add handler in `voiceStore.ts`
+3. Implement action in `monsterStore.ts`
+
+### **Adding New UI Components**
+1. Create component in `src/lib/components/`
+2. Apply cyberpunk-retro styling
+3. Connect to appropriate stores
+
+### **Extending 3D Features**
+1. Update `MonsterScene.svelte` for new animations
+2. Add model loading logic
+3. Implement interactive features
+
+## **9. Production Deployment**
+
+### **Build Process**
+```bash
+# Backend
+docker build -t digipal .
+
+# Frontend
+cd frontend && npm run build
+```
+
+### **Environment Variables**
+- `API_PORT`: Backend API port (default: 7861)
+- `SERVER_PORT`: Gradio port (default: 7860)
+- `MCP_ENDPOINT`: MCP server URL
+- `MCP_API_KEY`: MCP authentication
+
+## **10. Future Enhancements**
+
+- [ ] PWA support for mobile devices
+- [ ] Offline voice recognition
+- [ ] Multiplayer monster interactions
+- [ ] AR mode using device camera
+- [ ] Custom shader effects for monsters
+- [ ] Voice synthesis for monster responses

README.md

@@ -18,13 +18,15 @@ tags:
   - monster-raising
   - conversation
   - speech-recognition
+  - 3d-generation
+  - text-to-3d
 suggested_hardware: zero-a10g
 suggested_storage: medium
 ---
 
 # 🐾 DigiPal - Advanced AI Monster Companion
 
-The next generation of virtual monster companions powered by **Qwen 2.5**, **Whisper**, and advanced AI technologies. Experience deep emotional connections with your digital pet through natural conversation, comprehensive care systems, and sophisticated evolution mechanics.
+The next generation of virtual monster companions powered by **Qwen 2.5**, **Whisper**, advanced AI technologies, and **3D model generation**. Experience deep emotional connections with your digital pet through natural conversation, comprehensive care systems, sophisticated evolution mechanics, and bring your monsters to life in 3D!
 
 ## ✨ Features
 
@@ -39,12 +41,21 @@ The next generation of virtual monster companions powered by **Qwen 2.5**, **Whi
 - **Real-time stat degradation** that continues even when offline
 - **Complex evolution requirements** inspired by classic monster-raising games
 - **Training mini-games** that affect monster development
+- **DW1-aligned mechanics** option for authentic Digimon World 1 experience
+
+### 🎨 3D Model Generation (V2)
+- **Text-to-3D conversion** using Hunyuan3D and open-source models
+- **Multiple model providers** including HuggingFace, local models, and MCP protocol
+- **Real-time 3D visualization** of your monster companions
+- **Async generation pipeline** for smooth user experience
+- **Model caching** for efficient reuse of generated assets
 
 ### 🌟 Next-Generation Features
 - **Cross-session persistence** with browser state management
 - **Real-time streaming updates** using Gradio 5.34.2
 - **Zero GPU optimization** for efficient resource usage
 - **Advanced breeding system** with genetic inheritance
+- **MCP (Model Context Protocol)** support for flexible model deployment
 
 ## 🚀 Technology Stack
 
@@ -52,15 +63,67 @@ The next generation of virtual monster companions powered by **Qwen 2.5**, **Whi
 - **Gradio 5.34.2** with modern state management
 - **Qwen 2.5 models** optimized for conversation
 - **Faster Whisper** for efficient speech processing
+- **Hunyuan3D** for high-quality 3D model generation
 - **Zero GPU deployment** for scalable AI inference
+- **Docker support** for containerized deployment
 
 ## 🎯 Getting Started
 
+### Option 1: Basic Version (V1)
 1. **Create Your Monster**: Choose a name and personality type
 2. **Start Caring**: Feed, train, and interact with your companion
 3. **Build Relationships**: Use voice or text chat to bond
 4. **Watch Evolution**: Meet requirements to unlock new forms
-5. **Explore Breeding**: Combine monsters for unique offspring
+
+### Option 2: Enhanced Version with 3D (V2)
+1. **All V1 features** plus:
+2. **Generate 3D Models**: Create visual representations of your monsters
+3. **Customize Appearance**: Use text descriptions to shape your monster's look
+4. **View in 3D**: Interact with generated 3D models in real-time
+
+## 🛠️ Running Locally
+
+### Requirements
+- Python 3.11+
+- CUDA-capable GPU (recommended) or CPU
+- 8GB+ RAM (16GB+ recommended for 3D features)
+
+### Installation
+```bash
+# Clone the repository
+git clone https://github.com/yourusername/digipal.git
+cd digipal
+
+# Install dependencies
+pip install -r requirements.txt
+
+# Run V1 (basic features)
+python app.py
+
+# Run V2 (with 3D generation)
+python app_v2.py
+```
+
+### Docker Deployment
+```bash
+# Build the Docker image
+docker build -t digipal .
+
+# Run the container
+docker run -p 7860:7860 -v $(pwd)/data:/app/data digipal
+```
+
+### Configuration Options
+```bash
+# Enable debug mode
+LOG_LEVEL=DEBUG python app.py
+
+# Disable specific features (V2 only)
+ENABLE_3D=false python app_v2.py
+
+# Custom port and sharing
+SERVER_PORT=8080 SHARE=true python app.py
+```
 
 ## 💡 Tips for Best Experience
 
@@ -68,7 +131,36 @@ The next generation of virtual monster companions powered by **Qwen 2.5**, **Whi
 - **Balanced care** prevents evolution mistakes  
 - **Voice chat** creates deeper emotional connections
 - **Training variety** unlocks special evolution paths
+- **3D generation** works best with detailed descriptions
+- **Save frequently** to preserve your monster's progress
+
+## 🔧 Advanced Features
+
+### MCP Integration
+DigiPal supports Model Context Protocol for flexible AI model deployment:
+- Configure external model services via `MCP_ENDPOINT` and `MCP_API_KEY`
+- Access various AI models through a standardized protocol
+- Enable MCP server mode for integration with other tools
+
+### Development Mode
+- **Code formatting**: `black src/`
+- **Linting**: `ruff src/`
+- **Testing**: `pytest` (test suite in development)
+
+## 📚 Documentation
+
+- [CLAUDE.md](CLAUDE.md) - Development guide for Claude AI assistance
+- [DIGIPAL_V2_GUIDE.md](DIGIPAL_V2_GUIDE.md) - Detailed V2 features guide
+- [docs/HUNYUAN3D_INTEGRATION.md](docs/HUNYUAN3D_INTEGRATION.md) - 3D pipeline documentation
+
+## 🤝 Contributing
+
+Contributions are welcome! Please read our contributing guidelines and submit pull requests to our repository.
+
+## 📄 License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
 
 ---
 
-*Experience the future of AI companionship with DigiPal!*
+*Experience the future of AI companionship with DigiPal - where virtual monsters come to life in conversation and 3D!*

app.py

@@ -1,183 +1,469 @@
-#!/usr/bin/env python3
 """
-DigiPal - Advanced AI Monster Companion
-Built with HuggingFace Transformers v4.52.4 & Gradio 5.34.2
-Optimized for Qwen 2.5 models and Zero GPU deployment
+DigiPal - Advanced AI Monster Companion with 3D Generation
+Unified application with all features enabled by default
 """
 
+import asyncio
+import json
+import logging
 import os
 import sys
-import logging
-import asyncio
 from pathlib import Path
-from typing import Dict, Any
+from typing import Dict, Any, Optional, List
+from datetime import datetime
+import uvicorn
+from fastapi import FastAPI, WebSocket, WebSocketDisconnect, HTTPException
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.responses import JSONResponse
+from pydantic import BaseModel
+import gradio as gr
+import torch
+import spaces
+
+# Add src to path
+sys.path.insert(0, os.path.join(os.path.dirname(__file__), 'src'))
+
+# Configure logging
+logging.basicConfig(
+    level=logging.INFO,
+    format='%(asctime)s - %(name)s - %(levelname)s - %(message)s'
+)
+logger = logging.getLogger(__name__)
 
-# Add src to Python path
-sys.path.insert(0, str(Path(__file__).parent / "src"))
+# Environment configuration - All features enabled by default
+ENV_CONFIG = {
+    "LOG_LEVEL": os.getenv("LOG_LEVEL", "INFO"),
+    "SERVER_NAME": os.getenv("SERVER_NAME", "0.0.0.0"),
+    "SERVER_PORT": int(os.getenv("SERVER_PORT", "7860")),
+    "API_PORT": int(os.getenv("API_PORT", "7861")),
+    "SHARE": os.getenv("SHARE", "false").lower() == "true",
+    "DEBUG": os.getenv("DEBUG", "false").lower() == "true",
+    "MAX_THREADS": int(os.getenv("MAX_THREADS", "40")),
+    "MCP_ENDPOINT": os.getenv("MCP_ENDPOINT", ""),
+    "MCP_API_KEY": os.getenv("MCP_API_KEY", "")
+}
 
-# Import core components
-from src.ui.gradio_interface import ModernDigiPalInterface
-from src.deployment.zero_gpu_optimizer import ZeroGPUOptimizer
-from src.utils.performance_tracker import PerformanceTracker
+# HuggingFace Spaces detection
+IS_SPACES = os.getenv("SPACE_ID") is not None
 
-# Try to import spaces for GPU detection function
+# API Models
+class CreateMonsterRequest(BaseModel):
+    name: str
+    personality: str
+
+class MonsterActionRequest(BaseModel):
+    action: str
+    params: Dict[str, Any] = {}
+
+class MonsterTalkRequest(BaseModel):
+    message: str
+
+class Generate3DRequest(BaseModel):
+    description: Optional[str] = None
+
+# Import core modules after environment setup
 try:
-    import spaces
-    # Create a simple GPU function for ZeroGPU detection
-    # This ensures Spaces detects at least one @spaces.GPU function
-    @spaces.GPU
-    def gpu_initialization_check():
-        """Simple GPU check function for ZeroGPU detection"""
-        import torch
-        if torch.cuda.is_available():
-            return f"GPU available: {torch.cuda.get_device_name(0)}"
-        return "No GPU detected"
-except ImportError:
-    # If spaces is not available, create a dummy function
-    def gpu_initialization_check():
-        return "Running without ZeroGPU"
-
-def setup_logging(log_level: str = "INFO"):
-    """Setup comprehensive logging configuration"""
-    
-    # Create logs directory
-    logs_dir = Path("logs")
-    logs_dir.mkdir(exist_ok=True)
-    
-    # Configure logging
-    logging.basicConfig(
-        level=getattr(logging, log_level.upper()),
-        format='%(asctime)s - %(name)s - %(levelname)s - %(funcName)s:%(lineno)d - %(message)s',
-        handlers=[
-            logging.FileHandler(logs_dir / "digipal.log"),
-            logging.StreamHandler(sys.stdout)
-        ]
+    from src.core.monster_engine_dw1 import Monster, PersonalityType
+    from src.core.evolution_system import EvolutionSystem
+    from src.ai.qwen_processor import QwenProcessor
+    from src.ai.speech_engine import SpeechEngine
+    from src.ui.state_manager import StateManager
+    from src.deployment.zero_gpu_optimizer import get_optimal_device
+    from src.pipelines.text_to_3d_pipeline import Text3DPipeline
+    from src.pipelines.hunyuan3d_pipeline import Hunyuan3DClient
+    from src.pipelines.opensource_3d_pipeline_v2 import (
+        OpenSourcePipelineV2, 
+        PipelineConfig, 
+        ModelProvider
     )
     
-    # Set specific logger levels
-    logging.getLogger("transformers").setLevel(logging.WARNING)
-    logging.getLogger("torch").setLevel(logging.WARNING)
-    logging.getLogger("gradio").setLevel(logging.INFO)
+    # UI imports
+    from src.ui.gradio_interface_v2 import create_interface
+except ImportError as e:
+    logger.error(f"Failed to import required modules: {e}")
+    sys.exit(1)
 
-def setup_environment():
-    """Setup environment variables and configurations"""
-    
-    # Create necessary directories
-    directories = [
-        "data/saves",
-        "data/monsters", 
-        "data/models",
-        "data/cache",
-        "logs",
-        "config"
-    ]
-    
-    for directory in directories:
-        Path(directory).mkdir(parents=True, exist_ok=True)
-    
-    # Set environment variables for optimization
-    os.environ["TOKENIZERS_PARALLELISM"] = "false"  # Avoid tokenizer warnings
-    os.environ["TRANSFORMERS_CACHE"] = str(Path("data/cache").absolute())
-    os.environ["HF_HOME"] = str(Path("data/cache").absolute())
-    
-    # CUDA optimization settings
-    if "CUDA_VISIBLE_DEVICES" not in os.environ:
-        os.environ["CUDA_VISIBLE_DEVICES"] = "0"
-    
-    # Memory optimization
-    os.environ["PYTORCH_CUDA_ALLOC_CONF"] = "max_split_size_mb:128"
+# Initialize FastAPI app
+app = FastAPI(title="DigiPal API", version="1.0.0")
 
-async def initialize_components() -> Dict[str, Any]:
-    """Initialize all application components"""
-    logger = logging.getLogger(__name__)
-    
-    try:
-        # Initialize performance tracker
-        performance_tracker = PerformanceTracker()
-        await performance_tracker.initialize()
+# Add CORS middleware for frontend communication
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],  # In production, replace with specific origins
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+# Global state management
+class AppState:
+    def __init__(self):
+        self.monsters: Dict[str, Monster] = {}
+        self.state_manager = StateManager()
+        self.qwen_processor = None
+        self.speech_engine = None
+        self.evolution_system = EvolutionSystem()
+        self.text3d_pipeline = None
+        self.active_connections: Dict[str, WebSocket] = {}
+        self.initialized = False
         
-        # Initialize GPU optimizer
-        gpu_optimizer = ZeroGPUOptimizer()
-        resources = await gpu_optimizer.detect_available_resources()
+    async def initialize(self):
+        """Initialize AI components and pipelines"""
+        if self.initialized:
+            return
+            
+        logger.info("Initializing AI components...")
         
-        logger.info(f"Detected resources: {resources}")
+        # Initialize AI processors
+        try:
+            self.qwen_processor = QwenProcessor()
+            self.speech_engine = SpeechEngine()
+            
+            # Initialize 3D pipeline with MCP if available
+            if ENV_CONFIG["MCP_ENDPOINT"]:
+                logger.info("Using MCP for 3D generation")
+                pipeline_config = PipelineConfig(
+                    model_provider=ModelProvider.MCP,
+                    mcp_endpoint=ENV_CONFIG["MCP_ENDPOINT"],
+                    mcp_api_key=ENV_CONFIG["MCP_API_KEY"]
+                )
+            else:
+                logger.info("Using local models for 3D generation")
+                pipeline_config = PipelineConfig(
+                    model_provider=ModelProvider.HUGGINGFACE
+                )
+            
+            self.text3d_pipeline = Text3DPipeline(
+                pipeline_type="opensource_v2",
+                config=pipeline_config
+            )
+            
+            self.initialized = True
+            logger.info("All components initialized successfully")
+            
+        except Exception as e:
+            logger.error(f"Failed to initialize components: {e}")
+            raise
+
+# Create global app state
+app_state = AppState()
+
+# WebSocket connection manager
+class ConnectionManager:
+    def __init__(self):
+        self.active_connections: Dict[str, WebSocket] = {}
+        
+    async def connect(self, websocket: WebSocket, monster_id: str):
+        await websocket.accept()
+        self.active_connections[monster_id] = websocket
+        
+    def disconnect(self, monster_id: str):
+        if monster_id in self.active_connections:
+            del self.active_connections[monster_id]
+            
+    async def send_update(self, monster_id: str, data: dict):
+        if monster_id in self.active_connections:
+            try:
+                await self.active_connections[monster_id].send_json(data)
+            except:
+                self.disconnect(monster_id)
+
+manager = ConnectionManager()
+
+# API Endpoints
+@app.on_event("startup")
+async def startup_event():
+    """Initialize app state on startup"""
+    await app_state.initialize()
+
+@app.get("/health")
+async def health_check():
+    """Health check endpoint"""
+    return {"status": "healthy", "initialized": app_state.initialized}
+
+@app.get("/api/monsters")
+async def list_monsters():
+    """List all available saved monsters"""
+    try:
+        saved_monsters = await app_state.state_manager.list_saved_monsters()
+        return {"monsters": saved_monsters}
+    except Exception as e:
+        logger.error(f"Error listing monsters: {e}")
+        raise HTTPException(status_code=500, detail=str(e))
+
+@app.post("/api/monsters")
+async def create_monster(request: CreateMonsterRequest):
+    """Create a new monster"""
+    try:
+        # Create new monster
+        personality = PersonalityType[request.personality.upper()]
+        monster = Monster(name=request.name, personality=personality)
+        
+        # Save to state
+        app_state.monsters[monster.id] = monster
         
-        # Initialize main interface
-        interface = ModernDigiPalInterface()
-        await interface.initialize()
+        # Save to database
+        await app_state.state_manager.save_monster(monster)
         
         return {
-            "interface": interface,
-            "performance_tracker": performance_tracker,
-            "gpu_optimizer": gpu_optimizer,
-            "resources": resources
+            "id": monster.id,
+            "name": monster.name,
+            "personality": monster.personality.value,
+            "stage": monster.stage.value,
+            "stats": monster.get_stats()
         }
-        
     except Exception as e:
-        logger.error(f"Component initialization failed: {e}")
+        logger.error(f"Error creating monster: {e}")
+        raise HTTPException(status_code=500, detail=str(e))
+
+@app.get("/api/monsters/{monster_id}")
+async def get_monster(monster_id: str):
+    """Load a specific monster's full state"""
+    try:
+        # Check if already loaded
+        if monster_id in app_state.monsters:
+            monster = app_state.monsters[monster_id]
+        else:
+            # Load from database
+            monster = await app_state.state_manager.load_monster_by_id(monster_id)
+            if not monster:
+                raise HTTPException(status_code=404, detail="Monster not found")
+            app_state.monsters[monster_id] = monster
+        
+        return {
+            "id": monster.id,
+            "name": monster.name,
+            "personality": monster.personality.value,
+            "stage": monster.stage.value,
+            "stats": monster.get_stats(),
+            "model_url": monster.model_url,
+            "conversation_history": monster.conversation_history[-10:]  # Last 10 messages
+        }
+    except HTTPException:
         raise
+    except Exception as e:
+        logger.error(f"Error loading monster: {e}")
+        raise HTTPException(status_code=500, detail=str(e))
 
-def main():
-    """Main application entry point - DO NOT decorate with @spaces.GPU"""
-    
-    # Setup environment first
-    setup_logging(os.getenv("LOG_LEVEL", "INFO"))
-    setup_environment()
-    
-    logger = logging.getLogger(__name__)
-    logger.info("Starting DigiPal Advanced Monster Companion...")
-    
+@app.post("/api/monsters/{monster_id}/action")
+async def perform_action(monster_id: str, request: MonsterActionRequest):
+    """Perform a care action on the monster"""
     try:
-        # Check Python version
-        if sys.version_info < (3, 8):
-            raise RuntimeError("Python 3.8 or higher is required")
-        
-        # Initialize async event loop
-        if sys.platform == "win32":
-            asyncio.set_event_loop_policy(asyncio.WindowsProactorEventLoopPolicy())
-        
-        loop = asyncio.new_event_loop()
-        asyncio.set_event_loop(loop)
-        
-        # Initialize components
-        components = loop.run_until_complete(initialize_components())
-        
-        logger.info("All components initialized successfully")
-        
-        # Launch configuration based on environment
-        launch_config = {
-            "server_name": os.getenv("SERVER_NAME", "0.0.0.0"),
-            "server_port": int(os.getenv("SERVER_PORT", "7860")),
-            "share": os.getenv("SHARE", "false").lower() == "true",
-            "debug": os.getenv("DEBUG", "false").lower() == "true",
-            "show_error": True,
-            "max_threads": int(os.getenv("MAX_THREADS", "40")),
-            "mcp_server": True,
-            "auth": None  # Can be configured for production
+        if monster_id not in app_state.monsters:
+            raise HTTPException(status_code=404, detail="Monster not found")
+        
+        monster = app_state.monsters[monster_id]
+        result = {}
+        
+        # Handle different actions
+        if request.action == "feed":
+            food_type = request.params.get("food_type", "balanced")
+            result = monster.feed(food_type)
+        elif request.action == "train":
+            training_type = request.params.get("training_type", "strength")
+            result = monster.train(training_type)
+        elif request.action == "play":
+            result = monster.play()
+        elif request.action == "clean":
+            result = monster.clean()
+        elif request.action == "heal":
+            result = monster.heal()
+        elif request.action == "discipline":
+            result = monster.discipline()
+        elif request.action == "rest":
+            result = monster.rest()
+        else:
+            raise HTTPException(status_code=400, detail=f"Unknown action: {request.action}")
+        
+        # Save state
+        await app_state.state_manager.save_monster(monster)
+        
+        # Send real-time update
+        await manager.send_update(monster_id, {
+            "type": "stats_update",
+            "stats": monster.get_stats(),
+            "stage": monster.stage.value
+        })
+        
+        return {
+            "success": True,
+            "result": result,
+            "stats": monster.get_stats()
         }
+    except HTTPException:
+        raise
+    except Exception as e:
+        logger.error(f"Error performing action: {e}")
+        raise HTTPException(status_code=500, detail=str(e))
+
+@app.post("/api/monsters/{monster_id}/talk")
+async def talk_to_monster(monster_id: str, request: MonsterTalkRequest):
+    """Send a text message to the monster"""
+    try:
+        if monster_id not in app_state.monsters:
+            raise HTTPException(status_code=404, detail="Monster not found")
         
-        # Add SSL configuration for production
-        if os.getenv("SSL_ENABLED", "false").lower() == "true":
-            launch_config.update({
-                "ssl_keyfile": os.getenv("SSL_KEYFILE"),
-                "ssl_certfile": os.getenv("SSL_CERTFILE"),
-                "ssl_keyfile_password": os.getenv("SSL_PASSWORD")
-            })
+        monster = app_state.monsters[monster_id]
         
-        logger.info(f"Launching interface with config: {launch_config}")
+        # Use MCP if available, otherwise use local processor
+        if ENV_CONFIG["MCP_ENDPOINT"] and hasattr(app_state.qwen_processor, 'use_mcp'):
+            response = await app_state.qwen_processor.generate_response_mcp(
+                monster, request.message
+            )
+        else:
+            response = app_state.qwen_processor.generate_response(
+                monster, request.message
+            )
         
-        # Launch the interface - this will handle its own event loop
-        components["interface"].launch(**launch_config)
+        # Update conversation history
+        monster.conversation_history.append({
+            "role": "user",
+            "content": request.message,
+            "timestamp": datetime.now().isoformat()
+        })
+        monster.conversation_history.append({
+            "role": "assistant", 
+            "content": response,
+            "timestamp": datetime.now().isoformat()
+        })
         
-    except KeyboardInterrupt:
-        logger.info("Application stopped by user")
+        # Save state
+        await app_state.state_manager.save_monster(monster)
+        
+        return {
+            "response": response,
+            "stats": monster.get_stats()
+        }
+    except HTTPException:
+        raise
     except Exception as e:
-        logger.error(f"Application failed to start: {e}")
+        logger.error(f"Error talking to monster: {e}")
+        raise HTTPException(status_code=500, detail=str(e))
+
+@app.post("/api/monsters/{monster_id}/generate-3d")
+async def generate_3d_model(monster_id: str, request: Generate3DRequest):
+    """Trigger 3D model generation for the monster"""
+    try:
+        if monster_id not in app_state.monsters:
+            raise HTTPException(status_code=404, detail="Monster not found")
+        
+        monster = app_state.monsters[monster_id]
+        
+        # Generate description if not provided
+        if not request.description:
+            description = f"A {monster.personality.value} {monster.stage.value} digital monster"
+        else:
+            description = request.description
+        
+        # Generate 3D model
+        logger.info(f"Generating 3D model for {monster.name}: {description}")
+        model_path = await app_state.text3d_pipeline.generate(
+            description,
+            output_dir=f"data/models/{monster_id}"
+        )
+        
+        # Update monster with model URL
+        monster.model_url = f"/models/{monster_id}/{Path(model_path).name}"
+        await app_state.state_manager.save_monster(monster)
+        
+        # Send update via WebSocket
+        await manager.send_update(monster_id, {
+            "type": "model_update",
+            "model_url": monster.model_url
+        })
+        
+        return {
+            "success": True,
+            "model_url": monster.model_url
+        }
+    except HTTPException:
         raise
-    finally:
-        logger.info("DigiPal application shutdown complete")
+    except Exception as e:
+        logger.error(f"Error generating 3D model: {e}")
+        raise HTTPException(status_code=500, detail=str(e))
+
+@app.websocket("/api/monsters/{monster_id}/ws")
+async def websocket_endpoint(websocket: WebSocket, monster_id: str):
+    """WebSocket endpoint for real-time updates"""
+    await manager.connect(websocket, monster_id)
+    
+    try:
+        # Send initial stats
+        if monster_id in app_state.monsters:
+            monster = app_state.monsters[monster_id]
+            await websocket.send_json({
+                "type": "initial_state",
+                "stats": monster.get_stats(),
+                "stage": monster.stage.value,
+                "model_url": monster.model_url
+            })
+        
+        # Keep connection alive and handle stat degradation
+        while True:
+            await asyncio.sleep(30)  # Update every 30 seconds
+            
+            if monster_id in app_state.monsters:
+                monster = app_state.monsters[monster_id]
+                monster.update_time_based_stats()
+                
+                await websocket.send_json({
+                    "type": "stats_update",
+                    "stats": monster.get_stats(),
+                    "stage": monster.stage.value
+                })
+                
+    except WebSocketDisconnect:
+        manager.disconnect(monster_id)
 
+# Gradio interface for fallback/admin
+def create_gradio_interface():
+    """Create Gradio interface as admin panel"""
+    interface = create_interface()
+    return interface
+
+# Main entry point
 if __name__ == "__main__":
-    # Note: Signal handling removed as it doesn't work with ZeroGPU's threading model
-    # The application will handle shutdown through Gradio's built-in mechanisms
-    main()
+    # Create necessary directories
+    os.makedirs("data/saves", exist_ok=True)
+    os.makedirs("data/models", exist_ok=True)
+    os.makedirs("data/cache", exist_ok=True)
+    os.makedirs("logs", exist_ok=True)
+    
+    # Log startup info
+    logger.info("=" * 60)
+    logger.info("DigiPal - Advanced AI Monster Companion")
+    logger.info("=" * 60)
+    logger.info(f"Environment: {'HuggingFace Spaces' if IS_SPACES else 'Local'}")
+    logger.info(f"API Port: {ENV_CONFIG['API_PORT']}")
+    logger.info(f"Gradio Port: {ENV_CONFIG['SERVER_PORT']}")
+    logger.info(f"MCP Enabled: {bool(ENV_CONFIG['MCP_ENDPOINT'])}")
+    logger.info("=" * 60)
+    
+    # Run both FastAPI and Gradio
+    async def run_servers():
+        # Start FastAPI server
+        config = uvicorn.Config(
+            app,
+            host=ENV_CONFIG["SERVER_NAME"],
+            port=ENV_CONFIG["API_PORT"],
+            log_level=ENV_CONFIG["LOG_LEVEL"].lower()
+        )
+        server = uvicorn.Server(config)
+        
+        # Create Gradio interface
+        gr_interface = create_gradio_interface()
+        
+        # Run both servers concurrently
+        await asyncio.gather(
+            server.serve(),
+            gr_interface.launch(
+                server_name=ENV_CONFIG["SERVER_NAME"],
+                server_port=ENV_CONFIG["SERVER_PORT"],
+                share=ENV_CONFIG["SHARE"],
+                max_threads=ENV_CONFIG["MAX_THREADS"],
+                show_error=True
+            )
+        )
+    
+    # Run the servers
+    asyncio.run(run_servers())

frontend/app.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%sveltekit.assets%/favicon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    %sveltekit.head%
+  </head>
+  <body data-sveltekit-preload-data="hover" class="bg-black text-white">
+    <div style="display: contents">%sveltekit.body%</div>
+  </body>
+</html>

frontend/frontend/.gitignore

@@ -0,0 +1,23 @@
+node_modules
+
+# Output
+.output
+.vercel
+.netlify
+.wrangler
+/.svelte-kit
+/build
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Env
+.env
+.env.*
+!.env.example
+!.env.test
+
+# Vite
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

frontend/frontend/.npmrc

@@ -0,0 +1 @@
+engine-strict=true

frontend/frontend/README.md

@@ -0,0 +1,38 @@
+# sv
+
+Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```bash
+# create a new project in the current directory
+npx sv create
+
+# create a new project in my-app
+npx sv create my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+To create a production version of your app:
+
+```bash
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.

frontend/frontend/package.json

@@ -0,0 +1,23 @@
+{
+	"name": "frontend",
+	"private": true,
+	"version": "0.0.1",
+	"type": "module",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"prepare": "svelte-kit sync || echo ''",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-auto": "^6.0.0",
+		"@sveltejs/kit": "^2.16.0",
+		"@sveltejs/vite-plugin-svelte": "^5.0.0",
+		"svelte": "^5.0.0",
+		"svelte-check": "^4.0.0",
+		"typescript": "^5.0.0",
+		"vite": "^6.2.6"
+	}
+}

frontend/frontend/src/app.d.ts

@@ -0,0 +1,13 @@
+// See https://svelte.dev/docs/kit/types#app.d.ts
+// for information about these interfaces
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface PageState {}
+		// interface Platform {}
+	}
+}
+
+export {};

frontend/frontend/src/app.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>

frontend/frontend/src/routes/+page.svelte

@@ -0,0 +1,2 @@
+<h1>Welcome to SvelteKit</h1>
+<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>

frontend/frontend/svelte.config.js

@@ -0,0 +1,18 @@
+import adapter from '@sveltejs/adapter-auto';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	// Consult https://svelte.dev/docs/kit/integrations
+	// for more information about preprocessors
+	preprocess: vitePreprocess(),
+
+	kit: {
+		// adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
+		// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
+		// See https://svelte.dev/docs/kit/adapters for more information about adapters.
+		adapter: adapter()
+	}
+};
+
+export default config;

frontend/frontend/tsconfig.json

@@ -0,0 +1,19 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true,
+		"moduleResolution": "bundler"
+	}
+	// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
+	// except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
+	//
+	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
+	// from the referenced tsconfig.json - TypeScript does not merge them in
+}

frontend/frontend/vite.config.ts

@@ -0,0 +1,6 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+	plugins: [sveltekit()]
+});

frontend/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "digipal-frontend",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-auto": "^3.0.0",
+    "@sveltejs/kit": "^2.0.0",
+    "@sveltejs/vite-plugin-svelte": "^3.0.0",
+    "@types/three": "^0.160.0",
+    "svelte": "^4.2.7",
+    "svelte-check": "^3.6.0",
+    "tslib": "^2.4.1",
+    "typescript": "^5.0.0",
+    "vite": "^5.0.3"
+  },
+  "dependencies": {
+    "@threlte/core": "^7.1.0",
+    "@threlte/extras": "^8.7.5",
+    "three": "^0.160.1",
+    "tailwindcss": "^3.4.0",
+    "autoprefixer": "^10.4.16",
+    "postcss": "^8.4.32"
+  }
+}

frontend/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

frontend/src/app.css

@@ -0,0 +1,153 @@
+@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Inter:wght@400;500;600;700&display=swap');
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  body {
+    @apply bg-black text-white;
+  }
+}
+
+@layer components {
+  /* CRT effect */
+  .crt-effect {
+    position: relative;
+    overflow: hidden;
+  }
+  
+  .crt-effect::before {
+    content: " ";
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background: linear-gradient(
+      rgba(18, 16, 16, 0) 50%,
+      rgba(0, 0, 0, 0.25) 50%
+    );
+    background-size: 100% 2px;
+    z-index: 2;
+    pointer-events: none;
+    animation: scan-lines 8s linear infinite;
+  }
+  
+  .crt-effect::after {
+    content: " ";
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background: rgba(18, 16, 16, 0.1);
+    opacity: 0;
+    z-index: 2;
+    pointer-events: none;
+    animation: flicker 0.15s infinite;
+  }
+  
+  /* Holographic button */
+  .holographic-button {
+    @apply relative px-4 py-2 font-pixel text-xs uppercase tracking-wider;
+    background: linear-gradient(45deg, #00CED1, #FF6B00, #00CED1);
+    background-size: 200% 200%;
+    animation: hologram 3s ease-in-out infinite;
+    clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);
+  }
+  
+  .holographic-button:hover {
+    @apply brightness-125;
+  }
+  
+  /* Device frame */
+  .device-frame {
+    @apply relative bg-digipal-gray rounded-3xl p-8 shadow-2xl;
+    background-image: 
+      radial-gradient(circle at 20% 80%, #FF6B00 0%, transparent 50%),
+      radial-gradient(circle at 80% 20%, #00CED1 0%, transparent 50%),
+      radial-gradient(circle at 40% 40%, #2D2D2D 0%, transparent 50%);
+  }
+  
+  /* D-pad button */
+  .dpad-button {
+    @apply bg-gray-800 hover:bg-gray-700 active:bg-gray-900 transition-colors;
+    @apply border-2 border-gray-600;
+  }
+  
+  /* Action button */
+  .action-button {
+    @apply rounded-full bg-gradient-to-br from-gray-700 to-gray-900;
+    @apply hover:from-gray-600 hover:to-gray-800 active:from-gray-800 active:to-black;
+    @apply transition-all duration-150 transform active:scale-95;
+    @apply shadow-lg;
+  }
+}
+
+@keyframes flicker {
+  0% {
+    opacity: 0.27861;
+  }
+  5% {
+    opacity: 0.34769;
+  }
+  10% {
+    opacity: 0.23604;
+  }
+  15% {
+    opacity: 0.90626;
+  }
+  20% {
+    opacity: 0.18128;
+  }
+  25% {
+    opacity: 0.83891;
+  }
+  30% {
+    opacity: 0.65583;
+  }
+  35% {
+    opacity: 0.67807;
+  }
+  40% {
+    opacity: 0.26559;
+  }
+  45% {
+    opacity: 0.84693;
+  }
+  50% {
+    opacity: 0.96019;
+  }
+  55% {
+    opacity: 0.08594;
+  }
+  60% {
+    opacity: 0.20313;
+  }
+  65% {
+    opacity: 0.71988;
+  }
+  70% {
+    opacity: 0.53455;
+  }
+  75% {
+    opacity: 0.37288;
+  }
+  80% {
+    opacity: 0.71428;
+  }
+  85% {
+    opacity: 0.70419;
+  }
+  90% {
+    opacity: 0.7003;
+  }
+  95% {
+    opacity: 0.36108;
+  }
+  100% {
+    opacity: 0.24387;
+  }
+}

frontend/src/routes/+layout.svelte

@@ -0,0 +1,5 @@
+<script>
+  import '../app.css';
+</script>
+
+<slot />

frontend/src/routes/+page.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import Device from '$lib/components/Device.svelte';
+  import { monsterStore } from '$lib/stores/monsterStore';
+  import { onMount } from 'svelte';
+  
+  onMount(() => {
+    // Initialize the app
+    monsterStore.initialize();
+  });
+</script>
+
+<main class="min-h-screen flex items-center justify-center bg-gradient-to-br from-gray-900 via-black to-gray-900">
+  <Device />
+</main>

frontend/svelte.config.js

@@ -0,0 +1,14 @@
+import adapter from '@sveltejs/adapter-auto';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+  // Consult https://kit.svelte.dev/docs/integrations#preprocessors
+  preprocess: vitePreprocess(),
+
+  kit: {
+    adapter: adapter()
+  }
+};
+
+export default config;

frontend/tailwind.config.js

@@ -0,0 +1,58 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./src/**/*.{html,js,svelte,ts}'],
+  theme: {
+    extend: {
+      colors: {
+        'digipal-orange': '#FF6B00',
+        'digipal-teal': '#00CED1',
+        'digipal-gray': '#2D2D2D',
+        'neon-magenta': '#FF00FF',
+        'neon-cyan': '#00FFFF',
+      },
+      fontFamily: {
+        'pixel': ['Press Start 2P', 'monospace'],
+        'modern': ['Inter', 'sans-serif'],
+      },
+      animation: {
+        'scan-lines': 'scan-lines 8s linear infinite',
+        'glitch': 'glitch 2s ease-in-out infinite alternate',
+        'hologram': 'hologram 3s ease-in-out infinite',
+      },
+      keyframes: {
+        'scan-lines': {
+          '0%': { transform: 'translateY(0)' },
+          '100%': { transform: 'translateY(100%)' },
+        },
+        'glitch': {
+          '0%': { 
+            textShadow: '0.05em 0 0 #00fffc, -0.03em -0.04em 0 #fc00ff, 0.025em 0.04em 0 #fffc00' 
+          },
+          '15%': { 
+            textShadow: '0.05em 0 0 #00fffc, -0.03em -0.04em 0 #fc00ff, 0.025em 0.04em 0 #fffc00' 
+          },
+          '16%': { 
+            textShadow: '-0.05em -0.025em 0 #00fffc, 0.025em 0.035em 0 #fc00ff, -0.05em -0.05em 0 #fffc00' 
+          },
+          '49%': { 
+            textShadow: '-0.05em -0.025em 0 #00fffc, 0.025em 0.035em 0 #fc00ff, -0.05em -0.05em 0 #fffc00' 
+          },
+          '50%': { 
+            textShadow: '0.05em 0.035em 0 #00fffc, 0.03em 0 0 #fc00ff, 0 -0.04em 0 #fffc00' 
+          },
+          '99%': { 
+            textShadow: '0.05em 0.035em 0 #00fffc, 0.03em 0 0 #fc00ff, 0 -0.04em 0 #fffc00' 
+          },
+          '100%': { 
+            textShadow: '-0.05em 0 0 #00fffc, -0.025em -0.04em 0 #fc00ff, -0.04em -0.025em 0 #fffc00' 
+          },
+        },
+        'hologram': {
+          '0%, 100%': { opacity: '1' },
+          '50%': { opacity: '0.7' },
+        },
+      },
+    },
+  },
+  plugins: [],
+}

frontend/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "./.svelte-kit/tsconfig.json",
+  "compilerOptions": {
+    "allowJs": true,
+    "checkJs": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "sourceMap": true,
+    "strict": true
+  }
+}

frontend/vite.config.ts

@@ -0,0 +1,18 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  plugins: [sveltekit()],
+  server: {
+    proxy: {
+      '/api': {
+        target: 'http://localhost:7861',
+        changeOrigin: true
+      },
+      '/api/ws': {
+        target: 'ws://localhost:7861',
+        ws: true
+      }
+    }
+  }
+});

requirements.txt

@@ -21,6 +21,7 @@ webrtcvad>=2.0.10
 fastapi>=0.108.0
 uvicorn[standard]>=0.25.0
 pydantic>=2.5.0
+websockets>=12.0
 
 # Advanced State Management
 apscheduler>=3.10.4