Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/themes/prism.css"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/styles/default.min.css"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/highlight.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/languages/python.min.js"></script> | |
| <title>SDXL API</title> | |
| <style> | |
| /* Add your CSS styling here */ | |
| body { | |
| font-family: Arial, sans-serif; | |
| background-color: rgb(0,0,15); | |
| color: white; | |
| } | |
| .code-container { | |
| background-color: #000; /* Change the background color to black */ | |
| padding: 20px; | |
| border-radius: 5px; | |
| border: 1px solid #ccc; | |
| margin-bottom: 20px; | |
| overflow-x: auto; /* Enable horizontal scroll */ | |
| } | |
| label { | |
| display: block; | |
| margin-bottom: 5px; | |
| background-color: rgb(0,0,15); | |
| color: white; | |
| } | |
| input[type="text"], | |
| input[type="number"], | |
| select { | |
| width: 100%; | |
| padding: 8px; | |
| margin-bottom: 10px; | |
| border: 1px solid #000000; | |
| border-radius: 4px; | |
| background-color: rgb(0,0,15); | |
| box-sizing: border-box; | |
| color: white; | |
| border: 1px solid rgb(250, 4, 188); | |
| width: 50%; | |
| } | |
| button { | |
| background-color: #4CAF50; | |
| color: white; | |
| padding: 10px 20px; | |
| border: none; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| } | |
| button:hover { | |
| background-color: #45a049; | |
| } | |
| #response { | |
| margin-top: 20px; | |
| border: 1px solid #0a0a0a; | |
| padding: 10px; | |
| border-radius: 4px; | |
| } | |
| p{ | |
| color: rgb(255, 0, 0); | |
| } | |
| .token keyword{ | |
| background-color: #000; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h2>FREE SDXL API!</h2> | |
| <a href="https://discord.gg/whhTdtPfKc" target="_blank" style="color: blue">Join Discord for any Support or Assistance </a> <br> | |
| <a href="https://buymeacoffee.com/mygx" target="_blank" style="color: blue"> Buy me Coffee 💵 </a> | |
| <p>Scroll down for api code example</p> | |
| <p>RateLimit: 100 requests per minute</p> | |
| <form id="apiForm"> | |
| <label for="prompt">Prompt:</label> | |
| <input type="text" id="prompt" name="prompt" value="car"> | |
| <label for="apply_watermark">Apply Watermark:</label> | |
| <select id="apply_watermark" name="apply_watermark"> | |
| <option value="true">True</option> | |
| <option value="false">False</option> | |
| </select> | |
| <label for="width">Width:</label> | |
| <input type="number" id="width" name="width" value="1024"> | |
| <label for="height">Height:</label> | |
| <input type="number" id="height" name="height" value="1024"> | |
| <label for="num_outputs">Number of Outputs:</label> | |
| <input type="number" id="num_outputs" name="num_outputs" value="1"> | |
| <label for="scheduler">Scheduler:</label> | |
| <input type="text" id="scheduler" name="scheduler" value="DDIM"> | |
| <label for="num_inference_steps">Number of Inference Steps:</label> | |
| <input type="number" id="num_inference_steps" name="num_inference_steps" value="40"> | |
| <label for="guidance_scale">Guidance Scale:</label> | |
| <input type="number" id="guidance_scale" name="guidance_scale" value="8"> | |
| <label for="prompt_strength">Prompt Strength:</label> | |
| <input type="number" id="prompt_strength" name="prompt_strength" value="0.8"> | |
| <label for="seed">Seed:</label> | |
| <input type="number" id="seed" name="seed" value="69"> | |
| <label for="refine">Refine:</label> | |
| <input type="text" id="refine" name="refine" value="no_refiner"> | |
| <label for="high_noise_frac">High Noise Fraction:</label> | |
| <input type="number" id="high_noise_frac" name="high_noise_frac" value="1"> | |
| <!-- Add more input fields for other parameters --> | |
| <button type="submit" id="submitButton">Submit</button> | |
| <p id="loadingText" style="display: none;">Generating image...</p> | |
| </form> | |
| <div id="response"></div> | |
| <div class="code-container"> | |
| <pre><code id="codeBlock" class="language-python"> | |
| import requests | |
| url = 'https://fumes-api.onrender.com/sdxl-api' | |
| payload = {'prompt': 'car', | |
| "apply_watermark": False, | |
| "negative_prompt": '', | |
| "image": None, | |
| "mask": None, | |
| "width": 1024, | |
| "height": 1024, | |
| "num_outputs": 1, | |
| "scheduler": 'DDIM', | |
| "num_inference_steps": 40, | |
| "guidance_scale": 8, | |
| "prompt_strength": 0.8, | |
| "seed": 69, | |
| "refine": "no_refiner", | |
| "high_noise_frac": 1, | |
| "refine_steps": None,} | |
| response = requests.post(url, json=payload) | |
| print(response.json()) | |
| </code></pre> | |
| </div> | |
| <!-- Include Prism.js library --> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/prism.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/components/prism-python.min.js"></script> | |
| <script> | |
| document.getElementById("apiForm").addEventListener("submit", function(event) { | |
| event.preventDefault(); | |
| var formData = new FormData(this); | |
| var submitButton = document.getElementById("submitButton"); | |
| var loadingText = document.getElementById("loadingText"); | |
| submitButton.disabled = true; | |
| loadingText.style.display = "block"; | |
| fetch('https://fumes-api.onrender.com/sdxl-api', { | |
| method: 'POST', | |
| body: JSON.stringify(Object.fromEntries(formData)), | |
| headers: { | |
| 'Content-Type': 'application/json' | |
| } | |
| }) | |
| .then(response => response.json()) | |
| .then(data => { | |
| document.getElementById("response").innerText = JSON.stringify(data.output, null, 2); | |
| submitButton.disabled = false; | |
| loadingText.style.display = "none"; | |
| }) | |
| .catch(error => { | |
| console.error('Error:', error); | |
| submitButton.disabled = false; | |
| loadingText.style.display = "none"; | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |