Hugging Face's logo

Spaces:
dalle-mini
/
dalle-mini
Running

App Files Community
11216

A man hold an bird leg with his hands and the bird colour is black at the back of bird it had circled green yellow red coloured #11083

by henon - opened
base: refs/heads/main
←
from: refs/pr/11083
Discussion Files changed
+71
-289
Files changed (1) hide show
  1. index.html +71 -289
index.html CHANGED
@@ -1,295 +1,77 @@
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta
6
- name="viewport"
7
- content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1"
8
- />
9
 
10
- <script>
11
- window.__gradio_mode__ = "app";
12
- window.gradio_config = {
13
- version: "3.0.26\n",
14
- mode: "blocks",
15
- dev_mode: false,
16
- components: [
17
- {
18
- id: 1,
19
- type: "column",
20
- props: {
21
- type: "column",
22
- variant: "default",
23
- visible: true,
24
- style: {},
25
- },
26
- },
27
- {
28
- id: 2,
29
- type: "markdown",
30
- props: {
31
- value:
32
- '<h1><center>DALL\u00b7E mini by <a href="https://www.craiyon.com/" target="_blank">craiyon.com</a></center></h1>',
33
- name: "markdown",
34
- visible: true,
35
- style: {},
36
- },
37
- },
38
- {
39
- id: 3,
40
- type: "markdown",
41
- props: {
42
- value:
43
- "<center>AI model generating images from any prompt!</center>",
44
- name: "markdown",
45
- visible: true,
46
- style: {},
47
- },
48
- },
49
- {
50
- id: 4,
51
- type: "group",
52
- props: { type: "group", visible: true, style: {} },
53
- },
54
- {
55
- id: 5,
56
- type: "box",
57
- props: { type: "box", visible: true, style: {} },
58
- },
59
- {
60
- id: 6,
61
- type: "row",
62
- props: {
63
- type: "row",
64
- visible: true,
65
- style: { equal_height: true, mobile_collapse: false },
66
- },
67
- },
68
- {
69
- id: 7,
70
- type: "textbox",
71
- props: {
72
- lines: 1,
73
- max_lines: 1,
74
- value: "",
75
- label: "Enter your prompt",
76
- show_label: false,
77
- name: "textbox",
78
- visible: true,
79
- elem_id: "prompt",
80
- style: { container: false },
81
- },
82
- },
83
- {
84
- id: 8,
85
- type: "button",
86
- props: {
87
- value: "Run",
88
- variant: "primary",
89
- name: "button",
90
- visible: true,
91
- style: {},
92
- },
93
- },
94
- {
95
- id: 9,
96
- type: "gallery",
97
- props: {
98
- value: [],
99
- label: "Generated images",
100
- show_label: false,
101
- name: "gallery",
102
- visible: true,
103
- elem_id: "gallery",
104
- style: { grid: [3], height: "auto" },
105
- },
106
- },
107
- {
108
- id: 10,
109
- type: "column",
110
- props: {
111
- type: "column",
112
- variant: "default",
113
- visible: true,
114
- style: {},
115
- },
116
- },
117
- {
118
- id: 11,
119
- type: "button",
120
- props: {
121
- value: "Screenshot",
122
- variant: "secondary",
123
- name: "button",
124
- visible: true,
125
- elem_id: "screenshot",
126
- style: { full_width: true },
127
- },
128
- },
129
- {
130
- id: 12,
131
- type: "markdown",
132
- props: {
133
- value:
134
- '<details>\n<summary>Bias and Limitations</summary>\n<p style=\'line-height: normal; font-size: small\'>\nWhile the capabilities of image generation models are impressive, they may also reinforce or exacerbate societal biases. While the extent and nature of the biases of the DALL\u00b7E mini model have yet to be fully documented, given the fact that the model was trained on unfiltered data from the Internet, it may generate images that contain stereotypes against minority groups. Work to analyze the nature and extent of these limitations is ongoing, and will be documented in more detail in the <a href="https://huggingface.co/dalle-mini/dalle-mini" target="_blank">DALL\u00b7E mini model card</a>.\n</p>\n</details>',
135
- name: "markdown",
136
- visible: true,
137
- style: {},
138
- },
139
- },
140
- {
141
- id: 13,
142
- type: "markdown",
143
- props: {
144
- value:
145
- '<p style=\'text-align: center\'>\nNew model available on \ud83d\udd8d\ufe0f <a href="https://www.craiyon.com/" target="_blank">craiyon.com</a>\n</p>',
146
- name: "markdown",
147
- visible: true,
148
- style: {},
149
- },
150
- },
151
- {
152
- id: 14,
153
- type: "markdown",
154
- props: {
155
- value:
156
- '<hr />\n<p style=\'text-align: center\'>\nCreated by <a href="https://twitter.com/borisdayma" target="_blank">Boris Dayma</a> et al. 2021-2022\n<br/>\n<a href="https://github.com/borisdayma/dalle-mini" target="_blank">GitHub</a> | <a href="https://wandb.ai/dalle-mini/dalle-mini/reports/DALL-E-mini-Generate-images-from-any-text-prompt--VmlldzoyMDE4NDAy" target="_blank">Project Report</a>\n<p style=\'text-align: center\'>Powered by Google <a href="https://sites.research.google/trc/" target="_blank">TPU Research Cloud</a>\n</p>',
157
- name: "markdown",
158
- visible: true,
159
- style: {},
160
- },
161
- },
162
- ],
163
- theme: "default",
164
- css: ".container { max-width: 800px; margin: auto; }",
165
- title: "Gradio",
166
- enable_queue: false,
167
- layout: {
168
- id: 0,
169
- children: [
170
- {
171
- id: 1,
172
- children: [
173
- { id: 2 },
174
- { id: 3 },
175
- {
176
- id: 4,
177
- children: [
178
- {
179
- id: 5,
180
- children: [{ id: 6, children: [{ id: 7 }, { id: 8 }] }],
181
- },
182
- { id: 9 },
183
- ],
184
- },
185
- ],
186
- },
187
- {
188
- id: 10,
189
- children: [{ id: 11 }, { id: 12 }, { id: 13 }, { id: 14 }],
190
- },
191
- ],
192
- },
193
- dependencies: [
194
- {
195
- targets: [8],
196
- trigger: "click",
197
- inputs: [7],
198
- outputs: [9],
199
- backend_fn: false,
200
- js: "\n async (text) => {\n try {\n document.querySelector('#screenshot').style.display = 'none';\n response = await fetch('https://bf.dallemini.ai/generate', {\n method: 'POST',\n headers: {\n 'Accept': 'application/json',\n 'Content-Type': 'application/json'\n },\n body: JSON.stringify({\n prompt: text\n })\n });\n response = await response.json()\n let imgs = response.images.map(r => \"data:image/png;base64,\" + r)\n document.querySelector('#screenshot').style.display = 'block';\n return imgs\n } catch (e) {\n alert(\"Too much traffic, please try again.\")\n IMG = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAMAAACahl6sAAAAOVBMVEXg4OB1dXXX19fd3d2EhIR9fX14eHjJycm2trbb29uurq6goKCZmZmIiIiBgYHNzc2np6e8vLySkpKXK8HrAAABuUlEQVR4nO3Z0bKCIBCAYQNFVCzr/R/2nHU6k8KpJi6wZf7vLu1id9gFhKYBAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAb249h7pzr5jD29uhospnlfNo4L+boiLKYyZ0iblKYiu/iNER3PTquD9npPgbB98Za0/twH59JVasMtzXo1m+iHny7PrwpysSuebgxCtmOTlkma121l/TFZR2UqXxEebxEO/87QZlZ3inpeCPzVftkojUyJp2OWVgKy23qSsbg8evitBSXkUjHzYN9Is0oeWoYkkUKazsxRYlYKa6ldFSfs7K/8tsnUSLrXHAuG1SOXpp5t1LEiQxSe33ZqDJIC4TdkziRJkRN9J1CXFlpIj7J9RvNSd0kiUj1zSVjyiKr4X5yTRIx0kYlY8oinbzfFSaJWFlJSsaUpZpEqimttNkTOpo9nX4TOqbfdEFM6FgQpW7c8OofSrYo1Wwaq9nG1/NhVc2nbj2HD821kuOgeg7o3hyZBj1Hpo9D7M3K+HeIrSmPeq4Vfl3ruOhpnly9vdyEfa1KLkPF7nr66GAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPjcD13rCcC3ILx/AAAAAElFTkSuQmCC\"\n document.querySelector('#screenshot').style.display = 'block';\n return Array(9).fill(IMG)\n }\n }\n ",
201
- status_tracker: null,
202
- queue: null,
203
- api_name: null,
204
- scroll_to_output: false,
205
- show_progress: true,
206
- },
207
- {
208
- targets: [11],
209
- trigger: "click",
210
- inputs: [],
211
- outputs: [],
212
- backend_fn: false,
213
- js: "\n () => {\n const captureElement = document.getElementById(1)\n let bg_color = getComputedStyle(document.querySelector(\"#root .container\"))[\"background-color\"]\n captureElement.style.backgroundColor = bg_color; \n html2canvas(captureElement)\n .then(canvas => {\n canvas.style.display = 'none'\n document.body.appendChild(canvas)\n return canvas\n })\n .then(canvas => {\n const image = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream')\n const a = document.createElement('a')\n const date = new Date()\n const filename = `dallemini_${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}_${date.getHours()}-${date.getMinutes()}-${date.getSeconds()}.png`\n a.setAttribute('download', filename)\n a.setAttribute('href', image)\n a.click()\n canvas.remove()\n })\n }\n ",
214
- status_tracker: null,
215
- queue: null,
216
- api_name: null,
217
- scroll_to_output: false,
218
- show_progress: true,
219
- },
220
- ],
221
- };
222
- </script>
223
 
