Upload 5 files

app.py

@@ -0,0 +1,320 @@
+from fastapi import FastAPI, HTTPException, Request
+from fastapi.staticfiles import StaticFiles
+from fastapi.responses import HTMLResponse, FileResponse
+from pydantic import BaseModel
+import os
+import json
+import firebase_admin
+from firebase_admin import credentials, db
+import base64
+import time
+from dotenv import load_dotenv
+from typing import List, Dict, Any, Optional
+
+# Load environment variables
+load_dotenv()
+
+app = FastAPI(title="CatGPT Model Manager", description="Modern web interface for managing Discord bot AI models")
+
+class FirebaseManager:
+    def __init__(self):
+        self.app = None
+        self.db_ref = None
+        self.initialize()
+    
+    def initialize(self):
+        """Initialize Firebase Admin SDK"""
+        try:
+            database_url = os.getenv('FIREBASE_URL', 'https://genaibot-28c30-default-rtdb.asia-southeast1.firebasedatabase.app/')
+            service_account_b64 = os.getenv('FIREBASE_SERVICE_ACCOUNT_B64')
+            
+            if not service_account_b64:
+                print("Warning: FIREBASE_SERVICE_ACCOUNT_B64 not set, using mock data")
+                return False
+            
+            # Decode base64 service account
+            service_account_json = base64.b64decode(service_account_b64).decode('utf-8')
+            service_account_dict = json.loads(service_account_json)
+            
+            # Initialize Firebase Admin
+            if not firebase_admin._apps:
+                cred = credentials.Certificate(service_account_dict)
+                self.app = firebase_admin.initialize_app(cred, {
+                    'databaseURL': database_url
+                })
+            else:
+                self.app = firebase_admin.get_app()
+            
+            self.db_ref = db.reference('catgptbot')
+            print("Firebase initialized successfully")
+            return True
+            
+        except Exception as e:
+            print(f"Firebase initialization error: {e}")
+            # Use mock data for development
+            self.use_mock_data()
+            return False
+    
+    def use_mock_data(self):
+        """Use mock data when Firebase is not available"""
+        self.mock_data = {
+            "pony": {
+                "models": {
+                    "1640995200000": {
+                        "displayName": "Pony Diffusion V6",
+                        "urn": "@cf/bytedance/stable-diffusion-xl-lightning",
+                        "category": "pony",
+                        "isActive": True,
+                        "tags": ["anime", "realistic"],
+                        "metadata": {"nsfw": False}
+                    },
+                    "1640995300000": {
+                        "displayName": "Pony XL Enhanced",
+                        "urn": "@cf/stabilityai/stable-diffusion-xl-base-1.0",
+                        "category": "pony",
+                        "isActive": True,
+                        "tags": ["anime", "pony"],
+                        "metadata": {"nsfw": True}
+                    }
+                }
+            },
+            "illustrious": {
+                "models": {
+                    "1640995400000": {
+                        "displayName": "Illustrious XL",
+                        "urn": "@cf/black-forest-labs/flux-1-schnell",
+                        "category": "illustrious",
+                        "isActive": False,
+                        "tags": ["illustration", "art"],
+                        "metadata": {"nsfw": True}
+                    }
+                }
+            },
+            "sdxl": {
+                "models": {
+                    "1640995500000": {
+                        "displayName": "SDXL Lightning",
+                        "urn": "@cf/bytedance/stable-diffusion-xl-lightning",
+                        "category": "sdxl",
+                        "isActive": True,
+                        "tags": ["realistic", "fast"],
+                        "metadata": {"nsfw": False}
+                    }
+                }
+            }
+        }
+        print("Using mock data for development")
+    
+    def get_models_by_category(self, category: str) -> Dict[str, Any]:
+        """Get all models for a specific category"""
+        try:
+            if self.db_ref:
+                models_ref = self.db_ref.child(f'models/categories/{category}/models')
+                return models_ref.get() or {}
+            else:
+                # Return mock data
+                return self.mock_data.get(category, {}).get("models", {})
+        except Exception as e:
+            print(f"Error getting models for {category}: {e}")
+            return {}
+    
+    def get_all_models(self) -> Dict[str, Any]:
+        """Get all models from all categories"""
+        try:
+            if self.db_ref:
+                models_ref = self.db_ref.child('models/categories')
+                return models_ref.get() or {}
+            else:
+                return self.mock_data
+        except Exception as e:
+            print(f"Error getting all models: {e}")
+            return {}
+    
+    def add_model(self, category: str, model_data: Dict[str, Any]) -> tuple[bool, str]:
+        """Add a new model"""
+        try:
+            # Check active model limit
+            active_count = self.count_active_models(category)
+            if active_count >= 25:
+                return False, f"Cannot add model. {category.upper()} already has 25 models (limit reached)."
+            
+            model_id = str(int(time.time() * 1000))
+            
+            if self.db_ref:
+                model_path = f'models/categories/{category}/models/{model_id}'
+                self.db_ref.child(model_path).set(model_data)
+            else:
+                # Add to mock data
+                if category not in self.mock_data:
+                    self.mock_data[category] = {"models": {}}
+                self.mock_data[category]["models"][model_id] = model_data
+            
+            return True, f"Model added successfully with ID: {model_id}"
+        except Exception as e:
+            return False, f"Error adding model: {str(e)}"
+    
+    def update_model(self, category: str, model_id: str, field: str, value: Any) -> tuple[bool, str]:
+        """Update a specific field of a model"""
+        try:
+            if field == 'isActive' and value:
+                active_count = self.count_active_models(category)
+                if active_count >= 25:
+                    return False, f"Cannot activate model. {category.upper()} already has 25 active models."
+            
+            if self.db_ref:
+                model_path = f'models/categories/{category}/models/{model_id}'
+                if field == 'tags':
+                    tag_list = [tag.strip() for tag in value.split(',') if tag.strip()]
+                    self.db_ref.child(f'{model_path}/tags').set(tag_list)
+                elif field == 'nsfw':
+                    self.db_ref.child(f'{model_path}/metadata/nsfw').set(value)
+                else:
+                    self.db_ref.child(f'{model_path}/{field}').set(value)
+            else:
+                # Update mock data
+                if category in self.mock_data and model_id in self.mock_data[category]["models"]:
+                    if field == 'tags':
+                        self.mock_data[category]["models"][model_id][field] = [tag.strip() for tag in value.split(',') if tag.strip()]
+                    elif field == 'nsfw':
+                        self.mock_data[category]["models"][model_id]["metadata"]["nsfw"] = value
+                    else:
+                        self.mock_data[category]["models"][model_id][field] = value
+            
+            return True, "Model updated successfully"
+        except Exception as e:
+            return False, f"Error updating model: {str(e)}"
+    
+    def delete_model(self, category: str, model_id: str) -> tuple[bool, str]:
+        """Delete a model"""
+        try:
+            if self.db_ref:
+                model_path = f'models/categories/{category}/models/{model_id}'
+                self.db_ref.child(model_path).delete()
+            else:
+                # Delete from mock data
+                if category in self.mock_data and model_id in self.mock_data[category]["models"]:
+                    del self.mock_data[category]["models"][model_id]
+            
+            return True, "Model deleted successfully"
+        except Exception as e:
+            return False, f"Error deleting model: {str(e)}"
+    
+    def count_active_models(self, category: str) -> int:
+        """Count active models in a category"""
+        try:
+            models = self.get_models_by_category(category)
+            return sum(1 for model in models.values() if model.get('isActive', True))
+        except Exception as e:
+            print(f"Error counting models for {category}: {e}")
+            return 0
+
+# Initialize Firebase
+firebase = FirebaseManager()
+
+# Pydantic models
+class ModelCreate(BaseModel):
+    displayName: str
+    urn: str
+    tags: str = ""
+    isActive: bool = True
+    nsfw: bool = False
+
+class ModelUpdate(BaseModel):
+    field: str
+    value: Any
+
+# API Routes
+@app.get("/", response_class=HTMLResponse)
+async def read_root():
+    """Serve the main HTML page"""
+    return FileResponse('index.html')
+
+@app.get("/api/models")
+async def get_all_models():
+    """Get all models from all categories"""
+    models = firebase.get_all_models()
+    return {"models": models}
+
+@app.get("/api/models/{category}")
+async def get_models_by_category(category: str):
+    """Get models for a specific category"""
+    if category not in ["pony", "illustrious", "sdxl"]:
+        raise HTTPException(status_code=400, detail="Invalid category")
+    
+    models = firebase.get_models_by_category(category)
+    active_count = firebase.count_active_models(category)
+    
+    return {
+        "category": category,
+        "models": models,
+        "activeCount": active_count,
+        "maxModels": 25
+    }
+
+@app.post("/api/models/{category}")
+async def add_model(category: str, model: ModelCreate):
+    """Add a new model to a category"""
+    if category not in ["pony", "illustrious", "sdxl"]:
+        raise HTTPException(status_code=400, detail="Invalid category")
+    
+    model_data = {
+        'displayName': model.displayName,
+        'urn': model.urn,
+        'category': category,
+        'isActive': model.isActive,
+        'tags': [tag.strip() for tag in model.tags.split(',') if tag.strip()],
+        'metadata': {'nsfw': model.nsfw}
+    }
+    
+    success, message = firebase.add_model(category, model_data)
+    
+    if not success:
+        raise HTTPException(status_code=400, detail=message)
+    
+    return {"message": message}
+
+@app.put("/api/models/{category}/{model_id}")
+async def update_model(category: str, model_id: str, update: ModelUpdate):
+    """Update a specific field of a model"""
+    if category not in ["pony", "illustrious", "sdxl"]:
+        raise HTTPException(status_code=400, detail="Invalid category")
+    
+    success, message = firebase.update_model(category, model_id, update.field, update.value)
+    
+    if not success:
+        raise HTTPException(status_code=400, detail=message)
+    
+    return {"message": message}
+
+@app.delete("/api/models/{category}/{model_id}")
+async def delete_model(category: str, model_id: str):
+    """Delete a model"""
+    if category not in ["pony", "illustrious", "sdxl"]:
+        raise HTTPException(status_code=400, detail="Invalid category")
+    
+    success, message = firebase.delete_model(category, model_id)
+    
+    if not success:
+        raise HTTPException(status_code=400, detail=message)
+    
+    return {"message": message}
+
+# Serve static files
+app.mount("/static", StaticFiles(directory="static"), name="static")
+
+# Add CORS middleware for development
+from fastapi.middleware.cors import CORSMiddleware
+
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+if __name__ == "__main__":
+    import uvicorn
+    port = int(os.getenv('PORT', 8000))
+    print(f"Starting CatGPT Model Manager on http://127.0.0.1:{port}")
+    uvicorn.run(app, host="0.0.0.0", port=port)

