Mathis/llamactl
1
0
Fork 0
mirror of https://github.com/lordmathis/llamactl.git synced 2025-11-05 16:44:22 +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>

140
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,49 +204,61 @@ 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"> <DialogTitle className="flex items-center gap-2">
<div> <Monitor className="h-5 w-5" />
<DialogTitle className="flex items-center gap-2"> System Information
<Monitor className="h-5 w-5" /> </DialogTitle>
Backend Information <DialogDescription>
</DialogTitle> View system and backend-specific environment and capabilities
<DialogDescription> </DialogDescription>
View backend-specific environment and capabilities
</DialogDescription>
</div>
<div className="flex items-center gap-2">
<div className="w-32">
<SelectInput
id="backend-select"
label=""
value={selectedBackend}
onChange={(value) => handleBackendChange(value || 'llama-cpp')}
options={BACKEND_OPTIONS}
className="text-sm"
/>
</div>
{selectedBackend === 'llama-cpp' && (
<Button
variant="outline"
size="sm"
onClick={() => fetchBackendInfo(selectedBackend)}
disabled={loading}
>
{loading ? (
<Loader2 className="h-4 w-4 animate-spin" />
) : (
<RefreshCw className="h-4 w-4" />
)}
</Button>
)}
</div>
</div>
</DialogHeader> </DialogHeader>
<div className="flex-1 overflow-y-auto"> <div className="flex-1 overflow-y-auto">
{renderBackendContent()} <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>
{/* Backend Selection Section */}
<div className="space-y-3">
<h3 className="font-semibold">Backend Information</h3>
<div className="flex items-center gap-3">
<div className="flex-1">
<SelectInput
id="backend-select"
label=""
value={selectedBackend}
onChange={(value) => handleBackendChange(value || BackendType.LLAMA_CPP)}
options={BACKEND_OPTIONS}
className="text-sm"
/>
</div>
{selectedBackend === BackendType.LLAMA_CPP && (
<Button
variant="outline"
size="sm"
onClick={() => void fetchBackendInfo(selectedBackend)}
disabled={loading}
>
{loading ? (
<Loader2 className="h-4 w-4 animate-spin" />
) : (
<RefreshCw className="h-4 w-4" />
)}
</Button>
)}
</div>
</div>
{/* Backend-specific content */}
{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"
/> />