Production ready build with modular backend

.gitignore

@@ -0,0 +1,46 @@
+# Dependencies
+node_modules/
+frontend/node_modules/
+__pycache__/
+*.py[cod]
+*$py.class
+
+# Build outputs
+frontend/dist/
+frontend/build/
+
+# Environment
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+.venv/
+venv/
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Logs
+*.log
+logs/
+
+# Cache
+.cache/
+.pytest_cache/
+.mypy_cache/
+
+# Model cache (uncomment to ignore downloaded models)
+# models/
+# .cache/huggingface/
+
+# Temporary files
+*.tmp
+*.temp

CONTRIBUTING.md

@@ -0,0 +1,230 @@
+# Contributing to Edge LLM 🤝
+
+Thank you for your interest in contributing to Edge LLM! This guide will help you get started with development and contributions.
+
+## 🚀 Quick Setup for Contributors
+
+### 1. Fork and Clone
+```bash
+# Fork the repository on Hugging Face Spaces
+# Then clone your fork
+git clone https://huggingface.co/spaces/[your-username]/EdgeLLM
+cd EdgeLLM
+```
+
+### 2. Install Dependencies
+```bash
+# Install Python dependencies
+pip install -r requirements.txt
+
+# Install Node.js dependencies
+cd frontend && npm install && cd ..
+
+# Optional: Install root package for scripts
+npm install
+```
+
+### 3. Start Development
+```bash
+# Option 1: Use npm scripts
+npm run dev
+
+# Option 2: Use Python script
+python scripts/start_platform.py
+
+# Option 3: Start manually
+npm run backend    # Terminal 1
+npm run frontend   # Terminal 2
+```
+
+## 📁 Project Structure
+
+```
+EdgeLLM/                        # Main project directory
+├── 🔧 Backend
+│   ├── backend/
+│   │   ├── api/               # API routes
+│   │   ├── services/          # Business logic
+│   │   ├── models.py          # Data models
+│   │   ├── config.py          # Configuration
+│   │   └── main.py            # FastAPI app
+│   ├── app.py                 # Entry point
+│   └── requirements.txt       # Python dependencies
+├── 💻 Frontend
+│   ├── frontend/
+│   │   ├── src/
+│   │   │   ├── components/    # React components
+│   │   │   ├── pages/         # Page components
+│   │   │   ├── hooks/         # Custom hooks
+│   │   │   └── types/         # TypeScript types
+│   │   ├── package.json       # Frontend dependencies
+│   │   └── vite.config.ts     # Build configuration
+│   └── static/                # Built assets (auto-generated)
+├── 🔨 Development
+│   ├── scripts/               # Development scripts
+│   ├── package.json           # Root scripts
+│   └── .gitignore             # Git ignore rules
+└── 📚 Documentation
+    ├── README.md              # Main documentation
+    └── CONTRIBUTING.md        # This file
+```
+
+## 🛠️ Development Workflow
+
+### Frontend Development
+```bash
+cd frontend
+npm run dev          # Start dev server (hot reload)
+npm run build        # Build for production
+npm run preview      # Preview production build
+```
+
+### Backend Development
+```bash
+# Start with auto-reload
+uvicorn app:app --host 0.0.0.0 --port 8000 --reload
+
+# Or use npm script
+npm run backend
+```
+
+### Full Stack Development
+```bash
+# Start both frontend and backend
+npm run dev
+
+# Build everything
+npm run build
+```
+
+## 🧪 Testing Your Changes
+
+### 1. Frontend Testing
+```bash
+cd frontend
+npm run test         # Run tests
+npm run build        # Ensure build works
+```
+
+### 2. Backend Testing
+```bash
+# Start backend and test API endpoints
+curl http://localhost:8000/health
+curl http://localhost:8000/models
+```
+
+### 3. Integration Testing
+```bash
+# Build and test full application
+npm run build
+python app.py        # Test production build
+```
+
+## 📝 Code Style Guidelines
+
+### Frontend (TypeScript/React)
+- Use TypeScript for type safety
+- Follow React best practices
+- Use ShadCN UI components when possible
+- Keep components small and focused
+- Use custom hooks for reusable logic
+
+### Backend (Python/FastAPI)
+- Use type hints everywhere
+- Follow PEP 8 style guide
+- Keep services modular
+- Add docstrings to functions
+- Use Pydantic models for data validation
+
+### General
+- Write descriptive commit messages
+- Keep functions small and focused
+- Add comments for complex logic
+- Update documentation for new features
+
+## 🔄 Contribution Process
+
+### 1. Create a Feature Branch
+```bash
+git checkout -b feature/your-feature-name
+```
+
+### 2. Make Your Changes
+- Follow the code style guidelines
+- Add tests if applicable
+- Update documentation
+
+### 3. Test Your Changes
+```bash
+npm run build        # Ensure everything builds
+npm run dev          # Test in development
+```
+
+### 4. Commit and Push
+```bash
+git add .
+git commit -m "feat: add your feature description"
+git push origin feature/your-feature-name
+```
+
+### 5. Create a Pull Request
+- Describe your changes clearly
+- Include screenshots if UI changes
+- Reference any related issues
+
+## 🎯 Areas for Contribution
+
+### 🔧 Backend Improvements
+- Add new model support
+- Improve error handling
+- Add model caching optimizations
+- Create API tests
+
+### 💻 Frontend Enhancements
+- Add new UI components
+- Improve chat interface
+- Add dark mode support
+- Enhance accessibility
+
+### 📚 Documentation
+- Improve README
+- Add code comments
+- Create tutorials
+- Update API documentation
+
+### 🚀 DevOps & Deployment
+- Improve Docker configuration
+- Add CI/CD workflows
+- Optimize build process
+- Add monitoring
+
+## 🐛 Bug Reports
+
+When reporting bugs, please include:
+- Steps to reproduce
+- Expected behavior
+- Actual behavior
+- Browser/OS information
+- Console error messages
+
+## 💡 Feature Requests
+
+When requesting features, please include:
+- Clear description of the feature
+- Use case and motivation
+- Proposed implementation approach
+- Any relevant examples
+
+## 📞 Getting Help
+
+- **Issues**: Create a GitHub issue for bugs or questions
+- **Discussions**: Use GitHub discussions for general questions
+- **Documentation**: Check the README and API docs first
+
+## 🙏 Thank You!
+
+Every contribution, no matter how small, helps make Edge LLM better for everyone. We appreciate your time and effort!
+
+---
+
+**Happy coding!** 🚀

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 ZEKUN WU
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

backend/api/routes.py

@@ -0,0 +1,141 @@
+"""
+API routes for Edge LLM
+"""
+from fastapi import APIRouter, HTTPException
+from fastapi.responses import FileResponse
+from ..models import (
+    PromptRequest, PromptResponse, ModelInfo, ModelsResponse,
+    ModelLoadRequest, ModelUnloadRequest
+)
+from ..services.model_service import model_service
+from ..services.chat_service import chat_service
+from ..config import AVAILABLE_MODELS
+
+# Create API router
+router = APIRouter()
+
+
+@router.get("/")
+async def read_index():
+    """Serve the React app"""
+    return FileResponse('static/index.html')
+
+
+@router.get("/health")
+async def health_check():
+    """Health check endpoint"""
+    return {"status": "healthy", "message": "Edge LLM API is running"}
+
+
+@router.get("/models", response_model=ModelsResponse)
+async def get_models():
+    """Get available models and their status"""
+    models = []
+    for model_name, info in AVAILABLE_MODELS.items():
+        models.append(ModelInfo(
+            model_name=model_name,
+            name=info["name"],
+            supports_thinking=info["supports_thinking"],
+            description=info["description"],
+            size_gb=info["size_gb"],
+            is_loaded=model_service.is_model_loaded(model_name)
+        ))
+    
+    return ModelsResponse(
+        models=models,
+        current_model=model_service.get_current_model() or ""
+    )
+
+
+@router.post("/load-model")
+async def load_model(request: ModelLoadRequest):
+    """Load a specific model"""
+    if request.model_name not in AVAILABLE_MODELS:
+        raise HTTPException(
+            status_code=400, 
+            detail=f"Model {request.model_name} not available"
+        )
+    
+    success = model_service.load_model(request.model_name)
+    if success:
+        model_service.set_current_model(request.model_name)
+        return {
+            "message": f"Model {request.model_name} loaded successfully",
+            "current_model": model_service.get_current_model()
+        }
+    else:
+        raise HTTPException(
+            status_code=500,
+            detail=f"Failed to load model {request.model_name}"
+        )
+
+
+@router.post("/unload-model")
+async def unload_model(request: ModelUnloadRequest):
+    """Unload a specific model"""
+    success = model_service.unload_model(request.model_name)
+    if success:
+        return {
+            "message": f"Model {request.model_name} unloaded successfully",
+            "current_model": model_service.get_current_model() or ""
+        }
+    else:
+        raise HTTPException(
+            status_code=404,
+            detail=f"Model {request.model_name} not found in cache"
+        )
+
+
+@router.post("/set-current-model")
+async def set_current_model(request: ModelLoadRequest):
+    """Set the current active model"""
+    if not model_service.is_model_loaded(request.model_name):
+        raise HTTPException(
+            status_code=400,
+            detail=f"Model {request.model_name} is not loaded. Please load it first."
+        )
+    
+    model_service.set_current_model(request.model_name)
+    return {
+        "message": f"Current model set to {request.model_name}",
+        "current_model": model_service.get_current_model()
+    }
+
+
+@router.post("/generate", response_model=PromptResponse)
+async def generate_text(request: PromptRequest):
+    """Generate text using the loaded model"""
+    # Use the model specified in request, or fall back to current model
+    model_to_use = request.model_name if request.model_name else model_service.get_current_model()
+    
+    if not model_to_use:
+        raise HTTPException(
+            status_code=400,
+            detail="No model specified. Please load a model first."
+        )
+    
+    if not model_service.is_model_loaded(model_to_use):
+        raise HTTPException(
+            status_code=400,
+            detail=f"Model {model_to_use} is not loaded. Please load it first."
+        )
+    
+    try:
+        thinking_content, final_content, model_used, supports_thinking = chat_service.generate_response(
+            prompt=request.prompt,
+            model_name=model_to_use,
+            system_prompt=request.system_prompt,
+            temperature=request.temperature,
+            max_new_tokens=request.max_new_tokens
+        )
+        
+        return PromptResponse(
+            thinking_content=thinking_content,
+            content=final_content,
+            model_used=model_used,
+            supports_thinking=supports_thinking
+        )
+        
+    except Exception as e:
+        print(f"Generation error: {e}")
+        raise HTTPException(status_code=500, detail=f"Generation failed: {str(e)}")

backend/app.py

@@ -0,0 +1,243 @@
+from fastapi import FastAPI, HTTPException
+from fastapi.middleware.cors import CORSMiddleware
+from pydantic import BaseModel
+from transformers import AutoModelForCausalLM, AutoTokenizer
+import torch
+from typing import Optional, Dict, Any
+
+app = FastAPI(title="Edge LLM API")
+
+# Enable CORS for frontend
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["http://localhost:5173", "http://localhost:5174"],  # Vite ports
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+# Available models
+AVAILABLE_MODELS = {
+    "Qwen/Qwen3-4B-Thinking-2507": {
+        "name": "Qwen3-4B-Thinking-2507",
+        "supports_thinking": True,
+        "description": "Shows thinking process",
+        "size_gb": "~8GB"
+    },
+    "Qwen/Qwen3-4B-Instruct-2507": {
+        "name": "Qwen3-4B-Instruct-2507",
+        "supports_thinking": False,
+        "description": "Direct instruction following",
+        "size_gb": "~8GB"
+    }
+}
+
+# Global model cache
+models_cache: Dict[str, Dict[str, Any]] = {}
+current_model_name = None  # No model loaded by default
+
+class PromptRequest(BaseModel):
+    prompt: str
+    system_prompt: Optional[str] = None
+    model_name: Optional[str] = None
+    temperature: Optional[float] = 0.7
+    max_new_tokens: Optional[int] = 1024
+
+class PromptResponse(BaseModel):
+    thinking_content: str
+    content: str
+    model_used: str
+    supports_thinking: bool
+
+class ModelInfo(BaseModel):
+    model_name: str
+    name: str
+    supports_thinking: bool
+    description: str
+    size_gb: str
+    is_loaded: bool
+
+class ModelLoadRequest(BaseModel):
+    model_name: str
+
+class ModelUnloadRequest(BaseModel):
+    model_name: str
+
+async def load_model_by_name(model_name: str):
+    """Load a specific model and cache it (without setting as current)"""
+    global models_cache
+    
+    if model_name not in AVAILABLE_MODELS:
+        raise HTTPException(status_code=400, detail=f"Model {model_name} not available")
+    
+    if model_name not in models_cache:
+        print(f"Loading model: {model_name}...")
+        tokenizer = AutoTokenizer.from_pretrained(model_name)
+        model = AutoModelForCausalLM.from_pretrained(
+            model_name,
+            torch_dtype="auto",
+            device_map="auto"
+        )
+        models_cache[model_name] = {
+            "model": model,
+            "tokenizer": tokenizer
+        }
+        print(f"Model {model_name} loaded successfully!")
+    
+    return models_cache[model_name]
+
+def unload_model_by_name(model_name: str):
+    """Unload a specific model from cache"""
+    global models_cache, current_model_name
+    
+    if model_name in models_cache:
+        del models_cache[model_name]
+        print(f"Model {model_name} unloaded from cache")
+        
+        # If current model was unloaded, reset current model
+        if current_model_name == model_name:
+            current_model_name = None
+
+@app.on_event("startup")
+async def startup_event():
+    """Startup without loading any models"""
+    print("Backend started. Models will be loaded on demand.")
+
+@app.get("/")
+async def root():
+    return {"message": "Edge LLM API is running"}
+
+@app.get("/models")
+async def get_available_models():
+    """Get list of available models with their status"""
+    models_info = []
+    for model_name, info in AVAILABLE_MODELS.items():
+        models_info.append(ModelInfo(
+            model_name=model_name,
+            name=info["name"],
+            supports_thinking=info["supports_thinking"],
+            description=info["description"],
+            size_gb=info["size_gb"],
+            is_loaded=model_name in models_cache
+        ))
+    return {
+        "models": models_info,
+        "current_model": current_model_name
+    }
+
+@app.post("/load-model")
+async def load_model(request: ModelLoadRequest):
+    """Load a model into memory"""
+    try:
+        model_data = await load_model_by_name(request.model_name)
+        return {
+            "message": f"Model loaded: {request.model_name}",
+            "model_name": request.model_name,
+            "supports_thinking": AVAILABLE_MODELS[request.model_name]["supports_thinking"]
+        }
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+@app.post("/unload-model")
+async def unload_model(request: ModelUnloadRequest):
+    """Unload a model from memory"""
+    try:
+        unload_model_by_name(request.model_name)
+        return {
+            "message": f"Model unloaded: {request.model_name}",
+            "model_name": request.model_name
+        }
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+@app.post("/set-current-model")
+async def set_current_model(request: ModelLoadRequest):
+    """Set the current active model (must be loaded first)"""
+    global current_model_name
+    
+    if request.model_name not in models_cache:
+        raise HTTPException(status_code=400, detail=f"Model {request.model_name} is not loaded. Please load it first.")
+    
+    current_model_name = request.model_name
+    return {
+        "message": f"Current model set to: {request.model_name}",
+        "model_name": request.model_name,
+        "supports_thinking": AVAILABLE_MODELS[request.model_name]["supports_thinking"]
+    }
+
+@app.post("/generate", response_model=PromptResponse)
+async def generate_response(request: PromptRequest):
+    global current_model_name
+    
+    # Determine which model to use
+    target_model = request.model_name if request.model_name else current_model_name
+    
+    if not target_model:
+        raise HTTPException(status_code=400, detail="No model specified and no current model set")
+    
+    # Check if the target model is loaded
+    if target_model not in models_cache:
+        raise HTTPException(
+            status_code=400, 
+            detail=f"Model {target_model} is not loaded. Please load the model first using the load button."
+        )
+    
+    # Set as current model if it's different
+    if target_model != current_model_name:
+        current_model_name = target_model
+    
+    # Get model and tokenizer
+    model_data = models_cache[current_model_name]
+    model = model_data["model"]
+    tokenizer = model_data["tokenizer"]
+    supports_thinking = AVAILABLE_MODELS[current_model_name]["supports_thinking"]
+    
+    # Prepare the model input with optional system prompt
+    messages = []
+    if request.system_prompt:
+        messages.append({"role": "system", "content": request.system_prompt})
+    messages.append({"role": "user", "content": request.prompt})
+    
+    text = tokenizer.apply_chat_template(
+        messages,
+        tokenize=False,
+        add_generation_prompt=True,
+    )
+    model_inputs = tokenizer([text], return_tensors="pt").to(model.device)
+    
+    # Generate response with parameters
+    generated_ids = model.generate(
+        **model_inputs,
+        max_new_tokens=request.max_new_tokens,
+        temperature=request.temperature,
+        do_sample=True if request.temperature > 0 else False,
+        pad_token_id=tokenizer.eos_token_id
+    )
+    output_ids = generated_ids[0][len(model_inputs.input_ids[0]):].tolist()
+    
+    thinking_content = ""
+    content = ""
+    
+    if supports_thinking:
+        # Parse thinking content for thinking models
+        try:
+            index = len(output_ids) - output_ids[::-1].index(151668)
+        except ValueError:
+            index = 0
+        
+        thinking_content = tokenizer.decode(output_ids[:index], skip_special_tokens=True).strip("\n")
+        content = tokenizer.decode(output_ids[index:], skip_special_tokens=True).strip("\n")
+    else:
+        # For non-thinking models, everything is content
+        content = tokenizer.decode(output_ids, skip_special_tokens=True).strip("\n")
+    
+    return PromptResponse(
+        thinking_content=thinking_content,
+        content=content,
+        model_used=current_model_name,
+        supports_thinking=supports_thinking
+    )
+
+if __name__ == "__main__":
+    import uvicorn
+    uvicorn.run("app:app", host="0.0.0.0", port=8000, reload=False)

