Skip to content
Snippets Groups Projects
Commit 1bbae18a authored by ali asaria's avatar ali asaria
Browse files

separate setings into two tabs

parent 40043a95
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/renderer/components/Settings/TransformerLabSettings.tsx
+ 176
− 154
View file @ 1bbae18a
...@@ -15,6 +15,10 @@ import { ...@@ -15,6 +15,10 @@ import {
Table, Table,
Typography, Typography,
Alert, Alert,
Tabs,
TabList,
Tab,
TabPanel,
} from '@mui/joy'; } from '@mui/joy';
import * as chatAPI from 'renderer/lib/transformerlab-api-sdk'; import * as chatAPI from 'renderer/lib/transformerlab-api-sdk';
...@@ -35,7 +39,7 @@ export default function TransformerLabSettings() { ...@@ -35,7 +39,7 @@ export default function TransformerLabSettings() {
mutate: hftokenmutate, mutate: hftokenmutate,
} = useSWR( } = useSWR(
chatAPI.Endpoints.Config.Get('HuggingfaceUserAccessToken'), chatAPI.Endpoints.Config.Get('HuggingfaceUserAccessToken'),
fetcher fetcher,
); );
const [showJobsOfType, setShowJobsOfType] = React.useState('NONE'); const [showJobsOfType, setShowJobsOfType] = React.useState('NONE');
const [showProvidersPage, setShowProvidersPage] = React.useState(false); const [showProvidersPage, setShowProvidersPage] = React.useState(false);
...@@ -71,170 +75,188 @@ export default function TransformerLabSettings() { ...@@ -71,170 +75,188 @@ export default function TransformerLabSettings() {
); );
} }
return ( return (
<> <>
<Typography level="h1" marginBottom={3}> <Typography level="h1" marginBottom={1}>
Transformer Lab Settings Transformer Lab Settings
</Typography> </Typography>
<Sheet sx={{ width: '100%', overflowY: 'auto' }}> <Sheet sx={{ width: '100%', overflowY: 'auto' }}>
{canLogInToHuggingFaceIsLoading && <CircularProgress />} <Tabs defaultValue={0}>
<Typography level="title-lg" marginBottom={2}> <TabList>
Huggingface Credentials: <Tab>Settings</Tab>
</Typography> <Tab>View Jobs</Tab>
{canLogInToHuggingFace?.message === 'OK' ? ( </TabList>
<Alert color="success">Login to Huggingface Successful</Alert> <TabPanel value={0}>
) : ( {canLogInToHuggingFaceIsLoading && <CircularProgress />}
<> <Typography level="title-lg" marginBottom={2}>
<Alert color="danger" sx={{ mb: 1 }}> Huggingface Credentials:
Login to Huggingface Failed. Please set credentials below. </Typography>
</Alert> {canLogInToHuggingFace?.message === 'OK' ? (
<FormControl sx={{ maxWidth: '500px' }}> <Alert color="success">Login to Huggingface Successful</Alert>
<FormLabel>User Access Token</FormLabel> ) : (
{hftokenisloading ? ( <>
<CircularProgress /> <Alert color="danger" sx={{ mb: 1 }}>
) : ( Login to Huggingface Failed. Please set credentials below.
<Input </Alert>
name="hftoken" <FormControl sx={{ maxWidth: '500px' }}>
defaultValue={hftoken} <FormLabel>User Access Token</FormLabel>
type="password" {hftokenisloading ? (
endDecorator={ <CircularProgress />
<IconButton ) : (
onClick={() => { <Input
const x = document.getElementsByName('hftoken')[0]; name="hftoken"
x.type = x.type === 'text' ? 'password' : 'text'; defaultValue={hftoken}
setShowPassword(!showPassword); type="password"
}} endDecorator={
<IconButton
onClick={() => {
const x = document.getElementsByName('hftoken')[0];
x.type = x.type === 'text' ? 'password' : 'text';
setShowPassword(!showPassword);
}}
>
{showPassword ? <EyeOffIcon /> : <EyeIcon />}
</IconButton>
}
/>
)}
<Button
onClick={async () => {
const token =
document.getElementsByName('hftoken')[0].value;
await fetch(
chatAPI.Endpoints.Config.Set(
'HuggingfaceUserAccessToken',
token,
),
);
// Now manually log in to Huggingface
await fetch(chatAPI.Endpoints.Models.HuggingFaceLogin());
hftokenmutate(token);
canLogInToHuggingFaceMutate();
}}
sx={{ marginTop: 1, width: '100px', alignSelf: 'flex-end' }}
>
Save
</Button>
<FormHelperText>
A Huggingface access token is required in order to access
certain models and datasets (those marked as "Gated").
</FormHelperText>
<FormHelperText>
Documentation here:{' '}
<a
href="https://huggingface.co/docs/hub/security-tokens"
target="_blank"
rel="noreferrer"
> >
{showPassword ? <EyeOffIcon /> : <EyeIcon />} https://huggingface.co/docs/hub/security-tokens
</IconButton> </a>
} </FormHelperText>
/> </FormControl>
)} </>
<Button )}
onClick={async () => { {wandbLoginStatus?.message === 'OK' ? (
const token = document.getElementsByName('hftoken')[0].value; <Alert color="success">
await fetch(chatAPI.Endpoints.Config.Set('HuggingfaceUserAccessToken', token)); Login to Weights &amp; Biases Successful
// Now manually log in to Huggingface </Alert>
await fetch(chatAPI.Endpoints.Models.HuggingFaceLogin()); ) : (
hftokenmutate(token); <FormControl sx={{ maxWidth: '500px', mt: 2 }}>
canLogInToHuggingFaceMutate(); <FormLabel>Weights &amp; Biases API Key</FormLabel>
}} <Input name="wandbToken" type="password" />
sx={{ marginTop: 1, width: '100px', alignSelf: 'flex-end' }} <Button
> onClick={async () => {
Save const token =
</Button> document.getElementsByName('wandbToken')[0].value;
<FormHelperText> await fetch(
A Huggingface access token is required in order to access certain chatAPI.Endpoints.Config.Set('WANDB_API_KEY', token),
models and datasets (those marked as "Gated"). );
</FormHelperText> await fetch(chatAPI.Endpoints.Models.wandbLogin());
<FormHelperText> wandbLoginMutate();
Documentation here:{' '} }}
<a sx={{ marginTop: 1, width: '100px', alignSelf: 'flex-end' }}
href="https://huggingface.co/docs/hub/security-tokens"
target="_blank"
rel="noreferrer"
> >
https://huggingface.co/docs/hub/security-tokens Save
</a> </Button>
</FormHelperText> </FormControl>
</FormControl> )}
</> <Divider sx={{ mt: 2, mb: 2 }} />
)} <Typography level="title-lg" marginBottom={2}>
{wandbLoginStatus?.message === 'OK' ? ( AI Providers & Models:
<Alert color="success">Login to Weights &amp; Biases Successful</Alert> </Typography>
) : ( {/* Clickable list option */}
<FormControl sx={{ maxWidth: '500px', mt: 2 }}> <Button variant="soft" onClick={() => setShowProvidersPage(true)}>
<FormLabel>Weights &amp; Biases API Key</FormLabel> Set API Keys for AI Providers
<Input name="wandbToken" type="password" /> </Button>
<Divider sx={{ mt: 2, mb: 2 }} />
<Typography level="title-lg" marginBottom={2}>
Application:
</Typography>
<Button <Button
onClick={async () => { variant="soft"
const token = document.getElementsByName('wandbToken')[0].value; onClick={() => {
await fetch(chatAPI.Endpoints.Config.Set('WANDB_API_KEY', token)); // find and delete all items in local storage that begin with oneTimePopup:
await fetch(chatAPI.Endpoints.Models.wandbLogin()); for (const key in localStorage) {
wandbLoginMutate(); if (key.startsWith('oneTimePopup')) {
localStorage.removeItem(key);
}
}
}} }}
sx={{ marginTop: 1, width: '100px', alignSelf: 'flex-end' }}
> >
Save Reset all Tutorial Popup Screens
</Button> </Button>
</FormControl> </TabPanel>
)} <TabPanel value={1}>
<Divider sx={{ mt: 2, mb: 2 }} /> <Typography level="title-lg" marginBottom={2}>
<Typography level="title-lg" marginBottom={2}> View Jobs (debug):{' '}
AI Providers & Models: <IconButton onClick={() => jobsMutate()}>
</Typography> <RotateCcwIcon size="14px" />
{/* Clickable list option */} </IconButton>
<Button variant="soft" onClick={() => setShowProvidersPage(true)}> </Typography>
Set API Keys for AI Providers <Select
</Button> sx={{ width: '400px' }}
value={showJobsOfType}
<Divider sx={{ mt: 2, mb: 2 }} /> onChange={(e, newValue) => {
<Typography level="title-lg" marginBottom={2}> setShowJobsOfType(newValue);
Application: }}
</Typography> >
<Button <Option value="NONE">None</Option>
variant="soft" <Option value="">All</Option>
onClick={() => { <Option value="DOWNLOAD_MODEL">Download Model</Option>
// find and delete all items in local storage that begin with oneTimePopup: <Option value="LOAD_MODEL">Load Model</Option>
for (const key in localStorage) { <Option value="TRAIN">Train</Option>
if (key.startsWith('oneTimePopup')) { <Option value="GENERATE">Generate</Option>
localStorage.removeItem(key); <Option value="EVAL">Evaluate</Option>
} </Select>
} {showJobsOfType !== 'NONE' && (
}} <Table sx={{ tableLayout: 'auto', overflow: 'scroll' }}>
> <thead>
Reset all Tutorial Popup Screens <tr>
</Button> <td>Job ID</td>
<Divider sx={{ mt: 2, mb: 2 }} /> <td>Job Type</td>
<Typography level="title-lg" marginBottom={2}> <td>Job Status</td>
View Jobs (debug):{' '} <td>Job Progress</td>
<IconButton onClick={() => jobsMutate()}> <td>Job Data</td>
<RotateCcwIcon size="14px" /> </tr>
</IconButton> </thead>
</Typography> <tbody>
<Select {jobs?.map((job) => (
sx={{ width: '400px' }} <tr key={job.id}>
value={showJobsOfType} <td>{job.id}</td>
onChange={(e, newValue) => { <td>{job.type}</td>
setShowJobsOfType(newValue); <td>{job.status}</td>
}} <td>{job.progress}</td>
> <td>
<Option value="NONE">None</Option> <pre>{JSON.stringify(job.job_data, null, 2)}</pre>
<Option value="">All</Option> </td>
<Option value="DOWNLOAD_MODEL">Download Model</Option> </tr>
<Option value="LOAD_MODEL">Load Model</Option> ))}
<Option value="TRAIN">Train</Option> </tbody>
<Option value="GENERATE">Generate</Option> </Table>
<Option value="EVAL">Evaluate</Option> )}
</Select> </TabPanel>
{showJobsOfType !== 'NONE' && ( </Tabs>
<Table sx={{ tableLayout: 'auto', overflow: 'scroll' }}>
<thead>
<tr>
<td>Job ID</td>
<td>Job Type</td>
<td>Job Status</td>
<td>Job Progress</td>
<td>Job Data</td>
</tr>
</thead>
<tbody>
{jobs?.map((job) => (
<tr key={job.id}>
<td>{job.id}</td>
<td>{job.type}</td>
<td>{job.status}</td>
<td>{job.progress}</td>
<td>
<pre>{JSON.stringify(job.job_data, null, 2)}</pre>
</td>
</tr>
))}
</tbody>
</Table>
)}
</Sheet> </Sheet>
</> </>
); );
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

:feet::heart: Strive to be the person your dogs believe you are :heart::feet: