forked from pinks/eris
1
0
Fork 0
eris/ui/SettingsPage.tsx

276 lines
8.6 KiB
TypeScript
Raw Normal View History

2023-10-23 00:39:01 +00:00
import React, { useState } from "react";
2023-10-05 09:00:51 +00:00
import useSWR from "swr";
2023-10-21 10:40:42 +00:00
import { cx } from "twind/core";
2023-10-23 00:39:01 +00:00
import { fetchApi, handleResponse } from "./apiClient.ts";
2023-10-05 09:00:51 +00:00
2023-10-23 00:39:01 +00:00
export function SettingsPage(props: { sessionId: string | null }) {
2023-10-05 09:00:51 +00:00
const { sessionId } = props;
2023-10-23 00:39:01 +00:00
const getSession = useSWR(
2023-10-08 21:23:54 +00:00
sessionId ? ["sessions/{sessionId}", "GET", { params: { sessionId } }] as const : null,
(args) => fetchApi(...args).then(handleResponse),
2023-10-05 09:00:51 +00:00
);
2023-10-23 00:39:01 +00:00
const getUser = useSWR(
getSession.data?.userId
? ["users/{userId}", "GET", { params: { userId: String(getSession.data.userId) } }] as const
2023-10-05 09:00:51 +00:00
: null,
2023-10-08 21:23:54 +00:00
(args) => fetchApi(...args).then(handleResponse),
2023-10-05 09:00:51 +00:00
);
2023-10-23 00:39:01 +00:00
const getParams = useSWR(
2023-10-05 09:00:51 +00:00
["settings/params", "GET", {}] as const,
2023-10-08 21:23:54 +00:00
(args) => fetchApi(...args).then(handleResponse),
2023-10-05 09:00:51 +00:00
);
2023-10-23 00:39:01 +00:00
const [newParams, setNewParams] = useState<Partial<typeof getParams.data>>({});
const [patchParamsError, setPatchParamsError] = useState<string>();
2023-10-05 09:00:51 +00:00
return (
<form
className="flex flex-col items-stretch gap-4"
onSubmit={(e) => {
e.preventDefault();
2023-10-23 00:39:01 +00:00
getParams.mutate(() =>
2023-10-08 21:23:54 +00:00
fetchApi("settings/params", "PATCH", {
2023-10-23 00:39:01 +00:00
query: { sessionId: sessionId ?? "" },
body: { type: "application/json", data: newParams ?? {} },
2023-10-05 09:00:51 +00:00
}).then(handleResponse)
)
2023-10-23 00:39:01 +00:00
.then(() => setNewParams({}))
.catch((e) => setPatchParamsError(String(e)));
2023-10-05 09:00:51 +00:00
}}
>
<label className="flex flex-col items-stretch gap-1">
<span className="text-sm">
2023-10-23 00:39:01 +00:00
Negative prompt {newParams?.negative_prompt != null ? "(Changed)" : ""}
2023-10-05 09:00:51 +00:00
</span>
<textarea
className="input-text"
2023-10-23 00:39:01 +00:00
disabled={getParams.isLoading || !getUser.data?.admin}
value={newParams?.negative_prompt ??
getParams.data?.negative_prompt ??
2023-10-05 09:00:51 +00:00
""}
onChange={(e) =>
2023-10-23 00:39:01 +00:00
setNewParams((params) => ({
2023-10-05 09:00:51 +00:00
...params,
negative_prompt: e.target.value,
}))}
/>
</label>
2023-10-23 00:39:01 +00:00
2023-10-10 16:21:46 +00:00
<label className="flex flex-col items-stretch gap-1">
<span className="text-sm">
2023-10-23 00:39:01 +00:00
Sampler {newParams?.sampler_name != null ? "(Changed)" : ""}
2023-10-10 16:21:46 +00:00
</span>
<input
className="input-text"
2023-10-23 00:39:01 +00:00
disabled={getParams.isLoading || !getUser.data?.admin}
value={newParams?.sampler_name ??
getParams.data?.sampler_name ??
2023-10-10 16:21:46 +00:00
""}
onChange={(e) =>
2023-10-23 00:39:01 +00:00
setNewParams((params) => ({
2023-10-10 16:21:46 +00:00
...params,
sampler_name: e.target.value,
}))}
/>
</label>
2023-10-23 00:39:01 +00:00
2023-10-05 09:00:51 +00:00
<label className="flex flex-col items-stretch gap-1">
<span className="text-sm">
2023-10-23 00:39:01 +00:00
Steps {newParams?.steps != null ? "(Changed)" : ""}
2023-10-05 09:00:51 +00:00
</span>
<span className="flex items-center gap-1">
<input
className="input-text w-20"
type="number"
min={5}
max={50}
step={5}
2023-10-23 00:39:01 +00:00
disabled={getParams.isLoading || !getUser.data?.admin}
value={newParams?.steps ??
getParams.data?.steps ??
2023-10-05 09:00:51 +00:00
0}
onChange={(e) =>
2023-10-23 00:39:01 +00:00
setNewParams((params) => ({
2023-10-05 09:00:51 +00:00
...params,
steps: Number(e.target.value),
}))}
/>
<input
className="input-range flex-grow"
type="range"
min={5}
max={50}
step={5}
2023-10-23 00:39:01 +00:00
disabled={getParams.isLoading || !getUser.data?.admin}
value={newParams?.steps ??
getParams.data?.steps ??
2023-10-05 09:00:51 +00:00
0}
onChange={(e) =>
2023-10-23 00:39:01 +00:00
setNewParams((params) => ({
2023-10-05 09:00:51 +00:00
...params,
steps: Number(e.target.value),
}))}
/>
</span>
</label>
2023-10-23 00:39:01 +00:00
2023-10-05 09:00:51 +00:00
<label className="flex flex-col items-stretch gap-1">
<span className="text-sm">
2023-10-23 00:39:01 +00:00
Detail {newParams?.cfg_scale != null ? "(Changed)" : ""}
2023-10-05 09:00:51 +00:00
</span>
<span className="flex items-center gap-1">
<input
className="input-text w-20"
type="number"
min={1}
max={20}
step={1}
2023-10-23 00:39:01 +00:00
disabled={getParams.isLoading || !getUser.data?.admin}
value={newParams?.cfg_scale ??
getParams.data?.cfg_scale ??
2023-10-05 09:00:51 +00:00
0}
onChange={(e) =>
2023-10-23 00:39:01 +00:00
setNewParams((params) => ({
2023-10-05 09:00:51 +00:00
...params,
cfg_scale: Number(e.target.value),
}))}
/>
<input
className="input-range flex-grow"
type="range"
min={1}
max={20}
step={1}
2023-10-23 00:39:01 +00:00
disabled={getParams.isLoading || !getUser.data?.admin}
value={newParams?.cfg_scale ??
getParams.data?.cfg_scale ??
2023-10-05 09:00:51 +00:00
0}
onChange={(e) =>
2023-10-23 00:39:01 +00:00
setNewParams((params) => ({
2023-10-05 09:00:51 +00:00
...params,
cfg_scale: Number(e.target.value),
}))}
/>
</span>
</label>
2023-10-23 00:39:01 +00:00
2023-10-05 09:00:51 +00:00
<div className="flex gap-4">
<label className="flex flex-1 flex-col items-stretch gap-1">
<span className="text-sm">
2023-10-23 00:39:01 +00:00
Width {newParams?.width != null ? "(Changed)" : ""}
2023-10-05 09:00:51 +00:00
</span>
<input
className="input-text"
type="number"
min={64}
max={2048}
step={64}
2023-10-23 00:39:01 +00:00
disabled={getParams.isLoading || !getUser.data?.admin}
value={newParams?.width ??
getParams.data?.width ??
2023-10-05 09:00:51 +00:00
0}
onChange={(e) =>
2023-10-23 00:39:01 +00:00
setNewParams((params) => ({
2023-10-05 09:00:51 +00:00
...params,
width: Number(e.target.value),
}))}
/>
<input
className="input-range"
type="range"
min={64}
max={2048}
step={64}
2023-10-23 00:39:01 +00:00
disabled={getParams.isLoading || !getUser.data?.admin}
value={newParams?.width ??
getParams.data?.width ??
2023-10-05 09:00:51 +00:00
0}
onChange={(e) =>
2023-10-23 00:39:01 +00:00
setNewParams((params) => ({
2023-10-05 09:00:51 +00:00
...params,
width: Number(e.target.value),
}))}
/>
</label>
<label className="flex flex-1 flex-col items-stretch gap-1">
<span className="text-sm">
2023-10-23 00:39:01 +00:00
Height {newParams?.height != null ? "(Changed)" : ""}
2023-10-05 09:00:51 +00:00
</span>
<input
className="input-text"
type="number"
min={64}
max={2048}
step={64}
2023-10-23 00:39:01 +00:00
disabled={getParams.isLoading || !getUser.data?.admin}
value={newParams?.height ??
getParams.data?.height ??
2023-10-05 09:00:51 +00:00
0}
onChange={(e) =>
2023-10-23 00:39:01 +00:00
setNewParams((params) => ({
2023-10-05 09:00:51 +00:00
...params,
height: Number(e.target.value),
}))}
/>
<input
className="input-range"
type="range"
min={64}
max={2048}
step={64}
2023-10-23 00:39:01 +00:00
disabled={getParams.isLoading || !getUser.data?.admin}
value={newParams?.height ??
getParams.data?.height ??
2023-10-05 09:00:51 +00:00
0}
onChange={(e) =>
2023-10-23 00:39:01 +00:00
setNewParams((params) => ({
2023-10-05 09:00:51 +00:00
...params,
height: Number(e.target.value),
}))}
/>
</label>
</div>
2023-10-23 00:39:01 +00:00
{patchParamsError
? (
<p className="alert">
<span className="flex-grow">Updating params failed: {patchParamsError}</span>
<button className="button-ghost" onClick={() => setPatchParamsError(undefined)}>
Close
</button>
</p>
)
: null}
{getParams.error
? (
<p className="alert">
<span className="flex-grow">
Loading params failed: {String(getParams.error)}
</span>
</p>
)
: null}
2023-10-05 09:00:51 +00:00
<div className="flex gap-2 items-center justify-end">
<button
type="button"
2023-10-23 00:39:01 +00:00
className={cx("button-outlined ripple", getParams.isLoading && "bg-stripes")}
disabled={getParams.isLoading || !getUser.data?.admin ||
Object.keys(newParams ?? {}).length === 0}
onClick={() => setNewParams({})}
2023-10-05 09:00:51 +00:00
>
Reset
</button>
<button
type="submit"
2023-10-23 00:39:01 +00:00
className={cx("button-filled ripple", getParams.isLoading && "bg-stripes")}
disabled={getParams.isLoading || !getUser.data?.admin ||
Object.keys(newParams ?? {}).length === 0}
2023-10-05 09:00:51 +00:00
>
Save
</button>
</div>
</form>
);
}