Spaces:

Mahmoudmody777
/

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

Running

App Files Files Community

Mahmoudmody777 commited on Oct 15, 2024

Commit

f94ab89

verified ·

1 Parent(s): 318214d

Update index.html

Browse files

Files changed (1) hide show

index.html +68 -49

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <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;
@@ -25,12 +25,12 @@
             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;
@@ -51,23 +51,23 @@
             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;
         }
@@ -76,6 +76,7 @@
             text-decoration: underline;
         }
         .controls {
             width: 80%;
             margin: 20px auto;
@@ -145,7 +146,7 @@
         }
         .slider-value {
-            width: 40px;
             text-align: center;
             font-size: 14px;
             margin-left: 10px;
@@ -177,21 +178,32 @@
             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;
         }
@@ -277,7 +289,7 @@
         }
         input[type="range"] {
-            width: 100%;
         }
         .toggle-button {
@@ -317,7 +329,7 @@
         </div>
         <label for="prompt">Image Description:</label>
-        <textarea id="prompt" placeholder="Describe the image you want to generate" rows="4" maxlength="1000"></textarea>
         <div class="sliders">
             <div class="slider-container">
@@ -337,12 +349,6 @@
                 <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 class="slider-container">
-                <label for="prompt-power">Prompt Power:</label>
-                <input type="range" id="prompt-power" min="1" max="10" step="0.1" value="3.5">
-                <input class="slider-value" type="text" id="prompt-power-value" value="3.5" readonly>
-            </div>
         </div>
         <button id="generate-btn">Generate Image</button>
@@ -370,11 +376,9 @@
     const widthSlider = document.getElementById('width');
     const heightSlider = document.getElementById('height');
     const stepsSlider = document.getElementById('steps');
-    const promptPowerSlider = document.getElementById('prompt-power'); // خانة التحكم الجديدة
     const widthValue = document.getElementById('width-value');
     const heightValue = document.getElementById('height-value');
     const stepsValue = document.getElementById('steps-value');
-    const promptPowerValue = document.getElementById('prompt-power-value'); // خانة التحكم الجديدة
     const statusElement = document.getElementById('status');
     const outputContainer = document.getElementById('output-container');
     const modal = document.getElementById('modal');
@@ -401,7 +405,7 @@
     function loadImagesFromStorage() {
         const savedImages = JSON.parse(localStorage.getItem('images')) || [];
-        savedImages.forEach(imgObj => addImageToOutput(imgObj.url, imgObj.prompt, imgObj.width, imgObj.height, imgObj.steps, imgObj.promptPower));
     }
     widthSlider.addEventListener('input', () => {
@@ -419,23 +423,12 @@
         localStorage.setItem('lastSteps', stepsSlider.value);
     });
-    promptPowerSlider.addEventListener('input', () => {
-        promptPowerValue.value = promptPowerSlider.value;
-        localStorage.setItem('lastPromptPower', promptPowerSlider.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;
-        const promptPower = promptPowerSlider.value; // قيمة Prompt Power
-        if (prompt.length > 1000) {
-            alert('The prompt cannot exceed 1000 characters.');
-            return;
-        }
         if (!prompt || !apiKey) {
             alert('Please enter both a prompt and API key!');
@@ -448,9 +441,9 @@
         statusElement.textContent = 'Generating image...';
         try {
-            const requestId = await sendImageGenerationRequest(prompt, width, height, steps, promptPower, apiKey); // تمرير Prompt Power
             const imageUrl = await pollResult(requestId, apiKey);
-            addImageToOutput(imageUrl, prompt, width, height, steps, promptPower); // تمرير Prompt Power
             statusElement.textContent = 'Image generated successfully!';
         } catch (error) {
             statusElement.textContent = `Error: ${error.message}`;
@@ -463,31 +456,48 @@
         toggleApiKeyBtn.textContent = isApiKeyVisible ? 'Hide' : 'Show';
     });
-    function addImageToOutput(imageUrl, prompt, width, height, steps, promptPower) { // إضافة خانة Prompt Power
         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, promptPower); // تمرير Prompt Power
         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, promptPower: promptPower }); // إضافة خانة Prompt Power
             localStorage.setItem('images', JSON.stringify(savedImages));
         }
     }
@@ -498,11 +508,20 @@
         localStorage.setItem('images', JSON.stringify(savedImages));
     }