224
- <link rel="preconnect" href="https://fonts.googleapis.com" />
225
- <link
226
- rel="preconnect"
227
- href="https://fonts.gstatic.com"
228
- crossorigin="anonymous"
229
- />
230
- <link
231
- href="https://fonts.googleapis.com/css?family=Source Sans Pro"
232
- rel="stylesheet"
233
- />
234
- <link
235
- href="https://fonts.googleapis.com/css?family=IBM Plex Mono"
236
- rel="stylesheet"
237
- />
238
- <script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.1/iframeResizer.contentWindow.min.js"></script>
239
- <script
240
- type="module"
241
- crossorigin
242
- src="https://gradio.s3-us-west-2.amazonaws.com/3.0.9b12/assets/index.8eca4ae7.js"
243
- ></script>
244
- <link
245
- rel="stylesheet"
246
- href="https://gradio.s3-us-west-2.amazonaws.com/3.0.9b12/assets/index.cbea297d.css"
247
- />
248
- <style>
249
- #screenshot {
250
- display: none;
251
- }
252
- .container > div > div {
253
- padding: 0.5rem;
254
- }
255
- footer a {
256
- color: rgb(156 163 175) !important;
257
- }
258
- footer img {
259
- display: none !important;
260
- }
261
- </style>
262
- <style id="mofo">
263
- body {
264
- display: none !important;
265
- }
266
- </style>
267
- <script type="text/javascript">
268
- if (
269
- self === top ||
270
- window.location.ancestorOrigins[0] === "https://huggingface.co"
271
- ) {
272
- var mofo = document.getElementById("mofo");
273
- mofo.parentNode.removeChild(mofo);
274
- } else {
275
- top.location = self.location;
276
- }
277
- </script>
278
- </head>
279
 
