Update index.html

index.html

@@ -10,7 +10,7 @@
 
 		<script>
 			window.__gradio_mode__ = "app";
-            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 is migrating 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            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        ", "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}]};
+            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": 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            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        ", "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}]};
         </script>
 
 		<link rel="preconnect" href="https://fonts.googleapis.com" />