vbatts/llama.cpp
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

SimpleChat: Allow user to select chat or completion mode

Browse source
This commit is contained in:
HanishKVC 2024-05-17 23:21:55 +05:30
parent e62087bf3f
commit 9feb58eaa5
2 changed files with 31 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

8
examples/server/public_simplechat/simplechat.html
View file

@ -16,10 +16,18 @@
</head> </head>
<body> <body>
<p> SimpleChat </p> <p> SimpleChat </p>
<label for="api-ep">Mode:</label>
<select name="api-ep" id="api-ep">
<option value="chat">Chat</option>
<option value="completion">Completion</option>
</select>
<hr> <hr>
<div id="chat"> <div id="chat">
<p> Enter your text to the ai assistant below</p> <p> Enter your text to the ai assistant below</p>
</div> </div>
<hr> <hr>
<input type="text" id="user"/> <input type="text" id="user"/>
<button id="submit">submit</button> <button id="submit">submit</button>

32
examples/server/public_simplechat/simplechat.js
View file

@ -8,6 +8,11 @@ class Roles {
static Assistant = "assistant"; static Assistant = "assistant";
} }
class ApiEP {
static Chat = "chat";
static Completion = "completion";
}
class SimpleChat { class SimpleChat {
constructor() { constructor() {
@ -87,30 +92,34 @@ class SimpleChat {
* Handle submit request by user * Handle submit request by user
* @param {HTMLInputElement} inputUser * @param {HTMLInputElement} inputUser
* @param {HTMLDivElement} divChat * @param {HTMLDivElement} divChat
* @param {RequestInfo | URL} urlApi * @param {string} apiEP
* @param {boolean} [bMessages]
*/ */
async function handle_submit(inputUser, divChat, urlApi, bMessages=true) { async function handle_submit(inputUser, divChat, apiEP) {
let content = inputUser?.value; let content = inputUser?.value;
gChat.add(Roles.User, content); gChat.add(Roles.User, content);
gChat.show(divChat); gChat.show(divChat);
let theBody; let theBody;
if (bMessages) { let theUrl = gChatURL[apiEP]
if (apiEP == ApiEP.Chat) {
theBody = gChat.request_messages_jsonstr(); theBody = gChat.request_messages_jsonstr();
} else { } else {
theBody = gChat.request_prompt_jsonstr(); theBody = gChat.request_prompt_jsonstr();
} }
inputUser.scrollIntoView(true); inputUser.scrollIntoView(true);
inputUser.value = "working..."; inputUser.value = "working...";
inputUser.disabled = true; inputUser.disabled = true;
console.debug("DBUG:HandleSubmit:ReqBody:", theBody); console.debug(`DBUG:HandleSubmit:${theUrl}:ReqBody:${theBody}`);
let resp = await fetch(urlApi, { let resp = await fetch(theUrl, {
method: "POST", method: "POST",
headers: { headers: {
"Content-Type": "application/json", "Content-Type": "application/json",
}, },
body: gChat.request_messages_jsonstr(), body: theBody,
}); });
inputUser.value = ""; inputUser.value = "";
inputUser.disabled = false; inputUser.disabled = false;
let respBody = await resp.json(); let respBody = await resp.json();
@ -119,12 +128,16 @@ async function handle_submit(inputUser, divChat, urlApi, bMessages=true) {
gChat.add(Roles.Assistant, assistantMsg); gChat.add(Roles.Assistant, assistantMsg);
gChat.show(divChat); gChat.show(divChat);
inputUser.scrollIntoView(true); inputUser.scrollIntoView(true);
} }
let gChat = new SimpleChat(); let gChat = new SimpleChat();
let gBaseURL = "http://127.0.0.1:8080"; let gBaseURL = "http://127.0.0.1:8080";
let gChatURL = `${gBaseURL}/chat/completions`; let gChatURL = {
'chat': `${gBaseURL}/chat/completions`,
'completion': `${gBaseURL}/completions`,
}
function startme() { function startme() {
@ -132,13 +145,14 @@ function startme() {
let divChat = /** @type{HTMLDivElement} */(document.getElementById("chat")); let divChat = /** @type{HTMLDivElement} */(document.getElementById("chat"));
let btnSubmit = document.getElementById("submit"); let btnSubmit = document.getElementById("submit");
let inputUser = /** @type{HTMLInputElement} */(document.getElementById("user")); let inputUser = /** @type{HTMLInputElement} */(document.getElementById("user"));
let selectApiEP = /** @type{HTMLInputElement} */(document.getElementById("api-ep"));
if (divChat == null) { if (divChat == null) {
throw Error("ERRR:StartMe:Chat element missing"); throw Error("ERRR:StartMe:Chat element missing");
} }
btnSubmit?.addEventListener("click", (ev)=>{ btnSubmit?.addEventListener("click", (ev)=>{
handle_submit(inputUser, divChat, gChatURL); handle_submit(inputUser, divChat, selectApiEP.value);
}); });
inputUser?.addEventListener("keyup", (ev)=> { inputUser?.addEventListener("keyup", (ev)=> {