Merge branch 'release/v0.2.0'

.eslintrc.js

@@ -8,19 +8,7 @@ module.exports = {
     sourceType: 'module',
     project: './tsconfig.json',
   },
-  plugins: ['svelte3'],
-  extends: ['airbnb-typescript/base', 'prettier', 'prettier/@typescript-eslint'],
-  overrides: [
-    {
-      files: ['**/*.svelte'],
-      processor: 'svelte3/svelte3',
-      rules: {
-        'import/first': 'off',
-        'import/no-mutable-exports': 'off',
-        '@typescript-eslint/explicit-module-boundary-types': 'off',
-      },
-    },
-  ],
+  extends: ['airbnb-typescript/base', 'prettier'],
   rules: {
     'import/extensions': [
       'error',
@@ -37,4 +25,12 @@ module.exports = {
     'import/prefer-default-export': 'off',
     'no-plusplus': 'off',
   },
+  ignorePatterns: [
+    'node_modules/*',
+    '**/*.svelte',
+    'dist/*',
+    'types',
+    '.prettierrc.js',
+    '.eslintrc.js',
+  ],
 };

.gitignore

@@ -1,4 +1,6 @@
 .DS_STORE
 node_modules
 dist
-types
+types
+*.onnx
+examples/dist

.vscode/settings.json

@@ -4,6 +4,7 @@
   },
   "svelte.plugin.css.diagnostics.enable": false,
   "editor.formatOnSave": true,
