pinokiod 1.3.89 → 1.3.91

package/kernel/api/local/index.js

@@ -63,7 +63,7 @@ class Local {
       }
     */
 
-    current_env = await Environment.get2(req.parent.path, kernel)
+    let current_env = await Environment.get2(req.parent.path, kernel)
 
     // if the key at current_env.PINOKIO_SHARE_VAR (by default it's 'url') is the variable being set, trigger the share logic
     if (current_env.PINOKIO_SHARE_VAR && current_env.PINOKIO_SHARE_VAR in req.params) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pinokiod",
-  "version": "1.3.89",
+  "version": "1.3.91",
   "description": "",
   "main": "index.js",
   "scripts": {

package/server/index.js

@@ -172,6 +172,31 @@ class Server {
       }
     })
   }
+  async init_env(env_dir_path) {
+    console.log("env_path",env_dir_path)
+    let current = this.kernel.path(env_dir_path, "ENVIRONMENT")
+      // if environment.json doesn't exist, 
+    let exists = await this.exists(current)
+    console.log({ current, exists })
+    if (exists) {
+      // if ENVIRONMENT already exists, don't do anything
+    } else {
+      // if ENVIRONMENT doesn't exist, need to create one
+      // 1. if _ENVIRONMENT exists, create ENVIRONMENT by appending _ENVIRONMENT to ENVIRONMENT
+      // 2. if _ENVIRONMENT doesn't exist, just write ENVIRONMENT
+      // if _ENVIRONMENT exists, 
+      let _environment = this.kernel.path(env_dir_path, "_ENVIRONMENT")
+      let _exists = await this.exists(_environment)
+      console.log({ _environment, _exists })
+      let content = await Environment.ENV("app")
+      if (_exists) {
+        let _environmentStr = await fs.promises.readFile(_environment, "utf8")
+        await fs.promises.writeFile(current, _environmentStr + "\n\\n\n" + content)
+      } else {
+        await fs.promises.writeFile(current, content)
+      }
+    }
+  }
   async chrome(req, res, type) {
     let name = req.params.name
     let app_path = this.kernel.path("api", name, "pinokio.js")
@@ -230,26 +255,7 @@ class Server {
       }
     }
 
-    let current = this.kernel.path("api", name, "ENVIRONMENT")
-      // if environment.json doesn't exist, 
-    let exists = await this.exists(current)
-    if (exists) {
-      // if ENVIRONMENT already exists, don't do anything
-    } else {
-      // if ENVIRONMENT doesn't exist, need to create one
-      // 1. if _ENVIRONMENT exists, create ENVIRONMENT by appending _ENVIRONMENT to ENVIRONMENT
-      // 2. if _ENVIRONMENT doesn't exist, just write ENVIRONMENT
-      // if _ENVIRONMENT exists, 
-      let _environment = this.kernel.path("api", name, "_ENVIRONMENT")
-      let _exists = await this.exists(_environment)
-      let content = await Environment.ENV("app")
-      if (_exists) {
-        let _environmentStr = await fs.promises.readFile(_environment, "utf8")
-        await fs.promises.writeFile(current, content + "\n\n" + _environmentStr)
-      } else {
-        await fs.promises.writeFile(current, content)
-      }
-    }
+    await this.init_env("api/" + name)
 
     let mode = "run"
     if (req.query && req.query.mode) {
@@ -2166,17 +2172,61 @@ class Server {
     })
     this.app.post("/env", async (req, res) => {
       console.log("req.body", req.body)
-      let fullpath = path.resolve(this.kernel.homedir, req.body.filepath)
+      let fullpath = path.resolve(this.kernel.homedir, req.body.filepath, "ENVIRONMENT")
       let updated = req.body.vals
       await Util.update_env(fullpath, updated)
       res.json({})
     })
