Hugging Face's logo

Spaces:
Nymbo
/
Free-SDXL-API
Running

App Files Community
FumesAI commited on
Commit
a85af88
•
1 Parent(s): 93c230a

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +190 -18
index.html CHANGED
@@ -1,19 +1,191 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/themes/prism.css">
6
+
7
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/styles/default.min.css">
9
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/highlight.min.js"></script>
10
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/languages/python.min.js"></script>
11
+ <title>SDXL API</title>
12
+ <style>
13
+ /* Add your CSS styling here */
14
+ body {
15
+ font-family: Arial, sans-serif;
16
+ background-color: rgb(0,0,15);
17
+ color: white;
18
+ }
19
+ .code-container {
20
+ background-color: #000; /* Change the background color to black */
21
+ padding: 20px;
22
+ border-radius: 5px;
23
+ border: 1px solid #ccc;
24
+ margin-bottom: 20px;
25
+ overflow-x: auto; /* Enable horizontal scroll */
26
+ }
27
+ label {
28
+ display: block;
29
+ margin-bottom: 5px;
30
+ background-color: rgb(0,0,15);
31
+ color: white;
32
+ }
33
+ input[type="text"],
34
+ input[type="number"],
35
+ select {
36
+ width: 100%;
37
+ padding: 8px;
38
+ margin-bottom: 10px;
39
+ border: 1px solid #000000;
40
+ border-radius: 4px;
41
+ background-color: rgb(0,0,15);
42
+ box-sizing: border-box;
43
+ color: white;
44
+ border: 1px solid rgb(250, 4, 188);
45
+ width: 50%;
46
+ }
47
+ button {
48
+ background-color: #4CAF50;
49
+ color: white;
50
+ padding: 10px 20px;
51
+ border: none;
52
+ border-radius: 4px;
53
+ cursor: pointer;
54
+ }
55
+ button:hover {
56
+ background-color: #45a049;
57
+ }
58
+ #response {
59
+ margin-top: 20px;
60
+ border: 1px solid #0a0a0a;
61
+ padding: 10px;
62
+ border-radius: 4px;
63
+ }
64
+ p{
65
+ color: rgb(255, 0, 0);
66
+ }
67
+ .token keyword{
68
+ background-color: #000;
69
+ }
70
+ </style>
71
+ </head>
72
+ <body>
73
+ <h2>FREE SDXL API!</h2>
74
+ <a href="https://discord.gg/whhTdtPfKc" target="_blank" style="color: blue">Join Discord for any Support or Assistance </a> <br>
75
+ <a href="https://buymeacoffee.com/mygx" target="_blank" style="color: blue"> Buy me Coffee 💵 </a>
76
+ <p>Scroll down for api code example</p>
77
+
78
+ <p>RateLimit: 100 requests per minute</p>
79
+ <form id="apiForm">
80
+ <label for="prompt">Prompt:</label>
81
+ <input type="text" id="prompt" name="prompt" value="car">
82
+
83
+ <label for="apply_watermark">Apply Watermark:</label>
84
+ <select id="apply_watermark" name="apply_watermark">
85
+ <option value="true">True</option>
86
+ <option value="false">False</option>
87
+ </select>
88
+
89
+ <label for="width">Width:</label>
90
+ <input type="number" id="width" name="width" value="1024">
91
+
92
+ <label for="height">Height:</label>
93
+ <input type="number" id="height" name="height" value="1024">
94
+
95
+ <label for="num_outputs">Number of Outputs:</label>
96
+ <input type="number" id="num_outputs" name="num_outputs" value="1">
97
+
98
+ <label for="scheduler">Scheduler:</label>
99
+ <input type="text" id="scheduler" name="scheduler" value="DDIM">
100
+
101
+ <label for="num_inference_steps">Number of Inference Steps:</label>
102
+ <input type="number" id="num_inference_steps" name="num_inference_steps" value="40">
103
+
104
+ <label for="guidance_scale">Guidance Scale:</label>
105
+ <input type="number" id="guidance_scale" name="guidance_scale" value="8">
106
+
107
+ <label for="prompt_strength">Prompt Strength:</label>
108
+ <input type="number" id="prompt_strength" name="prompt_strength" value="0.8">
109
+
110
+ <label for="seed">Seed:</label>
111
+ <input type="number" id="seed" name="seed" value="69">
112
+
113
+ <label for="refine">Refine:</label>
114
+ <input type="text" id="refine" name="refine" value="no_refiner">
115
+
116
+ <label for="high_noise_frac">High Noise Fraction:</label>
117
+ <input type="number" id="high_noise_frac" name="high_noise_frac" value="1">
118
+
119
+ <!-- Add more input fields for other parameters -->
120
+
121
+ <button type="submit" id="submitButton">Submit</button>
122
+ <p id="loadingText" style="display: none;">Generating image...</p>
123
+ </form>
124
+
125
+ <div id="response"></div>
126
+
127
+ <div class="code-container">
128
+ <pre><code id="codeBlock" class="language-python">
129
+ import requests
130
+ url = 'https://fumes-api.onrender.com/sdxl-api'
131
+ payload = {'prompt': 'car',
132
+ "apply_watermark": False,
133
+ "negative_prompt": '',
134
+ "image": None,
135
+ "mask": None,
136
+ "width": 1024,
137
+ "height": 1024,
138
+ "num_outputs": 1,
139
+ "scheduler": 'DDIM',
140
+ "num_inference_steps": 40,
141
+ "guidance_scale": 8,
142
+ "prompt_strength": 0.8,
143
+ "seed": 69,
144
+ "refine": "no_refiner",
145
+ "high_noise_frac": 1,
146
+ "refine_steps": None,}
147
+ response = requests.post(url, json=payload)
148
+ print(response.json())
149
+ </code></pre>
150
+ </div>
151
+
152
+ <!-- Include Prism.js library -->
153
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/prism.js"></script>
154
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/components/prism-python.min.js"></script>
155
+
156
+
157
+
158
+
159
+ <script>
160
+ document.getElementById("apiForm").addEventListener("submit", function(event) {
161
+ event.preventDefault();
162
+
163
+ var formData = new FormData(this);
164
+ var submitButton = document.getElementById("submitButton");
165
+ var loadingText = document.getElementById("loadingText");
166
+
167
+ submitButton.disabled = true;
168
+ loadingText.style.display = "block";
169
+
170
+ fetch('https://fumes-api.onrender.com/sdxl-api', {
171
+ method: 'POST',
172
+ body: JSON.stringify(Object.fromEntries(formData)),
173
+ headers: {
174
+ 'Content-Type': 'application/json'
175
+ }
176
+ })
177
+ .then(response => response.json())
178
+ .then(data => {
179
+ document.getElementById("response").innerText = JSON.stringify(data.output, null, 2);
180
+ submitButton.disabled = false;
181
+ loadingText.style.display = "none";
182
+ })
183
+ .catch(error => {
184
+ console.error('Error:', error);
185
+ submitButton.disabled = false;
186
+ loadingText.style.display = "none";
187
+ });
188
+ });
189
+ </script>
190
+ </body>
191
  </html>