pinokiod 3.9.27 → 3.9.29

package/server/index.js

@@ -102,12 +102,9 @@ class Server {
     return new Promise(r=>fs.access(s, fs.constants.F_OK, e => r(!e)))
   }
   async updateMeta(formData, app_path) {
-    console.log("updateMeta", formData)
-
     // write title/description to pinokio.json
     let dirty
     let meta_path = this.kernel.path("api", app_path, "pinokio.json")
-    console.log("meta_path", meta_path)
     let meta = (await this.kernel.loader.load(meta_path)).resolved
     if (!meta) meta = {}
     if (formData.title) {
@@ -128,13 +125,11 @@ class Server {
       // 
       // write icon file
       let icon_path = this.kernel.path("api", formData.new_path, formData.icon_path)
-      console.log({ icon_path })
       await fs.promises.writeFile(icon_path, formData.avatar)
       meta.icon = formData.icon_path
       dirty = true
     }
     if (dirty) {
-      console.log("Save", meta_path, meta)
       await fs.promises.writeFile(meta_path, JSON.stringify(meta, null, 2))
     }
   }
@@ -516,6 +511,12 @@ class Server {
       execUrl: "/api/" + name,
 //      rawpath,
     }
+    if (!this.kernel.proto.config) {
+      await this.kernel.proto.init()
+    }
+    if (!this.kernel.plugin.config) {
+      await this.kernel.plugin.init()
+    }
     res.render("app", result)
   }
   getVariationUrls(req) {
@@ -1006,7 +1007,6 @@ class Server {
             script_path: (req.base ? full_filepath : null),
           }
 
-
           res.render(template, result)
         }
 
