root/llama.cpp
1
0
Fork 0
mirror of https://github.com/ggerganov/llama.cpp.git synced 2024-12-27 03:44:35 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

Do not save/load image_data to localStorage

Browse Source
This commit is contained in:
M. Yusuf Sarıgöz 2023-10-22 19:08:09 +03:00
parent f67d971344
commit 5359fb9267
2 changed files with 2117 additions and 2101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4113
examples/server/index.html.hpp
View File

File diff suppressed because it is too large Load Diff

105
examples/server/public/index.html
View File

@ -125,6 +125,7 @@
background-color: #222; background-color: #222;
color: #ddd; color: #ddd;
} }
code { code {
font-family: monospace; font-family: monospace;
padding: 0.1em 0.3em; padding: 0.1em 0.3em;
@ -141,7 +142,8 @@
display: inline; display: inline;
} }
header, footer { header,
footer {
text-align: center; text-align: center;
} }
@ -163,6 +165,7 @@
0% { 0% {
background-position: 0%; background-position: 0%;
} }
100% { 100% {
background-position: 100%; background-position: 100%;
} }
@ -181,6 +184,7 @@
--loading-color-1: #22222200; --loading-color-1: #22222200;
--loading-color-2: #222222ff; --loading-color-2: #222222ff;
} }
.popover-content { .popover-content {
background-color: black; background-color: black;
} }
@ -275,6 +279,7 @@
// saved templates were successfuly imported. // saved templates were successfuly imported.
console.log('Processing saved templates and updating default template') console.log('Processing saved templates and updating default template')
params.value = { ...params.value, image_data: [] };
//console.log(importedTemplates); //console.log(importedTemplates);
savedUserTemplates.value = importedTemplates; savedUserTemplates.value = importedTemplates;
@ -299,8 +304,9 @@
function userTemplateApply(t) { function userTemplateApply(t) {
session.value = t.data.session; session.value = t.data.session;
session.value = {...session.value, image_selected: ''}; session.value = { ...session.value, image_selected: '' };
params.value = t.data.params; params.value = t.data.params;
params.value = { ...params.value, image_data: [] };
} }
function userTemplateResetToDefaultAndApply() { function userTemplateResetToDefaultAndApply() {
@ -391,14 +397,14 @@
throw new Error("already running"); throw new Error("already running");
} }
controller.value = new AbortController(); controller.value = new AbortController();
for await (const chunk of llama(prompt, llamaParams, {controller: controller.value})) { for await (const chunk of llama(prompt, llamaParams, { controller: controller.value })) {
const data = chunk.data; const data = chunk.data;
if (data.stop) { if (data.stop) {
while ( while (
currentMessages.length > 0 && currentMessages.length > 0 &&
currentMessages[currentMessages.length - 1].content.match(/\n$/) != null currentMessages[currentMessages.length - 1].content.match(/\n$/) != null
) { ) {
currentMessages.pop(); currentMessages.pop();
} }
transcriptUpdate([...history, [char, currentMessages]]) transcriptUpdate([...history, [char, currentMessages]])
@ -406,7 +412,7 @@
} else { } else {
currentMessages.push(data); currentMessages.push(data);
slot_id = data.slot_id; slot_id = data.slot_id;
if(selected_image && !data.multimodal) { if (selected_image && !data.multimodal) {
alert("The server was no compiled for multimodal or the model projector can't be loaded."); alert("The server was no compiled for multimodal or the model projector can't be loaded.");
return; return;
} }
@ -445,7 +451,7 @@
) )
).join("\n"), ).join("\n"),
}); });
if(selected_image) { if (selected_image) {
prompt = `A chat between a curious human and an artificial intelligence assistant. The assistant gives helpful, detailed, and polite answers to the human's questions.\nUSER:[img-10]${msg}\nASSISTANT:`; prompt = `A chat between a curious human and an artificial intelligence assistant. The assistant gives helpful, detailed, and polite answers to the human's questions.\nUSER:[img-10]${msg}\nASSISTANT:`;
} }
await runLlama(prompt, { await runLlama(prompt, {
@ -460,7 +466,7 @@
console.log('already running...'); console.log('already running...');
return; return;
} }
const {prompt} = session.value; const { prompt } = session.value;
transcriptUpdate([...session.value.transcript, ["", prompt]]); transcriptUpdate([...session.value.transcript, ["", prompt]]);
await runLlama(prompt, { await runLlama(prompt, {
...params.value, ...params.value,
@ -485,19 +491,21 @@
e.preventDefault(); e.preventDefault();
document.getElementById("fileInput").click(); document.getElementById("fileInput").click();
document.getElementById("fileInput").addEventListener("change", function (event) { document.getElementById("fileInput").addEventListener("change", function (event) {
const selectedFile = event.target.files[0]; const selectedFile = event.target.files[0];
if (selectedFile) { if (selectedFile) {
const reader = new FileReader(); const reader = new FileReader();
reader.onload = function () { reader.onload = function () {
const image_data = reader.result; const image_data = reader.result;
session.value = {...session.value, image_selected: image_data}; session.value = { ...session.value, image_selected: image_data };
params.value = {...params.value, image_data: [ params.value = {
{ data: image_data.replace(/data:image\/[^;]+;base64,/, ''), id: 10 }] } ...params.value, image_data: [
}; { data: image_data.replace(/data:image\/[^;]+;base64,/, ''), id: 10 }]
selected_image = true;
reader.readAsDataURL(selectedFile);
} }
}); };
selected_image = true;
reader.readAsDataURL(selectedFile);
}
});
} }
function MessageInput() { function MessageInput() {
@ -574,7 +582,7 @@
data; data;
message = html`<${Markdownish} text=${template(text)} />` message = html`<${Markdownish} text=${template(text)} />`
} }
if(user) { if (user) {
return html`<p key=${index}><strong>${template(user)}:</strong> ${message}</p>` return html`<p key=${index}><strong>${template(user)}:</strong> ${message}</p>`
} else { } else {
return html`<p key=${index}>${message}</p>` return html`<p key=${index}>${message}</p>`
@ -583,7 +591,7 @@
return html` return html`
<section id="chat" ref=${container}> <section id="chat" ref=${container}>
<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}"/>
${messages.flatMap(chatLine)} ${messages.flatMap(chatLine)}
</section>`; </section>`;
}; };
@ -602,7 +610,7 @@
const converter = new SchemaConverter( const converter = new SchemaConverter(
grammarJsonSchemaPropOrder.value grammarJsonSchemaPropOrder.value
.split(',') .split(',')
.reduce((acc, cur, i) => ({...acc, [cur.trim()]: i}), {}) .reduce((acc, cur, i) => ({ ...acc, [cur.trim()]: i }), {})
) )
converter.visit(schema, '') converter.visit(schema, '')
params.value = { params.value = {
@ -614,7 +622,7 @@
} }
} }
const FloatField = ({label, max, min, name, step, value}) => { const FloatField = ({ label, max, min, name, step, value }) => {
return html` return html`
<div> <div>
<label for="${name}">${label}</label> <label for="${name}">${label}</label>
@ -624,7 +632,7 @@
` `
}; };
const IntField = ({label, max, min, name, value}) => { const IntField = ({ label, max, min, name, value }) => {
return html` return html`
<div> <div>
<label for="${name}">${label}</label> <label for="${name}">${label}</label>
@ -707,7 +715,7 @@
${GrammarControl()} ${GrammarControl()}
</fieldset> </fieldset>
` `
); );
const CompletionConfigForm = () => ( const CompletionConfigForm = () => (
html` html`
@ -729,20 +737,20 @@
${session.value.type === 'chat' ? ChatConfigForm() : CompletionConfigForm()} ${session.value.type === 'chat' ? ChatConfigForm() : CompletionConfigForm()}
<fieldset class="two"> <fieldset class="two">
${IntField({label: "Predictions", max: 2048, min: -1, name: "n_predict", value: params.value.n_predict})} ${IntField({ label: "Predictions", max: 2048, min: -1, name: "n_predict", value: params.value.n_predict })}
${FloatField({label: "Temperature", max: 1.5, min: 0.0, name: "temperature", step: 0.01, value: params.value.temperature})} ${FloatField({ label: "Temperature", max: 1.5, min: 0.0, name: "temperature", step: 0.01, value: params.value.temperature })}
${FloatField({label: "Penalize repeat sequence", max: 2.0, min: 0.0, name: "repeat_penalty", step: 0.01, value: params.value.repeat_penalty})} ${FloatField({ label: "Penalize repeat sequence", max: 2.0, min: 0.0, name: "repeat_penalty", step: 0.01, value: params.value.repeat_penalty })}
${IntField({label: "Consider N tokens for penalize", max: 2048, min: 0, name: "repeat_last_n", value: params.value.repeat_last_n})} ${IntField({ label: "Consider N tokens for penalize", max: 2048, min: 0, name: "repeat_last_n", value: params.value.repeat_last_n })}
${IntField({label: "Top-K sampling", max: 100, min: -1, name: "top_k", value: params.value.top_k})} ${IntField({ label: "Top-K sampling", max: 100, min: -1, name: "top_k", value: params.value.top_k })}
${FloatField({label: "Top-P sampling", max: 1.0, min: 0.0, name: "top_p", step: 0.01, value: params.value.top_p})} ${FloatField({ label: "Top-P sampling", max: 1.0, min: 0.0, name: "top_p", step: 0.01, value: params.value.top_p })}
</fieldset> </fieldset>
<details> <details>
<summary>More options</summary> <summary>More options</summary>
<fieldset class="two"> <fieldset class="two">
${FloatField({label: "TFS-Z", max: 1.0, min: 0.0, name: "tfs_z", step: 0.01, value: params.value.tfs_z})} ${FloatField({ label: "TFS-Z", max: 1.0, min: 0.0, name: "tfs_z", step: 0.01, value: params.value.tfs_z })}
${FloatField({label: "Typical P", max: 1.0, min: 0.0, name: "typical_p", step: 0.01, value: params.value.typical_p})} ${FloatField({ label: "Typical P", max: 1.0, min: 0.0, name: "typical_p", step: 0.01, value: params.value.typical_p })}
${FloatField({label: "Presence penalty", max: 1.0, min: 0.0, name: "presence_penalty", step: 0.01, value: params.value.presence_penalty})} ${FloatField({ label: "Presence penalty", max: 1.0, min: 0.0, name: "presence_penalty", step: 0.01, value: params.value.presence_penalty })}
${FloatField({label: "Frequency penalty", max: 1.0, min: 0.0, name: "frequency_penalty", step: 0.01, value: params.value.frequency_penalty})} ${FloatField({ label: "Frequency penalty", max: 1.0, min: 0.0, name: "frequency_penalty", step: 0.01, value: params.value.frequency_penalty })}
</fieldset> </fieldset>
<hr /> <hr />
<fieldset class="three"> <fieldset class="three">
@ -751,11 +759,11 @@
<label><input type="radio" name="mirostat" value="1" checked=${params.value.mirostat == 1} oninput=${updateParamsInt} /> Mirostat v1</label> <label><input type="radio" name="mirostat" value="1" checked=${params.value.mirostat == 1} oninput=${updateParamsInt} /> Mirostat v1</label>
<label><input type="radio" name="mirostat" value="2" checked=${params.value.mirostat == 2} oninput=${updateParamsInt} /> Mirostat v2</label> <label><input type="radio" name="mirostat" value="2" checked=${params.value.mirostat == 2} oninput=${updateParamsInt} /> Mirostat v2</label>
</div> </div>
${FloatField({label: "Mirostat tau", max: 10.0, min: 0.0, name: "mirostat_tau", step: 0.01, value: params.value.mirostat_tau})} ${FloatField({ label: "Mirostat tau", max: 10.0, min: 0.0, name: "mirostat_tau", step: 0.01, value: params.value.mirostat_tau })}
${FloatField({label: "Mirostat eta", max: 1.0, min: 0.0, name: "mirostat_eta", step: 0.01, value: params.value.mirostat_eta})} ${FloatField({ label: "Mirostat eta", max: 1.0, min: 0.0, name: "mirostat_eta", step: 0.01, value: params.value.mirostat_eta })}
</fieldset> </fieldset>
<fieldset> <fieldset>
${IntField({label: "Show Probabilities", max: 10, min: 0, name: "n_probs", value: params.value.n_probs})} ${IntField({ label: "Show Probabilities", max: 10, min: 0, name: "n_probs", value: params.value.n_probs })}
</fieldset> </fieldset>
</details> </details>
</form> </form>
@ -794,20 +802,20 @@
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>
` `
@ -886,9 +894,9 @@
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>
@ -988,8 +996,9 @@
<body> <body>
<div id="container"> <div id="container">
<input type="file" id="fileInput" accept="image/*" style="display: none;"></div> <input type="file" id="fileInput" accept="image/*" style="display: none;">
</div>
<div id="portal"></div> <div id="portal"></div>
</body> </body>
</html> </html>