File size: 2,641 Bytes
74e8f2f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 |
/**
* @license
* Copyright Big Vision Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/**
* @fileoverview Controls to choose model.
*/
import {html, LitElement} from 'lit';
import {getModels} from '../lit_demo/constants';
import {app} from '../lit_demo/app';
import {customElement, property} from 'lit/decorators.js';
import styles from './model-controls.scss';
/**
* Shows controls for model selection, progress bar, and status text.
*/
@customElement('model-controls')
export class ModelControls extends LitElement {
static override styles = [styles];
@property({attribute: false})
progress: number = 0;
@property({attribute: false})
status: string = 'Initializing...';
constructor() {
super();
app.models.addListener(this.onModelUpdate.bind(this));
app.models.load(getModels()[0]);
}
onModelUpdate(progress: number, message?: string) {
this.progress = progress;
if (message) this.status = message;
}
onModelChange(event: Event) {
const target = event.target as HTMLSelectElement;
const name = target.value;
app.models.load(name).catch((error) => {
this.status = `ERROR loading model "${name}": ${error}`;
});
}
async setModel(model: string) {
if (getModels().indexOf(model) === -1) {
throw new Error(`Model "${model}" not found!`);
}
await this.updateComplete;
const dropdown = this.shadowRoot!.querySelector('#model_dropdown') as HTMLSelectElement;
dropdown.value = model;
dropdown.dispatchEvent(new Event('change'));
}
override render() {
const options = getModels().map((model: string) =>
html`<option value="${model}">${model}</option>`);
return html`
<div class="controls">
<label for="model_dropdown">Model:</label>
<select @change=${this.onModelChange} id="model_dropdown">
${options}
</select>
<progress value=${this.progress * 100} max=100></progress>
<div class="status">${this.status}</div>
</div>
`;
}
}
declare global {
interface HTMLElementTagNameMap {
'model-controls': ModelControls;
}
}
|