From 048a99c5357fb65a012b9b7857dab895da6703f4 Mon Sep 17 00:00:00 2001
From: ali asaria <aliasaria@users.noreply.github.com>
Date: Fri, 16 Aug 2024 14:57:06 -0400
Subject: [PATCH] Make all Model Zoo tabs look the same
---
.../components/ModelZoo/LocalModels.tsx | 2 +-
.../components/ModelZoo/ModelStore.tsx | 268 +++++++++---------
src/renderer/components/ModelZoo/ModelZoo.tsx | 20 +-
3 files changed, 145 insertions(+), 145 deletions(-)
diff --git a/src/renderer/components/ModelZoo/LocalModels.tsx b/src/renderer/components/ModelZoo/LocalModels.tsx
index 1a375f25..5d4de9e5 100644
--- a/src/renderer/components/ModelZoo/LocalModels.tsx
+++ b/src/renderer/components/ModelZoo/LocalModels.tsx
@@ -65,9 +65,9 @@ export default function LocalModels({
<Sheet
sx={{
display: 'flex',
+ height: '100%',
flexDirection: 'column',
overflow: 'hidden',
- height: '100%',
}}
>
{/* <Typography level="h1">Local Models</Typography> */}
diff --git a/src/renderer/components/ModelZoo/ModelStore.tsx b/src/renderer/components/ModelZoo/ModelStore.tsx
index 67e77bfd..3d6335b0 100644
--- a/src/renderer/components/ModelZoo/ModelStore.tsx
+++ b/src/renderer/components/ModelZoo/ModelStore.tsx
@@ -255,17 +255,21 @@ export default function ModelStore() {
</>
);
return (
- <>
+ <Sheet
+ sx={{
+ display: 'flex',
+ height: '100%',
+ flexDirection: 'column',
+ overflow: 'hidden',
+ }}
+ >
<CurrentDownloadBox />
<Box
className="SearchAndFilters-tabletUp"
sx={{
borderRadius: 'sm',
- py: 2,
- display: {
- xs: 'flex',
- sm: 'flex',
- },
+ pb: 2,
+ display: 'flex',
flexWrap: 'wrap',
gap: 1.5,
'& > *': {
@@ -288,12 +292,10 @@ export default function ModelStore() {
{renderFilters()}
</Box>
-
<ModelDetailsModal
modelId={modelDetailsId}
setModelId={setModelDetailsId}
/>
-
<Sheet
className="OrderTableContainer"
variant="outlined"
@@ -426,143 +428,149 @@ export default function ModelStore() {
</td>
<td style={{ textAlign: 'right' }}>
- { // Don't display Download Button if gated model and no access token
- (row?.gated && !isHFAccessTokenSet ) ? (
- <Button
- size="sm"
- endDecorator={<LockKeyholeIcon />}
- color="warning"
- onClick={() => {
- const confirm_result = confirm("To access gated Hugging Face models you must first:\r\r"
- + "1. Create a READ access token in your Hugging Face account.\r\r"
- + "2. Enter the token on the Transformer Lab Settings page.\r\r"
- + "Click OK to go to Settings.");
- if (confirm_result) {
- navigate('/settings');
- }
- }}
- >
- Unlock
- </Button>
-
- // Otherwise display regular Download button
- ) : (
- <Button
- size="sm"
- disabled={row.downloaded || currentlyDownloading !== null}
- onClick={async () => {
- setJobId(-1);
- setCurrentlyDownloading(row.name);
- try {
- let response = await fetch(
- chatAPI.Endpoints.Jobs.Create()
- );
- const newJobId = await response.json();
- setJobId(newJobId);
- response = await downloadModelFromGallery(
- row?.uniqueID,
- newJobId
- );
- if (response?.status == 'error') {
- setCurrentlyDownloading(null);
- setJobId(null);
- return alert(
- `Failed to download:\n${response.message}`
+ {
+ // Don't display Download Button if gated model and no access token
+ row?.gated && !isHFAccessTokenSet ? (
+ <Button
+ size="sm"
+ endDecorator={<LockKeyholeIcon />}
+ color="warning"
+ onClick={() => {
+ const confirm_result = confirm(
+ 'To access gated Hugging Face models you must first:\r\r' +
+ '1. Create a READ access token in your Hugging Face account.\r\r' +
+ '2. Enter the token on the Transformer Lab Settings page.\r\r' +
+ 'Click OK to go to Settings.'
);
- } else if (response?.status == 'unauthorized') {
- setCurrentlyDownloading(null);
- setJobId(null);
- const confirm_text =
- `${response.message}\n\nPress OK to open the model agreement.`;
- if (confirm(confirm_text)) {
- window.open(getModelHuggingFaceURL(row), '_blank')?.focus();
+ if (confirm_result) {
+ navigate('/settings');
}
+ }}
+ >
+ Unlock
+ </Button>
+ ) : (
+ // Otherwise display regular Download button
+ <Button
+ size="sm"
+ disabled={
+ row.downloaded || currentlyDownloading !== null
}
- setCurrentlyDownloading(null);
- setJobId(null);
- modelGalleryMutate();
- } catch (e) {
- setCurrentlyDownloading(null);
- setJobId(null);
- console.log(e);
- return alert('Failed to download');
- }
- }}
- startDecorator={
- jobId && currentlyDownloading == row.name ? (
- <>
- {row?.size_of_model_in_mb ? (
+ onClick={async () => {
+ setJobId(-1);
+ setCurrentlyDownloading(row.name);
+ try {
+ let response = await fetch(
+ chatAPI.Endpoints.Jobs.Create()
+ );
+ const newJobId = await response.json();
+ setJobId(newJobId);
+ response = await downloadModelFromGallery(
+ row?.uniqueID,
+ newJobId
+ );
+ if (response?.status == 'error') {
+ setCurrentlyDownloading(null);
+ setJobId(null);
+ return alert(
+ `Failed to download:\n${response.message}`
+ );
+ } else if (response?.status == 'unauthorized') {
+ setCurrentlyDownloading(null);
+ setJobId(null);
+ const confirm_text = `${response.message}\n\nPress OK to open the model agreement.`;
+ if (confirm(confirm_text)) {
+ window
+ .open(getModelHuggingFaceURL(row), '_blank')
+ ?.focus();
+ }
+ }
+ setCurrentlyDownloading(null);
+ setJobId(null);
+ modelGalleryMutate();
+ } catch (e) {
+ setCurrentlyDownloading(null);
+ setJobId(null);
+ console.log(e);
+ return alert('Failed to download');
+ }
+ }}
+ startDecorator={
+ jobId && currentlyDownloading == row.name ? (
<>
- <LinearProgress
- determinate
- value={clamp(
- modelDownloadProgress?.progress,
- 0,
- 100
- )}
- sx={{ width: '100px' }}
- variant="solid"
- />
-
- {modelDownloadProgress?.progress !== -1 && (
+ {row?.size_of_model_in_mb ? (
<>
- {clamp(
- Number.parseFloat(
- modelDownloadProgress?.progress
- ),
- 0,
- 100
- ).toFixed(0)}
- %
+ <LinearProgress
+ determinate
+ value={clamp(
+ modelDownloadProgress?.progress,
+ 0,
+ 100
+ )}
+ sx={{ width: '100px' }}
+ variant="solid"
+ />
+
+ {modelDownloadProgress?.progress !== -1 && (
+ <>
+ {clamp(
+ Number.parseFloat(
+ modelDownloadProgress?.progress
+ ),
+ 0,
+ 100
+ ).toFixed(0)}
+ %
+ </>
+ )}
+ </>
+ ) : (
+ <>
+ <LinearProgress
+ sx={{ width: '40px' }}
+ variant="solid"
+ />
+
+ {formatBytes(
+ modelDownloadProgress?.job_data
+ ?.downloaded *
+ 1024 *
+ 1024
+ )}
+ {/* {modelDownloadProgress?.job_data} */}
+ <ArrowDownIcon size="18px" />
</>
)}
</>
) : (
- <>
- <LinearProgress
- sx={{ width: '40px' }}
- variant="solid"
- />
-
- {formatBytes(
- modelDownloadProgress?.job_data?.downloaded *
- 1024 *
- 1024
- )}
- {/* {modelDownloadProgress?.job_data} */}
- <ArrowDownIcon size="18px" />
- </>
- )}
- </>
- ) : (
- ''
- )
- }
- endDecorator={
- jobId && currentlyDownloading == row.name ? (
- ''
- ) : row.downloaded ? (
- <CheckIcon size="18px" />
- ) : (
- <DownloadIcon size="18px" />
- )
- }
- >
- {jobId && currentlyDownloading == row.name ? (
- ''
- ) : (
- <>Download{row.downloaded ? 'ed' : ''}</>
- )}
- </Button>
- )}
+ ''
+ )
+ }
+ endDecorator={
+ jobId && currentlyDownloading == row.name ? (
+ ''
+ ) : row.downloaded ? (
+ <CheckIcon size="18px" />
+ ) : (
+ <DownloadIcon size="18px" />
+ )
+ }
+ >
+ {jobId && currentlyDownloading == row.name ? (
+ ''
+ ) : (
+ <>Download{row.downloaded ? 'ed' : ''}</>
+ )}
+ </Button>
+ )
+ }
</td>
</tr>
))}
</tbody>
</Table>
</Sheet>
-
<ImportModelsBar />
- </>
+ </Sheet>
);
}
diff --git a/src/renderer/components/ModelZoo/ModelZoo.tsx b/src/renderer/components/ModelZoo/ModelZoo.tsx
index 7a66732a..f0e280c6 100644
--- a/src/renderer/components/ModelZoo/ModelZoo.tsx
+++ b/src/renderer/components/ModelZoo/ModelZoo.tsx
@@ -12,6 +12,8 @@ export default function ModelZoo({ experimentInfo }) {
sx={{
display: 'flex',
height: '100%',
+ flexDirection: 'column',
+ overflow: 'hidden',
}}
>
<Tabs
@@ -36,13 +38,13 @@ export default function ModelZoo({ experimentInfo }) {
</TabList>
<TabPanel
value={0}
- sx={{ p: 0, pb: 2, height: '100%', overflow: 'hidden' }}
+ sx={{ p: 0, py: 1, height: '100%', overflow: 'hidden' }}
>
<LocalModels pickAModelMode={false} experimentInfo={experimentInfo} />
</TabPanel>
<TabPanel
value={1}
- sx={{ p: 0, pb: 2, height: '100%', overflow: 'hidden' }}
+ sx={{ p: 0, py: 1, height: '100%', overflow: 'hidden' }}
>
<LocalModels
pickAModelMode={false}
@@ -52,19 +54,9 @@ export default function ModelZoo({ experimentInfo }) {
</TabPanel>
<TabPanel
value={2}
- sx={{ p: 0, pb: 2, height: '100%', overflow: 'hidden' }}
+ sx={{ p: 0, py: 1, height: '100%', overflow: 'hidden' }}
>
- <Sheet
- sx={{
- overflow: 'hidden',
- height: '100%',
- display: 'flex',
- flexDirection: 'column',
- }}
- id="model-store-tab-panel"
- >
- <ModelStore />
- </Sheet>
+ <ModelStore />
</TabPanel>
</Tabs>
</Sheet>
--
GitLab