Spaces:
Running
Running
File size: 13,075 Bytes
9d7320c 6b7320d b015b30 6b7320d b015b30 6b7320d 40b797f 6b7320d b015b30 6b7320d b015b30 6b7320d b015b30 6b7320d 9d7320c 18e1562 7cdb5c5 50a38e3 7cdb5c5 50a38e3 b015b30 66c51d6 b015b30 40b797f 8868387 18e1562 e857e4f 841d16a 8868387 e857e4f 18e1562 8868387 18e1562 b33ff30 b015b30 f530ecb b015b30 50a38e3 7cdb5c5 18e1562 8868387 6601411 18e1562 6b7320d |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1"
/>
<script>
window.__gradio_mode__ = "app";
window.gradio_config = {"version": "3.0.17", "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</center></h1>",
"name": "markdown", "visible": true, "style": {}}},
{"id": 3, "type": "markdown", "props": {"value": "<p>DALL\u00b7E mini is an AI model that generates images from any prompt you give!</p>\n",
"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": {"label": "Generated images", "show_label": false,
"name": "gallery", "visible": true, "elem_id": "gallery", "style": {"grid": [2], "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": "<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; }",
"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}]}]}, "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 document.getElementById(3).style.display = 'none';\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 document.getElementById(3).style.display = 'block';\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" />
<link
rel="preconnect"
href="https://fonts.gstatic.com"
crossorigin="anonymous"
/>
<link
href="https://fonts.googleapis.com/css?family=Source Sans Pro"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css?family=IBM Plex Mono"
rel="stylesheet"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.1/iframeResizer.contentWindow.min.js"></script>
<script type="module" crossorigin src="https://gradio.s3-us-west-2.amazonaws.com/3.0.9b12/assets/index.8eca4ae7.js"></script>
<link rel="stylesheet" href="https://gradio.s3-us-west-2.amazonaws.com/3.0.9b12/assets/index.cbea297d.css">
<style>
#screenshot {
display: none;
}
.container > div > div {
padding: 0.5rem;
}
footer a {
color: rgb(156 163 175) !important;
}
footer img {
display: none !important;
}
</style>
</head>
<body
style="
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
flex-grow: 1;
"
>
<div
id="root"
style="display: flex; flex-direction: column; flex-grow: 1"
></div>
<script src="html2canvas.js"></script>
</body>
</html>
<script>
function getParamVal(params) {
var url = location.href;
var paraString = url.substring(url.indexOf("?") + 1, url.length).split("&");
var paraObj = { };
for (i = 0; j = paraString[i]; i++) {
paraObj[j.substring(0, j.indexOf("=")).toLowerCase()] = j.substring(j.indexOf("=") + 1, j.length);
}
var returnValue = paraObj[params.toLowerCase()];
if (typeof (returnValue) == "undefined") {
return "";
} else {
return returnValue;
}
}
function setNativeValue(element, value) {
const valueSetter = Object.getOwnPropertyDescriptor(element.__proto__, 'value').set;
const prototype = Object.getPrototypeOf(element);
const prototypeValueSetter = Object.getOwnPropertyDescriptor(prototype, 'value').set;
if (valueSetter && valueSetter !== prototypeValueSetter) {
prototypeValueSetter.call(element, value);
} else {
valueSetter.call(element, value);
}
}
function hiddenElement(id) {
let ele = document.querySelector(id);
if (ele) {
ele.style.display = "none";
}
}
function showElement(id) {
let ele = document.querySelector(id);
if (ele) {
ele.style.display = "block";
}
}
var prompt = decodeURI(getParamVal("prompt"));
window['checkPrompt'] = function checkPrompt() {
try {
mx_auto = document.querySelector('.mx-auto');
if (mx_auto) {
mx_auto.setAttribute('style', 'max-width:100%; margin-top:-50px;')
mx_auto.children[0].children[0].children[2].children[0].style.display = "none";
}
prompt_work = document.querySelector('.gr-text-input');
if (prompt_work) {
window.clearInterval(window['checkPrompt_interval']);
var prompt = decodeURI(getParamVal("prompt"));
if (prompt.length > 0) {
hiddenElement("[id='2']");
hiddenElement("[id='3']");
hiddenElement("[id='11']");
hiddenElement("[id='12']");
hiddenElement("[id='13']");
hiddenElement('.gr-text-input');
hiddenElement('.gr-button');
console.log('prompt__'+prompt);
setNativeValue(prompt_work, prompt);
prompt_work.dispatchEvent(new Event('input', { bubbles: true }));
run_btn = document.querySelector('.gr-button');
if (run_btn) {
run_btn.click();
}
}
}
} catch(e) {
}
}
if (prompt.length > 0) {
window['checkPrompt_interval'] = window.setInterval("window.checkPrompt()", 100);
}
</script>
|