Update index.html

index.html

@@ -19,6 +19,8 @@
         .error-block h3 { margin: 0 0 10px 0; color: #dc2626; font-size: 16px; }
         .error-block .code { background: #1f2937; color: #f9fafb; padding: 10px; border-radius: 4px; font-family: 'Courier New', monospace; font-size: 13px; overflow-x: auto; }
         .info { background: #dbeafe; border: 1px solid #3b82f6; border-radius: 6px; padding: 10px; margin-bottom: 15px; font-size: 14px; }
+        .custom-model { display: none; margin-top: 10px; }
+        .custom-model.active { display: block; }
     </style>
 </head>
 <body>
@@ -33,11 +35,18 @@
     
     <label for="modelSelect">Модель:</label>
     <select id="modelSelect">
-        <option value="black-forest-labs/FLUX.1-dev">FLUX.1-dev (Высокое качество)</option>
-        <option value="black-forest-labs/FLUX.2-klein-9B">FLUX.2-klein-9B (Быстрая)</option>
-        <option value="krea/Krea-2-Turbo">Krea-2-Turbo (Очень быстрая)</option>
+        <option value="black-forest-labs/FLUX.1-dev">FLUX.1-dev (Рекомендуется)</option>
+        <option value="black-forest-labs/FLUX.1-schnell">FLUX.1-schnell (Быстрая)</option>
+        <option value="stabilityai/stable-diffusion-3.5-large">Stable Diffusion 3.5 Large</option>
+        <option value="runwayml/stable-diffusion-v1-5">Stable Diffusion 1.5 (Классика)</option>
+        <option value="custom">✏️ Ввести ID модели вручную</option>
     </select>
     
+    <div id="customModelBlock" class="custom-model">
+        <label for="customModel">ID модели (например: black-forest-labs/FLUX.1-dev):</label>
+        <input type="text" id="customModel" placeholder="owner/model-name">
+    </div>
+    
     <label for="prompt">Промпт:</label>
     <textarea id="prompt" rows="3" placeholder="A cinematic shot of a cyberpunk city..."></textarea>
     
@@ -48,15 +57,25 @@
     <img id="outputImage" alt="Result">
 
     <script>
-        // НИКАКИХ IMPORT'ОВ — чистый JS
         const btn = document.getElementById('generateBtn');
         const tokenInput = document.getElementById('hf-token');
         const modelSelect = document.getElementById('modelSelect');
+        const customModelBlock = document.getElementById('customModelBlock');
+        const customModelInput = document.getElementById('customModel');
         const promptInput = document.getElementById('prompt');
         const statusText = document.getElementById('statusText');
         const errorContainer = document.getElementById('errorContainer');
         const outputImage = document.getElementById('outputImage');
 
+        // Показ/скрытие поля для ручной модели
+        modelSelect.addEventListener('change', () => {
+            if (modelSelect.value === 'custom') {
+                customModelBlock.classList.add('active');
+            } else {
+                customModelBlock.classList.remove('active');
+            }
+        });
+
         function showFullError(title, details) {
             errorContainer.innerHTML = `
                 <div class="error-block">
@@ -72,8 +91,16 @@
 
         btn.addEventListener('click', async () => {
             const token = tokenInput.value.trim();
-            const model = modelSelect.value;
             const prompt = promptInput.value.trim();
+            
+            // Определяем модель
+            let model;
+            if (modelSelect.value === 'custom') {
+                model = customModelInput.value.trim();
+                if (!model) return showFullError('Ошибка валидации', 'Введи ID модели!');
+            } else {
+                model = modelSelect.value;
+            }
 
             clearError();
 
@@ -88,7 +115,6 @@
             }
 
             try {
-                // ПРЯМОЙ URL К РОУТЕРУ С ПРОВАЙДЕРОМ fal-ai
                 const apiUrl = `https://router.huggingface.co/fal-ai/models/${model}`;
                 
                 statusText.textContent = `Запрос к: ${apiUrl}`;