npm - @jseeio/jsee - Versions diffs - 0.2.1 - Mend

@jseeio/jsee 0.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (20) hide show

package/404.html +22 -0
package/README.md +60 -0
package/_config.yml +26 -0
package/dist/fb93af989abd7020d0c6.svg +5 -0
package/dist/jsee.js +1 -0
package/dist/jsee.runtime.js +1 -0
package/dist/port.js +1 -0
package/dist/port.runtime.js +1 -0
package/load.html +31 -0
package/main.js +449 -0
package/package.json +51 -0
package/src/app.js +188 -0
package/src/overlay.js +33 -0
package/src/worker.js +113 -0
package/templates/bulma-app.vue +65 -0
package/templates/bulma-input.vue +114 -0
package/templates/bulma-output.vue +38 -0
package/templates/common-inputs.js +28 -0
package/templates/common-outputs.js +39 -0
package/webpack.config.js +94 -0

package/load.html ADDED Viewed

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <title>JSEE Schema Loader</title>
+  </head>
+  <body>
+    <div id="jsee-container"></div>
+    <div id="txt-container">
+      <p>You can use this script for testing purposes. Placing your apps in the <b>apps</b> folder (e.g. <code>./apps/myapp</code> will make it possible to load it with <code>load.html?s=myapp</code> </p>
+    </div>
+    <script src="dist/jsee.js" type="text/javascript"></script>
+    <script>
+      var params = new URLSearchParams(window.location.search)
+      var schema = params.get('s')
+      if (schema) {
+        if (typeof schema === 'string') {
+          schema = schema.includes('/') ? schema : '/apps/' + schema + '/schema.json'
+        }
+        const env = new JSEE({
+          container: document.getElementById('jsee-container'),
+          schema: schema
+        })
+      } else {
+        document.getElementById('port-container').style.display = 'none'
+        document.getElementById('txt-container').style.display = 'block'
+      }
+    </script>
+  </body>
+</html>

package/main.js ADDED Viewed

@@ -0,0 +1,449 @@
+import { createVueApp } from './src/app'
+import Worker from './src/worker.js'
+const { Notyf } = require('notyf')
+const notyf = new Notyf({
+  types: [
+    {
+      type: 'success',
+      background: '#00d1b2',
+    },
+    {
+      type: 'error',
+      background: '#f14668',
+      duration: 2000,
+      dismissible: true
+    }
+  ]
+})
+// const createVueApp = require('./src/app')
+const Overlay = require('./src/overlay')
+require('notyf/notyf.min.css')
+const fetch = window['fetch']
+const Blob = window['Blob']
+function log () {
+  console.log(`[JSEE v${VERSION}]`, ...arguments)
+}
+// const Worker = window['Worker']
+// Deep clone a simple object
+function clone (obj) {
+  // return JSON.parse(JSON.stringify(obj))
+  return Object.assign({}, obj)
+}
+// 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)
+}
+// Return input value
+function getValue (input) {
+  if (input.type === 'group') {
+    const value = {}
+    input.elements.forEach(el => {
+      value[el.name] = getValue(el)
+    })
+    return value
+  } else {
+    return input.value
+  }
+}
+export default class JSEE {
+  constructor (params) {
+    log('Initializing JSEE with parameters: ', params)
+    params.schema = params.schema || params.config
+    this.params = params
+    this.__version__ = VERSION
+    // Get schema then initialize a model
+    if (params.schema) {
+      if (typeof params.schema === 'object') {
+        log('Received schema as object')
+        this.init(params.schema)
+      } else if (typeof params.schema === 'string') {
+        log('Received schema as string')
+        this.schemaUrl = params.schema.indexOf('json') ? params.schema : params.schema + '.json'
+        fetch(this.schemaUrl)
+          .then(res => res.json())
+          .then(res => {
+            log('Loaded schema from url')
+            this.init(res)
+          })
+          .catch((err) => {
+            console.error(err)
+          })
+      }
+    }
+  }
+  notify (txt) {
+    notyf.success(txt)
+  }
+  // Initialize model from schema
+  init (schema) {
+    log('Initializing schema', schema)
+    // Convert JS code to string
+    if (schema.model.code && (typeof schema.model.code !== 'string')) {
+      log('Convert code in schema to string')
+      schema.model.code = schema.model.code.toString()
+    }
+    // Update model URL if needed
+    if (schema.model.url && !schema.model.url.includes('/') && this.schemaUrl && this.schemaUrl.includes('/')) {
+      let oldModelUrl = schema.model.url
+      log('Schema URL:', this.schemaUrl)
+      schema.model.url = window.location.protocol + '//' + window.location.host + this.schemaUrl.split('/').slice(0, -1).join('/') + '/' + oldModelUrl
+      log('Changed the old model URL to absolute one:', oldModelUrl, schema.model.url)
+    }
+    // Check for worker flag
+    if (typeof schema.model.worker === 'undefined') {
+      schema.model.worker = true
+    }
+    // Check if name is present, if not - get name from the file
+    if (typeof schema.model.name === 'undefined') {
+      // Two options here
+      if (schema.model.url) {
+        // 1. Get the name from the file name
+        schema.model.name = schema.model.url.split('/').pop().split('.')[0]
+        log('Use name from url: ', schema.model.name)
+      } else if (schema.model.code) {
+        // 2. Get the name from the url
+        schema.model.name = schema.model.code.name
+        log('Use name from code: ', schema.model.name)
+      }
+    }
+    this.schema = clone(schema)
+    // Init Vue app
+    this.app = createVueApp(this, this.schema, (container) => {
+      // Called when the app is mounted
+      // FYI "this" here refers to port object
+      this.outputsContainer = container.querySelector('#outputs')
+      this.inputsContainer = container.querySelector('#inputs')
+      this.modelContainer = container.querySelector('#model')
+      // Init overlay
+      this.overlay = new Overlay(this.inputsContainer)
+    })
+    this.data = this.app.$data
+    // Init Model
+    // ----------
+    if (this.schema.model.type === 'py') {
+      // Add loading indicator
+      this.overlay.show()
+      let script = document.createElement('script')
+      script.src = 'https://cdn.jsdelivr.net/pyodide/v0.18.1/full/pyodide.js'
+      script.onload = async () => {
+        this.pyodide = await loadPyodide({ indexURL : "https://cdn.jsdelivr.net/pyodide/v0.18.1/full/" });
+        notyf.success('Loaded: Python')
+        const resRaw = await fetch(this.schema.model.url)
+        const res = await resRaw.text()
+        this.pymodel = res
+        log('Loaded python code:', res)
+        // Check if micropip is used
+        if (res.includes('micropip')) {
+          await this.pyodide.loadPackage('micropip')
+          log('Loaded micropip')
+        }
+        // Import packages if defined
+        if ('packages' in this.schema.model) {
+          await this.pyodide.loadPackage(this.schema.model.packages)
+          log('Loaded packages from schema')
+        } else {
+          await this.pyodide.loadPackagesFromImports(res)
+          log('Loaded packages from Python code')
+        }
+        this.overlay.hide()
+      }
+      document.head.appendChild(script)
+    } else if (['function', 'class', 'async-init', 'async-function'].includes(this.schema.model.type)) {
+      // Initialize worker with the model
+      if (this.schema.model.worker) {
+        // this.worker = new Worker(new URL('./src/worker.js', import.meta.url))
+        this.worker = new Worker()
+        if (this.schema.model.url) {
+          fetch(this.schema.model.url)
+            .then(res => res.text())
+            .then(res => {
+              log('Loaded js code for worker')
+              this.schema.model.code = res
+              this.worker.postMessage(this.schema.model)
+            })
+        } else if (typeof this.schema.model.code !== 'undefined') {
+          this.worker.postMessage(this.schema.model)
+        } else {
+          notyf.error('No code provided')
+        }
+        this.worker.onmessage = (e) => {
+          this.overlay.hide()
+          const res = e.data
+          if ((typeof res === 'object') && (res._status)) {
+            switch (res._status) {
+              case 'loaded':
+                notyf.success('Loaded: JS model (in worker)')
+                break
+              case 'log':
+                log(...res._log)
+                break
+            }
+          } else {
+            log('Response from worker:', res)
+            this.output(res)
+          }
+        }
+        this.worker.onerror = (e) => {
+          this.overlay.hide()
+          notyf.error(e.message)
+          log('Error from worker:', e)
+        }
+      } else {
+        // Initialize model in main window
+        log('Init model in window')
+        let script = document.createElement('script')
+        script.src = this.schema.model.url
+        script.onload = () => {
+          notyf.success('Loaded: JS model')
+          this.overlay.hide()
+          log('Loaded JS model in main window')
+          // Initializing the model (same in worker)
+          if (this.schema.model.type === 'class') {
+            log('Init class')
+            const modelClass = new window[this.schema.model.name]()
+            this.modelFunc = (...a) => {
+              return modelClass[this.schema.model.method || 'predict'](...a)
+            }
+          } else if (this.schema.model.type === 'async-init') {
+            log('Init function with promise')
+            window[this.schema.model.name]().then((m) => {
+              log('Async init resolved: ', m)
+              this.modelFunc = m
+            })
+          } else {
+            log('Init function')
+            this.modelFunc = window[this.schema.model.name]
+          }
+        }
+        document.head.appendChild(script)
+      }
+    } else if (this.schema.model.type === 'tf') {
+      // Initialize TF
+      let script = document.createElement('script')
+      script.src = 'dist/tf.min.js'
+      script.onload = () => {
+        log('Loaded TF.js')
+        this.overlay.hide()
+        window['tf'].loadLayersModel(this.schema.model.url).then(res => {
+          log('Loaded Tensorflow model')
+        })
+      }
+      document.head.appendChild(script)
+    } else if (this.schema.model.type === 'get') {
+      this.overlay.hide()
+      this.modelFunc = (data) => {
+        const query = new window['URLSearchParams'](data).toString()
+        log('Generated query string:', query)
+        const resPromise = fetch(this.schema.model.url +'?' + query)
+          .then(response => response.json())
+        return resPromise
+      }
+    }
+    // Init render
+    // -----------
+    if (this.schema.render && this.schema.render.url) {
+      log('Init render in window')
+      let script = document.createElement('script')
+      script.src = this.schema.render.url
+      script.onload = () => {
+        notyf.success('Loaded: JS render')
+        log('Loaded JS render')
+        // Initializing the render (same in worker)
+        if (this.schema.render.type === 'class') {
+          log('Init render as class')
+          const renderClass = new window[this.schema.render.name]()
+          this.renderFunc = (...a) => {
+            return renderClass[this.schema.render.method || 'render'](...a)
+          }
+        } else if (this.schema.render.type === 'async-init') {
+          log('Init render function with promise')
+          window[this.schema.render.name]().then((m) => {
+            log('Async rebder init resolved: ', m)
+            this.renderFunc = m
+          })
+        } else {
+          log('Init render as function')
+          this.renderFunc = window[this.schema.render.name]
+        }
+      }
+      document.head.appendChild(script)
+    }
+  }
+  run () {
+    const schema = this.schema
+    const data = this.data
+    log('Running the model...')
+    // Collect input values
+    let inputValues
+    if (schema.model && schema.model.container && schema.model.container === 'args') {
+      log('Pass inputs as function arguments')
+      inputValues = data.inputs.map(input => getValue(input))
+    } else {
+      log('Pass inputs in an object')
+      inputValues = {}
+      data.inputs.forEach(input => {
+        if (input.name) {
+          inputValues[input.name] = getValue(input)
+        }
+      })
+    }
+    log('Input values:', inputValues)
+    // We have all input values here, pass them to worker, window.modelFunc or tf
+    if (!schema.model.autorun) {
+      this.overlay.show()
+    }
+    switch (schema.model.type) {
+      case 'tf':
+        break
+      case 'py':
+        data.inputs.forEach(input => {
+          this.pyodide.globals.set(input.name, input.value);
+        })
+        this.pyodide.runPythonAsync(this.pymodel, () => {})
+          .then((res) => {
+            if (schema.outputs && schema.outputs.length) {
+              const resultObj = {}
+              schema.outputs.forEach(output => {
+                resultObj[output.name] = this.pyodide.globals.get(output.name).toJs()
+              })
+              this.output(resultObj)
+            } else {
+              this.output(res)
+            }
+          })
+          .catch((err) => {
+            log(err)
+            window['M'].toast({html: 'Error in code'})
+          })
+        break
+      case 'class':
+      case 'function':
+      case 'async-init':
+      case 'async-function':
+      case 'get':
+        if (this.schema.model.worker) {
+          this.worker.postMessage(inputValues)
+        } else {
+          // Run in main window
+          var res
+          if (this.schema.model.container === 'args') {
+            res = this.modelFunc.apply(null, inputValues)
+          } else {
+            log('Applying inputs as object')
+            res = this.modelFunc(inputValues)
+          }
+          log('modelFunc results:', res)
+          Promise.resolve(res).then(r => { this.output(r) })
+        }
+        break
+      case 'api':
+        break
+    }
+  }
+  output (res) {
+    // TODO: Think about all edge cases
+    // * No output field, but reactivity
+    this.overlay.hide()
+    if (typeof res === 'undefined') {
+      return
+    }
+    log('Got output results of type:', typeof res)
+    // Process results (res)
+    const inputNames = this.schema.inputs.map(i => i.name)
+    if (isObject(res) && Object.keys(res).every(key => inputNames.includes(key))) {
+      // Update inputs from results
+      log('Updating inputs:', Object.keys(res))
+      this.data.inputs.forEach((input, i) => {
+        if (input.name && (typeof res[input.name] !== 'undefined')) {
+          log('Updating input: ', input.name, 'with data:', res[input.name])
+          const r = res[input.name]
+          if (typeof r === 'object') {
+            Object.keys(r).forEach(k => {
+              input[k] = r[k]
+            })
+          } else {
+            input.value = r
+          }
+        }
+      })
+    } else if (this.renderFunc) {
+      // Pass results to a custom render function
+      log('Calling a render function...')
+      this.renderFunc(res)
+    } else if (Array.isArray(res) && res.length) {
+      // Result is array
+      if (this.data.outputs && this.data.outputs.length) {
+        // We have outputs defined
+        if (this.data.outputs.length === res.length) {
+          // Same length
+          this.data.outputs.forEach((output, i) => {
+            output.value = res[i]
+          })
+        } else {
+          // Different length
+          this.data.outputs[0].value = res
+        }
+      } else {
+        // Outputs are not defined
+        this.data.outputs = [{
+          'type': 'array',
+          'value': res
+        }]
+      }
+    } else if (typeof res === 'object') {
+      if (this.data.outputs && this.data.outputs.length) {
+        this.data.outputs.forEach((output, i) => {
+          if (output.name && (typeof res[output.name] !== 'undefined')) {
+            log('Updating output: ', output.name)
+            output.value = res[output.name]
+          }
+        })
+      } else {
+        this.data.outputs = [{
+          'type': 'object',
+          'value': res
+        }]
+      }
+    } else if (this.schema.outputs && this.schema.outputs.length === 1) {
+      // One output value passed as raw js object
+      this.data.outputs[0].value = res
+    } else {
+      this.data.outputs = [{
+        'type': typeof res,
+        'value': res
+      }]
+    }
+  }
+}