index.html

@@ -0,0 +1,188 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CatGPT Model Manager</title>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <link href="/static/styles.css" rel="stylesheet">
+</head>
+<body>
+    <div class="app">
+        <!-- Header -->
+        <header class="header">
+            <div class="container">
+                <div class="header-content">
+                    <div class="logo">
+                        <i class="fas fa-robot"></i>
+                        <h1>CatGPT Model Manager</h1>
+                    </div>
+                    <div class="header-stats">
+                        <button class="theme-toggle" id="themeToggle" title="Toggle dark mode">
+                            <i class="fas fa-moon" id="themeIcon"></i>
+                        </button>
+                        <div class="stat-card">
+                            <span class="stat-value" id="totalModels">0</span>
+                            <span class="stat-label">Total Models</span>
+                        </div>
+                        <div class="stat-card">
+                            <span class="stat-value" id="activeModels">0</span>
+                            <span class="stat-label">Active Models</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </header>
+
+        <!-- Main Content -->
+        <main class="main">
+            <div class="container">
+                <!-- Category Tabs -->
+                <div class="tabs">
+                    <button class="tab-button active" data-category="pony">
+                        <i class="fas fa-horse"></i>
+                        <span>Pony Models</span>
+                        <span class="badge" id="ponyCount">0</span>
+                    </button>
+                    <button class="tab-button" data-category="illustrious">
+                        <i class="fas fa-palette"></i>
+                        <span>Illustrious Models</span>
+                        <span class="badge" id="illustriousCount">0</span>
+                    </button>
+                    <button class="tab-button" data-category="sdxl">
+                        <i class="fas fa-image"></i>
+                        <span>SDXL Models</span>
+                        <span class="badge" id="sdxlCount">0</span>
+                    </button>
+                </div>
+
+                <!-- Tab Content -->
+                <div class="tab-content">
+                    <!-- Add Model Form -->
+                    <div class="add-model-section">
+                        <div class="section-header">
+                            <h2><i class="fas fa-plus-circle"></i> Add New Model</h2>
+                        </div>
+                        <form class="add-model-form" id="addModelForm">
+                            <div class="form-row">
+                                <div class="form-group">
+                                    <label for="displayName">Display Name</label>
+                                    <input type="text" id="displayName" name="displayName" placeholder="e.g., Pony Diffusion V6" required>
+                                </div>
+                                <div class="form-group">
+                                    <label for="urn">URN</label>
+                                    <input type="text" id="urn" name="urn" placeholder="e.g., @cf/bytedance/stable-diffusion-xl-lightning" required>
+                                </div>
+                            </div>
+                            <button type="submit" class="btn btn-primary">
+                                <i class="fas fa-plus"></i>
+                                Add Model
+                            </button>
+                        </form>
+                    </div>
+
+                    <!-- Models List -->
+                    <div class="models-section">
+                        <div class="section-header">
+                            <h2><i class="fas fa-list"></i> Models (<span id="currentCategory">Pony</span>)</h2>
+                        </div>
+                        
+                        <div class="image-filters">
+                            <div class="filter-group">
+                                <label for="sortFilter">Sort by:</label>
+                                <select id="sortFilter" class="filter-select">
+                                    <option value="Most Reactions">Most Reactions</option>
+                                    <option value="Most Comments">Most Comments</option>
+                                    <option value="Newest">Newest</option>
+                                </select>
+                            </div>
+                            <div class="filter-group">
+                                <label for="nsfwFilter">NSFW:</label>
+                                <select id="nsfwFilter" class="filter-select">
+                                    <option value="None">None</option>
+                                    <option value="Soft">Soft</option>
+                                    <option value="Mature">Mature</option>
+                                    <option value="X">X</option>
+                                </select>
+                            </div>
+                            <div class="filter-group">
+                                <label for="periodFilter">Period:</label>
+                                <select id="periodFilter" class="filter-select">
+                                    <option value="AllTime">All Time</option>
+                                    <option value="Year">Year</option>
+                                    <option value="Month">Month</option>
+                                    <option value="Week">Week</option>
+                                    <option value="Day">Day</option>
+                                </select>
+                            </div>
+                            <button class="btn btn-outline" id="refreshBtn">
+                                <i class="fas fa-sync-alt"></i>
+                                Refresh
+                            </button>
+                        </div>
+
+                        <div class="models-grid" id="modelsGrid">
+                            <!-- Models will be loaded here -->
+                        </div>
+                        
+                        <div class="empty-state" id="emptyState" style="display: none;">
+                            <i class="fas fa-inbox"></i>
+                            <h3>No models found</h3>
+                            <p>Add your first model using the form above.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+
+        <!-- Loading Overlay -->
+        <div class="loading-overlay" id="loadingOverlay">
+            <div class="loading-spinner">
+                <i class="fas fa-spinner fa-spin"></i>
+                <span>Loading...</span>
+            </div>
+        </div>
+
+        <!-- Toast Notifications -->
+        <div class="toast-container" id="toastContainer"></div>
+
+        <!-- Edit Model Modal -->
+        <div class="modal-overlay" id="modalOverlay">
+            <div class="modal">
+                <div class="modal-header">
+                    <h3><i class="fas fa-edit"></i> Edit Model</h3>
+                    <button class="modal-close" id="modalClose">
+                        <i class="fas fa-times"></i>
+                    </button>
+                </div>
+                <div class="modal-body">
+                    <form id="editModelForm">
+                        <div class="form-group">
+                            <label for="editDisplayName">Display Name</label>
+                            <input type="text" id="editDisplayName" name="displayName" required>
+                        </div>
+                        <div class="form-group">
+                            <label for="editUrn">URN</label>
+                            <input type="text" id="editUrn" name="urn" required>
+                        </div>
+                    </form>
+                </div>
+                <div class="modal-footer">
+                    <button class="btn btn-outline" id="modalCancel">Cancel</button>
+                    <button class="btn btn-primary" id="modalSave">
+                        <i class="fas fa-save"></i>
+                        Save Changes
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <footer class="app-footer">
+        <p>For aRfy's Cat Bot</p>
+    </footer>
+
+    <script src="/static/app.js"></script>
+</body>
+</html>

requirements.txt

@@ -0,0 +1,6 @@
+gradio==4.44.0
+firebase-admin==6.5.0
+python-dotenv==1.0.0
+pandas==2.2.0
+fastapi==0.104.1
+uvicorn==0.24.0

static/app.js

