ostris/ai-toolkit
1
0
Fork 0
mirror of https://github.com/ostris/ai-toolkit.git synced 2026-04-21 14:59:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

Cleaned up dashboard

Browse Source
This commit is contained in:
Jaret Burkett
2025-02-22 13:23:26 -07:00
parent ed99c3c0c8
commit f3725578dd
7 changed files with 150 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
ui/src/app/api/gpu/route.ts
View File

@@ -47,9 +47,9 @@ async function checkNvidiaSmi(): Promise<boolean> {
}
async function getGpuStats() {
// Get detailed GPU information in JSON format
// Get detailed GPU information in JSON format including fan speed
const { stdout } = await execAsync(
'nvidia-smi --query-gpu=index,name,driver_version,temperature.gpu,utilization.gpu,utilization.memory,memory.total,memory.free,memory.used,power.draw,power.limit,clocks.current.graphics,clocks.current.memory --format=csv,noheader,nounits',
'nvidia-smi --query-gpu=index,name,driver_version,temperature.gpu,utilization.gpu,utilization.memory,memory.total,memory.free,memory.used,power.draw,power.limit,clocks.current.graphics,clocks.current.memory,fan.speed --format=csv,noheader,nounits',
);
// Parse CSV output
@@ -71,6 +71,7 @@ async function getGpuStats() {
powerLimit,
clockGraphics,
clockMemory,
fanSpeed,
] = line.split(', ').map(item => item.trim());
return {
@@ -95,8 +96,11 @@ async function getGpuStats() {
graphics: parseInt(clockGraphics),
memory: parseInt(clockMemory),
},
fan: {
speed: parseInt(fanSpeed), // Fan speed as percentage
},
};
});
return gpus;
}
}

11
ui/src/app/dashboard/page.tsx
View File

