Update index.html

index.html

@@ -24,8 +24,6 @@
               style: {},
             },
           },
-
-
           {
             id: 4,
             type: "group",
@@ -81,7 +79,7 @@
               name: "gallery",
               visible: true,
               elem_id: "gallery",
-              style: { grid: [3], height: "auto" },
+              style: { grid: [3, 2], height: "auto" },  // Ajusta las dimensiones de la cuadrícula
             },
           },
           {
@@ -106,9 +104,6 @@
               style: { full_width: true },
             },
           },
-
-
-
         ],
         theme: "default",
         css: ".container { max-width: 800px; margin: auto; }",
@@ -145,99 +140,146 @@
             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) !important;
-      }
-      footer img {
-        display: none !important;
-      }
-    </style>
-    <style id="mofo">
-      body {
-        display: none !important;
-      }
-    </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>
+            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);
+                    let bg_color = getComputedStyle(document.querySelector("#root .container"))["background-color"];
+                    captureElement.style.backgroundColor = bg_color;      
+                    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) !important;
+            }
+            footer img {
+              display: none !important;
+            }
+          </style>
+          <style id="mofo">
+            body {
+              display: none !important;
+            }
+          </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>