UI for changing input image

README.md

@@ -9,7 +9,6 @@
 
 1. Run times of VAE encoder and UNET are inconsistent and can be too slow by 10x
 2. The image latents are probably not sampled correctly
-3. Need to add UI for changing the image
 
 ---
 

demos/sd-turbo/index.html

@@ -120,7 +120,11 @@ <h1 class="title">
             </div>
         </div>
         <div id="data_area" class="grid-2">
-            <div class="show" style="visibility: hidden"></div>
+            <div id="data_input">
+                <p>
+                    Click or drag-and-drop to change image
+                </p>
+            </div>
             <div id="data1"></div>
         </div>
         <div class="button-group key" id="buttons">
@@ -138,7 +142,7 @@ <h1 class="title">
                 Force download models
             </label>
             <label>
-                <input type="checkbox" id="image_to_image">
+                <input type="checkbox" id="image_to_image" checked>
                 Image to image
             </label>
 

demos/sd-turbo/index.js

@@ -1038,13 +1038,50 @@ const ui = async () => {
   tokenizer = await AutoTokenizer.from_pretrained(path);
   tokenizer.pad_token_id = 0;
 
+  await draw_input_image('input.jpg')
+};
+
+document.addEventListener("DOMContentLoaded", ui, false);
+
+async function draw_input_image(src) {
   const img = new Image()
-  img.src = 'input.jpg'
+  img.src = src
   await img.decode()
   img_canvas_input.width = 512
   img_canvas_input.height = 512
   const ctx = img_canvas_input.getContext('2d')
-  ctx.drawImage(img, 0, 0)
-};
+  ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, 512, 512)
+}
+
+const pickerOpts = {
+  types: [
+    {
+      description: "Images",
+      accept: {
+        "image/*": [".png", ".gif", ".jpeg", ".jpg", ".webp"],
+      },
+    },
+  ],
+  excludeAcceptAllOption: true,
+  multiple: false,
+}
+
+async function upload_image() {
+    const [fileHandle] = await window.showOpenFilePicker(pickerOpts)
+    await draw_input_image(URL.createObjectURL(await fileHandle.getFile()))
+}
+
+async function drop(ev) {
+    ev.preventDefault()
+    img_canvas_input.style.outline = 'none'
+    if (ev.dataTransfer.items && ev.dataTransfer.items[0].kind == 'file')
+        await draw_input_image(URL.createObjectURL(ev.dataTransfer.items[0].getAsFile()))
+}
 
-document.addEventListener("DOMContentLoaded", ui, false);
+img_canvas_input.addEventListener('click', upload_image)
+data_input.addEventListener('click', upload_image)
+img_canvas_input.addEventListener('dragover', ev => ev.preventDefault())
+img_canvas_input.addEventListener('dragenter', () => img_canvas_input.style.outline = '10px dashed green')
+img_canvas_input.addEventListener('dragleave', () => img_canvas_input.style.outline = 'none')
+img_canvas_input.addEventListener('dragend', () => img_canvas_input.style.outline = 'none')
+img_canvas_input.addEventListener('drop', ev => drop(ev))

demos/sd-turbo/static/main.css

@@ -76,10 +76,19 @@ body {
   scrollbar-color: var(--main-01), transparent;
 }
 
-#img_canvas_input:is(body:has(#image_to_image:not(:checked), #camera:checked) *) {
+#img_canvas_input, #data_input {
+    cursor: hand;
+}
+
+:is(#img_canvas_input, #data_input):is(body:has(#image_to_image:not(:checked)) *) {
     visibility: hidden;
 }
 
+#data_input > p {
+    margin-top: 0;
+    text-align: center;
+}
+
 #image_strength {
     height: min-content;
     width: 7ch;
@@ -346,7 +355,7 @@ h1.title span {
   height: 40px;
 }
 
-#data_area div {
+#data_area #data1 {
   padding: 4px 18px;
   background-color: var(--pink);
   color: var(--bg);
@@ -356,11 +365,11 @@ h1.title span {
   display: none;
 }
 
-#data_area div.show {
+#data_area #data1.show {
   display: inline-block;
 }
 
-#data_area div:hover {
+#data_area #data1:hover {
   background-color: var(--main-darker);
   color: var(--bg);
   transform: skew(-15deg);