backend/config.py

@@ -0,0 +1,30 @@
+"""
+Configuration settings for the Edge LLM API
+"""
+
+# Available models configuration
+AVAILABLE_MODELS = {
+    "Qwen/Qwen3-4B-Thinking-2507": {
+        "name": "Qwen3-4B-Thinking-2507",
+        "supports_thinking": True,
+        "description": "Shows thinking process",
+        "size_gb": "~8GB"
+    },
+    "Qwen/Qwen3-4B-Instruct-2507": {
+        "name": "Qwen3-4B-Instruct-2507",
+        "supports_thinking": False,
+        "description": "Direct instruction following",
+        "size_gb": "~8GB"
+    }
+}
+
+# CORS settings
+CORS_ORIGINS = ["*"]  # Allow all origins for HF Space
+
+# Static files directory
+STATIC_DIR = "static"
+ASSETS_DIR = "static/assets"
+
+# Server settings
+HOST = "0.0.0.0"
+PORT = 7860

backend/main.py

@@ -0,0 +1,40 @@
+"""
+Main FastAPI application
+"""
+from fastapi import FastAPI
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.staticfiles import StaticFiles
+from .api.routes import router
+from .config import CORS_ORIGINS, ASSETS_DIR
+
+
+def create_app() -> FastAPI:
+    """Create and configure the FastAPI application"""
+    app = FastAPI(title="Edge LLM API")
+    
+    # Enable CORS for Hugging Face Space
+    app.add_middleware(
+        CORSMiddleware,
+        allow_origins=CORS_ORIGINS,
+        allow_credentials=True,
+        allow_methods=["*"],
+        allow_headers=["*"],
+    )
+    
+    # Mount static files
+    app.mount("/assets", StaticFiles(directory=ASSETS_DIR), name="assets")
+    
+    # Include API routes
+    app.include_router(router)
+    
+    @app.on_event("startup")
+    async def startup_event():
+        """Startup event - don't load models by default"""
+        print("🚀 Edge LLM API is starting up...")
+        print("💡 Models will be loaded on demand")
+    
+    return app
+
+
+# Create the app instance
+app = create_app()

backend/models.py

@@ -0,0 +1,42 @@
+"""
+Pydantic models for API requests and responses
+"""
+from pydantic import BaseModel
+from typing import Optional, List
+
+
+class PromptRequest(BaseModel):
+    prompt: str
+    system_prompt: Optional[str] = None
+    model_name: Optional[str] = None
+    temperature: Optional[float] = 0.7
+    max_new_tokens: Optional[int] = 1024
+
+
+class PromptResponse(BaseModel):
+    thinking_content: str
+    content: str
+    model_used: str
+    supports_thinking: bool
+
+
+class ModelInfo(BaseModel):
+    model_name: str
+    name: str
+    supports_thinking: bool
+    description: str
+    size_gb: str
+    is_loaded: bool
+
+
+class ModelsResponse(BaseModel):
+    models: List[ModelInfo]
+    current_model: str
+
+
+class ModelLoadRequest(BaseModel):
+    model_name: str
+
+
+class ModelUnloadRequest(BaseModel):
+    model_name: str

backend/services/__init__.py

@@ -0,0 +1 @@
+# Services module

backend/services/chat_service.py

@@ -0,0 +1,85 @@
+"""
+Chat generation service
+"""
+import torch
+from typing import Tuple
+from .model_service import model_service
+from ..config import AVAILABLE_MODELS
+
+
+class ChatService:
+    
+    @staticmethod
+    def generate_response(
+        prompt: str,
+        model_name: str,
+        system_prompt: str = None,
+        temperature: float = 0.7,
+        max_new_tokens: int = 1024
+    ) -> Tuple[str, str, str, bool]:
+        """
+        Generate chat response
+        Returns: (thinking_content, final_content, model_used, supports_thinking)
+        """
+        if not model_service.is_model_loaded(model_name):
+            raise ValueError(f"Model {model_name} is not loaded")
+        
+        # Get model and tokenizer
+        model_data = model_service.models_cache[model_name]
+        model = model_data["model"]
+        tokenizer = model_data["tokenizer"]
+        model_info = AVAILABLE_MODELS[model_name]
+        
+        # Build the prompt
+        messages = []
+        if system_prompt:
+            messages.append({"role": "system", "content": system_prompt})
+        messages.append({"role": "user", "content": prompt})
+        
+        # Apply chat template
+        formatted_prompt = tokenizer.apply_chat_template(
+            messages, 
+            tokenize=False, 
+            add_generation_prompt=True
+        )
+        
+        # Tokenize
+        inputs = tokenizer(formatted_prompt, return_tensors="pt").to(model.device)
+        
+        # Generate
+        with torch.no_grad():
+            outputs = model.generate(
+                **inputs,
+                max_new_tokens=max_new_tokens,
+                temperature=temperature,
+                do_sample=True,
+                pad_token_id=tokenizer.eos_token_id
+            )
+        
+        # Decode
+        generated_tokens = outputs[0][inputs['input_ids'].shape[1]:]
+        generated_text = tokenizer.decode(generated_tokens, skip_special_tokens=True)
+        
+        # Parse thinking vs final content for thinking models
+        thinking_content = ""
+        final_content = generated_text
+        
+        if model_info["supports_thinking"] and "<thinking>" in generated_text:
+            parts = generated_text.split("<thinking>")
+            if len(parts) > 1:
+                thinking_part = parts[1]
+                if "</thinking>" in thinking_part:
+                    thinking_content = thinking_part.split("</thinking>")[0].strip()
+                    remaining = thinking_part.split("</thinking>", 1)[1] if "</thinking>" in thinking_part else ""
+                    final_content = remaining.strip()
+        
+        return (
+            thinking_content,
+            final_content, 
+            model_name,
+            model_info["supports_thinking"]
+        )
+
+
+# Global chat service instance
+chat_service = ChatService()

backend/services/model_service.py

@@ -0,0 +1,77 @@
+"""
+Model loading and management service
+"""
+import torch
+from transformers import AutoModelForCausalLM, AutoTokenizer
+from typing import Dict, Any, Optional
+from ..config import AVAILABLE_MODELS
+
+
+class ModelService:
+    def __init__(self):
+        self.models_cache: Dict[str, Dict[str, Any]] = {}
+        self.current_model_name: Optional[str] = None
+
+    def load_model(self, model_name: str) -> bool:
+        """Load a model into the cache"""
+        if model_name in self.models_cache:
+            return True
+        
+        if model_name not in AVAILABLE_MODELS:
+            return False
+        
+        try:
+            print(f"Loading model: {model_name}")
+            tokenizer = AutoTokenizer.from_pretrained(model_name)
+            model = AutoModelForCausalLM.from_pretrained(
+                model_name,
+                torch_dtype=torch.float16,
+                device_map="auto"
+            )
+            
+            self.models_cache[model_name] = {
+                "model": model,
+                "tokenizer": tokenizer
+            }
+            print(f"Model {model_name} loaded successfully")
+            return True
+        except Exception as e:
+            print(f"Error loading model {model_name}: {e}")
+            return False
+
+    def unload_model(self, model_name: str) -> bool:
+        """Unload a model from the cache"""
+        if model_name in self.models_cache:
+            del self.models_cache[model_name]
+            if self.current_model_name == model_name:
+                self.current_model_name = None
+            print(f"Model {model_name} unloaded")
+            return True
+        return False
+
+    def set_current_model(self, model_name: str) -> bool:
+        """Set the current active model"""
+        if model_name in self.models_cache:
+            self.current_model_name = model_name
+            return True
+        return False
+
+    def get_model_info(self, model_name: str) -> Dict[str, Any]:
+        """Get model configuration info"""
+        return AVAILABLE_MODELS.get(model_name, {})
+
+    def is_model_loaded(self, model_name: str) -> bool:
+        """Check if a model is loaded"""
+        return model_name in self.models_cache
+
+    def get_loaded_models(self) -> list:
+        """Get list of currently loaded models"""
+        return list(self.models_cache.keys())
+
+    def get_current_model(self) -> Optional[str]:
+        """Get the current active model"""
+        return self.current_model_name
+
+
+# Global model service instance
+model_service = ModelService()

frontend/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Edge LLM Platform</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

frontend/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "edge-llm-frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@radix-ui/react-alert-dialog": "^1.1.15",
+    "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-label": "^2.1.7",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-slider": "^1.3.6",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@tailwindcss/typography": "^0.5.16",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.263.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-markdown": "^10.1.0",
+    "react-router-dom": "^6.15.0",
+    "tailwind-merge": "^1.14.0",
+    "tailwindcss-animate": "^1.0.7"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "^18.2.7",
+    "@vitejs/plugin-react": "^4.0.3",
+    "autoprefixer": "^10.4.14",
+    "postcss": "^8.4.24",
+    "tailwindcss": "^3.3.0",
+    "typescript": "^5.0.2",
+    "vite": "^4.4.5"
+  }
+}

frontend/postcss.config.js

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

frontend/src/App.tsx

@@ -0,0 +1,24 @@
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
+import { Layout } from './components/Layout'
+import { Home } from './pages/Home'
+import { Playground } from './pages/Playground'
+import { Models } from './pages/Models'
+import { Settings } from './pages/Settings'
+
+function App() {
+  return (
+    <Router>
+      <Routes>
+        <Route path="/" element={<Layout />}>
+          <Route index element={<Home />} />
+          <Route path="playground" element={<Playground />} />
+          <Route path="models" element={<Models />} />
+          <Route path="settings" element={<Settings />} />
+        </Route>
+      </Routes>
+    </Router>
+  )
+}
+
+export default App
+

frontend/src/components/Sidebar.tsx

