Hugging Face's logo

Spaces:
remiai3
/
image-generation-ui-v2
Sleeping

App Files Community
remiai3 commited on
Commit
6f6c558
·
verified ·
1 Parent(s): 48a8a77

Upload 2 files

Browse files
Files changed (1) hide show
  1. static/index.html +147 -147
static/index.html CHANGED
@@ -1,148 +1,148 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Image Generation UI</title>
7
- <style>
8
- body {
9
- font-family: Arial, sans-serif;
10
- text-align: center;
11
- margin: 0;
12
- padding: 20px;
13
- background-color: #f0f0f0;
14
- }
15
- .container {
16
- max-width: 800px;
17
- margin: 0 auto;
18
- }
19
- img.logo {
20
- max-width: 150px;
21
- margin-bottom: 20px;
22
- }
23
- select, input, button {
24
- margin: 10px;
25
- padding: 8px;
26
- font-size: 16px;
27
- border-radius: 4px;
28
- border: 1px solid #ccc;
29
- }
30
- button {
31
- background-color: #4CAF50;
32
- color: white;
33
- cursor: pointer;
34
- }
35
- button:hover {
36
- background-color: #45a049;
37
- }
38
- #prompt {
39
- width: 300px;
40
- }
41
- #output {
42
- margin-top: 20px;
43
- display: flex;
44
- flex-wrap: wrap;
45
- justify-content: center;
46
- gap: 10px;
47
- }
48
- .output-image {
49
- max-width: 200px;
50
- border: 1px solid #ddd;
51
- border-radius: 4px;
52
- }
53
- .error {
54
- color: red;
55
- margin-top: 10px;
56
- }
57
- .loading {
58
- display: none;
59
- margin-top: 10px;
60
- font-style: italic;
61
- }
62
- </style>
63
- </head>
64
- <body>
65
- <div class="container">
66
- <img src="/assets/logo.png" alt="Logo" class="logo">
67
- <h1>Image Generation UI</h1>
68
- <div>
69
- <label for="model-select">Select Model:</label>
70
- <select id="model-select">
71
- <option value="ssd-1b">SSD-1B</option>
72
- <option value="sd-v1-5">Stable Diffusion v1-5</option>
73
- </select>
74
- </div>
75
- <div>
76
- <label for="ratio-select">Image Ratio:</label>
77
- <select id="ratio-select">
78
- <option value="1:1">1:1</option>
79
- <option value="3:4">3:4</option>
80
- <option value="16:9">16:9</option>
81
- </select>
82
- </div>
83
- <div>
84
- <label for="num-images">Number of Images (1-4):</label>
85
- <input type="number" id="num-images" min="1" max="4" value="1">
86
- </div>
87
- <div>
88
- <label for="prompt">Prompt:</label>
89
- <input type="text" id="prompt" placeholder="Enter your prompt">
90
- </div>
91
- <div>
92
- <label for="guidance-scale">Guidance Scale:</label>
93
- <input type="number" id="guidance-scale" min="1" max="20" step="0.5" value="7.5">
94
- </div>
95
- <button onclick="generateImages()">Generate Images</button>
96
- <div id="loading" class="loading">Generating images, please wait...</div>
97
- <div id="error" class="error"></div>
98
- <div id="output"></div>
99
- </div>
100
- <script>
101
- async function generateImages() {
102
- const model = document.getElementById('model-select').value;
103
- const ratio = document.getElementById('ratio-select').value;
104
- const numImages = document.getElementById('num-images').value;
105
- const prompt = document.getElementById('prompt').value;
106
- const guidanceScale = document.getElementById('guidance-scale').value;
107
- const outputDiv = document.getElementById('output');
108
- const errorDiv = document.getElementById('error');
109
- const loadingDiv = document.getElementById('loading');
110
-
111
- outputDiv.innerHTML = '';
112
- errorDiv.innerText = '';
113
- loadingDiv.style.display = 'block';
114
-
115
- try {
116
- const response = await fetch('/generate', {
117
- method: 'POST',
118
- headers: { 'Content-Type': 'application/json' },
119
- body: JSON.stringify({
120
- model,
121
- prompt,
122
- ratio,
123
- num_images: numImages,
124
- guidance_scale: guidanceScale
125
- })
126
- });
127
-
128
- loadingDiv.style.display = 'none';
129
- const data = await response.json();
130
-
131
- if (response.ok) {
132
- data.images.forEach(imgSrc => {
133
- const img = document.createElement('img');
134
- img.src = imgSrc;
135
- img.className = 'output-image';
136
- outputDiv.appendChild(img);
137
- });
138
- } else {
139
- errorDiv.innerText = data.error || 'Failed to generate images';
140
- }
141
- } catch (error) {
142
- loadingDiv.style.display = 'none';
143
- errorDiv.innerText = 'Error: ' + error.message;
144
- }
145
- }
146
- </script>
147
- </body>
148
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Image Generation UI</title>
7
+ <style>
8
+ body {
9
+ font-family: Arial, sans-serif;
10
+ text-align: center;
11
+ margin: 0;
12
+ padding: 20px;
13
+ background-color: #f0f0f0;
14
+ }
15
+ .container {
16
+ max-width: 800px;
17
+ margin: 0 auto;
18
+ }
19
+ img.logo {
20
+ max-width: 150px;
21
+ margin-bottom: 20px;
22
+ }
23
+ select, input, button {
24
+ margin: 10px;
25
+ padding: 8px;
26
+ font-size: 16px;
27
+ border-radius: 4px;
28
+ border: 1px solid #ccc;
29
+ }
30
+ button {
31
+ background-color: #4CAF50;
32
+ color: white;
33
+ cursor: pointer;
34
+ }
35
+ button:hover {
36
+ background-color: #45a049;
37
+ }
38
+ #prompt {
39
+ width: 300px;
40
+ }
41
+ #output {
42
+ margin-top: 20px;
43
+ display: flex;
44
+ flex-wrap: wrap;
45
+ justify-content: center;
46
+ gap: 10px;
47
+ }
48
+ .output-image {
49
+ max-width: 200px;
50
+ border: 1px solid #ddd;
51
+ border-radius: 4px;
52
+ }
53
+ .error {
54
+ color: red;
55
+ margin-top: 10px;
56
+ }
57
+ .loading {
58
+ display: none;
59
+ margin-top: 10px;
60
+ font-style: italic;
61
+ }
62
+ </style>
63
+ </head>
64
+ <body>
65
+ <div class="container">
66
+ <img src="/assets/logo.png" alt="Logo" class="logo">
67
+ <h1>Image Generation UI</h1>
68
+ <div>
69
+ <label for="model-select">Select Model:</label>
70
+ <select id="model-select">
71
+ <option value="ssd-1b">SSD-1B</option>
72
+ <option value="sd-v1-5">Stable Diffusion v1-5</option>
73
+ </select>
74
+ </div>
75
+ <div>
76
+ <label for="ratio-select">Image Ratio:</label>
77
+ <select id="ratio-select">
78
+ <option value="1:1">1:1</option>
79
+ <option value="3:4">3:4</option>
80
+ <option value="16:9">16:9</option>
81
+ </select>
82
+ </div>
83
+ <div>
84
+ <label for="num-images">Number of Images (1-4):</label>
85
+ <input type="number" id="num-images" min="1" max="4" value="1">
86
+ </div>
87
+ <div>
88
+ <label for="prompt">Prompt:</label>
89
+ <input type="text" id="prompt" placeholder="Enter your prompt">
90
+ </div>
91
+ <div>
92
+ <label for="guidance-scale">Guidance Scale:</label>
93
+ <input type="number" id="guidance-scale" min="1" max="20" step="0.5" value="7.5">
94
+ </div>
95
+ <button onclick="generateImages()">Generate Images</button>
96
+ <div id="loading" class="loading">Generating images, please wait...</div>
97
+ <div id="error" class="error"></div>
98
+ <div id="output"></div>
99
+ </div>
100
+ <script>
101
+ async function generateImages() {
102
+ const model = document.getElementById('model-select').value;
103
+ const ratio = document.getElementById('ratio-select').value;
104
+ const numImages = document.getElementById('num-images').value;
105
+ const prompt = document.getElementById('prompt').value;
106
+ const guidanceScale = document.getElementById('guidance-scale').value;
107
+ const outputDiv = document.getElementById('output');
108
+ const errorDiv = document.getElementById('error');
109
+ const loadingDiv = document.getElementById('loading');
110
+
111
+ outputDiv.innerHTML = '';
112
+ errorDiv.innerText = '';
113
+ loadingDiv.style.display = 'block';
114
+
115
+ try {
116
+ const response = await fetch('/generate', {
117
+ method: 'POST',
118
+ headers: { 'Content-Type': 'application/json' },
119
+ body: JSON.stringify({
120
+ model,
121
+ prompt,
122
+ ratio,
123
+ num_images: numImages,
124
+ guidance_scale: guidanceScale
125
+ })
126
+ });
127
+
128
+ loadingDiv.style.display = 'none';
129
+ const data = await response.json();
130
+
131
+ if (response.ok) {
132
+ data.images.forEach(imgSrc => {
133
+ const img = document.createElement('img');
134
+ img.src = imgSrc;
135
+ img.className = 'output-image';
136
+ outputDiv.appendChild(img);
137
+ });
138
+ } else {
139
+ errorDiv.innerText = data.error || 'Failed to generate images';
140
+ }
141
+ } catch (error) {
142
+ loadingDiv.style.display = 'none';
143
+ errorDiv.innerText = 'Error: ' + error.message;
144
+ }
145
+ }
146
+ </script>
147
+ </body>
148
  </html>