-    function openModal(imageUrl, prompt, width, height, steps, promptPower) { // تمرير Prompt Power
         modal.style.display = 'flex';
         modalImage.src = imageUrl;
         promptInfo.innerText = `Prompt: ${prompt}`;
-        settingsInfo.innerText = `Width: ${width}, Height: ${height}, Steps: ${steps}, Prompt Power: ${promptPower}`; // عرض Prompt Power
     }
     copyPromptBtn.onclick = () => {
@@ -516,7 +535,7 @@
         }
     };
-    async function sendImageGenerationRequest(prompt, width, height, steps, promptPower, apiKey) { // إضافة خانة Prompt Power
         const response = await fetch('https://api.bfl.ml/v1/image', {
             method: 'POST',
             headers: {
@@ -528,7 +547,6 @@
                 width: parseInt(width),
                 height: parseInt(height),
                 steps: parseInt(steps),
-                promptPower: parseFloat(promptPower), // تمرير Prompt Power
             }),
         });
@@ -564,5 +582,6 @@
     }
 </script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Image Generator bfl api by mahmoudshokri</title>
     <style>
         body {
             font-family: Arial, sans-serif;
             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;
             margin-left: -30px;
             margin-top: -30px;
         }
+       .container {
             display: flex;
             flex-direction: column;
             align-items: center;
             flex: 1;
             overflow-y: auto;
         }
+		.api-info {
+            margin: 19px;
             text-align: center;
             font-size: 16px;
             color: #333;
         }
+	    .api-info a {
             color: #007bff;
             text-decoration: none;
         }
             text-decoration: underline;
         }
         .controls {
             width: 80%;
             margin: 20px auto;
         }
         .slider-value {
+            width: 40px; /* تصغير عرض خانة القياس */
             text-align: center;
             font-size: 14px;
             margin-left: 10px;
             position: relative;
         }
+        .delete-button, .download-button {
             position: absolute;
             top: 10px;
             background-color: red;
             color: white;
             border: none;
             border-radius: 5px;
             cursor: pointer;
             padding: 5px 10px;
+        }
+        .delete-button {
+            left: 25px; /* وضع زر الحذف على اليسار */
+			background: border-box;
+		    width: 55px;
         }
+        .download-button {
+            left: 75px; /* وضع زر التحميل على اليمين */
+            width: 52px;
+			background: border-box;
+        }
+        .image-container:hover .delete-button,
+        .image-container:hover .download-button {
             display: block;
         }
         }
         input[type="range"] {
+            width: 100%; /* تكبير شريط التمرير */
         }
         .toggle-button {
         </div>
         <label for="prompt">Image Description:</label>
+        <textarea id="prompt" placeholder="Describe the image you want to generate" rows="4"></textarea>
         <div class="sliders">
             <div class="slider-container">
                 <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>
     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');
     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', () => {
         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 || !apiKey) {
             alert('Please enter both a prompt and API key!');
         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.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';
+        const deleteIcon = document.createElement('img');
+        deleteIcon.src = 'delete.png'; // استبدل بالمسار الصحيح للأيقونة
+        deleteButton.appendChild(deleteIcon);
         deleteButton.onclick = (e) => {
             e.stopPropagation();
             container.remove();
             removeImageFromStorage(imageUrl);
         };
+        // زر التحميل مع أيقونة
+        const downloadButton = document.createElement('button');
+        downloadButton.className = 'download-button';
+        const downloadIcon = document.createElement('img');
+        downloadIcon.src = 'download.png'; // استبدل بالمسار الصحيح للأيقونة
+        downloadButton.appendChild(downloadIcon);
+        downloadButton.onclick = (e) => {
+            e.stopPropagation();
+            downloadImage(imageUrl);
+        };
         container.appendChild(img);
         container.appendChild(deleteButton);
+        container.appendChild(downloadButton);
         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));
         }
     }
         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}`;
+    }
+    function downloadImage(imageUrl) {
+        const a = document.createElement('a');
+        a.href = imageUrl;
+        a.download = 'generated-image.png'; // Specify the default filename
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
     }
     copyPromptBtn.onclick = () => {
         }
     };
+    async function sendImageGenerationRequest(prompt, width, height, steps, apiKey) {
         const response = await fetch('https://api.bfl.ml/v1/image', {
             method: 'POST',
             headers: {
                 width: parseInt(width),
                 height: parseInt(height),
                 steps: parseInt(steps),
             }),
         });
     }
 </script>
 </body>
 </html>