@@ -0,0 +1,153 @@
+import { Link, useLocation } from 'react-router-dom'
+import { cn } from '@/lib/utils'
+import { 
+  Home, 
+  BookOpen, 
+  MessageSquare, 
+  Bot, 
+  Zap,
+  Settings,
+  Brain
+} from 'lucide-react'
+
+const navigation = [
+  {
+    name: 'Home',
+    href: '/',
+    icon: Home,
+    description: 'Overview and getting started'
+  },
+  {
+    name: 'Chat Playground',
+    href: '/playground',
+    icon: MessageSquare,
+    description: 'AI chatbot with conversation history'
+  },
+  {
+    name: 'Model Catalog',
+    href: '/models',
+    icon: BookOpen,
+    description: 'Browse and manage models'
+  },
+  {
+    name: 'Assistants',
+    href: '/assistants',
+    icon: Bot,
+    description: 'Custom AI assistants',
+    badge: 'Preview'
+  }
+]
+
+const tools = [
+  {
+    name: 'Completions',
+    href: '/completions',
+    icon: Zap,
+    description: 'Text completion endpoint'
+  },
+  {
+    name: 'Fine-tuning',
+    href: '/fine-tuning',
+    icon: Brain,
+    description: 'Train custom models'
+  },
+  {
+    name: 'Settings',
+    href: '/settings',
+    icon: Settings,
+    description: 'Application settings'
+  }
+]
+
+export function Sidebar() {
+  const location = useLocation()
+
+  return (
+    <div className="flex flex-col h-full bg-muted/30 border-r">
+      {/* Logo/Brand */}
+      <div className="flex items-center h-16 px-6 border-b">
+        <div className="flex items-center gap-2">
+          <div className="w-8 h-8 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center">
+            <Brain className="w-5 h-5 text-white" />
+          </div>
+          <div>
+            <h1 className="text-lg font-semibold">Edge LLM</h1>
+            <p className="text-xs text-muted-foreground">Local AI Platform</p>
+          </div>
+        </div>
+      </div>
+
+      {/* Navigation */}
+      <div className="flex-1 overflow-y-auto py-4">
+        <div className="px-3 mb-4">
+          <h2 className="mb-2 px-3 text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+            Get started
+          </h2>
+          <nav className="space-y-1">
+            {navigation.map((item) => {
+              const isActive = location.pathname === item.href
+              return (
+                <Link
+                  key={item.name}
+                  to={item.href}
+                  className={cn(
+                    'flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition-all hover:bg-accent',
+                    isActive 
+                      ? 'bg-accent text-accent-foreground font-medium' 
+                      : 'text-muted-foreground hover:text-foreground'
+                  )}
+                >
+                  <item.icon className="h-4 w-4" />
+                  <div className="flex-1">
+                    <div className="flex items-center gap-2">
+                      {item.name}
+                      {item.badge && (
+                        <span className="px-1.5 py-0.5 text-xs bg-blue-100 text-blue-700 rounded-full">
+                          {item.badge}
+                        </span>
+                      )}
+                    </div>
+                  </div>
+                </Link>
+              )
+            })}
+          </nav>
+        </div>
+
+        <div className="px-3">
+          <h2 className="mb-2 px-3 text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+            Tools
+          </h2>
+          <nav className="space-y-1">
+            {tools.map((item) => {
+              const isActive = location.pathname === item.href
+              return (
+                <Link
+                  key={item.name}
+                  to={item.href}
+                  className={cn(
+                    'flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition-all hover:bg-accent',
+                    isActive 
+                      ? 'bg-accent text-accent-foreground font-medium' 
+                      : 'text-muted-foreground hover:text-foreground'
+                  )}
+                >
+                  <item.icon className="h-4 w-4" />
+                  {item.name}
+                </Link>
+              )
+            })}
+          </nav>
+        </div>
+      </div>
+
+      {/* Footer */}
+      <div className="border-t p-4">
+        <div className="text-xs text-muted-foreground">
+          <p className="mb-1">Local Model Platform</p>
+          <p>Privacy-focused AI</p>
+        </div>
+      </div>
+    </div>
+  )
+}

frontend/src/components/chat/ChatContainer.tsx

@@ -0,0 +1,113 @@
+import { useEffect, useRef } from 'react'
+import { ChatMessage } from './ChatMessage'
+import { ChatInput } from './ChatInput'
+import { Message } from '@/types/chat'
+import { Loader2 } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+interface ChatContainerProps {
+  messages: Message[]
+  input: string
+  onInputChange: (value: string) => void
+  onSubmit: () => void
+  onStop?: () => void
+  isLoading?: boolean
+  disabled?: boolean
+  className?: string
+  placeholder?: string
+}
+
+export function ChatContainer({
+  messages,
+  input,
+  onInputChange,
+  onSubmit,
+  onStop,
+  isLoading = false,
+  disabled = false,
+  className,
+  placeholder = "Ask me anything..."
+}: ChatContainerProps) {
+  const messagesEndRef = useRef<HTMLDivElement>(null)
+  const messagesContainerRef = useRef<HTMLDivElement>(null)
+
+  // Auto-scroll to bottom when new messages arrive
+  useEffect(() => {
+    if (messagesEndRef.current) {
+      messagesEndRef.current.scrollIntoView({ behavior: 'smooth' })
+    }
+  }, [messages, isLoading])
+
+  const handleCopyMessage = (content: string) => {
+    navigator.clipboard.writeText(content)
+    // Could add a toast notification here
+  }
+
+  return (
+    <div className={cn("flex flex-col h-full", className)}>
+      {/* Messages Area */}
+      <div 
+        ref={messagesContainerRef}
+        className="flex-1 overflow-y-auto p-4 space-y-4"
+      >
+        {messages.length === 0 ? (
+          <div className="flex-1 flex items-center justify-center text-center">
+            <div className="max-w-md space-y-4">
+              <div className="text-muted-foreground">
+                <h3 className="text-lg font-medium">Start a conversation</h3>
+                <p className="text-sm">
+                  Ask me anything! I can help with coding, writing, analysis, and more.
+                </p>
+              </div>
+            </div>
+          </div>
+        ) : (
+          <>
+            {messages.map((message) => (
+              <div key={message.id} className="group">
+                <ChatMessage
+                  message={message}
+                  onCopy={handleCopyMessage}
+                />
+              </div>
+            ))}
+            
+            {/* Loading indicator */}
+            {isLoading && (
+              <div className="flex gap-3 mb-4">
+                {/* Assistant avatar */}
+                <div className="flex-shrink-0 w-8 h-8 rounded-full bg-muted border flex items-center justify-center">
+                  <Loader2 className="h-4 w-4 animate-spin" />
+                </div>
+                
+                {/* Loading message */}
+                <div className="flex-1 max-w-[80%]">
+                  <div className="bg-muted/50 rounded-lg p-3">
+                    <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                      <Loader2 className="h-4 w-4 animate-spin" />
+                      <span>Thinking...</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            )}
+          </>
+        )}
+        
+        {/* Scroll anchor */}
+        <div ref={messagesEndRef} />
+      </div>
+
+      {/* Input Area */}
+      <ChatInput
+        value={input}
+        onChange={onInputChange}
+        onSubmit={onSubmit}
+        onStop={onStop}
+        isLoading={isLoading}
+        disabled={disabled}
+        placeholder={placeholder}
+      />
+    </div>
+  )
+}

frontend/src/components/chat/ChatInput.tsx

@@ -0,0 +1,138 @@
+import { useState, useRef, useEffect } from 'react'
+import { Button } from '@/components/ui/button'
+import { Textarea } from '@/components/ui/textarea'
+import { 
+  Send, 
+  Square, 
+  Paperclip 
+} from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+interface ChatInputProps {
+  value: string
+  onChange: (value: string) => void
+  onSubmit: () => void
+  onStop?: () => void
+  isLoading?: boolean
+  disabled?: boolean
+  placeholder?: string
+  maxRows?: number
+}
+
+export function ChatInput({
+  value,
+  onChange,
+  onSubmit,
+  onStop,
+  isLoading = false,
+  disabled = false,
+  placeholder = "Type your message...",
+  maxRows = 6
+}: ChatInputProps) {
+  const textareaRef = useRef<HTMLTextAreaElement>(null)
+  const [rows, setRows] = useState(1)
+
+  // Auto-resize textarea
+  useEffect(() => {
+    if (textareaRef.current) {
+      textareaRef.current.style.height = 'auto'
+      const scrollHeight = textareaRef.current.scrollHeight
+      const rowHeight = 24 // Approximate line height
+      const newRows = Math.min(Math.max(Math.ceil(scrollHeight / rowHeight), 1), maxRows)
+      setRows(newRows)
+    }
+  }, [value, maxRows])
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault()
+      if (!isLoading && value.trim() && !disabled) {
+        onSubmit()
+      }
+    }
+  }
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!isLoading && value.trim() && !disabled) {
+      onSubmit()
+    }
+  }
+
+  const canSend = value.trim() && !disabled && !isLoading
+
+  return (
+    <div className="border-t bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+      <div className="p-4">
+        <form onSubmit={handleSubmit} className="space-y-3">
+          {/* Main input area */}
+          <div className="relative flex items-end gap-2">
+            <div className="flex-1 relative">
+              <Textarea
+                ref={textareaRef}
+                value={value}
+                onChange={(e) => onChange(e.target.value)}
+                onKeyDown={handleKeyDown}
+                placeholder={placeholder}
+                disabled={disabled}
+                rows={rows}
+                className={cn(
+                  "min-h-[40px] max-h-[150px] resize-none pr-12",
+                  "focus:ring-2 focus:ring-blue-500 focus:border-blue-500",
+                  "placeholder:text-muted-foreground"
+                )}
+                style={{
+                  lineHeight: '1.5',
+                }}
+              />
+              
+              {/* Attachment button (placeholder) */}
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                className="absolute right-2 bottom-2 h-6 w-6 p-0 text-muted-foreground hover:text-foreground"
+                disabled={disabled}
+              >
+                <Paperclip className="h-4 w-4" />
+              </Button>
+            </div>
+
+            {/* Send/Stop button */}
+            {isLoading ? (
+              <Button
+                type="button"
+                variant="destructive"
+                size="sm"
+                onClick={onStop}
+                className="h-10 w-10 p-0"
+              >
+                <Square className="h-4 w-4" />
+              </Button>
+            ) : (
+              <Button
+                type="submit"
+                size="sm"
+                disabled={!canSend}
+                className={cn(
+                  "h-10 w-10 p-0 transition-colors",
+                  canSend 
+                    ? "bg-blue-500 hover:bg-blue-600 text-white" 
+                    : "bg-muted text-muted-foreground"
+                )}
+              >
+                <Send className="h-4 w-4" />
+              </Button>
+            )}
+          </div>
+
+          {/* Helper text */}
+          <div className="flex items-center justify-between text-xs text-muted-foreground">
+            <span>Press Enter to send, Shift+Enter for new line</span>
+            <span>{value.length} characters</span>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}

frontend/src/components/chat/ChatMessage.tsx

@@ -0,0 +1,192 @@
+import { useState } from 'react'
+import { Card, CardContent } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+import { Message } from '@/types/chat'
+import ReactMarkdown from 'react-markdown'
+import { 
+  Copy, 
+  User, 
+  Bot, 
+  Brain, 
+  Zap, 
+  ChevronDown, 
+  ChevronUp,
+  MessageSquare
+} from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+interface ChatMessageProps {
+  message: Message
+  onCopy?: (content: string) => void
+}
+
+export function ChatMessage({ message, onCopy }: ChatMessageProps) {
+  const [showThinking, setShowThinking] = useState(false)
+  const isUser = message.role === 'user'
+  const isSystem = message.role === 'system'
+
+  const handleCopy = () => {
+    if (onCopy) {
+      onCopy(message.content)
+    } else {
+      navigator.clipboard.writeText(message.content)
+    }
+  }
+
+  const formatTime = (timestamp: number) => {
+    return new Date(timestamp).toLocaleTimeString([], { 
+      hour: '2-digit', 
+      minute: '2-digit' 
+    })
+  }
+
+  if (isSystem) {
+    return (
+      <div className="flex justify-center my-4">
+        <Badge variant="outline" className="text-xs">
+          <MessageSquare className="h-3 w-3 mr-1" />
+          System prompt set
+        </Badge>
+      </div>
+    )
+  }
+
+  return (
+    <div className={cn(
+      "flex gap-3 mb-4",
+      isUser ? "flex-row-reverse" : "flex-row"
+    )}>
+      {/* Avatar */}
+      <div className={cn(
+        "flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center",
+        isUser 
+          ? "bg-blue-500 text-white" 
+          : "bg-muted border"
+      )}>
+        {isUser ? (
+          <User className="h-4 w-4" />
+        ) : message.supports_thinking ? (
+          <Brain className="h-4 w-4" />
+        ) : (
+          <Bot className="h-4 w-4" />
+        )}
+      </div>
+
+      {/* Message Content */}
+      <div className={cn(
+        "flex-1 max-w-[80%] space-y-2",
+        isUser ? "items-end" : "items-start"
+      )}>
+        {/* Message Bubble */}
+        <Card className={cn(
+          "relative",
+          isUser 
+            ? "bg-blue-500 text-white border-blue-500" 
+            : "bg-muted/50"
+        )}>
+          <CardContent className="p-3">
+            {/* Model info for assistant messages */}
+            {!isUser && message.model_used && (
+              <div className="flex items-center gap-2 mb-2 text-xs text-muted-foreground">
+                {message.supports_thinking ? <Brain className="h-3 w-3" /> : <Zap className="h-3 w-3" />}
+                <span>{message.model_used}</span>
+                <Badge variant="secondary" className="text-xs">
+                  {message.supports_thinking ? "Thinking" : "Instruct"}
+                </Badge>
+              </div>
+            )}
+
+            {/* Thinking Content Toggle */}
+            {!isUser && message.thinking_content && (
+              <div className="mb-3">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => setShowThinking(!showThinking)}
+                  className="h-auto p-2 text-xs font-normal"
+                >
+                  <Brain className="h-3 w-3 mr-2" />
+                  Thinking Process
+                  {showThinking ? (
+                    <ChevronUp className="h-3 w-3 ml-2" />
+                  ) : (
+                    <ChevronDown className="h-3 w-3 ml-2" />
+                  )}
+                </Button>
+                
+                {showThinking && (
+                  <Card className="mt-2 bg-background/50">
+                    <CardContent className="p-3">
+                      <pre className="text-xs font-mono whitespace-pre-wrap text-muted-foreground">
+                        {message.thinking_content}
+                      </pre>
+                    </CardContent>
+                  </Card>
+                )}
+              </div>
+            )}
+
+            {/* Main Message Content */}
+            <div className="text-sm">
+              {isUser ? (
+                <div className="whitespace-pre-wrap">{message.content}</div>
+              ) : (
+                <div className="prose prose-sm max-w-none dark:prose-invert
+                  prose-headings:font-semibold prose-headings:text-foreground
+                  prose-p:text-foreground prose-p:leading-relaxed
+                  prose-strong:text-foreground prose-strong:font-semibold
+                  prose-em:text-muted-foreground
+                  prose-code:bg-muted prose-code:px-1 prose-code:py-0.5 prose-code:rounded prose-code:text-sm
+                  prose-pre:bg-muted prose-pre:border prose-pre:rounded-md
+                  prose-ul:text-foreground prose-ol:text-foreground
+                  prose-li:text-foreground
+                  prose-blockquote:border-l-muted-foreground prose-blockquote:text-muted-foreground">
+                  <ReactMarkdown 
+                    components={{
+                      // Custom component for better styling
+                      h1: ({children}) => <h1 className="text-lg font-bold mb-2 text-foreground">{children}</h1>,
+                      h2: ({children}) => <h2 className="text-base font-semibold mb-2 text-foreground">{children}</h2>,
+                      h3: ({children}) => <h3 className="text-sm font-semibold mb-1 text-foreground">{children}</h3>,
+                      p: ({children}) => <p className="mb-2 last:mb-0 text-foreground leading-relaxed">{children}</p>,
+                      strong: ({children}) => <strong className="font-semibold text-foreground">{children}</strong>,
+                      em: ({children}) => <em className="italic text-muted-foreground">{children}</em>,
+                      code: ({children}) => <code className="bg-muted px-1 py-0.5 rounded text-xs font-mono">{children}</code>,
+                      ul: ({children}) => <ul className="mb-2 space-y-1 text-foreground">{children}</ul>,
+                      ol: ({children}) => <ol className="mb-2 space-y-1 text-foreground">{children}</ol>,
+                      li: ({children}) => <li className="text-foreground">{children}</li>,
+                    }}
+                  >
+                    {message.content}
+                  </ReactMarkdown>
+                </div>
+              )}
+            </div>
+          </CardContent>
+
+          {/* Message Actions */}
+          {!isUser && (
+            <div className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity">
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={handleCopy}
+                className="h-6 w-6 p-0"
+              >
+                <Copy className="h-3 w-3" />
+              </Button>
+            </div>
+          )}
+        </Card>
+
+        {/* Timestamp */}
+        <div className={cn(
+          "text-xs text-muted-foreground px-1",
+          isUser ? "text-right" : "text-left"
+        )}>
+          {formatTime(message.timestamp)}
+        </div>
+      </div>
+    </div>
+  )
+}

