Mathis/llamactl
1
0
Fork 0
mirror of https://github.com/lordmathis/llamactl.git synced 2025-11-06 00:54:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update SystemInfo dialog

Browse Source
This commit is contained in:
Matúš Námešný
2025-09-23 22:05:31 +02:00
parent edf0575925
commit e3bf8ac05a
4 changed files with 84 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
webui/src/App.tsx
View File

@@ -3,7 +3,7 @@ import Header from "@/components/Header";
import InstanceList from "@/components/InstanceList"; import InstanceList from "@/components/InstanceList";
import InstanceDialog from "@/components/InstanceDialog"; import InstanceDialog from "@/components/InstanceDialog";
import LoginDialog from "@/components/LoginDialog"; import LoginDialog from "@/components/LoginDialog";
import BackendInfoDialog from "./components/BackendInfoDialog"; import SystemInfoDialog from "./components/SystemInfoDialog";
import { type CreateInstanceOptions, type Instance } from "@/types/instance"; import { type CreateInstanceOptions, type Instance } from "@/types/instance";
import { useInstances } from "@/contexts/InstancesContext"; import { useInstances } from "@/contexts/InstancesContext";
import { useAuth } from "@/contexts/AuthContext"; import { useAuth } from "@/contexts/AuthContext";
@@ -13,7 +13,7 @@ import { Toaster } from "sonner";
function App() { function App() {
const { isAuthenticated, isLoading: authLoading } = useAuth(); const { isAuthenticated, isLoading: authLoading } = useAuth();
const [isInstanceModalOpen, setIsInstanceModalOpen] = useState(false); const [isInstanceModalOpen, setIsInstanceModalOpen] = useState(false);
const [isBackendInfoModalOpen, setIsBackendInfoModalOpen] = useState(false); const [isSystemInfoModalOpen, setIsSystemInfoModalOpen] = useState(false);
const [editingInstance, setEditingInstance] = useState<Instance | undefined>( const [editingInstance, setEditingInstance] = useState<Instance | undefined>(
undefined undefined
); );
@@ -37,8 +37,8 @@ function App() {
} }
}; };
const handleShowBackendInfo = () => { const handleShowSystemInfo = () => {
setIsBackendInfoModalOpen(true); setIsSystemInfoModalOpen(true);
}; };
// Show loading spinner while checking auth // Show loading spinner while checking auth
@@ -70,7 +70,7 @@ function App() {
return ( return (
<ThemeProvider> <ThemeProvider>
<div className="min-h-screen bg-background"> <div className="min-h-screen bg-background">
<Header onCreateInstance={handleCreateInstance} onShowSystemInfo={handleShowBackendInfo} /> <Header onCreateInstance={handleCreateInstance} onShowSystemInfo={handleShowSystemInfo} />
<main className="container mx-auto max-w-4xl px-4 py-8"> <main className="container mx-auto max-w-4xl px-4 py-8">
<InstanceList editInstance={handleEditInstance} /> <InstanceList editInstance={handleEditInstance} />
</main> </main>
@@ -82,9 +82,9 @@ function App() {
instance={editingInstance} instance={editingInstance}
/> />
<BackendInfoDialog <SystemInfoDialog
open={isBackendInfoModalOpen} open={isSystemInfoModalOpen}
onOpenChange={setIsBackendInfoModalOpen} onOpenChange={setIsSystemInfoModalOpen}
/> />
<Toaster /> <Toaster />

6
webui/src/components/ParseCommandDialog.tsx
View File

@@ -105,9 +105,9 @@ const ParseCommandDialog: React.FC<ParseCommandDialogProps> = ({
<div> <div>
<Label className="text-sm font-medium">Backend Type: <Label className="text-sm font-medium">Backend Type:
<span className="font-normal text-muted-foreground"> <span className="font-normal text-muted-foreground">
{backendType === BackendType.LLAMA_CPP && 'Llama Server (llama_cpp)'} {backendType === BackendType.LLAMA_CPP && 'Llama Server'}
{backendType === BackendType.MLX_LM && 'MLX LM (mlx_lm)'} {backendType === BackendType.MLX_LM && 'MLX LM'}
{backendType === BackendType.VLLM && 'vLLM (vllm)'} {backendType === BackendType.VLLM && 'vLLM'}
</span> </span>
</Label> </Label>
</div> </div>

86
webui/src/components/BackendInfoDialog.tsx → webui/src/components/SystemInfoDialog.tsx
View File

@@ -20,6 +20,7 @@ import {
Info Info
} from 'lucide-react' } from 'lucide-react'
import { serverApi } from '@/lib/api' import { serverApi } from '@/lib/api'
import { BackendType, type BackendTypeValue } from '@/types/instance'
// Helper to get version from environment // Helper to get version from environment
const getAppVersion = (): string => { const getAppVersion = (): string => {
@@ -30,7 +31,7 @@ const getAppVersion = (): string => {
} }
} }
interface BackendInfoDialogProps { interface SystemInfoDialogProps {
open: boolean open: boolean
onOpenChange: (open: boolean) => void onOpenChange: (open: boolean) => void
} }
@@ -41,27 +42,25 @@ interface BackendInfo {
help: string help: string
} }
type BackendType = 'llama-cpp' | 'mlx' | 'vllm'
const BACKEND_OPTIONS = [ const BACKEND_OPTIONS = [
{ value: 'llama-cpp', label: 'Llama.cpp' }, { value: BackendType.LLAMA_CPP, label: 'Llama Server' },
{ value: 'mlx', label: 'MLX' }, { value: BackendType.MLX_LM, label: 'MLX LM' },
{ value: 'vllm', label: 'vLLM' }, { value: BackendType.VLLM, label: 'vLLM' },
] as const ]
const BackendInfoDialog: React.FC<BackendInfoDialogProps> = ({ const SystemInfoDialog: React.FC<SystemInfoDialogProps> = ({
open, open,
onOpenChange onOpenChange
}) => { }) => {
const [selectedBackend, setSelectedBackend] = useState<BackendType>('llama-cpp') const [selectedBackend, setSelectedBackend] = useState<BackendTypeValue>(BackendType.LLAMA_CPP)
const [backendInfo, setBackendInfo] = useState<BackendInfo | null>(null) const [backendInfo, setBackendInfo] = useState<BackendInfo | null>(null)
const [loading, setLoading] = useState(false) const [loading, setLoading] = useState(false)
const [error, setError] = useState<string | null>(null) const [error, setError] = useState<string | null>(null)
const [showHelp, setShowHelp] = useState(false) const [showHelp, setShowHelp] = useState(false)
// Fetch backend info // Fetch backend info
const fetchBackendInfo = async (backend: BackendType) => { const fetchBackendInfo = async (backend: BackendTypeValue) => {
if (backend !== 'llama-cpp') { if (backend !== BackendType.LLAMA_CPP) {
setBackendInfo(null) setBackendInfo(null)
setError(null) setError(null)
return return
@@ -88,21 +87,21 @@ const BackendInfoDialog: React.FC<BackendInfoDialogProps> = ({
// Load data when dialog opens or backend changes // Load data when dialog opens or backend changes
useEffect(() => { useEffect(() => {
if (open) { if (open) {
fetchBackendInfo(selectedBackend) void fetchBackendInfo(selectedBackend)
} }
}, [open, selectedBackend]) }, [open, selectedBackend])
const handleBackendChange = (value: string) => { const handleBackendChange = (value: string) => {
setSelectedBackend(value as BackendType) setSelectedBackend(value as BackendTypeValue)
setShowHelp(false) // Reset help section when switching backends setShowHelp(false) // Reset help section when switching backends
} }
const renderBackendContent = () => { const renderBackendSpecificContent = () => {
if (selectedBackend !== 'llama-cpp') { if (selectedBackend !== BackendType.LLAMA_CPP) {
return ( return (
<div className="flex items-center justify-center py-12"> <div className="flex items-center justify-center py-8">
<div className="text-center space-y-3"> <div className="text-center space-y-3">
<Info className="h-12 w-12 text-gray-400 mx-auto" /> <Info className="h-8 w-8 text-gray-400 mx-auto" />
<div> <div>
<h3 className="font-semibold text-gray-700">Backend Info Not Available</h3> <h3 className="font-semibold text-gray-700">Backend Info Not Available</h3>
<p className="text-sm text-gray-500 mt-1"> <p className="text-sm text-gray-500 mt-1">
@@ -116,7 +115,7 @@ const BackendInfoDialog: React.FC<BackendInfoDialogProps> = ({
if (loading && !backendInfo) { if (loading && !backendInfo) {
return ( return (
<div className="flex items-center justify-center py-12"> <div className="flex items-center justify-center py-8">
<Loader2 className="h-6 w-6 animate-spin text-gray-400" /> <Loader2 className="h-6 w-6 animate-spin text-gray-400" />
<span className="ml-2 text-gray-400">Loading backend information...</span> <span className="ml-2 text-gray-400">Loading backend information...</span>
</div> </div>
@@ -138,17 +137,6 @@ const BackendInfoDialog: React.FC<BackendInfoDialogProps> = ({
return ( return (
<div className="space-y-6"> <div className="space-y-6">
{/* Llamactl Version Section */}
<div className="space-y-3">
<h3 className="font-semibold">Llamactl Version</h3>
<div className="bg-gray-900 rounded-lg p-4">
<pre className="text-sm text-gray-300 whitespace-pre-wrap font-mono">
{getAppVersion()}
</pre>
</div>
</div>
{/* Backend Version Section */} {/* Backend Version Section */}
<div className="space-y-3"> <div className="space-y-3">
<h3 className="font-semibold"> <h3 className="font-semibold">
@@ -216,34 +204,46 @@ const BackendInfoDialog: React.FC<BackendInfoDialogProps> = ({
<Dialog open={open} onOpenChange={onOpenChange}> <Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="sm:max-w-4xl max-w-[calc(100%-2rem)] max-h-[80vh] flex flex-col"> <DialogContent className="sm:max-w-4xl max-w-[calc(100%-2rem)] max-h-[80vh] flex flex-col">
<DialogHeader> <DialogHeader>
<div className="flex items-center justify-between">
<div>
<DialogTitle className="flex items-center gap-2"> <DialogTitle className="flex items-center gap-2">
<Monitor className="h-5 w-5" /> <Monitor className="h-5 w-5" />
Backend Information System Information
</DialogTitle> </DialogTitle>
<DialogDescription> <DialogDescription>
View backend-specific environment and capabilities View system and backend-specific environment and capabilities
</DialogDescription> </DialogDescription>
</DialogHeader>
<div className="flex-1 overflow-y-auto">
<div className="space-y-6">
{/* Llamactl Version Section - Always shown */}
<div className="space-y-3">
<h3 className="font-semibold">Llamactl Version</h3>
<div className="bg-gray-900 rounded-lg p-4">
<pre className="text-sm text-gray-300 whitespace-pre-wrap font-mono">
{getAppVersion()}
</pre>
</div>
</div> </div>
<div className="flex items-center gap-2"> {/* Backend Selection Section */}
<div className="w-32"> <div className="space-y-3">
<h3 className="font-semibold">Backend Information</h3>
<div className="flex items-center gap-3">
<div className="flex-1">
<SelectInput <SelectInput
id="backend-select" id="backend-select"
label="" label=""
value={selectedBackend} value={selectedBackend}
onChange={(value) => handleBackendChange(value || 'llama-cpp')} onChange={(value) => handleBackendChange(value || BackendType.LLAMA_CPP)}
options={BACKEND_OPTIONS} options={BACKEND_OPTIONS}
className="text-sm" className="text-sm"
/> />
</div> </div>
{selectedBackend === BackendType.LLAMA_CPP && (
{selectedBackend === 'llama-cpp' && (
<Button <Button
variant="outline" variant="outline"
size="sm" size="sm"
onClick={() => fetchBackendInfo(selectedBackend)} onClick={() => void fetchBackendInfo(selectedBackend)}
disabled={loading} disabled={loading}
> >
{loading ? ( {loading ? (
@@ -255,10 +255,10 @@ const BackendInfoDialog: React.FC<BackendInfoDialogProps> = ({
)} )}
</div> </div>
</div> </div>
</DialogHeader>
<div className="flex-1 overflow-y-auto"> {/* Backend-specific content */}
{renderBackendContent()} {renderBackendSpecificContent()}
</div>
</div> </div>
<DialogFooter> <DialogFooter>
@@ -271,4 +271,4 @@ const BackendInfoDialog: React.FC<BackendInfoDialogProps> = ({
) )
} }
export default BackendInfoDialog export default SystemInfoDialog

6
webui/src/components/instance/BackendConfigurationCard.tsx
View File

@@ -37,9 +37,9 @@ const BackendConfigurationCard: React.FC<BackendConfigurationCardProps> = ({
value={formData.backend_type || BackendType.LLAMA_CPP} value={formData.backend_type || BackendType.LLAMA_CPP}
onChange={(value) => onChange('backend_type', value)} onChange={(value) => onChange('backend_type', value)}
options={[ options={[
{ value: BackendType.LLAMA_CPP, label: 'Llama Server (llama_cpp)' }, { value: BackendType.LLAMA_CPP, label: 'Llama Server' },
{ value: BackendType.MLX_LM, label: 'MLX LM (mlx_lm)' }, { value: BackendType.MLX_LM, label: 'MLX LM' },
{ value: BackendType.VLLM, label: 'vLLM (vllm)' } { value: BackendType.VLLM, label: 'vLLM' }
]} ]}
description="Select the backend server type" description="Select the backend server type"
/> />