diff --git a/tools/server/webui/index.html b/tools/server/webui/index.html index 471f46b3ad19b..9bdde9b1c54f6 100644 --- a/tools/server/webui/index.html +++ b/tools/server/webui/index.html @@ -7,7 +7,11 @@ content="width=device-width, initial-scale=1, maximum-scale=1" /> - 🦙 llama.cpp - chat + + llama.cpp
diff --git a/tools/server/webui/src/components/ChatMessage.tsx b/tools/server/webui/src/components/ChatMessage.tsx index 1c579f2659050..3b7ddc19500bb 100644 --- a/tools/server/webui/src/components/ChatMessage.tsx +++ b/tools/server/webui/src/components/ChatMessage.tsx @@ -7,6 +7,7 @@ import { ArrowPathIcon, ChevronLeftIcon, ChevronRightIcon, + ExclamationCircleIcon, PencilSquareIcon, } from '@heroicons/react/24/outline'; import ChatInputExtraContextItem from './ChatInputExtraContextItem'; @@ -109,7 +110,7 @@ export default function ChatMessage({
{/* textarea for editing message */} @@ -168,30 +169,6 @@ export default function ChatMessage({
)} - {/* render timings if enabled */} - {timings && config.showTokensPerSecond && ( -
-
- Speed: {timings.predicted_per_second.toFixed(1)} t/s -
-
- Prompt -
- Tokens: {timings.prompt_n} -
- Time: {timings.prompt_ms} ms -
- Speed: {timings.prompt_per_second.toFixed(1)} t/s -
- Generation -
- Tokens: {timings.predicted_n} -
- Time: {timings.predicted_ms} ms -
- Speed: {timings.predicted_per_second.toFixed(1)} t/s -
-
-
- )} )} @@ -201,7 +178,7 @@ export default function ChatMessage({ {msg.content !== null && (
@@ -264,6 +241,41 @@ export default function ChatMessage({ )} + + {/* render timings if enabled */} + {timings && config.showTokensPerSecond && ( + +
+ + +
+ Prompt Processing +
    +
  • Tokens: {timings.prompt_n}
    • +
  • Time: {timings.prompt_ms} ms
    • +
  • + Speed: {timings.prompt_per_second.toFixed(1)} t/s +
    • +
+
+ Generation +
    +
  • Tokens: {timings.predicted_n}
    • +
  • Time: {timings.predicted_ms} ms
    • +
  • + Speed: {timings.predicted_per_second.toFixed(1)} t/s +
    • +
+
+
+ + )} )} diff --git a/tools/server/webui/src/components/ChatScreen.tsx b/tools/server/webui/src/components/ChatScreen.tsx index c1a6691445507..d1b814ee351a0 100644 --- a/tools/server/webui/src/components/ChatScreen.tsx +++ b/tools/server/webui/src/components/ChatScreen.tsx @@ -231,32 +231,31 @@ export default function ChatScreen() { flex: !hasCanvas, })} > + {/* placeholder to shift the message to the bottom */} + {!viewingChat && ( +
+ Nice to see you. + how can I help you today? +
+ )} + {/* chat messages */} -
-
- {/* placeholder to shift the message to the bottom */} - {viewingChat ? ( - '' - ) : ( - <> -
Send a message to start
- - - )} + {viewingChat && ( +
+ {[...messages, ...pendingMsgDisplay].map((msg) => ( + + ))}
- {[...messages, ...pendingMsgDisplay].map((msg) => ( - - ))} -
+ )} {/* chat input */} -
- Server Info -

- Model: {serverProps?.model_path?.split(/(\\|\/)/).pop()} -
- Build: {serverProps?.build_info} -
- {modalities.length > 0 ? ( - <> - Supported modalities: {modalities.join(', ')} - - ) : ( - '' - )} -

-
-
- ); -} - function ChatInput({ textarea, extraContext, @@ -332,7 +296,7 @@ function ChatInput({ role="group" aria-label="Chat input" className={classNames({ - 'flex items-end pt-8 pb-6 sticky bottom-0 bg-base-100': true, + 'flex flex-col items-end pt-8 sticky bottom-0 bg-base-100': true, 'opacity-50': isDrag, // simply visual feedback to inform user that the file will be accepted })} > @@ -348,7 +312,7 @@ function ChatInput({ > {({ getRootProps, getInputProps }) => (
) => { @@ -390,11 +354,11 @@ function ChatInput({ /> )} -
+
{/* buttons area */} -
- - - {isGenerating ? ( - - ) : ( - - )} + + + +
+ +
+ {isGenerating ? ( + + ) : ( + + )} +
)} + +
+ ); +} + +function ServerInfo() { + const { serverProps } = useAppContext(); + const modalities = []; + if (serverProps?.modalities?.audio) { + modalities.push('audio'); + } + if (serverProps?.modalities?.vision) { + modalities.push('vision'); + } + return ( +
+ + Llama.cpp {serverProps?.build_info} + + + + {modalities.length > 0 ? ( + <> +
+ Supported modalities: {modalities.join(', ')} + + ) : ( + '' + )} +
); } diff --git a/tools/server/webui/src/components/Header.tsx b/tools/server/webui/src/components/Header.tsx index ccddc21ddab73..6d5b82fc49c9b 100644 --- a/tools/server/webui/src/components/Header.tsx +++ b/tools/server/webui/src/components/Header.tsx @@ -4,15 +4,11 @@ import { useAppContext } from '../utils/app.context'; import { classNames } from '../utils/misc'; import daisyuiThemes from 'daisyui/theme/object'; import { THEMES } from '../Config'; -import { - Cog8ToothIcon, - MoonIcon, - Bars3Icon, -} from '@heroicons/react/24/outline'; +import { Cog8ToothIcon, Bars3Icon } from '@heroicons/react/24/outline'; export default function Header() { const [selectedTheme, setSelectedTheme] = useState(StorageUtils.getTheme()); - const { setShowSettings } = useAppContext(); + const { serverProps, setShowSettings } = useAppContext(); const setTheme = (theme: string) => { StorageUtils.setTheme(theme); @@ -28,13 +24,25 @@ export default function Header() { }, [selectedTheme]); return ( -
+
{/* open sidebar button */} -