webui 0.1.0

webui/src/.gitignore

@@ -1 +1,2 @@
-node_modules
+node_modules
+dist/

webui/src/modules/app/app.css

@@ -8,6 +8,7 @@
 #app>div{
     padding: 0 0 0.8em;
     border-top: var(--sub-bg) 2px dashed;
+    position: relative;
 }
 
 #app h3 {

webui/src/modules/app/app.js

@@ -1,6 +1,7 @@
 import config from "../../config.js"
 import {TemplateChooser} from "../template"
 import {AvatarUploader} from "../uploader";
+import {ResultArea} from "../result";
 
 import "./app.css"
 
@@ -19,6 +20,8 @@ export default class {
     #templateChooser
     /** @type { AvatarUploader } */
     #uploader
+    /** @type {ResultArea} */
+    #resultArea
 
     /** @param { string } id */
     constructor(id) {
@@ -66,20 +69,20 @@ export default class {
 
     generate = async () => {
         if (!this.#uploader.ready) return
+        if (!this.#resultArea) {
+            this.#resultArea = new ResultArea()
+            this.#parentElement.appendChild(this.#resultArea.dom)
+        }
 
         const formData = new FormData()
         formData.append('key', this.#template.key)
-        for (const item of this.#uploader.data){
+        for (const item of this.#uploader.data) {
             formData.append(item.name, item.file, item.name)
         }
 
-        const data = await fetch(this.#url + '/petpet', {
+        this.#resultArea.promise = fetch(this.#url + '/petpet', {
             body: formData,
             method: 'post'
         })
-
-        const img = document.createElement('img')
-        img.src = URL.createObjectURL(await data.blob())
-        document.body.appendChild(img)
     }
 }

webui/src/modules/result/index.js

@@ -0,0 +1 @@
+export {default as ResultArea} from './result-area'

webui/src/modules/result/result-area.js

@@ -0,0 +1,55 @@
+import {dom, Loading} from "../ui/index.js";
+import './result.css'
+
+export default class {
+    /** @type {HTMLDivElement} */
+    #parentElement
+    /** @type {HTMLDivElement} */
+    #element
+    /** @type {HTMLImageElement} */
+    #imageEle
+    /** @type {Loading} */
+    #loading
+
+    constructor() {
+        this.#parentElement = dom()
+        this.#element = dom('div', {id: 'result-area'})
+        this.#parentElement.append(
+            dom('h3', {html: 'Result: 生成结果'}),
+            this.#element
+        )
+
+        this.#imageEle = new Image()
+        this.#hideImg()
+        this.#element.appendChild(this.#imageEle)
+        this.#loading = new Loading(this.#element)
+        this.#loading.show()
+    }
+
+    set promise(imgPromise) {
+        (async () => {
+            this.#loading.show()
+            try {
+                const data = await imgPromise
+                this.#imageEle.src = URL.createObjectURL(await data.blob())
+                this.#showImg()
+                this.#loading.hide()
+            } catch (e) {
+                this.#loading.error()
+                throw new Error(e)
+            }
+        })()
+    }
+
+    #hideImg() {
+        this.#imageEle.classList.add('hide')
+    }
+
+    #showImg() {
+        this.#imageEle.classList.remove('hide')
+    }
+
+    get dom() {
+        return this.#parentElement
+    }
+}

webui/src/modules/result/result.css

@@ -0,0 +1,11 @@
+#result-area {
+    position: relative;
+    max-width: calc(min(50vw, 24em) + 8em);
+    min-height: 8em;
+    border-radius: 16px;
+}
+
+#result-area>img {
+    width: 100%;
+    border-radius: inherit;
+}

webui/src/package.json

@@ -1,7 +1,7 @@
 {
     "name": "petpet-webui",
     "private": false,
-    "version": "0.0.1",
+    "version": "0.1.0",
     "type": "module",
     "scripts": {
         "dev": "vite",