@jseeio/jsee 0.2.7 → 0.3.0

package/CHANGELOG.md

@@ -1,8 +1,21 @@
-## [0.2.7]
+# Changelog
+
+## 0.2.9
+- [x] Add examples
+- [x] Add imports
+- [x] Add `caller` field to the model input (can be: `run`, `autorun` or a button name)
+- [x] Add `title` field (for buttons rn)
+- [x] If `display` field is `false` the input is not shown
+- [x] If `autorun` is true, then actually autorun the model initially
+
+## 0.2.8
+- [x] Fix no input case
+
+## 0.2.7
 - [x] Show output when result is `0`
 - [x] Updated style for buttons and inputs
 
-## [<0.2.6]
+## 0.2.6
 - [x] Tests
 - [x] Load schema from query (loader)
 - [x] Reset button appears only after data change

package/README.md

@@ -14,58 +14,76 @@ Minimal example:
 </html>
 ```
 
-↳ [Result](https://jsee.org/test/minimal1.html) (if you see nothing, it's probably because today is Dec 29, and the CDN hasn't updated its cache yet)
+↳ [Result](https://jsee.org/test/minimal1.html)
 
-## Execution environment
-
-JSEE is a browser-based environment for processing tasks. It creates a graphical interface, executes code in a web worker or via API, bridges all pieces together into a user-friendly web app. In some cases, JSEE does all of that automatically, without any configuration. And when the configuration is required, it's just one JSON file with an [intuitive structure](#schema). 
+## JavaScript Execution Environment
 
+JSEE is a browser-based environment for processing tasks. It creates a graphical interface, executes code in a web worker or via API, bridges all pieces together into a user-friendly web app. In some cases, JSEE does all of that automatically, without any configuration. And when the configuration is required, it's just one JSON file with an [intuitive structure](#schema).
 
 ## Inputs and outputs
 
 JSEE works best with functional tasks and one-way flow from inputs to outputs (i.e., inputs → processing → outputs). You can also extend it to more complex scenarios, like inputs → preprocessing → updated inputs → processing → outputs or inputs → processing → outputs → custom renderer. Even though many computational tasks have a functional form, some problems require more complex interactions between a user interface and code. For such cases, JSEE is probably too constrained. That makes it not as universal as R's [shiny](https://shiny.rstudio.com/) or Python's [streamlit](https://streamlit.io/).
 
-
 ## How it works
 
 Instead of dealing with raw HTML tags, input elements or charts, JSEE makes it possible to work on a higher level and describe only `inputs` and `outputs` in a JSON schema. It similarly handles code execution, by checking the `model` part of that JSON object. Those three parts are the most important for the future app. In many cases JSEE can generate a new schema automatically by analyzing the code alone. For example, it's possible to extract a list function arguments and use them as model inputs. When JSEE receives the JSON schema it creates a new Vue app based on it and initializes a new worker for code execution. The final app can take inputs from a user, parse files, load needed libraries, orchestrate communication between code and GUI, use Web Workers to run everything smoothly
 
-```
+```text
             Schema   Model   Render*
-   DEV ─►    json    js/py     js
-              │        │        │
+   DEV  -►   json    js/py     js
+              |        |        |
            ┌──▼────────▼────────▼───┐
            │      new JSEE (...)    │
-           └──┬───────────────┬─────┘
-              │               │
-           ┌──▼──┐     ┌──────▼─────┐ ◄┐ tf.js
- USER  ◄─► │ GUI │ ◄─► │    Model   │ ◄│ pyodide
-           └─────┘     └────────────┘ ◄┘ wasm
+           └────────────────────────┘
+              |               |
+           ┌──▼──┐     ┌──────▼─────┐ ◄~ tf.js
+ USER  ◄-► │ GUI │ ◄-► │    Model   │ ◄~ pyodide
+           └─────┘     └────────────┘ ◄~ wasm
              Vue³        WebWorker*
 
  * - optional
 ```
 
 JSEE takes a schema object that contains three main blocks:
+
 - `model` - describes a model/script/API (its location, is it a function or class, should it be called automatically on every GUI change or not)
 - `inputs` - list of inputs and their descriptions
 - `outputs` - list of outputs and their descriptions
 
-Two extra blocks can be provided for further customization
+Extra blocks can be provided for further customization
+
 - `render` - visualization part (optional). Defines custom rendering code.
 - `design` - overall appearance (optional). Defines how the app looks overwriting defaults.
+- `imports` - a list of urls (optional). Defines a list of scripts to load before the model is initialized.
+
+  ```json
+  "imports": [
+    "https://cdn.jsdelivr.net/npm/@tensorflow/tfjs",
+    "https://cdn.jsdelivr.net/pyodide/v0.17.0/full/pyodide.js"
+  ]
+  ```
+
+- `examples` - a list of examples (optional). Defines a list of examples that can be used to overwrite inputs.
+
+  ```json
+  "examples": [
+    { "input": "My name is Anton and I am" },
+  ]
+  ```
+
+## Playground
 
+- [Codepen](https://codepen.io/jseeio/pen/NWayjJe)
 
-### Schema
+## Schema
 
 - `model` - Contains main parameters of the model/script
   - `url` (string) - URL of a JS/Python script or POST/GET API
   - `code` (function) - It's possible to pass code directly to JSEE instead of using an URL
   - `name` (string) - Name of the executed object. Default value is taken from `url` or `code`
-  - `autorun` (boolean, default - `false`) - Defines if the script should be evaluated on each input change event
-  - `type` (string, default - `function`) - What kind of script is loaded. Influences how the code is initializated. Possible values: 
+  - `type` (string, default - `function`) - What kind of script is loaded. Influences how the code is initializated. Possible values:
     - `function`
-    - `class` 
+    - `class`
     - `async-function`
     - `async-init`
     - `py`
@@ -79,7 +97,20 @@ Two extra blocks can be provided for further customization
 - `design` - Design parameters
   - `layout` - Layout for the model/input/output blocks. If it's empty and the JSEE container is not, JSEE uses inner HTML as a template. If the container is empty too, it uses the default `blocks` template.
   - `framework` - Design framework to use. If a JavaScript object with the same name is present in a global context, JSEE loads it too (using Vue's `use` method).
-- `inputs` - Inputs definition
+- `inputs` - Inputs definition.
+  - `name`* - Name of the input
+  - `type`* - Type. Possible types:
+    - `int`, `float` or `number` - Number
+    - `string` - String
+    - `text` - Textarea
+    - `checkbox` or `bool` - Checkbox
+    - `select` or `categorical` - Select (one of many `options`)
+    - `file` - File Input
+    - `action` or `button` - Button (its `name` will be passed as a `caller` to the model)
+  - `default` - Default value
 - `outputs` - Outputs definition
+- `examples` - List of examples
+- `autorun` (boolean, default: `false`) - Defines if the script should be evaluated on each input change event
+- `interval` (number, default: `0`) - Defines the interval between script evaluations (in milliseconds). If set to `0`, the script is evaluated only once.
 
 JSEE is a reactive branch of [StatSim](https://statsim.com)'s [Port](https://github.com/statsim/port). It's still work in progress. Expect API changes.