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 {
Table,
Typography,
Alert,
Tabs,
TabList,
Tab,
TabPanel,
} from '@mui/joy';
import * as chatAPI from 'renderer/lib/transformerlab-api-sdk';
......@@ -35,7 +39,7 @@ export default function TransformerLabSettings() {
mutate: hftokenmutate,
} = useSWR(
chatAPI.Endpoints.Config.Get('HuggingfaceUserAccessToken'),
fetcher
fetcher,
);
const [showJobsOfType, setShowJobsOfType] = React.useState('NONE');
const [showProvidersPage, setShowProvidersPage] = React.useState(false);
......@@ -71,170 +75,188 @@ export default function TransformerLabSettings() {
);
}
return (
<>
<Typography level="h1" marginBottom={3}>
<Typography level="h1" marginBottom={1}>
Transformer Lab Settings
</Typography>
<Sheet sx={{ width: '100%', overflowY: 'auto' }}>
{canLogInToHuggingFaceIsLoading && <CircularProgress />}
<Typography level="title-lg" marginBottom={2}>
Huggingface Credentials:
</Typography>
{canLogInToHuggingFace?.message === 'OK' ? (
<Alert color="success">Login to Huggingface Successful</Alert>
) : (
<>
<Alert color="danger" sx={{ mb: 1 }}>
Login to Huggingface Failed. Please set credentials below.
</Alert>
<FormControl sx={{ maxWidth: '500px' }}>
<FormLabel>User Access Token</FormLabel>
{hftokenisloading ? (
<CircularProgress />
) : (
<Input
name="hftoken"
defaultValue={hftoken}
type="password"
endDecorator={
<IconButton
onClick={() => {
const x = document.getElementsByName('hftoken')[0];
x.type = x.type === 'text' ? 'password' : 'text';
setShowPassword(!showPassword);
}}
<Tabs defaultValue={0}>
<TabList>
<Tab>Settings</Tab>
<Tab>View Jobs</Tab>
</TabList>
<TabPanel value={0}>
{canLogInToHuggingFaceIsLoading && <CircularProgress />}
<Typography level="title-lg" marginBottom={2}>
Huggingface Credentials:
</Typography>
{canLogInToHuggingFace?.message === 'OK' ? (
<Alert color="success">Login to Huggingface Successful</Alert>
) : (
<>
<Alert color="danger" sx={{ mb: 1 }}>
Login to Huggingface Failed. Please set credentials below.
</Alert>
<FormControl sx={{ maxWidth: '500px' }}>
<FormLabel>User Access Token</FormLabel>
{hftokenisloading ? (
<CircularProgress />
) : (
<Input
name="hftoken"
defaultValue={hftoken}
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 />}
</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"
https://huggingface.co/docs/hub/security-tokens
</a>
</FormHelperText>
</FormControl>
</>
)}
{wandbLoginStatus?.message === 'OK' ? (
<Alert color="success">
Login to Weights &amp; Biases Successful
</Alert>
) : (
<FormControl sx={{ maxWidth: '500px', mt: 2 }}>
<FormLabel>Weights &amp; Biases API Key</FormLabel>
<Input name="wandbToken" type="password" />
<Button
onClick={async () => {
const token =
document.getElementsByName('wandbToken')[0].value;
await fetch(
chatAPI.Endpoints.Config.Set('WANDB_API_KEY', token),
);
await fetch(chatAPI.Endpoints.Models.wandbLogin());
wandbLoginMutate();
}}
sx={{ marginTop: 1, width: '100px', alignSelf: 'flex-end' }}
>
https://huggingface.co/docs/hub/security-tokens
</a>
</FormHelperText>
</FormControl>
</>
)}
{wandbLoginStatus?.message === 'OK' ? (
<Alert color="success">Login to Weights &amp; Biases Successful</Alert>
) : (
<FormControl sx={{ maxWidth: '500px', mt: 2 }}>
<FormLabel>Weights &amp; Biases API Key</FormLabel>
<Input name="wandbToken" type="password" />
Save
</Button>
</FormControl>
)}
<Divider sx={{ mt: 2, mb: 2 }} />
<Typography level="title-lg" marginBottom={2}>
AI Providers & Models:
</Typography>
{/* Clickable list option */}
<Button variant="soft" onClick={() => setShowProvidersPage(true)}>
Set API Keys for AI Providers
</Button>
<Divider sx={{ mt: 2, mb: 2 }} />
<Typography level="title-lg" marginBottom={2}>
Application:
</Typography>
<Button
onClick={async () => {
const token = document.getElementsByName('wandbToken')[0].value;
await fetch(chatAPI.Endpoints.Config.Set('WANDB_API_KEY', token));
await fetch(chatAPI.Endpoints.Models.wandbLogin());
wandbLoginMutate();
variant="soft"
onClick={() => {
// find and delete all items in local storage that begin with oneTimePopup:
for (const key in localStorage) {
if (key.startsWith('oneTimePopup')) {
localStorage.removeItem(key);
}
}
}}
sx={{ marginTop: 1, width: '100px', alignSelf: 'flex-end' }}
>
Save
Reset all Tutorial Popup Screens
</Button>
</FormControl>
)}
<Divider sx={{ mt: 2, mb: 2 }} />
<Typography level="title-lg" marginBottom={2}>
AI Providers & Models:
</Typography>
{/* Clickable list option */}
<Button variant="soft" onClick={() => setShowProvidersPage(true)}>
Set API Keys for AI Providers
</Button>
<Divider sx={{ mt: 2, mb: 2 }} />
<Typography level="title-lg" marginBottom={2}>
Application:
</Typography>
<Button
variant="soft"
onClick={() => {
// find and delete all items in local storage that begin with oneTimePopup:
for (const key in localStorage) {
if (key.startsWith('oneTimePopup')) {
localStorage.removeItem(key);
}
}
}}
>
Reset all Tutorial Popup Screens
</Button>
<Divider sx={{ mt: 2, mb: 2 }} />
<Typography level="title-lg" marginBottom={2}>
View Jobs (debug):{' '}
<IconButton onClick={() => jobsMutate()}>
<RotateCcwIcon size="14px" />
</IconButton>
</Typography>
<Select
sx={{ width: '400px' }}
value={showJobsOfType}
onChange={(e, newValue) => {
setShowJobsOfType(newValue);
}}
>
<Option value="NONE">None</Option>
<Option value="">All</Option>
<Option value="DOWNLOAD_MODEL">Download Model</Option>
<Option value="LOAD_MODEL">Load Model</Option>
<Option value="TRAIN">Train</Option>
<Option value="GENERATE">Generate</Option>
<Option value="EVAL">Evaluate</Option>
</Select>
{showJobsOfType !== 'NONE' && (
<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>
)}
</TabPanel>
<TabPanel value={1}>
<Typography level="title-lg" marginBottom={2}>
View Jobs (debug):{' '}
<IconButton onClick={() => jobsMutate()}>
<RotateCcwIcon size="14px" />
</IconButton>
</Typography>
<Select
sx={{ width: '400px' }}
value={showJobsOfType}
onChange={(e, newValue) => {
setShowJobsOfType(newValue);
}}
>
<Option value="NONE">None</Option>
<Option value="">All</Option>
<Option value="DOWNLOAD_MODEL">Download Model</Option>
<Option value="LOAD_MODEL">Load Model</Option>
<Option value="TRAIN">Train</Option>
<Option value="GENERATE">Generate</Option>
<Option value="EVAL">Evaluate</Option>
</Select>
{showJobsOfType !== 'NONE' && (
<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>
)}
</TabPanel>
</Tabs>
</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: