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" | |
| /> | |
| <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: 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: [5], height: "auto" }, // Ajusta las dimensiones de la cuadrícula | |
| }, | |
| }, | |
| { | |
| 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 }, | |
| }, | |
| }, | |
| ], | |
| theme: "default", | |
| css: ".container { max-width: 800px; margin: auto; }", | |
| title: "Gradio", | |
| enable_queue: false, | |
| layout: { | |
| id: 0, | |
| children: [ | |
| { | |
| id: 1, | |
| children: [ | |
| { | |
| id: 4, | |
| children: [ | |
| { | |
| id: 5, | |
| children: [{ id: 6, children: [{ id: 7 }, { id: 8 }] }], | |
| }, | |
| { id: 9 }, | |
| ], | |
| }, | |
| ], | |
| }, | |
| { | |
| id: 10, | |
| children: [{ id: 11 }], | |
| }, | |
| ], | |
| }, | |
| dependencies: [ | |
| { | |
| targets: [8], | |
| trigger: "click", | |
| inputs: [7], | |
| outputs: [9], | |
| backend_fn: false, | |
| js: ` | |
| async (text) => { | |
| try { | |
| document.querySelector('#screenshot').style.display = 'none'; | |
| response = await fetch('https://bf.dallemini.ai/generate', { | |
| method: 'POST', | |
| headers: { | |
| 'Accept': 'application/json', | |
| 'Content-Type': 'application/json' | |
| }, | |
| body: JSON.stringify({ | |
| prompt: text | |
| }) | |
| }); | |
| response = await response.json(); | |
| let imgs = response.images.map(r => "data:image/png;base64," + r); | |
| document.querySelector('#screenshot').style.display = 'block'; | |
| return imgs; | |
| } catch (e) { | |
| alert("Too much traffic, please try again."); | |
| IMG = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAMAAACahl6sAAAAOVBMVEXg4OB1dXXX19fd3d2EhIR9fX14eHjJycm2trbb29uurq6goKCZmZmIiIiBgYHNzc2np6e8vLySkpKXK8HrAAABuUlEQVR4nO3Z0bKCIBCAYQNFVCzr/R/2nHU6k8KpJi6wZf7vLu1id9gFhKYBAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAb249h7pzr5jD29uhospnlfNo4L+boiLKYyZ0iblKYiu/iNER3PTquD9npPgbB98Za0/twH59JVasMtzXo1m+iHny7PrwpysSuebgxCtmOTlkma121l/TFZR2UqXxEebxEO/87QZlZ3inpeCPzVftkojUyJp2OWVgKy23qSsbg8evitBSXkUjHzYN9Is0oeWoYkkUKazsxRYlYKa6ldFSfs7K/8tsnUSLrXHAuG1SOXpp5t1LEiQxSe33ZqDJIC4TdkziRJkRN9J1CXFlpIj7J9RvNSd0kiUj1zSVjyiKr4X5yTRIx0kYlY8oinbzfFSaJWFlJSsaUpZpEqimttNkTOpo9nX4TOqbfdEFM6FgQpW7c8OofSrYo1Wwaq9nG1/NhVc2nbj2HD821kuOgeg7o3hyZBj1Hpo9D7M3K+HeIrSmPeq4Vfl3ruOhpnly9vdyEfa1KLkPF7nr66GAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPjcD13rCcC3ILx/AAAAAElFTkSuQmCC" | |
| document.querySelector('#screenshot').style.display = 'block'; | |
| return Array(9).fill(IMG); | |
| } | |
| } | |
| `, | |
| 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: ` | |
| () => { | |
| const captureElement = document.getElementById(1); | |
| html2canvas(captureElement) | |
| .then(canvas => { | |
| canvas.style.display = 'none'; | |
| document.body.appendChild(canvas); | |
| return canvas; | |
| }) | |
| .then(canvas => { | |
| const image = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream'); | |
| const a = document.createElement('a'); | |
| const date = new Date(); | |
| const filename = \`dallemini_\${date.getFullYear()}-\${date.getMonth() + 1}-\${date.getDate()}_\${date.getHours()}-\${date.getMinutes()}-\${date.getSeconds()}.png\`; | |
| a.setAttribute('download', filename); | |
| a.setAttribute('href', image); | |
| a.click(); | |
| canvas.remove(); | |
| }); | |
| } | |
| `, | |
| 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> |