Mirrors/llama.cpp
1
0
Fork 0
mirror of https://github.com/ggerganov/llama.cpp.git synced 2025-01-08 11:46:53 +01:00
Code Issues Packages Projects Releases Wiki Activity

[wip] chat improvements

Browse Source
This commit is contained in:
Henri Vasserman 2023-07-20 03:48:48 +03:00
parent 43694ca867
commit 082dd81286
No known key found for this signature in database
GPG Key ID: 2995FC0F58B1A986
2 changed files with 949 additions and 854 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

File diff suppressed because it is too large Load Diff

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

@ -11,7 +11,11 @@
color: #000; color: #000;
font-family: system-ui; font-family: system-ui;
font-size: 90%; font-size: 90%;
} max-width: 600px;
min-width: 300px;
line-height: 1.2;
margin: 0 auto;
padding: 0 0.5em; }
#container { #container {
margin: 0em auto; margin: 0em auto;
@ -36,12 +40,29 @@
padding: 0.5em; padding: 0.5em;
} }
body { .bubble {
max-width: 600px; border: 1px solid;
min-width: 300px; border-radius: 10px;
line-height: 1.2; padding: 5px;
margin: 0 auto; }
padding: 0 0.5em;
.user {
background-color: #161616;
color: #d6d6d6;
margin-left: 20%;
}
.asst {
background-color: #d6d6d6;
color: #161616;
text-align: left;
margin-right: 20%;
}
.typing {
color: #888;
text-align: left;
font-size: 120%;
} }
p { p {
@ -113,13 +134,14 @@
import { llama } from '/completion.js' import { llama } from '/completion.js'
const session = signal({ const session = signal({
prompt: "This is a conversation between user and llama, a friendly chatbot. respond in simple markdown.", system: "A chat between a curious user and a pirate.",
template: "{{prompt}}\n\n{{history}}\n{{char}}:", message: "{{system}}\n\n### Instruction:\n{{user}}\n\n### Response:\n{{assistant}}",
historyTemplate: "{{name}}: {{message}}", stop: ["###"],
transcript: [], transcript: [],
type: "chat", type: "chat",
char: "llama", char: "llama",
user: "User", user: "User",
fullprompt: "",
}) })
const params = signal({ const params = signal({
@ -161,19 +183,17 @@
} }
controller.value = new AbortController() controller.value = new AbortController()
transcriptUpdate([...session.value.transcript, ["{{user}}", msg]])
const prompt = template(session.value.template, {
message: msg,
history: session.value.transcript.flatMap(([name, message]) => template(session.value.historyTemplate, {name, message})).join("\n"),
})
let currentMessage = ''
const history = session.value.transcript const history = session.value.transcript
const system = history.length == 0 ? session.value.system : ""
transcriptUpdate([...history, { system, user: msg, assistant: "" }])
const prompt = session.value.transcript.map(t => template(session.value.message, t)).join("").trimEnd()
session.value = { ...session.value, fullprompt: prompt } // debug
let currentMessage = ''
const llamaParams = { const llamaParams = {
...params.value, ...params.value,
stop: ["</s>", template("{{char}}:"), template("{{user}}:")], stop: session.stop,
} }
for await (const chunk of llama(prompt, llamaParams, { controller: controller.value })) { for await (const chunk of llama(prompt, llamaParams, { controller: controller.value })) {
@ -183,7 +203,7 @@
// remove leading whitespace // remove leading whitespace
currentMessage = currentMessage.replace(/^\s+/, "") currentMessage = currentMessage.replace(/^\s+/, "")
transcriptUpdate([...history, ["{{char}}", currentMessage]]) transcriptUpdate([...history, { system, user: msg, assistant: currentMessage }])
if (data.stop) { if (data.stop) {
console.log("Completion finished: '", currentMessage, "', summary: ", data) console.log("Completion finished: '", currentMessage, "', summary: ", data)
@ -235,6 +255,7 @@
<button onclick=${stop} disabled=${generating}>Stop</button> <button onclick=${stop} disabled=${generating}>Stop</button>
<button onclick=${reset}>Reset</button> <button onclick=${reset}>Reset</button>
</div> </div>
<pre>${session.value.fullprompt/* debug */}</pre>
</form> </form>
` `
} }
@ -250,52 +271,56 @@
} }
}, [messages]) }, [messages])
const chatLine = ([user, msg]) => {
return html`<p key=${msg}><strong>${template(user)}:</strong> <${Markdownish} text=${template(msg)} /></p>`
}
return html` return html`
<section id="chat" ref=${container}> <section id="chat" ref=${container}>
${messages.flatMap(chatLine)} ${messages.map(({system, user, assistant}) => html`
</section>` ${system !== "" && html`<p><em><${Markdownish} text=${system} /></em></p>`}
<p class="user bubble"><${Markdownish} text=${user} /></p>
${assistant !== "" ?
html`<p class="asst bubble"><${Markdownish} text=${assistant} /></p>` :
html`<p class="typing">...</p>`}
`)}
</section>
<pre>${JSON.stringify(session.value.transcript, null, 2)}</pre>` // debug
} }
const ConfigForm = (props) => { const ConfigForm = (props) => {
const updateSession = (el) => session.value = { ...session.value, [el.target.name]: el.target.value } const updateSession = (el) => session.value = { ...session.value, [el.target.name]: el.target.value }
const updateParams = (el) => params.value = { ...params.value, [el.target.name]: el.target.value } const updateParams = (el) => params.value = { ...params.value, [el.target.name]: el.target.value }
const updateParamsFloat = (el) => params.value = { ...params.value, [el.target.name]: parseFloat(el.target.value) } const updateParamsFloat = (el) => params.value = { ...params.value, [el.target.name]: parseFloat(el.target.value) }
const appendArray = () => session.value = { ...session.value, stop: [...session.value.stop, ""] }
const updateArray = (el) => {
const [name, index] = el.target.name.split(".")
const newarr = session.value[name].map((v, i) => i == index ? el.target.value : v).filter(x => x !== "")
session.value = { ...session.value, [name]: newarr }
}
return html` return html`
<form> <form>
<fieldset> <fieldset>
<div> <div>
<label for="prompt">Prompt</label> <label for="system">System prompt</label>
<textarea type="text" name="prompt" value="${session.value.prompt}" rows=4 oninput=${updateSession}/> <textarea type="text" name="system" value="${session.value.system}" rows=4 oninput=${updateSession}/>
</div> </div>
<div> <div>
<label for="user">User name</label> <label for="message">Message template</label>
<input type="text" name="user" value="${session.value.user}" oninput=${updateSession} /> <textarea type="text" name="message" value="${session.value.message}" rows=7 oninput=${updateSession}/>
</div> </div>
<div> <div>
<label for="bot">Bot name</label> <label for="stop">Stop strings</label>
<input type="text" name="char" value="${session.value.char}" oninput=${updateSession} /> ${session.value.stop.map((stop, i) => html`
</div> <p><input type="text" name="stop.${i}" value="${stop}" oninput=${updateArray}/></p>
`)}
<input type="button" value="+" onclick=${appendArray} />
<div> <pre>${JSON.stringify(session.value.stop)/* debug */}</pre>
<label for="template">Prompt template</label>
<textarea id="template" name="template" value="${session.value.template}" rows=4 oninput=${updateSession}/>
</div>
<div>
<label for="template">Chat history template</label>
<textarea id="template" name="historyTemplate" value="${session.value.historyTemplate}" rows=1 oninput=${updateSession}/>
</div> </div>
<div> <div>
<label for="temperature">Temperature</label> <label for="temperature">Temperature</label>
<input type="range" id="temperature" min="0.0" max="1.0" step="0.01" name="temperature" value="${params.value.temperature}" oninput=${updateParamsFloat} /> <input type="range" id="temperature" min="0.0" max="2.0" step="0.01" name="temperature" value="${params.value.temperature}" oninput=${updateParamsFloat} />
<span>${params.value.temperature}</span> <span>${params.value.temperature}</span>
</div> </div>
@ -307,7 +332,7 @@
<div> <div>
<label for="repeat_penalty">Penalize repeat sequence</label> <label for="repeat_penalty">Penalize repeat sequence</label>
<input type="range" id="repeat_penalty" min="0.0" max="2.0" step="0.01" name="repeat_penalty" value="${params.value.repeat_penalty}" oninput=${updateParamsFloat} /> <input type="range" id="repeat_penalty" min="0.0" max="4.0" step="0.01" name="repeat_penalty" value="${params.value.repeat_penalty}" oninput=${updateParamsFloat} />
<span>${params.value.repeat_penalty}</span> <span>${params.value.repeat_penalty}</span>
</div> </div>