@jseeio/jsee 0.2.8 → 0.3.0

package/src/utils.js

@@ -1,21 +1,92 @@
-function getModelFuncJS (model, target, log=console.log) {
+// https://stackoverflow.com/questions/8511281/check-if-a-value-is-an-object-in-javascript
+function isObject (item) {
+  return (typeof item === 'object' && !Array.isArray(item) && item !== null)
+}
+
+async function getModelFuncJS (model, target, app) {
+  let modelFunc
   switch (model.type) {
     case 'class':
-      log('Init class')
+      app.log('Init class')
       const modelClass = new target()
-      return (...a) => {
+      modelFunc = (...a) => {
         return modelClass[model.method || 'predict'](...a)
       }
+      break
     case 'async-init':
-      // TODO: Test this
-      log('Function with async init')
-      return target().then(m => {
-        log('> Async init resolved: ', m)
-        return m
-      })
+      app.log('Function with async init')
+      modelFunc = await target()
+      break
     default:
-      log('Init function')
-      return target
+      app.log('Init function')
+      modelFunc = target
+  }
+
+  // Wrap modelFunc to take into account container
+  // Possible cases:
+  if (model.container === 'args') {
+    return (...a) => {
+      if (Array.isArray(a[0]) && a[0].length && a.length === 1) {
+        return modelFunc(...a[0])
+      } else if (isObject(a[0]) && a.length === 1) {
+        return modelFunc(...Object.values(a[0]))
+      } else {
+        return modelFunc(...a)
+      }
+    }
+  } else {
+    return (...a) => {
+      if (isObject(a[0]) && a.length === 1) {
+        // In case when we have only one input object
+        // Pass log and callback to the model function
+        return modelFunc(a[0], app)
+      } else {
+        return modelFunc(...a)
+      }
+    }
+  }
+}
+
+function getUrl (url) {
+  let newUrl
+  try {
+    newUrl = (new URL(url)).href
+  } catch (e) {
+    newUrl = (new URL(url, 'https://cdn.jsdelivr.net/npm/')).href
+  }
+  return newUrl
+}
+
+function importScriptAsync (url, async=true) {
+  url = getUrl(url)
+  return new Promise((resolve, reject) => {
+    try {
+      const scriptElement = document.createElement('script')
+      scriptElement.type = 'text/javascript'
+      scriptElement.async = async
+      scriptElement.src = url
+      scriptElement.addEventListener('load', (ev) => {
+        resolve({ status: true })
+      })
+      scriptElement.addEventListener('error', (ev) => {
+        reject({
+          status: false,
+          message: `Failed to import ＄{url}`
+        })
+      })
+      document.body.appendChild(scriptElement);
+    } catch (error) {
+      reject(error)
+    }
+  })
+}
+
+async function importScripts (...imports) {
+  // Load scripts in parallel
+  // return Promise.all(imports.map(importScriptAsync))
+  // Load scripts in sequence. Possible ordering issues.
+  for (const scriptUrl of imports) {
+    await importScriptAsync(scriptUrl);
   }
 }
 
@@ -46,7 +117,15 @@ function getModelFuncAPI (model, log=console.log) {
   }
 }
 
+async function delay (ms) {
+  return new Promise(resolve => setTimeout(resolve, ms || 1))
+}
+
 module.exports = {
+  isObject,
   getModelFuncJS,
-  getModelFuncAPI
+  getModelFuncAPI,
+  importScripts,
+  getUrl,
+  delay
 }

package/src/worker.js

@@ -6,20 +6,47 @@ function log () {
   postMessage({_status: 'log', _log: args})
 }
 
+function progress (value) {
+  postMessage({_status: 'progress', _progress: value})
+}
+
 function initTF (model) {
   throw new Error('Tensorflow in worker (not implemented)')
 }
 
-function initPython (model) {
-  throw new Error('Python in worker (not implemented)')
+async function initPython (model) {
+  importScripts("https://cdn.jsdelivr.net/pyodide/v0.24.1/full/pyodide.js")
+  const pyodide = await loadPyodide()
+  if (model.imports && Array.isArray(model.imports) && model.imports.length) {
+    await pyodide.loadPackage(model.imports)
+  } else {
+    await pyodide.loadPackagesFromImports(model.code)
+  }
+  return async (data) => {
+    for (let key in data) {
+      self[key] = data[key]
+    }
+    return await pyodide.runPythonAsync(model.code);
+  }
 }
 
-function initJS (model) {
+async function initJS (model) {
   log('Init JS')
   this.container = model.container
 
+  // Load imports
+  if (model.imports && model.imports.length) {
+    log('Loading imports...')
+    for (let imp of model.imports) {
+      // Try creating an url
+      const url = utils.getUrl(imp)
+      log('Importing:', url)
+      importScripts(url)
+    }
+  }
+
   if (model.code) {
-    log('Load code as a string')
+    log('Load code as a string', model)
     // https://github.com/altbdoor/blob-worker/blob/master/blobWorker.js
     importScripts(URL.createObjectURL(new Blob([model.code], { type: 'text/javascript' })))
   } else if (model.url) {
@@ -29,92 +56,61 @@ function initJS (model) {
     log('No script provided')
   }
 
-
   // Related:
   // https://stackoverflow.com/questions/37711603/javascript-es6-class-definition-not-accessible-in-window-global
-  const target = model.type === 'class' 
+  const target = model.type === 'class'
     ? eval(model.name)
     : this[model.name]
+
   // Need promise here in case of async init
-  Promise.resolve(utils.getModelFuncJS(model, target, log))
-    .then(m => {
-      postMessage({_status: 'loaded'})
-      this.modelFunc = m
-    })
+  let modelFunc = await utils.getModelFuncJS(model, target, { log, progress })
+
+  return modelFunc
 }
 
 function initAPI (model) {
   log('Init API')
-  this.modelFunc = utils.getModelFuncAPI(model, log)
+  return utils.getModelFuncAPI(model, log)
 }
 
-onmessage = function (e) {
-
+onmessage = async function (e) {
   var data = e.data
   log('Received message of type:', typeof data)
 
   if ((typeof data === 'object') && ((data.url) || (data.code))) {
-    /*
-      INIT MESSAGE
-    */
-    let model = data
+    // Init message
     log('Init...')
-
-    switch (model.type) {
+    let m = data
+    switch (m.type) {
       case 'tf':
-        initTF(model)
+        self.modelFunc = await initTF(m)
         break
       case 'py':
-        initPython(model)
+        self.modelFunc = await initPython(m)
         break
       case 'function':
       case 'class':
       case 'async-init':
       case 'async-function':
-        initJS(model)
+        self.modelFunc = await initJS(m)
         break
       case 'get':
       case 'post':
-        initAPI(model)
+        self.modelFunc = await initAPI(m)
         break
+      default:
+        throw new Error(`No type information: ${m.type}`)
     }
+    postMessage({_status: 'loaded'})
   } else {
-    /*
-    :w
-    CALL MESSAGE
-    */
-    var res
-    if (typeof this.modelFunc === 'string') {
-      // Python model:
-      log('Calling Python model')
-      /*
-      const keys = Object.keys(data)
-      for (let key of keys) {
-        self[key] = data[key];
-      }
-      self.pyodide.runPythonAsync(this.model, () => {})
-        .then((res) => {
-          console.log('[Worker] Py results: ', typeof res, res)
-	  postMessage(res)
-        })
-        .catch((err) => {
-          // self.postMessage({error : err.message});
-        })
-      */
-    } else {
-      // JavaScript model
-      log('Calling JavaScript model')
-      if (this.container === 'args') {
-        log('Applying inputs as arguments')
-        res = this.modelFunc.apply(null, data)
-      } else {
-        // JS object or array
-        log('Applying inputs as object/array')
-        res = this.modelFunc(data, log)
-      }
-      // Return promise value or just regular value
-      // Promise.resolve handles both cases
-      Promise.resolve(res).then(r => { postMessage(r) })
+    // Execution
+    try {
+      log('Run model with data:', data)
+      const results = await self.modelFunc(data)
+      log('Results:', results)
+      postMessage(results)
+    } catch (error) {
+      postMessage({ _status: 'error', _error: error })
     }
   }
 }

package/templates/bulma-app.vue

@@ -85,7 +85,7 @@
       justify-content: right;
     }
 
-    .card-footer .run-button:hover,{
+    .card-footer .run-button:hover {
       background-color: transparent !important;
       background: linear-gradient(270deg, #02dbb2 0%, #fff0 80%);
       box-shadow: 5px 0px 5px -2px #48ffd43b;
@@ -95,6 +95,13 @@
       color: #016c5c !important;
     }
 
+    .example-button {
+      margin-top: 3px;
+      padding: 5px 10px;
+      border-radius: 5px !important;
+      height: auto;
+    }
+
     .field {
       margin-bottom: 5px;
     }
@@ -129,20 +136,25 @@
           <p v-if="$parent.model.description">{{ $parent.model.description }}</p>
         </div>
       </div>
-      <div class="columns">
+      <div class="columns is-multiline">
         <div class="column" v-bind:class="($parent.design && $parent.design.grid && ($parent.design.grid.length > 0)) ? 'is-' + $parent.design.grid[0] : ''">
+          <!-- Inputs -->
           <div class="card bordered">
             <div class="card-content" id="inputs" v-if="$parent.inputs && $parent.inputs.length > 0">
               <ul>
                 <li v-for="(input, index) in $parent.inputs">
-                  <vue-input v-bind:input="input" v-if="$parent.display(index)" v-on:inchange="$parent.run()"></vue-input>
+                  <vue-input
+                    v-bind:input="input"
+                    v-if="input.display !== false && $parent.display(index)"
+                    v-on:inchange="$parent.run()"
+                  ></vue-input>
                 </li>
               </ul>
               <pre v-if="$parent.model.debug">{{ $parent.inputs }}</pre>
               <!-- <button class="button is-primary" id="run"><span>▸</span>&nbsp;&nbsp;Run</button> -->
             </div>
             <footer class="card-footer" v-bind:class="{ reset: $parent.dataChanged }">
-              <button 
+              <button
                 v-on:click="$parent.reset()"
                 v-if="$parent.inputs && $parent.inputs.length > 0 && $parent.dataChanged"
                 class="button reset-button icon card-footer-item is-danger is-small"
@@ -150,8 +162,8 @@
                 <span class="rest-icon has-text-danger-dark">✕</span>
                 <span>&nbsp; Reset</span>
               </button>
-              <button 
-                v-on:click="$parent.run()" 
+              <button
+                v-on:click="$parent.run('run')"
                 class="button run-button icon card-footer-item is-primary is-small"
                 v-bind:class="{ running: $parent.clickRun }"
               >
@@ -160,8 +172,21 @@
               </button>
             </footer>
           </div>
+          <!-- Examples -->
+          <div v-if="$parent.examples">
+            <p style="margin-top: 20px">Examples</p>
+            <div v-for="(example, index) in $parent.examples">
+              <button
+                v-on:click="$parent.reset(example)"
+                class="button is-small example-button"
+              >
+                {{ example }}
+              </button>
+            </div>
+          </div>
         </div>
-        <div class="column" id="outputs">
+        <div class="column" id="outputs" v-bind:class="($parent.design && $parent.design.grid && ($parent.design.grid.length > 1)) ? 'is-' + $parent.design.grid[1] : ''">
+          <!-- Outputs -->
           <div v-if="$parent.outputs">
             <div v-for="(output, index) in $parent.outputs">
               <vue-output v-bind:output="output" v-on:notification="$parent.notify($event)"></vue-output>

package/templates/bulma-input.vue

@@ -85,12 +85,8 @@
   	  			type="file"
   	  		>
           <span class="file-cta">
-            <span class="file-icon">
-              <span v-if="input.file && input.file.name">✓</span>
-              <span v-else>↥</span>
-  	  			</span>
             <span class="file-label">
-              Choose a file…
+              Open
             </span>
           </span>
           <span class="file-name">
@@ -102,6 +98,16 @@
     </div>
   </div>
 
+  <div class="field"  v-if="input.type == 'action' || input.type == 'button'">
+    <button 
+      v-on:click="$parent.$parent.run(input.name.toLowerCase().replace(/ /g, '_'))"
+      class="button is-small"
+      style="width: 100%; padding: 5px 0; margin-top: 8px; text-align: left;"
+    >
+      <span>&nbsp; {{ input.title ? input.title : input.name }} &nbsp;</span>
+    </button>
+  </div>
+
   <div class="field is-horizontal" v-if="input.type == 'group'">
     <div class="field-body">
       <vue-input v-for="(el, index) in input.elements" v-bind:input="el" ></vue-input>

package/templates/common-inputs.js

@@ -21,6 +21,9 @@ const component = {
           this.$emit('inchange')
         }
       }
+    },
+    call (method) {
+      console.log('calling: ', method)
     }
   }
 }

package/test/class.html

@@ -0,0 +1,22 @@
+
+<html>
+  <div id="jsee-container">
+  <script src="/dist/jsee.js"></script>
+  <script>
+    new JSEE({
+      schema: {
+        'model': {
+          'name': 'Doubler',
+          'method': 'double',
+          'type': 'class',
+          'container': 'args',
+          'url': '/test/example-class.js',
+        },
+        'inputs': [
+          { 'name': 'b', 'type': 'int', 'default': 100 }
+        ]
+      },
+      container: '#jsee-container'
+    })
+  </script>
+</html>

package/test/importw.html

@@ -0,0 +1,28 @@
+<html>
+  <div id="jsee-container">
+  <script src="/dist/jsee.js"></script>
+  <script>
+
+    new JSEE({
+      schema: {
+        "model": {
+          "name": "kebab",
+          "type": "function",
+          "container": "args",
+          "code": `
+            function kebab (str) {
+              return _.kebabCase(str)
+            }
+          `,
+          "worker": false,
+        },
+        "imports": "lodash@4.17.21/lodash.min.js",
+        "inputs": [
+          { "name": "str", "type": "string", "default": 'FooBar' },
+        ]
+      },
+      container: '#jsee-container',
+      verbose: true
+    })
+  </script>
+</html>

package/test/minimal.html

@@ -8,7 +8,7 @@
           return a * b
         }
       },
-      container: 'jsee-container'
+      container: '#jsee-container'
     })
   </script>
 </html>

