Add Stable Diffusion XL example

modal-labs · Aug 10, 2023 · 7b76f42 · 7b76f42
1 parent ada537b
commit 7b76f42
Showing 1 changed file with 30 additions and 0 deletions.
diff --git a/06_gpu_and_ml/stable_diffusion/frontend/index.html b/06_gpu_and_ml/stable_diffusion/frontend/index.html
@@ -15,10 +15,14 @@ <h2 class="text-3xl font-medium text-center mb-10">
         Stable Diffusion XL 1.0 on Modal
       </h2>
 
+<<<<<<< HEAD
       <form
         @submit.prevent="submitPrompt"
         class="flex items-center justify-center gap-x-4 gap-y-2 w-full mx-auto mb-4"
       >
+=======
+      <form @submit.prevent="submitPrompt" class="flex items-center justify-center gap-x-4 gap-y-2 w-full mx-auto mb-4">
+>>>>>>> 961b7ea (Add Stable Diffusion XL example)
         <input
           x-data
           x-model="prompt"
@@ -50,11 +54,15 @@ <h2 class="text-3xl font-medium text-center mb-10">
       </form>
 
       <div class="mx-auto w-full max-w-[768px] relative grid">
+<<<<<<< HEAD
         <div
           style="padding-top: 100%"
           x-show="loading"
           class="absolute w-full h-full animate-pulse bg-neutral-100 rounded-md"
         ></div>
+=======
+        <div style="padding-top: 100%;" x-show="loading" class="absolute w-full h-full animate-pulse bg-neutral-100 rounded-md"></div>
+>>>>>>> 961b7ea (Add Stable Diffusion XL example)
         <img
           x-show="imageURL"
           class="rounded-md self-center justify-self-center"
@@ -71,6 +79,7 @@ <h2 class="text-3xl font-medium text-center mb-10">
           submitted: "",
           submittedFeatures: [],
           loading: false,
+<<<<<<< HEAD
           imageURL: "",
           async submitPrompt() {
             if (!this.prompt) return;
@@ -84,17 +93,38 @@ <h2 class="text-3xl font-medium text-center mb-10">
             const res = await fetch(`/infer/${this.submitted}?${queryString}`);
 
             const blob = await res.blob();
+=======
+          imageURL: '',
+          async submitPrompt() {
+            if (!this.prompt) return;
+            this.submitted = this.prompt;
+            this.submittedFeatures = [...this.features]; 
+            this.loading = true;
+
+            const queryString = new URLSearchParams(this.features.map((f) => ['features', f])).toString();
+            const res = await fetch(`/infer/${this.submitted}?${queryString}`);
+
+            console.log("res returned ... but so slow?");
+            const blob = await res.blob();
+            console.log("got blob")
+>>>>>>> 961b7ea (Add Stable Diffusion XL example)
             this.imageURL = URL.createObjectURL(blob);
             this.loading = false;
             console.log(this.imageURL);
           },
           toggleFeature(featureName) {
             let index = this.features.indexOf(featureName);
+<<<<<<< HEAD
             index == -1
               ? this.features.push(featureName)
               : this.features.splice(index, 1);
           },
         };
+=======
+            index == -1 ? this.features.push(featureName) : this.features.splice(index, 1);
+          }
+        }
+>>>>>>> 961b7ea (Add Stable Diffusion XL example)
       }
     </script>
   </body>