From 22864e049ec9777c2badf27557afe6f79b04525d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jules=20Franc=CC=A7oise?= Date: Thu, 4 Nov 2021 14:33:18 +0100 Subject: [PATCH 01/17] Improve `modelParameters` to support other types --- CHANGELOG.md | 4 +++ docs/api/components/model-interfaces.md | 20 +++++++++++++- .../model-parameters/ParamWrapper.svelte | 26 +++++++++++++++++++ src/components/model-parameters/index.ts | 5 ++-- .../model-parameters.component.ts | 8 +++++- .../model-parameters.view.svelte | 15 +++++------ src/ui/components/Input.svelte | 4 +-- src/ui/components/Number.svelte | 13 +++++++--- src/ui/components/NumberArray.svelte | 5 ++-- src/ui/components/Switch.svelte | 2 -- src/ui/index.ts | 7 +++++ 11 files changed, 85 insertions(+), 24 deletions(-) create mode 100644 src/components/model-parameters/ParamWrapper.svelte diff --git a/CHANGELOG.md b/CHANGELOG.md index 8407105b..f4cca367 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,9 @@ # Marcelle changelog +## Next + +- Improved `modelParameters` to support other types + ## 0.4.4 - Various minor bugfixes diff --git a/docs/api/components/model-interfaces.md b/docs/api/components/model-interfaces.md index 5b5ff4bd..f3c55337 100644 --- a/docs/api/components/model-interfaces.md +++ b/docs/api/components/model-interfaces.md @@ -35,7 +35,7 @@ The component will automatically display all parameters with appropriate GUI Wid Screenshot of the parameters component -### Example +### Examples ```js const classifier = marcelle.mlp({ layers: [64, 32], epochs: 20 }); @@ -44,6 +44,24 @@ const params = marcelle.parameters(classifier); dashboard.page('Training').use(params); ``` +```js +const parametrable = { + parameters: { + int: new Stream(12, true), + float: new Stream(-0.0000045, true), + intArray: new Stream(Array.from(Array(3), () => Math.floor(100 * Math.random()))), + floatArray: new Stream(Array.from(Array(3), () => Math.random())), + string: new Stream('test'), + menu: new Stream('three'), + bool: new Stream(false), + }, +}; + +const p = modelParameters(parametrable, { + menu: { type: 'menu', options: ['one', 'two', 'three'] }, +}); +``` + ## trainingProgress ```tsx diff --git a/src/components/model-parameters/ParamWrapper.svelte b/src/components/model-parameters/ParamWrapper.svelte new file mode 100644 index 00000000..eda387a6 --- /dev/null +++ b/src/components/model-parameters/ParamWrapper.svelte @@ -0,0 +1,26 @@ + + +
+ {#if spec.type === 'menu' && Array.isArray(spec.options) && spec.options.length > 0} + + {/if} +
diff --git a/src/components/model-parameters/index.ts b/src/components/model-parameters/index.ts index c188bd75..8df3a1a5 100644 --- a/src/components/model-parameters/index.ts +++ b/src/components/model-parameters/index.ts @@ -1,11 +1,12 @@ +import type { ParamConfig } from './model-parameters.component'; import { ModelParameters } from './model-parameters.component'; import type { Parametrable } from '../../core/types'; -export function modelParameters(m: Parametrable): ModelParameters { +export function modelParameters(m: Parametrable, config: ParamConfig = {}): ModelParameters { if (!m.parameters) { throw new Error('The argument is not a valid component with parameters'); } - return new ModelParameters(m); + return new ModelParameters(m, config); } export type { ModelParameters }; diff --git a/src/components/model-parameters/model-parameters.component.ts b/src/components/model-parameters/model-parameters.component.ts index 1b63505a..0baa4d50 100644 --- a/src/components/model-parameters/model-parameters.component.ts +++ b/src/components/model-parameters/model-parameters.component.ts @@ -2,14 +2,19 @@ import { Component } from '../../core/component'; import { Parametrable } from '../../core/types'; import View from './model-parameters.view.svelte'; +type WidgetType = 'menu' | 'text' | 'boolean' | 'number' | 'number array' | 'auto'; +export type ParamConfig = Record; + export class ModelParameters extends Component { title = 'modelParameters'; #component: Parametrable; + config: ParamConfig; - constructor(m: Parametrable) { + constructor(m: Parametrable, config: ParamConfig = {}) { super(); this.#component = m; + this.config = config; } mount(target?: HTMLElement): void { @@ -21,6 +26,7 @@ export class ModelParameters extends Component { props: { title: this.title, parameters: this.#component.parameters, + config: this.config, }, }); } diff --git a/src/components/model-parameters/model-parameters.view.svelte b/src/components/model-parameters/model-parameters.view.svelte index e258b145..8d86ab72 100644 --- a/src/components/model-parameters/model-parameters.view.svelte +++ b/src/components/model-parameters/model-parameters.view.svelte @@ -1,15 +1,14 @@ @@ -17,10 +16,10 @@ {#each Object.entries(parameters) as [key, stream]}

{key}

- {#if typeof stream.value === 'number'} - - {:else if Array.isArray(stream.value) && stream.value.length && typeof stream.value[0] === 'number'} - + {#if key in config} + + {:else} + {/if}
{/each} diff --git a/src/ui/components/Input.svelte b/src/ui/components/Input.svelte index c6fc6a2a..0a5308de 100644 --- a/src/ui/components/Input.svelte +++ b/src/ui/components/Input.svelte @@ -1,13 +1,12 @@ @@ -41,5 +40,4 @@ input:invalid:focus { @apply ring-red-300; } - diff --git a/src/ui/components/Number.svelte b/src/ui/components/Number.svelte index 4688dbd7..58868085 100644 --- a/src/ui/components/Number.svelte +++ b/src/ui/components/Number.svelte @@ -8,14 +8,13 @@ function changeValue(e: Event) { const target = e.target as HTMLInputElement; - const x = parseInt(target.value, 10); + const x = parseFloat(target.value); if (!Number.isNaN(x)) { stream.set(x); } else { target.value = stream.value.toString(); } } -
@@ -28,7 +27,14 @@ > - - + changeValue(e, i)} {disabled} @@ -118,5 +118,4 @@ button:hover[disabled] { @apply bg-white text-gray-300 border-gray-300 cursor-not-allowed ring-0; } - diff --git a/src/ui/components/Switch.svelte b/src/ui/components/Switch.svelte index d6d79324..97cefad5 100644 --- a/src/ui/components/Switch.svelte +++ b/src/ui/components/Switch.svelte @@ -2,7 +2,6 @@ export let text = ''; export let checked = false; export let disabled = false; -