From d8259de52f96f2649f9ef005a066ca200c8ceab0 Mon Sep 17 00:00:00 2001
From: shadowcz007 <chizhiwei007@163.com>
Date: Sun, 10 Mar 2024 17:20:18 +0800
Subject: [PATCH] appinfo add author info

---
 web/index.html               |  20 +++-
 web/javascript/app_mixlab.js | 183 ++++++++++++++++++++++++++++++++++-
 web/javascript/ui_mixlab.js  |  41 ++++++++
 3 files changed, 234 insertions(+), 10 deletions(-)

diff --git a/web/index.html b/web/index.html
index 0adfc8f..4d1b1b6 100644
--- a/web/index.html
+++ b/web/index.html
@@ -411,7 +411,7 @@
 
         </a>
     </div>
-
+    <a id="author"></a>
     <!-- <script type="module" src="https://cdn.bootcdn.net/ajax/libs/photoswipe/5.4.0/photoswipe-lightbox.esm.min.js"></script> -->
     <script type="module">
         import PhotoSwipeLightbox from '/extensions/comfyui-mixlab-nodes/lib/photoswipe-lightbox.esm.min.js'
@@ -1203,9 +1203,9 @@
                         // imageElement.src = base64Df
                         let url = `${get_url()}/view?filename=${encodeURIComponent(name)}&type=input&subfolder=${subfolder}&rand=${Math.random()}`
                         imageElement.src = url;
-                        imageElement.setAttribute('onerror',`this.src='${base64Df}'`)
-                       
-                        
+                        imageElement.setAttribute('onerror', `this.src='${base64Df}'`)
+
+
                     }
 
                     imageElement.style.maxWidth = '200px';
@@ -1322,7 +1322,7 @@
                 }
 
                 // 文本输入支持
