ui: updated spacing issue and typo
This commit is contained in:
Deepak Seth
parent
8cf2f35223
commit
0b5a5aeadc
1 changed files with 117 additions and 117 deletions
|
|
@ -621,25 +621,25 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
return html`
|
return html`
|
||||||
<form onsubmit=${submit}>
|
<form onsubmit=${submit}>
|
||||||
<div>
|
<div>
|
||||||
<textarea
|
<textarea
|
||||||
className=${generating.value ? "loading" : null}
|
className=${generating.value ? "loading" : null}
|
||||||
oninput=${(e) => message.value = e.target.value}
|
oninput=${(e) => message.value = e.target.value}
|
||||||
onkeypress=${enterSubmits}
|
onkeypress=${enterSubmits}
|
||||||
placeholder="Say something..."
|
placeholder="Say something..."
|
||||||
rows=2
|
rows=2
|
||||||
type="text"
|
type="text"
|
||||||
value="${message}"
|
value="${message}"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="right">
|
<div class="right">
|
||||||
<button type="submit" disabled=${generating.value}>Send</button>
|
<button type="submit" disabled=${generating.value}>Send</button>
|
||||||
<button onclick=${uploadImage}>Upload Image</button>
|
<button onclick=${uploadImage}>Upload Image</button>
|
||||||
<button onclick=${stop} disabled=${!generating.value}>Stop</button>
|
<button onclick=${stop} disabled=${!generating.value}>Stop</button>
|
||||||
<button onclick=${reset}>Reset</button>
|
<button onclick=${reset}>Reset</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
`
|
`
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -649,11 +649,11 @@
|
||||||
runCompletion();
|
runCompletion();
|
||||||
}
|
}
|
||||||
return html`
|
return html`
|
||||||
<div>
|
<div>
|
||||||
<button onclick=${submit} type="button" disabled=${generating.value}>Start</button>
|
<button onclick=${submit} type="button" disabled=${generating.value}>Start</button>
|
||||||
<button onclick=${stop} disabled=${!generating.value}>Stop</button>
|
<button onclick=${stop} disabled=${!generating.value}>Stop</button>
|
||||||
<button onclick=${reset}>Reset</button>
|
<button onclick=${reset}>Reset</button>
|
||||||
</div>`;
|
</div>`;
|
||||||
}
|
}
|
||||||
|
|
||||||
const ChatLog = (props) => {
|
const ChatLog = (props) => {
|
||||||
|
|
@ -697,12 +697,12 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
return html`
|
return html`
|
||||||
<div id="chat" ref=${container} key=${messages.length}>
|
<div id="chat" ref=${container} key=${messages.length}>
|
||||||
<img style="width: 60%;${!session.value.image_selected ? `display: none;` : ``}" src="${session.value.image_selected}"/>
|
<img style="width: 60%;${!session.value.image_selected ? `display: none;` : ``}" src="${session.value.image_selected}"/>
|
||||||
<span class="response" contenteditable=${isCompletionMode} ref=${container} oninput=${handleCompletionEdit}>
|
<span class="response" contenteditable=${isCompletionMode} ref=${container} oninput=${handleCompletionEdit}>
|
||||||
${messages.flatMap(chatLine)}
|
${messages.flatMap(chatLine)}
|
||||||
</span>
|
</span>
|
||||||
</div>`;
|
</div>`;
|
||||||
};
|
};
|
||||||
|
|
||||||
const ConfigForm = (props) => {
|
const ConfigForm = (props) => {
|
||||||
|
|
@ -733,20 +733,20 @@
|
||||||
|
|
||||||
const FloatField = ({ label, max, min, name, step, value }) => {
|
const FloatField = ({ label, max, min, name, step, value }) => {
|
||||||
return html`
|
return html`
|
||||||
<div class="range_field">
|
<div class="range_field">
|
||||||
<label for="${name}">${label} <span>${value}</span></label>
|
<label for="${name}">${label} <span>${value}</span></label>
|
||||||
<input type="range" id="${name}" min="${min}" max="${max}" step="${step}" name="${name}" value="${value}" oninput=${updateParamsFloat} />
|
<input type="range" id="${name}" min="${min}" max="${max}" step="${step}" name="${name}" value="${value}" oninput=${updateParamsFloat} />
|
||||||
</div>
|
</div>
|
||||||
`
|
`
|
||||||
};
|
};
|
||||||
|
|
||||||
const IntField = ({ label, max, min, name, value }) => {
|
const IntField = ({ label, max, min, name, value }) => {
|
||||||
return html`
|
return html`
|
||||||
<div class="range_field">
|
<div class="range_field">
|
||||||
<label for="${name}">${label} <span>${value}</span></label>
|
<label for="${name}">${label} <span>${value}</span></label>
|
||||||
<input type="range" id="${name}" min="${min}" max="${max}" name="${name}" value="${value}" oninput=${updateParamsInt} />
|
<input type="range" id="${name}" min="${min}" max="${max}" name="${name}" value="${value}" oninput=${updateParamsInt} />
|
||||||
</div>
|
</div>
|
||||||
`
|
`
|
||||||
};
|
};
|
||||||
|
|
||||||
const userTemplateReset = (e) => {
|
const userTemplateReset = (e) => {
|
||||||
|
|
@ -769,12 +769,12 @@
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
// autosave template on every change
|
// autosave template on every change
|
||||||
userTemplateAutosave()
|
userTemplateAutosave()
|
||||||
}, [session.value])// removed params.value as it would re render the page.
|
}, [session.value])
|
||||||
|
|
||||||
const GrammarControl = () => (
|
const GrammarControl = () => (
|
||||||
html`
|
html`
|
||||||
<details>
|
<details>
|
||||||
<summary>Grammer Configuration</summary>
|
<summary>Grammar Configuration</summary>
|
||||||
<label for="template">Grammar</label>
|
<label for="template">Grammar</label>
|
||||||
<textarea id="grammar" name="grammar" placeholder="Use gbnf or JSON Schema+convert" value="${params.value.grammar}" rows=4 oninput=${updateParams}/>
|
<textarea id="grammar" name="grammar" placeholder="Use gbnf or JSON Schema+convert" value="${params.value.grammar}" rows=4 oninput=${updateParams}/>
|
||||||
<input type="text" name="prop-order" placeholder="order: prop1,prop2,prop3" oninput=${updateGrammarJsonSchemaPropOrder} />
|
<input type="text" name="prop-order" placeholder="order: prop1,prop2,prop3" oninput=${updateGrammarJsonSchemaPropOrder} />
|
||||||
|
|
@ -785,49 +785,49 @@
|
||||||
|
|
||||||
const PromptControlFieldSet = () => (
|
const PromptControlFieldSet = () => (
|
||||||
html`
|
html`
|
||||||
<fieldset>
|
<fieldset>
|
||||||
<div>
|
<div>
|
||||||
<label htmlFor="prompt">Prompt</label>
|
<label htmlFor="prompt">Prompt</label>
|
||||||
<textarea type="text" name="prompt" value="${session.value.prompt}" oninput=${updateSession}/>
|
<textarea type="text" name="prompt" value="${session.value.prompt}" oninput=${updateSession}/>
|
||||||
</div>
|
</div>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
`
|
`
|
||||||
);
|
);
|
||||||
|
|
||||||
const ChatConfigForm = () => (
|
const ChatConfigForm = () => (
|
||||||
html`
|
html`
|
||||||
${PromptControlFieldSet()}
|
${PromptControlFieldSet()}
|
||||||
|
|
||||||
<fieldset class="two">
|
<fieldset class="two">
|
||||||
<div>
|
<div>
|
||||||
<label for="user">User name</label>
|
<label for="user">User name</label>
|
||||||
<input type="text" name="user" value="${session.value.user}" oninput=${updateSession} />
|
<input type="text" name="user" value="${session.value.user}" oninput=${updateSession} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label for="bot">Bot name</label>
|
<label for="bot">Bot name</label>
|
||||||
<input type="text" name="char" value="${session.value.char}" oninput=${updateSession} />
|
<input type="text" name="char" value="${session.value.char}" oninput=${updateSession} />
|
||||||
</div>
|
</div>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
|
|
||||||
<fieldset>
|
<fieldset>
|
||||||
<div>
|
<div>
|
||||||
<label for="template">Prompt template</label>
|
<label for="template">Prompt template</label>
|
||||||
<textarea id="template" name="template" value="${session.value.template}" rows=4 oninput=${updateSession}/>
|
<textarea id="template" name="template" value="${session.value.template}" rows=4 oninput=${updateSession}/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label for="template">Chat history template</label>
|
<label for="template">Chat history template</label>
|
||||||
<textarea id="template" name="historyTemplate" value="${session.value.historyTemplate}" rows=1 oninput=${updateSession}/>
|
<textarea id="template" name="historyTemplate" value="${session.value.historyTemplate}" rows=1 oninput=${updateSession}/>
|
||||||
</div>
|
</div>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
`
|
`
|
||||||
);
|
);
|
||||||
|
|
||||||
const CompletionConfigForm = () => (
|
const CompletionConfigForm = () => (
|
||||||
html`
|
html`
|
||||||
${PromptControlFieldSet()}
|
${PromptControlFieldSet()}
|
||||||
`
|
`
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -884,7 +884,7 @@
|
||||||
)
|
)
|
||||||
|
|
||||||
if (props?.header)
|
if (props?.header)
|
||||||
return html`<${ModeSelector} />`
|
return ModeSelector()
|
||||||
|
|
||||||
return html`
|
return html`
|
||||||
<form class="flexform">
|
<form class="flexform">
|
||||||
|
|
@ -928,30 +928,30 @@
|
||||||
const pColor = found ? probColor(found.prob) : 'transparent'
|
const pColor = found ? probColor(found.prob) : 'transparent'
|
||||||
|
|
||||||
const popoverChildren = html`
|
const popoverChildren = html`
|
||||||
<div class="prob-set">
|
<div class="prob-set">
|
||||||
${probs.map((p, index) => {
|
${probs.map((p, index) => {
|
||||||
return html`
|
return html`
|
||||||
<div
|
<div
|
||||||
key=${index}
|
key=${index}
|
||||||
title=${`prob: ${p.prob}`}
|
title=${`prob: ${p.prob}`}
|
||||||
style=${{
|
style=${{
|
||||||
padding: '0.3em',
|
padding: '0.3em',
|
||||||
backgroundColor: p.tok_str === content ? probColor(p.prob) : 'transparent'
|
backgroundColor: p.tok_str === content ? probColor(p.prob) : 'transparent'
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<span>${p.tok_str}: </span>
|
<span>${p.tok_str}: </span>
|
||||||
<span>${Math.floor(p.prob * 100)}%</span>
|
<span>${Math.floor(p.prob * 100)}%</span>
|
||||||
</div>
|
</div>
|
||||||
`
|
`
|
||||||
})}
|
})}
|
||||||
</div>
|
</div>
|
||||||
`
|
`
|
||||||
|
|
||||||
return html`
|
return html`
|
||||||
<${Popover} style=${{ backgroundColor: pColor }} popoverChildren=${popoverChildren}>
|
<${Popover} style=${{ backgroundColor: pColor }} popoverChildren=${popoverChildren}>
|
||||||
${msg.content.match(/\n/gim) ? html`<br />` : msg.content}
|
${msg.content.match(/\n/gim) ? html`<br />` : msg.content}
|
||||||
</>
|
</>
|
||||||
`
|
`
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1015,22 +1015,22 @@
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
return html`
|
return html`
|
||||||
<span style=${props.style} ref=${buttonRef} onClick=${togglePopover}>${props.children}</span>
|
<span style=${props.style} ref=${buttonRef} onClick=${togglePopover}>${props.children}</span>
|
||||||
${isOpen.value && html`
|
${isOpen.value && html`
|
||||||
<${Portal} into="#portal">
|
<${Portal} into="#portal">
|
||||||
<div
|
<div
|
||||||
ref=${popoverRef}
|
ref=${popoverRef}
|
||||||
class="popover-content"
|
class="popover-content"
|
||||||
style=${{
|
style=${{
|
||||||
top: position.value.top,
|
top: position.value.top,
|
||||||
left: position.value.left,
|
left: position.value.left,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
${props.popoverChildren}
|
${props.popoverChildren}
|
||||||
</div>
|
</div>
|
||||||
</${Portal}>
|
</${Portal}>
|
||||||
`}
|
`}
|
||||||
`;
|
`;
|
||||||
};
|
};
|
||||||
|
|
||||||
// Source: preact-portal (https://github.com/developit/preact-portal/blob/master/src/preact-portal.js)
|
// Source: preact-portal (https://github.com/developit/preact-portal/blob/master/src/preact-portal.js)
|
||||||
|
|
@ -1073,10 +1073,10 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
this.remote = render(html`
|
this.remote = render(html`
|
||||||
<${PortalProxy} context=${this.context}>
|
<${PortalProxy} context=${this.context}>
|
||||||
${show && this.props.children || null}
|
${show && this.props.children || null}
|
||||||
</${PortalProxy}>
|
</${PortalProxy}>
|
||||||
`, this.into, this.remote);
|
`, this.into, this.remote);
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
|
@ -1129,4 +1129,4 @@
|
||||||
<div id="portal"></div>
|
<div id="portal"></div>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue