39 lines
1.6 KiB
JavaScript
39 lines
1.6 KiB
JavaScript
// Add the model picker without duplicating the compact canvas viewer script.
|
|
window.addEventListener('load', async () => {
|
|
const prompt = document.querySelector('#prompt');
|
|
const form = prompt?.closest('.promptbox');
|
|
if (!prompt || !form) return;
|
|
const models = await fetch('/api/models').then(r => r.json());
|
|
const label = document.createElement('label');
|
|
label.htmlFor = 'motionModel'; label.textContent = 'Motion model';
|
|
const select = document.createElement('select');
|
|
select.id = 'motionModel';
|
|
for (const model of models) {
|
|
const option = document.createElement('option');
|
|
option.value = model.id;
|
|
option.disabled = !model.available;
|
|
option.textContent = `${model.label}${model.available ? '' : ' — coming soon'}`;
|
|
select.append(option);
|
|
}
|
|
const hint = document.createElement('div'); hint.className = 'hint';
|
|
const update = () => {
|
|
const model = models.find(item => item.id === select.value);
|
|
hint.textContent = model.available
|
|
? `${model.skeleton} · ${model.upstream}`
|
|
: `${model.skeleton} · ${model.reason}`;
|
|
};
|
|
select.onchange = update;
|
|
form.insertBefore(label, prompt); form.insertBefore(select, prompt); form.insertBefore(hint, prompt);
|
|
update();
|
|
|
|
const nativeFetch = window.fetch.bind(window);
|
|
window.fetch = (input, init) => {
|
|
if (typeof input === 'string' && input.endsWith('/api/generate') && init?.body) {
|
|
const body = JSON.parse(init.body);
|
|
body.model = select.value;
|
|
return nativeFetch(input, {...init, body: JSON.stringify(body)});
|
|
}
|
|
return nativeFetch(input, init);
|
|
};
|
|
});
|