diff --git a/src/renderer/components/Header.tsx b/src/renderer/components/Header.tsx index bec54a0800a1ff534777ec9284a56cbd1d17244b..9f19c0921d2d5c5fab0b8c98a3e9c18d2c0368ea 100644 --- a/src/renderer/components/Header.tsx +++ b/src/renderer/components/Header.tsx @@ -17,6 +17,7 @@ import ModelCurrentlyPlayingBar from './ModelCurrentlyPlayingBar'; import { Link as ReactRouterLink, useNavigate } from 'react-router-dom'; import TinyMLXLogo from './Shared/TinyMLXLogo'; +import TinyNVIDIALogo from './Shared/TinyNVIDIALogo'; function StatsBar({ connection, setConnection }) { const [cs, setCS] = useState({ cpu: [0], gpu: [0], mem: [0] }); @@ -100,7 +101,7 @@ function StatsBar({ connection, setConnection }) { sx={{ fontSize: 12 }} variant="outlined" > - <span> + <span id="hoo"> <Stack gap={0} direction="row"> VRAM: <div style={{ width: '60px', textAlign: 'center' }}> @@ -120,7 +121,12 @@ function StatsBar({ connection, setConnection }) { percent={Math.round(gpu?.utilization)} /> ))} + <span style={{ display: 'flex', alignItems: 'center' }}> + {server?.device == 'cuda' && ( + <TinyNVIDIALogo/> + )}</span> </Stack> + </span> </Tooltip> ); @@ -363,6 +369,7 @@ function PercentWithColoredBackgroundMeter({ percent }) { justifyContent: 'center', minWidth: '38px', padding: '12px 0px 12px 5px', + marginRight: '3px', height: '20px', backgroundColor: percent > 80 diff --git a/src/renderer/components/Shared/TinyNVIDIALogo.tsx b/src/renderer/components/Shared/TinyNVIDIALogo.tsx new file mode 100644 index 0000000000000000000000000000000000000000..05e3dc63ede8aad19f151f092ebc9c3c296ba9a7 --- /dev/null +++ b/src/renderer/components/Shared/TinyNVIDIALogo.tsx @@ -0,0 +1,5 @@ +export default function TinyMLXLogo() { + return ( + <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"><path d="m5.9698 5.86543v-.95636c.09285-.00661.18663-.01156.28219-.01456a5.75152 5.75152 0 0 1 4.33173 2.24749s-1.8534 2.57431-3.84063 2.57431a2.40975 2.40975 0 0 1 -.77329-.12364v-2.9c1.01832.123 1.223.57279 1.83539 1.59325l1.36157-1.148a3.60517 3.60517 0 0 0 -2.66934-1.30361 4.93745 4.93745 0 0 0 -.52762.03112m0-3.15922v1.42853c.09389-.00742.1879-.0134.28219-.0168 3.63754-.12254 6.0073 2.98317 6.0073 2.98317s-2.722 3.31-5.55774 3.31a4.18488 4.18488 0 0 1 -.73175-.06444v.883a4.81728 4.81728 0 0 0 .60938.03947c2.639 0 4.54736-1.34759 6.39542-2.94267.30618.24532 1.56062.8421 1.8186 1.1037-1.75722 1.47088-5.852 2.65644-8.17346 2.65644-.22369 0-.43886-.01352-.64994-.03376v1.241h10.0302v-10.58764zm0 6.88646v.754a4.26109 4.26109 0 0 1 -3.11821-2.97239 5.27645 5.27645 0 0 1 3.11821-1.50885v.8272l-.0038-.0004a2.34214 2.34214 0 0 0 -1.81935.83163 3.25091 3.25091 0 0 0 1.82315 2.06881m-4.33507-2.32834a6.045 6.045 0 0 1 4.33507-2.35526v-.77433c-3.19927.25677-5.9698 2.96637-5.9698 2.96637s1.56908 4.53638 5.9698 4.95171v-.82318c-3.22936-.4063-4.33507-3.96531-4.33507-3.96531z" fill="#76b900"></path></svg> + ); +}