<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OllamaDiffuser Web UI</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 16px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            overflow: hidden;
        }
        
        .header {
            background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
            color: white;
            padding: 30px;
            text-align: center;
        }
        
        .header h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
        }
        
        .header p {
            opacity: 0.9;
            font-size: 1.1em;
        }
        
        .status-bar {
            background: #f8fafc;
            padding: 20px 30px;
            border-bottom: 1px solid #e2e8f0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 15px;
        }
        
        .status-item {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .status-indicator {
            width: 12px;
            height: 12px;
            border-radius: 50%;
        }
        
        .status-loaded {
            background: #10b981;
        }
        
        .status-unloaded {
            background: #ef4444;
        }
        
        .main-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
            padding: 30px;
        }
        
        @media (max-width: 768px) {
            .main-content {
                grid-template-columns: 1fr;
            }
        }
        
        .form-section {
            background: #f8fafc;
            padding: 25px;
            border-radius: 12px;
            border: 1px solid #e2e8f0;
        }
        
        .form-section h2 {
            color: #1e293b;
            margin-bottom: 20px;
            font-size: 1.5em;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 8px;
            color: #374151;
            font-weight: 500;
        }
        
        .form-group input, 
        .form-group textarea {
            width: 100%;
            padding: 12px;
            border: 1px solid #d1d5db;
            border-radius: 8px;
            font-size: 14px;
            transition: border-color 0.2s;
        }
        
        .form-group input:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: #4f46e5;
            box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
        }
        
        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
        }
        
        .btn {
            background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
            color: white;
            padding: 12px 24px;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
            width: 100%;
        }
        
        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(79, 70, 229, 0.3);
        }
        
        .btn:disabled {
            background: #9ca3af;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }
        
        .result-section {
            text-align: center;
        }
        
        .result-image {
            max-width: 100%;
            border-radius: 12px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        
        .error-message {
            background: #fee2e2;
            color: #dc2626;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 20px;
            border: 1px solid #fecaca;
        }
        
        .success-message {
            background: #d1fae5;
            color: #065f46;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 20px;
            border: 1px solid #a7f3d0;
        }
        
        .loading {
            display: none;
            text-align: center;
            padding: 40px;
            color: #6b7280;
        }
        
        .loading.show {
            display: block;
        }
        
        .spinner {
            border: 3px solid #f3f4f6;
            border-top: 3px solid #4f46e5;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
            margin: 0 auto 15px;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        .model-info {
            background: #e0f2fe;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 20px;
            border: 1px solid #b3e5fc;
        }
        
        .model-management {
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 30px;
        }
        
        .model-controls {
            display: flex;
            gap: 10px;
            align-items: center;
            flex-wrap: wrap;
        }
        
        .model-controls select {
            flex: 1;
            min-width: 200px;
            padding: 8px 12px;
            border: 1px solid #d1d5db;
            border-radius: 6px;
            background: white;
        }
        
        .btn-small {
            background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
            color: white;
            padding: 8px 16px;
            border: none;
            border-radius: 6px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
            white-space: nowrap;
        }
        
        .btn-small:hover {
            transform: translateY(-1px);
            box-shadow: 0 5px 15px rgba(79, 70, 229, 0.3);
        }
        
        .btn-small.btn-danger {
            background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
        }
        
        .btn-small.btn-danger:hover {
            box-shadow: 0 5px 15px rgba(220, 38, 38, 0.3);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🎨 OllamaDiffuser</h1>
            <p>Image Generation Model Management Tool</p>
        </div>
        
        <div class="status-bar">
            <div class="status-item">
                <div class="status-indicator {{ 'status-loaded' if model_loaded else 'status-unloaded' }}"></div>
                <span>Model Status: {{ 'Loaded' if model_loaded else 'Not Loaded' }}</span>
            </div>
            {% if current_model %}
            <div class="status-item">
                <span>Current Model: <strong>{{ current_model }}</strong></span>
            </div>
            {% endif %}
            <div class="status-item">
                <span>Installed Models: {{ installed_models|length }}</span>
            </div>
            <div class="status-item">
                <div class="status-indicator {{ 'status-loaded' if current_lora else 'status-unloaded' }}"></div>
                <span>LoRA Status: {{ 'Loaded' if current_lora else 'Not Loaded' }}</span>
            </div>
            {% if current_lora %}
            <div class="status-item">
                <span>Current LoRA: <strong>{{ current_lora }}</strong></span>
            </div>
            {% endif %}
            <div class="status-item">
                <span>Installed LoRAs: {{ installed_loras|length }}</span>
            </div>
        </div>
        
        <div class="model-management">
            <h3>🔧 Model Management</h3>
            {% if installed_models %}
            <form method="post" action="/load_model" style="margin-bottom: 15px;">
                <div class="model-controls">
                    <select name="model_name" required>
                        <option value="">Select model to load...</option>
                        {% for model in installed_models %}
                        <option value="{{ model }}" {{ 'selected' if model == current_model else '' }}>{{ model }}</option>
                        {% endfor %}
                    </select>
                    <button type="submit" class="btn-small">🚀 Load Model</button>
                </div>
            </form>
            {% endif %}
            
            {% if model_loaded %}
            <form method="post" action="/unload_model">
                <button type="submit" class="btn-small btn-danger">🔄 Unload Current Model</button>
            </form>
            {% endif %}
            
            {% if not installed_models %}
            <div class="model-info">
                <strong>📥 No installed models</strong><br>
                Please install models using CLI: <code>ollamadiffuser pull model-name</code>
            </div>
            {% endif %}
        </div>
        
        <div class="model-management">
            <h3>🔄 LoRA Management</h3>
            
            <!-- Download LoRA Section -->
            <form method="post" action="/pull_lora" style="margin-bottom: 15px;">
                <div style="display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: 10px; align-items: end;">
                    <div>
                        <label for="repo_id" style="display: block; margin-bottom: 5px; font-size: 12px; color: #6b7280;">Hugging Face Repository ID</label>
                        <input type="text" name="repo_id" id="repo_id" placeholder="e.g.: openfree/flux-chatgpt-ghibli-lora" required style="width: 100%; padding: 8px 12px; border: 1px solid #d1d5db; border-radius: 6px; background: white; font-size: 14px;">
                    </div>
                    <div>
                        <label for="weight_name" style="display: block; margin-bottom: 5px; font-size: 12px; color: #6b7280;">Weight File Name (Optional)</label>
                        <input type="text" name="weight_name" id="weight_name" placeholder="e.g.: lora.safetensors" style="width: 100%; padding: 8px 12px; border: 1px solid #d1d5db; border-radius: 6px; background: white; font-size: 14px;">
                    </div>
                    <div>
                        <label for="alias" style="display: block; margin-bottom: 5px; font-size: 12px; color: #6b7280;">Alias (Optional)</label>
                        <input type="text" name="alias" id="alias" placeholder="e.g.: ghibli" style="width: 100%; padding: 8px 12px; border: 1px solid #d1d5db; border-radius: 6px; background: white; font-size: 14px;">
                    </div>
                    <button type="submit" class="btn-small">📥 Download LoRA</button>
                </div>
            </form>
            
            <!-- Load LoRA Section -->
            {% if installed_loras %}
            <form method="post" action="/load_lora" style="margin-bottom: 15px;">
                <div class="model-controls">
                    <select name="lora_name" required style="flex: 2;">
                        <option value="">Select LoRA to load...</option>
                        {% for lora_name, lora_info in installed_loras.items() %}
                        <option value="{{ lora_name }}" {{ 'selected' if lora_name == current_lora else '' }}>
                            {{ lora_name }} ({{ lora_info.get('repo_id', 'Unknown') }})
                        </option>
                        {% endfor %}
                    </select>
                    <div style="display: flex; flex-direction: column; min-width: 100px;">
                        <label for="scale" style="font-size: 12px; color: #6b7280; margin-bottom: 2px;">Strength</label>
                        <input type="number" name="scale" id="scale" value="1.0" min="0.1" max="2.0" step="0.1" style="padding: 8px 12px; border: 1px solid #d1d5db; border-radius: 6px; background: white; font-size: 14px;">
                    </div>
                    <button type="submit" class="btn-small" {{ 'disabled' if not model_loaded }}>🚀 Load LoRA</button>
                </div>
            </form>
            {% endif %}
            
            <!-- Unload LoRA Section -->
            {% if current_lora %}
            <form method="post" action="/unload_lora">
                <button type="submit" class="btn-small btn-danger">🔄 Unload Current LoRA</button>
            </form>
            {% endif %}
            
            <!-- LoRA Status -->
            {% if not installed_loras %}
            <div class="model-info">
                <strong>📥 No installed LoRAs</strong><br>
                Please enter a Hugging Face repository ID above to download LoRA, or use CLI: <code>ollamadiffuser lora pull repo-id</code>
            </div>
            {% endif %}
            
            {% if installed_loras and not model_loaded %}
            <div class="model-info">
                <strong>⚠️ Note:</strong> You need to load a model first before using LoRA
            </div>
            {% endif %}
        </div>
        
        <div class="main-content">
            <div class="form-section">
                <h2>Image Generation</h2>
                
                {% if not model_loaded %}
                <div class="model-info">
                    <strong>⚠️ Note:</strong> Please first load a model in the model management area above, or use CLI: <code>ollamadiffuser load model-name</code>
                </div>
                {% endif %}
                
                {% if success_message %}
                <div class="success-message">
                    {{ success_message }}
                </div>
                {% endif %}
                
                {% if error_message %}
                <div class="error-message">
                    {{ error_message }}
                </div>
                {% endif %}
                
                <form method="post" action="/generate" id="generateForm">
                    <div class="form-group">
                        <label for="prompt">Prompt</label>
                        <textarea name="prompt" id="prompt" rows="3" placeholder="Describe the image you want to generate..." required>{{ prompt or '' }}</textarea>
                    </div>
                    
                    <div class="form-group">
                        <label for="negative_prompt">Negative Prompt</label>
                        <textarea name="negative_prompt" id="negative_prompt" rows="2" placeholder="Describe what you don't want in the image...">{{ negative_prompt or 'low quality, bad anatomy, worst quality, low resolution' }}</textarea>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label for="width">Width</label>
                            <input type="number" name="width" id="width" value="{{ width or 1024 }}" min="512" max="2048" step="64">
                        </div>
                        <div class="form-group">
                            <label for="height">Height</label>
                            <input type="number" name="height" id="height" value="{{ height or 1024 }}" min="512" max="2048" step="64">
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label for="num_inference_steps">Inference Steps</label>
                            <input type="number" name="num_inference_steps" id="num_inference_steps" value="{{ num_inference_steps or 28 }}" min="1" max="100">
                        </div>
                        <div class="form-group">
                            <label for="guidance_scale">Guidance Scale</label>
                            <input type="number" name="guidance_scale" id="guidance_scale" value="{{ guidance_scale or 3.5 }}" min="0" max="20" step="0.1">
                        </div>
                    </div>
                    
                    <button type="submit" class="btn" {{ 'disabled' if not model_loaded }}>
                        🎨 Generate Image
                    </button>
                </form>
            </div>
            
            <div class="result-section">
                <h2>Generation Result</h2>
                
                <div class="loading" id="loading">
                    <div class="spinner"></div>
                    <p>Generating image, please wait...</p>
                </div>
                
                {% if image_b64 %}
                <img src="data:image/png;base64,{{ image_b64 }}" alt="Generated Image" class="result-image">
                <p style="color: #6b7280; margin-top: 15px;">
                    <strong>Prompt:</strong> {{ prompt }}
                </p>
                {% else %}
                <div style="background: #f9fafb; border: 2px dashed #d1d5db; border-radius: 12px; padding: 60px 20px; color: #6b7280;">
                    <div style="font-size: 3em; margin-bottom: 15px;">🖼️</div>
                    <p>Generated image will be displayed here</p>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
    
    <script>
        document.getElementById('generateForm').addEventListener('submit', function() {
            document.getElementById('loading').classList.add('show');
        });
    </script>
</body>
</html> 