mj-laf

Running

App Files Files Community

hujike

boris commited on May 23, 2023

Commit

367f93e

•

0 Parent(s):

Duplicate from dalle-mini/dalle-mini

Browse files

Co-authored-by: Boris Dayma <boris@users.noreply.huggingface.co>

Files changed (3) hide show

README.md +11 -0
html2canvas.js +0 -0
index.html +295 -0

README.md ADDED Viewed

	@@ -0,0 +1,11 @@

+---
+title: DALL·E mini
+metaTitle: DALL·E mini by craiyon.com on Hugging Face
+emoji: 🥑
+colorFrom: yellow
+colorTo: green
+sdk: static
+pinned: true
+license: apache-2.0
+duplicated_from: dalle-mini/dalle-mini
+---

html2canvas.js ADDED Viewed

The diff for this file is too large to render. See raw diff

index.html ADDED Viewed

	@@ -0,0 +1,295 @@

+<!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.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\'>\nNew model available on \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,
+          },
+        ],
+      };
+    </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>