Skip to content

Commit 5eabdef

Browse files
cookie-teacookie-tea
committed
Documentation + Release 1.1.4
1 parent 366f56c commit 5eabdef

File tree

6 files changed

+7872
-7228
lines changed

6 files changed

+7872
-7228
lines changed

‎README.md‎

Lines changed: 95 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,105 @@
1-
# Get started
2-
In [WebWriter](https://run.webwriter.app), install the "Neural Network" package and click to insert.
1+
# Neural,Network (`@webwriter/neural-network@1.1.4`)
2+
[License: MIT](LICENSE) | Version: 1.1.4
33

4+
Deep learning visualization for feed-forward networks with custom datasets, training and prediction.
45

5-
## Usage outside of WebWriter
6-
The project can be built for different platforms by using the premade vite build config. For this, run `vite build --config vite.config.js`. When using npm, the command can be executed with `npm run
7-
create`. You can test the result either by using `npm run start` or by using a different tool for serving locally. Note that an index html file needs to be placed inside the dist folder for the project to
8-
work properly in a browser. In general, make sure that you specify the correct paths to access the custom assets.
6+
## Snippets
7+
[Snippets](https://webwriter.app/docs/snippets/snippets/) are examples and templates using the package's widgets.
98

9+
| Name | Import Path |
10+
| :--: | :---------: |
11+
| Pima Indians Diabetes | `@webwriter/neural-network/snippets/Pima-Indians-Diabetes.html` |
12+
| Boston House Pricing | `@webwriter/neural-network/snippets/Boston-House-Pricing.html` |
1013

1114

12-
# Deep learning simulation for WebWriter
1315

14-
This widget adds a deep learning simulation to WebWriter. As a teacher, you can:
16+
## `NeuralNetwork` (`<webwriter-neural-network>`)
1517

16-
- choose from a number of preconfigured examples
17-
- build a custom network topology
18-
- create custom datasets
19-
- customize training parameters
20-
- test the trained model by predicting
21-
- choose what options you want to give your students (ranging from allowing them to edit nearly everything you can up to providing them a 'view and explore'-only experience)
22-
- provide students with help in a Q&A section
2318

24-
## State of the widget
19+
### Usage
2520

26-
### Bugs
21+
Use with a CDN (e.g. [jsdelivr](https://jsdelivr.com)):
22+
```html
23+
<link href="https://cdn.jsdelivr.net/npm/@webwriter/neural-network/widgets/webwriter-neural-network.css" rel="stylesheet">
24+
<script type="module" src="https://cdn.jsdelivr.net/npm/@webwriter/neural-network/widgets/webwriter-neural-network.js"></script>
25+
<webwriter-neural-network></webwriter-neural-network>
26+
```
2727

28-
- prediction for classification data sets results in NaN
29-
- weights are falsely assigned during training for complex network structures containing layers with multiple incoming layers
30-
- validation for creating data sets is missing at some parts
31-
- when clicking on quick setup options, nothing happen
28+
Or use with a bundler (e.g. [Vite](https://vite.dev)):
29+
30+
```
31+
npm install @webwriter/neural-network
32+
```
33+
34+
```html
35+
<link href="@webwriter/neural-network/widgets/webwriter-neural-network.css" rel="stylesheet">
36+
<script type="module" src="@webwriter/neural-network/widgets/webwriter-neural-network.js"></script>
37+
<webwriter-neural-network></webwriter-neural-network>
38+
```
39+
40+
## Fields
41+
| Name (Attribute Name) | Type | Description | Default | Reflects |
42+
| :-------------------: | :--: | :---------: | :-----: | :------: |
43+
| `NeuralNetwork.scopedElements` | `object` | Scoped element registry for child components used by this widget. | `{ "canvas-area": CCanvasArea, "menu-area": MenuArea, "c-network": CNetwork, "theme-switch": ThemeSwitch }` | ✗ |
44+
| `setupStatus` | `SetupStatus` | Setup state of the widget. | - | ✗ |
45+
| `editable` (`editable`) | `boolean` | Whether editing is enabled. | - | ✓ |
46+
| `settings` (`settings`) | `Settings` | Application settings. | - | ✓ |
47+
| `qAndA` (`qAndA`) | `QAndAEntry[]` | Help/Q&A content. | - | ✓ |
48+
| `canvas` | `CCanvas` | Canvas instance created by the canvas-area. | - | ✗ |
49+
| `network` | `CNetwork` | Network instance. | - | ✗ |
50+
| `layerConfs` (`layerConfs`) | `CLayerConf[]` | Layer configuration list. | - | ✓ |
51+
| `layerConnectionConfs` (`layerConnectionConfs`) | `CLayerConnectionConf[]` | Layer connection configuration list between layers. | - | ✓ |
52+
| `dataSet` (`dataSet`) | `DataSet` | Active dataset. | - | ✓ |
53+
| `availableDataSets` (`availableDataSets`) | `DataSet[]` | Available datasets. | - | ✓ |
54+
| `trainOptions` (`trainOptions`) | `TrainOptions` | Training options. | - | ✓ |
55+
| `modelConf` | `ModelConf` | Current model configuration. | - | ✗ |
56+
| `selected` | `Selected` | Current multi-selection state. | - | ✗ |
57+
| `selectedEle` | `SelectedEle` | Current single selected element. | - | ✗ |
58+
| `panel` | `boolean` | Whether the right panel is open. | - | ✗ |
59+
| `theme` | `Theme` | Active theme object with style string. | - | ✗ |
60+
| `setupStatusProvider` | - | - | `new ContextProvider(this, {context: setupStatusContext, initialValue: SetupUtils.defaultSetupStatus})` | ✗ |
61+
| `editableProvider` | - | - | `new ContextProvider(this, {context: editableContext, initialValue: false})` | ✗ |
62+
| `settingsProvider` | - | - | `new ContextProvider(this, {context: settingsContext, initialValue: JSON.parse(JSON.stringify(SettingsUtils.defaultSettings))})` | ✗ |
63+
| `qAndAProvider` | - | - | `new ContextProvider(this, {context: qAndAContext, initialValue: [...QAndAUtils.defaultQAndA]})` | ✗ |
64+
| `canvasProvider` | - | - | `new ContextProvider(this, {context: canvasContext})` | ✗ |
65+
| `networkProvider` | - | - | `new ContextProvider(this, {context: networkContext})` | ✗ |
66+
| `layerConfsProvider` | - | - | `new ContextProvider(this, {context: layerConfsContext, initialValue: []})` | ✗ |
67+
| `layerConnectionConfsProvider` | - | - | `new ContextProvider(this, {context: layerConnectionConfsContext, initialValue: []})` | ✗ |
68+
| `dataSetProvider` | - | - | `new ContextProvider(this, {context: dataSetContext, initialValue: DataSetUtils.defaultDataSet})` | ✗ |
69+
| `availableDataSetsProvider` | - | - | `new ContextProvider(this, {context: availableDataSetsContext, initialValue: DataSetUtils.defaultAvailableDataSets})` | ✗ |
70+
| `trainOptionsProvider` | - | - | `new ContextProvider(this, {context: trainOptionsContext, initialValue: <TrainOptions>(JSON.parse(JSON.stringify(ModelUtils.defaultTrainOptions)))})` | ✗ |
71+
| `modelConfProvider` | - | - | `new ContextProvider(this, {context: modelConfContext, initialValue: <ModelConf>(JSON.parse(JSON.stringify(ModelUtils.defaultModelConf)))})` | ✗ |
72+
| `selectedProvider` | - | - | `new ContextProvider(this, {context: selectedContext, initialValue: {}})` | ✗ |
73+
| `selectedEleProvider` | - | - | `new ContextProvider(this, {context: selectedEleContext})` | ✗ |
74+
| `panelProvider` | - | - | `new ContextProvider(this, {context: panelContext})` | ✗ |
75+
| `themeProvider` | - | - | `new ContextProvider(this, {context: themeContext, initialValue: ThemeUtils.lightTheme})` | ✗ |
76+
77+
*Fields including [properties](https://developer.mozilla.org/en-US/docs/Glossary/Property/JavaScript) and [attributes](https://developer.mozilla.org/en-US/docs/Glossary/Attribute) define the current state of the widget and offer customization options.*
78+
79+
## Events
80+
| Name | Description |
81+
| :--: | :---------: |
82+
| focus | - |
83+
84+
*[Events](https://developer.mozilla.org/en-US/docs/Web/Events) are dispatched by the widget after certain triggers.*
85+
86+
## Custom CSS properties
87+
| Name | Description |
88+
| :--: | :---------: |
89+
| --sl-color-neutral-0 | Host background color (forwarded from Shoelace). |
90+
| --sl-color-neutral-50 | Divider color (forwarded from Shoelace). |
91+
92+
*[Custom CSS properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties) offer defined customization of the widget's style.*
93+
94+
## Editing config
95+
| Name | Value |
96+
| :--: | :---------: |
97+
98+
99+
*The [editing config](https://webwriter.app/docs/packages/configuring/#editingconfig) defines how explorable authoring tools such as [WebWriter](https://webwriter.app) treat the widget.*
100+
101+
*No public methods, slots, or CSS parts.*
102+
103+
104+
---
105+
*Generated with @webwriter/build@1.9.0*

‎README_STANDALONE.md‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
# Get started
2+
In [WebWriter](https://run.webwriter.app), install the "Neural Network" package and click to insert.
3+
4+
5+
## Usage outside of WebWriter
6+
The project can be built for different platforms by using the premade vite build config. For this, run `vite build --config vite.config.js`. When using npm, the command can be executed with `npm run
7+
create`. You can test the result either by using `npm run start` or by using a different tool for serving locally. Note that an index html file needs to be placed inside the dist folder for the project to
8+
work properly in a browser. In general, make sure that you specify the correct paths to access the custom assets.
9+
10+
11+
12+
# Deep learning simulation for WebWriter
13+
14+
This widget adds a deep learning simulation to WebWriter. As a teacher, you can:
15+
16+
- choose from a number of preconfigured examples
17+
- build a custom network topology
18+
- create custom datasets
19+
- customize training parameters
20+
- test the trained model by predicting
21+
- choose what options you want to give your students (ranging from allowing them to edit nearly everything you can up to providing them a 'view and explore'-only experience)
22+
- provide students with help in a Q&A section
23+
24+
## State of the widget
25+
26+
### Bugs
27+
28+
- prediction for classification data sets results in NaN
29+
- weights are falsely assigned during training for complex network structures containing layers with multiple incoming layers
30+
- validation for creating data sets is missing at some parts
31+
- when clicking on quick setup options, nothing happen

0 commit comments

Comments
 (0)