280
- <body
281
- style="
282
- margin: 0;
283
- padding: 0;
284
- display: flex;
285
- flex-direction: column;
286
- flex-grow: 1;
287
- "
288
- >
289
- <div
290
- id="root"
291
- style="display: flex; flex-direction: column; flex-grow: 1"
292
- ></div>
293
- <script src="html2canvas.js"></script>
294
- </body>
295
  </html>
1
+
2
  <!DOCTYPE html>
3
  <html lang="en">
4
+ <head>
5
+ <meta charset="utf-8" />
6
+ <meta
7
+ name="viewport"
8
+ content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1"
9
+ />
10
 
11
+ <script>
12
+ window.__gradio_mode__ = "app";
13
+ window.gradio_config = {"version": "3.0.26\n", "mode": "blocks", "dev_mode": false, "components": [{"id": 1, "type": "column", "props": {"type": "column", "variant": "default", "visible": true, "style": {}}}, {"id": 2, "type": "markdown", "props": {"value": "<h1><center>DALL\u00b7E mini by <a href=\"https://www.craiyon.com/\" target=\"_blank\">craiyon.com</a></center></h1>", "name": "markdown", "visible": true, "style": {}}}, {"id": 3, "type": "markdown", "props": {"value": "<center>AI model generating images from any prompt!</center>", "name": "markdown", "visible": true, "style": {}}}, {"id": 4, "type": "group", "props": {"type": "group", "visible": true, "style": {}}}, {"id": 5, "type": "box", "props": {"type": "box", "visible": true, "style": {}}}, {"id": 6, "type": "row", "props": {"type": "row", "visible": true, "style": {"equal_height": true, "mobile_collapse": false}}}, {"id": 7, "type": "textbox", "props": {"lines": 1, "max_lines": 1, "value": "", "label": "Enter your prompt", "show_label": false, "name": "textbox", "visible": true, "elem_id": "prompt", "style": {"container": false}}}, {"id": 8, "type": "button", "props": {"value": "Run", "variant": "primary", "name": "button", "visible": true, "style": {}}}, {"id": 9, "type": "gallery", "props": {"value": [], "label": "Generated images", "show_label": false, "name": "gallery", "visible": true, "elem_id": "gallery", "style": {"grid": [3], "height": "auto"}}}, {"id": 10, "type": "column", "props": {"type": "column", "variant": "default", "visible": true, "style": {}}}, {"id": 11, "type": "button", "props": {"value": "Screenshot", "variant": "secondary", "name": "button", "visible": true, "elem_id": "screenshot", "style": {"full_width": true}}}, {"id": 12, "type": "markdown", "props": {"value": "<details>\n<summary>Bias and Limitations</summary>\n<p style='line-height: normal; font-size: small'>\nWhile the capabilities of image generation models are impressive, they may also reinforce or exacerbate societal biases. While the extent and nature of the biases of the DALL\u00b7E mini model have yet to be fully documented, given the fact that the model was trained on unfiltered data from the Internet, it may generate images that contain stereotypes against minority groups. Work to analyze the nature and extent of these limitations is ongoing, and will be documented in more detail in the <a href=\"https://huggingface.co/dalle-mini/dalle-mini\" target=\"_blank\">DALL\u00b7E mini model card</a>.\n</p>\n</details>", "name": "markdown", "visible": true, "style": {}}}, {"id": 13, "type": "markdown", "props": {"value": "<p style='text-align: center'>\nDALL\u00b7E mini has migrated to \ud83d\udd8d\ufe0f <a href=\"https://www.craiyon.com/\" target=\"_blank\">craiyon.com</a>\n</p>", "name": "markdown", "visible": true, "style": {}}}, {"id": 14, "type": "markdown", "props": {"value": "<hr />\n<p style='text-align: center'>\nCreated by <a href=\"https://twitter.com/borisdayma\" target=\"_blank\">Boris Dayma</a> et al. 2021-2022\n<br/>\n<a href=\"https://github.com/borisdayma/dalle-mini\" target=\"_blank\">GitHub</a> | <a href=\"https://wandb.ai/dalle-mini/dalle-mini/reports/DALL-E-mini-Generate-images-from-any-text-prompt--VmlldzoyMDE4NDAy\" target=\"_blank\">Project Report</a>\n<p style='text-align: center'>Powered by Google <a href=\"https://sites.research.google/trc/\" target=\"_blank\">TPU Research Cloud</a>\n</p>", "name": "markdown", "visible": true, "style": {}}}], "theme": "default", "css": ".container { max-width: 800px; margin: auto; }", "title": "Gradio", "enable_queue": false, "layout": {"id": 0, "children": [{"id": 1, "children": [{"id": 2}, {"id": 3}, {"id": 4, "children": [{"id": 5, "children": [{"id": 6, "children": [{"id": 7}, {"id": 8}]}]}, {"id": 9}]}]}, {"id": 10, "children": [{"id": 11}, {"id": 12}, {"id": 13}, {"id": 14}]}]}, "dependencies": [{"targets": [8], "trigger": "click", "inputs": [7], "outputs": [9], "backend_fn": false, "js": "\n async (text) => {\n var prompt = encodeURIComponent(text);\n if (text == \"\") {\n window.open(\"https://www.craiyon.com\", '_blank');\n } else {\n window.open(\"https://www.craiyon.com/?prompt=\" + prompt, '_blank');\n }\n }\n ", "status_tracker": null, "queue": null, "api_name": null, "scroll_to_output": false, "show_progress": true}, {"targets": [11], "trigger": "click", "inputs": [], "outputs": [], "backend_fn": false, "js": "\n () => {\n const captureElement = document.getElementById(1)\n let bg_color = getComputedStyle(document.querySelector(\"#root .container\"))[\"background-color\"]\n captureElement.style.backgroundColor = bg_color; \n html2canvas(captureElement)\n .then(canvas => {\n canvas.style.display = 'none'\n document.body.appendChild(canvas)\n return canvas\n })\n .then(canvas => {\n const image = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream')\n const a = document.createElement('a')\n const date = new Date()\n const filename = `dallemini_${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}_${date.getHours()}-${date.getMinutes()}-${date.getSeconds()}.png`\n a.setAttribute('download', filename)\n a.setAttribute('href', image)\n a.click()\n canvas.remove()\n })\n }\n ", "status_tracker": null, "queue": null, "api_name": null, "scroll_to_output": false, "show_progress": true}]};
14
+ </script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
15
 
