@jseeio/jsee 0.2.1

package/src/app.js

@@ -0,0 +1,188 @@
+// import Vue from 'vue'
+// import { createApp } from 'vue'
+// import { createApp } from 'vue/dist/vue.esm-bundler'
+// import { createApp, h } from 'vue/dist/vue.runtime.esm-bundler.js'
+
+import { createApp, h } from 'vue' // <- resolved in webpack.config based on RUNTIME
+
+import bulmaApp from '../templates/bulma-app.vue'
+import bulmaInput from '../templates/bulma-input.vue'
+import bulmaOutput from '../templates/bulma-output.vue'
+
+const components = {
+  'bulma': {
+    'app': bulmaApp,
+    'input': bulmaInput,
+    'output': bulmaOutput
+  }
+}
+
+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 
+    } else {
+      switch (input.type) {
+        case 'int':
+        case 'float':
+        case 'number':
+          input.value = 0
+          break
+        case 'string':
+        case 'text':
+          input.value = ''
+          break
+        case 'color':
+          input.value = '#000000'
+          break
+        case 'categorical':
+        case 'select':
+          input.value = input.options ? input.options[0] : ''
+          break
+        case 'bool':
+        case 'checkbox':
+          input.value = false
+          break
+        case 'file':
+          input.file = null
+          input.value = ''
+          break
+        case 'group':
+          resetInputs(input.elements)
+          break
+        default:
+          input.value = ''
+      }
+    }
+  })
+}
+
+function createVueApp (env, dataInit, mountedCallback) {
+  // Reset input values to default ones
+  resetInputs(dataInit.inputs)
+
+  if (!('outputs' in dataInit)) {
+    dataInit.outputs = []
+  }
+
+  function len(s) {
+    return s.length;
+  }
+
+  let filtrexOptions = {
+    extraFunctions: { len }
+  }
+
+  // Prepare functions that determine if inputs should be displayed
+  const displayFunctions = dataInit.inputs.map(input => {
+    if (input.display && input.display.length) {
+      const f = filtrex.compileExpression(input.display.replace(/\'/g, '"'), filtrexOptions)
+      return function DisplayConditionally (data) {
+        const inputObj = {}
+        data.inputs.filter(input => input.name).forEach(input => {
+          inputObj[input.name] = input.value
+        })
+        return f(inputObj)
+      }
+    } else {
+      return function DisplayAlways () {
+        return true
+      }
+    }
+  })
+
+  // Determine a container for Vue app
+  const container = env.params.container
+    ? (typeof env.params.container === 'string')
+      ? document.querySelector(env.params.container)
+      : env.params.container
+    : document.body
+
+  // Determine a template and GUI framework
+  const framework = (env.schema.design && typeof env.schema.design.framework !== 'undefined')
+    ? env.schema.design.framework
+    : 'bulma'
+
+  let template
+  let render
+  if (
+    env.schema.design
+    && env.schema.design.template 
+    && (
+      typeof env.schema.design.template === 'string'
+      || env.schema.design.template === false
+    )
+  ) {
+    template = env.schema.design.template
+    render = null
+  } else {
+    template = null //'<vue-app/>'
+    render = () => {
+      return h(components[framework].app)
+    }
+  }
+
+  log('Initializing Vue app...')
+  const app = createApp({
+    template,
+    render,
+    data () {
+      return dataInit
+    },
+    watch: {
+      inputs: {
+        deep: true,
+        immediate: false,
+        handler (v) {
+          if (this.model.autorun) {
+            env.run()
+          }
+        }
+      }
+    },
+    mounted () {
+      mountedCallback(container)
+    },
+    methods: {
+      display (index) {
+        const res = displayFunctions[index](this.$data)
+        return res
+      },
+      reset () {
+        resetInputs(this.inputs)
+      },
+      run () {
+        env.run()
+      },
+      notify (msg) {
+        env.notify(msg)
+      }
+    },
+  })
+
+  if (framework !== false) {
+    app.component('vue-app', components[framework].app)
+    app.component('vue-input', components[framework].input)
+    app.component('vue-output', components[framework].output)
+  }
+
+  // Json viewer
+  app.use(JsonViewer)
+
+  // Load Vue framework if present
+  if (framework in window) {
+    app.use(window[framework])
+  }
+
+  return app.mount(container) // After app.mount() it's not the same app
+}
+
+export { createVueApp }

package/src/overlay.js

@@ -0,0 +1,33 @@
+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>
+    `
+    parent.appendChild(this.element)
+  }
+
+  show () {
+    this.element.style.display = 'flex'
+  }
+
+  hide () {
+    this.element.style.display = 'none'
+  }
+}
+
+module.exports = Overlay

package/src/worker.js

@@ -0,0 +1,113 @@
+function log () {
+  const args = Array.prototype.slice.call(arguments);
+  args.unshift('[Worker]')
+  console.log(args)
+  postMessage({_status: 'log', _log: args})
+}
+
+onmessage = 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
+
+    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'})
+    }
+  } else {
+    /*
+      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) })
+    }
+  }
+}

package/templates/bulma-app.vue

@@ -0,0 +1,65 @@
+<style lang="scss" scoped>
+  :deep(.jsee-app) {
+    @import "../node_modules/vue3-json-viewer/dist/index.css";
+    @import "../node_modules/bulma/sass/base/_all.sass";
+    @import "../node_modules/bulma/sass/utilities/_all.sass";
+    @import "../node_modules/bulma/sass/form/_all.sass";
+    @import "../node_modules/bulma/sass/grid/_all.sass";
+    @import "../node_modules/bulma/sass/elements/_all.sass";
+    @import "../node_modules/bulma/sass/helpers/_all.sass";
+    @import "../node_modules/bulma/sass/components/card.sass";
+    @import "../node_modules/bulma/sass/layout/section.sass";
+
+    font-family: sans-serif;
+  }
+</style>
+<template>
+  <section>
+    <div class="jsee-app">
+      <div class="columns">
+        <div class="column is-full" id="$parent.model" v-if="$parent.model">
+          <h2 class="title is-2" v-if="$parent.model.title">{{ $parent.model.title }}</h2>
+          <p v-if="$parent.model.description">{{ $parent.model.description }}</p>
+        </div>
+      </div>
+      <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">
+              <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>
+                </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>
+            <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>
+          </div>
+        </div>
+        <div class="column" id="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>
+            </div>
+            <pre v-if="$parent.model.debug">{{ $parent.outputs }}</pre>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+<script>
+  export default {}
+</script>

package/templates/bulma-input.vue

@@ -0,0 +1,114 @@
+<template>
+  <div class="field" v-if="input.type == 'int' || input.type == 'float' || input.type == 'number'">
+    <label v-bind:for="input.name" class="is-size-7">{{ input.name }}</label>
+    <div class="control">
+      <input 
+        v-model="input.value" 
+        v-bind:id="input.name"
+        v-bind:step="input.type == 'int' ? 1 : 0.001"
+        v-bind:placeholder="input.placeholder ? input.placeholder : input.name"
+        v-bind:min="input.min"
+        v-bind:max="input.max"
+        v-on:change="changeHandler"
+        class="input"
+        type="number"
+      >
+    </div>
+  </div>
+
+  <div class="field"  v-if="input.type == 'string' || input.type == 'color'">
+    <label v-bind:for="input.name" class="is-size-7">{{ input.name }}</label>
+    <div class="control">
+      <input 
+        v-model="input.value" 
+        v-bind:id="input.name"
+        v-bind:placeholder="input.placeholder ? input.placeholder : input.name"
+        v-on:change="changeHandler"
+        class="input"
+      >
+    </div>
+  </div>
+
+  <div class="field"  v-if="input.type == 'text'">
+    <label v-bind:for="input.name" class="is-size-7">{{ input.name }}</label>
+    <div class="control">
+      <textarea
+        v-model="input.value" 
+        v-bind:id="input.name"
+        v-bind:placeholder="input.placeholder ? input.placeholder : input.name"
+        v-on:change="changeHandler"
+        class="textarea" 
+        ></textarea>
+    </div>
+  </div>
+
+  <div class="field" v-if="input.type == 'checkbox' || input.type == 'bool'">
+    <div class="control">
+      <label class="checkbox is-size-7">
+        <input 
+          v-model="input.value"
+          v-bind:id="input.name"
+          v-on:change="changeHandler"
+          type="checkbox"
+        >
+        {{ input.name }}
+      </label>
+    </div>
+  </div>
+
+  <div class="field" v-if="input.type == 'categorical' || input.type == 'select'">
+    <label v-bind:for="input.name" class="is-size-7">{{ input.name }}</label>
+    <div class="control">
+      <div class="select is-fullwidth">
+        <select 
+          v-model="input.value" 
+          v-bind:id="input.name"
+          v-on:change="changeHandler"
+        >
+          <option 
+            v-for="(option, oi) in input.options" 
+          >{{ option }}</option>
+        </select>
+      </div>
+    </div>
+  </div>
+
+  <div class="field" v-if="input.type == 'file'">
+    <label v-bind:for="input.name" class="is-size-7">{{ input.name }}</label>
+    <div class="control">
+      <div class="file has-name is-fullwidth" v-bind:class="{ 'is-primary': !input.file }">
+        <label class="file-label">
+          <input
+            v-bind:id="input.name"
+            v-on:change="loadFile"
+  	  			class="file-input"
+  	  			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…
+            </span>
+          </span>
+          <span class="file-name">
+            <span v-if="input.file && input.file.name">{{ input.file.name }}</span>
+            <span v-else>No file selected</span>
+          </span>
+        </label>
+      </div>
+    </div>
+  </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>
+    </div>
+  </div>
+</template>
+
+<script>
+  export { component as default } from "./common-inputs.js"
+</script>

package/templates/bulma-output.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="card mb-5" v-if="output.value">
+    <header class="card-header">
+      <p class="card-header-title is-size-6" v-if="output.name">
+        {{ 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>
+      </p>
+    </header>
+    <div class="card-content">
+      <div class="content" v-if="output.type == 'svg'">
+        <div v-html="output.value"></div>
+      </div>
+      <div class="content" v-else-if="output.type == 'object'">
+        <json-viewer :value="output.value" copyable sort />
+      </div>
+      <div class="content" v-if="output.type == 'code'">
+        <pre>{{ output.value }}</pre>
+      </div>
+      <div class="content" v-else>
+        <pre>{{ output.value }}</pre>
+      </div>
+    </div>
+    <!-- 
+    <footer class="card-footer" v-if="output.filename">
+      <a v-on:click="save()" class="card-footer-item">Save</a>
+      <a v-on:click="copy()" class="card-footer-item">Copy</a>
+    </footer>
+    -->
+  </div>
+</template>
+
+<script>
+  export { component as default } from "./common-outputs.js"
+</script>
+

package/templates/common-inputs.js

@@ -0,0 +1,28 @@
+const FileReader = window['FileReader']
+
+const component = {
+  props: ['input'],
+  emits: ['inchange'],
+  methods: {
+    changeHandler () {
+      if (this.input.reactive) {
+        this.$emit('inchange')
+      }
+    },
+    loadFile (e) {
+      const reader = new FileReader()
+      this.input.file = e.target.files[0]
+      reader.readAsText(this.input.file)
+      reader.onload = () => {
+        this.input.value = reader.result
+        if (typeof this.input.cb !== 'undefined') {
+          this.input.cb.run()
+        } else if (this.input.reactive) {
+          this.$emit('inchange')
+        }
+      }
+    }
+  }
+}
+
+export { component }

package/templates/common-outputs.js

@@ -0,0 +1,39 @@
+import { saveAs } from 'file-saver'
+
+const Blob = window['Blob']
+
+function stringify (v) {
+  return typeof v === 'string'
+    ? v
+    : JSON.stringify(v)
+}
+
+const component = {
+  props: ['output'],
+  emits: ['notification'],
+  methods: {
+    save () {
+      // Prepare filename
+      let filename
+      if (this.output.filename) {
+        filename = this.output.filename
+      } else {
+        let name = this.output.name ? this.output.name : 'output'
+        let extension = this.output.type === 'svg' ? 'svg': 'txt'
+        filename = name + '.' + extension
+      }
+
+      // Prepare blob
+      let value = stringify(this.output.value)
+      let blob = new Blob([value], {type: 'text/plain;charset=utf-8'})
+      saveAs(blob, filename)
+    },
+    copy () {
+      let value = stringify(this.output.value)
+      navigator.clipboard.writeText(value)
+      this.$emit('notification', 'Copied')
+    }
+  },
+}
+
+export { component }