feat(web): media settings section for the deployment owner (wip)
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01MRtGG9ARfqqhma3t85Ro2u
This commit is contained in:
Claude
parent
533f82d856
commit
01eea83b05
278
apps/web/src/components/MediaSettings.tsx
Normal file
278
apps/web/src/components/MediaSettings.tsx
Normal file
@ -0,0 +1,278 @@
|
||||
import { Trans, useLingui } from "@lingui/react/macro";
|
||||
import type { MediaSettingsUpdate, MediaSettingsView } from "@rakazo/contracts";
|
||||
import { Button, Field, FieldLabel, Input, Textarea } from "@rakazo/ui-web";
|
||||
import { useEffect, useId, useState } from "react";
|
||||
import { rpc } from "../lib/rpc";
|
||||
import { SuccessPop } from "./ai/primitives";
|
||||
|
||||
type KeyDraft = { value: string; remove: boolean };
|
||||
|
||||
const emptyKey: KeyDraft = { value: "", remove: false };
|
||||
|
||||
/** Omitted keeps the saved key, empty removes it, anything else replaces it. */
|
||||
function keyUpdate(draft: KeyDraft): string | undefined {
|
||||
if (draft.value.trim()) return draft.value.trim();
|
||||
return draft.remove ? "" : undefined;
|
||||
}
|
||||
|
||||
function ApiKeyField({
|
||||
saved,
|
||||
draft,
|
||||
disabled,
|
||||
onChange,
|
||||
}: {
|
||||
saved: boolean;
|
||||
draft: KeyDraft;
|
||||
disabled: boolean;
|
||||
onChange: (draft: KeyDraft) => void;
|
||||
}) {
|
||||
const { t } = useLingui();
|
||||
const id = useId();
|
||||
const showSaved = saved && !draft.remove;
|
||||
return (
|
||||
<Field className="mt-4">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<FieldLabel htmlFor={id}>
|
||||
<Trans>API key</Trans>
|
||||
</FieldLabel>
|
||||
{showSaved && !draft.value ? (
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="xs"
|
||||
disabled={disabled}
|
||||
onClick={() => onChange({ value: "", remove: true })}
|
||||
>
|
||||
<Trans>Remove</Trans>
|
||||
</Button>
|
||||
) : null}
|
||||
</div>
|
||||
<Input
|
||||
id={id}
|
||||
type="password"
|
||||
autoComplete="new-password"
|
||||
value={draft.value}
|
||||
disabled={disabled}
|
||||
placeholder={showSaved ? t`Saved` : t`Optional`}
|
||||
onChange={(event) => onChange({ ...draft, value: event.target.value })}
|
||||
/>
|
||||
</Field>
|
||||
);
|
||||
}
|
||||
|
||||
/** The deployment owner's media servers: ComfyUI for generation, a transcription server. */
|
||||
export function MediaSettings() {
|
||||
const { t } = useLingui();
|
||||
const ids = useId();
|
||||
const [view, setView] = useState<MediaSettingsView | null>(null);
|
||||
const [comfyUrl, setComfyUrl] = useState("");
|
||||
const [comfyKey, setComfyKey] = useState<KeyDraft>(emptyKey);
|
||||
const [imageModel, setImageModel] = useState("");
|
||||
const [imageWorkflow, setImageWorkflow] = useState("");
|
||||
const [videoWorkflow, setVideoWorkflow] = useState("");
|
||||
const [transcriptionUrl, setTranscriptionUrl] = useState("");
|
||||
const [transcriptionModel, setTranscriptionModel] = useState("");
|
||||
const [transcriptionKey, setTranscriptionKey] = useState<KeyDraft>(emptyKey);
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [saved, setSaved] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
function apply(next: MediaSettingsView) {
|
||||
setView(next);
|
||||
setComfyUrl(next.comfyui?.baseUrl ?? "");
|
||||
setImageModel(next.comfyui?.imageModel ?? "");
|
||||
setImageWorkflow(next.comfyui?.imageWorkflow ?? "");
|
||||
setVideoWorkflow(next.comfyui?.videoWorkflow ?? "");
|
||||
setTranscriptionUrl(next.transcription?.baseUrl ?? "");
|
||||
setTranscriptionModel(next.transcription?.model ?? "");
|
||||
setComfyKey(emptyKey);
|
||||
setTranscriptionKey(emptyKey);
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
rpc.media.settings
|
||||
.get()
|
||||
.then((next) => {
|
||||
if (!cancelled) apply(next);
|
||||
})
|
||||
.catch((err: unknown) => {
|
||||
if (!cancelled) setError(err instanceof Error ? err.message : t`Couldn't load`);
|
||||
});
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [t]);
|
||||
|
||||
async function save() {
|
||||
if (busy) return;
|
||||
setBusy(true);
|
||||
setSaved(false);
|
||||
setError(null);
|
||||
const update: MediaSettingsUpdate = {
|
||||
comfyui: comfyUrl.trim()
|
||||
? {
|
||||
baseUrl: comfyUrl.trim(),
|
||||
apiKey: keyUpdate(comfyKey),
|
||||
imageModel,
|
||||
imageWorkflow,
|
||||
videoWorkflow,
|
||||
}
|
||||
: null,
|
||||
transcription: transcriptionUrl.trim()
|
||||
? {
|
||||
baseUrl: transcriptionUrl.trim(),
|
||||
model: transcriptionModel,
|
||||
apiKey: keyUpdate(transcriptionKey),
|
||||
}
|
||||
: null,
|
||||
};
|
||||
try {
|
||||
apply(await rpc.media.settings.update(update));
|
||||
setSaved(true);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : t`Couldn't save`);
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
const disabled = busy || view === null;
|
||||
const advancedSaved = Boolean(
|
||||
view?.comfyui?.imageModel || view?.comfyui?.imageWorkflow || view?.comfyui?.videoWorkflow,
|
||||
);
|
||||
const workflowClass = "max-h-48 overflow-auto font-mono text-xs";
|
||||
|
||||
return (
|
||||
<div data-testid="media-settings" className="space-y-5">
|
||||
<section className="rounded-xl border border-border px-4 py-4">
|
||||
<h3 className="text-ui-body font-medium text-foreground">ComfyUI</h3>
|
||||
<Field className="mt-3">
|
||||
<FieldLabel htmlFor={`${ids}-comfy-url`}>
|
||||
<Trans>Server URL</Trans>
|
||||
</FieldLabel>
|
||||
<Input
|
||||
id={`${ids}-comfy-url`}
|
||||
value={comfyUrl}
|
||||
disabled={disabled}
|
||||
placeholder="http://127.0.0.1:8188"
|
||||
autoComplete="off"
|
||||
onChange={(event) => setComfyUrl(event.target.value)}
|
||||
/>
|
||||
</Field>
|
||||
<ApiKeyField
|
||||
saved={Boolean(view?.comfyui?.hasApiKey)}
|
||||
draft={comfyKey}
|
||||
disabled={disabled}
|
||||
onChange={setComfyKey}
|
||||
/>
|
||||
<details
|
||||
key={advancedSaved ? "saved" : "empty"}
|
||||
open={advancedSaved}
|
||||
data-testid="media-settings-advanced"
|
||||
className="group mt-4"
|
||||
>
|
||||
<summary className="flex cursor-pointer list-none items-center justify-between gap-3 text-ui-body text-muted-foreground">
|
||||
<span>
|
||||
<Trans>Advanced</Trans>
|
||||
</span>
|
||||
<span aria-hidden="true" className="transition-transform group-open:rotate-90">
|
||||
›
|
||||
</span>
|
||||
</summary>
|
||||
<Field className="mt-3">
|
||||
<FieldLabel htmlFor={`${ids}-image-model`}>
|
||||
<Trans>Image model</Trans>
|
||||
</FieldLabel>
|
||||
<Input
|
||||
id={`${ids}-image-model`}
|
||||
value={imageModel}
|
||||
disabled={disabled}
|
||||
placeholder={t`Optional`}
|
||||
autoComplete="off"
|
||||
onChange={(event) => setImageModel(event.target.value)}
|
||||
/>
|
||||
</Field>
|
||||
<Field className="mt-4">
|
||||
<FieldLabel htmlFor={`${ids}-image-workflow`}>
|
||||
<Trans>Image workflow</Trans>
|
||||
</FieldLabel>
|
||||
<Textarea
|
||||
id={`${ids}-image-workflow`}
|
||||
className={workflowClass}
|
||||
value={imageWorkflow}
|
||||
disabled={disabled}
|
||||
placeholder={t`Optional`}
|
||||
spellCheck={false}
|
||||
onChange={(event) => setImageWorkflow(event.target.value)}
|
||||
/>
|
||||
</Field>
|
||||
<Field className="mt-4">
|
||||
<FieldLabel htmlFor={`${ids}-video-workflow`}>
|
||||
<Trans>Video workflow</Trans>
|
||||
</FieldLabel>
|
||||
<Textarea
|
||||
id={`${ids}-video-workflow`}
|
||||
className={workflowClass}
|
||||
value={videoWorkflow}
|
||||
disabled={disabled}
|
||||
placeholder={t`Optional`}
|
||||
spellCheck={false}
|
||||
onChange={(event) => setVideoWorkflow(event.target.value)}
|
||||
/>
|
||||
</Field>
|
||||
</details>
|
||||
</section>
|
||||
|
||||
<section className="rounded-xl border border-border px-4 py-4">
|
||||
<h3 className="text-ui-body font-medium text-foreground">
|
||||
<Trans>Transcription</Trans>
|
||||
</h3>
|
||||
<Field className="mt-3">
|
||||
<FieldLabel htmlFor={`${ids}-transcription-url`}>
|
||||
<Trans>Server URL</Trans>
|
||||
</FieldLabel>
|
||||
<Input
|
||||
id={`${ids}-transcription-url`}
|
||||
value={transcriptionUrl}
|
||||
disabled={disabled}
|
||||
placeholder="http://127.0.0.1:8080/v1"
|
||||
autoComplete="off"
|
||||
onChange={(event) => setTranscriptionUrl(event.target.value)}
|
||||
/>
|
||||
</Field>
|
||||
<Field className="mt-4">
|
||||
<FieldLabel htmlFor={`${ids}-transcription-model`}>
|
||||
<Trans>Model</Trans>
|
||||
</FieldLabel>
|
||||
<Input
|
||||
id={`${ids}-transcription-model`}
|
||||
value={transcriptionModel}
|
||||
disabled={disabled}
|
||||
placeholder={t`Optional`}
|
||||
autoComplete="off"
|
||||
onChange={(event) => setTranscriptionModel(event.target.value)}
|
||||
/>
|
||||
</Field>
|
||||
<ApiKeyField
|
||||
saved={Boolean(view?.transcription?.hasApiKey)}
|
||||
draft={transcriptionKey}
|
||||
disabled={disabled}
|
||||
onChange={setTranscriptionKey}
|
||||
/>
|
||||
</section>
|
||||
|
||||
{error ? (
|
||||
<p role="alert" className="text-ui-body-sm text-destructive">
|
||||
{error}
|
||||
</p>
|
||||
) : null}
|
||||
<div className="flex items-center gap-3">
|
||||
<Button className="rounded-full" disabled={disabled} onClick={() => void save()}>
|
||||
{busy ? <Trans>Saving…</Trans> : <Trans>Save</Trans>}
|
||||
</Button>
|
||||
{saved ? <SuccessPop label={t`Saved`} /> : null}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -3,6 +3,7 @@ import type { AvatarStyle, SpaceMemoryConfig } from "@rakazo/contracts";
|
||||
import { Button, Dialog, DialogClose, DialogContent, DialogTitle } from "@rakazo/ui-web";
|
||||
import {
|
||||
Brain,
|
||||
Clapperboard,
|
||||
CloudDownload,
|
||||
Cpu,
|
||||
Gauge,
|
||||
@ -16,6 +17,7 @@ import {
|
||||
} from "lucide-react";
|
||||
import { type ComponentType, useEffect, useRef, useState } from "react";
|
||||
import { computersAreUnavailable } from "../components/ComputersUnavailableHint";
|
||||
import { MediaSettings } from "../components/MediaSettings";
|
||||
import { UserProfileSettings } from "../components/UserProfileSettings";
|
||||
import type { TradingBotUiState } from "../lib/trading-bot-status";
|
||||
import {
|
||||
@ -37,6 +39,7 @@ export type SettingsSection =
|
||||
| "memory"
|
||||
| "profile"
|
||||
| "voice"
|
||||
| "media"
|
||||
| "usage"
|
||||
| "computer"
|
||||
| "updates"
|
||||
@ -111,6 +114,7 @@ export function SettingsOverlay({
|
||||
{ id: "memory", label: t`Memory`, icon: Brain },
|
||||
{ id: "profile", label: t`About you`, icon: UserRound },
|
||||
{ id: "voice", label: t`Voice`, icon: Volume2 },
|
||||
...(isDeploymentOwner ? [{ id: "media" as const, label: t`Media`, icon: Clapperboard }] : []),
|
||||
{ id: "usage", label: t`Usage`, icon: Gauge },
|
||||
...(showComputer ? [{ id: "computer" as const, label: t`Computer`, icon: Monitor }] : []),
|
||||
{ id: "updates", label: t`Updates`, icon: CloudDownload },
|
||||
@ -250,6 +254,7 @@ export function SettingsOverlay({
|
||||
/>
|
||||
) : null}
|
||||
{section === "profile" ? <UserProfileSettings /> : null}
|
||||
{section === "media" && isDeploymentOwner ? <MediaSettings /> : null}
|
||||
{section === "usage" ? (
|
||||
<UsageSettingsPanel usage={usage} panelRef={usageRef} />
|
||||
) : null}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user