+    this.app.get("/env", async (req, res) => {
+      let env_path = path.resolve(this.kernel.homedir)
+      await this.init_env(env_path)
+
+      let filepath = path.resolve(this.kernel.homedir, "ENVIRONMENT")
+      let editorpath = "/edit/ENVIRONMENT"
+
+      const items = await Util.parse_env_detail(filepath)
+
+
+      res.render("env_editor", {
+        config: null,
+        name: null,
+        init: null,
+        editorpath,
+        items,
+        theme: this.theme,
+        filepath,
+        agent: this.agent,
+      })
+    })
     this.app.get("/env/*", async (req, res) => {
+
+      let env_path = req.params[0]
+      await this.init_env(env_path)
+
       let pathComponents = req.params[0].split("/")
-      let filepath = path.resolve(this.kernel.homedir, req.params[0])
-      let editorpath = "/edit/" + req.params[0]
+      let filepath = path.resolve(this.kernel.homedir, req.params[0], "ENVIRONMENT")
+      let editorpath = "/edit/" + req.params[0] + "/ENVIRONMENT"
+
+      console.log({ pathComponents, filepath, editorpath, })
       const items = await Util.parse_env_detail(filepath)
+
+      console.log(items)
+
+      let p = path.resolve(this.kernel.homedir, env_path, "pinokio.js")
+      let config  = (await this.kernel.loader.load(p)).resolved
+      if (config.icon) {
+        config.icon = `/${env_path}/${config.icon}?raw=true`
+      }
+
+      let name
+      if (env_path.startsWith("api")) {
+        name = env_path.split("/")[1]
+      }
+
       res.render("env_editor", {
+        config,
+        name,
+        init: req.query ? req.query.init : null,
         editorpath,
         items,
         theme: this.theme,
@@ -2184,6 +2234,44 @@ class Server {
         agent: this.agent,
       })
     })
+    this.app.get("/pre/:name", async (req, res) => {
+      let p = path.resolve(this.kernel.homedir, "api", req.params.name, "pinokio.js")
+      let config  = (await this.kernel.loader.load(p)).resolved
+      console.log("config", config)
+      if (config && config.pre) {
+
+        config.pre.forEach((item) => {
+          item.icon = `/api/${req.params.name}/${item.icon}?raw=true`
+        })
+
+        res.render("pre", {
+          name: req.params.name,
+          theme: this.theme,
+          agent: this.agent,
+          name: req.params.name,
+          items: config.pre
+        })
+      } else {
+        res.redirect("/env/" + req.params.name)
+      }
+    })
+    this.app.get("/initialize/:name", async (req, res) => {
+      let p = path.resolve(this.kernel.homedir, "api", req.params.name, "pinokio.js")
+      let config  = (await this.kernel.loader.load(p)).resolved
+      if (config) {
+        // if pinokio.js exists
+        if (config.pre && Array.isArray(config.pre)) {
+          // if pre exists, redirect to /pre/:name
+          res.redirect(`/pre/${req.params.name}`)
+        } else {
+          // if pre doesn't exist, redirect to /env/:name
+          res.redirect(`/env/${req.params.name}`)
+        }
+      } else {
+        // if pinokio.js doesn't exist, send to /browser/:name
+        res.redirect(`/pinokio/browser/${req.params.name}`)
+      }
+    })
     this.app.get("/share/:name", async (req, res) => {
       let filepath = path.resolve(this.kernel.homedir, "api", req.params.name, "ENVIRONMENT")
       //let filepath = path.resolve(this.kernel.homedir, req.params[0])

package/server/public/install.js

@@ -104,8 +104,8 @@ const install = async (name, url, term, socket, options) => {
     })
   } else {
     // ask the backend to create install.json and start.json if gradio
-    //location.href = `/?selected=${name}`
-    location.href = `/pinokio/browser/${name}`
+    //location.href = `/pinokio/browser/${name}`
+    location.href = `/initialize/${name}`
 
   }
 }

package/server/views/browser-experimental.ejs

