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

examples/server/webui/src/main.js: populate textarea from query string

Browse source 
Allow pre-filling the msg-input textarea with a message supplied via
a query parameter ?m=... and auto-focus the textarea. Example:
	http://localhost:8080/?m=What%20is%20your%20name?
Alternatively, allow pre-filling the msg-input textarea via a query
parameter ?q=... and automatically start generating a response, e.g.:
	http://localhost:8080/?q=What%20is%20your%20name?

* main.js: fill inputMsg from ?q or ?m
* main.js: once the App is mounted, call sendMessage() on ?q
* main.js: once the App is mounted, focus(msg-input) on ?m

Signed-off-by: Tim Janik <timj@gnu.org>
This commit is contained in:
Tim Janik 2024-12-10 17:32:40 +01:00
parent ea489cba8c
commit 65be99eee5
1 changed files with 13 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

16
examples/server/webui/src/main.js
View file

@ -1,5 +1,5 @@
import './styles.scss'; import './styles.scss';
import { createApp, defineComponent, shallowRef, computed, h } from 'vue/dist/vue.esm-bundler.js'; import { createApp, defineComponent, shallowRef, computed, h, nextTick } from 'vue/dist/vue.esm-bundler.js';
import MarkdownIt from 'markdown-it'; import MarkdownIt from 'markdown-it';
import TextLineStream from 'textlinestream'; import TextLineStream from 'textlinestream';
@ -373,6 +373,10 @@ async function* sendSSEPostRequest(url, fetchOptions) {
} }
}; };
const usp = new URLSearchParams (window.location.search);
const initial_query = usp.get ('q');
const initial_msg = initial_query || usp.get ('m') || '';
const mainApp = createApp({ const mainApp = createApp({
components: { components: {
VueMarkdown, VueMarkdown,
@ -385,7 +389,7 @@ const mainApp = createApp({
/** @type {Array<Message>} */ /** @type {Array<Message>} */
messages: [], messages: [],
viewingConvId: StorageUtils.getNewConvId(), viewingConvId: StorageUtils.getNewConvId(),
inputMsg: '', inputMsg: initial_msg,
isGenerating: false, isGenerating: false,
/** @type {Array<Message> | null} */ /** @type {Array<Message> | null} */
pendingMsg: null, // the on-going message from assistant pendingMsg: null, // the on-going message from assistant
@ -660,7 +664,13 @@ const mainApp = createApp({
}); });
mainApp.config.errorHandler = alert; mainApp.config.errorHandler = alert;
try { try {
mainApp.mount('#app'); const appInstance = mainApp.mount('#app');
nextTick().then(() => {
if (initial_query)
appInstance.sendMessage();
else if (initial_msg)
setTimeout(() => document.getElementById('msg-input').focus(), 1);
});
} catch (err) { } catch (err) {
console.error(err); console.error(err);
document.getElementById('app').innerHTML = `<div style="margin:2em auto"> document.getElementById('app').innerHTML = `<div style="margin:2em auto">