Spaces:

Mahmoudmody777
/

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

Running

App Files Files Community

Mahmoudmody777 commited on Oct 13, 2024

Commit

318214d

•

1 Parent(s): aae3e63

Update index.html

Browse files

Files changed (1) hide show

index.html +35 -21

index.html CHANGED Viewed

@@ -31,13 +31,13 @@
         }
         .header img {
-            max-height: 50px; /* ضبط ارتفاع الشعار */
-            margin-right: 10px; /* مسافة بين الشعار والعنوان */
-            cursor: pointer; /* تغيير المؤشر عند المرور */
         }
         .header img:hover + .tooltip {
-            display: block; /* إظهار الكلمة عند المرور */
         }
         .tooltip {
@@ -48,8 +48,8 @@
             padding: 5px;
             border-radius: 5px;
             font-size: 14px;
-            margin-left: -30px; /* ضبط الموقع */
-            margin-top: -30px; /* ضبط الموقع */
         }
         .container {
@@ -145,7 +145,7 @@
         }
         .slider-value {
-            width: 40px; /* تصغير عرض خانة القياس */
             text-align: center;
             font-size: 14px;
             margin-left: 10px;
@@ -277,7 +277,7 @@
         }
         input[type="range"] {
-            width: 100%; /* تكبير شريط التمرير */
         }
         .toggle-button {
@@ -299,13 +299,13 @@
 <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">
@@ -337,6 +337,12 @@
                 <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>
@@ -364,9 +370,11 @@
     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');
@@ -393,7 +401,7 @@
     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', () => {
@@ -411,15 +419,20 @@
         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 >1000) {
             alert('The prompt cannot exceed 1000 characters.');
             return;
         }
@@ -435,9 +448,9 @@
         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}`;
@@ -450,14 +463,14 @@
         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';
@@ -474,7 +487,7 @@
         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));
         }
     }
@@ -485,11 +498,11 @@
         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 = () => {
@@ -503,7 +516,7 @@
         }
     };
-    async function sendImageGenerationRequest(prompt, width, height, steps, apiKey) {
         const response = await fetch('https://api.bfl.ml/v1/image', {
             method: 'POST',
             headers: {
@@ -515,6 +528,7 @@
                 width: parseInt(width),
                 height: parseInt(height),
                 steps: parseInt(steps),
             }),
         });

         }
         .header img {
+            max-height: 50px;
+            margin-right: 10px;
+            cursor: pointer;
         }
         .header img:hover + .tooltip {
+            display: block;
         }
         .tooltip {
             padding: 5px;
             border-radius: 5px;
             font-size: 14px;
+            margin-left: -30px;
+            margin-top: -30px;
         }
         .container {
         }
         .slider-value {
+            width: 40px;
             text-align: center;
             font-size: 14px;
             margin-left: 10px;
         }
         input[type="range"] {
+            width: 100%;
         }
         .toggle-button {
 <body>
 <div class="header">
+    <img src="palestine.png" alt="Logo" id="logo">
     <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>
 </div>
 <div class="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 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>
     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');
     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', () => {
         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;
         }
         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}`;
         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';
         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));
         }
     }
         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 = () => {
         }
     };
+    async function sendImageGenerationRequest(prompt, width, height, steps, promptPower, apiKey) { // إضافة خانة Prompt Power
         const response = await fetch('https://api.bfl.ml/v1/image', {
             method: 'POST',
             headers: {
                 width: parseInt(width),
                 height: parseInt(height),
                 steps: parseInt(steps),
+                promptPower: parseFloat(promptPower), // تمرير Prompt Power
             }),
         });