Update index.html

index.html

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>HF API - Генерация (Новый API 2026)</title>
+    <title>HF API - Генерация (fal-ai Provider 2026)</title>
     <style>
         body { font-family: system-ui, sans-serif; max-width: 600px; margin: 40px auto; padding: 20px; background: #f9fafb; color: #111827; }
         h2 { margin-top: 0; }
@@ -38,20 +38,31 @@
             font-size: 13px;
             overflow-x: auto;
         }
+        .info {
+            background: #dbeafe;
+            border: 1px solid #3b82f6;
+            border-radius: 6px;
+            padding: 10px;
+            margin-bottom: 15px;
+            font-size: 14px;
+        }
     </style>
 </head>
 <body>
-    <h2>Генерация изображений (HF API 2026)</h2>
+    <h2>Генерация изображений (fal-ai Provider)</h2>
+    
+    <div class="info">
+        <strong>ℹ️ Важно:</strong> С июля 2026 HF изменил API. Теперь используем провайдера <strong>fal-ai</strong> для генерации изображений.
+    </div>
     
     <label for="hf-token">Твой Access Token (hf_...):</label>
     <input type="password" id="hf-token" placeholder="Вставь токен">
     
     <label for="modelSelect">Модель:</label>
     <select id="modelSelect">
-        <option value="black-forest-labs/FLUX.1-schnell">FLUX.1-schnell (Быстрая)</option>
-        <option value="black-forest-labs/FLUX.1-dev">FLUX.1-dev (Качественнее)</option>
-        <option value="stabilityai/stable-diffusion-3.5-large">Stable Diffusion 3.5 Large</option>
-        <option value="ByteDance/SDXL-Lightning">SDXL-Lightning (Очень быстрая)</option>
+        <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>
     </select>
     
     <label for="prompt">Промпт:</label>
@@ -63,7 +74,9 @@
     <div id="errorContainer"></div>
     <img id="outputImage" alt="Result">
 
-    <script>
+    <script type="module">
+        import { InferenceClient } from 'https://cdn.jsdelivr.net/npm/@huggingface/inference@3.0.0/+esm';
+
         const btn = document.getElementById('generateBtn');
         const tokenInput = document.getElementById('hf-token');
         const modelSelect = document.getElementById('modelSelect');
@@ -72,9 +85,6 @@
         const errorContainer = document.getElementById('errorContainer');
         const outputImage = document.getElementById('outputImage');
 
-        // НОВЫЙ API ENDPOINT 2026
-        const NEW_API_BASE = 'https://router.huggingface.co/hf-inference/models';
-
         function showFullError(title, details) {
             errorContainer.innerHTML = `
                 <div class="error-block">
@@ -106,49 +116,21 @@
             }
 
             try {
-                // НОВЫЙ URL
-                const apiUrl = `${NEW_API_BASE}/${model}`;
-                
-                statusText.textContent = `Запрос к API: ${apiUrl}`;
-
-                const response = await fetch(apiUrl, {
-                    method: 'POST',
-                    headers: {
-                        'Authorization': `Bearer ${token}`,
-                        'Content-Type': 'application/json',
-                        'Accept': 'image/png'
-                    },
-                    body: JSON.stringify({ inputs: prompt })
-                });
+                statusText.textContent = `Инициализация клиента с провайдером fal-ai...`;
 
-                const responseInfo = `Status: ${response.status} ${response.statusText}\nURL: ${apiUrl}`;
-
-                if (!response.ok) {
-                    const errorBody = await response.text();
-                    let errorFormatted = errorBody;
-                    
-                    try {
-                        const jsonError = JSON.parse(errorBody);
-                        errorFormatted = JSON.stringify(jsonError, null, 2);
-                    } catch (e) {}
-
-                    const fullErrorDetails = `${responseInfo}\n\nResponse Body:\n${errorFormatted}`;
-                    
-                    showFullError(`Ошибка ${response.status}`, fullErrorDetails);
-                    statusText.textContent = '';
-                    throw new Error(`HTTP ${response.status}`);
-                }
+                // Создаем клиент с указанием провайдера fal-ai
+                const client = new InferenceClient(token);
 
-                statusText.textContent = 'Получаем картинку...';
-                const blob = await response.blob();
-                
-                if (!blob.type.startsWith('image/')) {
-                    const textResponse = await blob.text();
-                    showFullError('Неожиданный ответ', `${responseInfo}\n\nОтвет не является изображением:\n${textResponse}`);
-                    throw new Error('Not an image');
-                }
+                statusText.textContent = `Генерация изображения через fal-ai...`;
 
-                const imageUrl = URL.createObjectURL(blob);
+                // Используем textToImage с явным указанием провайдера
+                const imageBlob = await client.textToImage({
+                    model: model,
+                    provider: "fal-ai",
+                    inputs: prompt,
+                });
+
+                const imageUrl = URL.createObjectURL(imageBlob);
                 
                 outputImage.src = imageUrl;
                 outputImage.style.display = 'block';
@@ -159,7 +141,9 @@
                 console.error(error);
                 console.trace();
 
-                if (error.message.includes('Failed to fetch')) {
+                let errMsg = error.message;
+                
+                if (errMsg.includes('Failed to fetch')) {
                     showFullError('Сетевая ошибка', 
                         `Браузер не смог отправить запрос!\n\n` +
                         `Возможные причины:\n` +
@@ -168,11 +152,20 @@
                         `• CORS политика\n\n` +
                         `Откройте DevTools (F12) → вкладка Network (Сеть) → посмотрите на красный запрос.`
                     );
-                } else if (!errorContainer.innerHTML) {
-                    showFullError('Неизвестная ошибка', 
-                        `Message: ${error.message}\n` +
-                        `Stack: ${error.stack || 'N/A'}`
+                } else if (errMsg.includes('403') || errMsg.includes('gated')) {
+                    showFullError('Ошибка доступа', 
+                        `Нет доступа к модели!\n\n` +
+                        `Зайди на страницу модели на сайте Hugging Face и нажми кнопку:\n` +
+                        `"Agree and access repository"\n\n` +
+                        `Модель: ${model}`
+                    );
+                } else if (errMsg.includes('404')) {
+                    showFullError('Модель не найдена', 
+                        `Модель ${model} не поддерживается провайдером fal-ai.\n\n` +
+                        `Попробуй другую модель из списка.`
                     );
+                } else {
+                    showFullError('Ошибка', errMsg);
                 }
             } finally {
                 btn.disabled = false;