Skip to content

Commit

Permalink
list python libraries in computer info panel
Browse files Browse the repository at this point in the history
  • Loading branch information
@aliasaria
aliasaria committed May 27, 2024
1 parent 702efc5 commit e7be86c
Show file tree
Hide file tree
Showing 2 changed files with 172 additions and 90 deletions.
257 changes: 167 additions & 90 deletions src/renderer/components/Computer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,17 @@

import Sheet from '@mui/joy/Sheet';

import { Card, CardContent, Chip, Grid, Typography } from '@mui/joy';
import {
Card,
CardContent,
Chip,
FormControl,
FormLabel,
Grid,
Input,
Table,
Typography,
} from '@mui/joy';

import {
CalculatorIcon,
Expand All @@ -13,6 +23,7 @@ import {
LayoutIcon,
MemoryStickIcon,
RouterIcon,
SearchIcon,
} from 'lucide-react';

import { BsGpuCard } from 'react-icons/bs';
Expand All @@ -22,6 +33,10 @@ import { PiMathOperationsFill } from 'react-icons/pi';
import { formatBytes } from 'renderer/lib/utils';

import { useServerStats } from 'renderer/lib/transformerlab-api-sdk';
import useSWR from 'swr';
import { useState } from 'react';

import * as chatAPI from 'renderer/lib/transformerlab-api-sdk';

function getSystemProperties() {
const information = document.getElementById('info');
Expand Down Expand Up @@ -60,105 +75,167 @@ function ComputerCard({ children, title, description = '', chip = '', icon }) {
);
}

const fetcher = (url) => fetch(url).then((res) => res.json());

export default function Computer() {
const [searchText, setSearchText] = useState('');

const { server, isLoading, isError } = useServerStats();

if (server) {
return (
<>
{/* {JSON.stringify(server)} */}
<Typography level="h2" paddingBottom={3}>
Server Information
</Typography>
<Sheet className="OrderTableContainer">
<Grid container spacing={2} sx={{}}>
<Grid xs={4}>
<ComputerCard
icon={<FaComputer />}
title="Machine"
description={`${server.os} - ${server.name}`}
>
CPU: {server.cpu_percent}%<br />
{server.cpu_count} Cores
</ComputerCard>
</Grid>{' '}
<Grid xs={2}>
<ComputerCard icon={<PiMathOperationsFill />} title="Device">
GPU: {server.gpu?.length === 0 ? '❌' : '✅'}
<br />
CUDA: {server?.device === 'cuda' ? '✅ ' : '❌ '}
<br />
CUDA Version: {server?.cuda_version}
<br />
Python MPS: {server?.device === 'mps' ? '✅ ' : '❌ '}
</ComputerCard>
</Grid>{' '}
<Grid xs={4}>
<ComputerCard
icon={<BsGpuCard />}
title="GPU Specs"
image={undefined}
>
{server.gpu?.map((g) => {
return (
<>
🔥 {g.name}
<br />
{formatBytes(Math.round(g?.used_memory))} Used
<br />
{formatBytes(g.total_memory)} Total
</>
);
})}
<br />
Used Memory:{' '}
{Math.round(
server.gpu[0]?.used_memory / server.gpu[0]?.total_memory
)}
%
</ComputerCard>
</Grid>{' '}
<Grid xs={3}>
<ComputerCard icon={<LayoutIcon />} title="Operating System">
{server?.platform}
</ComputerCard>
</Grid>
<Grid xs={3}>
<ComputerCard icon={<MemoryStickIcon />} title="Memory">
<>
<Typography>
Total Memory: {formatBytes(server.memory?.total)}
</Typography>
<Typography>
Available: {formatBytes(server.memory?.available)}
</Typography>
<Typography>Percent: {server.memory?.percent}%</Typography>
</>
</ComputerCard>
</Grid>
<Grid xs={3}>
<ComputerCard title="Disk" icon={<DatabaseIcon />}>
Total: {formatBytes(server.disk?.total)} - Used:{' '}
{formatBytes(server.disk?.free)} - Free: {server.disk?.percent}%
</ComputerCard>
</Grid>
<Grid xs={3}>
<ComputerCard icon={<Code2Icon />} title="Python Version">
{server.python_version}
</ComputerCard>
const { data: pythonLibraries } = useSWR(
chatAPI.Endpoints.ServerInfo.PythonLibraries(),
fetcher
);

return (
<Sheet
sx={{
display: 'flex',
flexDirection: 'column',
gap: '1rem',
paddingBottom: '10px',
height: '100%',
overflow: 'hidden',
paddingTop: '1rem',
}}
>
{server && (
<>
{/* {JSON.stringify(server)} */}
<Typography level="h2" paddingBottom={3}>
Server Information
</Typography>
<Sheet className="OrderTableContainer">
<Grid container spacing={2} sx={{}}>
<Grid xs={4}>
<ComputerCard
icon={<FaComputer />}
title="Machine"
description={`${server.os} - ${server.name}`}
>
CPU: {server.cpu_percent}%<br />
{server.cpu_count} Cores
</ComputerCard>
</Grid>{' '}
<Grid xs={2}>
<ComputerCard icon={<PiMathOperationsFill />} title="Device">
GPU: {server.gpu?.length === 0 ? '❌' : '✅'}
<br />
CUDA: {server?.device === 'cuda' ? '✅ ' : '❌ '}
<br />
CUDA Version: {server?.cuda_version}
<br />
Python MPS: {server?.device === 'mps' ? '✅ ' : '❌ '}
</ComputerCard>
</Grid>{' '}
<Grid xs={4}>
<ComputerCard
icon={<BsGpuCard />}
title="GPU Specs"
image={undefined}
>
{server.gpu?.map((g) => {
return (
<>
🔥 {g.name}
<br />
{formatBytes(Math.round(g?.used_memory))} Used
<br />
{formatBytes(g.total_memory)} Total
</>
);
})}
<br />
Used Memory:{' '}
{Math.round(
server.gpu[0]?.used_memory / server.gpu[0]?.total_memory
)}
%
</ComputerCard>
</Grid>{' '}
<Grid xs={3}>
<ComputerCard icon={<LayoutIcon />} title="Operating System">
{server?.platform}
</ComputerCard>
</Grid>
<Grid xs={3}>
<ComputerCard icon={<MemoryStickIcon />} title="Memory">
<>
<Typography>
Total Memory: {formatBytes(server.memory?.total)}
</Typography>
<Typography>
Available: {formatBytes(server.memory?.available)}
</Typography>
<Typography>Percent: {server.memory?.percent}%</Typography>
</>
</ComputerCard>
</Grid>
<Grid xs={3}>
<ComputerCard title="Disk" icon={<DatabaseIcon />}>
Total: {formatBytes(server.disk?.total)} - Used:{' '}
{formatBytes(server.disk?.free)} - Free:{' '}
{server.disk?.percent}%
</ComputerCard>
</Grid>
<Grid xs={3}>
<ComputerCard icon={<Code2Icon />} title="Python Version">
{server.python_version}
</ComputerCard>
</Grid>
</Grid>
</Grid>

{/* <h3>System Properties in Electron</h3>
{/* <h3>System Properties in Electron</h3>
<Button onClick={getSystemProperties}>
Print all System Properties
</Button>
<br />
<pre id="info" style={{ whiteSpace: 'pre-wrap' }} /> */}
</Sheet>
</>
);
}
</Sheet>
</>
)}
<Typography level="h2" paddingBottom={0}>
Installed Python Libraries
</Typography>
<FormControl size="sm">
<FormLabel>&nbsp;</FormLabel>
<Input
placeholder="Search"
value={searchText}
onChange={(e) => setSearchText(e.target.value)}
startDecorator={<SearchIcon />}
/>
</FormControl>
{pythonLibraries && (
<>
<Sheet sx={{ overflow: 'auto' }}>
<Table borderAxis="both" sx={{ width: 'auto' }}>
<thead>
<tr>
<th>Library</th>
<th>Version</th>
</tr>
</thead>
<tbody>
{pythonLibraries
.filter((lib) =>
lib.name.toLowerCase().includes(searchText.toLowerCase())
)
.map((lib) => {
return (
<tr>
<td>{lib.name}</td>
<td>{lib.version}</td>
</tr>
);
})}
</tbody>
</Table>
</Sheet>
</>
)}
</Sheet>
);
}
5 changes: 5 additions & 0 deletions src/renderer/lib/transformerlab-api-sdk.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -670,6 +670,11 @@ Endpoints.Prompts = {
Delete: (promptId: string) => API_URL() + 'prompts/delete/' + promptId,
};

Endpoints.ServerInfo = {
Get: () => API_URL() + 'server/info',
PythonLibraries: () => API_URL() + 'server/python_libraries',
};

export function GET_TRAINING_TEMPLATE_URL() {
return API_URL() + 'train/templates';
}
Expand Down

0 comments on commit e7be86c

Please sign in to comment.