@@ -0,0 +1,1309 @@
+// Modern JavaScript Application
+class ModelManager {
+    constructor() {
+        this.currentCategory = 'pony';
+        this.models = {};
+        this.editingModel = null;
+        this.imageCache = new Map(); // Cache for model images
+        
+        this.init();
+    }
+    
+    init() {
+        this.initTheme();
+        this.bindEvents();
+        this.loadAllModels();
+    }
+    
+    bindEvents() {
+        // Tab switching
+        document.querySelectorAll('.tab-button').forEach(button => {
+            button.addEventListener('click', (e) => {
+                const category = e.currentTarget.dataset.category;
+                this.switchCategory(category);
+            });
+        });
+        
+        // Add model form
+        document.getElementById('addModelForm').addEventListener('submit', (e) => {
+            e.preventDefault();
+            this.addModel();
+        });
+        
+        // Refresh button
+        document.getElementById('refreshBtn').addEventListener('click', () => {
+            this.loadModels(this.currentCategory);
+        });
+        
+        // Image filter controls
+        document.getElementById('sortFilter').addEventListener('change', () => {
+            this.refreshAllImages(true);
+        });
+        
+        document.getElementById('nsfwFilter').addEventListener('change', () => {
+            this.refreshAllImages(true);
+        });
+        
+        document.getElementById('periodFilter').addEventListener('change', () => {
+            this.refreshAllImages(true);
+        });
+        
+        // Modal events
+        document.getElementById('modalClose').addEventListener('click', () => {
+            this.closeModal();
+        });
+        
+        document.getElementById('modalCancel').addEventListener('click', () => {
+            this.closeModal();
+        });
+        
+        document.getElementById('modalSave').addEventListener('click', () => {
+            this.saveModelEdit();
+        });
+        
+        document.getElementById('modalOverlay').addEventListener('click', (e) => {
+            if (e.target === e.currentTarget) {
+                this.closeModal();
+            }
+        });
+        
+        // Edit form
+        document.getElementById('editModelForm').addEventListener('submit', (e) => {
+            e.preventDefault();
+            this.saveModelEdit();
+        });
+        
+        // Theme toggle
+        document.getElementById('themeToggle').addEventListener('click', () => {
+            this.toggleTheme();
+        });
+    }
+    
+    async loadAllModels() {
+        this.showLoading(true);
+        try {
+            const response = await fetch('/api/models');
+            if (!response.ok) throw new Error('Failed to load models');
+            
+            const data = await response.json();
+            this.models = data.models;
+            
+            this.updateStats();
+            this.updateCategoryCounts();
+            this.renderModels();
+        } catch (error) {
+            this.showToast('Error loading models', error.message, 'error');
+            console.error('Error loading models:', error);
+        } finally {
+            this.showLoading(false);
+        }
+    }
+    
+    async loadModels(category) {
+        this.showLoading(true);
+        try {
+            const response = await fetch(`/api/models/${category}`);
+            if (!response.ok) throw new Error('Failed to load models');
+            
+            const data = await response.json();
+            this.models[category] = { models: data.models };
+            
+            this.updateStats();
+            this.updateCategoryCounts();
+            this.renderModels();
+        } catch (error) {
+            this.showToast('Error loading models', error.message, 'error');
+            console.error('Error loading models:', error);
+        } finally {
+            this.showLoading(false);
+        }
+    }
+    
+    switchCategory(category) {
+        this.currentCategory = category;
+        
+        // Update active tab
+        document.querySelectorAll('.tab-button').forEach(btn => {
+            btn.classList.remove('active');
+        });
+        document.querySelector(`[data-category="${category}"]`).classList.add('active');
+        
+        // Update current category display
+        document.getElementById('currentCategory').textContent = 
+            category.charAt(0).toUpperCase() + category.slice(1);
+        
+        this.renderModels();
+    }
+    
+    async addModel() {
+        const form = document.getElementById('addModelForm');
+        const formData = new FormData(form);
+        
+        const modelData = {
+            displayName: formData.get('displayName'),
+            urn: formData.get('urn'),
+            tags: '',
+            isActive: true,
+            nsfw: false
+        };
+        
+        this.showLoading(true);
+        try {
+            const response = await fetch(`/api/models/${this.currentCategory}`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(modelData)
+            });
+            
+            if (!response.ok) {
+                const error = await response.json();
+                throw new Error(error.detail || 'Failed to add model');
+            }
+            
+            const result = await response.json();
+            this.showToast('Success', result.message, 'success');
+            
+            // Clear form
+            form.reset();
+            
+            // Reload models
+            await this.loadModels(this.currentCategory);
+            
+        } catch (error) {
+            this.showToast('Error adding model', error.message, 'error');
+            console.error('Error adding model:', error);
+        } finally {
+            this.showLoading(false);
+        }
+    }
+    
+    renderModels() {
+        const grid = document.getElementById('modelsGrid');
+        const emptyState = document.getElementById('emptyState');
+        
+        const categoryModels = this.models[this.currentCategory]?.models || {};
+        const modelEntries = Object.entries(categoryModels);
+        
+        if (modelEntries.length === 0) {
+            grid.style.display = 'none';
+            emptyState.style.display = 'block';
+            return;
+        }
+        
+        grid.style.display = 'grid';
+        emptyState.style.display = 'none';
+        
+        grid.innerHTML = modelEntries.map(([id, model]) => this.createModelCard(id, model)).join('');
+        
+        // Load thumbnails for each model
+        modelEntries.forEach(([id, model]) => {
+            this.loadModelImages(id, model.urn);
+        });
+        
+        // Bind events for action buttons
+        this.bindModelCardEvents();
+    }
+    
+    createModelCard(id, model) {
+        return `
+            <div class="model-card" data-model-id="${id}">
+                <div class="model-thumbnail-carousel" id="carousel-${id}">
+                    <div class="carousel-container">
+                        <button class="carousel-btn carousel-prev" data-model-id="${id}">
+                            <i class="fas fa-chevron-left"></i>
+                        </button>
+                        
+                        <div class="carousel-images" id="images-${id}">
+                            <div class="thumbnail-placeholder">
+                                <i class="fas fa-image"></i>
+                                <span>Loading images...</span>
+                            </div>
+                        </div>
+                        
+                        <button class="carousel-btn carousel-next" data-model-id="${id}">
+                            <i class="fas fa-chevron-right"></i>
+                        </button>
+                    </div>
+                    
+                    <div class="carousel-indicators" id="indicators-${id}"></div>
+                </div>
+                
+                <div class="model-content">
+                    <div class="model-header">
+                        <div>
+                            ${this.createModelTitleLink(model.displayName, model.urn)}
+                        </div>
+                    </div>
+                    
+                    <div class="model-urn">${model.urn}</div>
+                    
+                    <div class="model-actions">
+                        <button class="btn btn-sm btn-outline edit-btn" data-model-id="${id}">
+                            <i class="fas fa-edit"></i>
+                            Edit
+                        </button>
+                        <button class="btn btn-sm btn-danger delete-btn" data-model-id="${id}">
+                            <i class="fas fa-trash"></i>
+                            Delete
+                        </button>
+                    </div>
+                </div>
+            </div>
+        `;
+    }
+    
+    bindModelCardEvents() {
+        // Edit buttons
+        document.querySelectorAll('.edit-btn').forEach(btn => {
+            btn.addEventListener('click', (e) => {
+                const modelId = e.currentTarget.dataset.modelId;
+                this.editModel(modelId);
+            });
+        });
+        
+        
+        // Delete buttons
+        document.querySelectorAll('.delete-btn').forEach(btn => {
+            btn.addEventListener('click', (e) => {
+                const modelId = e.currentTarget.dataset.modelId;
+                this.deleteModel(modelId);
+            });
+        });
+        
+        // Carousel navigation buttons
+        document.querySelectorAll('.carousel-prev').forEach(btn => {
+            btn.addEventListener('click', (e) => {
+                e.stopPropagation();
+                const modelId = e.currentTarget.dataset.modelId;
+                this.navigateCarousel(modelId, -1);
+            });
+        });
+        
+        document.querySelectorAll('.carousel-next').forEach(btn => {
+            btn.addEventListener('click', (e) => {
+                e.stopPropagation();
+                const modelId = e.currentTarget.dataset.modelId;
+                this.navigateCarousel(modelId, 1);
+            });
+        });
+    }
+    
+    editModel(modelId) {
+        const model = this.models[this.currentCategory]?.models[modelId];
+        if (!model) return;
+        
+        this.editingModel = { id: modelId, category: this.currentCategory };
+        
+        // Populate form
+        document.getElementById('editDisplayName').value = model.displayName;
+        document.getElementById('editUrn').value = model.urn;
+        
+        this.showModal();
+    }
+    
+    async saveModelEdit() {
+        if (!this.editingModel) return;
+        
+        const form = document.getElementById('editModelForm');
+        const formData = new FormData(form);
+        
+        const updates = [
+            { field: 'displayName', value: formData.get('displayName') },
+            { field: 'urn', value: formData.get('urn') }
+        ];
+        
+        this.showLoading(true);
+        try {
+            for (const update of updates) {
+                const response = await fetch(`/api/models/${this.editingModel.category}/${this.editingModel.id}`, {
+                    method: 'PUT',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify(update)
+                });
+                
+                if (!response.ok) {
+                    const error = await response.json();
+                    throw new Error(error.detail || 'Failed to update model');
+                }
+            }
+            
+            this.showToast('Success', 'Model updated successfully', 'success');
+            this.closeModal();
+            await this.loadModels(this.currentCategory);
+            
+        } catch (error) {
+            this.showToast('Error updating model', error.message, 'error');
+            console.error('Error updating model:', error);
+        } finally {
+            this.showLoading(false);
+        }
+    }
+    
+    
+    async deleteModel(modelId) {
+        const model = this.models[this.currentCategory]?.models[modelId];
+        if (!model) return;
+        
+        if (!confirm(`Are you sure you want to delete "${model.displayName}"? This action cannot be undone.`)) {
+            return;
+        }
+        
+        this.showLoading(true);
+        try {
+            const response = await fetch(`/api/models/${this.currentCategory}/${modelId}`, {
+                method: 'DELETE'
+            });
+            
+            if (!response.ok) {
+                const error = await response.json();
+                throw new Error(error.detail || 'Failed to delete model');
+            }
+            
+            const result = await response.json();
+            this.showToast('Success', result.message, 'success');
+            
+            await this.loadModels(this.currentCategory);
+            
+        } catch (error) {
+            this.showToast('Error deleting model', error.message, 'error');
+            console.error('Error deleting model:', error);
+        } finally {
+            this.showLoading(false);
+        }
+    }
+    
+    updateStats() {
+        let totalModels = 0;
+        let activeModels = 0;
+        
+        Object.values(this.models).forEach(category => {
+            if (category.models) {
+                Object.values(category.models).forEach(model => {
+                    totalModels++;
+                    if (model.isActive) activeModels++;
+                });
+            }
+        });
+        
+        document.getElementById('totalModels').textContent = totalModels;
+        document.getElementById('activeModels').textContent = activeModels;
+    }
+    
+    updateCategoryCounts() {
+        ['pony', 'illustrious', 'sdxl'].forEach(category => {
+            const models = this.models[category]?.models || {};
+            const activeCount = Object.values(models).filter(model => model.isActive).length;
+            document.getElementById(`${category}Count`).textContent = activeCount;
+        });
+    }
+    
+    showModal() {
+        document.getElementById('modalOverlay').classList.add('active');
+        document.body.style.overflow = 'hidden';
+    }
+    
+    closeModal() {
+        document.getElementById('modalOverlay').classList.remove('active');
+        document.body.style.overflow = '';
+        this.editingModel = null;
+    }
+    
+    showLoading(show) {
+        const overlay = document.getElementById('loadingOverlay');
+        if (show) {
+            overlay.classList.add('active');
+        } else {
+            overlay.classList.remove('active');
+        }
+    }
+    
+    showToast(title, message, type = 'success') {
+        const container = document.getElementById('toastContainer');
+        const toast = document.createElement('div');
+        toast.className = `toast ${type}`;
+        
+        const iconMap = {
+            success: 'fas fa-check-circle',
+            error: 'fas fa-exclamation-circle',
+            warning: 'fas fa-exclamation-triangle'
+        };
+        
+        toast.innerHTML = `
+            <i class="${iconMap[type]}"></i>
+            <div class="toast-content">
+                <div class="toast-title">${title}</div>
+                <div class="toast-message">${message}</div>
+            </div>
+            <button class="toast-close">
+                <i class="fas fa-times"></i>
+            </button>
+        `;
+        
+        container.appendChild(toast);
+        
+        // Animate in
+        setTimeout(() => toast.classList.add('show'), 100);
+        
+        // Bind close button
+        toast.querySelector('.toast-close').addEventListener('click', () => {
+            this.removeToast(toast);
+        });
+        
+        // Auto remove after 5 seconds
+        setTimeout(() => {
+            if (toast.parentNode) {
+                this.removeToast(toast);
+            }
+        }, 5000);
+    }
+    
+    removeToast(toast) {
+        toast.classList.remove('show');
+        setTimeout(() => {
+            if (toast.parentNode) {
+                toast.parentNode.removeChild(toast);
+            }
+        }, 300);
+    }
+    
+    // URN Parsing and Image Loading Functions
+    createModelTitleLink(displayName, urn) {
+        const urnData = this.parseUrn(urn);
+        
+        if (urnData && urnData.source === 'civitai') {
+            const civitaiUrl = `https://civitai.com/models/${urnData.modelId}?modelVersionId=${urnData.modelVersionId}`;
+            return `<a href="${civitaiUrl}" target="_blank" class="model-title-link" title="View on Civitai">
+                        <div class="model-title">${displayName}</div>
+                        <i class="fas fa-external-link-alt model-external-link"></i>
+                    </a>`;
+        } else {
+            // Fallback for non-Civitai models
+            return `<div class="model-title">${displayName}</div>`;
+        }
+    }
+
+    parseUrn(urn) {
+        // Parse URN format: urn:air:sdxl:checkpoint:civitai:1465491@1892573
+        // Extract modelId and modelVersionId from civitai section
+        if (!urn.includes('civitai:')) {
+            return null;
+        }
+        
+        const civitaiPart = urn.split('civitai:')[1];
+        if (!civitaiPart) return null;
+        
+        const parts = civitaiPart.split('@');
+        const modelId = parts[0];
+        const modelVersionId = parts[1];
+        
+        return {
+            modelId: modelId,
+            modelVersionId: modelVersionId,
+            source: 'civitai'
+        };
+    }
+    
+    async loadModelImages(cardId, urn, forceRefresh = false) {
+        const imagesContainer = document.getElementById(`images-${cardId}`);
+        const indicatorsContainer = document.getElementById(`indicators-${cardId}`);
+        if (!imagesContainer || !indicatorsContainer) return;
+        
+        // Show loading state
+        imagesContainer.innerHTML = '<div class="loading-spinner">Loading images...</div>';
+        indicatorsContainer.innerHTML = '';
+        
+        // Get current filter settings
+        const sortFilter = document.getElementById('sortFilter')?.value || 'Most Reactions';
+        const nsfwFilter = document.getElementById('nsfwFilter')?.value || 'None';
+        const periodFilter = document.getElementById('periodFilter')?.value || 'AllTime';
+        
+        // Create cache key with filters
+        const cacheKey = `${urn}-${sortFilter}-${nsfwFilter}-${periodFilter}`;
+        
+        // Check cache first (unless force refresh)
+        if (!forceRefresh && this.imageCache.has(cacheKey)) {
+            const cachedImages = this.imageCache.get(cacheKey);
+            this.displayCarousel(cardId, cachedImages);
+            return;
+        }
+        
+        const urnData = this.parseUrn(urn);
+        if (!urnData) {
+            this.displayFallbackCarousel(imagesContainer, 'Invalid URN format');
+            return;
+        }
+        
+        try {
+            // Build API URL with dynamic filters
+            let apiUrl = `https://civitai.com/api/v1/images?modelVersionId=${urnData.modelVersionId}&limit=20`;
+            
+            // Add sort parameter
+            const sortParam = encodeURIComponent(sortFilter);
+            apiUrl += `&sort=${sortParam}`;
+            
+            // Add period parameter
+            if (periodFilter !== 'AllTime') {
+                apiUrl += `&period=${periodFilter}`;
+            }
+            
+            // Add NSFW filtering based on level
+            if (nsfwFilter === 'None') {
+                apiUrl += '&nsfw=false';
+            } else {
+                apiUrl += '&nsfw=true';
+                // Note: Civitai API doesn't support specific NSFW levels in filtering
+                // We'll filter client-side if needed
+            }
+            
+            console.log('Fetching images with filters:', { sort: sortFilter, nsfw: nsfwFilter, period: periodFilter, url: apiUrl });
+            
+            // Fetch images from Civitai API
+            const response = await fetch(apiUrl,
+                {
+                    method: 'GET',
+                    headers: {
+                        'Accept': 'application/json',
+                    }
+                }
+            );
+            
+            if (!response.ok) {
+                throw new Error(`API response: ${response.status}`);
+            }
+            
+            const data = await response.json();
+            
+            if (data.items && data.items.length > 0) {
+                // Filter images based on NSFW level
+                let filteredImages = data.items;
+                
+                if (nsfwFilter === 'None') {
+                    filteredImages = data.items.filter(img => !img.nsfw);
+                } else if (nsfwFilter === 'Soft') {
+                    filteredImages = data.items.filter(img => !img.nsfw || img.nsfwLevel <= 1);
+                } else if (nsfwFilter === 'Mature') {
+                    filteredImages = data.items.filter(img => !img.nsfw || img.nsfwLevel <= 2);
+                }
+                // For 'X' level, we include all images (no additional filtering)
+                
+                if (filteredImages.length === 0) {
+                    const filterMsg = this.getFilterMessage(sortFilter, nsfwFilter, periodFilter);
+                    this.displayFallbackCarousel(imagesContainer, `No results for ${filterMsg}`);
+                    return;
+                }
+                
+                const selectedImages = filteredImages.slice(0, 10).map(img => {
+                    // Get the original full-size URL by removing width parameter
+                    const originalUrl = img.url.replace(/\/width=\d+/, '');
+                    console.log('Original URL:', img.url, '-> Full size:', originalUrl);
+                    console.log('Image metadata:', img.meta);
+                    return {
+                        url: img.url, // For thumbnail display
+                        originalUrl: originalUrl, // For modal display
+                        width: img.width,
+                        height: img.height,
+                        nsfw: img.nsfw,
+                        meta: img.meta || {} // Include metadata from Civitai
+                    };
+                });
+                
+                // Cache the result with filter-specific key
+                this.imageCache.set(cacheKey, selectedImages);
+                
+                this.displayCarousel(cardId, selectedImages);
+            } else {
+                const filterMsg = this.getFilterMessage(sortFilter, nsfwFilter, periodFilter);
+                this.displayFallbackCarousel(imagesContainer, `No results for ${filterMsg}`);
+            }
+            
+        } catch (error) {
+            console.error('Error loading images:', error);
+            this.displayFallbackCarousel(imagesContainer, 'Failed to load');
+        }
+    }
+    
+    displayCarousel(cardId, images) {
+        const imagesContainer = document.getElementById(`images-${cardId}`);
+        const indicatorsContainer = document.getElementById(`indicators-${cardId}`);
+        const carouselContainer = document.getElementById(`carousel-${cardId}`);
+        
+        if (!imagesContainer || !indicatorsContainer) return;
+        
+        // Store images data on the carousel container
+        carouselContainer.dataset.images = JSON.stringify(images);
+        carouselContainer.dataset.currentIndex = '0';
+        
+        // Create image elements
+        imagesContainer.innerHTML = images.map((img, index) => {
+            console.log(`Creating image ${index}:`, img.url, 'Full:', img.originalUrl, img.width, img.height); // Debug log
+            return `
+                <img src="${img.url}" 
+                     alt="Model image ${index + 1}" 
+                     class="carousel-image ${index === 0 ? 'active' : ''}" 
+                     data-index="${index}"
+                     data-full-url="${img.originalUrl || img.url}"
+                     data-width="${img.width}"
+                     data-height="${img.height}"
+                     onload="this.classList.add('loaded')"
+                     onerror="this.style.display='none'">
+            `;
+        }).join('');
+        
+        // Create indicators
+        if (images.length > 1) {
+            indicatorsContainer.innerHTML = images.map((_, index) => `
+                <button class="carousel-indicator ${index === 0 ? 'active' : ''}" 
+                        data-index="${index}" 
+                        onclick="modelManager.goToSlide('${cardId}', ${index})"></button>
+            `).join('');
+            indicatorsContainer.style.display = 'flex';
+        } else {
+            indicatorsContainer.style.display = 'none';
+        }
+        
+        // Show/hide navigation buttons
+        const prevBtn = carouselContainer.querySelector('.carousel-prev');
+        const nextBtn = carouselContainer.querySelector('.carousel-next');
+        if (images.length > 1) {
+            prevBtn.style.display = 'flex';
+            nextBtn.style.display = 'flex';
+        } else {
+            prevBtn.style.display = 'none';
+            nextBtn.style.display = 'none';
+        }
+        
+        // Add click event listener to the images container (event delegation)
+        imagesContainer.addEventListener('click', (e) => {
+            if (e.target.classList.contains('carousel-image')) {
+                // CSS pointer-events should ensure only active images are clickable
+                const url = e.target.dataset.fullUrl;
+                const width = parseInt(e.target.dataset.width);
+                const height = parseInt(e.target.dataset.height);
+                const index = parseInt(e.target.dataset.index);
+                
+                // Add bounce animation to clicked thumbnail
+                const clickedImage = e.target;
+                clickedImage.style.transform = 'scale(0.9)';
+                setTimeout(() => {
+                    clickedImage.style.transform = 'scale(1)';
+                }, 100);
+                
+                console.log('Clicked image index:', index, 'URL:', url, 'Dimensions:', width, 'x', height);
+                this.openImageModal(url, width, height, cardId, index);
+            }
+        });
+    }
+    
+    async refreshAllImages(forceRefresh = false) {
+        try {
+            // Get all currently displayed models
+            const modelCards = document.querySelectorAll('.model-card');
+            const refreshPromises = [];
+            
+            modelCards.forEach(card => {
+                const cardId = card.id;
+                const urnElement = card.querySelector('.model-urn');
+                if (urnElement) {
+                    const urn = urnElement.textContent.trim();
+                    refreshPromises.push(this.loadModelImages(cardId, urn, forceRefresh));
+                }
+            });
+            
+            // Wait for all images to refresh
+            await Promise.all(refreshPromises);
+            
+        } catch (error) {
+            console.error('Error refreshing images:', error);
+        }
+    }
+    
+    getFilterMessage(sortFilter, nsfwFilter, periodFilter) {
+        const sortMsg = sortFilter === 'Most Reactions' ? 'most liked' : 
+                       sortFilter === 'Most Comments' ? 'most commented' : 'newest';
+        const nsfwMsg = nsfwFilter === 'None' ? 'safe content' :
+                       nsfwFilter === 'Soft' ? 'soft content' :
+                       nsfwFilter === 'Mature' ? 'mature content' : 'all content';
+        const periodMsg = periodFilter === 'AllTime' ? '' :
+                         periodFilter === 'Year' ? 'this year' :
+                         periodFilter === 'Month' ? 'this month' :
+                         periodFilter === 'Week' ? 'this week' : 'today';
+        
+        const timePrefix = periodMsg ? `${periodMsg} ` : '';
+        return `${timePrefix}${sortMsg} ${nsfwMsg} filter`;
+    }
+    
+    displayFallbackCarousel(container, message) {
+        container.innerHTML = `
+            <div class="thumbnail-fallback">
+                <i class="fas fa-image"></i>
+                <span>${message}</span>
+            </div>
+        `;
+    }
+    
+    navigateCarousel(cardId, direction) {
+        const carouselContainer = document.getElementById(`carousel-${cardId}`);
+        if (!carouselContainer) return;
+        
+        const images = JSON.parse(carouselContainer.dataset.images || '[]');
+        const currentIndex = parseInt(carouselContainer.dataset.currentIndex || '0');
+        const newIndex = (currentIndex + direction + images.length) % images.length;
+        
+        this.goToSlide(cardId, newIndex);
+    }
+    
+    goToSlide(cardId, index) {
+        const carouselContainer = document.getElementById(`carousel-${cardId}`);
+        const imagesContainer = document.getElementById(`images-${cardId}`);
+        const indicatorsContainer = document.getElementById(`indicators-${cardId}`);
+        
+        if (!carouselContainer || !imagesContainer) return;
+        
+        // Update current index
+        carouselContainer.dataset.currentIndex = index.toString();
+        
+        // Update active image
+        const imageElements = imagesContainer.querySelectorAll('.carousel-image');
+        imageElements.forEach((img, i) => {
+            img.classList.toggle('active', i === index);
+        });
+        
+        // Update active indicator
+        const indicatorElements = indicatorsContainer.querySelectorAll('.carousel-indicator');
+        indicatorElements.forEach((indicator, i) => {
+            indicator.classList.toggle('active', i === index);
+        });
+    }
+    
+    openImageModal(imageUrl, width, height, cardId = null, imageIndex = 0) {
+        console.log('Opening modal with:', imageUrl, width, height); // Debug log
+        
+        // Create modal if it doesn't exist
+        let modal = document.getElementById('imageModal');
+        if (!modal) {
+            modal = document.createElement('div');
+            modal.id = 'imageModal';
+            modal.className = 'image-modal-overlay';
+            modal.innerHTML = `
+                <div class="image-modal">
+                    <button class="image-modal-close">
+                        <i class="fas fa-times"></i>
+                    </button>
+                    
+                    <button class="modal-nav modal-prev" id="modalPrev">
+                        <i class="fas fa-chevron-left"></i>
+                    </button>
+                    
+                    <button class="modal-nav modal-next" id="modalNext">
+                        <i class="fas fa-chevron-right"></i>
+                    </button>
+                    
+                    <div class="image-modal-content" id="modalContent">
+                        <img id="modalImage" src="" alt="Full size image">
+                    </div>
+                    
+                    <div class="image-modal-controls">
+                        <button class="zoom-btn" id="zoomIn" title="Zoom In">
+                            <i class="fas fa-search-plus"></i>
+                        </button>
+                        <button class="zoom-btn" id="zoomOut" title="Zoom Out">
+                            <i class="fas fa-search-minus"></i>
+                        </button>
+                        <button class="zoom-btn" id="zoomReset" title="Reset Zoom">
+                            <i class="fas fa-expand-arrows-alt"></i>
+                        </button>
+                    </div>
+                    
+                    <div class="image-modal-info">
+                        <span id="imageDimensions"></span>
+                        <span id="imageCounter"></span>
+                    </div>
+                    
+                    <div class="image-modal-metadata">
+                        <button class="metadata-toggle" id="metadataToggle">
+                            <i class="fas fa-info-circle"></i>
+                            <span>Image Details</span>
+                            <i class="fas fa-chevron-up toggle-icon"></i>
+                        </button>
+                        <div class="metadata-content" id="metadataContent">
+                            <div class="metadata-grid">
+                                <div class="metadata-item">
+                                    <span class="metadata-label">Size:</span>
+                                    <span class="metadata-value" id="metaSize">-</span>
+                                </div>
+                                <div class="metadata-item">
+                                    <span class="metadata-label">Seed:</span>
+                                    <span class="metadata-value" id="metaSeed">-</span>
+                                </div>
+                                <div class="metadata-item">
+                                    <span class="metadata-label">Steps:</span>
+                                    <span class="metadata-value" id="metaSteps">-</span>
+                                </div>
+                                <div class="metadata-item">
+                                    <span class="metadata-label">Sampler:</span>
+                                    <span class="metadata-value" id="metaSampler">-</span>
+                                </div>
+                                <div class="metadata-item">
+                                    <span class="metadata-label">CFG Scale:</span>
+                                    <span class="metadata-value" id="metaCfgScale">-</span>
+                                </div>
+                                <div class="metadata-item">
+                                    <span class="metadata-label">CLIP Skip:</span>
+                                    <span class="metadata-value" id="metaClipSkip">-</span>
+                                </div>
+                            </div>
+                            <div class="metadata-prompt">
+                                <span class="metadata-label">Prompt:</span>
+                                <div class="metadata-value" id="metaPrompt">-</div>
+                            </div>
+                            <div class="metadata-prompt" id="negativePromptSection">
+                                <span class="metadata-label">Negative Prompt:</span>
+                                <div class="metadata-value" id="metaNegativePrompt">-</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            `;
+            document.body.appendChild(modal);
+            
+            this.initializeModalEvents(modal);
+        }
+        
+        // Store modal state
+        modal.dataset.cardId = cardId || '';
+        modal.dataset.currentIndex = imageIndex.toString();
+        
+        // Show modal with bouncy entrance animation
+        modal.classList.add('active');
+        document.body.style.overflow = 'hidden';
+        
+        // Set image and show modal after a small delay for better animation
+        setTimeout(() => {
+            this.updateModalImage(imageUrl, width, height);
+            this.updateModalNavigation();
+            this.updateModalMetadata(cardId, imageIndex);
+            
+            // Ensure image starts at fitted size
+            this.resetModalZoom();
+        }, 50);
+    }
+    
+    initializeModalEvents(modal) {
+        // Initialize zoom state on the modal element
+        this.initializeModalZoomState(modal);
+        
+        // Close modal events
+        modal.addEventListener('click', (e) => {
+            if (e.target === modal) {
+                this.closeImageModal();
+            }
+        });
+        
+        modal.querySelector('.image-modal-close').addEventListener('click', () => {
+            this.closeImageModal();
+        });
+        
+        // Metadata toggle functionality
+        const metadataToggle = modal.querySelector('#metadataToggle');
+        const metadataContent = modal.querySelector('#metadataContent');
+        
+        metadataToggle.addEventListener('click', () => {
+            const isExpanded = metadataContent.classList.contains('expanded');
+            
+            if (isExpanded) {
+                metadataContent.classList.remove('expanded');
+                metadataToggle.classList.remove('expanded');
+            } else {
+                metadataContent.classList.add('expanded');
+                metadataToggle.classList.add('expanded');
+            }
+        });
+        
+        // Navigation events
+        document.getElementById('modalPrev').addEventListener('click', () => {
+            this.navigateModalImage(-1);
+        });
+        
+        document.getElementById('modalNext').addEventListener('click', () => {
+            this.navigateModalImage(1);
+        });
+        
+        // Zoom events
+        const modalImage = document.getElementById('modalImage');
+        const modalContent = document.getElementById('modalContent');
+        
+        document.getElementById('zoomIn').addEventListener('click', () => {
+            modal.zoomLevel = Math.min(modal.zoomLevel * 1.5, 5);
+            this.applyZoom(modalImage, modal.zoomLevel, modal.currentX, modal.currentY);
+        });
+        
+        document.getElementById('zoomOut').addEventListener('click', () => {
+            modal.zoomLevel = Math.max(modal.zoomLevel / 1.5, 0.5);
+            this.applyZoom(modalImage, modal.zoomLevel, modal.currentX, modal.currentY);
+        });
+        
+        document.getElementById('zoomReset').addEventListener('click', () => {
+            this.resetModalZoom();
+        });
+        
+        // Double-click to zoom
+        modalImage.addEventListener('dblclick', () => {
+            if (modal.zoomLevel === 1) {
+                modal.zoomLevel = 2;
+                this.applyZoom(modalImage, modal.zoomLevel, modal.currentX, modal.currentY);
+            } else {
+                this.resetModalZoom();
+            }
+        });
+        
+        // Drag to pan when zoomed
+        modalImage.addEventListener('mousedown', (e) => {
+            if (modal.zoomLevel > 1) {
+                modal.isDragging = true;
+                modal.startX = e.clientX - modal.currentX;
+                modal.startY = e.clientY - modal.currentY;
+                modalImage.style.cursor = 'grabbing';
+            }
+        });
+        
+        document.addEventListener('mousemove', (e) => {
+            if (modal.isDragging && modal.zoomLevel > 1) {
+                modal.currentX = e.clientX - modal.startX;
+                modal.currentY = e.clientY - modal.startY;
+                this.applyZoom(modalImage, modal.zoomLevel, modal.currentX, modal.currentY);
+            }
+        });
+        
+        document.addEventListener('mouseup', () => {
+            if (modal.isDragging) {
+                modal.isDragging = false;
+                modalImage.style.cursor = modal.zoomLevel > 1 ? 'grab' : 'pointer';
+            }
+        });
+        
+        // Keyboard navigation
+        document.addEventListener('keydown', (e) => {
+            if (modal.classList.contains('active')) {
+                switch(e.key) {
+                    case 'Escape':
+                        this.closeImageModal();
+                        break;
+                    case 'ArrowLeft':
+                        this.navigateModalImage(-1);
+                        break;
+                    case 'ArrowRight':
+                        this.navigateModalImage(1);
+                        break;
+                    case '+':
+                    case '=':
+                        document.getElementById('zoomIn').click();
+                        break;
+                    case '-':
+                        document.getElementById('zoomOut').click();
+                        break;
+                    case '0':
+                        document.getElementById('zoomReset').click();
+                        break;
+                }
+            }
+        });
+    }
+    
+    applyZoom(image, zoom, x, y) {
+        image.style.transform = `scale(${zoom}) translate(${x/zoom}px, ${y/zoom}px)`;
+        image.style.cursor = zoom > 1 ? 'grab' : 'pointer';
+    }
+    
+    updateModalImage(imageUrl, width, height, direction = 0) {
+        const modalImage = document.getElementById('modalImage');
+        const imageDimensions = document.getElementById('imageDimensions');
+        
+        // Enhanced bouncy slide-out animation based on direction
+        modalImage.style.opacity = '0';
+        const slideDirection = direction > 0 ? '80px' : direction < 0 ? '-80px' : '0px';
+        const scaleDirection = direction !== 0 ? '0.85' : '0.9';
+        modalImage.style.transform = `scale(${scaleDirection}) translateX(${slideDirection}) rotateY(${direction * 5}deg)`;
+        
+        // Update dimensions immediately
+        imageDimensions.textContent = `${width} × ${height}px`;
+        
+        // Preload the image to avoid flicker
+        const tempImage = new Image();
+        tempImage.onload = () => {
+            // Clear any existing styles that might interfere
+            modalImage.style.width = '';
+            modalImage.style.height = '';
+            
+            // Set the source
+            modalImage.src = imageUrl;
+            
+            // Apply proper sizing immediately
+            this.ensureImageFitted(tempImage, modalImage);
+            
+            // Enhanced bouncy slide-in animation with multiple stages
+            setTimeout(() => {
+                modalImage.style.opacity = '1';
+                modalImage.style.transform = 'scale(1.05) translateX(0px) rotateY(0deg)';
+                
+                // Second bounce stage for extra bounciness
+                setTimeout(() => {
+                    modalImage.style.transform = 'scale(1) translateX(0px) rotateY(0deg)';
+                }, 200);
+            }, direction !== 0 ? 100 : 50);
+        };
+        
+        tempImage.onerror = () => {
+            // Fallback if image fails to load with gentle animation
+            modalImage.src = imageUrl;
+            modalImage.style.opacity = '1';
+            modalImage.style.transform = 'scale(1) translateX(0px) rotateY(0deg)';
+        };
+        
+        // Start preloading
+        tempImage.src = imageUrl;
+    }
+    
+    updateModalMetadata(cardId, imageIndex) {
+        // Get images from the carousel container where they're actually stored
+        const carouselContainer = document.getElementById(`carousel-${cardId}`);
+        if (!carouselContainer || !carouselContainer.dataset.images) {
+            console.log('No carousel container or images data found for metadata:', cardId);
+            this.clearModalMetadata();
+            return;
+        }
+        
+        const images = JSON.parse(carouselContainer.dataset.images || '[]');
+        if (!images[imageIndex]) {
+            console.log('No image found at index:', imageIndex, 'in images:', images);
+            this.clearModalMetadata();
+            return;
+        }
+        
+        const imageData = images[imageIndex];
+        console.log('Image data for metadata:', imageData);
+        console.log('Image meta property:', imageData.meta);
+        
+        const meta = imageData.meta || {};
+        console.log('Processed meta object:', meta);
+        
+        // Update metadata values
+        document.getElementById('metaSize').textContent = meta.Size || '-';
+        document.getElementById('metaSeed').textContent = meta.seed || '-';
+        document.getElementById('metaSteps').textContent = meta.steps || '-';
+        document.getElementById('metaSampler').textContent = meta.sampler || '-';
+        document.getElementById('metaCfgScale').textContent = meta.cfgScale || '-';
+        document.getElementById('metaClipSkip').textContent = meta.clipSkip || '-';
+        
+        // Update prompt (handle multiline text)
+        const promptElement = document.getElementById('metaPrompt');
+        promptElement.textContent = meta.prompt || '-';
+        
+        // Update negative prompt and show/hide section
+        const negativePromptElement = document.getElementById('metaNegativePrompt');
+        const negativePromptSection = document.getElementById('negativePromptSection');
+        
+        if (meta.negativePrompt) {
+            negativePromptElement.textContent = meta.negativePrompt;
+            negativePromptSection.style.display = 'block';
+        } else {
+            negativePromptSection.style.display = 'none';
+        }
+    }
+    
+    clearModalMetadata() {
+        // Clear all metadata values
+        const metaElements = [
+            'metaSize', 'metaSeed', 'metaSteps', 'metaSampler', 
+            'metaCfgScale', 'metaClipSkip', 'metaPrompt', 'metaNegativePrompt'
+        ];
+        
+        metaElements.forEach(id => {
+            const element = document.getElementById(id);
+            if (element) element.textContent = '-';
+        });
+        
+        // Hide negative prompt section
+        document.getElementById('negativePromptSection').style.display = 'none';
+    }
+    
+    initializeModalZoomState(modal) {
+        modal.zoomLevel = 1;
+        modal.isDragging = false;
+        modal.currentX = 0;
+        modal.currentY = 0;
+        modal.startX = 0;
+        modal.startY = 0;
+    }
+    
+    ensureImageFitted(sourceImage, targetImage = null) {
+        const modalImage = targetImage || sourceImage;
+        const modalContent = modalImage.parentElement;
+        
+        if (!modalContent) return;
+        
+        const containerWidth = modalContent.clientWidth;
+        const containerHeight = modalContent.clientHeight;
+        const imageWidth = sourceImage.naturalWidth || sourceImage.width;
+        const imageHeight = sourceImage.naturalHeight || sourceImage.height;
+        
+        console.log('Container:', containerWidth, 'x', containerHeight); // Debug log
+        console.log('Image natural size:', imageWidth, 'x', imageHeight); // Debug log
+        
+        // Calculate scale to fit entire image within container
+        const scaleX = containerWidth / imageWidth;
+        const scaleY = containerHeight / imageHeight;
+        const scale = Math.min(scaleX, scaleY, 1); // Don't scale up, only down
+        
+        console.log('Calculated scale:', scale); // Debug log
+        
+        // Apply the fitted size
+        modalImage.style.width = `${imageWidth * scale}px`;
+        modalImage.style.height = `${imageHeight * scale}px`;
+        modalImage.style.transform = 'scale(1) translate(0px, 0px)';
+    }
+    
+    resetModalZoom() {
+        const modal = document.getElementById('imageModal');
+        const modalImage = document.getElementById('modalImage');
+        
+        if (modal && modalImage) {
+            // Reset zoom state
+            modal.zoomLevel = 1;
+            modal.currentX = 0;
+            modal.currentY = 0;
+            modal.isDragging = false;
+            
+            // Clear any transforms and let CSS handle fitting
+            modalImage.style.transform = 'scale(1) translate(0px, 0px)';
+            modalImage.style.cursor = 'pointer';
+            
+            // Ensure proper fitting
+            if (modalImage.complete && modalImage.naturalWidth > 0) {
+                this.ensureImageFitted(modalImage);
+            }
+            
+            console.log('Modal zoom reset to fitted size'); // Debug log
+        }
+    }
+    
+    updateModalNavigation() {
+        const modal = document.getElementById('imageModal');
+        const cardId = modal.dataset.cardId;
+        const currentIndex = parseInt(modal.dataset.currentIndex || '0');
+        
+        const prevBtn = document.getElementById('modalPrev');
+        const nextBtn = document.getElementById('modalNext');
+        const counter = document.getElementById('imageCounter');
+        
+        if (cardId) {
+            const carouselContainer = document.getElementById(`carousel-${cardId}`);
+            if (carouselContainer) {
+                const images = JSON.parse(carouselContainer.dataset.images || '[]');
+                const totalImages = images.length;
+                
+                // Show/hide navigation buttons
+                prevBtn.style.display = totalImages > 1 ? 'flex' : 'none';
+                nextBtn.style.display = totalImages > 1 ? 'flex' : 'none';
+                
+                // Update counter
+                counter.textContent = totalImages > 1 ? `${currentIndex + 1} / ${totalImages}` : '';
+                
+                return;
+            }
+        }
+        
+        // Hide navigation if no carousel context
+        prevBtn.style.display = 'none';
+        nextBtn.style.display = 'none';
+        counter.textContent = '';
+    }
+    
+    navigateModalImage(direction) {
+        const modal = document.getElementById('imageModal');
+        const cardId = modal.dataset.cardId;
+        const currentIndex = parseInt(modal.dataset.currentIndex || '0');
+        
+        if (!cardId) return;
+        
+        const carouselContainer = document.getElementById(`carousel-${cardId}`);
+        if (!carouselContainer) return;
+        
+        const images = JSON.parse(carouselContainer.dataset.images || '[]');
+        const newIndex = (currentIndex + direction + images.length) % images.length;
+        const newImage = images[newIndex];
+        
+        if (newImage) {
+            modal.dataset.currentIndex = newIndex.toString();
+            this.updateModalImage(newImage.originalUrl || newImage.url, newImage.width, newImage.height, direction);
+            this.updateModalNavigation();
+            this.updateModalMetadata(cardId, newIndex);
+            
+            // Reset zoom and position when navigating to new image
+            this.resetModalZoom();
+        }
+    }
+    
+    closeImageModal() {
+        const modal = document.getElementById('imageModal');
+        if (modal) {
+            modal.classList.remove('active');
+            document.body.style.overflow = '';
+        }
+    }
+    
+    // Theme Management
+    initTheme() {
+        // Check for saved theme preference or default to light mode
+        const savedTheme = localStorage.getItem('theme') || 'light';
+        this.setTheme(savedTheme);
+    }
+    
+    toggleTheme() {
+        const currentTheme = document.documentElement.getAttribute('data-theme') || 'light';
+        const newTheme = currentTheme === 'light' ? 'dark' : 'light';
+        this.setTheme(newTheme);
+    }
+    
+    setTheme(theme) {
+        document.documentElement.setAttribute('data-theme', theme);
+        localStorage.setItem('theme', theme);
+        
+        // Update toggle button icon
+        const themeIcon = document.getElementById('themeIcon');
+        if (theme === 'dark') {
+            themeIcon.className = 'fas fa-sun';
+            themeIcon.parentElement.title = 'Switch to light mode';
+        } else {
+            themeIcon.className = 'fas fa-moon';
+            themeIcon.parentElement.title = 'Switch to dark mode';
+        }
+    }
+}
+
+// Initialize the application
+let modelManager;
+document.addEventListener('DOMContentLoaded', () => {
+    modelManager = new ModelManager();
+});
+
+// Handle keyboard shortcuts
+document.addEventListener('keydown', (e) => {
+    // Escape to close modal
+    if (e.key === 'Escape') {
+        const modal = document.getElementById('modalOverlay');
+        if (modal.classList.contains('active')) {
+            modal.classList.remove('active');
+            document.body.style.overflow = '';
+        }
+    }
+    
+    // Ctrl/Cmd + R to refresh
+    if ((e.ctrlKey || e.metaKey) && e.key === 'r') {
+        e.preventDefault();
+        location.reload();
+    }
+});

