Spaces:
Running
Running
<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" | |
/> | |
<title>MultiFusion</title> | |
<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>💧 Multi Fusion</center></h1>', | |
name: "markdown", | |
visible: true, | |
style: {}, | |
}, | |
}, | |
{ | |
id: 3, | |
type: "markdown", | |
props: { | |
value: | |
"<center>This space is designed to generate images with Stable Diffusion, Dall•E-2!</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: "▶️", | |
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>Limitations</summary>\n<p style=\'line-height: normal; font-size: small\'>\nWe want to declare that we have no limits, censorship and other restrictions, we also guarantee complete confidentiality of all users, since this is a non-commercial project and we rely on moral support from users, we rely only on your intelligence, adequacy and your understanding, thank you .\n</p>\n</details>', | |
name: "markdown", | |
visible: true, | |
style: {}, | |
}, | |
}, | |
{ | |
id: 13, | |
type: "markdown", | |
props: { | |
value: | |
'<p style=\'text-align: center\'>\nUsually generation takes no more than 50 seconds (9 images are generated at a time)\n</p>', | |
name: "markdown", | |
visible: true, | |
style: {}, | |
}, | |
}, | |
{ | |
id: 14, | |
type: "markdown", | |
props: { | |
value: | |
'<hr />\n<p style=\'text-align: center\'>\n👑 Created by <a href="https://hf.co/viait" target="_blank">viaIT Group</a>\n<br/>\n<a href="https://github.com/borisdayma/dalle-mini" target="_blank">🗂 API</a> | <a href="https://stats.uptimerobot.com/4rjLpsYY7Z" target="_blank">📊 Status</a>\n<p style=\'text-align: center\'>💻 Local <a href="https://github.com/viait-group/multi-fusion" target="_blank">setup</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" /> | |
<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) ; | |
} | |
footer img { | |
display: none ; | |
} | |
</style> | |
<style id="mofo"> | |
body { | |
display: none ; | |
} | |
</style> | |
<script type="text/javascript"> | |
if ( | |
self === top || | |
window.location.ancestorOrigins[0] === "https://huggingface.co" | |
) { | |
var mofo = document.getElementById("mofo"); | |
mofo.parentNode.removeChild(mofo); | |
} else { | |
top.location = self.location; | |
} | |
</script> | |
</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> | |