License: MIT | Version: 1.0.1
A set of blocks to create, train and evaluate deep learning models.
Snippets are examples and templates using the package's widgets.
| Name | Import Path |
|---|---|
| MNIST Image To Number | @webwriter/deep-learning-model/snippets/MNIST-Image-to-Number.html |
A widget that allows feature engineering on a dataset
Use with a CDN (e.g. jsdelivr):
<link href="https://cdn.jsdelivr.net/npm/@webwriter/deep-learning-model/widgets/webwriter-feature-engineering.css" rel="stylesheet">
<script type="module" src="https://cdn.jsdelivr.net/npm/@webwriter/deep-learning-model/widgets/webwriter-feature-engineering.js"></script>
<webwriter-feature-engineering></webwriter-feature-engineering>Or use with a bundler (e.g. Vite):
npm install @webwriter/deep-learning-model
<link href="@webwriter/deep-learning-model/widgets/webwriter-feature-engineering.css" rel="stylesheet">
<script type="module" src="@webwriter/deep-learning-model/widgets/webwriter-feature-engineering.js"></script>
<webwriter-feature-engineering></webwriter-feature-engineering>| Name (Attribute Name) | Type | Description | Default | Reflects |
|---|---|---|---|---|
samplesSave (samplesSave) |
string |
The original decompressed data in a json string with format of RawSample[] | - | ✓ |
fieldProps (fieldProps) |
Record<string, FieldProp> |
Stores the settings of the feature columns | - | ✓ |
limit (limit) |
number |
The number of samples used for the dataset | 1000 |
✓ |
editMode (editMode) |
"edit"|"feat"|"read"|"hidden" |
What students will be able to edit in the explorable. Ranging from "edit" = everything, "feat" = only feature settings, "read" = read only, to "hidden" = invisible to the students. | "edit" |
✓ |
Fields including properties and attributes define the current state of the widget and offer customization options.
| Name | Description | Parameters |
|---|---|---|
getDataset |
Returns the current dataset in both raw and tensor form | - |
isReady |
Checks whether the dataset is ready to be used | - |
Methods allow programmatic access to the widget.
| Name | Description |
|---|---|
| change | Fired when the dataset changes. Detail contains { dataset: Dataset, tensorDataset: TransformedDataset } |
Events are dispatched by the widget after certain triggers.
| Name | Value |
|---|
The editing config defines how explorable authoring tools such as WebWriter treat the widget.
No public slots, custom CSS properties, or CSS parts.
A widget to design AI models using a visual editor.
Use with a CDN (e.g. jsdelivr):
<link href="https://cdn.jsdelivr.net/npm/@webwriter/deep-learning-model/widgets/webwriter-model-designing.css" rel="stylesheet">
<script type="module" src="https://cdn.jsdelivr.net/npm/@webwriter/deep-learning-model/widgets/webwriter-model-designing.js"></script>
<webwriter-model-designing></webwriter-model-designing>Or use with a bundler (e.g. Vite):
npm install @webwriter/deep-learning-model
<link href="@webwriter/deep-learning-model/widgets/webwriter-model-designing.css" rel="stylesheet">
<script type="module" src="@webwriter/deep-learning-model/widgets/webwriter-model-designing.js"></script>
<webwriter-model-designing></webwriter-model-designing>| Name (Attribute Name) | Type | Description | Default | Reflects |
|---|---|---|---|---|
state (state) |
string |
Stores the state of the model editor as a json string | - | ✓ |
featureWidgetId (featureWidgetId) |
string |
Stores the reference id of the widget where the dataset is used from | - | ✓ |
editMode (editMode) |
"edit"|"layer"|"read"|"hidden" |
What students will be able to edit in the explorable. Ranging from "edit" = everything, "layer" = only layer settings, "read" = read only, to "hidden" = invisible to the students. | "edit" |
✓ |
maxModelParameters (maxModelParameters) |
number |
The maximum number of total parameters allowed for training the model. Only checked by the training widget. | 100000 |
✓ |
maxLayerParameters (maxLayerParameters) |
number |
The maximum number of parameters allowed per layer to allow training the model. | 10000 |
✓ |
currentCanvas |
ModelEditor |
Reference to the current model editor canvas | - | ✗ |
Fields including properties and attributes define the current state of the widget and offer customization options.
| Name | Description | Parameters |
|---|---|---|
zoomIn |
Zoom the canvas in | - |
zoomOut |
Zoom the canvas out | - |
zoomReset |
Reset the zoom of the canvas | - |
getModel |
Exports the current model design | - |
Methods allow programmatic access to the widget.
| Name | Value |
|---|
The editing config defines how explorable authoring tools such as WebWriter treat the widget.
No public slots, events, custom CSS properties, or CSS parts.
A widget to train models designed in the model designing widget using datasets created in the feature engineering widget.
Use with a CDN (e.g. jsdelivr):
<link href="https://cdn.jsdelivr.net/npm/@webwriter/deep-learning-model/widgets/webwriter-model-training.css" rel="stylesheet">
<script type="module" src="https://cdn.jsdelivr.net/npm/@webwriter/deep-learning-model/widgets/webwriter-model-training.js"></script>
<webwriter-model-training></webwriter-model-training>Or use with a bundler (e.g. Vite):
npm install @webwriter/deep-learning-model
<link href="@webwriter/deep-learning-model/widgets/webwriter-model-training.css" rel="stylesheet">
<script type="module" src="@webwriter/deep-learning-model/widgets/webwriter-model-training.js"></script>
<webwriter-model-training></webwriter-model-training>| Name (Attribute Name) | Type | Description | Default | Reflects |
|---|---|---|---|---|
featureWidgetId (featureWidgetId) |
string |
The feature engineering widget to use as data source for training the model. | - | ✓ |
modelWidgetId (modelWidgetId) |
string |
The model design widget to use as model source for training. | - | ✓ |
cache (cache) |
boolean |
If true, the transformed training samples will be cached for faster training. | - | ✓ |
currentBackend (currentBackend) |
"webgl" | "cpu" |
The prefered tfjs backend | "webgl" |
✓ |
modelVersions (modelVersions) |
Record<string, string> |
Stores the model jsons with a name like "best" or "epoch-20" for loading by the inference and test widgets | {} |
✓ |
editMode (editMode) |
"edit"|"hidden" |
"edit" means that students can use the widget to train a model while "hidden" means the widget will be invisible to student but the trained models can be used by other widgets. | "edit" |
✓ |
Fields including properties and attributes define the current state of the widget and offer customization options.
| Name | Description | Parameters |
|---|---|---|
resolveOutput |
Used to recursively connect the inputs via the layers to the output nodes. | layer: Layer, inputs: Record<string, TF.SymbolicTensor>, resolvedLayers: Record<number, any> |
buildModel |
Builds the complete tfjs model using the layers from the model design widget. It sets the correct input names for the input layers as "in_". The output layers dependency graph is build and the loss is applied to the output tensor for training. | - |
lossStringToFunction |
Converts a loss string to the corresponding tfjs loss function. | loss: string |
getModel |
Returns the model for named checkpoints for other widgets to use. | name |
getAvailableModels |
Returns the available model checkpoints | - |
initModel |
Initializes the model for training and preps the UI. | - |
training |
Runs the tf training loop and keeps the UI up-to-date | - |
saveCurrentModel |
Saves the current model as a checkpoint for other widgets to use later. | name |
Methods allow programmatic access to the widget.
| Name | Description |
|---|---|
| finished | Fired when the training process has finished. |
| epoch | Fired after each epoch during training. |
Events are dispatched by the widget after certain triggers.
| Name | Value |
|---|
The editing config defines how explorable authoring tools such as WebWriter treat the widget.
No public slots, custom CSS properties, or CSS parts.
A widget to run inference using a trained model and features created in the feature engineering widget.
Use with a CDN (e.g. jsdelivr):
<link href="https://cdn.jsdelivr.net/npm/@webwriter/deep-learning-model/widgets/webwriter-model-prediction.css" rel="stylesheet">
<script type="module" src="https://cdn.jsdelivr.net/npm/@webwriter/deep-learning-model/widgets/webwriter-model-prediction.js"></script>
<webwriter-model-prediction></webwriter-model-prediction>Or use with a bundler (e.g. Vite):
npm install @webwriter/deep-learning-model
<link href="@webwriter/deep-learning-model/widgets/webwriter-model-prediction.css" rel="stylesheet">
<script type="module" src="@webwriter/deep-learning-model/widgets/webwriter-model-prediction.js"></script>
<webwriter-model-prediction></webwriter-model-prediction>| Name (Attribute Name) | Type | Description | Default | Reflects |
|---|---|---|---|---|
featureWidgetId (featureWidgetId) |
string |
The id of the feature engineering widget to use as input. | - | ✓ |
modelWidgetId (modelWidgetId) |
string |
The id of the model training widget to use as model source. | - | ✓ |
Fields including properties and attributes define the current state of the widget and offer customization options.
| Name | Value |
|---|
The editing config defines how explorable authoring tools such as WebWriter treat the widget.
No public methods, slots, events, custom CSS properties, or CSS parts.
A widget that allows evaluating a trained model using various tests.
Use with a CDN (e.g. jsdelivr):
<link href="https://cdn.jsdelivr.net/npm/@webwriter/deep-learning-model/widgets/webwriter-model-evaluation.css" rel="stylesheet">
<script type="module" src="https://cdn.jsdelivr.net/npm/@webwriter/deep-learning-model/widgets/webwriter-model-evaluation.js"></script>
<webwriter-model-evaluation></webwriter-model-evaluation>Or use with a bundler (e.g. Vite):
npm install @webwriter/deep-learning-model
<link href="@webwriter/deep-learning-model/widgets/webwriter-model-evaluation.css" rel="stylesheet">
<script type="module" src="@webwriter/deep-learning-model/widgets/webwriter-model-evaluation.js"></script>
<webwriter-model-evaluation></webwriter-model-evaluation>| Name (Attribute Name) | Type | Description | Default | Reflects |
|---|---|---|---|---|
featureWidgetId (featureWidgetId) |
string |
The id of the feature engineering widget to use as feature source. | - | ✓ |
modelWidgetId (modelWidgetId) |
string |
The id of the model training widget to use as model source. | - | ✓ |
Fields including properties and attributes define the current state of the widget and offer customization options.
| Name | Description | Parameters |
|---|---|---|
getModelSelect |
Renders the model select field allowing the user to change the model checkpoint that is used for testing. | - |
Methods allow programmatic access to the widget.
| Name | Value |
|---|
The editing config defines how explorable authoring tools such as WebWriter treat the widget.
No public slots, events, custom CSS properties, or CSS parts.
Generated with @webwriter/build@1.9.0