webui: update ServerInfo

Author: olegshulyakov

tools/server/webui/src/App.tsx

@@ -37,6 +37,7 @@ function AppLayout() {
       >
         <Header />
         <Outlet />
+        <ServerInfo />
       </main>
       {
         <SettingDialog
@@ -49,4 +50,37 @@ function AppLayout() {
   );
 }
 
+function ServerInfo() {
+  const { serverProps } = useAppContext();
+  const modalities = [];
+  if (serverProps?.modalities?.audio) {
+    modalities.push('audio');
+  }
+  if (serverProps?.modalities?.vision) {
+    modalities.push('vision');
+  }
+  return (
+    <div
+      className="sticky bottom-0 w-full pb-1 text-base-content/70 text-xs text-center"
+      tabIndex={0}
+      aria-description="Server information"
+    >
+      <span>
+        <b>Llama.cpp</b> {serverProps?.build_info}
+      </span>
+
+      <span className="sm:ml-2">
+        {modalities.length > 0 ? (
+          <>
+            <br className="sm:hidden" />
+            <b>Supported modalities:</b> {modalities.join(', ')}
+          </>
+        ) : (
+          ''
+        )}
+      </span>
+    </div>
+  );
+}
+
 export default App;

tools/server/webui/src/components/ChatScreen.tsx

@@ -238,10 +238,7 @@ export default function ChatScreen() {
             {viewingChat ? (
               ''
             ) : (
-              <>
-                <div className="mb-4">Send a message to start</div>
-                <ServerInfo />
-              </>
+              <div className="mb-4">Send a message to start</div>
             )}
           </div>
           {[...messages, ...pendingMsgDisplay].map((msg) => (
@@ -276,41 +273,6 @@ export default function ChatScreen() {
   );
 }
 
-function ServerInfo() {
-  const { serverProps } = useAppContext();
-  const modalities = [];
-  if (serverProps?.modalities?.audio) {
-    modalities.push('audio');
-  }
-  if (serverProps?.modalities?.vision) {
-    modalities.push('vision');
-  }
-  return (
-    <div
-      className="card card-sm shadow-sm border-1 border-base-content/20 text-base-content/70 mb-6"
-      tabIndex={0}
-      aria-description="Server information"
-    >
-      <div className="card-body">
-        <b>Server Info</b>
-        <p>
-          <b>Model</b>: {serverProps?.model_path?.split(/(\\|\/)/).pop()}
-          <br />
-          <b>Build</b>: {serverProps?.build_info}
-          <br />
-          {modalities.length > 0 ? (
-            <>
-              <b>Supported modalities:</b> {modalities.join(', ')}
-            </>
-          ) : (
-            ''
-          )}
-        </p>
-      </div>
-    </div>
-  );
-}
-
 function ChatInput({
   textarea,
   extraContext,
@@ -332,7 +294,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 items-end pt-8 pb-1 sticky bottom-0 bg-base-100': true,
         'opacity-50': isDrag, // simply visual feedback to inform user that the file will be accepted
       })}
     >