package/test/minimal4.html

@@ -6,7 +6,7 @@
       schema: {
         "model": {
           "name": "div",
-          "code": "function div (a) { ruturn a / 2 }"
+          "code": "function div (a) { return a / 2 }"
         },
         "inputs": [
           {

package/test/pipeline.html

@@ -0,0 +1,52 @@
+<html>
+  <div id="jsee-container">
+  <script src="/dist/jsee.js"></script>
+  <script>
+    new JSEE({
+      schema: {
+        "model": [
+          {
+            "name": "sum",
+            "type": "function",
+            "container": "args",
+            "code": function sum (a, b) {
+              return a + b
+            },
+            "worker": true
+          },
+          {
+            "name": "square",
+            "type": "function",
+            "container": "args",
+            "code": function square (a) {
+              return a * a
+            }
+          },
+          {
+            "name": "Increment",
+            "type": "class",
+            "method": "step",
+            "container": "args",
+            "code": class Increment {
+              constructor () {
+                this.i = 0
+              }
+              step (a) {
+                this.i += 1
+                return a + this.i
+              }
+            }
+          }
+        ],
+        "inputs": [
+          { "name": "a", "type": "int", "default": 2 },
+          { "name": "b", "type": "int", "default": 3 }
+        ],
+        "outputs": [
+          { "name": "square", "type": "int" }
+        ],
+        "autorun": false
+      }
+    })
+  </script>
+</html>

package/test/python.html

@@ -0,0 +1,41 @@
+<html>
+  <div id="jsee-container">
+  <script src="/dist/jsee.js"></script>
+  <script>
+    new JSEE({
+      schema: {
+        "model": {
+          "name": "pytest",
+          "type": "py",
+          "description": "Testing pyodide project",
+          "container": "object",
+          "code": `
+            import numpy as np
+            from js import a, b
+            np.mean([a, b])
+          `.replace(/^\s+/gm, ''),
+          "autorun": false,
+          "worker": true,
+          "imports": [
+            "numpy"
+          ]
+        },
+        "inputs": [
+          {
+            "type": "int",
+            "name": "a"
+          },
+          {
+            "type": "int",
+            "name": "b"
+          }
+        ],
+        "outputs": [
+          {
+            "type": "int"
+          }
+        ]
+      }
+    })
+  </script>
+</html>