diff --git a/gui/src/components/OnnxWeb.tsx b/gui/src/components/OnnxWeb.tsx
index 67d2307e..c197b1e8 100644
--- a/gui/src/components/OnnxWeb.tsx
+++ b/gui/src/components/OnnxWeb.tsx
@@ -1,10 +1,10 @@
-import { mustExist } from '@apextoaster/js-utils';
import { TabContext, TabList, TabPanel } from '@mui/lab';
-import { Box, Container, MenuItem, Select, Tab, Typography } from '@mui/material';
+import { Box, Container, Tab, Typography } from '@mui/material';
import * as React from 'react';
import { useQuery } from 'react-query';
import { ApiClient } from '../api/client.js';
+import { QueryList } from './QueryList.js';
import { STALE_TIME, Txt2Img } from './Txt2Img.js';
const { useState } = React;
@@ -13,6 +13,10 @@ export interface OnnxWebProps {
client: ApiClient;
}
+const MODEL_LABELS = {
+ 'stable-diffusion-onnx-v1-5': 'Stable Diffusion v1.5',
+};
+
export function OnnxWeb(props: OnnxWebProps) {
const [tab, setTab] = useState('1');
const [model, setModel] = useState('stable-diffusion-onnx-v1-5');
@@ -21,19 +25,6 @@ export function OnnxWeb(props: OnnxWebProps) {
staleTime: STALE_TIME,
});
- function renderModels() {
- switch (models.status) {
- case 'error':
- return ;
- case 'loading':
- return ;
- case 'success':
- return mustExist(models.data).map((name) => );
- default:
- return ;
- }
- }
-
return (
@@ -43,11 +34,9 @@ export function OnnxWeb(props: OnnxWebProps) {
-
+ {
+ setModel(value);
+ }} />
diff --git a/gui/src/components/QueryList.tsx b/gui/src/components/QueryList.tsx
new file mode 100644
index 00000000..c88bf8ae
--- /dev/null
+++ b/gui/src/components/QueryList.tsx
@@ -0,0 +1,42 @@
+import { doesExist, mustDefault, mustExist } from '@apextoaster/js-utils';
+import { MenuItem, Select } from '@mui/material';
+import * as React from 'react';
+import { UseQueryResult } from 'react-query';
+
+export interface QueryListProps {
+ labels: Record;
+ result: UseQueryResult>;
+ value: string;
+
+ onChange?: (value: string) => void;
+}
+
+export function QueryList(props: QueryListProps) {
+ const { labels, result, value } = props;
+
+ if (result.status === 'error') {
+ if (result.error instanceof Error) {
+ return Error: {result.error.message}
;
+ } else {
+ return Unknown Error
;
+ }
+ }
+
+ if (result.status === 'loading') {
+ return Loading...
;
+ }
+
+ if (result.status === 'idle') {
+ return Idle?
;
+ }
+
+ // else: success
+ const data = mustExist(result.data);
+ return ;
+}
diff --git a/gui/src/components/Txt2Img.tsx b/gui/src/components/Txt2Img.tsx
index 75bd4996..55184b18 100644
--- a/gui/src/components/Txt2Img.tsx
+++ b/gui/src/components/Txt2Img.tsx
@@ -1,22 +1,22 @@
-import { mustExist } from '@apextoaster/js-utils';
-import { Box, Button, MenuItem, Select, Stack, TextField } from '@mui/material';
+import { Box, Button, Stack, TextField } from '@mui/material';
import * as React from 'react';
import { useMutation, useQuery } from 'react-query';
import { ApiClient } from '../api/client.js';
import { ImageControl, ImageParams } from './ImageControl.js';
+import { QueryList } from './QueryList.js';
const { useState } = React;
export const STALE_TIME = 3_000;
// TODO: set up i18next
-const PLATFORM_NAMES: Record = {
+const PLATFORM_LABELS: Record = {
amd: 'AMD GPU',
cpu: 'CPU',
};
-const SCHEDULER_NAMES: Record = {
+const SCHEDULER_LABELS: Record = {
'ddim': 'DDIM',
'ddpm': 'DDPM',
'dpm-multi': 'DPM Multistep',
@@ -32,12 +32,12 @@ export interface Txt2ImgProps {
}
export function Txt2Img(props: Txt2ImgProps) {
- const { client } = props;
+ const { client, model } = props;
async function generateImage() {
return client.txt2img({
...params,
- model: props.model,
+ model,
prompt,
scheduler,
});
@@ -78,53 +78,19 @@ export function Txt2Img(props: Txt2ImgProps) {
}
}
- function renderSchedulers() {
- switch (schedulers.status) {
- case 'error':
- return ;
- case 'loading':
- return ;
- case 'success':
- return mustExist(schedulers.data).map((name) => );
- default:
- return ;
- }
- }
-
- function renderPlatforms() {
- switch (platforms.status) {
- case 'error':
- return ;
- case 'loading':
- return ;
- case 'success':
- return mustExist(platforms.data).map((name) => );
- default:
- return ;
- }
- }
-
return
-
-
+ />
{
setParams(newParams);
diff --git a/gui/src/main.tsx b/gui/src/main.tsx
index 45ac7404..6ea715f0 100644
--- a/gui/src/main.tsx
+++ b/gui/src/main.tsx
@@ -13,7 +13,7 @@ export interface Config {
};
}
-export async function loadConfig() {
+export async function loadConfig(): Promise {
const configPath = new URL('./config.json', window.origin);
const configReq = await fetch(configPath);
if (configReq.status === STATUS_SUCCESS) {
@@ -30,7 +30,9 @@ export async function main() {
const appElement = mustExist(document.getElementById('app'));
const app = ReactDOM.createRoot(appElement);
- app.render();
+ app.render(
+
+ );
}
window.addEventListener('load', () => {