diff --git a/src/renderer/components/Computer.tsx b/src/renderer/components/Computer.tsx
index d5209d26c97a1e8d5f471046624384553d187dbe..0870fdc2f98c251449491c8c81498b6015591d11 100644
--- a/src/renderer/components/Computer.tsx
+++ b/src/renderer/components/Computer.tsx
@@ -80,245 +80,286 @@ export default function Computer() {
);
return (
- <Tabs sx={{ height: '100%', overflow: 'hidden' }}>
- <TabList>
- <Tab>Server Information</Tab>
- <Tab>Python Libraries</Tab>
- </TabList>
- <TabPanel value={0}>
- {server && (
- <>
- {/* {JSON.stringify(server)} */}
- <Typography level="h2" paddingBottom={3}>
- Server Information
- </Typography>
- <Sheet className="OrderTableContainer">
- <Grid container spacing={2} sx={{}}>
- <Grid xs={2}>
- <ComputerCard
- icon={<FaComputer />}
- title="Machine"
- description={`${server.os} - ${server.name}`}
- >
- <StatRow title="CPU" value={server?.cpu_percent + '%'} />
- <StatRow title="Cores" value={server?.cpu_count} />
- </ComputerCard>
- </Grid>
- <Grid xs={4}>
- <ComputerCard
- icon={<BsGpuCard />}
- title={'GPU Specs (' + server.gpu?.length + ')'}
- image={undefined}
- >
- {server.gpu?.map((g, i) => {
- return (
- <Box mb={2}>
- <Typography level="title-md">GPU # {i}</Typography>
- {g.name.includes('NVIDIA') ? (
- <SiNvidia color="#76B900" />
- ) : (
- '🔥'
- )}
-
- {g.name}
- <StatRow
- title="Total VRAM"
- value={formatBytes(g?.total_memory)}
- />
- <StatRow
- title="Available"
- value={formatBytes(g?.free_memory)}
- />
- {g.total_memory !== 'n/a' && (
- <>
- <StatRow
- title="Used"
- value={
- <>
- {Math.round(
- (g?.used_memory / g?.total_memory) * 100,
- )}
- %
- <LinearProgress
- determinate
- value={
- (g?.used_memory / g?.total_memory) * 100
- }
- variant="solid"
- sx={{ minWidth: '50px' }}
- />
- </>
- }
- />
- </>
- )}
- </Box>
- );
- })}
- </ComputerCard>
- </Grid>
- <Grid xs={3}>
- <ComputerCard icon={<ZapIcon />} title="Acceleration">
- <StatRow
- title="GPU"
- value={server.gpu?.length === 0 ? 'âŒ' : '✅'}
- />
- <StatRow
- title="CUDA"
- value={server?.device === 'cuda' ? '✅ ' : 'âŒ'}
- />
- <StatRow
- title="CUDA Version"
- value={server?.cuda_version}
- />{' '}
- <StatRow
- title="Python MPS"
- value={server?.device === 'mps' ? '✅ ' : 'âŒ'}
- />{' '}
- <StatRow
- title="Flash Attention"
- value={
- server?.flash_attn_version &&
- server?.flash_attn_version != 'n/a'
- ? '✅'
- : 'âŒ'
- }
- />
- <StatRow
- title="Flash Attn Version"
- value={server?.flash_attn_version}
- />
- </ComputerCard>
- </Grid>
- <Grid xs={3}>
- <ComputerCard icon={<LayoutIcon />} title="Operating System">
- {server?.platform.includes('microsoft') && <FaWindows />}
- {server?.platform}
- </ComputerCard>
- </Grid>
- <Grid xs={3}>
- <ComputerCard icon={<MemoryStickIcon />} title="Memory">
- <>
+ <Sheet
+ sx={{
+ display: 'flex',
+ flexDirection: 'column',
+ height: '100%',
+ overflow: 'hidden',
+ paddingBottom: '1rem',
+ }}
+ >
+ <Tabs
+ sx={{
+ height: '100%',
+ display: 'block',
+ overflow: 'hidden',
+ }}
+ >
+ <TabList>
+ <Tab>Server Information</Tab>
+ <Tab>Python Libraries</Tab>
+ </TabList>
+ <TabPanel
+ value={0}
+ sx={{
+ overflow: 'hidden',
+ height: '100%',
+ }}
+ >
+ {server && (
+ <Sheet
+ sx={{
+ display: 'flex',
+ flexDirection: 'column',
+ height: '100%',
+ overflow: 'hidden',
+ paddingBottom: '1rem',
+ }}
+ >
+ {/* {JSON.stringify(server)} */}
+ <Typography level="h2" paddingBottom={1}>
+ Server Information
+ </Typography>
+ <Sheet
+ className="OrderTableContainer"
+ sx={{
+ display: 'flex',
+ height: '100%',
+ overflowY: 'auto',
+ padding: '10px',
+ }}
+ >
+ <Grid container spacing={2} sx={{}}>
+ <Grid xs={2}>
+ <ComputerCard
+ icon={<FaComputer />}
+ title="Machine"
+ description={`${server.os} - ${server.name}`}
+ >
+ <StatRow title="CPU" value={server?.cpu_percent + '%'} />
+ <StatRow title="Cores" value={server?.cpu_count} />
+ </ComputerCard>
+ </Grid>
+ <Grid xs={4}>
+ <ComputerCard
+ icon={<BsGpuCard />}
+ title={'GPU Specs (' + server.gpu?.length + ')'}
+ image={undefined}
+ >
+ {server.gpu?.map((g, i) => {
+ return (
+ <Box mb={2}>
+ <Typography level="title-md">GPU # {i}</Typography>
+ {g.name.includes('NVIDIA') ? (
+ <SiNvidia color="#76B900" />
+ ) : (
+ '🔥'
+ )}
+
+ {g.name}
+ <StatRow
+ title="Total VRAM"
+ value={formatBytes(g?.total_memory)}
+ />
+ <StatRow
+ title="Available"
+ value={formatBytes(g?.free_memory)}
+ />
+ {g.total_memory !== 'n/a' && (
+ <>
+ <StatRow
+ title="Used"
+ value={
+ <>
+ {Math.round(
+ (g?.used_memory / g?.total_memory) *
+ 100,
+ )}
+ %
+ <LinearProgress
+ determinate
+ value={
+ (g?.used_memory / g?.total_memory) *
+ 100
+ }
+ variant="solid"
+ sx={{ minWidth: '50px' }}
+ />
+ </>
+ }
+ />
+ </>
+ )}
+ </Box>
+ );
+ })}
+ </ComputerCard>
+ </Grid>
+ <Grid xs={3}>
+ <ComputerCard icon={<ZapIcon />} title="Acceleration">
+ <StatRow
+ title="GPU"
+ value={server.gpu?.length === 0 ? 'âŒ' : '✅'}
+ />
+ <StatRow
+ title="CUDA"
+ value={server?.device === 'cuda' ? '✅ ' : 'âŒ'}
+ />
+ <StatRow
+ title="CUDA Version"
+ value={server?.cuda_version}
+ />{' '}
+ <StatRow
+ title="Python MPS"
+ value={server?.device === 'mps' ? '✅ ' : 'âŒ'}
+ />{' '}
+ <StatRow
+ title="Flash Attention"
+ value={
+ server?.flash_attn_version &&
+ server?.flash_attn_version != 'n/a'
+ ? '✅'
+ : 'âŒ'
+ }
+ />
+ <StatRow
+ title="Flash Attn Version"
+ value={server?.flash_attn_version}
+ />
+ </ComputerCard>
+ </Grid>
+ <Grid xs={3}>
+ <ComputerCard
+ icon={<LayoutIcon />}
+ title="Operating System"
+ >
+ {server?.platform.includes('microsoft') && <FaWindows />}
+ {server?.platform}
+ </ComputerCard>
+ </Grid>
+ <Grid xs={3}>
+ <ComputerCard icon={<MemoryStickIcon />} title="Memory">
+ <>
+ <StatRow
+ title="Total"
+ value={formatBytes(server.memory?.total)}
+ />
+ <StatRow
+ title="Available"
+ value={formatBytes(server.memory?.available)}
+ />
+ <StatRow
+ title="Percent"
+ value={server.memory?.percent + '%'}
+ />
+ </>
+ </ComputerCard>
+ </Grid>
+ <Grid xs={3}>
+ <ComputerCard title="Disk" icon={<DatabaseIcon />}>
<StatRow
title="Total"
- value={formatBytes(server.memory?.total)}
+ value={formatBytes(server.disk?.total)}
+ />
+ <StatRow
+ title="Used"
+ value={formatBytes(server.disk?.used)}
/>
<StatRow
- title="Available"
- value={formatBytes(server.memory?.available)}
+ title="Free"
+ value={formatBytes(server.disk?.free)}
/>
<StatRow
title="Percent"
- value={server.memory?.percent + '%'}
+ value={
+ <>
+ {server.disk?.percent}%
+ <LinearProgress
+ determinate
+ value={server.disk?.percent}
+ variant="solid"
+ sx={{ minWidth: '50px' }}
+ />
+ </>
+ }
/>
- </>
- </ComputerCard>
+ </ComputerCard>
+ </Grid>
+ <Grid xs={3}>
+ <ComputerCard icon={<FaPython />} title="Python Version">
+ {server.python_version}
+ </ComputerCard>
+ </Grid>
</Grid>
- <Grid xs={3}>
- <ComputerCard title="Disk" icon={<DatabaseIcon />}>
- <StatRow
- title="Total"
- value={formatBytes(server.disk?.total)}
- />
- <StatRow
- title="Used"
- value={formatBytes(server.disk?.used)}
- />
- <StatRow
- title="Free"
- value={formatBytes(server.disk?.free)}
- />
- <StatRow
- title="Percent"
- value={
- <>
- {server.disk?.percent}%
- <LinearProgress
- determinate
- value={server.disk?.percent}
- variant="solid"
- sx={{ minWidth: '50px' }}
- />
- </>
- }
- />
- </ComputerCard>
- </Grid>
- <Grid xs={3}>
- <ComputerCard icon={<FaPython />} title="Python Version">
- {server.python_version}
- </ComputerCard>
- </Grid>
- </Grid>
+ </Sheet>
</Sheet>
- </>
- )}
- </TabPanel>
- <TabPanel
- value={1}
- style={{
- display: 'flex',
- flexDirection: 'column',
- height: '100%',
- overflow: 'hidden',
- }}
- >
- <Sheet
+ )}
+ </TabPanel>
+ <TabPanel
+ value={1}
style={{
- display: 'flex',
- flexDirection: 'column',
height: '100%',
- overflow: 'hidden',
- gap: '1rem',
+ overflow: 'auto',
}}
>
- <Typography level="h2" paddingTop={2}>
- Installed Python Libraries
- </Typography>
- <Typography level="title-sm" paddingBottom={0}>
- Conda Environment: {server?.conda_environment} @{' '}
- {server?.conda_prefix}
- </Typography>
- <FormControl size="sm" sx={{ width: '400px' }}>
- <Input
- placeholder="Search"
- value={searchText}
- onChange={(e) => setSearchText(e.target.value)}
- startDecorator={<SearchIcon />}
- />
- </FormControl>
- {pythonLibraries && (
- <>
- <Sheet sx={{ overflow: 'auto', width: 'fit-content' }}>
- <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>
- </TabPanel>
- </Tabs>
+ <Sheet
+ style={{
+ display: 'flex',
+ flexDirection: 'column',
+ height: '100%',
+ overflow: 'hidden',
+ gap: '1rem',
+ }}
+ >
+ <Typography level="h2" paddingTop={0}>
+ Installed Python Libraries
+ </Typography>
+ <Typography level="title-sm" paddingBottom={0}>
+ Conda Environment: {server?.conda_environment} @{' '}
+ {server?.conda_prefix}
+ </Typography>
+ <FormControl size="sm" sx={{ width: '400px' }}>
+ <Input
+ placeholder="Search"
+ value={searchText}
+ onChange={(e) => setSearchText(e.target.value)}
+ startDecorator={<SearchIcon />}
+ />
+ </FormControl>
+ {pythonLibraries && (
+ <>
+ <Sheet sx={{ overflow: 'auto', width: 'fit-content' }}>
+ <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>
+ </TabPanel>
+ </Tabs>
+ </Sheet>
);
}