github/ai-toolkit
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Add a way to delete checkpoints on the ui

Browse Source
This commit is contained in:
Jaret Burkett
2026-05-26 07:09:21 -06:00
parent 954c5efec8
commit 266956068a
2 changed files with 101 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
ui/src/components/FilesWidget.tsx
View File

@@ -1,9 +1,10 @@
import React from 'react';
import useFilesList from '@/hooks/useFilesList';
import Link from 'next/link';
import { Loader2, AlertCircle, Download, Box, Brain } from 'lucide-react';
import { Loader2, AlertCircle, Download, Box, Brain, Trash2 } from 'lucide-react';
import { openMergeLoRAsModal } from './MergeLoRAsModal';
import { getFilename, getFoldername } from '@/utils/basic';
import { openConfirm } from './ConfirmModal';
import { apiClient } from '@/utils/api';
export default function FilesWidget({ jobID, jobName }: { jobID: string; jobName: string }) {
const { files, status, refreshFiles } = useFilesList(jobID, 5000);
@@ -20,6 +21,26 @@ export default function FilesWidget({ jobID, jobName }: { jobID: string; jobName
}
};
const handleDeleteFile = (filePath: string) => {
const fileName = getFilename(filePath);
openConfirm({
title: 'Delete Checkpoint',
message: `Are you sure you want to delete "${fileName}"? This action cannot be undone.`,
type: 'warning',
confirmText: 'Delete',
onConfirm: () => {
apiClient
.post('/api/files/delete', { filePath })
.then(() => {
refreshFiles();
})
.catch(error => {
console.error('Error deleting checkpoint:', error);
});
},
});
};
return (
<div className="col-span-2 bg-gray-900 rounded-xl shadow-lg overflow-hidden border border-gray-800">
<div className="bg-gray-800 px-4 py-3 flex items-center justify-between">
@@ -68,13 +89,15 @@ export default function FilesWidget({ jobID, jobName }: { jobID: string; jobName
const fileName = getFilename(file.path);
const nameWithoutExt = fileName.replace('.safetensors', '');
return (
<a
<div
key={index}
target="_blank"
href={`/api/files/${encodeURIComponent(file.path)}`}
className="group flex items-center justify-between px-2 py-1.5 rounded-lg hover:bg-gray-800 transition-all duration-200"
>
<div className="flex items-center space-x-2 min-w-0">
<a
target="_blank"
href={`/api/files/${encodeURIComponent(file.path)}`}
className="flex items-center space-x-2 min-w-0 flex-1"
>
<Box className="w-4 h-4 text-purple-600 dark:text-purple-400 flex-shrink-0" />
<div className="flex flex-col min-w-0">
<div className="flex text-sm text-gray-200">
@@ -84,14 +107,26 @@ export default function FilesWidget({ jobID, jobName }: { jobID: string; jobName
</div>
<span className="text-xs text-gray-500">.safetensors</span>
</div>
</div>
</a>
<div className="flex items-center space-x-3 flex-shrink-0">
<span className="text-xs text-gray-400">{cleanSize(file.size)}</span>
<div className="bg-purple-500 bg-opacity-0 group-hover:bg-opacity-10 rounded-full p-1 transition-all">
<a
target="_blank"
href={`/api/files/${encodeURIComponent(file.path)}`}
className="bg-purple-500 bg-opacity-0 group-hover:bg-opacity-10 rounded-full p-1 transition-all"
>
<Download className="w-3 h-3 text-purple-600 dark:text-purple-400" />
</div>
</a>
<button
type="button"
onClick={() => handleDeleteFile(file.path)}
className="bg-red-500 bg-opacity-0 group-hover:bg-opacity-10 hover:!bg-opacity-30 rounded-full p-1 transition-all"
title="Delete checkpoint"
>
<Trash2 className="w-3 h-3 text-red-500" />
</button>
</div>
</a>
</div>
);
})}
</div>