@@ -561,7 +561,7 @@ body.dark .loader-container {
     <a target="/share/<%=name%>" href="/share/<%=name%>", class="btn header-item frame-link" data-index="1" data-mode="refresh">
       <div class='tab'><i class="fa-solid fa-wifi"></i> Share</div>
     </a>
-    <a target="/env/api/<%=name%>/ENVIRONMENT" href="/env/api/<%=name%>/ENVIRONMENT", class="btn header-item frame-link" data-index="1" data-mode="refresh">
+    <a target="/env/api/<%=name%>" href="/env/api/<%=name%>", class="btn header-item frame-link" data-index="1" data-mode="refresh">
       <div class='tab'><i class="fa-solid fa-gear"></i> Configure</div>
     </a>
   </div>

package/server/views/env_editor.ejs

@@ -73,13 +73,25 @@ td.key {
 .button:hover {
   
 }
-#editor {
-  box-sizing: border-box;
-  max-width: 800px;
-  padding: 20px;
-}
+<% if (init) { %>
+  main {
+    width: 100%;
+    box-sizing: border-box;
+    max-width: 600px;
+    padding: 20px;
+    margin: 0 auto;
+  }
+<% } else { %>
+  #editor {
+    width: 100%;
+    box-sizing: border-box;
+    max-width: 600px;
+    padding: 20px;
+    margin: 0 auto;
+  }
+<% } %>
+
 header .runner {
-  padding: 10px 0 0;
 }
 .disabled {
   opacity: 0.7;
@@ -119,6 +131,59 @@ body.dark .comment {
 #save {
   background: royalblue;
 }
+a#customize {
+  text-decoration: underline;
+  cursor: pointer;
+}
+.e {
+  padding: 10px 0;
+}
+#editor {
+  padding: 20px 0;
+}
+.center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+body {
+  display: block;
+}
+.card {
+  display: flex;
+  padding: 10px 0;
+  box-sizing: border-box;
+}
+.card img {
+  width: 100px;
+  border-radius: 10px;
+}
+.card .description {
+  opacity: 0.8;
+}
+.card .title {
+  font-weight: bold;
+  font-size: 30px;
+  letter-spacing: -1px;
+}
+.card .col {
+  padding-left: 10px;
+}
+h1 {
+  font-size: 50px;
+  font-family: georgia;
+  font-style: italic;
+}
+footer {
+  background: none;
+  padding: 0;
+  text-align: right;
+  display: block;
+  margin-bottom: 20px;
+}
+footer .btn {
+  margin-left: 10px;
+}
 </style>
 <script>
 document.addEventListener("DOMContentLoaded", async () => {
@@ -145,40 +210,70 @@ document.addEventListener("DOMContentLoaded", async () => {
       return res.json()
     })
     console.log("res" ,res)
-    n.Noty({
-      text: `Updated!`
-    })
+    <% if (init && name) { %>
+      location.href = "/pinokio/browser/<%=name%>"
+    <% } else { %>
+      n.Noty({
+        text: `Updated!`
+      })
+    <% } %>
   })
+  <% if (init) { %>
+    document.querySelector("#customize").addEventListener("click", (e) => {
+      e.preventDefault()
+      e.stopPropagation()
+      document.querySelector("#editor").classList.toggle("hidden")
+    })
+  <% } %>
 })
 </script>
 </head>
