@jseeio/jsee 0.3.7 → 0.3.8

package/src/cli.js

@@ -20,6 +20,8 @@ const converter = new showdown.Converter({
 })
 showdown.setFlavor('github')
 
+const { getModelFuncJS, sanitizeName } = require('./utils.js')
+
 // left padding of multiple lines
 function pad (str, len, start=0) {
   return str.split('\n').map((s, i) => i >= start ? ' '.repeat(len) + s : s).join('\n')
@@ -29,585 +31,261 @@ function depad (str, len) {
   return str.split('\n').map(s => s.slice(len)).join('\n')
 }
 
-// Adding async here breaks express. TODO: investigate
-async function gen (pargv, returnHtml=false) {
-  pargv = pargv.slice(2) // Remove the first two elements (node and script path)
-
-  // print all folders (file location, cwd, etc.)
-  console.log('Current working directory:', process.cwd())
-  console.log('Script location:', __dirname)
-  console.log('Script file:', __filename)
-  console.log('Require', require.main.filename)
-
-  const argvAlias ={
-    inputs: 'i',
-    outputs: 'o',
-    description: 'd',
-    ga: 'g',
-    port: 'p',
-    version: 'v',
-    fetch: 'f',
-    execute: 'e'
-  }
-  const argvDefault = {
-    execute: false, // execute the model code on the server
-    fetch: false,
-    inputs: '',
-    port: 3000,
-    version: 'latest'
+function getDataFromArgv (schema, argv, loadFiles=true) {
+  let data = {}
+  if (schema.inputs) {
+    schema.inputs.forEach(inp => {
+      const inputName = sanitizeName(inp.name)
+      console.log('Processing input:', inp.name, 'as', inputName)
+      if (inputName in argv) {
+        switch (inp.type) {
+          case 'file':
+            if (!loadFiles) {
+              // If we don't want to load files, just set the value to the file path
+              data[inp.name] = argv[inputName]
+              break
+            } else if (fs.existsSync(argv[inputName])) {
+              data[inp.name] = fs.readFileSync(argv[inputName], 'utf8')
+            } else {
+              console.error(`File not found: ${argv[inputName]}`)
+              process.exit(1)
+            }
+            break
+          case 'int':
+            data[inp.name] = parseInt(argv[inputName], 10)
+            break
+          case 'float':
+            data[inp.name] = parseFloat(argv[inputName])
+            break
+          case 'string':
+          default:
+            data[inp.name] = argv[inputName]
+        }
+      }
+    })
   }
+  return data
+}
 
-  // Parse arguments using minimist
-  let argv = minimist(pargv, {
-    alias: argvAlias,
-    default: argvDefault,
-  })
-
-  // Set argv.inputs to the first non-option argument if it exists
-  if (argv._.length > 0) {
-    argv.inputs = argv._[0]
+function genSchema (jsdocData) {
+  let schema = {
+    model: [],
+    inputs: [],
+    outputs: [],
   }
-
-  console.log('Initial argv:', argv)
-
-  let cwd = process.cwd()
-  let inputs = argv.inputs
-  let outputs = argv.outputs
-  let description = argv.description
-  let version = argv.version
-  let ga = argv.ga
-  let schema
-  let descriptionTxt = ''
-  let descriptionHtml = ''
-  let jsdocMarkdown = ''
-  let modelFuncs = {}
-
-  // if inputs is a string with js file names, split it into an array
-  if (typeof inputs === 'string') {
-    if (inputs.includes('.js')) {
-      inputs = inputs.split(',')
+  for (let d of jsdocData) {
+    const model = {
+      name: d.name ? d.name : d.meta.filename.split('.')[0],
+      description: d.description ? d.description : '',
+      type: d.kind,
+      container: 'args',
+      url: path.relative(process.cwd(), path.join(d.meta.path, d.meta.filename)),
+      worker: false
+    }
+    if (d.requires) {
+      model.imports = d.requires.map(r => r.replace('module:', ''))
+    }
+    if (d.params) {
+      // Check if all params have the same name before '.'
+      const names = new Set(d.params.map(p => p.name.split('.')[0]))
+      if ((d.params.length > 1) && (names.size === 1)) {
+        // Object
+        model.container = 'object'
+        d.params.slice(1).forEach(p => {
+          const inp = {
+            name: p.name.split('.')[1],
+            type: p.type.names[0],
+            description: p.description,
+          }
+          if (p.defaultvalue) {
+            inp.default = p.defaultvalue
+          }
+          schema.inputs.push(inp)
+        })
+      } else {
+        // Array
+        model.container = 'args'
+        d.params.forEach(p => {
+          const inp = {
+            name: p.name,
+            type: p.type.names[0],
+            description: p.description,
+          }
+          if (p.defaultvalue) {
+            inp.default = p.defaultvalue
+          }
+          schema.inputs.push(inp)
+        })
+      }
+    }
+    if (d.returns) {
+      d.returns.forEach(r => {
+        r.name = r.name ? r.name : r.description.split('-')[0].trim()
+        r.description = r.description.split('-').slice(1).join('-').trim()
+      })
+      const names = new Set(d.returns.map(r => r.name.split('.')[0]))
+      if ((d.returns.length > 1) && (names.size === 1)) {
+        // Object
+        d.returns.slice(1).forEach(p => {
+          const out = {
+            name: p.name.split('.')[1],
+            type: p.type.names[0],
+            description: p.description,
+          }
+          schema.outputs.push(out)
+        })
+      } else {
+        // Array
+        d.returns.forEach(p => {
+          const out = {
+            name: p.name,
+            type: p.type.names[0],
+            description: p.description,
+          }
+          schema.outputs.push(out)
+        })
+      }
+    }
+    if (d.customTags) {
+      d.customTags.forEach(t => {
+        if (t.tag === 'worker') {
+          model.worker = true
+        }
+      })
     }
+    schema.model.push(model)
   }
+  return schema
+}
 
-  // if outputs is a string with js file names, split it into an array
-  if (typeof outputs === 'string') {
-    outputs = outputs.split(',')
-  }
+function genHtmlFromSchema(schema) {
+  let htmlDescription = '<br><div class="schema-description">';
 
-  // Check for schema.json in the current working directory
-  if (inputs.length === 0 && fs.existsSync(path.join(cwd, 'schema.json'))) {
-    console.log('Using schema.json from the current working directory')
-    inputs = ['schema.json']
+  // Process the model section
+  if (schema.model && schema.model.length > 0) {
+    schema.model.forEach(model => {
+      htmlDescription += `<h3><strong>${model.name}</strong></h3>`
+      if (model.description) {
+        htmlDescription += `<p>${model.description}</p>`
+      }
+    })
   }
 
-  if (inputs.length === 0) {
-    console.error('No inputs provided')
-    process.exit(1)
-  } else if ((inputs.length === 1) && (inputs[0].includes('.json'))) {
-    // Input is json schema
-    // Curren working directory if not provided
-    // schema = require(path.join(cwd, inputs[0]))
-    // switch to fs.readFileSync to reload the schema if it changes
-    schema = JSON.parse(fs.readFileSync(path.join(cwd, inputs[0]), 'utf8'))
-  } else {
-    // Array of js files
-    // Generate schema
-    let jsdocData = jsdoc2md.getTemplateDataSync({ files: inputs.map(f => path.join(cwd, f)) })
-    schema = genSchema(jsdocData)
-    // jsdocMarkdown = jsdoc2md.renderSync({
-    //   data: jsdocData,
-    //   'param-list-format': 'list',
-    // })
-  }
-  
-  // Iterate over schema inputs and update aliases 
-  if (schema.inputs) {
-    schema.inputs.forEach(inp => {  
-      if (inp.name) {
-        if (inp.alias) {
-          argvAlias[inp.name] = inp.alias
-        }
-        if (inp.default) {
-          argvDefault[inp.name] = inp.default
-        }
+  // Process the inputs section
+  if (schema.inputs && schema.inputs.length > 0) {
+    htmlDescription += '<h4>Inputs</h4><ul>';
+    schema.inputs.forEach(input => {
+      htmlDescription += `<li><strong>${input.name}</strong> (${input.type})`
+      if (input.description) {
+        htmlDescription += ` - ${input.description}`
       }
     })
+    htmlDescription += '</ul>';
   }
 
-  // Update argv with the new aliases and defaults
-  argv = minimist(pargv, {
-    alias: argvAlias,
-    default: argvDefault,
-  })
-
-  console.log('Updated argv', argv)
-
-  // Initially in argv.fetch branch
-  // Check if schema has model, convert to array if needed
-  if (!schema.model) {
-    console.error('No model found in schema')
-    process.exit(1)
-  }
-  if (!Array.isArray(schema.model)) {
-    schema.model = [schema.model]
-  }
-  if (argv.execute) {
-    schema.model.forEach(m => {
-      console.log('Executing model on the server:', m.name)
-      modelFuncs[m.name] = require(path.join(cwd, m.url))
-      m.type = 'post'
-      m.url = `/${m.name}`
-      m.worker = false
+  // Process the outputs section
+  if (schema.outputs && schema.outputs.length > 0) {
+    htmlDescription += '<h4>Outputs</h4><ul>';
+    schema.outputs.forEach(output => {
+      htmlDescription += `<li><strong>${output.name}</strong> (${output.type})`
+      if (output.description) {
+        htmlDescription += ` - ${output.description}`
+      }
     })
+    htmlDescription += '</ul>';
   }
-  console.log('Schema:', schema)
-
+  htmlDescription += '</div>';
+  return htmlDescription;
+}
 
-  // Generate description block
-  if (description) {
-    const descriptionMd = fs.readFileSync(path.join(cwd, description), 'utf8')
-    descriptionHtml = converter.makeHtml(descriptionMd)
+function genMarkdownFromSchema(schema) {
+  let markdownDescription = '';
 
-    if (descriptionMd.includes('---')) {
-      descriptionTxt = descriptionMd
-        .split('---')[0]
-        .replace(/\n/g, ' ')
-        .replace(/\s+/g, ' ')
-        .replace(/#/g, '')
-        .replace(/\*/g, '')
-        .trim()
-    }
+  // Process the model section
+  if (schema.model && schema.model.length > 0) {
+    schema.model.forEach(model => {
+      markdownDescription += `### **${model.name}**\n`;
+      if (model.description) {
+        markdownDescription += `${model.description}\n\n`;
+      }
+    });
   }
 
-  descriptionHtml += genHtmlFromSchema(schema)
-
-
+  // Process the inputs section
+  if (schema.inputs && schema.inputs.length > 0) {
+    markdownDescription += '#### Inputs\n';
+    schema.inputs.forEach(input => {
+      markdownDescription += `- **${input.name}** (${input.type})`;
+      if (input.description) {
+        markdownDescription += ` - ${input.description}`;
+      }
+      markdownDescription += '\n';
+    });
+  }
 
-  // Generate jsee code
-  let jseeHtml = ''
-  let hiddenElementHtml = ''
-  if (argv.fetch) {
-    // Fetch jsee code from the CDN or local server
-    let jseeCode
-    if (argv.version === 'dev') {
-      jseeCode = fs.readFileSync(path.join(__dirname, '..', 'dist', 'jsee.js'), 'utf8')
-    } else if (argv.version === 'latest') {
-      jseeCode = fs.readFileSync(path.join(__dirname, '..', 'dist', 'jsee.runtime.js'), 'utf8')
-    } else {
-      // Pre-fetch the jsee runtime from the CDN https://cdn.jsdelivr.net/npm/@jseeio/jsee@${argv.version}/dist/jsee.runtime.js
-      jseeCode = await fetch(`https://cdn.jsdelivr.net/npm/@jseeio/jsee@${argv.version}/dist/jsee.runtime.js`)
-      jseeCode = await jseeCode.text()
-    }
-    jseeHtml = `<script>${jseeCode}</script>`
-    // Fetch model files and store them in hidden elements
-    hiddenElementHtml += '<div id="hidden-storage" style="display: none;">'
-
-    for (let m of schema.model) {
-      if (m.type === 'get' || m.type === 'post') {
-        continue
-      }
-      if (m.url) {
-        const modelCode = fs.readFileSync(path.join(cwd, m.url), 'utf8')
-        hiddenElementHtml += `<script type="text/plain" style="display: none;" data-src="${m.url}">${modelCode}</script>`
+  // Process the outputs section
+  if (schema.outputs && schema.outputs.length > 0) {
+    markdownDescription += '#### Outputs\n';
+    schema.outputs.forEach(output => {
+      markdownDescription += `- **${output.name}** (${output.type})`;
+      if (output.description) {
+        markdownDescription += ` - ${output.description}`;
       }
-      if (m.imports) {
-        for (let i of m.imports) {
-          const importUrl = i.includes('.js') ? i : `https://cdn.jsdelivr.net/npm/${i}`
-
-          // Create cache directory if it doesn't exist
-          const cacheDir = path.join(os.homedir(), '.cache', 'jsee')
-          fs.mkdirSync(cacheDir, { recursive: true })
-
-          // Create a hash of the importUrl
-          const hash = crypto.createHash('sha256').update(importUrl).digest('hex')
-          const cacheFilePath = path.join(cacheDir, `${hash}.js`)
-
-          let importCode
-          let useCache = false
-
-          // Check if cache file exists and is less than 1 day old
-          if (fs.existsSync(cacheFilePath)) {
-            const stats = fs.statSync(cacheFilePath)
-            const mtime = new Date(stats.mtime)
-            const now = new Date()
-            const ageInDays = (now - mtime) / (1000 * 60 * 60 * 24)
+      markdownDescription += '\n';
+    });
+  }
 
-            if (ageInDays < 1) {
-              console.log('Using cached import:', importUrl)
-              importCode = fs.readFileSync(cacheFilePath, 'utf8');
-              useCache = true;
-            }
-          }
+  return markdownDescription;
+}
 
-          if (!useCache) {
-            const response = await fetch(importUrl);
-            if (!response.ok) {
-              console.error(`Failed to fetch ${importUrl}: ${response.statusText}`);
-              process.exit(1);
-            }
-            importCode = await response.text()
-            fs.writeFileSync(cacheFilePath, importCode, 'utf8')
-            console.log('Fetched and stored to cache:', importUrl)
-          }
-          hiddenElementHtml += `<script type="text/plain" style="display: none;" data-src="${importUrl}">${importCode}</script>`
-        }
-      }
+function template(schema, blocks) {
+  let title = 'jsee'
+  // let url = schema.page && schema.page.url ? schema.page.url : ''
+  let url = ('page' in schema && 'url' in schema.page) ? schema.page.url : ''
+  if (schema.title) {
+    title = schema.title
+  } else if (schema.page && schema.page.title) {
+    title = schema.page.title
+  } else if (schema.model) {
+    if (Array.isArray(schema.model)) {
+      title = schema.model[0].name
+    } else {
+      title = schema.model.name
     }
-    hiddenElementHtml += '</div>'
-  } else {
-    jseeHtml = outputs
-      ? `<script src="https://cdn.jsdelivr.net/npm/@jseeio/jsee@${argv.version}/dist/jsee.runtime.js"></script>`
-      : `<script src="http://localhost:${argv.port}/dist/jsee.runtime.js"></script>` 
   }
 
-  let socialHtml = ''
-  let gaHtml = ''
-  let orgHtml = ''
+  return `<!DOCTYPE html>
 
-  if (schema.page) {
-    if (schema.page.title) {
-      title = schema.page.title
-    }
-    if (schema.page.ga) {
-      gaHtml = `
-        <script id="ga-src" async src="https://www.googletagmanager.com/gtag/js?id=${schema.page.ga}"></script>
-        <script id="ga-body">
-          window['ga-disable-${schema.page.ga}'] = window.doNotTrack === "1" || navigator.doNotTrack === "1" || navigator.doNotTrack === "yes" || navigator.msDoNotTrack === "1";
-          window.dataLayer = window.dataLayer || [];
-          function gtag(){dataLayer.push(arguments);}
-          gtag('js', new Date());
-          gtag('config', '${schema.page.ga}');
-        </script>
-      `
-    }
+<!-- Generated by JSEE (https://jsee.org) -->
+<!-- Do not edit this file directly. Edit the source files and run jsee to generate this file. -->
+<!-- License: MIT (https://opensource.org/licenses/MIT) -->
 
-    // Social media links
-    if (schema.page.social) {
-      // iterate over dict with k, v pairs
-      for (let [name, url] of Object.entries(schema.page.social)) {
-        switch (name) {
-          case 'twitter':
-            socialHtml += `<li><a rel="me" href="https://twitter.com/${url}">Twitter</a></li>`
-            break
-          case 'github':
-            socialHtml += `<li><a rel="me" href="https://github.com/${url}">GitHub</a></li>`
-            break
-          case 'facebook':
-            socialHtml += `<li><a rel="me" href="https://www.facebook.com/${url}">Facebook</a></li>`
-            break
-          case 'linkedin':
-            socialHtml += `<li><a rel="me" href="https://www.linkedin.com/company/${url}">LinkedIn</a></li>`
-            break
-          case 'instagram':
-            socialHtml += `<li><a rel="me" href="https://www.instagram.com/${url}">Instagram</a></li>`
-            break
-          case 'youtube':
-            socialHtml += `<li><a rel="me" href="https://www.youtube.com/${url}">YouTube</a></li>`
-            break
-          default:
-            socialHtml += `<li><a rel="me" href="${s.url}">${s.name}</a></li>`
-        }
-      }
-    }
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>${title}</title>
+  <meta name="description" content="${blocks.descriptionTxt}">
 
-    if (schema.page.org) {
-      orgHtml = `<div class="footer-org"><h4 class="footer-heading"><a href="${schema.page.org.url}">${schema.page.org.name}</a></h4>`
-      if (schema.page.org.description) {
-        orgHtml += `<p>${schema.page.org.description}</p>`
-      }
-      orgHtml += '</div>'
-    }
+  <!-- Open Graph -->
+  <meta property="og:title" content="${title}" />
+  <meta property="og:description" content="${blocks.descriptionTxt}" />
+  <meta property="og:locale" content="en_US" />
+  <meta property="og:url" content="${url}" />
+  <meta property="og:site_name" content="${title}" />
+  <meta property="og:type" content="website" />
 
-  }
+  <!-- Twitter Card -->
+  <meta name="twitter:card" content="summary" />
+  <meta name="twitter:title" content="${title}" />
+  <meta name="twitter:description" content="${blocks.descriptionTxt}" />
 
-  const html = template(schema, {
-    descriptionHtml: pad(descriptionHtml, 8, 1),
-    descriptionTxt: descriptionTxt,
-    gaHtml: pad(gaHtml, 2, 1),
-    jseeHtml: jseeHtml,
-    hiddenElementHtml: hiddenElementHtml,
-    socialHtml: pad(socialHtml, 2, 1),
-    orgHtml: pad(orgHtml, 2, 1),
-  })
+  <!-- Structured Data -->
+  <script type="application/ld+json">{"@context":"https://schema.org","@type":"WebSite","headline":"${title}","name":"${title}","url":"${url}", "description":"${blocks.descriptionTxt}"}</script>
 
-  if (returnHtml) {
-    // Return the html as a string
-    return html
-  } else if (outputs) {
-    // Store the html in the output file
-    for (let o of outputs) {
-      if (o === 'stdout') {
-        console.log(html)
-      } else if (o.includes('.html')) {
-        fs.writeFileSync(path.join(cwd, o), html)
-      } else if (o.includes('.json')) {
-        fs.writeFileSync(path.join(cwd, o), JSON.stringify(schema, null, 2))
-      } else if (o.includes('.md')) {
-        fs.writeFileSync(path.join(cwd, o), genMarkdownFromSchema(schema))
-      } else {
-        console.error('Invalid output file:', o)
-      }
-    }
-    fs.writeFileSync(path.join(cwd, outputs[0]), html)
-  } else {
-    // Serve the html
-    const express = require('express')
-    const app = express()
-    app.use(express.json())
-    if (argv.execute) {
-      // Create post endpoint for executing the model
-      schema.model.forEach(m => {
-        app.post(m.url, (req, res) => {
-          console.log(`Executing model: ${m.name}`)
-          if (m.name in modelFuncs) {
-            const modelFunc = modelFuncs[m.name]
-            try {
-              const result = modelFunc(req.body)
-              res.json(result)
-            } catch (error) {
-              console.error('Error executing model:', error)
-              res.status(500).json({ error: error.message })
-            }
-          }
-        })
-        console.log('Model execution endpoints created:', m.url)
-      })
-    }
-    app.get('/', async (req, res) => {
-      console.log('Serving index.html')
-      res.send(await gen(process.argv, true))
-    })
-    app.get('/dist/jsee.runtime.js', (req, res) => {
-      const pathToJSEE = path.join(__dirname, '..', 'dist', 'jsee.runtime.js')
-      console.log(`Serving jsee.runtime.js from ${pathToJSEE}`)
-      res.sendFile(pathToJSEE)
-    })
-    app.use(express.static(cwd))
-    app.listen(argv.port, () => {
-      console.log(`JSEE app is running: http://localhost:${argv.port}`)
-    })
-  }
-}
-
-function genSchema (jsdocData) {
-  let schema = {
-    model: [],
-    inputs: [],
-    outputs: [],
-  }
-  for (let d of jsdocData) {
-    const model = {
-      name: d.name ? d.name : d.meta.filename.split('.')[0],
-      description: d.description ? d.description : '',
-      type: d.kind,
-      container: 'args',
-      url: path.relative(process.cwd(), path.join(d.meta.path, d.meta.filename)),
-      worker: false
-    }
-    if (d.requires) {
-      model.imports = d.requires.map(r => r.replace('module:', ''))
-    }
-    if (d.params) {
-      // Check if all params have the same name before '.'
-      const names = new Set(d.params.map(p => p.name.split('.')[0]))
-      if ((d.params.length > 1) && (names.size === 1)) {
-        // Object
-        model.container = 'object'
-        d.params.slice(1).forEach(p => {
-          const inp = {
-            name: p.name.split('.')[1],
-            type: p.type.names[0],
-            description: p.description,
-          }
-          if (p.defaultvalue) {
-            inp.default = p.defaultvalue
-          }
-          schema.inputs.push(inp)
-        })
-      } else {
-        // Array
-        model.container = 'args'
-        d.params.forEach(p => {
-          const inp = {
-            name: p.name,
-            type: p.type.names[0],
-            description: p.description,
-          }
-          if (p.defaultvalue) {
-            inp.default = p.defaultvalue
-          }
-          schema.inputs.push(inp)
-        })
-      }
-    }
-    if (d.returns) {
-      d.returns.forEach(r => {
-        r.name = r.name ? r.name : r.description.split('-')[0].trim()
-        r.description = r.description.split('-').slice(1).join('-').trim()
-      })
-      const names = new Set(d.returns.map(r => r.name.split('.')[0]))
-      if ((d.returns.length > 1) && (names.size === 1)) {
-        // Object
-        d.returns.slice(1).forEach(p => {
-          const out = {
-            name: p.name.split('.')[1],
-            type: p.type.names[0],
-            description: p.description,
-          }
-          schema.outputs.push(out)
-        })
-      } else {
-        // Array
-        d.returns.forEach(p => {
-          const out = {
-            name: p.name,
-            type: p.type.names[0],
-            description: p.description,
-          }
-          schema.outputs.push(out)
-        })
-      }
-    }
-    if (d.customTags) {
-      d.customTags.forEach(t => {
-        if (t.tag === 'worker') {
-          model.worker = true
-        }
-      })
-    }
-    schema.model.push(model)
-  }
-  return schema
-}
-
-function genHtmlFromSchema(schema) {
-  let htmlDescription = '<br><div class="schema-description">';
-
-  // Process the model section
-  if (schema.model && schema.model.length > 0) {
-    schema.model.forEach(model => {
-      htmlDescription += `<h3><strong>${model.name}</strong></h3>`
-      if (model.description) {
-        htmlDescription += `<p>${model.description}</p>`
-      }
-    })
-  }
-
-  // Process the inputs section
-  if (schema.inputs && schema.inputs.length > 0) {
-    htmlDescription += '<h4>Inputs</h4><ul>';
-    schema.inputs.forEach(input => {
-      htmlDescription += `<li><strong>${input.name}</strong> (${input.type})`
-      if (input.description) {
-        htmlDescription += ` - ${input.description}`
-      }
-    })
-    htmlDescription += '</ul>';
-  }
-
-  // Process the outputs section
-  if (schema.outputs && schema.outputs.length > 0) {
-    htmlDescription += '<h4>Outputs</h4><ul>';
-    schema.outputs.forEach(output => {
-      htmlDescription += `<li><strong>${output.name}</strong> (${output.type})`
-      if (output.description) {
-        htmlDescription += ` - ${output.description}`
-      }
-    })
-    htmlDescription += '</ul>';
-  }
-  htmlDescription += '</div>';
-  return htmlDescription;
-}
-
-function genMarkdownFromSchema(schema) {
-  let markdownDescription = '';
-
-  // Process the model section
-  if (schema.model && schema.model.length > 0) {
-    schema.model.forEach(model => {
-      markdownDescription += `### **${model.name}**\n`;
-      if (model.description) {
-        markdownDescription += `${model.description}\n\n`;
-      }
-    });
-  }
-
-  // Process the inputs section
-  if (schema.inputs && schema.inputs.length > 0) {
-    markdownDescription += '#### Inputs\n';
-    schema.inputs.forEach(input => {
-      markdownDescription += `- **${input.name}** (${input.type})`;
-      if (input.description) {
-        markdownDescription += ` - ${input.description}`;
-      }
-      markdownDescription += '\n';
-    });
-  }
-
-  // Process the outputs section
-  if (schema.outputs && schema.outputs.length > 0) {
-    markdownDescription += '#### Outputs\n';
-    schema.outputs.forEach(output => {
-      markdownDescription += `- **${output.name}** (${output.type})`;
-      if (output.description) {
-        markdownDescription += ` - ${output.description}`;
-      }
-      markdownDescription += '\n';
-    });
-  }
-
-  return markdownDescription;
-}
-
-function template(schema, blocks) {
-  let title = 'jsee'
-  // let url = schema.page && schema.page.url ? schema.page.url : ''
-  let url = ('page' in schema && 'url' in schema.page) ? schema.page.url : ''
-  if (schema.title) {
-    title = schema.title
-  } else if (schema.page && schema.page.title) {
-    title = schema.page.title
-  } else if (schema.model) {
-    if (Array.isArray(schema.model)) {
-      title = schema.model[0].name
-    } else {
-      title = schema.model.name
-    }
-  }
-
-  return `<!DOCTYPE html>
-
-<!-- Generated by JSEE (https://jsee.org) -->
-<!-- Do not edit this file directly. Edit the source files and run jsee to generate this file. -->
-<!-- License: MIT (https://opensource.org/licenses/MIT) -->
-
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>${title}</title>
-  <meta name="description" content="${blocks.descriptionTxt}">
-
-  <!-- Open Graph -->
-  <meta property="og:title" content="${title}" />
-  <meta property="og:description" content="${blocks.descriptionTxt}" />
-  <meta property="og:locale" content="en_US" />
-  <meta property="og:url" content="${url}" />
-  <meta property="og:site_name" content="${title}" />
-  <meta property="og:type" content="website" />
-
-  <!-- Twitter Card -->
-  <meta name="twitter:card" content="summary" />
-  <meta name="twitter:title" content="${title}" />
-  <meta name="twitter:description" content="${blocks.descriptionTxt}" />
-
-  <!-- Structured Data -->
-  <script type="application/ld+json">{"@context":"https://schema.org","@type":"WebSite","headline":"${title}","name":"${title}","url":"${url}", "description":"${blocks.descriptionTxt}"}</script>
-
-  <!-- Canonical Link -->
-  <link rel="canonical" href="${url}" />
+  <!-- Canonical Link -->
+  <link rel="canonical" href="${url}" />
 
   <!-- Favicon -->
   <link href="data:image/x-icon;base64,AAABAAEAEBAQAAEABAAoAQAAFgAAACgAAAAQAAAAIAAAAAEABAAAAAAAgAAAAAAAAAAAAAAAEAAAAAAAAAD9/f0AAAAAAPj4+AAMDAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEQAAAAAAABERAAAAAAAAEREAAAAAAAAREQABERESABERAAETMzAAEREAARAAAAAREQABEAAAABERAAEQARAAEREAARABEAAREQABEAAAABERAAEQAAAAEREAAREREAAREQABEREQABERAAAAAAAAEREAAAAAAAAREQAAAAAAABHAAwAAwAMAAMADAADAAwAAwAMAAMADAADAAwAAwAMAAMADAADAAwAAwAMAAMADAADAAwAAwAMAAMADAADAAwAA" rel="icon" type="image/x-icon" />
@@ -640,7 +318,7 @@ function template(schema, blocks) {
     pre { padding: 8px 12px; overflow-x: auto; }
     pre > code { border: 0; padding-right: 0; padding-left: 0; }
     .wrapper { max-width: calc(800px - (30px)); margin-right: auto; margin-left: auto; padding-right: 15px; padding-left: 15px; }
-    @media screen and (min-width: 800px) { .wrapper { max-width: calc(800px - (30px * 2)); padding-right: 30px; padding-left: 30px; } }
+    @media screen and (min-width: 800px) { .wrapper { max-width: calc(1024px - (30px * 2)); padding-right: 30px; padding-left: 30px; } }
     .wrapper:after { content: ""; display: table; clear: both; }
     .orange { color: #f66a0a; }
     .grey { color: #828282; }
@@ -783,4 +461,440 @@ function template(schema, blocks) {
 </html>`
 }
 
+// Adding async here breaks express. TODO: investigate
+async function gen (pargv, returnHtml=false) {
+  // Determine if JSEE CLI is imported or run directly
+  const imported = path.dirname(__dirname) !== path.dirname(require.main.path)
+
+  // First pass over CLI arguments
+  // JSEE-level args
+  const argvAlias = {
+    inputs: 'i',
+    outputs: 'o',
+    description: 'd',
+    port: 'p',
+    version: 'v',
+    fetch: 'f',
+    execute: 'e',
+    cdn: 'c',
+  }
+  const argvDefault = {
+    execute: false, // execute the model code on the server
+    fetch: false, // fetch the JSEE runtime from the CDN or local server
+    inputs: 'schema.json', // default input is schema.json in the current working directory
+    port: 3000, // default port for the server
+    version: 'latest', // default version of JSEE runtime to use
+    verbose: false, // verbose mode
+    cdn: false,
+  }
+  let argv = minimist(pargv, {
+    alias: argvAlias,
+    default: argvDefault,
+  })
+  // Set argv.inputs to the first non-option argument if it exists
+  if (!imported && argv._.length > 0 && !argv.inputs) {
+    argv.inputs = argv._[0]
+  }
+
+  function log (...args) {
+    if (argv.verbose) {
+      console.log('[JSEE CLI]', ...args)
+    }
+  }
+
+  log('Imported:', imported)
+  log('Current working directory:', process.cwd())
+  log('Script location:', __dirname)
+  log('Script file:', __filename)
+  log('Require location:', require.main.path)
+  log('Require file:', require.main.filename)
+
+  let cwd = process.cwd()
+  let inputs = argv.inputs
+  let outputs = argv.outputs
+  let description = argv.description
+  let schema
+  let schemaPath
+  let descriptionTxt = ''
+  let descriptionHtml = ''
+  let jsdocMarkdown = ''
+  let modelFuncs = {}
+
+  // Determine the inputs and outputs
+  // if inputs is a string with js file names, split it into an array
+  if (typeof inputs === 'string') {
+    if (inputs.includes('.js')) {
+      inputs = inputs.split(',')
+    }
+  }
+
+  // if outputs is a string with js file names, split it into an array
+  if (typeof outputs === 'string') {
+    outputs = outputs.split(',')
+  }
+
+  if (inputs.length === 0) {
+    console.error('No inputs provided')
+    process.exit(1)
+  } else if ((inputs.length === 1) && (inputs[0].includes('.json'))) {
+    // Input is json schema
+    // Curren working directory if not provided
+    // schema = require(path.join(cwd, inputs[0]))
+    // switch to fs.readFileSync to reload the schema if it changes
+    schemaPath = inputs[0].startsWith('/') ? inputs[0] : path.join(cwd, inputs[0])
+    schema = JSON.parse(fs.readFileSync(schemaPath, 'utf8'))
+  } else {
+    // Array of js files
+    // Generate schema
+    let jsdocData = jsdoc2md.getTemplateDataSync({ files: inputs.map(f => path.join(cwd, f)) })
+    schema = genSchema(jsdocData)
+    // jsdocMarkdown = jsdoc2md.renderSync({
+    //   data: jsdocData,
+    //   'param-list-format': 'list',
+    // })
+  }
+  log('Schema path:', schemaPath)
+
+  // Second pass over CLI arguments
+  // Iterate over schema inputs and update argv aliases
+  if (schema.inputs) {
+    schema.inputs.forEach((inp, inp_index) => {
+      if (inp.name) {
+        const inputName = sanitizeName(inp.name)
+        if (inp.alias) {
+          argvAlias[inputName] = inp.alias
+        }
+        // Use positional arguments as schema inputs defaults if JSEE CLI is imported
+        if (imported && argv._.length > inp_index) {
+          log('Using positional argument for input:', inputName, argv._[inp_index])
+          argvDefault[inputName] = argv._[inp_index]
+        }
+        // We don't need to duplicate defaults here, as we handle them on the frontend
+        // else if (inp.default) {
+        //   argvDefault[inputName] = inp.default
+        // }
+      }
+    })
+  }
+  // Update argv with the new aliases and defaults
+  argv = minimist(pargv, {
+    alias: argvAlias,
+    default: argvDefault,
+  })
+
+  // Now deactivate the inputs present in argv
+  // If you set parameter on the command line, it should not be editable in the GUI
+  // E.g. file selected
+  const dataFromArgvWithoutFileLoading = getDataFromArgv(schema, argv, false)
+  log('Data from argv without file loading:', dataFromArgvWithoutFileLoading)
+  if (schema.inputs) {
+    schema.inputs.forEach(inp => {
+      // Here data contains unsanitized input names
+      if (inp.name in dataFromArgvWithoutFileLoading) {
+        inp.default = dataFromArgvWithoutFileLoading[inp.name]
+        inp.disabled = true // Deactivate the input if it's present in argv
+      }
+    })
+  }
+  log('Argv:', argv)
+
+  // Initially in argv.fetch branch
+  // Check if schema has model, convert to array if needed
+  if (!schema.model) {
+    // console.error('No model found in schema')
+    // process.exit(1)
+    // It's still valid schema, can be only render function or vis of inputs/outputs
+    schema.model = [] 
+  }
+  if (!Array.isArray(schema.model)) {
+    schema.model = [schema.model]
+  }
+
+  // Server-side execution
+  // If execute is true, we will prepare the model functions to run on the server side
+  // Schema model will be updated with the server url and POST method
+  if (argv.execute) {
+    await Promise.all(schema.model.map(async m => {
+      log('Preparing a model to run on the server side:', m.name, m.url)
+      const target = require(path.join(schemaPath ? path.dirname(schemaPath) : cwd, m.url))
+      modelFuncs[m.name] = await getModelFuncJS(m, target, {log})
+      m.type = 'post'
+      m.url = `/${m.name}`
+      m.worker = false
+    }))
+  } 
+  
+  // Switch to CDN for model files
+  if (argv.cdn) {
+    let cdn = ''
+    console.log(argv)
+    if (typeof argv.cdn === 'string') {
+      cdn = argv.cdn
+    } else if (typeof argv.cdn === 'boolean') {
+      // Check package.json in cwd
+      const packageJsonPath = path.join(cwd, 'package.json')
+      if (fs.existsSync(packageJsonPath)) {
+        const target = require(packageJsonPath)
+        const packageName = target.name
+        cdn = `https://cdn.jsdelivr.net/npm/${packageName}@${target.version}/`
+      } else {
+        console.error(`No package.json found: ${packageJsonPath}`)
+        process.exit(1)
+      }
+    } else {
+      console.error('Invalid CDN argument. Use --cdn <url> or --cdn true to use package.json version.')
+      process.exit(1)
+    }
+    log('Using CDN for model files:', cdn)
+    schema.model.forEach(m => {
+      if (m.url) {
+        // If url is relative, make it absolute
+        if (!m.url.startsWith('http')) {
+          m.url = path.join(cdn, m.url)
+          log(`Updated ${m.name} model URL to: ${m.url}`)
+        }
+      }
+    })
+  }
+
+  log('Schema:', schema)
+
+  // Generate description block
+  if (description) {
+    const descriptionMd = fs.readFileSync(path.join(cwd, description), 'utf8')
+    descriptionHtml = converter.makeHtml(descriptionMd)
+
+    if (descriptionMd.includes('---')) {
+      descriptionTxt = descriptionMd
+        .split('---')[0]
+        .replace(/\n/g, ' ')
+        .replace(/\s+/g, ' ')
+        .replace(/#/g, '')
+        .replace(/\*/g, '')
+        .trim()
+    }
+  }
+  descriptionHtml += genHtmlFromSchema(schema)
+
+  // Generate jsee code
+  let jseeHtml = ''
+  let hiddenElementHtml = ''
+  if (argv.fetch) {
+    // Fetch jsee code from the CDN or local server
+    let jseeCode
+    if (argv.version === 'dev') {
+      jseeCode = fs.readFileSync(path.join(__dirname, '..', 'dist', 'jsee.js'), 'utf8')
+    } else if (argv.version === 'latest') {
+      jseeCode = fs.readFileSync(path.join(__dirname, '..', 'dist', 'jsee.runtime.js'), 'utf8')
+    } else {
+      // Pre-fetch the jsee runtime from the CDN https://cdn.jsdelivr.net/npm/@jseeio/jsee@${argv.version}/dist/jsee.runtime.js
+      jseeCode = await fetch(`https://cdn.jsdelivr.net/npm/@jseeio/jsee@${argv.version}/dist/jsee.runtime.js`)
+      jseeCode = await jseeCode.text()
+    }
+    jseeHtml = `<script>${jseeCode}</script>`
+    // Fetch model files and store them in hidden elements
+    hiddenElementHtml += '<div id="hidden-storage" style="display: none;">'
+
+    for (let m of schema.model) {
+      if (m.type === 'get' || m.type === 'post') {
+        continue
+      }
+      if (m.url) {
+        // Fetch model from the local file system (url)
+        // TODO: Can be a remote URL (e.g. CDN)
+        const modelCode = fs.readFileSync(path.join(cwd, m.url), 'utf8')
+        hiddenElementHtml += `<script type="text/plain" style="display: none;" data-src="${m.url}">${modelCode}</script>`
+      }
+      if (m.imports) {
+        for (let i of m.imports) {
+          const importUrl = i.includes('.js') ? i : `https://cdn.jsdelivr.net/npm/${i}`
+
+          // Create cache directory if it doesn't exist
+          const cacheDir = path.join(os.homedir(), '.cache', 'jsee')
+          fs.mkdirSync(cacheDir, { recursive: true })
+
+          // Create a hash of the importUrl
+          const hash = crypto.createHash('sha256').update(importUrl).digest('hex')
+          const cacheFilePath = path.join(cacheDir, `${hash}.js`)
+
+          let importCode
+          let useCache = false
+
+          // Check if cache file exists and is less than 1 day old
+          if (fs.existsSync(cacheFilePath)) {
+            const stats = fs.statSync(cacheFilePath)
+            const mtime = new Date(stats.mtime)
+            const now = new Date()
+            const ageInDays = (now - mtime) / (1000 * 60 * 60 * 24)
+
+            if (ageInDays < 1) {
+              log('Using cached import:', importUrl)
+              importCode = fs.readFileSync(cacheFilePath, 'utf8');
+              useCache = true;
+            }
+          }
+
+          if (!useCache) {
+            const response = await fetch(importUrl);
+            if (!response.ok) {
+              console.error(`Failed to fetch ${importUrl}: ${response.statusText}`);
+              process.exit(1);
+            }
+            importCode = await response.text()
+            fs.writeFileSync(cacheFilePath, importCode, 'utf8')
+            log('Fetched and stored to cache:', importUrl)
+          }
+          hiddenElementHtml += `<script type="text/plain" style="display: none;" data-src="${importUrl}">${importCode}</script>`
+        }
+      }
+    }
+    hiddenElementHtml += '</div>'
+  } else {
+    jseeHtml = outputs
+      ? `<script src="https://cdn.jsdelivr.net/npm/@jseeio/jsee@${argv.version}/dist/jsee.runtime.js"></script>`
+      : argv.version === 'dev' 
+        ? `<script src="http://localhost:${argv.port}/dist/jsee.js"></script>` 
+        : `<script src="http://localhost:${argv.port}/dist/jsee.runtime.js"></script>` 
+  }
+
+  let socialHtml = ''
+  let gaHtml = ''
+  let orgHtml = ''
+
+  if (schema.page) {
+    if (schema.page.title) {
+      title = schema.page.title
+    }
+    if (schema.page.ga) {
+      gaHtml = `
+        <script id="ga-src" async src="https://www.googletagmanager.com/gtag/js?id=${schema.page.ga}"></script>
+        <script id="ga-body">
+          window['ga-disable-${schema.page.ga}'] = window.doNotTrack === "1" || navigator.doNotTrack === "1" || navigator.doNotTrack === "yes" || navigator.msDoNotTrack === "1";
+          window.dataLayer = window.dataLayer || [];
+          function gtag(){dataLayer.push(arguments);}
+          gtag('js', new Date());
+          gtag('config', '${schema.page.ga}');
+        </script>
+      `
+    }
+
+    // Social media links
+    if (schema.page.social) {
+      // iterate over dict with k, v pairs
+      for (let [name, url] of Object.entries(schema.page.social)) {
+        switch (name) {
+          case 'twitter':
+            socialHtml += `<li><a rel="me" href="https://twitter.com/${url}">Twitter</a></li>`
+            break
+          case 'github':
+            socialHtml += `<li><a rel="me" href="https://github.com/${url}">GitHub</a></li>`
+            break
+          case 'facebook':
+            socialHtml += `<li><a rel="me" href="https://www.facebook.com/${url}">Facebook</a></li>`
+            break
+          case 'linkedin':
+            socialHtml += `<li><a rel="me" href="https://www.linkedin.com/company/${url}">LinkedIn</a></li>`
+            break
+          case 'instagram':
+            socialHtml += `<li><a rel="me" href="https://www.instagram.com/${url}">Instagram</a></li>`
+            break
+          case 'youtube':
+            socialHtml += `<li><a rel="me" href="https://www.youtube.com/${url}">YouTube</a></li>`
+            break
+          default:
+            socialHtml += `<li><a rel="me" href="${s.url}">${s.name}</a></li>`
+        }
+      }
+    }
+
+    if (schema.page.org) {
+      orgHtml = `<div class="footer-org"><h4 class="footer-heading"><a href="${schema.page.org.url}">${schema.page.org.name}</a></h4>`
+      if (schema.page.org.description) {
+        orgHtml += `<p>${schema.page.org.description}</p>`
+      }
+      orgHtml += '</div>'
+    }
+
+  }
+
+  const html = template(schema, {
+    descriptionHtml: pad(descriptionHtml, 8, 1),
+    descriptionTxt: descriptionTxt,
+    gaHtml: pad(gaHtml, 2, 1),
+    jseeHtml: jseeHtml,
+    hiddenElementHtml: hiddenElementHtml,
+    socialHtml: pad(socialHtml, 2, 1),
+    orgHtml: pad(orgHtml, 2, 1),
+  })
+
+  if (returnHtml) {
+    // Return the html as a string
+    return html
+  } else if (outputs) {
+    // Store the html in the output file
+    for (let o of outputs) {
+      if (o === 'stdout') {
+        log(html)
+      } else if (o.includes('.html')) {
+        fs.writeFileSync(path.join(cwd, o), html)
+      } else if (o.includes('.json')) {
+        fs.writeFileSync(path.join(cwd, o), JSON.stringify(schema, null, 2))
+      } else if (o.includes('.md')) {
+        fs.writeFileSync(path.join(cwd, o), genMarkdownFromSchema(schema))
+      } else {
+        console.error('Invalid output file:', o)
+      }
+    }
+    fs.writeFileSync(path.join(cwd, outputs[0]), html)
+  } else {
+    // Serve the html
+    const express = require('express')
+    const app = express()
+    app.use(express.json())
+    if (argv.execute) {
+      // Create post endpoint for executing the model
+      schema.model.forEach(m => {
+        app.post(m.url, (req, res) => {
+          log(`Executing model: ${m.name}`)
+          if (m.name in modelFuncs) {
+            const modelFunc = modelFuncs[m.name]
+            try {
+              const dataFromArgv = getDataFromArgv(schema, argv)
+              const dataFromGUI = req.body
+              const data = { ...dataFromGUI, ...dataFromArgv }
+              log('Data for model execution:', data)
+              const result = modelFunc(data)
+              res.json(result)
+              log(`Model ${m.name} executed successfully: `, result)
+            } catch (error) {
+              console.error('Error executing model:', error)
+              res.status(500).json({ error: error.message })
+            }
+          }
+        })
+        log('Model execution endpoints created:', m.url)
+      })
+    }
+    app.get('/', async (req, res) => {
+      log('Serving index.html')
+      res.send(await gen(pargv, true))
+    })
+    // app.get('/dist/jsee.runtime.js', (req, res) => {
+    //   // __dirname points to this file location (it's jsee/src/cli.js, likely in node_modules)
+    //   // so we need to go up one level to get to the dist folder with jsee.runtime.js
+    //   const pathToJSEE = path.join(__dirname, '..', 'dist', 'jsee.runtime.js')
+    //   log(`Serving jsee.runtime.js from: ${pathToJSEE}`)
+    //   res.sendFile(pathToJSEE)
+    // })
+    app.use('/dist', express.static(path.join(__dirname, '..', 'dist'))) // Serve static files from the dist folder
+    // app.use(express.static(cwd))
+    // app.use(express.static(require.main.path)) // Serve static files from the main module path
+    // app.use(express.static(path.join(require.main.path, '..'))) // Serve static files from the parent directory of the main module path
+    app.use(express.static(schemaPath ? path.dirname(schemaPath) : cwd)) // Serve static files from the schema path or current working directory
+    app.listen(argv.port, () => {
+      console.log(`JSEE app is running: http://localhost:${argv.port}`)
+    })
+  }
+}
+
 module.exports = gen