+  "css.validate": false,
   "eslint.validate": ["javascript", "javascriptreact", "svelte"],
   "[svelte]": {
     "editor.defaultFormatter": "svelte.svelte-vscode"

CHANGELOG.md

@@ -0,0 +1,61 @@
+# Marcelle changelog
+
+## Unreleased
+
+### Breaking changes
+
+- `tfImageClassifier` has been replaced by `tfGenericModel`
+- Module `name` property has been replaced by `title`
+- Modules' mount method now accepts an HTML Element rather than a selector
+- `imageDrop` has been renamed to `imageUpload`
+- `browser` has been renamed to `datasetBrowser`
+- `progress` has been renamed to `trainingProgress`
+- `confusion` has been renamed to `confusionMatrix`
+- Dashboards now have a `closable` option, which is disabled by default.
+- Dataset's `$created` stream has been replaced by a more generic `$changes` stream
+
+### New Features
+
+- Mobilenet and COCO-SSD are now cached in the browser's storage for improved network performance
+- Model Storage: models can be saved and loaded from datastores. They can be automatically synchronized with a datastore. File import/export is also possible
+- Dataset upload has been added
+- Dashboard now expose $active and $page streams to monitor its state
+- Dashboard settings have been improved (TODO: give details + breaking changes)
+- `trainingPlot`: The logs to display can be be configured in the module's options. It is possible to pass either a scalar (incremental mode) an array for each log.
+- `imageUpload` now supports target image dimensions and automatically crops and resizes images
+- `datasetBrowser` now allows the selection, deletion or class change of instances
+
+### New Modules
+
+- `tfGenericModel`
+- `fileUpload`
+- `imageUpload`
+- `onnxImageClassifier`
+
+### Deprecated Modules
+
+- `tfImageClassifier`
+- `imageDrop`
+
+### Performance Improvements
+
+- Datasets have been updated for improved performance
+- Memory management related to TFJS has been improved
+
+### Bug Fixes
+
+- `webcam` now supports multiple video devices
+- Quite a few others...
+
+### Internal Changes
+
+- Build system update
+- Examples now use vite
+- Svelte components now use Typescript
+- Module's `description` was unused and has been removed
+- Data stores have a `$services` stream and have been simplified
+- The architecture for models has been improved
+
+## 0.1.0-alpha.4
+
+- First-ish published version

README.md

@@ -27,7 +27,7 @@ Marcelle is a web-based reactive toolkit facilitating the design of custom ML pi
 
 ## Installation
 
-[See online documentation](https://marcelle.netlify.app/installation.html)
+[See online documentation](https://marcelle.dev/installation.html)
 
 Using NPM:
 
@@ -43,19 +43,10 @@ yarn add @marcellejs/core@next
 
 ## Usage
 
-See [Online Documentation](https://marcelle.netlify.app) and [Examples](https://glitch.com/@marcelle.crew/marcelle-examples).
+See [Online Documentation](https://marcelle.dev)
 
 ## 🛠 Developing
 
-### Setting up VSCode
-
-[Download VSCode](https://code.visualstudio.com/) and install the following extensions:
-
-- [Svelte for VS Code](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode)
-- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
-- [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
-- [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)
-
 ### Building the library
 
 To build for production:
@@ -72,6 +63,15 @@ yarn dev # OR npm run dev
 
 To generate the typescript declaration files (useful for the rollup example), run `yarn build:types` in production, or `yarn dev:types` in development.
 
+### Setting up VSCode
+
+[Download VSCode](https://code.visualstudio.com/) and install the following extensions:
+
+- [Svelte for VS Code](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode)
+- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
+- [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
+- [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)
+
 ## ✍️ Authors
 
 - [@JulesFrancoise](https://github.com/JulesFrancoise/)

docs/api/data-stores.md

@@ -23,19 +23,15 @@ The `location` argument can either be:
 - `'localStorage'`: in this case the data is stored using the browser's web storage. It will persist after page refresh, but there is a limitation on the quantity of data that can be stored.
 - a URL indicating the location of the server. The server needs to be programmed with Feathers, as described [below](#generating-a-server-application).
 
-### .authenticate()
+### .connect()
 
 ```tsx
-async authenticate(): Promise<User>
+async connect(): Promise<User>
 ```
 
-### .createService()
+Connect to the data store backend. If using a remote backend, the server must be running, otherwise an exception will be thrown. If the backend is configured with user authentication, this method will require the user to log in.
 
-```tsx
-createService: (name: string): void;
-```
-
-Create a new service with the given `name`. If a service with the same name already exist, it will not be replaced. Note that the name of the service determines the name of the collection in the data store. It is important to choose name to avoid potential conflicts between collections.
+This method is automatically called by dependent modules such as datasets and models.
 
 ### .login()
 
@@ -55,7 +51,9 @@ async logout(): Promise<void>
 service(name: string): Service<unknown>
 ```
 
-Get the Feathers Service instance, which API is documented on [Feathers' wesite](https://docs.feathersjs.com/api/services.html#service-methods). The interface exposes `find`, `get`, `create`, `update`, `patch` and `remove` methods for manipulating the data.
+Get the Feathers service instance with the given `name`. If the service does not exist yet, it will be automatically created. Note that the name of the service determines the name of the collection in the data store. It is important to choose name to avoid potential conflicts between collections.
+
+The method returnsa Feathers Service instance, which API is documented on [Feathers' wesite](https://docs.feathersjs.com/api/services.html#service-methods). The interface exposes `find`, `get`, `create`, `update`, `patch` and `remove` methods for manipulating the data.
 
 ### .signup()
 

docs/api/interfaces.md

@@ -18,43 +18,42 @@ The following factory function creates and returns an empty Dashboard Applicatio
 marcelle.dashboard({
   title: string;
   author: string;
-  datasets: Dataset[];
+  closable?: boolean;
 }): Dashboard
 ```
 
 #### Parameters
 
-| Parameter | Type             | Description                             | Required |
-| --------- | ---------------- | --------------------------------------- | :------: |
-| title     | String           | The application's title.                |          |
-| author    | String           | The application's authors/credits.      |          |
-| datasets  | Array\<Dataset\> | The datasets present in the application |          |
+| Parameter | Type    | Description                                                                                                                                 | Required | Default |
+| --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------- | :------: | :-----: |
+| title     | String  | The application's title.                                                                                                                    |          |         |
+| author    | String  | The application's authors/credits.                                                                                                          |          |         |
+| closable  | boolean | Whether the dashboard can be closed. This flag adds a close button to the menu bar, and is useful when the dashboard is displayed on demand |          |  false  |
+
+#### Streams
+
+### Streams
+
+| Name     | Type    | Description                                                        | Hold |
+| -------- | ------- | ------------------------------------------------------------------ | :--: |
+| \$active | boolean | Stream specifying whether the dashboard is active (visible) or not |  ✓   |
+| \$page   | string  | Stream indicating the current page slug                            |  ✓   |
 
 #### Example
 
 ```js
-const dashboard = marcelle.dashboard({
+const dash = dashboard({
   title: 'Marcelle Example - Dashboard',
   author: 'Marcelle Pirates Crew',
-  datasets: [trainingSet],
 });
 
-dashboard
+dash
   .page('Data Management')
   .useLeft(input, featureExtractor)
   .use([label, capture], trainingSetBrowser);
-dashboard
-  .page('Training')
-  .use(
-    b,
-    'KNN (k-Nearest Neighbors)',
-    paramsKNN,
-    progressKNN,
-    'MLP (Multilayer Perceptron)',
-    paramsMLP,
-    progressMLP,
-    plotTrainingMLP,
-  );
+dash.page('Training').use(params, b, prog, plotTraining);
+dash.page('Batch Prediction').use(predictButton, confusionMatrix);
+dash.settings.dataStores(store).datasets(trainingSet).models(classifier).predictions(batchMLP);
 ```
 
 #### .destroy()
@@ -73,6 +72,14 @@ Dashboard.page(name: string): DashboardPage
 
 Create a new page on the dashboard entitled `name`, and returns the corresponding [`DashboardPage`](#dashboardpage) instance.
 
+#### .settings
+
+```tsx
+Dashboard.settings: DashboardSettings
+```
+
+The dashboard's settings. See [`DashboardSettings`](#dashboardsettings).
+
 #### .start()
 
 ```tsx
@@ -108,6 +115,53 @@ useLeft(...modules: Module[]): DashboardPage {
 
 The `useLeft` method is similar to use except that modules are placed on the left column of the dashboard page. The method only accept modules as argument.
 
+### DashboardSettings
+
+Specifies the contents of the dashboards settings panel.
+
+#### .datasets()
+
+```tsx
+datasets(...datasets: Dataset[]): DashboardSettings
+```
+
+Specify the datasets that can be managed in the settings panel.
+
+#### .dataStores()
+
+```tsx
+dataStores(...stores: DataStore[]): DashboardSettings
+```
+
+Specify the data stores that can be managed in the settings panel.
+
+#### .models()
+
+```tsx
+models(...models: Model<any, any>[]): DashboardSettings
+```
+
+Specify the models that can be managed in the settings panel.
+#### .predictions()
+
+```tsx
+predictions(...predictions: BatchPrediction[]): DashboardSettings
+```
+
+Specify the batch prediction modules that can be managed in the settings panel.
+
+#### .use()
+
+```tsx
+use(...modules: Array<Module | Module[] | string>): DashboardSettings
+```
+
+The `use` method takes an arbitrary number of arguments specifying the modules to display on the page. By default, modules are stacked vertically in the right column of the page. Each argument can either be:
+
+- A module ([`Module`](/api/modules/)), displayed full-width on the right column
+- An array of module, which are then distributed horizontally
+- A string, which defines a section title
+
 ## Wizards
 
 Wizards are dedicated to the creation of step-by-step guides for beginners or end-users. Wizards are inspired by Teachable machine's [_training wizard_ demo](https://glitch.com/~tm-wizard) that walks users through training their machine learning model. Marcelle wizards are more flexible and allow developers to specify what modules should be displayed at every step. Therefore, wizards can be used to assist the training but could also guide users in the analysis of the model's result.

docs/api/modules/README.md

@@ -6,14 +6,13 @@ sidebarDepth: 2
 
 Modules are the building blocks of a Marcelle application and handle various tasks such as capturing images from a webcam, defining a new dataset, instancing a Deep Neural Network (DNN), displaying a confusion matrix, or monitoring the confidence of a model prediction, to name a few. Because Marcelle emphasizes instant feedback and user interaction, modules often provide a graphical user interface that can be displayed on demand in a web application.
 
-The specification of modules is somehow loose in the library, to allow for easy customization and extension. A module is essentially a JavaScript object exposing a set of reactive streams and providing a `mount` method for displaying their associated view. All modules have string properties called `name` and `description`. The `name` is used as title for the cards displayed in a dashboard. Each module instance also carries a unique `id`.
+The specification of modules is somehow loose in the library, to allow for easy customization and extension. A module is essentially a JavaScript object exposing a set of reactive streams and providing a `mount` method for displaying their associated view. All modules have a string property called `title` used as title for the cards displayed in a dashboard. Each module instance also carries a unique `id`.
 
 The minimal TypeScript interface corresponding to a module is as follows:
 
 ```ts
 interface Module {
-  name: string; // module name
-  description: string; // module description
+  title: string; // module name
   id: string; // module id (unique per instance)
   mount(targetSelector?: string): void; // mount the module's view in the DOM
   destroy(): void; // destroy the module's view
@@ -37,10 +36,10 @@ mlp.$training;
 ## Views
 
 ```tsx
-Module.mount(targetSelector?: string): void;
+Module.mount(target?: HTMLElement): void;
 ```
 
-Modules should implement a `mount` method that displays the view assotiated with the module instance. The method takes as argument a CSS selector specifying the target element where the view should be mounted. If no selector is passed, the module will attempt mounting the module on the DOM element which id is the `id` of the module.
+Modules should implement a `mount` method that displays the view assotiated with the module instance. The method takes as optional argument the target HTML element where the view should be mounted. If no target is passed, the module will attempt mounting the module on the DOM element which id is the `id` of the module.
 
 Marcelle does not enforce the use of a particular web framework for programming views, however it uses [Svelte](https://svelte.dev/) internally, for its performance and its native compatibility with reactive data streams.