Update index.html

index.html

@@ -54,7 +54,6 @@
         font-weight: bold;
         cursor: pointer;
         font-size: 16px;
-        transition: background 0.2s;
     }
 
     button:hover {
@@ -126,8 +125,8 @@
 <h2>Генерация изображений через Hugging Face</h2>
 
 <div class="info">
-    Токен Hugging Face используется только для текущего запроса.
-    Не публикуй этот HTML с токеном внутри кода.
+    Для работы нужен Hugging Face Access Token
+    с разрешением Inference Providers.
 </div>
 
 <label for="hf-token">
@@ -181,396 +180,368 @@
 
 <script>
 
-    const API_URL =
-        "https://router.huggingface.co/v1/images/generations";
+const btn =
+    document.getElementById("generateBtn");
 
+const tokenInput =
+    document.getElementById("hf-token");
 
-    const btn =
-        document.getElementById("generateBtn");
+const modelSelect =
+    document.getElementById("modelSelect");
 
-    const tokenInput =
-        document.getElementById("hf-token");
+const promptInput =
+    document.getElementById("prompt");
 
-    const modelSelect =
-        document.getElementById("modelSelect");
+const statusText =
+    document.getElementById("statusText");
 
-    const promptInput =
-        document.getElementById("prompt");
+const errorContainer =
+    document.getElementById("errorContainer");
 
-    const statusText =
-        document.getElementById("statusText");
+const outputImage =
+    document.getElementById("outputImage");
 
-    const errorContainer =
-        document.getElementById("errorContainer");
 
-    const outputImage =
-        document.getElementById("outputImage");
+let currentImageUrl = null;
 
 
-    // Текущий URL изображения.
-    // Нужен для освобождения памяти браузера.
-    let currentImageUrl = null;
+// ----------------------------------------
+// Показ ошибки
+// ----------------------------------------
 
+function showError(title, details) {
 
-    function showError(title, details) {
+    errorContainer.innerHTML = "";
 
-        errorContainer.innerHTML = "";
+    const block =
+        document.createElement("div");
 
-        const block =
-            document.createElement("div");
+    block.className =
+        "error-block";
 
-        block.className =
-            "error-block";
 
+    const heading =
+        document.createElement("h3");
 
-        const heading =
-            document.createElement("h3");
+    heading.textContent =
+        "⚠️ " + title;
 
-        heading.textContent =
-            "⚠️ " + title;
 
+    const code =
+        document.createElement("div");
 
-        const code =
-            document.createElement("div");
+    code.className =
+        "code";
 
-        code.className =
-            "code";
+    code.textContent =
+        details;
 
-        code.textContent =
-            details;
 
+    block.appendChild(heading);
 
-        block.appendChild(heading);
+    block.appendChild(code);
 
-        block.appendChild(code);
+    errorContainer.appendChild(block);
+}
 
-        errorContainer.appendChild(block);
-    }
 
+// ----------------------------------------
+// Очистка ошибки
+// ----------------------------------------
 
-    function clearError() {
+function clearError() {
 
-        errorContainer.innerHTML = "";
+    errorContainer.innerHTML = "";
 
-    }
+}
 
 
-    function clearImage() {
+// ----------------------------------------
+// Очистка предыдущего изображения
+// ----------------------------------------
 
-        outputImage.style.display =
-            "none";
+function clearImage() {
 
-        outputImage.removeAttribute("src");
+    outputImage.style.display =
+        "none";
 
+    outputImage.removeAttribute("src");
 
-        if (currentImageUrl) {
 
-            URL.revokeObjectURL(
-                currentImageUrl
-            );
+    if (currentImageUrl) {
 
-            currentImageUrl = null;
-        }
+        URL.revokeObjectURL(
+            currentImageUrl
+        );
 
-    }
+        currentImageUrl = null;
 
+    }
 
-    function setLoading(isLoading) {
+}
 
-        btn.disabled =
-            isLoading;
 
-        tokenInput.disabled =
-            isLoading;
+// ----------------------------------------
+// Разбор ошибки API
+// ----------------------------------------
 
-        modelSelect.disabled =
-            isLoading;
+async function getErrorText(response) {
 
-        promptInput.disabled =
-            isLoading;
+    const text =
+        await response.text();
 
-    }
 
+    if (!text) {
 
-    async function parseErrorResponse(response) {
+        return "Сервер вернул пустой ответ.";
 
-        const text =
-            await response.text();
+    }
 
 
-        if (!text) {
+    try {
 
-            return "Пустой ответ от сервера.";
+        const json =
+            JSON.parse(text);
 
-        }
+        return JSON.stringify(
+            json,
+            null,
+            2
+        );
 
+    } catch {
 
-        try {
+        return text;
 
-            const json =
-                JSON.parse(text);
+    }
 
-            return JSON.stringify(
-                json,
-                null,
-                2
-            );
+}
 
-        } catch {
 
-            return text;
+// ----------------------------------------
+// Генерация изображения
+// ----------------------------------------
 
-        }
+btn.addEventListener(
+    "click",
+    async () => {
 
-    }
+        const token =
+            tokenInput.value.trim();
 
+        const model =
+            modelSelect.value;
 
-    btn.addEventListener(
-        "click",
-        async () => {
+        const prompt =
+            promptInput.value.trim();
 
-            const token =
-                tokenInput.value.trim();
 
-            const model =
-                modelSelect.value;
+        clearError();
 
-            const prompt =
-                promptInput.value.trim();
+        clearImage();
 
 
-            clearError();
+        // Проверка токена
 
-            clearImage();
+        if (!token) {
 
+            showError(
+                "Ошибка",
+                "Введите Hugging Face Access Token."
+            );
 
-            // Валидация токена
+            return;
 
-            if (!token) {
+        }
 
-                showError(
-                    "Ошибка валидации",
-                    "Введите Hugging Face Access Token."
-                );
 
-                return;
+        // Проверка промпта
 
-            }
+        if (!prompt) {
 
+            showError(
+                "Ошибка",
+                "Введите промпт для генерации."
+            );
 
-            // Валидация промпта
+            return;
 
-            if (!prompt) {
+        }
 
-                showError(
-                    "Ошибка валидации",
-                    "Введите описание изображения."
-                );
 
-                return;
+        btn.disabled =
+            true;
 
-            }
+        statusText.textContent =
+            "Генерируем изображение...";
 
 
-            setLoading(true);
+        try {
 
+            /*
+             * Hugging Face Inference Providers.
+             *
+             * fal-ai выбран явно.
+             *
+             * Важно:
+             * provider должен поддерживать
+             * выбранную модель.
+             */
 
-            statusText.textContent =
-                "Отправляем запрос в Hugging Face...";
+            const apiUrl =
+                `https://router.huggingface.co/fal-ai/models/${model}`;
 
 
-            try {
+            const response =
+                await fetch(
+                    apiUrl,
+                    {
+                        method: "POST",
 
-                const response =
-                    await fetch(
-                        API_URL,
-                        {
-                            method: "POST",
+                        headers: {
 
-                            headers: {
+                            "Authorization":
+                                `Bearer ${token}`,
 
-                                "Authorization":
-                                    `Bearer ${token}`,
+                            "Content-Type":
+                                "application/json",
 
-                                "Content-Type":
-                                    "application/json",
+                            "Accept":
+                                "image/png"
 
-                                "Accept":
-                                    "application/json"
+                        },
 
-                            },
+                        body:
+                            JSON.stringify({
 
-                            body:
-                                JSON.stringify({
+                                inputs:
+                                    prompt,
 
-                                    model:
-                                        model,
+                                parameters: {
 
-                                    prompt:
-                                        prompt
+                                    num_inference_steps:
+                                        4
 
-                                })
+                                }
 
-                        }
-                    );
+                            })
 
+                    }
+                );
 
-                if (!response.ok) {
 
-                    const errorDetails =
-                        await parseErrorResponse(
-                            response
-                        );
+            // --------------------------------
+            // Обработка ошибки
+            // --------------------------------
 
+            if (!response.ok) {
 
-                    showError(
-                        `Ошибка API: ${response.status} ${response.statusText}`,
-                        `URL: ${API_URL}\n\nОтвет сервера:\n${errorDetails}`
+                const errorText =
+                    await getErrorText(
+                        response
                     );
 
 
-                    statusText.textContent =
-                        "Генерация не удалась.";
-
-                    return;
-
-                }
+                showError(
+                    `Ошибка ${response.status} ${response.statusText}`,
+                    `URL: ${apiUrl}\n\nОтвет сервера:\n${errorText}`
+                );
 
 
                 statusText.textContent =
-                    "Получаем результат...";
-
-
-                const data =
-                    await response.json();
-
-
-                /*
-                    Ожидаемый формат:
-
-                    {
-                        "data": [
-                            {
-                                "url": "https://..."
-                            }
-                        ]
-                    }
+                    "Генерация не удалась.";
 
-                    или:
+                return;
 
-                    {
-                        "data": [
-                            {
-                                "b64_json": "..."
-                            }
-                        ]
-                    }
-                */
-
-
-                if (
-                    !data ||
-                    !Array.isArray(data.data) ||
-                    !data.data.length
-                ) {
-
-                    showError(
-                        "Неожиданный ответ API",
-                        JSON.stringify(
-                            data,
-                            null,
-                            2
-                        )
-                    );
+            }
 
-                    return;
 
-                }
+            statusText.textContent =
+                "Изображение получено. Отображаем...";
 
 
-                const result =
-                    data.data[0];
+            // --------------------------------
+            // Получаем изображение как Blob
+            // --------------------------------
 
+            const blob =
+                await response.blob();
 
-                // Вариант 1:
-                // API вернул URL изображения
 
-                if (result.url) {
+            // Проверяем MIME-тип
 
-                    outputImage.src =
-                        result.url;
+            if (
+                !blob.type ||
+                !blob.type.startsWith("image/")
+            ) {
 
-                    outputImage.style.display =
-                        "block";
+                const text =
+                    await blob.text();
 
-                    statusText.textContent =
-                        "✅ Изображение готово!";
 
-                    return;
+                showError(
+                    "API вернул не изображение",
+                    text
+                );
 
-                }
+                return;
 
+            }
 
-                // Вариант 2:
-                // API вернул base64
 
-                if (result.b64_json) {
+            // --------------------------------
+            // Создаём URL изображения
+            // --------------------------------
 
-                    currentImageUrl =
-                        `data:image/png;base64,${result.b64_json}`;
+            currentImageUrl =
+                URL.createObjectURL(
+                    blob
+                );
 
-                    outputImage.src =
-                        currentImageUrl;
 
-                    outputImage.style.display =
-                        "block";
+            outputImage.src =
+                currentImageUrl;
 
-                    statusText.textContent =
-                        "✅ Изображение готово!";
 
-                    return;
+            outputImage.style.display =
+                "block";
 
-                }
 
+            statusText.textContent =
+                "✅ Изображение готово!";
 
-                // Если формат неизвестен
+        }
 
-                showError(
-                    "Неизвестный формат ответа",
-                    JSON.stringify(
-                        data,
-                        null,
-                        2
-                    )
-                );
 
+        catch (error) {
 
-            } catch (error) {
+            console.error(
+                error
+            );
 
-                console.error(
-                    "Generation error:",
-                    error
-                );
 
+            showError(
+                "Ошибка соединения",
+                error.message ||
+                String(error)
+            );
 
-                showError(
-                    "Ошибка соединения",
-                    error.message ||
-                    String(error)
-                );
 
+            statusText.textContent =
+                "Произошла ошибка.";
 
-                statusText.textContent =
-                    "Не удалось выполнить запрос.";
+        }
 
-            } finally {
 
-                setLoading(false);
+        finally {
 
-            }
+            btn.disabled =
+                false;
 
         }
-    );
+
+    }
+);
 
 </script>