@jseeio/jsee 0.4.1 → 0.8.0

package/src/extended-imports.js

@@ -0,0 +1,11 @@
+// Extended bundle imports — only loaded when EXTENDED flag is true.
+// These libraries are heavy and not included in the core bundle.
+// Users on the core bundle can load them manually via schema `imports`
+// and they'll be detected via window globals.
+
+window.Plot = require('@observablehq/plot')
+window.THREE = require('three')
+window.L = require('leaflet')
+
+// Leaflet CSS
+require('leaflet/dist/leaflet.css')

package/src/main.js

@@ -25,6 +25,10 @@ const Overlay = require('./overlay')
 
 require('notyf/notyf.min.css')
 
+if (typeof EXTENDED !== 'undefined' && EXTENDED) {
+  require('./extended-imports')
+}
+
 const fetch = window['fetch']
 const Blob = window['Blob']
 
@@ -124,10 +128,6 @@ function collectStreamInputConfig (inputs, config={}) {
   return config
 }
 
-function getFunctionContainer (target) {
-  // Check if the number of parameters is > 1, then 'args'
-}
-
 export default class JSEE {
   constructor (params, alt1, alt2) {
     // Check if JSEE was initialized with args rather than with a params object
@@ -152,6 +152,12 @@ export default class JSEE {
     this.__version__ = VERSION
     this.cancelled = false
     this._cancelWorkerRun = null
+    this._rejectRun = null
+    this._rejectWorkerRun = null
+    this._workers = []
+    this._pendingRun = null
+    this._runToken = null
+    this._needsModelReinit = false
 
     // Check if schema is provided
     if (typeof this.schema === 'undefined') {
@@ -171,7 +177,7 @@ export default class JSEE {
       }
     }
 
-    this.init()
+    this._initPromise = this.init()
   }
 
   log (...args) {
@@ -184,16 +190,66 @@ export default class JSEE {
 
   cancelCurrentRun () {
     log('Stopping current run')
+    const cancelError = new Error('Cancelled')
     this.cancelled = true
+    this._pendingRun = null
+    this._runToken = {}
+    if (typeof this._rejectRun === 'function') {
+      this._rejectRun(cancelError)
+      this._rejectRun = null
+    }
     if (typeof this._cancelWorkerRun === 'function') {
       this._cancelWorkerRun()
     }
+    // Reject the in-flight worker promise so run() stops awaiting
+    if (typeof this._rejectWorkerRun === 'function') {
+      this._rejectWorkerRun(cancelError)
+      this._rejectWorkerRun = null
+    }
+    // Terminate all workers to force-stop blocking WASM computations
+    const hadWorkers = this._workers.length > 0
+    this._workers.forEach(w => {
+      try { w.terminate() } catch (e) { /* ignore */ }
+    })
+    this._workers = []
+    this._cancelWorkerRun = null
+    // Force model re-init on next run only when worker-backed state was torn down.
+    if (hadWorkers) this._needsModelReinit = true
   }
 
   isCancelled () {
     return this.cancelled === true
   }
 
+  destroy () {
+    log('Destroying JSEE instance')
+    // Cancel any running computation
+    this.cancelCurrentRun()
+    // Terminate all workers
+    this._workers.forEach(w => {
+      try { w.terminate() } catch (e) { /* ignore */ }
+    })
+    this._workers = []
+    // Unmount Vue app
+    if (this.app && this.app.__vueApp) {
+      this.app.__vueApp.unmount()
+    }
+    // Clean up overlay
+    if (this.overlay) {
+      this.overlay.hide()
+    }
+    // Remove progress bar
+    const progress = document.querySelector('#progress')
+    if (progress) progress.remove()
+    // Null out references
+    this.app = null
+    this.data = null
+    this.pipeline = null
+    this.model = null
+    this.schema = null
+    this._cancelWorkerRun = null
+  }
+
   progress (i) {
     const progressState = utils.getProgressState(i)
     if (!progressState) {
@@ -234,6 +290,11 @@ export default class JSEE {
       progress.style.transform = 'none'
       progress.style.width = `${progressState.value}%`
     }
+
+    // Overlay progress bar
+    if (this.overlay) {
+      this.overlay.setProgress(progressState)
+    }
   }
 
   async init () {
@@ -244,6 +305,12 @@ export default class JSEE {
     this.streamInputConfig = collectStreamInputConfig(this.schema.inputs)
     await this.initVue() // Inits: this.app, this.data
     await this.initPipeline() // Inits: this.pipeline (function)
+
+    // Request notification permission if schema opts in
+    if (this.schema.notify && typeof Notification !== 'undefined' && Notification.permission === 'default') {
+      Notification.requestPermission()
+    }
+
     if (this.schema.autorun || this.schema.inputs.some(input => input.disabled && input.reactive)) {
       // 1. If autorun is enabled in the schema, run the model immediately
       // 2. Server-side inputs: If there are inputs with disabled and reactive flags
@@ -335,10 +402,10 @@ export default class JSEE {
       }
     })
 
-    // Check if model is empty
+    // Check if model is empty — allow identity pipeline (no model)
     if (this.model.length === 0) {
-      notyf.error('Model is in a wrong format')
-      throw new Error(`Model is in a wrong format: ${this.schema.model}`)
+      log('No model defined, using identity pipeline')
+      return
     }
 
     // Put worker and imports inside model blocks
@@ -440,8 +507,12 @@ export default class JSEE {
     // Relies on model.code
     // So run after possible fetching
     if (typeof this.schema.inputs === 'undefined') {
-      this.model[0].container = 'args'
-      this.schema.inputs = getInputs(this.model[0])
+      if (this.model.length > 0) {
+        this.model[0].container = 'args'
+        this.schema.inputs = getInputs(this.model[0])
+      } else {
+        this.schema.inputs = []
+      }
     }
 
     // Read URL params, e.g. ?input1=1&input2=2
@@ -482,14 +553,6 @@ export default class JSEE {
           this.modelContainer = container.querySelector('#model')
           // Init overlay
           this.overlay = new Overlay(this.inputsContainer ? this.inputsContainer : this.outputsContainer)
-          // Stop button is shown only while a run is active
-          this.stopElement = document.createElement('button')
-          this.stopElement.innerHTML = 'Stop'
-          this.stopElement.style = 'display: none; margin-left: 12px; background: white; color: #333; border: 1px solid #DDD; padding: 6px 10px; border-radius: 5px; cursor: pointer;'
-          this.stopElement.addEventListener('click', () => {
-            this.cancelCurrentRun()
-          })
-          this.overlay.element.appendChild(this.stopElement)
           resolve()
         }, log)
         this.data = this.app.$data
@@ -576,11 +639,17 @@ export default class JSEE {
       notyf.success('Pipeline initialized')
       this.overlay.hide()
     }
+
+    if (this.model.length === 0) {
+      log('Identity pipeline ready (no model)')
+      this.overlay.hide()
+    }
   }
 
   async initWorker (model) {
     // Init worker
     const worker = new Worker()
+    this._workers.push(worker)
 
     // Init worker with the model
     if (typeof model.code === 'function') {
@@ -605,6 +674,7 @@ export default class JSEE {
         : utils.toWorkerSerializable(inputs)
 
       const workerPromise = new Promise((resolve, reject) => {
+        this._rejectWorkerRun = reject
         worker.onmessage = (e) => {
           const res = e.data
           if ((typeof res === 'object') && (res._status)) {
@@ -628,6 +698,12 @@ export default class JSEE {
                 reject(res._error)
                 break
             }
+          } else if ((typeof res === 'object') && res._partial) {
+            // Partial/streaming result: update outputs without resolving the promise
+            log('Partial result from worker:', Object.keys(res))
+            const partial = { ...res }
+            delete partial._partial
+            this.output(partial)
           } else {
             log('Response from worker:', res)
             this.progress(0)
@@ -641,7 +717,13 @@ export default class JSEE {
           reject(e)
         }
         try {
-          worker.postMessage(payload)
+          // Transfer ArrayBuffers for zero-copy WASM passing
+          const transferables = utils.collectTransferables(payload)
+          if (transferables.length) {
+            worker.postMessage(payload, transferables)
+          } else {
+            worker.postMessage(payload)
+          }
         } catch (error) {
           const hasBinaryPayload = utils.containsBinaryPayload(payload)
           if (hasBinaryPayload) {
@@ -688,7 +770,7 @@ export default class JSEE {
     await utils.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.url)
+      await pyodide.loadPackage(model.imports.map(i => i.url))
     } else {
       await pyodide.loadPackagesFromImports(model.code)
     }
@@ -747,8 +829,11 @@ export default class JSEE {
       // Worker:
       this.worker.postMessage(model)
     } else {
-      // Main:
-      return utils.getModelFuncAPI(model, log)
+      // Main: pass onChunk callback for SSE streaming
+      const onChunk = model.stream ? (chunk) => {
+        this.output(chunk)
+      } : undefined
+      return utils.getModelFuncAPI(model, log, onChunk)
     }
   }
 
@@ -780,10 +865,18 @@ export default class JSEE {
       return
     }
 
+    // Re-init model if workers were terminated by cancelCurrentRun
+    if (this._needsModelReinit) {
+      this._needsModelReinit = false
+      await this.initModel()
+    }
+
     const schema = this.schema
     const data = this.data
     this.running = true
     this.cancelled = false
+    let runSucceeded = false
+    let rejectCurrentRun = null
     // Run token to detect stale results when worker.onmessage gets rebound
     const runToken = this._runToken = {}
 
@@ -795,19 +888,54 @@ export default class JSEE {
         // Skip buttons
         if (input.name && !(input.type == 'action' || input.type == 'button')) {
           inputValues[input.name] = getValue(input)
+        } else if (input.type === 'group' && !input.name && input.elements) {
+          // Unnamed groups (e.g. tabs layout): flatten children into top-level
+          input.elements.forEach(el => {
+            if (el.name) {
+              inputValues[el.name] = getValue(el)
+            }
+          })
+        }
+      })
+      // For folder inputs with select mode, filter to selected files
+      data.inputs.forEach(input => {
+        if (input.type === 'folder' && input.select && Array.isArray(inputValues[input.name])) {
+          const selected = inputValues[input.name].filter(f => f.selected)
+          inputValues[input.name] = selected
         }
       })
+
       // Add caller to input values so we can change model behavior based on it
       inputValues.caller = caller
 
+      // Chat mode: inject history and capture user message
+      const chatOutput = this.data.outputs
+        ? this.data.outputs.find(o => o.type === 'chat')
+        : null
+      if (chatOutput) {
+        inputValues.history = chatOutput._messages || []
+        this._lastChatMessage = inputValues.message || ''
+      }
+
+      // Convert declared arrayBuffer inputs to typed arrays for WASM efficiency
+      inputValues = utils.wrapTypedArrayInputs(inputValues, schema.inputs)
+
       log('Input values:', inputValues)
       this.overlay.show()
-      if (this.stopElement) {
-        this.stopElement.style.display = 'inline-block'
-      }
+      if (this.data) this.data.running = true
 
       // Run pipeline
-      const results = await this.pipeline(inputValues)
+      const cancelPromise = new Promise((_, reject) => {
+        rejectCurrentRun = reject
+        this._rejectRun = reject
+      })
+      const pipelinePromise = Promise.resolve().then(() => this.pipeline(inputValues))
+      pipelinePromise.catch(err => {
+        if (this.cancelled || this._runToken !== runToken) {
+          log('Cancelled pipeline settled:', err)
+        }
+      })
+      const results = await Promise.race([pipelinePromise, cancelPromise])
 
       // Drop stale results if a newer run started (e.g. worker.onmessage rebound race)
       if (this._runToken !== runToken) return
@@ -815,6 +943,18 @@ export default class JSEE {
       // Output results
       this.output(results)
 
+      // Chat mode: clear the text input for next message
+      if (chatOutput && this._lastChatMessage) {
+        data.inputs.forEach(input => {
+          if (input.name === 'message' || input.type === 'text') {
+            input.value = ''
+          }
+        })
+        this._lastChatMessage = null
+      }
+
+      runSucceeded = true
+
       // Check if interval is defined
       if (utils.shouldContinueInterval(schema.interval, this.running, this.isCancelled(), caller)) {
         log('Interval is defined:', schema.interval)
@@ -822,16 +962,29 @@ export default class JSEE {
         await this.run(caller)
       }
     } catch (err) {
-      // Surface pipeline/worker errors so they don't silently swallow failures
-      log('Pipeline error:', err)
-      notyf.error(typeof err === 'string' ? err : (err.message || 'Pipeline error'))
+      // Silently ignore cancellation errors from cancelCurrentRun()
+      if (this.cancelled && err && err.message === 'Cancelled') {
+        log('Run cancelled by user')
+      } else {
+        // Surface pipeline/worker errors so they don't silently swallow failures
+        log('Pipeline error:', err)
+        notyf.error(typeof err === 'string' ? err : (err.message || 'Pipeline error'))
+      }
     } finally {
+      if (this._rejectRun === rejectCurrentRun) {
+        this._rejectRun = null
+      }
       // Always clean up UI state so overlay and running flag don't get stuck
       this.overlay.hide()
-      if (this.stopElement) {
-        this.stopElement.style.display = 'none'
-      }
       this.running = false
+      if (this.data) this.data.running = false
+
+      // Notify user when tab is hidden and run succeeded
+      if (runSucceeded && schema.notify && document.hidden
+          && typeof Notification !== 'undefined' && Notification.permission === 'granted') {
+        const title = this.model[0] && (this.model[0].title || this.model[0].name) || 'JSEE'
+        new Notification('Run complete', { body: title })
+      }
 
       // Drain queued run if a manual click arrived while we were running
       if (this._pendingRun) {
@@ -847,6 +1000,43 @@ export default class JSEE {
     await utils.delay(1)
   }
 
+  _mapResultsToOutputs (outputs, res) {
+    outputs.forEach(output => {
+      if (output.type === 'group' && output.elements) {
+        this._mapResultsToOutputs(output.elements, res)
+      } else {
+        const r = res[output.name]
+          || res[utils.sanitizeName(output.name)]
+          || (output.alias && res[output.alias])
+        if (typeof r !== 'undefined') {
+          log(`Updating output: ${output.name} with data: ${typeof r}`)
+          // Convert large base64 image data URLs to blob URLs for efficiency
+          if (output.type === 'image' && typeof r === 'string'
+              && r.startsWith('data:') && r.length > 50000) {
+            // Revoke previous blob URL
+            if (output._objectUrl) {
+              URL.revokeObjectURL(output._objectUrl)
+            }
+            try {
+              const [header, b64] = r.split(',')
+              const mime = header.match(/data:([^;]+)/)[1]
+              const binary = atob(b64)
+              const bytes = new Uint8Array(binary.length)
+              for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i)
+              const blob = new Blob([bytes], { type: mime })
+              output._objectUrl = URL.createObjectURL(blob)
+              output.value = output._objectUrl
+            } catch (e) {
+              output.value = r
+            }
+          } else {
+            output.value = r
+          }
+        }
+      }
+    })
+  }
+
   output (res) {
     // Edge case: no output field with reactivity is handled — undefined results exit early
 
@@ -856,6 +1046,14 @@ export default class JSEE {
 
     log('[Output] Got output results of type:', typeof res)
 
+    // Normalize primitive results to {result: value} for consistent rendering
+    // regardless of execution mode (browser worker vs server POST)
+    if ((typeof res !== 'object' || res === null) && !Array.isArray(res)) {
+      if (!(this.schema.outputs && this.schema.outputs.length)) {
+        res = { result: res }
+      }
+    }
+
     const inputNames = this.schema.inputs ? this.schema.inputs.map(i => i.name) : []
     log('Input names:', inputNames)
 
@@ -868,7 +1066,35 @@ export default class JSEE {
       delete res._progress
       log('Processing results as an object:', res)
 
-      if (Object.keys(res).every(key => inputNames.includes(key))) {
+      // Chat mode: accumulate messages instead of replacing output
+      if (this.data.outputs) {
+        this.data.outputs.forEach(output => {
+          if (output.type !== 'chat' || typeof res[output.name] === 'undefined') return
+          if (!output._messages) output._messages = []
+          if (this._lastChatMessage) {
+            output._messages.push({ role: 'user', content: this._lastChatMessage })
+          }
+          const response = res[output.name]
+          if (typeof response === 'string') {
+            output._messages.push({ role: 'assistant', content: response })
+          } else if (isObject(response) && response.content) {
+            output._messages.push({ role: response.role || 'assistant', content: response.content })
+          }
+          delete res[output.name]
+        })
+      }
+
+      if (this.model.length === 0) {
+        // Identity mode: all keys become outputs, auto-detect types
+        log('Identity mode: creating outputs from all result keys')
+        this.data.outputs = Object.keys(res)
+          .filter(key => key !== 'caller')
+          .map(key => ({
+            name: key,
+            type: utils.inferOutputType(key, res[key]),
+            value: res[key]
+          }))
+      } else if (Object.keys(res).every(key => inputNames.includes(key))) {
         // Update input fields from results
         // e.g. loading a csv file and updating list of target variables
         // This will be dynamically updated in the UI
@@ -889,16 +1115,7 @@ export default class JSEE {
       } else if (this.data.outputs && this.data.outputs.length) {
         // Update outputs from results
         log('Updating outputs from results with keys:', Object.keys(res))
-        this.data.outputs.forEach((output, i) => {
-          // try output.name, sanitized output.name, output.alias
-          const r = res[output.name] 
-            || res[utils.sanitizeName(output.name)] 
-            || (output.alias && res[output.alias])
-          if (typeof r !== 'undefined') {
-            log(`Updating output: ${output.name} with data: ${typeof r}`)
-            output.value = r
-          }
-        })
+        this._mapResultsToOutputs(this.data.outputs, res)
       } else if (!this.schema.render && !this.schema.view) {
         // There's no render or view defined in the schema, also:
         // No outputs defined, create outputs from results
@@ -909,8 +1126,7 @@ export default class JSEE {
           .map(key => {
             return {
               'name': key,
-              // typeof returns 'object' for arrays; distinguish them for proper rendering
-              'type': Array.isArray(res[key]) ? 'array' : typeof res[key],
+              'type': utils.inferOutputType(key, res[key]),
               'value': res[key]
             }
           })
@@ -982,6 +1198,9 @@ export default class JSEE {
       console.error('Error removing GA script tags:', error.message)
     }
 
+    // Remove serve bar (bundled HTML is standalone, no server)
+    try { clone.getElementById('jsee-serve-bar')?.remove() } catch (e) {}
+
     console.log('Caching schema:', this.schema)
     storeInHiddenElement(this.schemaUrl, this.schema)
 

package/src/overlay.js

@@ -2,8 +2,15 @@ class Overlay {
   constructor (parent) {
     this.element = document.createElement('div')
     this.element.id = 'overlay'
-    this.element.innerHTML = `...`
+    this.element.innerHTML = ''
     parent.appendChild(this.element)
+
+    this.progressBar = document.createElement('div')
+    this.progressBar.style.cssText = 'display:none; width:200px; height:6px; background:#e0e0e0; border-radius:3px; overflow:hidden;'
+    this.progressFill = document.createElement('div')
+    this.progressFill.style.cssText = 'width:0%; height:100%; background:#00d1b2; border-radius:3px; transition:width 0.2s;'
+    this.progressBar.appendChild(this.progressFill)
+    this.element.appendChild(this.progressBar)
   }
 
   show () {
@@ -12,6 +19,24 @@ class Overlay {
 
   hide () {
     this.element.style.display = 'none'
+    this.setProgress(null)
+  }
+
+  setProgress (state) {
+    if (!state) {
+      this.progressBar.style.display = 'none'
+      this.progressFill.style.width = '0%'
+      this.progressFill.style.animation = 'none'
+      return
+    }
+    this.progressBar.style.display = 'block'
+    if (state.mode === 'indeterminate') {
+      this.progressFill.style.width = '30%'
+      this.progressFill.style.animation = 'jsee-progress-indeterminate 1.2s ease-in-out infinite'
+    } else {
+      this.progressFill.style.animation = 'none'
+      this.progressFill.style.width = state.value + '%'
+    }
   }
 }