@jseeio/jsee 0.2.1 → 0.2.5

package/src/app.js

@@ -20,12 +20,7 @@ const components = {
 const filtrex = require('filtrex')
 const JsonViewer = require('vue3-json-viewer').default
 
-function log () {
-  console.log(`[Vue]`, ...arguments)
-}
-
 function resetInputs (inputs) {
-  log('Resetting inputs...')
   inputs.forEach(input => {
     if (input.default) { 
       input.value = input.default 
@@ -65,7 +60,14 @@ function resetInputs (inputs) {
   })
 }
 
-function createVueApp (env, dataInit, mountedCallback) {
+function createVueApp (env, mountedCallback, logMain) {
+  function log () {
+    logMain('[Vue]', ...arguments)
+  }
+
+  // Vue's data is based on schema
+  const dataInit = env.schema
+
   // Reset input values to default ones
   resetInputs(dataInit.inputs)
 
@@ -73,6 +75,11 @@ function createVueApp (env, dataInit, mountedCallback) {
     dataInit.outputs = []
   }
 
+  // Flag that shows if data was changed from initial conditions
+  dataInit.dataChanged = false
+  // Flag for autorun feedback
+  dataInit.clickRun = false
+
   function len(s) {
     return s.length;
   }
@@ -142,8 +149,9 @@ function createVueApp (env, dataInit, mountedCallback) {
         deep: true,
         immediate: false,
         handler (v) {
+          this.dataChanged = true // Used in the reset button
           if (this.model.autorun) {
-            env.run()
+            this.run()
           }
         }
       }
@@ -158,9 +166,16 @@ function createVueApp (env, dataInit, mountedCallback) {
       },
       reset () {
         resetInputs(this.inputs)
+        this.$nextTick(() => {
+          this.dataChanged = false
+        })
       },
       run () {
+        this.clickRun = true
         env.run()
+        setTimeout(() => {
+          this.clickRun = false
+        }, 150)
       },
       notify (msg) {
         env.notify(msg)

package/src/overlay.js

@@ -2,22 +2,7 @@ class Overlay {
   constructor (parent) {
     this.element = document.createElement('div')
     this.element.id = 'overlay'
-    this.element.className = 'valign-wrapper'
-    this.element.innerHTML = `
-      <div class="center-align" style="width:100%">
-        <div class="preloader-wrapper small active">
-          <div class="spinner-layer spinner-green-only">
-            <div class="circle-clipper left">
-              <div class="circle"></div>
-            </div><div class="gap-patch">
-              <div class="circle"></div>
-            </div><div class="circle-clipper right">
-              <div class="circle"></div>
-            </div>
-          </div>
-        </div>
-      </div>
-    `
+    this.element.innerHTML = `...`
     parent.appendChild(this.element)
   }
 

package/src/utils.js

@@ -0,0 +1,52 @@
+function getModelFuncJS (model, target, log=console.log) {
+  switch (model.type) {
+    case 'class':
+      log('Init class')
+      const modelClass = new target()
+      return (...a) => {
+        return modelClass[model.method || 'predict'](...a)
+      }
+    case 'async-init':
+      // TODO: Test this
+      log('Function with async init')
+      return target().then(m => {
+        log('> Async init resolved: ', m)
+        return m
+      })
+    default:
+      log('Init function')
+      return target
+  }
+}
+
+function getModelFuncAPI (model, log=console.log) {
+  switch (model.type) {
+    case 'get':
+      return (data) => {
+        const query = new URLSearchParams(data).toString()
+        const finalURL = model.url +'?' + query
+        log('Sending GET request to:', finalURL)
+        const resPromise = fetch(finalURL)
+          .then(response => response.json())
+        return resPromise
+      }
+    case 'post':
+      return (data) => {
+        log('Sending POST request to', this.schema.model.url)
+        const resPromise = fetch(this.schema.model.url, {
+          method: 'POST',
+          headers: {
+            'Accept': 'application/json',
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify(data)
+        }).then(response => response.json())
+        return resPromise
+      }
+  }
+}
+
+module.exports = {
+  getModelFuncJS,
+  getModelFuncAPI
+}

package/src/worker.js

@@ -1,11 +1,55 @@
+const utils = require('./utils')
+
 function log () {
   const args = Array.prototype.slice.call(arguments);
   args.unshift('[Worker]')
-  console.log(args)
   postMessage({_status: 'log', _log: args})
 }
 
+function initTF (model) {
+  throw new Error('Tensorflow in worker (not implemented)')
+}
+
+function initPython (model) {
+  throw new Error('Python in worker (not implemented)')
+}
+
+function initJS (model) {
+  log('Init JS')
+  this.container = model.container
+
+  if (model.code) {
+    log('Load code as a string')
+    // https://github.com/altbdoor/blob-worker/blob/master/blobWorker.js
+    importScripts(URL.createObjectURL(new Blob([model.code], { type: 'text/javascript' })))
+  } else if (model.url) {
+    log('Load script from URL:', model.url)
+    importScripts(model.url)
+  } else {
+    log('No script provided')
+  }
+
+
+  // Related:
+  // https://stackoverflow.com/questions/37711603/javascript-es6-class-definition-not-accessible-in-window-global
+  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
+    })
+}
+
+function initAPI (model) {
+  log('Init API')
+  this.modelFunc = utils.getModelFuncAPI(model, log)
+}
+
 onmessage = function (e) {
+
   var data = e.data
   log('Received message of type:', typeof data)
 
@@ -14,67 +58,30 @@ onmessage = function (e) {
       INIT MESSAGE
     */
     let model = data
+    log('Init...')
 
-    if (model.type === 'py') {
-      // Python with Pyodide
-      importScripts('https://pyodide.cdn.iodide.io/pyodide.js')
-      // Check when all's loaded
-      /*
-      TODO: Implement same loaded as port
-      let pyCheck = setInterval(() => {
-        if (self.pyodide && self.pyodide.runPythonAsync && this.model && this.model.length) {
-          console.log('[Worker] Pyodide lib and model loaded. Try running to preload all imports')
-          self.pyodide.runPythonAsync(this.model, () => {})
-            .then((res) => {
-              postMessage({_status: 'loaded'})
-            })
-            .catch((err) => {
-              postMessage({_status: 'loaded'})
-            })
-          clearInterval(pyCheck)
-        }
-      }, 500)
-      */
-    } else {
-      // Javascript
-      this.container = model.container
-
-      if (model.code) {
-        log('Load code from schema')
-        // https://github.com/altbdoor/blob-worker/blob/master/blobWorker.js
-        importScripts(URL.createObjectURL(new Blob([model.code], { type: 'text/javascript' })))
-      } else if (model.url) {
-        log('Load script from URL:', model.url)
-        importScripts(model.url)
-      } else {
-        log('No script provided')
-      }
-
-      if (model.type === 'class') {
-        log('[Worker] Init class')
-        // this.modelFunc = (new this[model.name]())[model.method || 'predict']
-
-        const modelClass = new this[model.name]()
-        this.modelFunc = (...a) => {
-          return modelClass[model.method || 'predict'](...a)
-        }
-      } else if (model.type === 'async-init') {
-        log('Init function with promise')
-        log(this[model.name])
-        this[model.name]().then((m) => {
-          log('Async init resolved: ', m)
-          this.modelFunc = m
-        })
-      } else {
-        log('Init function')
-        this.modelFunc = this[model.name]
-      }
-
-      postMessage({_status: 'loaded'})
+    switch (model.type) {
+      case 'tf':
+        initTF(model)
+        break
+      case 'py':
+        initPython(model)
+        break
+      case 'function':
+      case 'class':
+      case 'async-init':
+      case 'async-function':
+        initJS(model)
+        break
+      case 'get':
+      case 'post':
+        initAPI(model)
+        break
     }
   } else {
     /*
-      CALL MESSAGE
+    :w
+    CALL MESSAGE
     */
     var res
     if (typeof this.modelFunc === 'string') {

package/templates/bulma-app.vue

@@ -11,6 +11,95 @@
     @import "../node_modules/bulma/sass/layout/section.sass";
 
     font-family: sans-serif;
+
+    #overlay {
+      display: none;
+      position: absolute;
+      top: -1px;
+      left: -1px;
+      right: -1px;
+      bottom: -1px;
+      background: #F5F5F5;
+      opacity: .6;
+      z-index: 1000;
+      align-items: center;
+      justify-content: center;
+    }
+
+
+    .card-header {
+      box-shadow: none;
+      border-bottom: 1px solid #ececec;
+    }
+
+    .card-header-title {
+      font-weight: 400;
+    }
+
+    .card-header-title, .card-header-icon {
+      padding: 0.75rem 1.5rem;
+      cursor: initial;
+    }
+
+    .card-header-icon button {
+      border: none;
+      margin: 0 0 0 5px;
+      padding: 0px 7px;
+      height: auto;
+
+      &:hover {
+        background-color: whitesmoke;
+      }
+    }
+
+    .card-footer {
+      /* background: linear-gradient(62deg, rgba(0,171,209,1) 0%, rgba(0,209,178,1) 100%); */
+      background: linear-gradient(90deg, #4395d0 0%, #00d1b2 100%);
+    }
+
+    .card-footer.reset {
+      background: linear-gradient(90deg, #ff577f 0%, #4395d0 50%, #00d1b2 100%);
+    }
+
+    .card-footer .button {
+      background: none;
+      padding: .75rem 1.5rem;
+      border: none !important;
+      font-size: 14px;
+      font-weight: 400;
+      border-radius: 0;
+    }
+
+    .reset-button {
+      justify-content: left;
+    }
+
+    .reset-button:hover {
+      background-color: transparent !important;
+      background: linear-gradient(90deg, #ff3a56 0%, #fff0 80%)
+    }
+
+    .card-footer .run-button {
+      border-left: 1px dashed white;
+      justify-content: right;
+    }
+
+    .card-footer .run-button:hover,{
+      background-color: transparent !important;
+      background: linear-gradient(270deg, #02dbb2 0%, #fff0 80%);
+    }
+
+    .card-footer .run-button.running .run-icon {
+      color: #016c5c !important;
+    }
+
+    .field {
+      margin-bottom: 5px;
+    }
+
+    .input, .textarea, .select select {
+      border-color: #e8e8e8;
+    }
   }
 </style>
 <template>
@@ -25,7 +114,7 @@
       <div class="columns">
         <div class="column" v-bind:class="($parent.design && $parent.design.grid && ($parent.design.grid.length > 0)) ? 'is-' + $parent.design.grid[0] : ''">
           <div class="card bordered">
-            <div class="card-content" id="inputs">
+            <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>
@@ -34,18 +123,24 @@
               <pre v-if="$parent.model.debug">{{ $parent.inputs }}</pre>
               <!-- <button class="button is-primary" id="run"><span>▸</span>&nbsp;&nbsp;Run</button> -->
             </div>
-            <div class="card">
-              <footer class="card-footer">
-                <button v-on:click="$parent.reset()" class="button icon card-footer-item is-danger is-small">
-                  <span class="has-text-danger-dark">✕</span>
-                  <span>&nbsp; Reset</span>
-                </button>
-                <button v-on:click="$parent.run()" class="button icon card-footer-item is-primary is-small">
-                  <span class="has-text-primary-dark">▸</span>
-                  <span>&nbsp; Run</span>
-                </button>
-              </footer>
-            </div>
+            <footer class="card-footer" v-bind:class="{ reset: $parent.dataChanged }">
+              <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"
+              >
+                <span class="rest-icon has-text-danger-dark">✕</span>
+                <span>&nbsp; Reset</span>
+              </button>
+              <button 
+                v-on:click="$parent.run()" 
+                class="button run-button icon card-footer-item is-primary is-small"
+                v-bind:class="{ running: $parent.clickRun }"
+              >
+                <span>&nbsp; Run &nbsp;</span>
+                <span class="run-icon has-text-primary-dark">▸</span>
+              </button>
+            </footer>
           </div>
         </div>
         <div class="column" id="outputs">

package/templates/bulma-output.vue

@@ -5,8 +5,8 @@
         {{ output.name }}
       </p>
       <p class="card-header-icon">
-        <button class="button icon is-small" v-on:click="save()">Save</button>
-        <button class="button icon is-small" v-on:click="copy()">Copy</button>
+        <button class="button is-small" v-on:click="save()">Save</button>
+        <button class="button is-small" v-on:click="copy()">Copy</button>
       </p>
     </header>
     <div class="card-content">

package/test/code.html

@@ -0,0 +1,25 @@
+<html>
+  <div id="jsee-container">
+  <script src="/dist/jsee.js"></script>
+  <script>
+    function sum (a, b) {
+      return a + b
+    }
+    new JSEE({
+      schema: {
+        "model": {
+          "name": "sum",
+          "type": "function",
+          "container": "args",
+          "code": sum,
+          "autorun": true,
+          "worker": false
+        },
+        "inputs": [
+          { "name": "a", "type": "int", "default": 100 },
+          { "name": "b", "type": "int", "default": 42 }
+        ]
+      }
+    })
+  </script>
+</html>

package/test/codew.html

@@ -0,0 +1,25 @@
+<html>
+  <div id="jsee-container">
+  <script src="/dist/jsee.js"></script>
+  <script>
+    function sum (a, b) {
+      return a + b
+    }
+    new JSEE({
+      schema: {
+        "model": {
+          "name": "sum",
+          "type": "function",
+          "container": "args",
+          "code": sum,
+          "autorun": true,
+          "worker": true
+        },
+        "inputs": [
+          { "name": "a", "type": "int", "default": 100 },
+          { "name": "b", "type": "int", "default": 42 }
+        ]
+      }
+    })
+  </script>
+</html>

package/test/example-class.js

@@ -0,0 +1,8 @@
+class Doubler {
+  constructor() {
+    this.a = 2
+  }
+  double(b) {
+    return this.a * b
+  }
+}

package/test/example-sum.js

@@ -0,0 +1,3 @@
+function sum (a, b) {
+  return a + b
+}

package/test/minimal.html

@@ -0,0 +1,14 @@
+<html>
+  <div id="jsee-container">
+  <script src="/dist/jsee.js"></script>
+  <script>
+    new JSEE({
+      schema: {
+        'model': function (a, b) {
+          return a * b
+        }
+      },
+      container: 'jsee-container'
+    })
+  </script>
+</html>

package/test/string.html

@@ -0,0 +1,26 @@
+<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
+            }
+          `,
+          "autorun": true,
+          "worker": false
+        },
+        "inputs": [
+          { "name": "a", "type": "int", "default": 100 },
+          { "name": "b", "type": "int", "default": 42 }
+        ]
+      }
+    })
+  </script>
+</html>

package/test/stringw.html

@@ -0,0 +1,29 @@
+<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
+            }
+          `,
+          "autorun": true,
+          "worker": true
+        },
+        "inputs": [
+          { "name": "a", "type": "int", "default": 100 },
+          { "name": "b", "type": "int", "default": 42 }
+        ]
+      },
+      container: '#jsee-container',
+      verbose: false
+    })
+  </script>
+</html>

package/test/sum.schema.json

@@ -0,0 +1,17 @@
+{
+  "model": {
+    "name": "sum",
+    "type": "function",
+    "title": "title",
+    "description": "description",
+    "container": "args",
+    "url": "example-sum.js",
+    "autorun": true,
+    "worker": false
+  },
+  "inputs": [
+    { "name": "a", "type": "int", "default": 100 },
+    { "name": "b", "type": "int", "default": 42 }
+  ]
+}
+

package/test/sumw.schema.json

@@ -0,0 +1,17 @@
+{
+  "model": {
+    "name": "sum",
+    "type": "function",
+    "title": "title",
+    "description": "description",
+    "container": "args",
+    "url": "example-sum.js",
+    "autorun": true,
+    "worker": true
+  },
+  "inputs": [
+    { "name": "a", "type": "int", "default": 100 },
+    { "name": "b", "type": "int", "default": 42 }
+  ]
+}
+