+
+ );
+}
+
+export default App;
diff --git a/examples/server/webui/src/Config.ts b/examples/server/webui/src/Config.ts
new file mode 100644
index 0000000000000..1860ffcc9b7c0
--- /dev/null
+++ b/examples/server/webui/src/Config.ts
@@ -0,0 +1,89 @@
+import daisyuiThemes from 'daisyui/src/theming/themes';
+import { isNumeric } from './utils/misc';
+
+export const isDev = import.meta.env.MODE === 'development';
+
+// constants
+export const BASE_URL = new URL('.', document.baseURI).href
+ .toString()
+ .replace(/\/$/, '');
+
+export const CONFIG_DEFAULT = {
+ // Note: in order not to introduce breaking changes, please keep the same data type (number, string, etc) if you want to change the default value. Do not use null or undefined for default value.
+ apiKey: '',
+ systemMessage: 'You are a helpful assistant.',
+ showTokensPerSecond: false,
+ showThoughtInProgress: false,
+ excludeThoughtOnReq: true,
+ // make sure these default values are in sync with `common.h`
+ samplers: 'edkypmxt',
+ temperature: 0.8,
+ dynatemp_range: 0.0,
+ dynatemp_exponent: 1.0,
+ top_k: 40,
+ top_p: 0.95,
+ min_p: 0.05,
+ xtc_probability: 0.0,
+ xtc_threshold: 0.1,
+ typical_p: 1.0,
+ repeat_last_n: 64,
+ repeat_penalty: 1.0,
+ presence_penalty: 0.0,
+ frequency_penalty: 0.0,
+ dry_multiplier: 0.0,
+ dry_base: 1.75,
+ dry_allowed_length: 2,
+ dry_penalty_last_n: -1,
+ max_tokens: -1,
+ custom: '', // custom json-stringified object
+};
+export const CONFIG_INFO: Record = {
+ apiKey: 'Set the API Key if you are using --api-key option for the server.',
+ systemMessage: 'The starting message that defines how model should behave.',
+ samplers:
+ 'The order at which samplers are applied, in simplified way. Default is "dkypmxt": dry->top_k->typ_p->top_p->min_p->xtc->temperature',
+ temperature:
+ 'Controls the randomness of the generated text by affecting the probability distribution of the output tokens. Higher = more random, lower = more focused.',
+ dynatemp_range:
+ 'Addon for the temperature sampler. The added value to the range of dynamic temperature, which adjusts probabilities by entropy of tokens.',
+ dynatemp_exponent:
+ 'Addon for the temperature sampler. Smoothes out the probability redistribution based on the most probable token.',
+ top_k: 'Keeps only k top tokens.',
+ top_p:
+ 'Limits tokens to those that together have a cumulative probability of at least p',
+ min_p:
+ 'Limits tokens based on the minimum probability for a token to be considered, relative to the probability of the most likely token.',
+ xtc_probability:
+ 'XTC sampler cuts out top tokens; this parameter controls the chance of cutting tokens at all. 0 disables XTC.',
+ xtc_threshold:
+ 'XTC sampler cuts out top tokens; this parameter controls the token probability that is required to cut that token.',
+ typical_p:
+ 'Sorts and limits tokens based on the difference between log-probability and entropy.',
+ repeat_last_n: 'Last n tokens to consider for penalizing repetition',
+ repeat_penalty:
+ 'Controls the repetition of token sequences in the generated text',
+ presence_penalty:
+ 'Limits tokens based on whether they appear in the output or not.',
+ frequency_penalty:
+ 'Limits tokens based on how often they appear in the output.',
+ dry_multiplier:
+ 'DRY sampling reduces repetition in generated text even across long contexts. This parameter sets the DRY sampling multiplier.',
+ dry_base:
+ 'DRY sampling reduces repetition in generated text even across long contexts. This parameter sets the DRY sampling base value.',
+ dry_allowed_length:
+ 'DRY sampling reduces repetition in generated text even across long contexts. This parameter sets the allowed length for DRY sampling.',
+ dry_penalty_last_n:
+ 'DRY sampling reduces repetition in generated text even across long contexts. This parameter sets DRY penalty for the last n tokens.',
+ max_tokens: 'The maximum number of token per output.',
+ custom: '', // custom json-stringified object
+};
+// config keys having numeric value (i.e. temperature, top_k, top_p, etc)
+export const CONFIG_NUMERIC_KEYS = Object.entries(CONFIG_DEFAULT)
+ .filter((e) => isNumeric(e[1]))
+ .map((e) => e[0]);
+// list of themes supported by daisyui
+export const THEMES = ['light', 'dark']
+ // make sure light & dark are always at the beginning
+ .concat(
+ Object.keys(daisyuiThemes).filter((t) => t !== 'light' && t !== 'dark')
+ );
diff --git a/examples/server/webui/src/components/ChatMessage.tsx b/examples/server/webui/src/components/ChatMessage.tsx
new file mode 100644
index 0000000000000..01d2fb80cc23b
--- /dev/null
+++ b/examples/server/webui/src/components/ChatMessage.tsx
@@ -0,0 +1,229 @@
+import { useMemo, useState } from 'react';
+import { useAppContext } from '../utils/app.context';
+import { Message, PendingMessage } from '../utils/types';
+import { classNames } from '../utils/misc';
+import MarkdownDisplay, { CopyButton } from './MarkdownDisplay';
+
+interface SplitMessage {
+ content: PendingMessage['content'];
+ thought?: string;
+ isThinking?: boolean;
+}
+
+export default function ChatMessage({
+ msg,
+ id,
+ scrollToBottom,
+ isPending,
+}: {
+ msg: Message | PendingMessage;
+ id?: string;
+ scrollToBottom: (requiresNearBottom: boolean) => void;
+ isPending?: boolean;
+}) {
+ const { viewingConversation, replaceMessageAndGenerate, config } =
+ useAppContext();
+ const [editingContent, setEditingContent] = useState(null);
+ const timings = useMemo(
+ () =>
+ msg.timings
+ ? {
+ ...msg.timings,
+ prompt_per_second:
+ (msg.timings.prompt_n / msg.timings.prompt_ms) * 1000,
+ predicted_per_second:
+ (msg.timings.predicted_n / msg.timings.predicted_ms) * 1000,
+ }
+ : null,
+ [msg.timings]
+ );
+
+ // for reasoning model, we split the message into content and thought
+ // TODO: implement this as remark/rehype plugin in the future
+ const { content, thought, isThinking }: SplitMessage = useMemo(() => {
+ if (msg.content === null || msg.role !== 'assistant') {
+ return { content: msg.content };
+ }
+ let actualContent = '';
+ let thought = '';
+ let isThinking = false;
+ let thinkSplit = msg.content.split('', 2);
+ actualContent += thinkSplit[0];
+ while (thinkSplit[1] !== undefined) {
+ // tag found
+ thinkSplit = thinkSplit[1].split('', 2);
+ thought += thinkSplit[0];
+ isThinking = true;
+ if (thinkSplit[1] !== undefined) {
+ // closing tag found
+ isThinking = false;
+ thinkSplit = thinkSplit[1].split('', 2);
+ actualContent += thinkSplit[0];
+ }
+ }
+ return { content: actualContent, thought, isThinking };
+ }, [msg]);
+
+ if (!viewingConversation) return null;
+
+ const regenerate = async () => {
+ replaceMessageAndGenerate(viewingConversation.id, msg.id, undefined, () =>
+ scrollToBottom(true)
+ );
+ };
+
+ return (
+