@jseeio/jsee 0.4.2 → 0.8.1

package/src/utils.js

@@ -105,7 +105,14 @@ const VALID_INPUT_TYPES = [
   'file',
   'group',
   'action',
-  'button'
+  'button',
+  'slider',
+  'radio',
+  'toggle',
+  'date',
+  'multi-select',
+  'range',
+  'folder'
 ]
 
 const VALID_MODEL_TYPES = [
@@ -710,7 +717,18 @@ async function importScripts (...imports) {
   }
 }
 
-function getModelFuncAPI (model, log=console.log) {
+function parseSSELine (line) {
+  if (!line.startsWith('data:')) return null
+  const payload = line.slice(5).trim()
+  if (payload === '[DONE]') return null
+  try {
+    return JSON.parse(payload)
+  } catch (e) {
+    return payload
+  }
+}
+
+function getModelFuncAPI (model, log=console.log, onChunk) {
   switch (model.type) {
     case 'get':
       return (data) => {
@@ -724,19 +742,113 @@ function getModelFuncAPI (model, log=console.log) {
     case 'post':
       return (data) => {
         log('Sending POST request to', model.url)
-        const resPromise = fetch(model.url, {
+        const accept = model.stream ? 'text/event-stream' : 'application/json'
+        return fetch(model.url, {
           method: 'POST',
           headers: {
-            'Accept': 'application/json',
+            'Accept': accept,
             'Content-Type': 'application/json'
           },
           body: JSON.stringify(data)
-        }).then(response => response.json())
-        return resPromise
+        }).then(async (response) => {
+          const contentType = response.headers.get('content-type') || ''
+          // SSE streaming response
+          if (contentType.includes('text/event-stream') && response.body && onChunk) {
+            const reader = response.body.getReader()
+            const decoder = new TextDecoder()
+            let buffer = ''
+            let lastResult = null
+            while (true) {
+              const { done, value } = await reader.read()
+              if (done) break
+              buffer += decoder.decode(value, { stream: true })
+              const lines = buffer.split('\n')
+              buffer = lines.pop()
+              for (const line of lines) {
+                const trimmed = line.trim()
+                if (!trimmed) continue
+                const parsed = parseSSELine(trimmed)
+                if (parsed !== null) {
+                  lastResult = parsed
+                  onChunk(parsed)
+                }
+              }
+            }
+            // Process any remaining buffer
+            buffer += decoder.decode()
+            if (buffer.trim()) {
+              const parsed = parseSSELine(buffer.trim())
+              if (parsed !== null) {
+                lastResult = parsed
+                onChunk(parsed)
+              }
+            }
+            return lastResult
+          }
+          return response.json()
+        })
       }
   }
 }
 
+const TYPED_ARRAY_CONSTRUCTORS = {
+  float32: Float32Array,
+  float64: Float64Array,
+  int8: Int8Array,
+  int16: Int16Array,
+  int32: Int32Array,
+  uint8: Uint8Array,
+  uint16: Uint16Array,
+  uint32: Uint32Array,
+}
+
+function toTypedArray (value, dtype) {
+  if (!dtype || !TYPED_ARRAY_CONSTRUCTORS[dtype]) return value
+  const Ctor = TYPED_ARRAY_CONSTRUCTORS[dtype]
+  if (value instanceof Ctor) return value
+  if (ArrayBuffer.isView(value) || value instanceof ArrayBuffer) {
+    return new Ctor(value instanceof ArrayBuffer ? value : value.buffer)
+  }
+  if (Array.isArray(value)) return new Ctor(value)
+  return value
+}
+
+function fromTypedArray (value) {
+  if (ArrayBuffer.isView(value)) return Array.from(value)
+  return value
+}
+
+function collectTransferables (value, seen) {
+  if (!value || typeof value !== 'object') return []
+  if (!seen) seen = new WeakSet()
+  if (seen.has(value)) return []
+  seen.add(value)
+  const buffers = []
+  if (value instanceof ArrayBuffer) {
+    buffers.push(value)
+  } else if (ArrayBuffer.isView(value)) {
+    buffers.push(value.buffer)
+  } else if (Array.isArray(value)) {
+    value.forEach(item => buffers.push(...collectTransferables(item, seen)))
+  } else {
+    Object.keys(value).forEach(key => {
+      buffers.push(...collectTransferables(value[key], seen))
+    })
+  }
+  return buffers
+}
+
+function wrapTypedArrayInputs (inputs, inputConfigs) {
+  if (!isObject(inputs) || !Array.isArray(inputConfigs)) return inputs
+  const wrapped = Object.assign({}, inputs)
+  inputConfigs.forEach(cfg => {
+    if (cfg.arrayBuffer && cfg.name && typeof wrapped[cfg.name] !== 'undefined') {
+      wrapped[cfg.name] = toTypedArray(wrapped[cfg.name], cfg.dtype || 'float64')
+    }
+  })
+  return wrapped
+}
+
 async function delay (ms) {
   return new Promise(resolve => setTimeout(resolve, ms || 1))
 }
@@ -776,12 +888,16 @@ function getName (code) {
   switch (typeof code) {
     case 'function':
       if (!code.name) return undefined
-      // Arrow functions get an inferred .name from property assignment
-      // (e.g. { code: (a) => a } → code.name === "code") which is misleading.
-      // Only trust .name when toString() confirms a real named declaration.
+      // JS infers .name from property assignment for ALL function forms:
+      // { code: (a) => a } and { code: function(a) {} } both get .name === "code".
+      // Only trust .name when the name actually appears in the source text.
       const src = code.toString().trimStart()
-      if (src.startsWith('function') || src.startsWith('async function')) {
-        return code.name
+      const keyword = src.startsWith('async function') ? 'async function'
+        : src.startsWith('function') ? 'function'
+        : null
+      if (keyword) {
+        const afterKeyword = src.slice(keyword.length).trimStart()
+        if (afterKeyword.startsWith(code.name)) return code.name
       }
       return undefined
     case 'string':
@@ -882,8 +998,9 @@ function validateSchema (schema) {
   const hasModel = typeof schema.model !== 'undefined'
   const hasView = (typeof schema.view !== 'undefined') || (typeof schema.render !== 'undefined')
 
-  if (!hasModel && !hasView) {
-    report.errors.push('Schema should define `model` (or `view`/`render`)')
+  const hasInputs = Array.isArray(schema.inputs) && schema.inputs.length > 0
+  if (!hasModel && !hasView && !hasInputs) {
+    report.errors.push('Schema should define `model` (or `view`/`render`) or `inputs`')
   } else if (!hasModel && hasView) {
     report.warnings.push('Schema has no `model`, using `view`/`render` only')
   }
@@ -912,8 +1029,12 @@ function validateSchema (schema) {
 
 // Convert a URL parameter string to the appropriate type
 function coerceParam (value, type, name) {
-  if (type === 'number') return Number(value)
-  if (type === 'boolean') return value === 'true'
+  if (type === 'number' || type === 'int' || type === 'float' || type === 'slider') return Number(value)
+  if (type === 'boolean' || type === 'bool' || type === 'checkbox' || type === 'toggle') return value === 'true'
+  if (type === 'range') {
+    try { return JSON.parse(value) }
+    catch (e) { console.error(`Failed to parse range for input ${name}:`, e) }
+  }
   if (type === 'json') {
     try { return JSON.parse(value) }
     catch (e) { console.error(`Failed to parse JSON for input ${name}:`, e) }
@@ -923,6 +1044,7 @@ function coerceParam (value, type, name) {
 
 // Extract URL parameter value for an input, checking name, sanitized name, and aliases
 function getUrlParam (urlParams, input) {
+  if (!input.name) return null
   if (urlParams.has(input.name)) return urlParams.get(input.name)
   if (urlParams.has(sanitizeName(input.name))) return urlParams.get(sanitizeName(input.name))
   if (!input.alias) return null
@@ -933,6 +1055,240 @@ function getUrlParam (urlParams, input) {
   return null
 }
 
+function jseeInputsToJsonSchema (inputs) {
+  const properties = {}
+  const required = []
+  for (const inp of (inputs || [])) {
+    const prop = {}
+    if (inp.description) prop.description = inp.description
+    switch (inp.type) {
+      case 'int':
+        prop.type = 'integer'
+        break
+      case 'float': case 'number':
+        prop.type = 'number'
+        break
+      case 'bool': case 'checkbox': case 'toggle':
+        prop.type = 'boolean'
+        break
+      case 'select': case 'categorical': case 'radio':
+        prop.type = 'string'
+        if (inp.options) prop.enum = inp.options
+        break
+      case 'slider':
+        prop.type = 'number'
+        if (inp.min !== undefined) prop.minimum = inp.min
+        if (inp.max !== undefined) prop.maximum = inp.max
+        if (inp.step !== undefined) prop.multipleOf = inp.step
+        break
+      case 'range':
+        prop.type = 'array'
+        prop.items = { type: 'number' }
+        prop.minItems = 2
+        prop.maxItems = 2
+        break
+      case 'multi-select':
+        prop.type = 'array'
+        prop.items = { type: 'string' }
+        if (inp.options) prop.items.enum = inp.options
+        break
+      default:
+        prop.type = 'string'
+    }
+    if (inp.default !== undefined) prop.default = inp.default
+    properties[inp.name] = prop
+    if (inp.default === undefined) required.push(inp.name)
+  }
+  return { type: 'object', properties, required }
+}
+
+function generateOpenAPISpec (schema) {
+  const models = Array.isArray(schema.model) ? schema.model : (schema.model ? [schema.model] : [])
+  const paths = {}
+  const inputSchema = jseeInputsToJsonSchema(schema.inputs)
+
+  for (const m of models) {
+    paths['/' + m.name] = {
+      post: {
+        summary: 'Run ' + m.name,
+        operationId: m.name,
+        requestBody: {
+          required: true,
+          content: { 'application/json': { schema: inputSchema } }
+        },
+        responses: {
+          '200': {
+            description: 'Model output',
+            content: { 'application/json': { schema: { type: 'object' } } }
+          }
+        }
+      }
+    }
+  }
+
+  const title = schema.title
+    || (schema.page && schema.page.title)
+    || (models[0] && models[0].name)
+    || 'JSEE API'
+
+  return {
+    openapi: '3.1.0',
+    info: { title, version: '1.0.0' },
+    paths
+  }
+}
+
+function serializeResult (result) {
+  if (result === null || result === undefined) return { result: null }
+  // Buffer or Uint8Array → base64 image
+  if (Buffer.isBuffer(result) || result instanceof Uint8Array) {
+    const b64 = Buffer.from(result).toString('base64')
+    return { result: 'data:image/png;base64,' + b64 }
+  }
+  // Plain object or array — return as-is
+  if (typeof result === 'object') return result
+  // Primitives
+  return { result }
+}
+
+function parseMultipart (contentType, body) {
+  const match = contentType.match(/boundary=(?:"([^"]+)"|([^\s;]+))/)
+  if (!match) return {}
+  const boundary = '--' + (match[1] || match[2])
+  const buf = Buffer.isBuffer(body) ? body : Buffer.from(body)
+  const data = {}
+  let start = buf.indexOf(boundary) + boundary.length
+  while (start < buf.length) {
+    // Skip \r\n after boundary
+    if (buf[start] === 0x0d) start += 2
+    else if (buf[start] === 0x0a) start += 1
+    // Check for closing boundary (--)
+    if (buf[start] === 0x2d && buf[start + 1] === 0x2d) break
+    // Find end of headers (\r\n\r\n)
+    const headerEnd = buf.indexOf('\r\n\r\n', start)
+    if (headerEnd === -1) break
+    const headers = buf.slice(start, headerEnd).toString('utf-8')
+    const bodyStart = headerEnd + 4
+    // Find next boundary
+    const nextBoundary = buf.indexOf(boundary, bodyStart)
+    if (nextBoundary === -1) break
+    // Body ends 2 bytes before boundary (\r\n)
+    const bodyEnd = nextBoundary - 2
+    const nameMatch = headers.match(/name="([^"]+)"/)
+    if (nameMatch) {
+      const name = nameMatch[1]
+      const filenameMatch = headers.match(/filename="([^"]*)"/)
+      if (filenameMatch) {
+        // File field — keep as Buffer
+        data[name] = buf.slice(bodyStart, bodyEnd)
+      } else {
+        // Text field — try to parse as JSON for numbers/booleans
+        const val = buf.slice(bodyStart, bodyEnd).toString('utf-8')
+        try { data[name] = JSON.parse(val) } catch (e) { data[name] = val }
+      }
+    }
+    start = nextBoundary + boundary.length
+  }
+  return data
+}
+
+// Convert column-oriented data {x: [1,2], y: [3,4]} to row-oriented [{x:1, y:3}, {x:2, y:4}]
+function columnsToRows (data) {
+  if (!isObject(data)) return data
+  const keys = Object.keys(data)
+  if (keys.length === 0) return []
+  const firstArray = data[keys[0]]
+  if (!Array.isArray(firstArray)) return data
+  // Ensure all values are arrays of the same length
+  const len = firstArray.length
+  if (!keys.every(k => Array.isArray(data[k]) && data[k].length === len)) return data
+  const rows = []
+  for (let i = 0; i < len; i++) {
+    const row = {}
+    keys.forEach(k => { row[k] = data[k][i] })
+    rows.push(row)
+  }
+  return rows
+}
+
+function createValidateFn (input, filtrexCompile, filtrexOptions) {
+  if (input.validate) {
+    const expr = input.validate.replace(/\'/g, '"')
+    const f = filtrexCompile(expr, filtrexOptions)
+    const msg = input.error || 'Invalid value'
+    return function (value) {
+      try {
+        return f({ value }) ? null : msg
+      } catch (e) {
+        return msg
+      }
+    }
+  } else if (input.required) {
+    const msg = input.error || 'Required'
+    return function (value) {
+      if (value === null || value === undefined || value === '') return msg
+      if (Array.isArray(value) && value.length === 0) return msg
+      return null
+    }
+  }
+  return null
+}
+
+function runValidation (inputs, validateFunctions) {
+  let hasErrors = false
+  inputs.forEach((input, index) => {
+    if (index < validateFunctions.length && validateFunctions[index]) {
+      input._error = validateFunctions[index](input.value)
+      if (input._error) hasErrors = true
+    }
+  })
+  return hasErrors
+}
+
+const EXT_TO_OUTPUT = {
+  '.pdf': 'pdf',
+  '.png': 'image', '.jpg': 'image', '.jpeg': 'image',
+  '.gif': 'image', '.svg': 'image', '.webp': 'image',
+  '.mp3': 'audio', '.wav': 'audio', '.ogg': 'audio', '.flac': 'audio',
+  '.mp4': 'video', '.webm': 'video', '.mov': 'video',
+  '.csv': 'table', '.tsv': 'table',
+  '.md': 'markdown',
+  '.html': 'html', '.htm': 'html',
+  '.json': 'object',
+}
+
+function fileExtToOutputType (filename) {
+  if (typeof filename !== 'string') return 'code'
+  const dotIdx = filename.lastIndexOf('.')
+  if (dotIdx < 0) return 'code'
+  const ext = filename.slice(dotIdx).toLowerCase().replace(/[?#].*$/, '')
+  return EXT_TO_OUTPUT[ext] || 'code'
+}
+
+function inferOutputType (key, value) {
+  if (Array.isArray(value)) {
+    if (value.length > 0 && typeof value[0] === 'object' && value[0] !== null) return 'table'
+    if (value.length > 0 && typeof value[0] === 'string' && /\.(png|jpe?g|gif|svg|webp)([?#].*)?$/i.test(value[0])) return 'gallery'
+    return 'object'
+  }
+  if (typeof value === 'string') {
+    if (value.startsWith('data:image/')) return 'image'
+    if (value.startsWith('data:audio/')) return 'audio'
+    if (value.startsWith('data:video/')) return 'video'
+    if (value.startsWith('data:application/pdf')) return 'pdf'
+    if (/\.(png|jpe?g|gif|svg|webp)([?#].*)?$/i.test(value)) return 'image'
+    if (/\.(mp3|wav|ogg|flac)([?#].*)?$/i.test(value)) return 'audio'
+    if (/\.(mp4|webm|mov)([?#].*)?$/i.test(value)) return 'video'
+    if (/\.pdf([?#].*)?$/i.test(value)) return 'pdf'
+    if (/\.md([?#].*)?$/i.test(value)) return 'markdown'
+    if (value.includes('\n') && value.length > 200) return 'code'
+    return 'string'
+  }
+  if (typeof value === 'number' || typeof value === 'boolean') return 'string'
+  if (typeof value === 'object' && value !== null) return 'object'
+  return 'string'
+}
+
 module.exports = {
   isObject,
   loadFromDOM,
@@ -956,5 +1312,19 @@ module.exports = {
   isCssImport,
   isRelativeImport,
   getUrlParam,
-  coerceParam
+  coerceParam,
+  jseeInputsToJsonSchema,
+  generateOpenAPISpec,
+  serializeResult,
+  parseMultipart,
+  parseSSELine,
+  toTypedArray,
+  fromTypedArray,
+  wrapTypedArrayInputs,
+  collectTransferables,
+  columnsToRows,
+  createValidateFn,
+  runValidation,
+  fileExtToOutputType,
+  inferOutputType
 }

package/templates/common-inputs.js

@@ -5,14 +5,102 @@ const component = {
   props: ['input'],
   emits: ['inchange'],
   components: { FilePicker },
+  data () {
+    return {
+      collapsed: this.input && this.input.collapsed === true,
+      activeTab: 0
+    }
+  },
+  computed: {
+    effectiveStyle () {
+      if (this.input.style) return this.input.style
+      if (this.input.collapsed !== undefined || this.input.label) return 'accordion'
+      return 'blocks'
+    }
+  },
   methods: {
     changeHandler () {
       if (this.input.reactive) {
         this.$emit('inchange')
       }
     },
+    toggleCollapsed () {
+      this.collapsed = !this.collapsed
+    },
+    autosize (e) {
+      const el = e.target
+      el.style.height = 'auto'
+      el.style.height = el.scrollHeight + 'px'
+    },
     call (method) {
       console.log('calling: ', method)
+    },
+    folderSelected (e) {
+      const files = Array.from(e.target.files)
+      this.input.value = files.map(f => ({
+        name: f.webkitRelativePath || f.name,
+        path: f.webkitRelativePath || f.name,
+        size: f.size,
+        type: f.type,
+        selected: true,
+        _file: f
+      }))
+      this.changeHandler()
+    },
+    folderDropped (e) {
+      const files = Array.from(e.dataTransfer.files)
+      this.input.value = files.map(f => ({
+        name: f.name,
+        path: f.name,
+        size: f.size,
+        type: f.type,
+        selected: true,
+        _file: f
+      }))
+      this.changeHandler()
+    },
+    rangeInput (e, which) {
+      const val = Number(e.target.value)
+      const v = this.input.value || [0, 100]
+      if (v[0] === v[1]) {
+        // Same point: direction determines which thumb moves
+        if (val > v[0]) this.input.value = [v[0], val]
+        else if (val < v[0]) this.input.value = [val, v[1]]
+      } else if (which === 'min') {
+        this.input.value = [Math.min(val, v[1]), v[1]]
+      } else {
+        this.input.value = [v[0], Math.max(val, v[0])]
+      }
+      this.changeHandler()
+    },
+    folderSelectOne (file) {
+      this.input.value.forEach(f => { f.selected = false })
+      file.selected = true
+      if (this.input.reactive) {
+        this.$emit('inchange')
+      }
+    },
+    folderSelectionChanged () {
+      if (this.input.reactive) {
+        this.$emit('inchange')
+      }
+    },
+    formatSize (bytes) {
+      if (!bytes) return ''
+      if (bytes < 1024) return bytes + ' B'
+      if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB'
+      return (bytes / (1024 * 1024)).toFixed(1) + ' MB'
+    }
+  },
+  mounted () {
+    if (this.input.type === 'text' && this.input.value) {
+      this.$nextTick(() => {
+        const el = this.$el.querySelector('textarea')
+        if (el) {
+          el.style.height = 'auto'
+          el.style.height = el.scrollHeight + 'px'
+        }
+      })
     }
   }
 }