@jseeio/jsee 0.2.3 → 0.2.4

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/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 }
+  ]
+}
+

package/test.js

@@ -0,0 +1,121 @@
+require('expect-puppeteer')
+
+page.setDefaultTimeout(1000)
+
+const port = 8080
+const urlSchema = (name) => `http://localhost:${port}/load.html?s=/test/${name}.schema.json`
+const urlHTML = (name) => `http://localhost:${port}/test/${name}.html`
+const urlQuery = (schema) => `http://localhost:${port}/load.html?s=${JSON.stringify(schema)}`
+
+describe('Initial test', () => {
+  beforeAll(async () => {
+    await page.goto(urlSchema('sum'))
+  })
+  test('Title', async () => {
+    await expect(page).toMatch('title')
+  })
+  test('Description', async () => {
+    await expect(page).toMatch('description')
+  })
+  test('Run button is active', async () => {
+    await expect(page).toClick('button', { text: 'Run' })
+  })
+  test('Default result is right', async () => {
+    await expect(page).toMatch('142')
+  })
+  test('Changing inputs', async () => {
+    await expect(page).toFill('#a', '200')
+    await expect(page).toClick('button', { text: 'Run' })
+    await expect(page).toMatch('242')
+    // await jestPuppeteer.debug()
+  })
+})
+
+
+describe('Initial test (worker)', () => {
+  beforeAll(async () => {
+    await page.goto(urlSchema('sumw'))
+  })
+  test('Result is right', async () => {
+    await expect(page).toFill('#a', '8')
+    await expect(page).toFill('#b', '7')
+    await expect(page).toClick('button', { text: 'Run' })
+    await expect(page).toMatch('15')
+  })
+})
+
+describe('Some edge cases', () => {
+  const schema = {
+    'model': {
+      'code': 'function (a, b) { return a / b }', // TODO: check '+'
+    }
+  }
+  test('Minimal', async () => {
+    schema.model.worker = false
+    await page.goto(urlQuery(schema))
+    await expect(page).toFill('#a', '100')
+    await expect(page).toFill('#b', '4')
+    await expect(page).toClick('button', { text: 'Run' })
+    await expect(page).toMatch('25')
+  })
+})
+
+describe('Load code directly', () => {
+  test('Window', async () => {
+    await page.goto(urlHTML('code'))
+    await expect(page).toFill('#a', '8')
+    await expect(page).toFill('#b', '7')
+    await expect(page).toClick('button', { text: 'Run' })
+    await expect(page).toMatch('15')
+  })
+  test('Window (string with eval)', async () => {
+    await page.goto(urlHTML('string'))
+    await expect(page).toFill('#a', '8')
+    await expect(page).toFill('#b', '7')
+    await expect(page).toClick('button', { text: 'Run' })
+    await expect(page).toMatch('15')
+  })
+  test('Worker', async () => {
+    await page.goto(urlHTML('codew'))
+    await expect(page).toFill('#a', '8')
+    await expect(page).toFill('#b', '7')
+    await expect(page).toClick('button', { text: 'Run' })
+    await expect(page).toMatch('15')
+  })
+  test('Worker (string)', async () => {
+    await page.goto(urlHTML('stringw'))
+    await expect(page).toFill('#a', '8')
+    await expect(page).toFill('#b', '7')
+    await expect(page).toClick('button', { text: 'Run' })
+    await expect(page).toMatch('15')
+  })
+})
+
+describe('Classes', () => {
+  const schema = {
+    'model': {
+      'name': 'Doubler',
+      'method': 'double',
+      'type': 'class',
+      'container': 'args',
+      'url': '/test/example-class.js',
+    },
+    'inputs': [
+      { 'name': 'b', 'type': 'int', 'default': 100 }
+    ]
+  }
+
+  test('Window', async () => {
+    schema.model.worker = false
+    await page.goto(urlQuery(schema))
+    await expect(page).toClick('button', { text: 'Run' })
+    await expect(page).toMatch('200')
+  })
+
+  test('Worker', async () => {
+    schema.model.worker = true
+    await page.goto(urlQuery(schema))
+    await expect(page).toClick('button', { text: 'Run' })
+    await expect(page).toMatch('200')
+  })
+})

package/webpack.config.js

@@ -87,7 +87,9 @@ module.exports = (env) => {
           },
         }
       })],
-    }
+    },
+    // Source map
+    devtool: 'eval'
   }
 
   return config