static/styles.css

@@ -0,0 +1,1280 @@
+/* Modern CSS Variables */
+:root {
+    --primary-color: #6366f1;
+    --primary-hover: #5b5df7;
+    --secondary-color: #f1f5f9;
+    --success-color: #22c55e;
+    --warning-color: #f59e0b;
+    --danger-color: #ef4444;
+    --text-primary: #1e293b;
+    --text-secondary: #64748b;
+    --text-muted: #94a3b8;
+    --border-color: #e2e8f0;
+    --background: #f8fafc;
+    --surface: #ffffff;
+    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
+    --radius: 8px;
+    --radius-lg: 12px;
+}
+
+/* Dark Mode Variables */
+[data-theme="dark"] {
+    --primary-color: #8b5cf6;
+    --primary-hover: #7c3aed;
+    --secondary-color: #374151;
+    --success-color: #10b981;
+    --warning-color: #f59e0b;
+    --danger-color: #ef4444;
+    --text-primary: #f8fafc;
+    --text-secondary: #cbd5e1;
+    --text-muted: #94a3b8;
+    --border-color: #4b5563;
+    --background: #111827;
+    --surface: #1f2937;
+    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
+    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4);
+    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4);
+    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.5);
+    --radius: 8px;
+    --radius-lg: 12px;
+}
+
+/* Reset and Base Styles */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    background: var(--background);
+    color: var(--text-primary);
+    line-height: 1.6;
+    overflow-x: hidden;
+}
+
+.container {
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 0 20px;
+}
+
+/* Header */
+.header {
+    background: var(--surface);
+    border-bottom: 1px solid var(--border-color);
+    box-shadow: var(--shadow-sm);
+    position: sticky;
+    top: 0;
+    z-index: 100;
+}
+
+.header-content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1rem 0;
+}
+
+.logo {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.logo i {
+    font-size: 2rem;
+    color: var(--primary-color);
+}
+
+.logo h1 {
+    font-size: 1.75rem;
+    font-weight: 700;
+    color: var(--text-primary);
+}
+
+.header-stats {
+    display: flex;
+    gap: 24px;
+    align-items: center;
+}
+
+.theme-toggle {
+    background: var(--secondary-color);
+    border: 1px solid var(--border-color);
+    color: var(--text-secondary);
+    width: 44px;
+    height: 44px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    font-size: 1.125rem;
+}
+
+.theme-toggle:hover {
+    background: var(--primary-color);
+    color: white;
+    border-color: var(--primary-color);
+    transform: scale(1.05);
+}
+
+.stat-card {
+    text-align: center;
+    padding: 8px 16px;
+    background: var(--secondary-color);
+    border-radius: var(--radius);
+}
+
+.stat-value {
+    display: block;
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: var(--primary-color);
+}
+
+.stat-label {
+    font-size: 0.875rem;
+    color: var(--text-secondary);
+}
+
+/* Main Content */
+.main {
+    padding: 2rem 0;
+}
+
+/* Tabs */
+.tabs {
+    display: flex;
+    gap: 4px;
+    margin-bottom: 2rem;
+    background: var(--surface);
+    padding: 4px;
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-sm);
+}
+
+.tab-button {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    padding: 12px 16px;
+    background: transparent;
+    border: none;
+    border-radius: var(--radius);
+    cursor: pointer;
+    transition: all 0.2s ease;
+    font-weight: 500;
+    color: var(--text-secondary);
+}
+
+.tab-button:hover {
+    background: var(--secondary-color);
+    color: var(--text-primary);
+}
+
+.tab-button.active {
+    background: var(--primary-color);
+    color: white;
+    box-shadow: var(--shadow-md);
+}
+
+.tab-button i {
+    font-size: 1.25rem;
+}
+
+.badge {
+    background: rgba(255, 255, 255, 0.2);
+    padding: 2px 8px;
+    border-radius: 12px;
+    font-size: 0.75rem;
+    font-weight: 600;
+}
+
+.tab-button.active .badge {
+    background: rgba(255, 255, 255, 0.3);
+}
+
+/* Sections */
+.add-model-section,
+.models-section {
+    background: var(--surface);
+    border-radius: var(--radius-lg);
+    padding: 1.5rem;
+    margin-bottom: 2rem;
+    box-shadow: var(--shadow-md);
+}
+
+.section-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 1.5rem;
+    padding-bottom: 1rem;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.section-header h2 {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 1.25rem;
+    font-weight: 600;
+    color: var(--text-primary);
+}
+
+.section-header i {
+    color: var(--primary-color);
+}
+
+.section-actions {
+    display: flex;
+    gap: 12px;
+}
+
+/* Forms */
+.add-model-form {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.form-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1rem;
+}
+
+.form-group {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
+.form-group label {
+    font-weight: 500;
+    color: var(--text-primary);
+    font-size: 0.875rem;
+}
+
+.form-group input {
+    padding: 12px 16px;
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius);
+    font-size: 1rem;
+    transition: all 0.2s ease;
+    background: var(--surface);
+}
+
+.form-group input:focus {
+    outline: none;
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+}
+
+.form-checkboxes {
+    flex-direction: row;
+    gap: 1.5rem;
+    align-items: center;
+}
+
+.checkbox-group {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    cursor: pointer;
+    font-weight: 500;
+}
+
+.checkbox-group input[type="checkbox"] {
+    display: none;
+}
+
+.checkmark {
+    width: 20px;
+    height: 20px;
+    border: 2px solid var(--border-color);
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s ease;
+}
+
+.checkbox-group input[type="checkbox"]:checked + .checkmark {
+    background: var(--primary-color);
+    border-color: var(--primary-color);
+}
+
+.checkbox-group input[type="checkbox"]:checked + .checkmark::after {
+    content: '✓';
+    color: white;
+    font-size: 14px;
+    font-weight: bold;
+}
+
+/* Buttons */
+.btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 12px 20px;
+    border: none;
+    border-radius: var(--radius);
+    font-size: 0.875rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    text-decoration: none;
+    justify-content: center;
+}
+
+.btn-primary {
+    background: var(--primary-color);
+    color: white;
+}
+
+.btn-primary:hover {
+    background: var(--primary-hover);
+    transform: translateY(-1px);
+    box-shadow: var(--shadow-lg);
+}
+
+.btn-outline {
+    background: transparent;
+    color: var(--text-secondary);
+    border: 1px solid var(--border-color);
+}
+
+.btn-outline:hover {
+    background: var(--secondary-color);
+    color: var(--text-primary);
+}
+
+.btn-danger {
+    background: var(--danger-color);
+    color: white;
+}
+
+.btn-danger:hover {
+    background: #dc2626;
+}
+
+.btn-sm {
+    padding: 6px 12px;
+    font-size: 0.75rem;
+}
+
+/* Models Grid */
+.models-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+    gap: 1rem;
+}
+
+.model-card {
+    background: var(--surface);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-lg);
+    overflow: hidden;
+    transition: all 0.2s ease;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+}
+
+.model-card:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-lg);
+    border-color: var(--primary-color);
+}
+
+/* Carousel Styles */
+.model-thumbnail-carousel {
+    width: 100%;
+    height: 0;
+    padding-bottom: 177.78%; /* 16:9 aspect ratio (9/16 * 100) */
+    background: var(--secondary-color);
+    position: relative;
+    overflow: hidden;
+}
+
+.carousel-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+}
+
+.carousel-images {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.carousel-image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    position: absolute;
+    top: 0;
+    left: 0;
+    opacity: 0;
+    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+    cursor: pointer;
+    pointer-events: none; /* Disable clicks on inactive images */
+}
+
+.carousel-image.active {
+    opacity: 1;
+    pointer-events: auto; /* Enable clicks only on active image */
+}
+
+.carousel-image.active:hover {
+    transform: scale(1.05);
+}
+
+.carousel-image.active:active {
+    transform: scale(0.95);
+}
+
+.carousel-image.loaded {
+    /* Already handled by active class */
+}
+
+.carousel-btn {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    background: rgba(0, 0, 0, 0.7);
+    color: white;
+    border: none;
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    z-index: 10;
+    font-size: 0.875rem;
+}
+
+.carousel-btn:hover {
+    background: rgba(0, 0, 0, 0.9);
+    transform: translateY(-50%) scale(1.1);
+}
+
+.carousel-prev {
+    left: 8px;
+}
+
+.carousel-next {
+    right: 8px;
+}
+
+.carousel-indicators {
+    position: absolute;
+    bottom: 8px;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    gap: 6px;
+    z-index: 10;
+}
+
+.carousel-indicator {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    border: none;
+    background: rgba(255, 255, 255, 0.5);
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.carousel-indicator.active {
+    background: white;
+    transform: scale(1.2);
+}
+
+.thumbnail-placeholder,
+.thumbnail-fallback,
+.thumbnail-error {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    color: var(--text-muted);
+    font-size: 0.875rem;
+    width: 100%;
+    height: 100%;
+    text-align: center;
+}
+
+.thumbnail-placeholder i,
+.thumbnail-fallback i,
+.thumbnail-error i {
+    font-size: 2rem;
+    color: var(--text-muted);
+}
+
+.thumbnail-error {
+    color: var(--danger-color);
+}
+
+.thumbnail-error i {
+    color: var(--danger-color);
+}
+
+/* Image Modal Styles */
+.image-modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0);
+    display: none;
+    align-items: center;
+    justify-content: center;
+    z-index: 3000;
+    backdrop-filter: blur(0px);
+    transition: background-color 0.3s ease, backdrop-filter 0.3s ease;
+}
+
+.image-modal-overlay.active {
+    display: flex;
+    background: rgba(0, 0, 0, 0.9);
+    backdrop-filter: blur(4px);
+}
+
+.image-modal {
+    position: relative;
+    max-width: 95vw;
+    max-height: 95vh;
+    background: var(--surface);
+    border-radius: var(--radius-lg);
+    overflow: hidden;
+    box-shadow: var(--shadow-xl);
+    display: flex;
+    flex-direction: column;
+    transform: scale(0.8);
+    opacity: 0;
+    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+}
+
+.image-modal-overlay.active .image-modal {
+    transform: scale(1);
+    opacity: 1;
+}
+
+.image-modal-close {
+    position: absolute;
+    top: 16px;
+    right: 16px;
+    background: rgba(0, 0, 0, 0.7);
+    color: white;
+    border: none;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    z-index: 10;
+    font-size: 1.25rem;
+}
+
+.image-modal-close:hover {
+    background: rgba(0, 0, 0, 0.9);
+    transform: scale(1.1);
+}
+
+.modal-nav {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    background: rgba(0, 0, 0, 0.7);
+    color: white;
+    border: none;
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    z-index: 10;
+    font-size: 1.25rem;
+}
+
+.modal-nav:hover {
+    background: rgba(0, 0, 0, 0.9);
+    transform: translateY(-50%) scale(1.1);
+}
+
+.modal-prev {
+    left: 20px;
+}
+
+.modal-next {
+    right: 20px;
+}
+
+.image-modal-content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 1;
+    padding: 20px;
+    overflow: hidden;
+    position: relative;
+}
+
+.image-modal-content img {
+    max-width: 100%;
+    max-height: 100%;
+    width: auto;
+    height: auto;
+    object-fit: contain;
+    border-radius: var(--radius);
+    transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+    cursor: pointer;
+    user-select: none;
+    display: block;
+    margin: 0 auto;
+}
+
+.image-modal-controls {
+    position: absolute;
+    top: 20px;
+    right: 70px;
+    display: flex;
+    gap: 8px;
+    z-index: 10;
+}
+
+.zoom-btn {
+    background: rgba(0, 0, 0, 0.7);
+    color: white;
+    border: none;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    font-size: 1rem;
+}
+
+.zoom-btn:hover {
+    background: rgba(0, 0, 0, 0.9);
+    transform: scale(1.1);
+}
+
+.image-modal-info {
+    background: var(--secondary-color);
+    padding: 12px 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 0.875rem;
+    color: var(--text-secondary);
+    border-top: 1px solid var(--border-color);
+    position: relative;
+    z-index: 1;
+}
+
+.image-modal-info span {
+    font-weight: 500;
+}
+
+/* Image Modal Metadata Styles */
+.image-modal-metadata {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: rgba(0, 0, 0, 0.8);
+    backdrop-filter: blur(8px);
+    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
+    overflow: hidden;
+    z-index: 10;
+}
+
+.metadata-toggle {
+    width: 100%;
+    padding: 16px 20px;
+    background: none;
+    border: none;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    color: rgba(255, 255, 255, 0.9);
+    cursor: pointer;
+    font-size: 14px;
+    font-weight: 500;
+    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+}
+
+.metadata-toggle:hover {
+    background: rgba(255, 255, 255, 0.1);
+}
+
+.metadata-toggle .toggle-icon {
+    margin-left: auto;
+    transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+}
+
+.metadata-toggle.expanded .toggle-icon {
+    transform: rotate(180deg);
+}
+
+.metadata-content {
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+    background: rgba(0, 0, 0, 0.3);
+}
+
+.metadata-content.expanded {
+    max-height: 400px;
+}
+
+.metadata-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+    gap: 16px 12px;
+    padding: 20px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.metadata-item {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.metadata-label {
+    font-size: 12px;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.7);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.metadata-value {
+    font-size: 14px;
+    color: rgba(255, 255, 255, 0.95);
+    word-break: break-word;
+}
+
+.metadata-prompt {
+    padding: 20px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.metadata-prompt:last-child {
+    border-bottom: none;
+}
+
+.metadata-prompt .metadata-label {
+    display: block;
+    margin-bottom: 8px;
+}
+
+.metadata-prompt .metadata-value {
+    line-height: 1.5;
+    white-space: pre-wrap;
+    max-height: 120px;
+    overflow-y: auto;
+    padding: 8px;
+    background: rgba(0, 0, 0, 0.4);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: var(--radius);
+    font-size: 13px;
+}
+
+/* Image Filters */
+.image-filters {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    padding: 16px 0;
+    margin-bottom: 20px;
+    border-bottom: 1px solid var(--border);
+    flex-wrap: wrap;
+}
+
+.filter-group {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.filter-group label {
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--text-secondary);
+    white-space: nowrap;
+}
+
+.filter-select {
+    padding: 6px 12px;
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    background: var(--surface);
+    color: var(--text-primary);
+    font-size: 14px;
+    min-width: 140px;
+    cursor: pointer;
+}
+
+.filter-select:focus {
+    outline: none;
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
+}
+
+.image-filters #refreshBtn {
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+
+/* App Footer */
+.app-footer {
+    background: var(--surface);
+    border-top: 1px solid var(--border);
+    padding: 20px;
+    text-align: center;
+    margin-top: 40px;
+}
+
+.app-footer p {
+    margin: 0;
+    color: var(--text-secondary);
+    font-size: 0.875rem;
+    font-weight: 500;
+}
+
+/* Model Content */
+.model-content {
+    padding: 1rem;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+.model-header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    margin-bottom: 1rem;
+}
+
+.model-title {
+    font-size: 1.125rem;
+    font-weight: 600;
+    color: var(--text-primary);
+    margin-bottom: 4px;
+}
+
+.model-title-link {
+    text-decoration: none;
+    color: inherit;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    transition: all 0.2s ease;
+    border-radius: var(--radius);
+    padding: 4px 0;
+}
+
+.model-title-link:hover {
+    color: var(--primary-color);
+}
+
+.model-title-link:hover .model-title {
+    color: var(--primary-color);
+}
+
+.model-external-link {
+    font-size: 0.875rem;
+    opacity: 0.6;
+    transition: opacity 0.2s ease;
+}
+
+.model-title-link:hover .model-external-link {
+    opacity: 1;
+}
+
+.model-status {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 0.75rem;
+    font-weight: 600;
+    padding: 4px 8px;
+    border-radius: 12px;
+}
+
+.model-status.active {
+    background: rgba(34, 197, 94, 0.1);
+    color: var(--success-color);
+}
+
+.model-status.inactive {
+    background: rgba(148, 163, 184, 0.1);
+    color: var(--text-muted);
+}
+
+.model-urn {
+    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+    font-size: 0.875rem;
+    color: var(--text-secondary);
+    background: var(--secondary-color);
+    padding: 8px 12px;
+    border-radius: var(--radius);
+    margin-bottom: 1rem;
+    word-break: break-all;
+}
+
+.model-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    margin-bottom: 1rem;
+}
+
+.tag {
+    font-size: 0.75rem;
+    padding: 4px 8px;
+    background: var(--primary-color);
+    color: white;
+    border-radius: 12px;
+    font-weight: 500;
+}
+
+.tag.nsfw {
+    background: var(--danger-color);
+}
+
+.model-actions {
+    display: flex;
+    gap: 8px;
+    justify-content: flex-end;
+    margin-top: auto;
+}
+
+/* Empty State */
+.empty-state {
+    text-align: center;
+    padding: 3rem 2rem;
+    color: var(--text-muted);
+}
+
+.empty-state i {
+    font-size: 3rem;
+    margin-bottom: 1rem;
+    color: var(--text-muted);
+}
+
+.empty-state h3 {
+    font-size: 1.25rem;
+    margin-bottom: 0.5rem;
+    color: var(--text-secondary);
+}
+
+/* Modal */
+.modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+    display: none;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+    backdrop-filter: blur(4px);
+}
+
+.modal-overlay.active {
+    display: flex;
+}
+
+.modal {
+    background: var(--surface);
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-xl);
+    width: 100%;
+    max-width: 500px;
+    margin: 20px;
+    max-height: 90vh;
+    overflow: auto;
+}
+
+.modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1.5rem;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.modal-header h3 {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 1.25rem;
+    font-weight: 600;
+    color: var(--text-primary);
+}
+
+.modal-close {
+    background: none;
+    border: none;
+    font-size: 1.25rem;
+    color: var(--text-muted);
+    cursor: pointer;
+    padding: 4px;
+    border-radius: var(--radius);
+    transition: all 0.2s ease;
+}
+
+.modal-close:hover {
+    background: var(--secondary-color);
+    color: var(--text-primary);
+}
+
+.modal-body {
+    padding: 1.5rem;
+}
+
+.modal-footer {
+    display: flex;
+    gap: 12px;
+    justify-content: flex-end;
+    padding: 1.5rem;
+    border-top: 1px solid var(--border-color);
+}
+
+/* Loading */
+.loading-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(255, 255, 255, 0.9);
+    display: none;
+    align-items: center;
+    justify-content: center;
+    z-index: 2000;
+    backdrop-filter: blur(2px);
+}
+
+.loading-overlay.active {
+    display: flex;
+}
+
+.loading-spinner {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1rem;
+    color: var(--primary-color);
+}
+
+.loading-spinner i {
+    font-size: 2rem;
+}
+
+.loading-spinner span {
+    font-weight: 500;
+}
+
+/* Toast Notifications */
+.toast-container {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    z-index: 3000;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.toast {
+    background: var(--surface);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius);
+    padding: 12px 16px;
+    box-shadow: var(--shadow-lg);
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    min-width: 300px;
+    max-width: 400px;
+    transform: translateX(100%);
+    transition: transform 0.3s ease;
+}
+
+.toast.show {
+    transform: translateX(0);
+}
+
+.toast.success {
+    border-left: 4px solid var(--success-color);
+}
+
+.toast.error {
+    border-left: 4px solid var(--danger-color);
+}
+
+.toast.warning {
+    border-left: 4px solid var(--warning-color);
+}
+
+.toast-content {
+    flex: 1;
+}
+
+.toast-title {
+    font-weight: 600;
+    font-size: 0.875rem;
+    margin-bottom: 2px;
+}
+
+.toast-message {
+    font-size: 0.75rem;
+    color: var(--text-secondary);
+}
+
+.toast-close {
+    background: none;
+    border: none;
+    color: var(--text-muted);
+    cursor: pointer;
+    padding: 4px;
+    border-radius: var(--radius);
+    transition: all 0.2s ease;
+}
+
+.toast-close:hover {
+    background: var(--secondary-color);
+    color: var(--text-primary);
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .container {
+        padding: 0 16px;
+    }
+    
+    .header-content {
+        flex-direction: column;
+        gap: 1rem;
+        text-align: center;
+    }
+    
+    .logo h1 {
+        font-size: 1.5rem;
+    }
+    
+    .tabs {
+        flex-direction: column;
+    }
+    
+    .form-row {
+        grid-template-columns: 1fr;
+    }
+    
+    .models-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .form-checkboxes {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 1rem;
+    }
+    
+    .modal {
+        margin: 10px;
+    }
+    
+    .toast-container {
+        left: 20px;
+        right: 20px;
+    }
+    
+    .toast {
+        min-width: auto;
+        max-width: none;
+    }
+}
+
+/* Animations */
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.model-card {
+    animation: fadeIn 0.3s ease-out;
+}
+
+.toast {
+    animation: fadeIn 0.3s ease-out;
+}
+
+/* Scrollbar Styling */
+::-webkit-scrollbar {
+    width: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: var(--secondary-color);
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--border-color);
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: var(--text-muted);
+}