@@ -1,7 +1,9 @@
'use client';
import GpuMonitor from '@/components/GPUMonitor';
import JobsTable from '@/components/JobsTable';
import { TopBar, MainContent } from '@/components/layout';
import Link from 'next/link';
export default function Dashboard() {
return (
@@ -14,6 +16,15 @@ export default function Dashboard() {
</TopBar>
<MainContent>
<GpuMonitor />
<div className="w-full mt-4">
<div className="flex justify-between items-center mb-2">
<h1 className="text-md">Active Jobs</h1>
<div className="text-xs text-gray-500">
<Link href="/jobs">View All</Link>
</div>
</div>
<JobsTable onlyActive />
</div>
</MainContent>
</>
);

35
ui/src/components/GPUMonitor.tsx
View File

@@ -1,4 +1,3 @@
// components/GpuMonitor.tsx
import React, { useState, useEffect } from 'react';
import { GPUApiResponse } from '@/types';
import Loading from '@/components/Loading';
@@ -40,6 +39,30 @@ const GpuMonitor: React.FC = () => {
return () => clearInterval(intervalId);
}, []);
const getGridClasses = (gpuCount: number): string => {
switch (gpuCount) {
case 1:
return 'grid-cols-1';
case 2:
return 'grid-cols-2';
case 3:
return 'grid-cols-3';
case 4:
return 'grid-cols-4';
case 5:
case 6:
return 'grid-cols-3';
case 7:
case 8:
return 'grid-cols-4';
case 9:
case 10:
return 'grid-cols-5';
default:
return 'grid-cols-3';
}
};
if (loading) {
return <Loading />;
}
@@ -79,16 +102,18 @@ const GpuMonitor: React.FC = () => {
);
}
const gridClass = getGridClasses(gpuData.gpus.length);
return (
<div className="">
<div className="w-full">
<div className="flex justify-between items-center mb-2">
<h1 className="text-md">GPU Monitor</h1>
<div className="text-xs text-gray-500">Last updated: {lastUpdated?.toLocaleTimeString()}</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
{gpuData.gpus.map(gpu => (
<GPUWidget key={gpu.index} gpu={gpu} />
<div className={`grid ${gridClass} gap-3`}>
{gpuData.gpus.map((gpu, idx) => (
<GPUWidget key={idx} gpu={gpu} />
))}
</div>
</div>

160
ui/src/components/GPUWidget.tsx
View File

@@ -1,95 +1,111 @@
import React, { useState } from 'react';
import React from 'react';
import { GpuInfo } from '@/types';
import { ChevronRight, Thermometer, Zap, Clock, HardDrive, Fan, Cpu } from 'lucide-react';
interface GPUWidgetProps {
gpu: GpuInfo;
}
export default function GPUWidget({ gpu }: GPUWidgetProps) {
// Helper to format memory values
const formatMemory = (mb: number): string => {
if (mb >= 1024) {
return `${(mb / 1024).toFixed(2)} GB`;
}
return `${mb} MB`;
return mb >= 1024 ? `${(mb / 1024).toFixed(1)} GB` : `${mb} MB`;
};
const getUtilizationColor = (value: number): string => {
return value < 30 ? 'bg-emerald-500' : value < 70 ? 'bg-amber-500' : 'bg-rose-500';
};
// Helper to determine temperature color
const getTemperatureColor = (temp: number): string => {
if (temp < 50) return 'text-green-600';
if (temp < 80) return 'text-yellow-600';
return 'text-red-600';
return temp < 50 ? 'text-emerald-500' : temp < 80 ? 'text-amber-500' : 'text-rose-500';
};
return (
<>
<div
key={gpu.index}
className="bg-gray-900 rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow duration-300 px-2 py-2"
>
<div className="bg-gray-800 text-white px-2 py-1 flex justify-between items-center">
<h2 className="font-bold text-sm truncate">{gpu.name}</h2>
<span className="text-xs bg-gray-700 rounded px-1 py-0.5">GPU #{gpu.index}</span>
<div className="bg-gray-900 rounded-xl shadow-lg overflow-hidden hover:shadow-2xl transition-all duration-300 border border-gray-800">
<div className="bg-gray-800 px-4 py-3 flex items-center justify-between">
<div className="flex items-center space-x-2">
<h2 className="font-semibold text-gray-100">{gpu.name}</h2>
<span className="px-2 py-0.5 bg-gray-700 rounded-full text-xs text-gray-300">
#{gpu.index}
</span>
</div>
<ChevronRight className="w-4 h-4 text-gray-400" />
</div>
<div className="p-4 space-y-4">
{/* Temperature, Fan, and Utilization Section */}
<div className="grid grid-cols-2 gap-4">
<div className="space-y-2">
<div className="flex items-center space-x-2">
<Thermometer className={`w-4 h-4 ${getTemperatureColor(gpu.temperature)}`} />
<div>
<p className="text-xs text-gray-400">Temperature</p>
<p className={`text-sm font-medium ${getTemperatureColor(gpu.temperature)}`}>
{gpu.temperature}°C
</p>
</div>
</div>
<div className="flex items-center space-x-2">
<Fan className="w-4 h-4 text-blue-400" />
<div>
<p className="text-xs text-gray-400">Fan Speed</p>
<p className="text-sm font-medium text-blue-400">
{gpu.fan.speed}%
</p>
</div>
</div>
</div>
<div>
<div className="flex items-center space-x-2 mb-1">
<Cpu className="w-4 h-4 text-gray-400" />
<p className="text-xs text-gray-400">GPU Load</p>
<span className="text-xs text-gray-300 ml-auto">{gpu.utilization.gpu}%</span>
</div>
<div className="w-full bg-gray-700 rounded-full h-1">
<div
className={`h-1 rounded-full transition-all ${getUtilizationColor(gpu.utilization.gpu)}`}
style={{ width: `${gpu.utilization.gpu}%` }}
/>
</div>
<div className="flex items-center space-x-2 mb-1 mt-3">
<HardDrive className="w-4 h-4 text-blue-400" />
<p className="text-xs text-gray-400">Memory</p>
<span className="text-xs text-gray-300 ml-auto">
{((gpu.memory.used / gpu.memory.total) * 100).toFixed(1)}%
</span>
</div>
<div className="w-full bg-gray-700 rounded-full h-1">
<div
className="h-1 rounded-full bg-blue-500 transition-all"
style={{ width: `${(gpu.memory.used / gpu.memory.total) * 100}%` }}
/>
</div>
<p className="text-xs text-gray-400 mt-0.5">
{formatMemory(gpu.memory.used)} / {formatMemory(gpu.memory.total)}
</p>
</div>
</div>
<div className="p-2">
<div className="mb-2 flex items-center">
<p className="text-xs text-gray-500 mr-1">Temperature:</p>
<p className={`text-sm font-bold ${getTemperatureColor(gpu.temperature)}`}>{gpu.temperature}°C</p>
</div>
<div className="">
<p className="text-xs text-gray-600 mb-0.5">GPU Utilization</p>
<div className="w-full bg-gray-500 rounded-full h-1.5">
<div
className={`h-1.5 rounded-full ${gpu.utilization.gpu < 30 ? 'bg-green-500' : gpu.utilization.gpu < 70 ? 'bg-yellow-500' : 'bg-red-500'}`}
style={{ width: `${gpu.utilization.gpu}%` }}
></div>
</div>
<p className="text-right text-xs mt-0.5">{gpu.utilization.gpu}%</p>
</div>
<div className="mb-2">
<p className="text-xs text-gray-600 mb-0.5">Memory Utilization</p>
<div className="w-full bg-gray-500 rounded-full h-1.5">
<div
className="h-1.5 rounded-full bg-blue-500"
style={{ width: `${(gpu.memory.used / gpu.memory.total) * 100}%` }}
></div>
</div>
<div className="flex justify-between text-xs mt-0.5">
<span>
{formatMemory(gpu.memory.used)} / {formatMemory(gpu.memory.total)}
</span>
<span>{((gpu.memory.used / gpu.memory.total) * 100).toFixed(1)}%</span>
</div>
</div>
<div className="grid grid-cols-2 gap-2 mb-2">
{/* Power and Clocks Section */}
<div className="grid grid-cols-2 gap-4 pt-2 border-t border-gray-800">
<div className="flex items-start space-x-2">
<Clock className="w-4 h-4 text-purple-400" />
<div>
<p className="text-xs text-gray-500 mb-0.5">Power</p>
<p className="text-sm font-medium">
{gpu.power.draw.toFixed(1)}W / {gpu.power.limit.toFixed(1)}W
<p className="text-xs text-gray-400">Clock Speed</p>
<p className="text-sm text-gray-200">{gpu.clocks.graphics} MHz</p>
</div>
</div>
<div className="flex items-start space-x-2">
<Zap className="w-4 h-4 text-amber-400" />
<div>
<p className="text-xs text-gray-400">Power Draw</p>
<p className="text-sm text-gray-200">
{gpu.power.draw.toFixed(1)}W
<span className="text-gray-400 text-xs"> / {gpu.power.limit.toFixed(1)}W</span>
</p>
</div>
<div>
<p className="text-xs text-gray-500 mb-0.5">Memory Clock</p>
<p className="text-sm font-medium">{gpu.clocks.memory} MHz</p>
</div>
</div>
<div className="mt-1 pt-1 border-t border-gray-600 grid grid-cols-2 gap-2">
<div>
<p className="text-xs text-gray-500 mb-0.5">Graphics Clock</p>
<p className="text-sm font-medium">{gpu.clocks.graphics} MHz</p>
</div>
<div className="">
<p className="text-xs text-gray-500 mb-0.5">Driver Version</p>
<p className="text-sm font-medium">{gpu.driverVersion}</p>
</div>
</div>
</div>
</div>
</>
</div>
);
}
}

12
ui/src/components/JobsTable.tsx
View File

@@ -2,16 +2,14 @@ import useJobsList from '@/hooks/useJobsList';
import Link from 'next/link';
import UniversalTable, { TableColumn } from '@/components/UniversalTable';
import { JobConfig } from '@/types';
import { Eye, Trash2, Pen, Play, Pause } from 'lucide-react';
import { Button } from '@headlessui/react';
import { openConfirm } from '@/components/ConfirmModal';
import { startJob, stopJob, deleteJob, getAvaliableJobActions } from '@/utils/jobs';
import JobActionBar from './JobActionBar';
interface JobsTableProps {}
interface JobsTableProps {
onlyActive?: boolean;
}
export default function JobsTable(props: JobsTableProps) {
const { jobs, status, refreshJobs } = useJobsList();
export default function JobsTable({ onlyActive = false }: JobsTableProps) {
const { jobs, status, refreshJobs } = useJobsList(onlyActive);
const isLoading = status === 'loading';
const columns: TableColumn[] = [

5
ui/src/hooks/useJobsList.tsx
View File

@@ -3,7 +3,7 @@
import { useEffect, useState } from 'react';
import { Job } from '@prisma/client';
export default function useJobsList() {
export default function useJobsList(onlyActive = false) {
const [jobs, setJobs] = useState<Job[]>([]);
const [status, setStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');
@@ -17,6 +17,9 @@ export default function useJobsList() {
console.log('Error fetching jobs:', data.error);
setStatus('error');
} else {
if (onlyActive) {
data.jobs = data.jobs.filter((job: Job) => job.status === 'running');
}
setJobs(data.jobs);
setStatus('success');
}

5
ui/src/types.ts
View File

@@ -23,6 +23,10 @@ export interface GpuClocks {
memory: number;
}
export interface GpuFan {
speed: number;
}
export interface GpuInfo {
index: number;
name: string;
@@ -32,6 +36,7 @@ export interface GpuInfo {
memory: GpuMemory;
power: GpuPower;
clocks: GpuClocks;
fan: GpuFan;
}
export interface GPUApiResponse {