You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
-`tfImageClassifier` has been replaced by `tfGenericModel`
8
+
- Module `name` property has been replaced by `title`
9
+
- Modules' mount method now accepts an HTML Element rather than a selector
10
+
-`imageDrop` has been renamed to `imageUpload`
11
+
-`browser` has been renamed to `datasetBrowser`
12
+
-`progress` has been renamed to `trainingProgress`
13
+
-`confusion` has been renamed to `confusionMatrix`
14
+
- Dashboards now have a `closable` option, which is disabled by default.
15
+
- Dataset's `$created` stream has been replaced by a more generic `$changes` stream
16
+
17
+
### New Features
18
+
19
+
- Mobilenet and COCO-SSD are now cached in the browser's storage for improved network performance
20
+
- Model Storage: models can be saved and loaded from datastores. They can be automatically synchronized with a datastore. File import/export is also possible
21
+
- Dataset upload has been added
22
+
- Dashboard now expose $active and $page streams to monitor its state
23
+
- Dashboard settings have been improved (TODO: give details + breaking changes)
24
+
-`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.
25
+
-`imageUpload` now supports target image dimensions and automatically crops and resizes images
26
+
-`datasetBrowser` now allows the selection, deletion or class change of instances
27
+
28
+
### New Modules
29
+
30
+
-`tfGenericModel`
31
+
-`fileUpload`
32
+
-`imageUpload`
33
+
-`onnxImageClassifier`
34
+
35
+
### Deprecated Modules
36
+
37
+
-`tfImageClassifier`
38
+
-`imageDrop`
39
+
40
+
### Performance Improvements
41
+
42
+
- Datasets have been updated for improved performance
43
+
- Memory management related to TFJS has been improved
44
+
45
+
### Bug Fixes
46
+
47
+
-`webcam` now supports multiple video devices
48
+
- Quite a few others...
49
+
50
+
### Internal Changes
51
+
52
+
- Build system update
53
+
- Examples now use vite
54
+
- Svelte components now use Typescript
55
+
- Module's `description` was unused and has been removed
56
+
- Data stores have a `$services` stream and have been simplified
To generate the typescript declaration files (useful for the rollup example), run `yarn build:types` in production, or `yarn dev:types` in development.
74
65
66
+
### Setting up VSCode
67
+
68
+
[Download VSCode](https://code.visualstudio.com/) and install the following extensions:
69
+
70
+
-[Svelte for VS Code](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode)
Copy file name to clipboardExpand all lines: docs/api/data-stores.md
+7-9Lines changed: 7 additions & 9 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -23,19 +23,15 @@ The `location` argument can either be:
23
23
-`'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.
24
24
- a URL indicating the location of the server. The server needs to be programmed with Feathers, as described [below](#generating-a-server-application).
25
25
26
-
### .authenticate()
26
+
### .connect()
27
27
28
28
```tsx
29
-
asyncauthenticate(): Promise<User>
29
+
asyncconnect(): Promise<User>
30
30
```
31
31
32
-
### .createService()
32
+
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.
33
33
34
-
```tsx
35
-
createService: (name:string):void;
36
-
```
37
-
38
-
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.
34
+
This method is automatically called by dependent modules such as datasets and models.
39
35
40
36
### .login()
41
37
@@ -55,7 +51,9 @@ async logout(): Promise<void>
55
51
service(name: string): Service<unknown>
56
52
```
57
53
58
-
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.
54
+
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.
55
+
56
+
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.
| author | String | The application's authors/credits. |||
31
+
| 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 |
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.
110
117
118
+
### DashboardSettings
119
+
120
+
Specifies the contents of the dashboards settings panel.
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:
160
+
161
+
- A module ([`Module`](/api/modules/)), displayed full-width on the right column
162
+
- An array of module, which are then distributed horizontally
163
+
- A string, which defines a section title
164
+
111
165
## Wizards
112
166
113
167
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.
Copy file name to clipboardExpand all lines: docs/api/modules/README.md
+4-5Lines changed: 4 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -6,14 +6,13 @@ sidebarDepth: 2
6
6
7
7
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.
8
8
9
-
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`.
9
+
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`.
10
10
11
11
The minimal TypeScript interface corresponding to a module is as follows:
12
12
13
13
```ts
14
14
interfaceModule {
15
-
name:string; // module name
16
-
description:string; // module description
15
+
title:string; // module name
17
16
id:string; // module id (unique per instance)
18
17
mount(targetSelector?:string):void; // mount the module's view in the DOM
19
18
destroy():void; // destroy the module's view
@@ -37,10 +36,10 @@ mlp.$training;
37
36
## Views
38
37
39
38
```tsx
40
-
Module.mount(targetSelector?:string): void;
39
+
Module.mount(target?:HTMLElement): void;
41
40
```
42
41
43
-
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.
42
+
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.
44
43
45
44
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.
0 commit comments