frontend/src/components/chat/ChatSessions.tsx

@@ -0,0 +1,213 @@
+import { useState } from 'react'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
+import { 
+  Plus, 
+  MessageSquare, 
+  Trash2, 
+  Edit3,
+  Calendar
+} from 'lucide-react'
+import { ChatSession } from '@/types/chat'
+import { cn } from '@/lib/utils'
+
+interface ChatSessionsProps {
+  sessions: ChatSession[]
+  currentSessionId: string | null
+  onSelectSession: (sessionId: string) => void
+  onNewSession: () => void
+  onDeleteSession: (sessionId: string) => void
+  onRenameSession?: (sessionId: string, newTitle: string) => void
+}
+
+export function ChatSessions({
+  sessions,
+  currentSessionId,
+  onSelectSession,
+  onNewSession,
+  onDeleteSession,
+  onRenameSession
+}: ChatSessionsProps) {
+  const [editingSession, setEditingSession] = useState<string | null>(null)
+  const [editTitle, setEditTitle] = useState('')
+
+  const handleStartEdit = (session: ChatSession) => {
+    setEditingSession(session.id)
+    setEditTitle(session.title)
+  }
+
+  const handleSaveEdit = () => {
+    if (editingSession && editTitle.trim() && onRenameSession) {
+      onRenameSession(editingSession, editTitle.trim())
+    }
+    setEditingSession(null)
+    setEditTitle('')
+  }
+
+  const handleCancelEdit = () => {
+    setEditingSession(null)
+    setEditTitle('')
+  }
+
+  const formatDate = (timestamp: number) => {
+    const date = new Date(timestamp)
+    const now = new Date()
+    const diffTime = now.getTime() - date.getTime()
+    const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24))
+    
+    if (diffDays === 0) {
+      return 'Today'
+    } else if (diffDays === 1) {
+      return 'Yesterday'
+    } else if (diffDays < 7) {
+      return `${diffDays} days ago`
+    } else {
+      return date.toLocaleDateString()
+    }
+  }
+
+  const groupedSessions = sessions.reduce((groups, session) => {
+    const date = formatDate(session.updated_at)
+    if (!groups[date]) {
+      groups[date] = []
+    }
+    groups[date].push(session)
+    return groups
+  }, {} as Record<string, ChatSession[]>)
+
+  return (
+    <div className="h-full flex flex-col">
+      {/* Header */}
+      <div className="p-4 border-b">
+        <div className="flex items-center justify-between mb-3">
+          <h2 className="font-semibold text-sm">Chat Sessions</h2>
+          <Button
+            onClick={onNewSession}
+            size="sm"
+            className="h-8 w-8 p-0"
+          >
+            <Plus className="h-4 w-4" />
+          </Button>
+        </div>
+        
+        <Button
+          onClick={onNewSession}
+          variant="outline"
+          className="w-full justify-start"
+          size="sm"
+        >
+          <Plus className="h-4 w-4 mr-2" />
+          New Chat
+        </Button>
+      </div>
+
+      {/* Sessions List */}
+      <div className="flex-1 overflow-y-auto p-2 space-y-4">
+        {Object.keys(groupedSessions).length === 0 ? (
+          <div className="flex flex-col items-center justify-center h-32 text-center">
+            <MessageSquare className="h-8 w-8 text-muted-foreground mb-2" />
+            <p className="text-sm text-muted-foreground">No chat sessions yet</p>
+            <p className="text-xs text-muted-foreground">Start a new conversation</p>
+          </div>
+        ) : (
+          Object.entries(groupedSessions).map(([date, sessionGroup]) => (
+            <div key={date} className="space-y-2">
+              {/* Date Group Header */}
+              <div className="flex items-center gap-2 px-2">
+                <Calendar className="h-3 w-3 text-muted-foreground" />
+                <span className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                  {date}
+                </span>
+              </div>
+              
+              {/* Sessions in this date group */}
+              <div className="space-y-1">
+                {sessionGroup.map((session) => (
+                  <Card
+                    key={session.id}
+                    className={cn(
+                      "cursor-pointer transition-colors hover:bg-accent/50 group",
+                      currentSessionId === session.id && "bg-accent border-primary"
+                    )}
+                    onClick={() => onSelectSession(session.id)}
+                  >
+                    <CardContent className="p-3">
+                      {editingSession === session.id ? (
+                        <div className="space-y-2">
+                          <input
+                            type="text"
+                            value={editTitle}
+                            onChange={(e) => setEditTitle(e.target.value)}
+                            className="w-full text-sm bg-transparent border border-input rounded px-2 py-1"
+                            onKeyDown={(e) => {
+                              if (e.key === 'Enter') handleSaveEdit()
+                              if (e.key === 'Escape') handleCancelEdit()
+                            }}
+                            autoFocus
+                          />
+                          <div className="flex gap-1">
+                            <Button size="sm" onClick={handleSaveEdit} className="h-6 px-2 text-xs">
+                              Save
+                            </Button>
+                            <Button size="sm" variant="outline" onClick={handleCancelEdit} className="h-6 px-2 text-xs">
+                              Cancel
+                            </Button>
+                          </div>
+                        </div>
+                      ) : (
+                        <div className="space-y-2">
+                          <div className="flex items-start justify-between">
+                            <h3 className="text-sm font-medium line-clamp-2 flex-1 mr-2">
+                              {session.title}
+                            </h3>
+                            
+                            <div className="opacity-0 group-hover:opacity-100 transition-opacity flex gap-1">
+                              {onRenameSession && (
+                                <Button
+                                  variant="ghost"
+                                  size="sm"
+                                  onClick={(e) => {
+                                    e.stopPropagation()
+                                    handleStartEdit(session)
+                                  }}
+                                  className="h-6 w-6 p-0"
+                                >
+                                  <Edit3 className="h-3 w-3" />
+                                </Button>
+                              )}
+                              <Button
+                                variant="ghost"
+                                size="sm"
+                                onClick={(e) => {
+                                  e.stopPropagation()
+                                  onDeleteSession(session.id)
+                                }}
+                                className="h-6 w-6 p-0 text-destructive hover:text-destructive"
+                              >
+                                <Trash2 className="h-3 w-3" />
+                              </Button>
+                            </div>
+                          </div>
+                          
+                          <div className="flex items-center justify-between text-xs text-muted-foreground">
+                            <span>{session.messages.length} messages</span>
+                            {session.model_name && (
+                              <Badge variant="outline" className="text-xs">
+                                {session.model_name.split('/').pop()?.split('-')[0]}
+                              </Badge>
+                            )}
+                          </div>
+                        </div>
+                      )}
+                    </CardContent>
+                  </Card>
+                ))}
+              </div>
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  )
+}

frontend/src/components/chat/index.ts

@@ -0,0 +1,4 @@
+export { ChatContainer } from './ChatContainer'
+export { ChatInput } from './ChatInput'
+export { ChatMessage } from './ChatMessage'
+export { ChatSessions } from './ChatSessions'

frontend/src/components/ui/button.tsx

@@ -0,0 +1,57 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }

frontend/src/components/ui/card.tsx

@@ -0,0 +1,76 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-xl border bg-card text-card-foreground shadow",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

frontend/src/components/ui/textarea.tsx

@@ -0,0 +1,22 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Textarea = React.forwardRef<
+  HTMLTextAreaElement,
+  React.ComponentProps<"textarea">
+>(({ className, ...props }, ref) => {
+  return (
+    <textarea
+      className={cn(
+        "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  )
+})
+Textarea.displayName = "Textarea"
+
+export { Textarea }

frontend/src/hooks/useChat.ts

@@ -0,0 +1,257 @@
+import { useState, useEffect, useCallback } from 'react'
+import { Message, ChatSession, MessageStatus } from '@/types/chat'
+import { chatStorage } from '@/lib/chat-storage'
+
+interface UseChatOptions {
+  api_endpoint?: string
+  defaultModel?: string
+  defaultSystemPrompt?: string
+}
+
+interface ApiResponse {
+  thinking_content: string
+  content: string
+  model_used: string
+  supports_thinking: boolean
+}
+
+export function useChat(options: UseChatOptions = {}) {
+  const {
+    api_endpoint = 'http://localhost:8000/generate',
+    defaultModel = 'Qwen/Qwen3-4B-Instruct-2507',
+    defaultSystemPrompt = ''
+  } = options
+
+  // Chat state
+  const [sessions, setSessions] = useState<ChatSession[]>([])
+  const [currentSessionId, setCurrentSessionId] = useState<string | null>(null)
+  const [input, setInput] = useState('')
+  const [status, setStatus] = useState<MessageStatus>({
+    isLoading: false,
+    error: null
+  })
+
+  // Model settings
+  const [selectedModel, setSelectedModel] = useState(defaultModel)
+  const [systemPrompt, setSystemPrompt] = useState(defaultSystemPrompt)
+  const [temperature, setTemperature] = useState(0.7)
+  const [maxTokens, setMaxTokens] = useState(1024)
+
+  // Current session
+  const currentSession = sessions.find(s => s.id === currentSessionId) || null
+  const messages = currentSession?.messages || []
+
+  // Load sessions on mount
+  useEffect(() => {
+    const loadedSessions = chatStorage.getAllSessions()
+    setSessions(loadedSessions)
+    
+    const currentSession = chatStorage.getCurrentSession()
+    if (currentSession) {
+      setCurrentSessionId(currentSession.id)
+    } else if (loadedSessions.length > 0) {
+      setCurrentSessionId(loadedSessions[0].id)
+      chatStorage.setCurrentSession(loadedSessions[0].id)
+    }
+  }, [])
+
+
+
+  // Create new session
+  const createNewSession = useCallback(() => {
+    const newSession = chatStorage.createSession(
+      undefined, // Auto-generate title
+      selectedModel,
+      systemPrompt
+    )
+    
+    // Update React state with all sessions from localStorage
+    setSessions(chatStorage.getAllSessions())
+    setCurrentSessionId(newSession.id)
+    chatStorage.setCurrentSession(newSession.id)
+    
+    return newSession.id
+  }, [selectedModel, systemPrompt])
+
+  // Switch to session
+  const selectSession = useCallback((sessionId: string) => {
+    setCurrentSessionId(sessionId)
+    chatStorage.setCurrentSession(sessionId)
+  }, [])
+
+  // Delete session
+  const deleteSession = useCallback((sessionId: string) => {
+    chatStorage.deleteSession(sessionId)
+    const updatedSessions = chatStorage.getAllSessions()
+    setSessions(updatedSessions)
+    
+    if (currentSessionId === sessionId) {
+      if (updatedSessions.length > 0) {
+        setCurrentSessionId(updatedSessions[0].id)
+        chatStorage.setCurrentSession(updatedSessions[0].id)
+      } else {
+        setCurrentSessionId(null)
+      }
+    }
+  }, [currentSessionId])
+
+  // Rename session
+  const renameSession = useCallback((sessionId: string, newTitle: string) => {
+    chatStorage.updateSession(sessionId, { title: newTitle })
+    setSessions(chatStorage.getAllSessions())
+  }, [])
+
+  // Add message to current session
+  const addMessage = useCallback((message: Omit<Message, 'id' | 'timestamp'>) => {
+    if (!currentSessionId) return
+
+    chatStorage.addMessageToSession(currentSessionId, message)
+    setSessions(chatStorage.getAllSessions())
+  }, [currentSessionId])
+
+  // Send message
+  const sendMessage = useCallback(async () => {
+    if (!input.trim() || status.isLoading) return
+
+    let sessionId = currentSessionId
+
+    // Create new session if none exists
+    if (!sessionId) {
+      sessionId = createNewSession()
+    }
+
+    const userMessage = input.trim()
+    setInput('')
+    setStatus({ isLoading: true, error: null })
+
+    // Add user message directly to the specific session
+    if (sessionId) {
+      chatStorage.addMessageToSession(sessionId, {
+        role: 'user',
+        content: userMessage
+      })
+      setSessions(chatStorage.getAllSessions())
+    }
+
+    // Add system message if system prompt is set
+    // Check actual session messages from storage, not React state
+    const actualSession = chatStorage.getSession(sessionId!)
+    const hasMessages = actualSession?.messages && actualSession.messages.length > 1 // >1 because user message was just added
+    
+    if (systemPrompt && !hasMessages && sessionId) {
+      chatStorage.addMessageToSession(sessionId, {
+        role: 'system',
+        content: systemPrompt
+      })
+      setSessions(chatStorage.getAllSessions())
+    }
+
+    try {
+      const response = await fetch(api_endpoint, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          prompt: userMessage,
+          system_prompt: systemPrompt || null,
+          model_name: selectedModel,
+          temperature,
+          max_new_tokens: maxTokens
+        }),
+      })
+
+      if (!response.ok) {
+        const errorData = await response.json()
+        throw new Error(errorData.detail || `HTTP error! status: ${response.status}`)
+      }
+
+      const data: ApiResponse = await response.json()
+
+      // Add assistant message directly to the specific session
+      if (sessionId) {
+        chatStorage.addMessageToSession(sessionId, {
+          role: 'assistant',
+          content: data.content,
+          thinking_content: data.thinking_content,
+          model_used: data.model_used,
+          supports_thinking: data.supports_thinking
+        })
+        setSessions(chatStorage.getAllSessions())
+      }
+
+      setStatus({ isLoading: false, error: null })
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : 'An error occurred'
+      setStatus({ isLoading: false, error: errorMessage })
+      
+      // Add error message directly to the specific session
+      if (sessionId) {
+        chatStorage.addMessageToSession(sessionId, {
+          role: 'assistant',
+          content: `Sorry, I encountered an error: ${errorMessage}`
+        })
+        setSessions(chatStorage.getAllSessions())
+      }
+    }
+  }, [
+    input,
+    status.isLoading,
+    currentSessionId,
+    createNewSession,
+    addMessage,
+    systemPrompt,
+    messages.length,
+    api_endpoint,
+    selectedModel,
+    temperature,
+    maxTokens
+  ])
+
+  // Stop generation (placeholder for future implementation)
+  const stopGeneration = useCallback(() => {
+    setStatus({ isLoading: false, error: null })
+  }, [])
+
+  // Clear all sessions
+  const clearAllSessions = useCallback(() => {
+    chatStorage.clear()
+    setSessions([])
+    setCurrentSessionId(null)
+  }, [])
+
+  return {
+    // Session management
+    sessions,
+    currentSession,
+    currentSessionId,
+    createNewSession,
+    selectSession,
+    deleteSession,
+    renameSession,
+    clearAllSessions,
+
+    // Messages
+    messages,
+    input,
+    setInput,
+
+    // Chat actions
+    sendMessage,
+    stopGeneration,
+
+    // Status
+    isLoading: status.isLoading,
+    error: status.error,
+
+    // Model settings
+    selectedModel,
+    setSelectedModel,
+    systemPrompt,
+    setSystemPrompt,
+    temperature,
+    setTemperature,
+    maxTokens,
+    setMaxTokens
+  }
+}

frontend/src/index.css

@@ -0,0 +1,138 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  body {
+    @apply bg-gray-50 text-gray-900;
+  }
+  :root {
+
+    --background: 0 0% 100%;
+
+    --foreground: 0 0% 3.9%;
+
+    --card: 0 0% 100%;
+
+    --card-foreground: 0 0% 3.9%;
+
+    --popover: 0 0% 100%;
+
+    --popover-foreground: 0 0% 3.9%;
+
+    --primary: 0 0% 9%;
+
+    --primary-foreground: 0 0% 98%;
+
+    --secondary: 0 0% 96.1%;
+
+    --secondary-foreground: 0 0% 9%;
+
+    --muted: 0 0% 96.1%;
+
+    --muted-foreground: 0 0% 45.1%;
+
+    --accent: 0 0% 96.1%;
+
+    --accent-foreground: 0 0% 9%;
+
+    --destructive: 0 84.2% 60.2%;
+
+    --destructive-foreground: 0 0% 98%;
+
+    --border: 0 0% 89.8%;
+
+    --input: 0 0% 89.8%;
+
+    --ring: 0 0% 3.9%;
+
+    --chart-1: 12 76% 61%;
+
+    --chart-2: 173 58% 39%;
+
+    --chart-3: 197 37% 24%;
+
+    --chart-4: 43 74% 66%;
+
+    --chart-5: 27 87% 67%;
+
+    --radius: 0.5rem
+  }
+  .dark {
+
+    --background: 0 0% 3.9%;
+
+    --foreground: 0 0% 98%;
+
+    --card: 0 0% 3.9%;
+
+    --card-foreground: 0 0% 98%;
+
+    --popover: 0 0% 3.9%;
+
+    --popover-foreground: 0 0% 98%;
+
+    --primary: 0 0% 98%;
+
+    --primary-foreground: 0 0% 9%;
+
+    --secondary: 0 0% 14.9%;
+
+    --secondary-foreground: 0 0% 98%;
+
+    --muted: 0 0% 14.9%;
+
+    --muted-foreground: 0 0% 63.9%;
+
+    --accent: 0 0% 14.9%;
+
+    --accent-foreground: 0 0% 98%;
+
+    --destructive: 0 62.8% 30.6%;
+
+    --destructive-foreground: 0 0% 98%;
+
+    --border: 0 0% 14.9%;
+
+    --input: 0 0% 14.9%;
+
+    --ring: 0 0% 83.1%;
+
+    --chart-1: 220 70% 50%;
+
+    --chart-2: 160 60% 45%;
+
+    --chart-3: 30 80% 55%;
+
+    --chart-4: 280 65% 60%;
+
+    --chart-5: 340 75% 55%
+  }
+}
+
+
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+@layer utilities {
+  .line-clamp-2 {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+  
+  .line-clamp-3 {
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+}

frontend/src/lib/chat-storage.ts

@@ -0,0 +1,132 @@
+import { ChatSession, Message, ChatStore } from '@/types/chat'
+
+const STORAGE_KEY = 'edge-llm-chat-store'
+
+export const chatStorage = {
+  // Load all chat data from localStorage
+  load(): ChatStore {
+    try {
+      const stored = localStorage.getItem(STORAGE_KEY)
+      if (!stored) {
+        return { sessions: [], current_session_id: null }
+      }
+      return JSON.parse(stored)
+    } catch (error) {
+      console.error('Failed to load chat store:', error)
+      return { sessions: [], current_session_id: null }
+    }
+  },
+
+  // Save chat data to localStorage
+  save(store: ChatStore): void {
+    try {
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(store))
+    } catch (error) {
+      console.error('Failed to save chat store:', error)
+    }
+  },
+
+  // Create a new chat session
+  createSession(title?: string, model_name?: string, system_prompt?: string): ChatSession {
+    const now = Date.now()
+    const newSession: ChatSession = {
+      id: `session_${now}_${Math.random().toString(36).substr(2, 9)}`,
+      title: title || `New Chat ${new Date(now).toLocaleDateString()}`,
+      messages: [],
+      created_at: now,
+      updated_at: now,
+      model_name,
+      system_prompt,
+    }
+    
+    // Save the new session to localStorage immediately
+    const store = this.load()
+    store.sessions.unshift(newSession)  // Add to beginning of array
+    this.save(store)
+    
+    return newSession
+  },
+
+  // Add message to session
+  addMessageToSession(sessionId: string, message: Omit<Message, 'id' | 'timestamp'>): void {
+    const store = this.load()
+    const session = store.sessions.find(s => s.id === sessionId)
+    
+    if (session) {
+      const newMessage: Message = {
+        ...message,
+        id: `msg_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
+        timestamp: Date.now(),
+      }
+      
+      session.messages.push(newMessage)
+      session.updated_at = Date.now()
+      
+      // Update session title based on first user message
+      if (session.messages.length === 1 && message.role === 'user') {
+        session.title = message.content.slice(0, 50) + (message.content.length > 50 ? '...' : '')
+      }
+      
+      this.save(store)
+    }
+  },
+
+  // Get session by ID
+  getSession(sessionId: string): ChatSession | null {
+    const store = this.load()
+    return store.sessions.find(s => s.id === sessionId) || null
+  },
+
+  // Update session
+  updateSession(sessionId: string, updates: Partial<ChatSession>): void {
+    const store = this.load()
+    const sessionIndex = store.sessions.findIndex(s => s.id === sessionId)
+    
+    if (sessionIndex !== -1) {
+      store.sessions[sessionIndex] = {
+        ...store.sessions[sessionIndex],
+        ...updates,
+        updated_at: Date.now(),
+      }
+      this.save(store)
+    }
+  },
+
+  // Delete session
+  deleteSession(sessionId: string): void {
+    const store = this.load()
+    store.sessions = store.sessions.filter(s => s.id !== sessionId)
+    
+    // If deleting current session, clear current_session_id
+    if (store.current_session_id === sessionId) {
+      store.current_session_id = store.sessions.length > 0 ? store.sessions[0].id : null
+    }
+    
+    this.save(store)
+  },
+
+  // Set current session
+  setCurrentSession(sessionId: string): void {
+    const store = this.load()
+    store.current_session_id = sessionId
+    this.save(store)
+  },
+
+  // Get current session
+  getCurrentSession(): ChatSession | null {
+    const store = this.load()
+    if (!store.current_session_id) return null
+    return this.getSession(store.current_session_id)
+  },
+
+  // Get all sessions sorted by updated_at
+  getAllSessions(): ChatSession[] {
+    const store = this.load()
+    return store.sessions.sort((a, b) => b.updated_at - a.updated_at)
+  },
+
+  // Clear all data
+  clear(): void {
+    localStorage.removeItem(STORAGE_KEY)
+  },
+}

frontend/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

frontend/src/main.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.tsx'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)

frontend/src/pages/Home.tsx

@@ -0,0 +1,235 @@
+import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+
+import { 
+  Brain, 
+  MessageSquare, 
+  BookOpen, 
+  Zap,
+  Shield,
+  Cpu,
+  ArrowRight,
+  Download
+} from 'lucide-react'
+import { Link } from 'react-router-dom'
+
+const features = [
+  {
+    icon: Brain,
+    title: "Local AI Models",
+    description: "Run powerful language models locally on your machine with full privacy control.",
+    color: "text-blue-500"
+  },
+  {
+    icon: MessageSquare,
+    title: "Interactive Chat",
+    description: "Playground interface for testing prompts and exploring model capabilities.",
+    color: "text-green-500"
+  },
+  {
+    icon: Shield,
+    title: "Privacy First",
+    description: "Your data never leaves your machine. Complete privacy and security guaranteed.",
+    color: "text-purple-500"
+  },
+  {
+    icon: Zap,
+    title: "High Performance",
+    description: "Optimized for speed with model caching and efficient resource management.",
+    color: "text-yellow-500"
+  }
+]
+
+const quickActions = [
+  {
+    title: "Start Chatting",
+    description: "Jump into the playground and start experimenting",
+    href: "/playground",
+    icon: MessageSquare,
+    primary: true
+  },
+  {
+    title: "Browse Models",
+    description: "Explore available models and their capabilities",
+    href: "/models",
+    icon: BookOpen,
+    primary: false
+  },
+  {
+    title: "View Settings",
+    description: "Configure your application preferences",
+    href: "/settings",
+    icon: Cpu,
+    primary: false
+  }
+]
+
+export function Home() {
+  return (
+    <div className="min-h-screen bg-background">
+      {/* Header */}
+      <div className="border-b">
+        <div className="flex h-14 items-center px-6">
+          <div className="flex items-center gap-2">
+            <Brain className="h-5 w-5" />
+            <h1 className="text-lg font-semibold">Home</h1>
+          </div>
+        </div>
+      </div>
+
+      <div className="flex-1 p-6">
+        <div className="max-w-6xl mx-auto space-y-8">
+          
+          {/* Hero Section */}
+          <div className="text-center space-y-4">
+            <div className="inline-flex items-center gap-2 px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-sm">
+              <Cpu className="h-4 w-4" />
+              Local AI Platform
+            </div>
+            <h1 className="text-4xl font-bold tracking-tight">
+              Welcome to Edge LLM
+            </h1>
+            <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
+              A powerful local AI platform for running language models privately on your machine. 
+              Experience the future of AI without compromising your privacy.
+            </p>
+          </div>
+
+          {/* Quick Actions */}
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            {quickActions.map((action) => (
+              <Card key={action.href} className={action.primary ? "ring-2 ring-blue-500" : ""}>
+                <CardContent className="p-6">
+                  <Link to={action.href} className="block space-y-3 group">
+                    <div className="flex items-center justify-between">
+                      <action.icon className={`h-8 w-8 ${action.primary ? 'text-blue-500' : 'text-muted-foreground'}`} />
+                      <ArrowRight className="h-4 w-4 text-muted-foreground group-hover:text-foreground transition-colors" />
+                    </div>
+                    <div>
+                      <h3 className="font-semibold text-lg">{action.title}</h3>
+                      <p className="text-muted-foreground text-sm">{action.description}</p>
+                    </div>
+                  </Link>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+
+          {/* Features Grid */}
+          <div className="space-y-6">
+            <div className="text-center">
+              <h2 className="text-2xl font-bold">Key Features</h2>
+              <p className="text-muted-foreground mt-2">
+                Everything you need for local AI development and experimentation
+              </p>
+            </div>
+            
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+              {features.map((feature, index) => (
+                <Card key={index}>
+                  <CardContent className="p-6 space-y-3">
+                    <feature.icon className={`h-8 w-8 ${feature.color}`} />
+                    <div>
+                      <h3 className="font-semibold">{feature.title}</h3>
+                      <p className="text-sm text-muted-foreground">{feature.description}</p>
+                    </div>
+                  </CardContent>
+                </Card>
+              ))}
+            </div>
+          </div>
+
+          {/* Getting Started */}
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <Download className="h-5 w-5" />
+                Getting Started
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+                <div className="space-y-2">
+                  <div className="flex items-center gap-2">
+                    <div className="w-6 h-6 bg-blue-500 text-white rounded-full flex items-center justify-center text-sm font-medium">
+                      1
+                    </div>
+                    <h4 className="font-medium">Choose a Model</h4>
+                  </div>
+                  <p className="text-sm text-muted-foreground pl-8">
+                    Browse the model catalog and select a model that fits your needs.
+                  </p>
+                </div>
+                
+                <div className="space-y-2">
+                  <div className="flex items-center gap-2">
+                    <div className="w-6 h-6 bg-blue-500 text-white rounded-full flex items-center justify-center text-sm font-medium">
+                      2
+                    </div>
+                    <h4 className="font-medium">Load the Model</h4>
+                  </div>
+                  <p className="text-sm text-muted-foreground pl-8">
+                    Click the load button to download and prepare the model for use.
+                  </p>
+                </div>
+                
+                <div className="space-y-2">
+                  <div className="flex items-center gap-2">
+                    <div className="w-6 h-6 bg-blue-500 text-white rounded-full flex items-center justify-center text-sm font-medium">
+                      3
+                    </div>
+                    <h4 className="font-medium">Start Chatting</h4>
+                  </div>
+                  <p className="text-sm text-muted-foreground pl-8">
+                    Go to the playground and start experimenting with prompts.
+                  </p>
+                </div>
+              </div>
+              
+              <div className="pt-4 border-t">
+                <Link to="/playground">
+                  <Button className="w-full md:w-auto">
+                    <MessageSquare className="h-4 w-4 mr-2" />
+                    Open Playground
+                  </Button>
+                </Link>
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Status */}
+          <Card>
+            <CardHeader>
+              <CardTitle>System Status</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div className="flex items-center gap-3">
+                  <div className="w-2 h-2 bg-green-500 rounded-full"></div>
+                  <div>
+                    <p className="text-sm font-medium">Backend</p>
+                    <p className="text-xs text-muted-foreground">Running</p>
+                  </div>
+                </div>
+                <div className="flex items-center gap-3">
+                  <div className="w-2 h-2 bg-yellow-500 rounded-full"></div>
+                  <div>
+                    <p className="text-sm font-medium">Models</p>
+                    <p className="text-xs text-muted-foreground">Ready to load</p>
+                  </div>
+                </div>
+                <div className="flex items-center gap-3">
+                  <div className="w-2 h-2 bg-blue-500 rounded-full"></div>
+                  <div>
+                    <p className="text-sm font-medium">Platform</p>
+                    <p className="text-xs text-muted-foreground">Local</p>
+                  </div>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </div>
+  )
+}

frontend/src/pages/Playground.tsx

@@ -0,0 +1,649 @@
+import { useState, useEffect } from 'react'
+import { Button } from '@/components/ui/button'
+import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card'
+import { Slider } from '@/components/ui/slider'
+import { Label } from '@/components/ui/label'
+import { Badge } from '@/components/ui/badge'
+import { 
+  AlertDialog, 
+  AlertDialogAction, 
+  AlertDialogCancel, 
+  AlertDialogContent, 
+  AlertDialogDescription, 
+  AlertDialogFooter, 
+  AlertDialogHeader, 
+  AlertDialogTitle 
+} from '@/components/ui/alert-dialog'
+import { 
+  Collapsible, 
+  CollapsibleContent, 
+  CollapsibleTrigger 
+} from '@/components/ui/collapsible'
+import { ChatContainer } from '@/components/chat/ChatContainer'
+import { ChatSessions } from '@/components/chat/ChatSessions'
+import { useChat } from '@/hooks/useChat'
+import { 
+  Loader2, 
+  Brain, 
+  Zap, 
+  Download, 
+  Trash2, 
+  ChevronDown, 
+  MessageSquare, 
+  RotateCcw,
+  Code,
+  Upload,
+  Share,
+  History,
+  Settings,
+  PanelLeftOpen,
+  PanelLeftClose
+} from 'lucide-react'
+
+interface ModelInfo {
+  model_name: string
+  name: string
+  supports_thinking: boolean
+  description: string
+  size_gb: string
+  is_loaded: boolean
+}
+
+interface ModelsResponse {
+  models: ModelInfo[]
+  current_model: string
+}
+
+export function Playground() {
+  // Chat functionality
+  const {
+    sessions,
+    currentSession,
+    currentSessionId,
+    createNewSession,
+    selectSession,
+    deleteSession,
+    renameSession,
+    messages,
+    input,
+    setInput,
+    sendMessage,
+    stopGeneration,
+    isLoading,
+    selectedModel,
+    setSelectedModel,
+    systemPrompt,
+    setSystemPrompt,
+    temperature,
+    setTemperature,
+    maxTokens,
+    setMaxTokens
+  } = useChat()
+
+  // UI state
+  const [showSessions, setShowSessions] = useState(false)
+  const [isSystemPromptOpen, setIsSystemPromptOpen] = useState(false)
+  
+  // Model management state
+  const [models, setModels] = useState<ModelInfo[]>([])
+  const [modelLoading, setModelLoading] = useState<string | null>(null)
+  const [showLoadConfirm, setShowLoadConfirm] = useState(false)
+  const [showUnloadConfirm, setShowUnloadConfirm] = useState(false)
+  const [pendingModelAction, setPendingModelAction] = useState<{
+    action: 'load' | 'unload'
+    model: ModelInfo | null
+  }>({ action: 'load', model: null })
+
+  // Preset system prompts
+  const systemPromptPresets = [
+    {
+      name: "Default Assistant",
+      prompt: "You are a helpful, harmless, and honest AI assistant. Provide clear, accurate, and well-structured responses."
+    },
+    {
+      name: "Code Expert",
+      prompt: "You are an expert software developer. Provide clean, efficient code with clear explanations. Always follow best practices and include comments where helpful."
+    },
+    {
+      name: "Technical Writer",
+      prompt: "You are a technical writer. Create clear, comprehensive documentation and explanations. Use proper formatting and structure your responses logically."
+    },
+    {
+      name: "Creative Writer",
+      prompt: "You are a creative writer. Use vivid language, engaging storytelling, and imaginative descriptions. Be expressive and artistic in your responses."
+    },
+    {
+      name: "Research Assistant",
+      prompt: "You are a research assistant. Provide detailed, well-researched responses with clear reasoning. Cite sources when relevant and present information objectively."
+    },
+    {
+      name: "Teacher",
+      prompt: "You are an experienced teacher. Explain concepts clearly, use examples, and break down complex topics into understandable parts. Be encouraging and patient."
+    }
+  ]
+
+  // Sample prompts for quick start
+  const samplePrompts = [
+    {
+      title: "Marketing Slogan",
+      description: "Create a catchy marketing slogan for a new eco-friendly product.",
+      prompt: "Create a catchy marketing slogan for a new eco-friendly water bottle that keeps drinks cold for 24 hours. The target audience is environmentally conscious millennials and Gen Z consumers."
+    },
+    {
+      title: "Creative Storytelling",
+      description: "Write a short story about a time traveler.",
+      prompt: "Write a 300-word short story about a time traveler who accidentally changes a major historical event while trying to observe ancient Rome."
+    },
+    {
+      title: "Technical Explanation",
+      description: "Explain a complex technical concept simply.",
+      prompt: "Explain how blockchain technology works in simple terms that a 12-year-old could understand, using analogies and examples."
+    },
+    {
+      title: "Code Generation",
+      description: "Generate code with explanations.",
+      prompt: "Write a Python function that takes a list of numbers and returns the second largest number. Include error handling and detailed comments explaining each step."
+    }
+  ]
+
+  // Load available models on startup
+  useEffect(() => {
+    fetchModels()
+  }, [])
+
+  // Update selected model when models change
+  useEffect(() => {
+    if (selectedModel && !models.find(m => m.model_name === selectedModel && m.is_loaded)) {
+      const loadedModel = models.find(m => m.is_loaded)
+      if (loadedModel) {
+        setSelectedModel(loadedModel.model_name)
+      }
+    }
+  }, [models, selectedModel, setSelectedModel])
+
+  const fetchModels = async () => {
+    try {
+      const res = await fetch('http://localhost:8000/models')
+      if (res.ok) {
+        const data: ModelsResponse = await res.json()
+        setModels(data.models)
+        
+        // Set selected model to current model if available, otherwise first loaded model
+        if (data.current_model && selectedModel !== data.current_model) {
+          setSelectedModel(data.current_model)
+        } else if (!selectedModel) {
+          const loadedModel = data.models.find(m => m.is_loaded)
+          if (loadedModel) {
+            setSelectedModel(loadedModel.model_name)
+          }
+        }
+      }
+    } catch (err) {
+      console.error('Failed to fetch models:', err)
+    }
+  }
+
+  const handleLoadModelClick = (model: ModelInfo) => {
+    setPendingModelAction({ action: 'load', model })
+    setShowLoadConfirm(true)
+  }
+
+  const handleUnloadModelClick = (model: ModelInfo) => {
+    setPendingModelAction({ action: 'unload', model })
+    setShowUnloadConfirm(true)
+  }
+
+  const confirmLoadModel = async () => {
+    const model = pendingModelAction.model
+    if (!model) return
+
+    setModelLoading(model.model_name)
+    setShowLoadConfirm(false)
+    
+    try {
+      const res = await fetch('http://localhost:8000/load-model', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ model_name: model.model_name }),
+      })
+      
+      if (res.ok) {
+        await fetchModels()
+        
+        // Set as selected model
+        setSelectedModel(model.model_name)
+      } else {
+        const errorData = await res.json()
+        console.error(`Failed to load model: ${errorData.detail || 'Unknown error'}`)
+      }
+    } catch (err) {
+      console.error(`Failed to load model: ${err instanceof Error ? err.message : 'Unknown error'}`)
+    } finally {
+      setModelLoading(null)
+    }
+  }
+
+  const confirmUnloadModel = async () => {
+    const model = pendingModelAction.model
+    if (!model) return
+
+    setShowUnloadConfirm(false)
+    
+    try {
+      const res = await fetch('http://localhost:8000/unload-model', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ model_name: model.model_name }),
+      })
+      
+      if (res.ok) {
+        await fetchModels()
+        
+        // If we unloaded the selected model, find another loaded model
+        if (selectedModel === model.model_name) {
+          const remainingLoaded = models.find(m => m.is_loaded && m.model_name !== model.model_name)
+          if (remainingLoaded) {
+            setSelectedModel(remainingLoaded.model_name)
+          }
+        }
+      } else {
+        const errorData = await res.json()
+        console.error(`Failed to unload model: ${errorData.detail || 'Unknown error'}`)
+      }
+    } catch (err) {
+      console.error(`Failed to unload model: ${err instanceof Error ? err.message : 'Unknown error'}`)
+    }
+  }
+
+  const handleSamplePromptClick = (samplePrompt: string) => {
+    setInput(samplePrompt)
+  }
+
+  return (
+    <div className="min-h-screen bg-background flex">
+      {/* Chat Sessions Sidebar */}
+      <div className={`
+        ${showSessions ? 'translate-x-0' : '-translate-x-full'}
+        fixed inset-y-0 left-0 z-50 w-80 bg-background border-r transition-transform duration-300 ease-in-out
+        lg:translate-x-0 lg:static lg:inset-0
+      `}>
+        <ChatSessions
+          sessions={sessions}
+          currentSessionId={currentSessionId}
+          onSelectSession={selectSession}
+          onNewSession={createNewSession}
+          onDeleteSession={deleteSession}
+          onRenameSession={renameSession}
+        />
+      </div>
+
+      {/* Overlay for mobile */}
+      {showSessions && (
+        <div 
+          className="fixed inset-0 z-40 bg-black/50 lg:hidden"
+          onClick={() => setShowSessions(false)}
+        />
+      )}
+
+      {/* Main Content */}
+      <div className="flex-1 flex flex-col overflow-hidden">
+        {/* Header */}
+        <div className="border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+          <div className="flex h-14 items-center px-6">
+            <div className="flex items-center gap-2">
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => setShowSessions(!showSessions)}
+                className="lg:hidden"
+              >
+                {showSessions ? <PanelLeftClose className="h-4 w-4" /> : <PanelLeftOpen className="h-4 w-4" />}
+              </Button>
+              <MessageSquare className="h-5 w-5" />
+              <h1 className="text-lg font-semibold">Chat Playground</h1>
+              {currentSession && (
+                <Badge variant="outline" className="text-xs">
+                  {currentSession.title.slice(0, 20)}...
+                </Badge>
+              )}
+            </div>
+            <div className="ml-auto flex items-center gap-2 overflow-x-auto">
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => setShowSessions(!showSessions)}
+                className="hidden lg:flex flex-shrink-0"
+              >
+                <History className="h-4 w-4 mr-2" />
+                <span className="hidden sm:inline">Sessions</span>
+              </Button>
+              <Button variant="outline" size="sm" className="flex-shrink-0">
+                <Code className="h-4 w-4 mr-2" />
+                <span className="hidden sm:inline">View code</span>
+                <span className="sm:hidden">Code</span>
+              </Button>
+              <Button variant="outline" size="sm" className="flex-shrink-0">
+                <Upload className="h-4 w-4 mr-2" />
+                <span className="hidden sm:inline">Import</span>
+              </Button>
+              <Button variant="outline" size="sm" className="flex-shrink-0">
+                <Share className="h-4 w-4 mr-2" />
+                <span className="hidden sm:inline">Export</span>
+              </Button>
+            </div>
+          </div>
+        </div>
+
+        {/* Content Area */}
+        <div className="flex-1 flex overflow-hidden">
+          {/* Chat Area */}
+          <div className="flex-1 flex flex-col">
+            {/* Sample Prompts */}
+            {messages.length === 0 && (
+              <div className="p-6 border-b">
+                <Card>
+                  <CardHeader>
+                    <CardTitle className="text-base">Start with a sample prompt</CardTitle>
+                  </CardHeader>
+                  <CardContent>
+                    <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4">
+                      {samplePrompts.map((sample, index) => (
+                        <Button
+                          key={index}
+                          variant="outline"
+                          className="h-auto p-4 text-left justify-start min-w-0"
+                          onClick={() => handleSamplePromptClick(sample.prompt)}
+                          disabled={isLoading}
+                        >
+                          <div className="min-w-0">
+                            <div className="font-medium text-sm mb-1 truncate">{sample.title}</div>
+                            <div className="text-xs text-muted-foreground line-clamp-2">{sample.description}</div>
+                          </div>
+                        </Button>
+                      ))}
+                    </div>
+                  </CardContent>
+                </Card>
+              </div>
+            )}
+
+            {/* Chat Messages and Input */}
+            <ChatContainer
+              messages={messages}
+              input={input}
+              onInputChange={setInput}
+              onSubmit={sendMessage}
+              onStop={stopGeneration}
+              isLoading={isLoading}
+              disabled={!selectedModel || !models.find(m => m.model_name === selectedModel)?.is_loaded}
+              placeholder={
+                !selectedModel || !models.find(m => m.model_name === selectedModel)?.is_loaded
+                  ? "Please load a model first..."
+                  : "Ask me anything..."
+              }
+              className="flex-1"
+            />
+          </div>
+
+          {/* Settings Panel */}
+          <div className="w-80 border-l bg-muted/30 overflow-y-auto">
+            <div className="p-4 space-y-6">
+              <div className="flex items-center gap-2">
+                <Settings className="h-4 w-4" />
+                <h2 className="font-semibold text-sm">Configuration</h2>
+              </div>
+
+              {/* Model Management */}
+              <Card>
+                <CardHeader>
+                  <CardTitle className="text-sm">Model Management</CardTitle>
+                </CardHeader>
+                <CardContent className="space-y-3">
+                  {models.map((model) => (
+                    <div key={model.model_name} className="border rounded-lg p-3 overflow-hidden">
+                      <div className="space-y-3">
+                        {/* Model Header */}
+                        <div className="flex items-start gap-2">
+                          {model.supports_thinking ? <Brain className="h-4 w-4 flex-shrink-0" /> : <Zap className="h-4 w-4 flex-shrink-0" />}
+                          <div className="flex-1 min-w-0">
+                            <div className="flex items-center gap-2 mb-1 flex-wrap">
+                              <span className="font-medium text-sm truncate">{model.name}</span>
+                              {model.model_name === selectedModel && (
+                                <Badge variant="default" className="text-xs flex-shrink-0">Active</Badge>
+                              )}
+                              {model.is_loaded && model.model_name !== selectedModel && (
+                                <Badge variant="secondary" className="text-xs flex-shrink-0">Loaded</Badge>
+                              )}
+                            </div>
+                            <p className="text-xs text-muted-foreground break-words">
+                              {model.description} • {model.size_gb}
+                            </p>
+                          </div>
+                        </div>
+
+                        {/* Model Selection */}
+                        {model.is_loaded && (
+                          <div className="flex items-center gap-2">
+                            <input
+                              type="radio"
+                              name="selectedModel"
+                              value={model.model_name}
+                              checked={selectedModel === model.model_name}
+                              onChange={() => setSelectedModel(model.model_name)}
+                              className="h-3 w-3 flex-shrink-0"
+                            />
+                            <Label className="text-xs">Use for generation</Label>
+                          </div>
+                        )}
+
+                        {/* Action Button */}
+                        <div className="flex justify-end">
+                          {model.is_loaded ? (
+                            <Button
+                              variant="outline"
+                              size="sm"
+                              onClick={() => handleUnloadModelClick(model)}
+                              disabled={isLoading}
+                              className="h-8 px-3 text-xs flex-shrink-0"
+                            >
+                              <Trash2 className="h-3 w-3 mr-2" />
+                              Unload
+                            </Button>
+                          ) : (
+                            <Button
+                              variant="outline"
+                              size="sm"
+                              onClick={() => handleLoadModelClick(model)}
+                              disabled={isLoading || modelLoading === model.model_name}
+                              className="h-8 px-3 text-xs flex-shrink-0 min-w-[80px]"
+                            >
+                              {modelLoading === model.model_name ? (
+                                <>
+                                  <Loader2 className="h-3 w-3 mr-2 animate-spin" />
+                                  Loading...
+                                </>
+                              ) : (
+                                <>
+                                  <Download className="h-3 w-3 mr-2" />
+                                  Load
+                                </>
+                              )}
+                            </Button>
+                          )}
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                </CardContent>
+              </Card>
+
+              {/* Parameters */}
+              <Card>
+                <CardHeader>
+                  <CardTitle className="text-sm">Parameters</CardTitle>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                  {/* Temperature */}
+                  <div>
+                    <Label className="text-xs font-medium">
+                      Temperature: {temperature.toFixed(2)}
+                    </Label>
+                    <Slider
+                      value={[temperature]}
+                      onValueChange={(value) => setTemperature(value[0])}
+                      min={0}
+                      max={2}
+                      step={0.01}
+                      className="mt-2"
+                      disabled={isLoading}
+                    />
+                    <p className="text-xs text-muted-foreground mt-1">
+                      Lower = more focused, Higher = more creative
+                    </p>
+                  </div>
+
+                  {/* Max Tokens */}
+                  <div>
+                    <Label className="text-xs font-medium">
+                      Max Tokens: {maxTokens}
+                    </Label>
+                    <Slider
+                      value={[maxTokens]}
+                      onValueChange={(value) => setMaxTokens(value[0])}
+                      min={100}
+                      max={4096}
+                      step={100}
+                      className="mt-2"
+                      disabled={isLoading}
+                    />
+                  </div>
+                </CardContent>
+              </Card>
+
+              {/* System Prompt */}
+              <Card>
+                <Collapsible 
+                  open={isSystemPromptOpen} 
+                  onOpenChange={setIsSystemPromptOpen}
+                >
+                  <CardHeader>
+                    <CollapsibleTrigger asChild>
+                      <Button variant="ghost" className="w-full justify-between p-0" disabled={isLoading}>
+                        <div className="flex items-center gap-2">
+                          <MessageSquare className="h-4 w-4" />
+                          <span className="text-sm font-medium">System Prompt</span>
+                          {systemPrompt && <Badge variant="secondary" className="text-xs">Custom</Badge>}
+                        </div>
+                        <ChevronDown className={`h-4 w-4 transition-transform ${isSystemPromptOpen ? 'transform rotate-180' : ''}`} />
+                      </Button>
+                    </CollapsibleTrigger>
+                  </CardHeader>
+                  <CollapsibleContent>
+                    <CardContent className="space-y-3">
+                      {/* Preset System Prompts */}
+                      <div>
+                        <Label className="text-xs font-medium text-muted-foreground">Quick Presets</Label>
+                        <div className="grid grid-cols-1 gap-1 mt-1">
+                          {systemPromptPresets.map((preset) => (
+                            <Button
+                              key={preset.name}
+                              variant="outline"
+                              size="sm"
+                              className="h-auto p-2 text-xs justify-start"
+                              onClick={() => setSystemPrompt(preset.prompt)}
+                              disabled={isLoading}
+                            >
+                              {preset.name}
+                            </Button>
+                          ))}
+                        </div>
+                      </div>
+
+                      {/* Custom System Prompt */}
+                      <div>
+                        <div className="flex items-center justify-between mb-2">
+                          <Label htmlFor="system-prompt" className="text-xs font-medium">
+                            Custom System Prompt
+                          </Label>
+                          {systemPrompt && (
+                            <Button
+                              variant="ghost"
+                              size="sm"
+                              onClick={() => setSystemPrompt('')}
+                              className="h-6 px-2 text-xs"
+                              disabled={isLoading}
+                            >
+                              <RotateCcw className="h-3 w-3 mr-1" />
+                              Clear
+                            </Button>
+                          )}
+                        </div>
+                        <textarea
+                          id="system-prompt"
+                          value={systemPrompt}
+                          onChange={(e) => setSystemPrompt(e.target.value)}
+                          placeholder="Enter custom system prompt to define how the model should behave..."
+                          className="w-full min-h-[80px] text-xs p-2 border rounded-md bg-background"
+                          disabled={isLoading}
+                        />
+                        <p className="text-xs text-muted-foreground mt-1">
+                          System prompts define the model's role and behavior.
+                        </p>
+                      </div>
+                    </CardContent>
+                  </CollapsibleContent>
+                </Collapsible>
+              </Card>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Load Model Confirmation Dialog */}
+      <AlertDialog open={showLoadConfirm} onOpenChange={setShowLoadConfirm}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Load Model</AlertDialogTitle>
+            <AlertDialogDescription>
+              Do you want to load <strong>{pendingModelAction.model?.name}</strong>?
+              <br /><br />
+              <strong>Size:</strong> {pendingModelAction.model?.size_gb}
+              <br />
+              <strong>Note:</strong> This will download the model if it's not already cached locally. 
+              This may take several minutes and use significant bandwidth and storage.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction onClick={confirmLoadModel}>
+              Load Model
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      {/* Unload Model Confirmation Dialog */}
+      <AlertDialog open={showUnloadConfirm} onOpenChange={setShowUnloadConfirm}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Unload Model</AlertDialogTitle>
+            <AlertDialogDescription>
+              Are you sure you want to unload <strong>{pendingModelAction.model?.name}</strong>?
+              <br /><br />
+              This will free up memory but you'll need to reload it to use it again.
+              {pendingModelAction.model?.model_name === selectedModel && (
+                <><br /><br /><strong>Warning:</strong> This is the currently active model.</>
+              )}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction onClick={confirmUnloadModel}>
+              Unload Model
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  )
+}

frontend/src/types/chat.ts

@@ -0,0 +1,29 @@
+export interface Message {
+  id: string
+  role: 'user' | 'assistant' | 'system'
+  content: string
+  thinking_content?: string
+  timestamp: number
+  model_used?: string
+  supports_thinking?: boolean
+}
+
+export interface ChatSession {
+  id: string
+  title: string
+  messages: Message[]
+  created_at: number
+  updated_at: number
+  model_name?: string
+  system_prompt?: string
+}
+
+export interface ChatStore {
+  sessions: ChatSession[]
+  current_session_id: string | null
+}
+
+export interface MessageStatus {
+  isLoading: boolean
+  error: string | null
+}

frontend/tailwind.config.js

@@ -0,0 +1,91 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: ["class"],
+  content: [
+    './pages/**/*.{ts,tsx}',
+    './components/**/*.{ts,tsx}',
+    './app/**/*.{ts,tsx}',
+    './src/**/*.{ts,tsx}',
+  ],
+  theme: {
+  	container: {
+  		center: true,
+  		padding: '2rem',
+  		screens: {
+  			'2xl': '1400px'
+  		}
+  	},
+  	extend: {
+  		colors: {
+  			border: 'hsl(var(--border))',
+  			input: 'hsl(var(--input))',
+  			ring: 'hsl(var(--ring))',
+  			background: 'hsl(var(--background))',
+  			foreground: 'hsl(var(--foreground))',
+  			primary: {
+  				DEFAULT: 'hsl(var(--primary))',
+  				foreground: 'hsl(var(--primary-foreground))'
+  			},
+  			secondary: {
+  				DEFAULT: 'hsl(var(--secondary))',
+  				foreground: 'hsl(var(--secondary-foreground))'
+  			},
+  			destructive: {
+  				DEFAULT: 'hsl(var(--destructive))',
+  				foreground: 'hsl(var(--destructive-foreground))'
+  			},
+  			muted: {
+  				DEFAULT: 'hsl(var(--muted))',
+  				foreground: 'hsl(var(--muted-foreground))'
+  			},
+  			accent: {
+  				DEFAULT: 'hsl(var(--accent))',
+  				foreground: 'hsl(var(--accent-foreground))'
+  			},
+  			popover: {
+  				DEFAULT: 'hsl(var(--popover))',
+  				foreground: 'hsl(var(--popover-foreground))'
+  			},
+  			card: {
+  				DEFAULT: 'hsl(var(--card))',
+  				foreground: 'hsl(var(--card-foreground))'
+  			},
+  			chart: {
+  				'1': 'hsl(var(--chart-1))',
+  				'2': 'hsl(var(--chart-2))',
+  				'3': 'hsl(var(--chart-3))',
+  				'4': 'hsl(var(--chart-4))',
+  				'5': 'hsl(var(--chart-5))'
+  			}
+  		},
+  		borderRadius: {
+  			lg: 'var(--radius)',
+  			md: 'calc(var(--radius) - 2px)',
+  			sm: 'calc(var(--radius) - 4px)'
+  		},
+  		keyframes: {
+  			'accordion-down': {
+  				from: {
+  					height: 0
+  				},
+  				to: {
+  					height: 'var(--radix-accordion-content-height)'
+  				}
+  			},
+  			'accordion-up': {
+  				from: {
+  					height: 'var(--radix-accordion-content-height)'
+  				},
+  				to: {
+  					height: 0
+  				}
+  			}
+  		},
+  		animation: {
+  			'accordion-down': 'accordion-down 0.2s ease-out',
+  			'accordion-up': 'accordion-up 0.2s ease-out'
+  		}
+  	}
+  },
+  plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography")],
+}

frontend/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

frontend/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

frontend/vite.config.ts

@@ -0,0 +1,13 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import path from 'path'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+})

package.json

@@ -0,0 +1,42 @@
+{
+  "name": "edge-llm",
+  "version": "1.0.0",
+  "description": "Local AI Chat Platform with Modern UI",
+  "scripts": {
+    "dev": "concurrently \"npm run backend\" \"npm run frontend\"",
+    "backend": "uvicorn app:app --host 0.0.0.0 --port 8000 --reload",
+    "frontend": "cd frontend && npm run dev",
+    "build": "cd frontend && npm run build && cp -r dist/* ../static/",
+    "build:frontend": "cd frontend && npm run build",
+    "build:docker": "docker build -t edge-llm .",
+    "preview": "cd frontend && npm run preview",
+    "install:all": "pip install -r requirements.txt && cd frontend && npm install",
+    "start": "python scripts/start_platform.py",
+    "stop": "python scripts/stop_platform.py",
+    "test": "cd frontend && npm run test",
+    "deploy": "npm run build && echo 'Ready for deployment'",
+    "clean": "rm -rf frontend/dist frontend/node_modules __pycache__ .cache"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://huggingface.co/spaces/wu981526092/EdgeLLM"
+  },
+  "keywords": [
+    "ai",
+    "llm",
+    "chat",
+    "fastapi",
+    "react",
+    "local",
+    "privacy"
+  ],
+  "author": "EdgeLLM Contributors",
+  "license": "MIT",
+  "devDependencies": {
+    "concurrently": "^8.2.0"
+  },
+  "engines": {
+    "node": ">=18.0.0",
+    "python": ">=3.9.0"
+  }
+}

scripts/start_both.bat

@@ -0,0 +1,51 @@
+@echo off
+echo.
+echo ========================================
+echo   Edge LLM Platform Startup Script
+echo ========================================
+echo.
+
+echo [1/4] Checking prerequisites...
+
+REM Check if virtual environment exists
+if not exist ".venv\Scripts\activate.bat" (
+    echo ERROR: Virtual environment not found!
+    echo Please run: python -m venv .venv
+    echo Then: pip install -r requirements.txt
+    pause
+    exit /b 1
+)
+
+REM Check if frontend dependencies exist
+if not exist "frontend\node_modules" (
+    echo ERROR: Frontend dependencies not found!
+    echo Please run: cd frontend && npm install
+    pause
+    exit /b 1
+)
+
+echo [2/4] Starting backend server...
+start "Edge LLM Backend" cmd /k "call .venv\Scripts\activate.bat && cd backend && python app.py"
+
+echo [3/4] Waiting for backend to initialize...
+timeout /t 3 /nobreak >nul
+
+echo [4/4] Starting frontend development server...
+start "Edge LLM Frontend" cmd /k "cd frontend && npm run dev"
+
+echo.
+echo ========================================
+echo   🚀 Edge LLM Platform Starting...
+echo ========================================
+echo.
+echo Backend:  http://localhost:8000
+echo Frontend: http://localhost:5173
+echo.
+echo Both services are starting in separate windows.
+echo Close this window to keep services running.
+echo.
+echo To stop services:
+echo - Close the backend and frontend windows, OR
+echo - Run: stop_both.bat
+echo.
+pause

scripts/start_platform.py

@@ -0,0 +1,279 @@
+#!/usr/bin/env python3
+"""
+Edge LLM Platform Startup Script
+Starts both backend and frontend services simultaneously
+"""
+
+import os
+import sys
+import subprocess
+import time
+import signal
+import platform
+import webbrowser
+from pathlib import Path
+
+class EdgeLLMStarter:
+    def __init__(self):
+        self.processes = []
+        self.is_windows = platform.system() == "Windows"
+        self.project_root = Path(__file__).parent
+        
+    def print_banner(self):
+        print("\n" + "="*50)
+        print("   🤖 Edge LLM Platform Startup")
+        print("="*50)
+        
+    def check_prerequisites(self):
+        print("\n[1/5] 🔍 Checking prerequisites...")
+        
+        # Check virtual environment
+        venv_path = self.project_root / ".venv"
+        if self.is_windows:
+            venv_python = venv_path / "Scripts" / "python.exe"
+            venv_activate = venv_path / "Scripts" / "activate.bat"
+        else:
+            venv_python = venv_path / "bin" / "python"
+            venv_activate = venv_path / "bin" / "activate"
+            
+        if not venv_path.exists() or not venv_python.exists():
+            print("❌ Virtual environment not found!")
+            print("Please run: python -m venv .venv")
+            print("Then: pip install -r requirements.txt")
+            return False
+            
+        # Check backend dependencies
+        requirements_file = self.project_root / "requirements.txt"
+        if not requirements_file.exists():
+            print("❌ requirements.txt not found!")
+            return False
+            
+        # Check frontend dependencies
+        node_modules = self.project_root / "frontend" / "node_modules"
+        package_json = self.project_root / "frontend" / "package.json"
+        
+        if not package_json.exists():
+            print("❌ Frontend package.json not found!")
+            return False
+            
+        if not node_modules.exists():
+            print("❌ Frontend dependencies not installed!")
+            print("Please run: cd frontend && npm install")
+            return False
+            
+        print("✅ All prerequisites satisfied")
+        return True
+        
+    def start_backend(self):
+        print("\n[2/5] 🐍 Starting backend server...")
+        
+        backend_dir = self.project_root / "backend"
+        if not backend_dir.exists():
+            print("❌ Backend directory not found!")
+            return None
+            
+        try:
+            if self.is_windows:
+                # Windows: use call to activate venv and run python
+                cmd = [
+                    "cmd", "/c", 
+                    f"call {self.project_root}/.venv/Scripts/activate.bat && "
+                    f"cd {backend_dir} && python app.py"
+                ]
+                process = subprocess.Popen(
+                    cmd,
+                    creationflags=subprocess.CREATE_NEW_CONSOLE,
+                    cwd=str(self.project_root)
+                )
+            else:
+                # Unix: use source to activate venv
+                cmd = f"source {self.project_root}/.venv/bin/activate && cd {backend_dir} && python app.py"
+                process = subprocess.Popen(
+                    cmd,
+                    shell=True,
+                    cwd=str(self.project_root)
+                )
+                
+            self.processes.append(("Backend", process))
+            print("✅ Backend starting...")
+            return process
+            
+        except Exception as e:
+            print(f"❌ Failed to start backend: {e}")
+            return None
+            
+    def start_frontend(self):
+        print("\n[3/5] ⚛️  Starting frontend development server...")
+        
+        frontend_dir = self.project_root / "frontend"
+        if not frontend_dir.exists():
+            print("❌ Frontend directory not found!")
+            return None
+            
+        try:
+            if self.is_windows:
+                cmd = ["cmd", "/c", "npm run dev"]
+                process = subprocess.Popen(
+                    cmd,
+                    creationflags=subprocess.CREATE_NEW_CONSOLE,
+                    cwd=str(frontend_dir)
+                )
+            else:
+                cmd = ["npm", "run", "dev"]
+                process = subprocess.Popen(
+                    cmd,
+                    cwd=str(frontend_dir)
+                )
+                
+            self.processes.append(("Frontend", process))
+            print("✅ Frontend starting...")
+            return process
+            
+        except Exception as e:
+            print(f"❌ Failed to start frontend: {e}")
+            return None
+            
+    def wait_for_services(self):
+        print("\n[4/5] ⏳ Waiting for services to initialize...")
+        
+        # Wait a bit for services to start
+        for i in range(5, 0, -1):
+            print(f"   Waiting {i} seconds...", end="\r")
+            time.sleep(1)
+        print("   Services should be ready!   ")
+        
+    def check_services(self):
+        print("\n[5/5] 🔍 Checking service status...")
+        
+        try:
+            import requests
+            
+            # Check backend
+            try:
+                response = requests.get("http://localhost:8000/", timeout=5)
+                if response.status_code == 200:
+                    print("✅ Backend: Running on http://localhost:8000")
+                else:
+                    print(f"⚠️  Backend: HTTP {response.status_code}")
+            except:
+                print("⏳ Backend: Still starting up...")
+                
+            # Check frontend
+            try:
+                response = requests.get("http://localhost:5173/", timeout=5)
+                if response.status_code == 200:
+                    print("✅ Frontend: Running on http://localhost:5173")
+                else:
+                    print(f"⚠️  Frontend: HTTP {response.status_code}")
+            except:
+                print("⏳ Frontend: Still starting up...")
+                
+        except ImportError:
+            print("ℹ️  Install 'requests' package to check service status")
+            print("   pip install requests")
+            
+    def open_browser(self):
+        """Open the application in default browser"""
+        try:
+            print("\n🌐 Opening Edge LLM in your browser...")
+            webbrowser.open("http://localhost:5173")
+        except:
+            pass
+            
+    def show_info(self):
+        print("\n" + "="*50)
+        print("   🚀 Edge LLM Platform Started!")
+        print("="*50)
+        print("\n📍 Access URLs:")
+        print("   Frontend:  http://localhost:5173")
+        print("   Backend:   http://localhost:8000")
+        print("   API Docs:  http://localhost:8000/docs")
+        
+        print("\n💡 Usage:")
+        print("   1. Go to http://localhost:5173/playground")
+        print("   2. Load a model from the right panel")
+        print("   3. Start chatting!")
+        
+        print("\n🛑 To stop services:")
+        if self.is_windows:
+            print("   - Close the backend and frontend windows, OR")
+            print("   - Run: stop_both.bat, OR")
+        print("   - Press Ctrl+C in this window")
+        
+    def cleanup(self):
+        """Clean up processes when shutting down"""
+        print("\n🛑 Shutting down Edge LLM Platform...")
+        
+        for name, process in self.processes:
+            try:
+                print(f"   Stopping {name}...")
+                if self.is_windows:
+                    subprocess.run(["taskkill", "/F", "/T", "/PID", str(process.pid)], 
+                                 capture_output=True)
+                else:
+                    process.terminate()
+                    process.wait(timeout=5)
+            except:
+                pass
+                
+        print("✅ All services stopped")
+        
+    def run(self):
+        """Main execution function"""
+        try:
+            self.print_banner()
+            
+            if not self.check_prerequisites():
+                input("\nPress Enter to exit...")
+                return 1
+                
+            backend_process = self.start_backend()
+            if not backend_process:
+                return 1
+                
+            frontend_process = self.start_frontend()
+            if not frontend_process:
+                return 1
+                
+            self.wait_for_services()
+            self.check_services()
+            self.show_info()
+            
+            # Open browser after a short delay
+            time.sleep(2)
+            self.open_browser()
+            
+            print("\n⌨️  Press Ctrl+C to stop all services...")
+            
+            # Keep the script running
+            while True:
+                time.sleep(1)
+                
+                # Check if processes are still running
+                for name, process in self.processes:
+                    if process.poll() is not None:
+                        print(f"\n⚠️  {name} process stopped unexpectedly")
+                        
+        except KeyboardInterrupt:
+            print("\n\n⌨️  Received stop signal...")
+            
+        except Exception as e:
+            print(f"\n❌ Unexpected error: {e}")
+            
+        finally:
+            self.cleanup()
+            
+        return 0
+
+def signal_handler(signum, frame):
+    """Handle Ctrl+C gracefully"""
+    print("\n\n⌨️  Received stop signal...")
+    sys.exit(0)
+
+if __name__ == "__main__":
+    # Handle Ctrl+C gracefully
+    signal.signal(signal.SIGINT, signal_handler)
+    
+    starter = EdgeLLMStarter()
+    exit_code = starter.run()
+    sys.exit(exit_code)

scripts/start_platform.sh

@@ -0,0 +1,216 @@
+#!/bin/bash
+
+# Edge LLM Platform Startup Script for Linux/macOS
+# Starts both backend and frontend services
+
+# Colors for output
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+BLUE='\033[0;34m'
+NC='\033[0m' # No Color
+
+# Function to print colored output
+print_status() {
+    echo -e "${GREEN}[INFO]${NC} $1"
+}
+
+print_error() {
+    echo -e "${RED}[ERROR]${NC} $1"
+}
+
+print_warning() {
+    echo -e "${YELLOW}[WARNING]${NC} $1"
+}
+
+print_banner() {
+    echo ""
+    echo "=================================================="
+    echo "   🤖 Edge LLM Platform Startup Script"
+    echo "=================================================="
+    echo ""
+}
+
+# Cleanup function
+cleanup() {
+    echo ""
+    print_status "🛑 Shutting down Edge LLM Platform..."
+    
+    # Kill background jobs
+    jobs -p | xargs -r kill 2>/dev/null
+    
+    # Kill any remaining python/node processes related to our project
+    pkill -f "backend/app.py" 2>/dev/null
+    pkill -f "npm run dev" 2>/dev/null
+    
+    print_status "✅ All services stopped"
+    exit 0
+}
+
+# Set up signal handlers
+trap cleanup SIGINT SIGTERM
+
+check_prerequisites() {
+    print_status "[1/5] 🔍 Checking prerequisites..."
+    
+    # Check if virtual environment exists
+    if [ ! -d ".venv" ] || [ ! -f ".venv/bin/python" ]; then
+        print_error "Virtual environment not found!"
+        echo "Please run: python -m venv .venv"
+        echo "Then: source .venv/bin/activate && pip install -r requirements.txt"
+        return 1
+    fi
+    
+    # Check if frontend dependencies exist
+    if [ ! -d "frontend/node_modules" ] || [ ! -f "frontend/package.json" ]; then
+        print_error "Frontend dependencies not found!"
+        echo "Please run: cd frontend && npm install"
+        return 1
+    fi
+    
+    print_status "✅ All prerequisites satisfied"
+    return 0
+}
+
+start_backend() {
+    print_status "[2/5] 🐍 Starting backend server..."
+    
+    if [ ! -d "backend" ]; then
+        print_error "Backend directory not found!"
+        return 1
+    fi
+    
+    # Start backend in background
+    (
+        source .venv/bin/activate
+        cd backend
+        python app.py
+    ) &
+    
+    BACKEND_PID=$!
+    print_status "✅ Backend starting (PID: $BACKEND_PID)..."
+    return 0
+}
+
+start_frontend() {
+    print_status "[3/5] ⚛️  Starting frontend development server..."
+    
+    if [ ! -d "frontend" ]; then
+        print_error "Frontend directory not found!"
+        return 1
+    fi
+    
+    # Start frontend in background
+    (
+        cd frontend
+        npm run dev
+    ) &
+    
+    FRONTEND_PID=$!
+    print_status "✅ Frontend starting (PID: $FRONTEND_PID)..."
+    return 0
+}
+
+wait_for_services() {
+    print_status "[4/5] ⏳ Waiting for services to initialize..."
+    
+    for i in {5..1}; do
+        printf "\r   Waiting %d seconds..." $i
+        sleep 1
+    done
+    printf "\r   Services should be ready!   \n"
+}
+
+check_services() {
+    print_status "[5/5] 🔍 Checking service status..."
+    
+    # Check if curl is available
+    if command -v curl &> /dev/null; then
+        # Check backend
+        if curl -s http://localhost:8000/ >/dev/null 2>&1; then
+            print_status "✅ Backend: Running on http://localhost:8000"
+        else
+            print_warning "⏳ Backend: Still starting up..."
+        fi
+        
+        # Check frontend
+        if curl -s http://localhost:5173/ >/dev/null 2>&1; then
+            print_status "✅ Frontend: Running on http://localhost:5173"
+        else
+            print_warning "⏳ Frontend: Still starting up..."
+        fi
+    else
+        print_warning "Install 'curl' to check service status"
+    fi
+}
+
+open_browser() {
+    print_status "🌐 Opening Edge LLM in your browser..."
+    
+    # Try to open browser (works on most Linux distributions and macOS)
+    if command -v xdg-open &> /dev/null; then
+        xdg-open http://localhost:5173 >/dev/null 2>&1 &
+    elif command -v open &> /dev/null; then
+        open http://localhost:5173 >/dev/null 2>&1 &
+    fi
+}
+
+show_info() {
+    echo ""
+    echo "=================================================="
+    echo "   🚀 Edge LLM Platform Started!"
+    echo "=================================================="
+    echo ""
+    echo "📍 Access URLs:"
+    echo "   Frontend:  http://localhost:5173"
+    echo "   Backend:   http://localhost:8000"
+    echo "   API Docs:  http://localhost:8000/docs"
+    echo ""
+    echo "💡 Usage:"
+    echo "   1. Go to http://localhost:5173/playground"
+    echo "   2. Load a model from the right panel"
+    echo "   3. Start chatting!"
+    echo ""
+    echo "🛑 To stop services:"
+    echo "   - Press Ctrl+C in this terminal"
+    echo ""
+}
+
+main() {
+    print_banner
+    
+    # Check prerequisites
+    if ! check_prerequisites; then
+        read -p "Press Enter to exit..."
+        exit 1
+    fi
+    
+    # Start services
+    if ! start_backend; then
+        exit 1
+    fi
+    
+    if ! start_frontend; then
+        exit 1
+    fi
+    
+    # Wait and check
+    wait_for_services
+    check_services
+    show_info
+    
+    # Open browser after a short delay
+    sleep 2
+    open_browser
+    
+    print_status "⌨️  Press Ctrl+C to stop all services..."
+    
+    # Keep script running and wait for services
+    wait
+}
+
+# Make sure we're in the right directory
+cd "$(dirname "$0")"
+
+# Run main function
+main

scripts/stop_both.bat

@@ -0,0 +1,34 @@
+@echo off
+echo.
+echo ========================================
+echo   Edge LLM Platform Stop Script
+echo ========================================
+echo.
+
+echo [1/3] Stopping backend processes...
+taskkill /F /IM python.exe 2>nul
+if %errorlevel% == 0 (
+    echo ✅ Backend processes stopped
+) else (
+    echo ⚠️  No backend processes found
+)
+
+echo [2/3] Stopping frontend processes...
+taskkill /F /IM node.exe 2>nul
+if %errorlevel% == 0 (
+    echo ✅ Frontend processes stopped
+) else (
+    echo ⚠️  No frontend processes found
+)
+
+echo [3/3] Stopping any remaining Edge LLM processes...
+for /f "tokens=2" %%i in ('tasklist /FI "WINDOWTITLE eq Edge LLM*" /FO CSV ^| find /v "PID"') do (
+    taskkill /F /PID %%i 2>nul
+)
+
+echo.
+echo ========================================
+echo   🛑 All Edge LLM services stopped
+echo ========================================
+echo.
+pause