-                if (["TextInput_", "CLIPTextEncode", "PromptSimplification","ChinesePrompt_Mix"].includes(data.class_type)) {
+                if (["TextInput_", "CLIPTextEncode", "PromptSimplification", "ChinesePrompt_Mix"].includes(data.class_type)) {
                     // Create a container for the upload control
                     const uploadContainer = document.createElement("div");
                     uploadContainer.className = 'card';
@@ -2302,6 +2302,16 @@
             //     return true;
             // });
 
+            // author信息
+            if (appData.author) {
+                let div = document.body.querySelector('#author');
+                if (appData.author.link) div.href = appData.author.link
+                div.style = `display: flex;position: fixed;bottom: 12px;right: 24px;cursor: pointer;text-decoration: none;color: black;`
+                div.innerHTML = `<img style="width:32px;height:32px;border-radius: 100%;" 
+                src="${appData.author.avatar || base64Df}"/>
+                <p style="margin-left:8px;font-size:12px;font-weight:800">${appData.author.name || '-'}</p>`
+            }
+
         }
 
         // 创建app的选择菜单
diff --git a/web/javascript/app_mixlab.js b/web/javascript/app_mixlab.js
index a1b84bd..8b8bce9 100644
--- a/web/javascript/app_mixlab.js
+++ b/web/javascript/app_mixlab.js
@@ -2,6 +2,9 @@ import { app } from '../../../scripts/app.js'
 import { $el } from '../../../scripts/ui.js'
 import { api } from '../../../scripts/api.js'
 
+const base64Df =
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAALZJREFUKFOFkLERwjAQBPdbgBkInECGaMLUQDsE0AkRVRAYWqAByxldPPOWHwnw4OBGye1p50UDSoA+W2ABLPN7i+C5dyC6R/uiAUXRQCs0bXoNIu4QPQzAxDKxHoALOrZcqtiyR/T6CXw7+3IGHhkYcy6BOR2izwT8LptG8rbMiCRAUb+CQ6WzQVb0SNOi5Z2/nX35DRyb/ENazhpWKoGwrpD6nICp5c2qogc4of+c7QcrhgF4Aa/aoAFHiL+RAAAAAElFTkSuQmCC'
+
 function get_position_style (ctx, widget_width, y, node_height) {
   const MARGIN = 12 // the margin around the html element
 
@@ -28,7 +31,7 @@ function get_position_style (ctx, widget_width, y, node_height) {
     // height: `${node_height * 0.3 - MARGIN * 2}px`,
     // background: '#EEEEEE',
     display: 'flex',
-    flexDirection: 'row',
+    flexDirection: 'column',
     // alignItems: 'center',
     justifyContent: 'flex-start'
   }
@@ -234,6 +237,14 @@ async function save (json, download = false, showInfo = true) {
       outputIds
     )
 
+    let authorAvatar =
+        localStorage.getItem('_mixlab_author_avatar') || base64Df,
+      authorName =
+        localStorage.getItem('_mixlab_author_name') ||
+        localStorage.getItem('Comfy.userName'),
+        authorLink =
+        localStorage.getItem('_mixlab_author_link') || ''
+
     data.app = {
       name,
       description,
@@ -244,7 +255,12 @@ async function save (json, download = false, showInfo = true) {
       share_prefix,
       link,
       category,
-      filename: `${name}_${version}.json`
+      filename: `${name}_${version}.json`,
+      author: {
+        avatar: authorAvatar,
+        name: authorName,
+        link:authorLink
+      }
     }
 
     try {
@@ -377,10 +393,167 @@ app.registerExtension({
           }
         })
 
-        document.body.appendChild(widget.div)
-        widget.div.appendChild(btn)
-        widget.div.appendChild(download)
+        // author
+        let author = document.createElement('div')
+        // author.style=`display: flex`
 
+        let authorAvatar = document.createElement('img')
+        authorAvatar.className = `${'comfy-multiline-input'}`
+        authorAvatar.style = `outline: none;
+          border: none;
+          padding: 4px;
+          width: 32px;
+          cursor: pointer;
+          height: 32px;`
+
+        if (localStorage.getItem('_mixlab_author_avatar')) {
+          authorAvatar.src =
+            localStorage.getItem('_mixlab_author_avatar') || base64Df
+        }
+
+        let authorAvatarUpload = document.createElement('input')
+        authorAvatarUpload.type = 'file'
+        authorAvatarUpload.style = `display:none`
+
+        let authorAvatarInput = document.createElement('div')
+        authorAvatarInput.style = `display: flex;justify-content: flex-start;
+        align-items: center;`
+        let authorAvatarInputLabel = document.createElement('p')
+        authorAvatarInputLabel.innerText = 'Author Avatar'
+        authorAvatarInputLabel.className = `${'comfy-multiline-input'}`
+        authorAvatarInputLabel.style = `font-size:12px`
+
+        authorAvatar.addEventListener('click', e => {
+          authorAvatarUpload.click()
+        })
+
+        authorAvatarInputLabel.addEventListener('click', e => {
+          authorAvatarUpload.click()
+        })
+
+        authorAvatarUpload.addEventListener('change', event => {
+          const file = event.target.files[0]
+          const reader = new FileReader()
+
+          reader.onload = async e => {
+            let im = new Image()
+            im.src = e.target.result
+            authorAvatar.src = e.target.result
+            im.onload = () => {
+              let c = document.createElement('canvas')
+              let ctx = c.getContext('2d')
+              c.width = 72
+              c.height = 72
+              ctx.drawImage(
+                im,
+                0,
+                0,
+                im.naturalWidth,
+                im.naturalHeight,
+                0,
+                0,
+                c.width,
+                c.height
+              )
+              window._mixlab_author_avatar = c.toDataURL()
+              localStorage.setItem(
+                '_mixlab_author_avatar',
+                window._mixlab_author_avatar
+              )
+            }
+          }
+
+          // 以文本形式读取文件
+          reader.readAsDataURL(file)
+        })
+
+        author.appendChild(authorAvatarInput)
+        authorAvatarInput.appendChild(authorAvatarInputLabel)
+        authorAvatarInput.appendChild(authorAvatar)
+        authorAvatarInput.appendChild(authorAvatarUpload)
+
+        let authorName = document.createElement('input')
+        authorName.type = 'text'
+        authorName.value =
+          localStorage.getItem('_mixlab_author_name') ||
+          localStorage.getItem('Comfy.userName')
+        authorName.placeholder = 'author name'
+        authorName.className = `${'comfy-multiline-input'}`
+        authorName.style = `
+          outline: none;
+          border: none;
+          padding: 4px;
+          width: 100%;
+          cursor: pointer;
+          height: 32px;`
+
+        let authorNameInput = document.createElement('div')
+        authorNameInput.style = `display: flex;justify-content: flex-start;
+          align-items: center;`
+        let authorNameInputLabel = document.createElement('p')
+        authorNameInputLabel.innerText = 'Author Name'
+        authorNameInputLabel.className = `${'comfy-multiline-input'}`
+        authorNameInputLabel.style = `font-size:12px;width: 110px`
+
+        authorName.addEventListener('change', e => {
+          window._mixlab_author_name = authorName.value.trim()
+          localStorage.setItem(
+            '_mixlab_author_name',
+            window._mixlab_author_name
+          )
+        })
+
+        author.appendChild(authorNameInput)
+        authorNameInput.appendChild(authorNameInputLabel)
+        authorNameInput.appendChild(authorName)
+
+
+        // 社交链接
+        let authorLink = document.createElement('input')
+        authorLink.type = 'text'
+        authorLink.value =
+          localStorage.getItem('_mixlab_author_link') ||''
+          authorLink.placeholder = 'author link'
+          authorLink.className = `${'comfy-multiline-input'}`
+          authorLink.style = `
+          outline: none;
+          border: none;
+          padding: 4px;
+          width: 100%;
+          cursor: pointer;
+          height: 32px;`
+
+        let authorLinkInput = document.createElement('div')
+        authorLinkInput.style = `display: flex;justify-content: flex-start;
+          align-items: center;`
+        let authorLinkInputLabel = document.createElement('p')
+        authorLinkInputLabel.innerText = 'Author Link'
+        authorLinkInputLabel.className = `${'comfy-multiline-input'}`
+        authorLinkInputLabel.style = `font-size:12px;width: 110px`
+
+        authorLink.addEventListener('change', e => {
+          window._mixlab_author_link = authorLink.value.trim()
+          localStorage.setItem(
+            '_mixlab_author_link',
+            window._mixlab_author_link
+          )
+        })
+
+        author.appendChild(authorLinkInput)
+        authorLinkInput.appendChild(authorLinkInputLabel)
+        authorLinkInput.appendChild(authorLink)
+
+
+        widget.div.appendChild(author)
+
+        let btns = document.createElement('div')
+
+        widget.div.appendChild(btns)
+
+        btns.appendChild(btn)
+        btns.appendChild(download)
+
+        document.body.appendChild(widget.div)
         this.addCustomWidget(widget)
 
         const onRemoved = this.onRemoved
diff --git a/web/javascript/ui_mixlab.js b/web/javascript/ui_mixlab.js
index 4a279df..3dbd73d 100644
--- a/web/javascript/ui_mixlab.js
+++ b/web/javascript/ui_mixlab.js
@@ -1159,6 +1159,26 @@ app.registerExtension({
                     if (!ddd) return
                     let item = ddd[0]
                     if (item) {
+                      if (item.author) {
+                        // 有作者信息
+                        if (item.author.avatar)
+                          localStorage.setItem(
+                            '_mixlab_author_avatar',
+                            item.author.avatar
+                          )
+                        if (item.author.name)
+                          localStorage.setItem(
+                            '_mixlab_author_name',
+                            item.author.name
+                          )
+
+                        if (item.author.link)
+                          localStorage.setItem(
+                            '_mixlab_author_link',
+                            item.author.link
+                          )
+                      }
+
                       // console.log(item.data)
                       app.loadGraphData(item.data)
                       setTimeout(() => {
@@ -1187,9 +1207,30 @@ app.registerExtension({
                   callback: async () => {
                     try {
                       let ddd = await get_my_app(a.filename, a.category)
+
                       if (!ddd) return
                       let item = ddd[0]
                       if (item) {
+                        console.log(item)
+                        if (item.author) {
+                          // 有作者信息
+                          if (item.author.avatar)
+                            localStorage.setItem(
+                              '_mixlab_author_avatar',
+                              item.author.avatar
+                            )
+                          if (item.author.name)
+                            localStorage.setItem(
+                              '_mixlab_author_name',
+                              item.author.name
+                            )
+                          if (item.author.link)
+                            localStorage.setItem(
+                              '_mixlab_author_link',
+                              item.author.link
+                            )
+                        }
+
                         // console.log(item.data)
                         app.loadGraphData(item.data)
                         setTimeout(() => {