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 that walks users through training their machine learning model. Marcelle wizards are more flexible and allow developers to specify what components 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.

Wizard

The following factory function creates and returns an empty Wizard:

wizard(): Wizard

properties

Name	Type	Description	Hold
$current	Stream<number>	Stream specifying the current page index	✓

Example

const wizard = marcelle.wizard();

wizard
  .page()
  .title('Record examples for class A')
  .description('Hold on the record button to capture training examples for class A')
  .use(input, wizardButton, wizardText)
  .page()
  .title('Record examples for class B')
  .description('Hold on the record button to capture training examples for class B')
  .use(input, wizardButton, wizardText)
  .page()
  .title('Train the model')
  .description('Now that we have collected images, we can train the model from these examples.')
  .use(b, prog)
  .page()
  .title('Test the classifier')
  .description('Reproduce your gestures to test if the classifier works as expected')
  .use([input, plotResults]);

.hide()

hide(): void

Hide the dashboard application. This destroys the current view, if it exists, but preserves the configuration, meaning that the dashboard can still be re-started.

.show()

show(): void

Show the dashboard application. The application, a Svelte component instance, is mounted on the document's body, creating an overlay on the current web page without destroying any content.

.page()

page(): WizardPage

Add a new page to the wizard, and returns the corresponding WizardPage instance.

WizardPage

They are created using the page method of a Dashboard.

.description()

description(desc: string): WizardPage

Specifies the description, or help, of the current step.

.page()

page(): WizardPage

Add a page to the parent wizard.

.title()

title(title: string): WizardPage

Define the title of the step.

.use()

use(...components: Array<Component | Component[] | string>): WizardPage

Add a set of components to the step. The syntax is similar to the one for Dashoards. By default, components are stacked vertically in the right column of the page. Each argument can either be:

• A component (Component), displayed full-width on the right column
• An array of component, which are then distributed horizontally
• A string, which defines a section title