-<body class='columns <%=theme%>'>
-  <header class='navheader grabbable'>
-  <h1>
-    <a class='home' href="/"><i class="fa-solid fa-house"></i></a>
-    <%=filepath%>
-  </h1>
-  <div class='runner'>
-    <div id='save' class='btn'>
-      <span class='save'><i class="fa-solid fa-check"></i> Save</span>
-    </div>
-    <a class='btn' href="<%=editorpath%>"><i class="fa-solid fa-pen-to-square"></i> Edit file</a>
-    <button class='btn' id='open-fs' data-filepath="<%=filepath%>"><i class="fa-solid fa-eye"></i> Open in File Explorer</button>
-  </div>
-  </header>
-    <main>
-      <div id='editor'>
-        <% items.forEach((item) => { %>
-          <% if (item.type === "comment") { %>
-            <div class='comment'><%=item.val.replaceAll(/^[ #]+/g, "")%></div>
-          <% } else { %>
-            <div class='env-item'>
-              <label for="<%=item.key%>"><%=item.key%></label>
-              <input id="<%=item.key%>" type="text" value="<%=item.val%>">
+<body class='<%=theme%> <%=init ? 'center' : ''%>'>
+  <main>
+    <% if (init) { %>
+      <div>
+        <h1>Install</h1>
+        <% if (config) { %>
+          <div class='card'>
+            <% if (config.icon) { %>
+              <img src="<%=config.icon%>">
+            <% } %>
+            <div class='col'>
+              <div class='title'><%=config.title%></div>
+              <div class='description'><%=config.description%></div>
             </div>
-          <% } %>
-        <% }) %>
+          </div>
+        <% } %>
+        <footer>
+          <button id='customize' class='btn'><i class="fa-solid fa-gear"></i> Customize</button>
+          <div id='save' class='btn'>
+            <span class='save'><i class="fa-solid fa-check"></i> Install</span>
+          </div>
+        </footer>
       </div>
-    </main>
+    <% } else { %>
+      <header class='navheader grabbable'>
+      <div class='runner'>
+        <div id='save' class='btn'>
+          <span class='save'><i class="fa-solid fa-check"></i> Save</span>
+        </div>
+        <a class='btn' href="<%=editorpath%>"><i class="fa-solid fa-pen-to-square"></i> Edit file</a>
+        <button class='btn' id='open-fs' data-filepath="<%=filepath%>"><i class="fa-solid fa-eye"></i> Open in File Explorer</button>
+      </div>
+      </header>
+    <% } %>
+    <div id='editor' class='<%=init ? "hidden" : ''%>'>
+      <% items.forEach((item) => { %>
+        <% if (item.type === "comment") { %>
+          <div class='comment'><%=item.val.replaceAll(/^[ #]+/g, "")%></div>
+        <% } else { %>
+          <div class='env-item'>
+            <label for="<%=item.key%>"><%=item.key%></label>
+            <input id="<%=item.key%>" type="text" value="<%=item.val%>">
+          </div>
+        <% } %>
+      <% }) %>
+    </div>
+  </main>
 </body>
 </html>

package/server/views/pre.ejs

@@ -0,0 +1,109 @@
+<html class='columns'>
+<head>
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
+<script src="/hotkeys.min.js"></script>
+<script src="/ace/ace.js"></script>
+<script src="/noty.js"></script>
+<script src="/notyq.js"></script>
+<script src="/xterm.js"></script>
+<script src="/xterm-addon-fit.js"></script>
+<script src="/xterm-addon-web-links.js"></script>
+<script src="/xterm-theme.js"></script>
+<script src="/xterm-addon-search.js"></script>
+<script src="/xterm-addon-search-bar.js"></script>
+<script src="/sweetalert2.js"></script>
+<script src="/Socket.js"></script>
+<script src="/common.js"></script>
+<script src="/he.js"></script>
+<script src="/opener.js"></script>
+<script src="/nav.js"></script>
+<script src="/autoexpand.js"></script>
+<script src="/modalinput.js"></script>
+<script src="/simplemodal.js"></script>
+<script src="/waitmodal.js"></script>
+<script src="/notifyinput.js"></script>
+<script src="/report.js"></script>
+<link href="/xterm.min.css" rel="stylesheet" />
+<link href="/css/fontawesome.min.css" rel="stylesheet">
+<link href="/css/solid.min.css" rel="stylesheet">
+<link href="/css/regular.min.css" rel="stylesheet">
+<link href="/css/brands.min.css" rel="stylesheet">
+<link href="/style.css" rel="stylesheet"/>
+<link href="/noty.css" rel="stylesheet"/>
+<% if (agent === "electron") { %>
+  <link href="/electron.css" rel="stylesheet"/>
+<% } %>
+<style>
+main {
+  max-width: 500px;
+  margin: 50px auto;
+  width: 100%;
+}
+h1 {
+  letter-spacing: -1px;
+}
+.item {
+  border-radius: 5px;
+  padding: 10px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: flex-start;
+  /*
+  border: 1px solid rgba(0,0,0,0.07);
+  */
+  background: rgba(0,0,0,0.04);
+  margin: 10px 0;
+
+}
+.item .btn {
+  width: 50px;
+  text-align: center;
+}
+.item img {
+  width: 100px;
+}
+.item .col {
+  flex-grow: 1;
+  padding: 10px;
+  box-sizing: border-box;
+}
+footer {
+  background: none;
+}
+footer a.btn {
+  text-align: center;
+  display: block;
+  width: 100%;
+}
+.e {
+  padding: 5px 0;
+}
+</style>
+</head>
+<body class='columns <%=theme%>'>
+  <header class='navheader grabbable'>
+  </header>
+  <main>
+    <h1>Requirements</h1>
+    <div class='e'>
+      <div>To run <%=name%>, you need to have the following programs installed.</div>
+      <div>Get the apps if you haven't already, and press "Done".</div>
+    </div>
+    <div class='items'>
+      <% items.forEach((item) => { %>
+        <div class='item'>
+          <img src="<%=item.icon%>">
+          <div class='col'>
+            <div class='title'><%=item.title%></div>
+            <div class='description'><%=item.description%></div>
+          </div>
+          <a target="_blank" features="browser" href='<%=item.href%>' class='btn'>Get</a>
+        </div>
+      <% }) %>
+    </div>
+    <footer>
+      <a class='btn' href="/env/api/<%=name%>?init=true">Done</a>
+    </footer>
+  </main>
+</body>
+</html>

package/server/views/settings.ejs

@@ -302,7 +302,7 @@ hr {
       <br>
       <div>Edit the system ENVIRONMENT file to customize pinokio system wide settings, such as where files are stored, terminal behavior, etc.</div>
       <br>
-      <a class='btn' href="/env/ENVIRONMENT"><i class="fa-regular fa-pen-to-square"></i> Edit ENVIRONMENT</a>
+      <a class='btn' href="/env"><i class="fa-regular fa-pen-to-square"></i> Edit ENVIRONMENT</a>
     </div>
     <hr/>
     <div class='troubleshoot'>