16
+ <link rel="preconnect" href="https://fonts.googleapis.com" />
17
+ <link
18
+ rel="preconnect"
19
+ href="https://fonts.gstatic.com"
20
+ crossorigin="anonymous"
21
+ />
22
+ <link
23
+ href="https://fonts.googleapis.com/css?family=Source Sans Pro"
24
+ rel="stylesheet"
25
+ />
26
+ <link
27
+ href="https://fonts.googleapis.com/css?family=IBM Plex Mono"
28
+ rel="stylesheet"
29
+ />
30
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.1/iframeResizer.contentWindow.min.js"></script>
31
+ <script type="module" crossorigin src="https://gradio.s3-us-west-2.amazonaws.com/3.0.9b12/assets/index.8eca4ae7.js"></script>
32
+ <link rel="stylesheet" href="https://gradio.s3-us-west-2.amazonaws.com/3.0.9b12/assets/index.cbea297d.css">
33
+ <style>
34
+ #screenshot {
35
+ display: none;
36
+ }
37
+ .container > div > div {
38
+ padding: 0.5rem;
39
+ }
40
+ footer a {
41
+ color: rgb(156 163 175) !important;
42
+ }
43
+ footer img {
44
+ display: none !important;
45
+ }
46
+ </style>
47
+ <style id="mofo">
48
+ body {
49
+ display: none !important;
50
+ }
51
+ </style>
52
+ <script type="text/javascript">
53
+ if (self === top || window.location.ancestorOrigins[0] === "https://huggingface.co") {
54
+ var mofo = document.getElementById("mofo");
55
+ mofo.parentNode.removeChild(mofo);
56
+ } else {
57
+ top.location = self.location;
58
+ }
59
+ </script>
60
+ </head>
 
 
 
 
 
 
 
 
 
 
61
 
62
+ <body
63
+ style="
64
+ margin: 0;
65
+ padding: 0;
66
+ display: flex;
67
+ flex-direction: column;
68
+ flex-grow: 1;
69
+ "
70
+ >
71
+ <div
72
+ id="root"
73
+ style="display: flex; flex-direction: column; flex-grow: 1"
74
+ ></div>
75
+ <script src="html2canvas.js"></script>
76
+ </body>
77
  </html>