Spaces:

Mahmoudmody777
/

Flux1.1Pro-Fast-BFL-API-Control-Interface

Running

App Files Files Community

Mahmoudmody777 commited on Oct 9, 2024

Commit

078d61b

verified ·

1 Parent(s): 6beb1a6

Update index.html

Browse files

Files changed (1) hide show

index.html +554 -19

index.html CHANGED Viewed

@@ -1,19 +1,554 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Image generator</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 0;
+            background-color: #f9f9f9;
+            display: flex;
+            flex-direction: column;
+            height: 100vh;
+            overflow: hidden;
+        }
+        .header {
+            background-color: #007bff;
+            color: white;
+            padding: 15px;
+            text-align: center;
+            font-size: 24px;
+            position: sticky;
+            top: 0;
+            z-index: 2;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .header img {
+            max-height: 50px; /* ضبط ارتفاع الشعار */
+            margin-right: 10px; /* مسافة بين الشعار والعنوان */
+            cursor: pointer; /* تغيير المؤشر عند المرور */
+        }
+        .header img:hover + .tooltip {
+            display: block; /* إظهار الكلمة عند المرور */
+        }
+        .tooltip {
+            display: none;
+            position: absolute;
+            color: white;
+            background-color: rgba(0, 0, 0, 0.7);
+            padding: 5px;
+            border-radius: 5px;
+            font-size: 14px;
+            margin-left: -30px; /* ضبط الموقع */
+            margin-top: -30px; /* ضبط الموقع */
+        }
+        .container {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            flex: 1;
+            overflow-y: auto;
+        }
+        .api-info {
+            margin: 20px;
+            text-align: center;
+            font-size: 16px;
+            color: #333;
+        }
+        .api-info a {
+            color: #007bff;
+            text-decoration: none;
+        }
+        .api-info a:hover {
+            text-decoration: underline;
+        }
+        .controls {
+            width: 80%;
+            margin: 20px auto;
+            display: flex;
+            flex-direction: column;
+            align-items: stretch;
+        }
+        .controls label {
+            margin-bottom: 5px;
+            font-size: 14px;
+            color: #333;
+        }
+        .controls input[type="password"],
+        .controls input[type="text"],
+        .controls textarea {
+            width: 100%;
+            padding: 10px;
+            margin-bottom: 10px;
+            border: 1px solid #ccc;
+            border-radius: 5px;
+            font-size: 14px;
+            box-sizing: border-box;
+            transition: border-color 0.3s;
+        }
+        .controls input[type="password"]:focus,
+        .controls input[type="text"]:focus,
+        .controls textarea:focus {
+            border-color: #007bff;
+        }
+        .controls button {
+            padding: 10px;
+            background-color: #007bff;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            font-size: 16px;
+            transition: background-color 0.3s;
+        }
+        .controls button:hover {
+            background-color: #0056b3;
+        }
+        .sliders {
+            display: flex;
+            flex-direction: column;
+            margin: 10px 0;
+        }
+        .slider-container {
+            display: flex;
+            align-items: center;
+            margin-bottom: 15px;
+            flex-wrap: nowrap;
+        }
+        .slider-container label {
+            margin-right: 10px;
+            font-size: 14px;
+            color: #333;
+            width: 100px;
+        }
+        .slider-value {
+            width: 40px; /* تصغير عرض خانة القياس */
+            text-align: center;
+            font-size: 14px;
+            margin-left: 10px;
+        }
+        .output {
+            width: 80%;
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+            gap: 20px;
+            margin: 20px auto;
+        }
+        .output img {
+            width: 100%;
+            height: auto;
+            border-radius: 10px;
+            cursor: pointer;
+            max-height: 620px;
+            object-fit: contain;
+            transition: transform 0.3s;
+        }
+        .output img:hover {
+            transform: scale(1.05);
+        }
+        .image-container {
+            position: relative;
+        }
+        .delete-button {
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            background-color: red;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            padding: 5px 10px;
+            font-size: 12px;
+            display: none;
+        }
+        .image-container:hover .delete-button {
+            display: block;
+        }
+        #status {
+            text-align: center;
+            color: #333;
+            margin-top: 10px;
+            font-size: 14px;
+        }
+        .modal {
+            display: none;
+            position: fixed;
+            z-index: 1000;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            overflow: auto;
+            background-color: rgba(0, 0, 0, 0.8);
+            justify-content: center;
+            align-items: center;
+            padding: 20px;
+        }
+        .modal-content {
+            background-color: white;
+            padding: 50px;
+            border-radius: 10px;
+            max-width: 800px;
+            width: 100%;
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+        }
+        .modal img {
+            max-width: 50%;
+            height: auto;
+            border-radius: 10px;
+            margin-right: 20px;
+            object-fit: contain;
+        }
+        .prompt-info {
+            margin-top: 0px;
+            font-size: 14px;
+            max-width: 300px;
+        }
+        .copy-prompt {
+            background-color: #007bff;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            padding: 5px 10px;
+            margin-top: 10px;
+        }
+        .copy-prompt:hover {
+            background-color: #0056b3;
+        }
+        @media (max-width: 600px) {
+            .slider-container label {
+                width: auto;
+            }
+            .slider-container {
+                flex-direction: column;
+                align-items: stretch;
+            }
+            .slider-value {
+                margin-left: 0;
+                margin-top: 5px;
+            }
+            .modal img {
+                max-width: 100%;
+            }
+        }
+        input[type="range"] {
+            width: 100%; /* تكبير شريط التمرير */
+        }
+        .toggle-button {
+            background-color: #007bff;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            padding: 5px 10px;
+            margin-left: 10px;
+            font-size: 14px;
+        }
+        .toggle-button:hover {
+            background-color: #0056b3;
+        }
+    </style>
+</head>
+<body>
+<div class="header">
+    <img src="palestine.png" alt="Logo" id="logo"> <!-- استبدل your-logo-url.png برابط الشعار الخاص بك -->
+    <span class="tooltip">Free Palestine</span>
+    Pray for Palestine
+</div>
+<div class="api-info">
+    <p>Get the API key and 50 free credits to generate images and purchase from here<a href="https://api.bfl.ml/auth/login#" target="_blank">BFL API Portal</a>.</p> <!-- استبدل your-api-url.com برابط الموقع الخاص بك -->
+</div>
+<div class="container">
+    <div class="controls">
+        <label for="api-key">API Key:</label>
+        <div style="display: flex; align-items: center;">
+            <input type="password" id="api-key" placeholder="Enter your API Key">
+            <button class="toggle-button" id="toggle-api-key">Show</button>
+        </div>
+        <label for="prompt">Image Description:</label>
+        <textarea id="prompt" placeholder="Describe the image you want to generate" rows="4" maxlength="184"></textarea>
+        <div class="sliders">
+            <div class="slider-container">
+                <label for="width">Width:</label>
+                <input type="range" id="width" min="512" max="1440" step="64" value="1024">
+                <input class="slider-value" type="text" id="width-value" value="1024" readonly>
+            </div>
+            <div class="slider-container">
+                <label for="height">Height:</label>
+                <input type="range" id="height" min="512" max="1440" step="64" value="768">
+                <input class="slider-value" type="text" id="height-value" value="768" readonly>
+            </div>
+            <div class="slider-container">
+                <label for="steps">Steps:</label>
+                <input type="range" id="steps" min="1" max="100" step="1" value="8">
+                <input class="slider-value" type="text" id="steps-value" value="8" readonly>
+            </div>
+        </div>
+        <button id="generate-btn">Generate Image</button>
+        <p id="status"></p>
+    </div>
+    <div class="output" id="output-container"></div>
+</div>
+<div class="modal" id="modal">
+    <div class="modal-content">
+        <img id="modal-image" alt="Enlarged Image">
+        <div>
+            <div class="prompt-info" id="prompt-info"></div>
+            <div class="settings-info" id="settings-info"></div>
+            <button id="copy-prompt" class="copy-prompt">Copy Prompt</button>
+        </div>
+    </div>
+</div>
+<script>
+    const generateBtn = document.getElementById('generate-btn');
+    const promptInput = document.getElementById('prompt');
+    const apiKeyInput = document.getElementById('api-key');
+    const widthSlider = document.getElementById('width');
+    const heightSlider = document.getElementById('height');
+    const stepsSlider = document.getElementById('steps');
+    const widthValue = document.getElementById('width-value');
+    const heightValue = document.getElementById('height-value');
+    const stepsValue = document.getElementById('steps-value');
+    const statusElement = document.getElementById('status');
+    const outputContainer = document.getElementById('output-container');
+    const modal = document.getElementById('modal');
+    const modalImage = document.getElementById('modal-image');
+    const promptInfo = document.getElementById('prompt-info');
+    const settingsInfo = document.getElementById('settings-info');
+    const copyPromptBtn = document.getElementById('copy-prompt');
+    const toggleApiKeyBtn = document.getElementById('toggle-api-key');
+    let isApiKeyVisible = false;
+    window.onload = () => {
+        const savedPrompt = localStorage.getItem('lastPrompt');
+        const savedApiKey = localStorage.getItem('apiKey');
+        if (savedPrompt) {
+            promptInput.value = savedPrompt;
+        }
+        if (savedApiKey) {
+            apiKeyInput.value = savedApiKey;
+        }
+        loadImagesFromStorage();
+    };
+    function loadImagesFromStorage() {
+        const savedImages = JSON.parse(localStorage.getItem('images')) || [];
+        savedImages.forEach(imgObj => addImageToOutput(imgObj.url, imgObj.prompt, imgObj.width, imgObj.height, imgObj.steps));
+    }
+    widthSlider.addEventListener('input', () => {
+        widthValue.value = widthSlider.value;
+        localStorage.setItem('lastWidth', widthSlider.value);
+    });
+    heightSlider.addEventListener('input', () => {
+        heightValue.value = heightSlider.value;
+        localStorage.setItem('lastHeight', heightSlider.value);
+    });
+    stepsSlider.addEventListener('input', () => {
+        stepsValue.value = stepsSlider.value;
+        localStorage.setItem('lastSteps', stepsSlider.value);
+    });
+    generateBtn.addEventListener('click', async () => {
+        const prompt = promptInput.value;
+        const apiKey = apiKeyInput.value;
+        const width = widthSlider.value;
+        const height = heightSlider.value;
+        const steps = stepsSlider.value;
+        // تحقق من عدد الحروف
+        if (prompt.length > 184) {
+            alert('The prompt cannot exceed 184 characters.');
+            return;
+        }
+        if (!prompt || !apiKey) {
+            alert('Please enter both a prompt and API key!');
+            return;
+        }
+        localStorage.setItem('lastPrompt', prompt);
+        localStorage.setItem('apiKey', apiKey);
+        statusElement.textContent = 'Generating image...';
+        try {
+            const requestId = await sendImageGenerationRequest(prompt, width, height, steps, apiKey);
+            const imageUrl = await pollResult(requestId, apiKey);
+            addImageToOutput(imageUrl, prompt, width, height, steps);
+            statusElement.textContent = 'Image generated successfully!';
+        } catch (error) {
+            statusElement.textContent = `Error: ${error.message}`;
+        }
+    });
+    toggleApiKeyBtn.addEventListener('click', () => {
+        isApiKeyVisible = !isApiKeyVisible;
+        apiKeyInput.type = isApiKeyVisible ? 'text' : 'password';
+        toggleApiKeyBtn.textContent = isApiKeyVisible ? 'Hide' : 'Show';
+    });
+    function addImageToOutput(imageUrl, prompt, width, height, steps) {
+        const container = document.createElement('div');
+        container.className = 'image-container';
+        const img = document.createElement('img');
+        img.src = imageUrl;
+        img.alt = "Generated Image";
+        img.onclick = () => openModal(imageUrl, prompt, width, height, steps);
+        const deleteButton = document.createElement('button');
+        deleteButton.className = 'delete-button';
+        deleteButton.innerText = 'Delete';
+        deleteButton.onclick = (e) => {
+            e.stopPropagation();
+            container.remove();
+            removeImageFromStorage(imageUrl);
+        };
+        container.appendChild(img);
+        container.appendChild(deleteButton);
+        outputContainer.prepend(container);
+        let savedImages = JSON.parse(localStorage.getItem('images')) || [];
+        if (!savedImages.some(imgObj => imgObj.url === imageUrl)) {
+            savedImages.push({ url: imageUrl, prompt: prompt, width: width, height: height, steps: steps });
+            localStorage.setItem('images', JSON.stringify(savedImages));
+        }
+    }
+    function removeImageFromStorage(imageUrl) {
+        let savedImages = JSON.parse(localStorage.getItem('images')) || [];
+        savedImages = savedImages.filter(imgObj => imgObj.url !== imageUrl);
+        localStorage.setItem('images', JSON.stringify(savedImages));
+    }
+    function openModal(imageUrl, prompt, width, height, steps) {
+        modal.style.display = 'flex';
+        modalImage.src = imageUrl;
+        promptInfo.innerText = `Prompt: ${prompt}`;
+        settingsInfo.innerText = `Width: ${width}, Height: ${height}, Steps: ${steps}`;
+    }
+    copyPromptBtn.onclick = () => {
+        const promptText = promptInfo.innerText.replace('Prompt: ', '');
+        navigator.clipboard.writeText(promptText);
+    };
+    modal.onclick = (event) => {
+        if (event.target === modal) {
+            modal.style.display = 'none';
+        }
+    };
+    async function sendImageGenerationRequest(prompt, width, height, steps, apiKey) {
+        const response = await fetch('https://api.bfl.ml/v1/image', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'x-key': apiKey,
+            },
+            body: JSON.stringify({
+                prompt: prompt,
+                width: parseInt(width),
+                height: parseInt(height),
+                steps: parseInt(steps),
+            }),
+        });
+        const data = await response.json();
+        return data.id;
+    }
+    async function pollResult(requestId, apiKey) {
+        while (true) {
+            const result = await getResult(requestId, apiKey);
+            const status = result.status;
+            if (status === 'Ready') {
+                return result.result.sample;
+            } else if (['Error', 'Content Moderated', 'Request Moderated', 'Task not found'].includes(status)) {
+                throw new Error(`Image generation failed. Status: ${status}`);
+            }
+            await new Promise(resolve => setTimeout(resolve, 1000));
+        }
+    }
+    async function getResult(requestId, apiKey) {
+        const response = await fetch(`https://api.bfl.ml/v1/get_result?id=${requestId}`, {
+            method: 'GET',
+            headers: {
+                'x-key': apiKey,
+            },
+        });
+        const data = await response.json();
+        return data;
+    }
+</script>
+</body>
+</html>