Merge pull request #363 from transformerlab/fix/hf_download_unauthorized

Show error when downloading unauthorized HF model.
This commit is contained in:
Tony Salomone
2025-04-11 08:57:59 -04:00
committed by GitHub

View File

@@ -1,12 +1,12 @@
import { useState } from 'react';
import {
Button,
FormControl,
Input,
Box,
CircularProgress,
} from '@mui/joy';
Button,
FormControl,
Input,
Box,
CircularProgress,
} from '@mui/joy';
import { PlusIcon } from 'lucide-react';
@@ -17,104 +17,105 @@ import ImportModelsModal from './ImportModelsModal';
// If you start a download on one it should stop you from starting on the other
// Also this is how the import bar tells teh model store to show a download progress bar
export default function ImportModelsBar({ jobId, setJobId }) {
const [importModelsModalOpen, setImportModelsModalOpen] = useState(false);
const [importModelsModalOpen, setImportModelsModalOpen] = useState(false);
return (
<>
<ImportModelsModal
open={importModelsModalOpen}
setOpen={setImportModelsModalOpen}
/>
return (
<>
<ImportModelsModal
open={importModelsModalOpen}
setOpen={setImportModelsModalOpen}
/>
<Box
<Box
sx={{
justifyContent: 'space-between',
display: 'flex',
width: '100%',
paddingTop: '12px',
flex: 1,
alignSelf: 'flex-end',
justifyContent: 'space-between',
display: 'flex',
width: '100%',
paddingTop: '12px',
flex: 1,
alignSelf: 'flex-end',
}}
>
<div
style={{
width: '100%',
alignSelf: 'flex-end',
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
}}
>
<div
style={{
width: '100%',
alignSelf: 'flex-end',
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
}}
>
<FormControl>
<Input
placeholder="decapoda-research/llama-30b-hf"
name="download-model-name"
endDecorator={
<Button
onClick={async (e) => {
const model = document.getElementsByName('download-model-name')[0].value;
<FormControl>
<Input
placeholder="decapoda-research/llama-30b-hf"
name="download-model-name"
endDecorator={
<Button
onClick={async (e) => {
const model = document.getElementsByName('download-model-name')[0].value;
// only download if valid model is entered
if (model) {
setJobId(-1);
try {
const jobResponse = await fetch(
chatAPI.Endpoints.Jobs.Create()
);
const newJobId = await jobResponse.json();
setJobId(newJobId);
// only download if valid model is entered
if (model) {
setJobId(-1);
try {
// Try downloading the model
const response = await chatAPI.downloadModelFromHuggingFace(
model,
newJobId
);
console.log(response);
if (response?.status == 'error') {
alert('Download failed!\n' + response.message);
}
const jobResponse = await fetch(
chatAPI.Endpoints.Jobs.Create()
);
const newJobId = await jobResponse.json();
setJobId(newJobId);
// download complete
setJobId(null);
} catch (e) {
setJobId(null);
console.log(e);
return alert('Failed to download');
// Try downloading the model
const response = await chatAPI.downloadModelFromHuggingFace(
model,
newJobId
);
console.log(response);
if (response?.status == 'error' || response?.status == 'unauthorized') {
alert('Download failed!\n' + response.message);
}
// download complete
setJobId(null);
} catch (e) {
setJobId(null);
console.log(e);
return alert('Failed to download');
}
}}
startDecorator={
jobId ? (
<CircularProgress size="sm" thickness={2} />
) : (
""
)}
>
}
}}
startDecorator={
jobId ? (
<CircularProgress size="sm" thickness={2} />
) : (
""
)}
>
{jobId ? (
"Downloading"
) : (
"Download 🤗 Model"
)}
</Button>
}
sx={{ width: '500px' }}
disabled={jobId != null}
/>
</FormControl>
<Button
size="sm"
sx={{ height: '30px' }}
endDecorator={<PlusIcon />}
onClick={() => {
setImportModelsModalOpen(true);
}}
>
Import Local Models
</Button>
</div>
</Box>
</>
);
</Button>
}
sx={{ width: '500px' }}
disabled={jobId != null}
/>
</FormControl>
<Button
size="sm"
sx={{ height: '30px' }}
endDecorator={<PlusIcon />}
onClick={() => {
setImportModelsModalOpen(true);
}}
>
Import Local Models
</Button>
</div>
</Box>
</>
);
}