diff --git a/src/renderer/components/ModelZoo/ModelStore.tsx b/src/renderer/components/ModelZoo/ModelStore.tsx index 184d379f8816949d3910c11fb383a5d802864bfe..f66ed7b271b81c41ce933be7e5a3762423d96595 100644 --- a/src/renderer/components/ModelZoo/ModelStore.tsx +++ b/src/renderer/components/ModelZoo/ModelStore.tsx @@ -102,6 +102,7 @@ export default function ModelStore() { // and it is -1 if a download has been initiated but it hasn't started yet const [jobId, setJobId] = useState(null); const [currentlyDownloading, setCurrentlyDownloading] = useState(null); + const [canceling, setCanceling] = useState(false); const [modelDetailsId, setModelDetailsId] = useState(null); const [searchText, setSearchText] = useState(''); const [filters, setFilters] = useState({ archived: false }); @@ -223,8 +224,51 @@ export default function ModelStore() { flexDirection: 'column', overflow: 'hidden', }} - > - <DownloadProgressBox jobId={jobId} assetName={currentlyDownloading} /> + > + <Box + sx={{ + position: 'relative', + margin: '0.5rem 0 1rem 0', + width: '100%', + }} + > + <DownloadProgressBox jobId={jobId} assetName={currentlyDownloading} /> + {jobId && ( + <Button + variant="outlined" + size="sm" + color="danger" + disabled={canceling} + onClick={async () => { + setCanceling(true); + try { + let response = await fetch(chatAPI.Endpoints.Jobs.Stop(jobId)); + if (response.ok) { + setJobId(null); + setCurrentlyDownloading(null); + } else { + console.error('Failed to cancel download:', response); + alert('Failed to cancel download'); + setCanceling(false); + } + } catch (error) { + console.error('Error canceling download:', error); + alert('Error canceling download'); + setCanceling(false); + } + }} + sx={{ + position: 'absolute', + top: '1rem', + right: '1rem', + fontSize: '0.75rem', + padding: '0.25rem 0.5rem', + }} + > + {canceling ? 'Stopping..' : 'Cancel Download'} + </Button> + )} + </Box> <Box className="SearchAndFilters-tabletUp" sx={{