@@ -1262,7 +1262,27 @@ class Server {
 
 
             // not only should include the pattern, but also end with it (otherwise can include similar patterns such as /api/qqqa, /api/qqqaaa, etc.
-            if (key.includes(p) && key.endsWith(p)) {
+
+            let is_running
+            let api_path = this.kernel.path("api")
+            if (key.startsWith(api_path)) {
+              // api script
+              if (key.startsWith(p)) {
+                is_running = true
+              }
+            } else {
+              if (key.endsWith(p)) {
+                is_running = true
+              }
+            }
+            // 1. if the script path starts with api path => api script
+            //    => check includes and startsWith
+
+            // 2. if the script path starts with anything else => other scripts (prototype, plugin ,etc.)
+            //    => check inlcludes and endsWith
+
+            //if (key.includes(p) && key.endsWith(p)) {
+            if (is_running) {
               items[i].running = true
               items[i].index = index
               if (!items[i].running_scripts) {
@@ -1519,6 +1539,49 @@ class Server {
   }
 
 
+  renderMenu2(config, base, keypath) {
+    // when the config has not loaded yet
+    if (!config) {
+      return { menu: [] }
+    }
+
+    if (config.menu) {
+      for(let i=0; i<config.menu.length; i++) {
+        let item = config.menu[i]
+        let new_keypath
+        if (keypath) {
+          new_keypath = keypath.concat(i)
+        } else {
+          new_keypath = [i]
+        }
+        let c = this.renderMenu2(item, base, new_keypath)
+        config.menu[i] = c
+      }
+    }
+    if (config.text) {
+      if (config.hasOwnProperty("icon")) {
+        config.html = `<i class="${config.icon}"></i> ${config.text}` 
+      } else if (config.hasOwnProperty("image")) {
+        let imagePath = `${base.path}/${config.image}`
+        config.html = `<img class='menu-item-image' src='${imagePath}' /> ${config.text}`
+      } else {
+        config.html = `${config.text}` 
+      }
+      config.btn = config.html
+    }
+    /*
+    if (config.href && !config.href.startsWith("/")) {
+      if (base.href) {
+        config.href = base.href + "/" + config.href
+      }
+    }
+    */
+    if (keypath) {
+      config.href = base.href + "/" + keypath.join("/") + "?path=" + base.cwd
+    }
+    return config
+  }
+
   async renderMenu(uri, name, config, pathComponents, indexPath) {
     if (config.menu) {
 
@@ -1556,7 +1619,7 @@ class Server {
           menuitem.menu = m.menu
         }
 
-        if (menuitem.base === "/") {
+        if (menuitem.base && menuitem.base.startsWith("/")) {
           config.menu[i].href = menuitem.base + menuitem.href
         } else {
           if (menuitem.href && !menuitem.href.startsWith("http")) {
@@ -2256,15 +2319,28 @@ class Server {
     }
   }
   async getPlugin(name) {
-    let info = new Info(this.kernel)
-    info.caller = () => {
-      return this.kernel.path("api", name, "pinokio.js")
+    if (this.kernel.plugin.config) {
+      try {
+        let info = new Info(this.kernel)
+        info.caller = () => {
+          return this.kernel.path("api", name, "pinokio.js")
+        }
+        let menu = await this.kernel.plugin.config.menu(this.kernel, info)
+        let plugin = { menu }
+        let uri = this.kernel.path("api")
+        await this.renderMenu(uri, name, plugin, [])
+        return plugin
+      } catch (e) {
+        return {
+          menu: []
+        }
+      }
+    } else {
+      return {
+        menu: []
+      }
+      
     }
-    let menu = await this.kernel.plugin.config.menu(this.kernel, info)
-    let plugin = { menu }
-    let uri = this.kernel.path("api")
-    await this.renderMenu(uri, name, plugin, [])
-    return plugin
   }
 
   async start(options) {
@@ -2511,6 +2587,12 @@ class Server {
 //        return
 //      }
       
+      if (!this.kernel.proto.config) {
+        await this.kernel.proto.init()
+      }
+      if (!this.kernel.plugin.config) {
+        await this.kernel.plugin.init()
+      }
 
       if (req.query.mode !== "settings" && !home) {
         res.redirect("/?mode=settings")
@@ -2809,7 +2891,6 @@ class Server {
       //Util.openfs(req.body.path, req.body.mode)
       let cwd = req.body.cwd
       let cmd = req.body.run
-      console.log({ cmd, cwd })
       Util.run(cmd, cwd, this.kernel)
       res.json({ success: true })
     }))
@@ -3447,22 +3528,34 @@ class Server {
     }))
     this.app.get("/prototype/show/*", ex(async (req, res) => {
       let name = req.params[0].split("/").filter((x) => { return x }).join("/")
-      let icon = this.kernel.proto.kv[name].icon
-      let title = this.kernel.proto.kv[name].title
-      let description = this.kernel.proto.kv[name].description
-      let readme = await this.kernel.proto.readme(name)
-      let config = await this.kernel.api.meta({ path: req.query.path })
+
+      // print readme
+
+      
+
+
+      let paths = req.params[0].split("/")
+      let item
+      let config = this.kernel.proto.config
+      for(let key of paths) {
+        config = config.menu[key] 
+      }
+      let run_path = "/run/prototype/system/" + config.href + "?cwd=" + req.query.path
+      console.log({ config, run_path, query: req.query })
+      let readme_path = this.kernel.path("prototype/system", config.readme)
+      console.log("config.readme.split", config.readme.split("/").slice(0, -1))
+      let md = await fs.promises.readFile(readme_path, "utf8")
+      console.log({ readme_path, md })
+      let baseUrl = "/asset/prototype/system/" + (config.readme.split("/").slice(0, -1).join("/")) + "/"
+      console.log("baseUrl", baseUrl)
+      let readme = marked.parse(md, {
+        baseUrl
+      })
+
       res.render("prototype/show", {
-        config,
-        path: req.query.path,
-        icon,
-        title,
-        description,
-        name,
-        prototype_path: name,
+        run_path,
         portal: this.portal,
         readme,
-        items: this.kernel.proto.items.filter(item => item.type === 'init'),
         logo: this.logo,
         theme: this.theme,
         agent: this.agent,
@@ -3471,11 +3564,11 @@ class Server {
     }))
     this.app.get("/prototype", ex(async (req, res) => {
       // load meta
-      let config = await this.kernel.api.meta({ path: req.query.path })
-      let items = this.kernel.proto.items
-      if (req.query.type) {
-        items = this.kernel.proto.items.filter(item => item.type === req.query.type)
-      }
+//      let config = await this.kernel.api.meta({ path: req.query.path })
+//      let items = this.kernel.proto.items
+//      if (req.query.type) {
+//        items = this.kernel.proto.items.filter(item => item.type === req.query.type)
+//      }
       let title
       let description
       if (req.query.type === "init") {
@@ -3485,14 +3578,38 @@ class Server {
         title = "Extensions"
         description = "Add extension modules to the current folder"
       }
+
+      let config = structuredClone(this.kernel.proto.config)
+      config = this.renderMenu2(config, {
+        cwd: req.query.path,
+        href: "/prototype/show",
+        path: "/asset/prototype/system"
+      })
+
+//    {
+//      "icon": "fa-solid fa-power-off",
+//      "text": "Run Default",
+//      "href": "/api/facefusion-pinokio.git/run.js?run=true&fullscreen=true&mode=Default",
+//      "params": {
+//        "run": true,
+//        "fullscreen": true,
+//        "mode": "Default"
+//      },
+//      "src": "/api/facefusion-pinokio.git/run.js",
+//      "html": "<i class=\"fa-solid fa-power-off\"></i> Run Default",
+//      "btn": "<i class=\"fa-solid fa-power-off\"></i> Run Default",
+//      "target": "@/api/facefusion-pinokio.git/run.js"
+//    },
+//
       res.render("prototype/index", {
         title,
         description,
         config,
         path: req.query.path,
         portal: this.portal,
-        items,
+//        items,
         logo: this.logo,
+        platform: this.kernel.platform,
         theme: this.theme,
         agent: this.agent,
         kernel: this.kernel,
@@ -4255,10 +4372,8 @@ class Server {
         */
 
         let formData = req.body
-        console.log("req.files", req.files)
         for(let key in req.files) {
           let file = req.files[key]
-          console.log({ key, file })
           formData[file.fieldname] = file.buffer
         }
         console.log({ formData })

package/server/public/fseditor.js

@@ -1,8 +1,6 @@
 const FSEditor = async ({title, description, old_path, icon, iconpath, redirect, copy, move, edit }) => {
-  console.log({ icon, iconpath })
   const compare = async (file1, file2) => {
     if (file1.size !== file2.size) return false;
-    console.log({ file1, file2 })
     const buffer1 = await file1.arrayBuffer();
     const buffer2 = await file2.arrayBuffer();
     const view1 = new Uint8Array(buffer1);
@@ -49,11 +47,11 @@ const FSEditor = async ({title, description, old_path, icon, iconpath, redirect,
   ${folderpath_html}
   <div class='folder-row ${meta_class}'>
     <label for='new-folder-title'>Title</label>
-    <input id="new-folder-title" class="swal2-input" placeholder="Folder Name" value="${title}" />
+    <input id="new-folder-title" class="swal2-input" placeholder="Project Name (stored in pinokio.js)" value="${title}" />
   </div>
   <div class='folder-row ${meta_class}'>
     <label for='new-folder-description'>Description</label>
-    <textarea id="new-folder-description" class="swal2-input" placeholder="Folder Description">${description}</textarea>
+    <textarea id="new-folder-description" class="swal2-input" placeholder="Project Description (stored in pinokio.js)">${description}</textarea>
   </div>
 </div>
 </div>`,
@@ -103,8 +101,6 @@ const FSEditor = async ({title, description, old_path, icon, iconpath, redirect,
 //              url: '/pinokio/upload', // optional if same as above
             process: async (fieldName, file, metadata, load, error, progress, abort) => {
               const formData = new FormData();
-
-              console.log("upload", { dirty, file })
               formData.append('avatar', file)
               if (dirty) {
                 formData.append("icon_dirty", true)
@@ -128,7 +124,6 @@ const FSEditor = async ({title, description, old_path, icon, iconpath, redirect,
                 path = old_path
                 formData.append("new_path", old_path)
               }
-              debugger
               if (mode === "copy") {
                 formData.append("copy", true)
               } else if (mode === "move") {
@@ -165,8 +160,6 @@ const FSEditor = async ({title, description, old_path, icon, iconpath, redirect,
             }
           },
           onaddfile(error, file) {
-            console.log({ file, initial_file })
-            debugger
             if (initial_file) {
               compare(initial_file.file, file.file).then((same) => {
                 if (same) {

package/server/public/modalinput.js

@@ -10,6 +10,7 @@ const ModalInput = async (params, uri) => {
       title,
       description,
       placeholder,
+      required,
       default
     }]
   }
@@ -37,20 +38,34 @@ const ModalInput = async (params, uri) => {
           input = `<select data-id="${field.key}">${items}</select>`
         }
       } else if (type === 'checkbox') {
-        input = `<div class='checkbox-row'><input data-type="checkbox" type="checkbox" data-id="${field.key}" value="${field.key}" />${field.text}</div>`
+        input = `<div class='checkbox-row'>
+        <input data-type="checkbox" type="checkbox" data-id="${field.key}" value="${field.key}" />
+        <div class='flexible'>
+          <h5>${field.title}</h5>
+          <div>${field.description ? field.description : ''}</div>
+        </div>
+      </div>`
       } else if (type === 'file') {
         input = `<div class='dropzone' data-type='file' data-id='${field.key}'></div>`
         //input = `<input type='file' data-id="${field.key}" />`
       } else {
         input = `<input ${autofocus} type='${type}' data-id="${field.key}" class="swal2-input" placeholder="${field.placeholder ? field.placeholder : ''}">`
       }
-      return [
-        "<div class='field'>",
-          `<label class='title'>${field.title ? field.title : ''}</label>`,
-          input,
-          `<label class='description'>${field.description ? field.description : ''}</label>`,
-        "</div>"
-      ].join("\n")
+      if (type === 'checkbox') {
+        return [
+          "<div class='field'>",
+            input,
+          "</div>"
+        ].join("\n")
+      } else {
+        return [
+          "<div class='field'>",
+            `<label class='title'>${field.title ? field.title : ''}</label>`,
+            input,
+            `<label class='description'>${field.description ? field.description : ''}</label>`,
+          "</div>"
+        ].join("\n")
+      }
     }).join("\n"),
     //focusConfirm: false,
     confirmButtonText: 'Done',
@@ -86,9 +101,13 @@ const ModalInput = async (params, uri) => {
       for(let field of form) {
         let input = Swal.getPopup().querySelector("[data-id='" + field.key + "']")
         let type = input.getAttribute("data-type")
-        debugger
         if (type !== 'file' && type !== 'checkbox') {
           response[field.key] = input.value
+          debugger
+          if (field.required && input.value.length === 0) {
+            alert(`${field.title || field.key} value must exist`) 
+            return false
+          }
         }
         if (type === 'checkbox') {
           response[field.key] = input.checked

package/server/public/opener.js

@@ -38,7 +38,6 @@ document.addEventListener("click", async (e) => {
     }
   }
   if (el) {
-    debugger
     e.preventDefault()
     e.stopPropagation()
     let run = el.getAttribute("data-run")

package/server/public/style.css

@@ -98,6 +98,31 @@ body.dark .dynamic.selected {
   background: rgba(0,0,0,0.05);
   */
 }
+
+
+.loader-container {
+  background: rgba(0,0,0,0.2) !important;
+}
+body.dark .loader-container {
+  background: rgba(0,0,0,0.3) !important;
+}
+.loader-dialog {
+  padding: 100px;
+}
+body.dark .loader-popup {
+  background: rgba(255,255,255,0.07) !important;
+  color: whitesmoke;
+}
+.swal2-popup.loader-popup {
+  font-size: 12px;
+  letter-spacing: 1px;
+  background: rgba(0,0,0,0.6);
+  width: 200px !important;
+  border-radius: 50px !important;
+  color: white;
+}
+
+
 .type-tab {
   display: flex;
   align-items: center;
@@ -153,10 +178,10 @@ body.dark .type-tabs {
 .navheader {
   backdrop-filter: blur(16px);
 
-  /*
   padding: 15px 10px 5px;
-  */
+  /*
   padding: 15px;
+  */
 }
 .navheader .btn2 {
   text-transform: lowercase;
@@ -1469,7 +1494,8 @@ body.dark .swal2-modal input {
 .swal2-modal input[type=checkbox] {
   width: 14px;
   height: 14px;
-  background: white;
+  background: whitesmoke;
+  margin: 0;
   margin-right: 5px;
 }
 .swal2-modal input[type=checkbox]:checked {
@@ -1477,7 +1503,12 @@ body.dark .swal2-modal input {
 }
 .swal2-modal .checkbox-row {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
+  text-align: left;
+}
+.swal2-modal .checkbox-row h5 {
+  margin: 0;
+  font-size: 14px;
 }
 .swal2-container {
   font-size: 14px !important;
@@ -1790,7 +1821,8 @@ body.dark .not-running-apps, body.dark .running-apps {
 }
 */
 .running-apps .line img {
-  border: 3px solid  #82bc09;
+  border-left: 10px solid #82bc09;
+  padding-left: 10px;
   /*
   border: 3px solid #8fd400;
   */
@@ -1798,6 +1830,13 @@ body.dark .not-running-apps, body.dark .running-apps {
   border-radius: 5px;
   */
 }
+body.dark .not-running-apps .line img {
+  border-left: 10px solid rgba(255,255,255,0.1);
+}
+.not-running-apps .line img {
+  border-left: 10px solid rgba(0,0,0,0.04);
+  padding-left: 10px;
+}
 /*
 .running-apps .line.align-top h3 .col .title {
   color: #8fd400;