package/package.json ADDED Viewed

@@ -0,0 +1,51 @@
+{
+  "name": "@jseeio/jsee",
+  "version": "0.2.1",
+  "description": "",
+  "main": "dist/jsee.js",
+  "private": false,
+  "scripts": {
+    "build-dev": "webpack --mode=development --progress",
+    "build": "webpack --mode=production --progress && npx webpack --mode=production --progress --env RUNTIME",
+    "watch": "nodemon --watch . --ignore dist --ext vue,js,css,html --exec 'npm run build-dev'",
+    "prepublishOnly": "npm run build",
+    "test": "tape test.js | faucet"
+  },
+  "author": "Anton Zemlyansky",
+  "license": "MIT",
+  "dependencies": {
+    "@mdi/font": "^6.5.95",
+    "bulma": "^0.9.3",
+    "csv-parse": "^4.6.1",
+    "file-saver": "^2.0.2",
+    "filtrex": "^2.2.3",
+    "notyf": "^3.10.0",
+    "vue": "^3.2.23",
+    "vue-style-loader": "^4.1.3",
+    "vue3-json-viewer": "^1.0.4",
+    "vuex": "^4.0.2"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.16.5",
+    "@babel/plugin-transform-runtime": "^7.4.4",
+    "@babel/preset-env": "^7.16.5",
+    "babel-loader": "^8.2.3",
+    "css-loader": "^6.5.1",
+    "node-sass": "^7.0.0",
+    "nodemon": "^2.0.15",
+    "puppeteer": "^1.12.2",
+    "sass-loader": "^12.4.0",
+    "style-loader": "^3.3.1",
+    "tape": "^4.9.1",
+    "terser-webpack-plugin": "^5.3.0",
+    "uglify-es": "^3.3.9",
+    "vue-loader": "^17.0.0",
+    "vue-template-compiler": "^2.6.14",
+    "webpack": "^5.65.0",
+    "webpack-cli": "^4.9.1",
+    "worker-loader": "^3.0.8"
+  },
+  "resolutions": {
+    "ansi-regex": "5.0.1"
+  }
+}