feat: add image models config dialog
This commit is contained in:
m4
@@ -0,0 +1,74 @@
|
||||
import { type NextRequest, NextResponse } from "next/server";
|
||||
import { requireActor, requireAdmin } from "@/lib/server/actor";
|
||||
import { configApiFetch } from "@/lib/server/evoscientistConfigClient";
|
||||
import { isCrossOrigin } from "@/lib/server/workspace";
|
||||
import { NO_STORE, routeErrorResponse } from "@/lib/server/routeErrors";
|
||||
import type {
|
||||
ImageGenerationSettings,
|
||||
PutImageGenerationRequest,
|
||||
} from "@/lib/imageGeneration";
|
||||
|
||||
export const runtime = "nodejs";
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
export async function GET(request: NextRequest) {
|
||||
try {
|
||||
if (isCrossOrigin(request)) {
|
||||
return NextResponse.json(
|
||||
{ code: "FORBIDDEN", message: "Cross-origin access is not allowed." },
|
||||
{ status: 403, headers: NO_STORE }
|
||||
);
|
||||
}
|
||||
const actor = requireActor(request);
|
||||
requireAdmin(actor);
|
||||
const { body } = await configApiFetch<ImageGenerationSettings>(
|
||||
actor,
|
||||
"/api/image-generation"
|
||||
);
|
||||
return NextResponse.json(body, { headers: NO_STORE });
|
||||
} catch (error) {
|
||||
return routeErrorResponse(error);
|
||||
}
|
||||
}
|
||||
|
||||
export async function PUT(request: NextRequest) {
|
||||
try {
|
||||
if (isCrossOrigin(request)) {
|
||||
return NextResponse.json(
|
||||
{ code: "FORBIDDEN", message: "Cross-origin access is not allowed." },
|
||||
{ status: 403, headers: NO_STORE }
|
||||
);
|
||||
}
|
||||
const actor = requireActor(request);
|
||||
requireAdmin(actor);
|
||||
const payload = (await request
|
||||
.json()
|
||||
.catch(() => null)) as PutImageGenerationRequest | null;
|
||||
if (
|
||||
!payload ||
|
||||
typeof payload !== "object" ||
|
||||
!Array.isArray(payload.models)
|
||||
) {
|
||||
return NextResponse.json(
|
||||
{
|
||||
code: "INVALID_REQUEST",
|
||||
message: "default_model, timeout_seconds and models are required.",
|
||||
},
|
||||
{ status: 400, headers: NO_STORE }
|
||||
);
|
||||
}
|
||||
const body: PutImageGenerationRequest = {
|
||||
default_model: payload.default_model,
|
||||
timeout_seconds: payload.timeout_seconds,
|
||||
models: payload.models,
|
||||
};
|
||||
const { body: saved } = await configApiFetch<ImageGenerationSettings>(
|
||||
actor,
|
||||
"/api/image-generation",
|
||||
{ method: "PUT", body }
|
||||
);
|
||||
return NextResponse.json(saved, { headers: NO_STORE });
|
||||
} catch (error) {
|
||||
return routeErrorResponse(error);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
"use client";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { ImageModelsEditor } from "@/app/components/ImageModelsEditor";
|
||||
|
||||
interface ImageModelsDialogProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
}
|
||||
|
||||
export function ImageModelsDialog({ open, onOpenChange }: ImageModelsDialogProps) {
|
||||
return (
|
||||
<Dialog
|
||||
open={open}
|
||||
onOpenChange={onOpenChange}
|
||||
>
|
||||
<DialogContent
|
||||
className="sm:max-w-4xl"
|
||||
onPointerDownOutside={(event) => event.preventDefault()}
|
||||
onInteractOutside={(event) => event.preventDefault()}
|
||||
onEscapeKeyDown={(event) => event.preventDefault()}
|
||||
>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Image models</DialogTitle>
|
||||
<DialogDescription>
|
||||
Manage dedicated image-generation models (stored in config.yaml).
|
||||
Admin only.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
{open && <ImageModelsEditor />}
|
||||
<DialogFooter>
|
||||
<Button onClick={() => onOpenChange(false)}>Close</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,493 @@
|
||||
"use client";
|
||||
|
||||
import { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import { Eye, EyeOff } from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
getImageGeneration,
|
||||
newImageModelDraft,
|
||||
putImageGeneration,
|
||||
type ImageGenerationSettings,
|
||||
type ImageModel,
|
||||
type ImageModelStatus,
|
||||
type PutImageGenerationRequest,
|
||||
} from "@/lib/imageGeneration";
|
||||
|
||||
const inputClass =
|
||||
"w-full rounded-md border border-border bg-background px-2 py-1 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-60";
|
||||
|
||||
const SIZE_OPTIONS = ["1024x1024", "1536x1024", "1024x1536"];
|
||||
|
||||
function Field({
|
||||
label,
|
||||
hint,
|
||||
children,
|
||||
}: {
|
||||
label: string;
|
||||
hint?: string;
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<label className="block space-y-0.5">
|
||||
<span className="text-xs font-medium text-muted-foreground">{label}</span>
|
||||
{children}
|
||||
{hint && (
|
||||
<span className="block text-[11px] text-muted-foreground">{hint}</span>
|
||||
)}
|
||||
</label>
|
||||
);
|
||||
}
|
||||
|
||||
/** Editable model state: the masked GET shape plus the raw params JSON text. */
|
||||
type ModelDraft = ImageModelStatus & { paramsText: string };
|
||||
|
||||
interface DraftState {
|
||||
default_model: string;
|
||||
timeout_seconds: number;
|
||||
models: ModelDraft[];
|
||||
}
|
||||
|
||||
function toModelDraft(model: ImageModelStatus): ModelDraft {
|
||||
return {
|
||||
...model,
|
||||
paramsText:
|
||||
model.params && Object.keys(model.params).length > 0
|
||||
? JSON.stringify(model.params, null, 2)
|
||||
: "",
|
||||
};
|
||||
}
|
||||
|
||||
function toDraftState(settings: ImageGenerationSettings): DraftState {
|
||||
return {
|
||||
default_model: settings.default_model,
|
||||
timeout_seconds: settings.timeout_seconds,
|
||||
models: settings.models.map(toModelDraft),
|
||||
};
|
||||
}
|
||||
|
||||
type ParsedParams =
|
||||
| { ok: true; value: Record<string, unknown> }
|
||||
| { ok: false; message: string };
|
||||
|
||||
function parseParams(text: string): ParsedParams {
|
||||
const trimmed = text.trim();
|
||||
if (!trimmed) return { ok: true, value: {} };
|
||||
try {
|
||||
const parsed: unknown = JSON.parse(trimmed);
|
||||
if (parsed === null || typeof parsed !== "object" || Array.isArray(parsed)) {
|
||||
return { ok: false, message: "params must be a JSON object" };
|
||||
}
|
||||
return { ok: true, value: parsed as Record<string, unknown> };
|
||||
} catch {
|
||||
return { ok: false, message: "invalid JSON" };
|
||||
}
|
||||
}
|
||||
|
||||
/** Build the PUT payload; returns null when any params text is invalid. */
|
||||
function buildPayload(draft: DraftState): PutImageGenerationRequest | null {
|
||||
const models: ImageModel[] = [];
|
||||
for (const model of draft.models) {
|
||||
const params = parseParams(model.paramsText);
|
||||
if (!params.ok) return null;
|
||||
models.push({
|
||||
id: model.id,
|
||||
name: model.name,
|
||||
provider: model.provider,
|
||||
api_key: model.api_key,
|
||||
base_url: model.base_url,
|
||||
supports_generation: model.supports_generation,
|
||||
supports_edit: model.supports_edit,
|
||||
default_size: model.default_size,
|
||||
default_quality: model.default_quality,
|
||||
params: params.value,
|
||||
});
|
||||
}
|
||||
return {
|
||||
default_model: draft.default_model,
|
||||
timeout_seconds: draft.timeout_seconds,
|
||||
models,
|
||||
};
|
||||
}
|
||||
|
||||
function ImageModelCard({
|
||||
model,
|
||||
onChange,
|
||||
onRemove,
|
||||
}: {
|
||||
model: ModelDraft;
|
||||
onChange: (next: ModelDraft) => void;
|
||||
onRemove: () => void;
|
||||
}) {
|
||||
const [showKey, setShowKey] = useState(false);
|
||||
const paramsResult = parseParams(model.paramsText);
|
||||
const paramsError = paramsResult.ok ? null : paramsResult.message;
|
||||
|
||||
return (
|
||||
<div className="space-y-2 rounded-md border border-border p-3">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<span className="font-mono text-sm font-medium">
|
||||
{model.id || "(new model)"}
|
||||
</span>
|
||||
<span className="rounded bg-accent px-1.5 py-0.5 text-[11px] text-muted-foreground">
|
||||
{model.provider}
|
||||
</span>
|
||||
<span className="flex-1" />
|
||||
<label className="flex items-center gap-1 text-xs">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={model.supports_generation}
|
||||
onChange={(event) =>
|
||||
onChange({ ...model, supports_generation: event.target.checked })
|
||||
}
|
||||
/>
|
||||
generation
|
||||
</label>
|
||||
<label className="flex items-center gap-1 text-xs">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={model.supports_edit}
|
||||
onChange={(event) =>
|
||||
onChange({ ...model, supports_edit: event.target.checked })
|
||||
}
|
||||
/>
|
||||
edit
|
||||
</label>
|
||||
<Button type="button" variant="outline" size="sm" onClick={onRemove}>
|
||||
Remove
|
||||
</Button>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-2 sm:grid-cols-3">
|
||||
<Field label="Model id">
|
||||
<input
|
||||
type="text"
|
||||
className={inputClass}
|
||||
value={model.id}
|
||||
onChange={(event) => onChange({ ...model, id: event.target.value })}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Display name">
|
||||
<input
|
||||
type="text"
|
||||
className={inputClass}
|
||||
value={model.name}
|
||||
onChange={(event) =>
|
||||
onChange({ ...model, name: event.target.value })
|
||||
}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Provider">
|
||||
<select
|
||||
className={inputClass}
|
||||
value={model.provider}
|
||||
onChange={(event) =>
|
||||
onChange({
|
||||
...model,
|
||||
provider: event.target.value === "gemini" ? "gemini" : "openai",
|
||||
})
|
||||
}
|
||||
>
|
||||
<option value="openai">openai</option>
|
||||
<option value="gemini">gemini</option>
|
||||
</select>
|
||||
</Field>
|
||||
</div>
|
||||
<Field label="Base URL">
|
||||
<input
|
||||
type="text"
|
||||
className={inputClass}
|
||||
value={model.base_url}
|
||||
placeholder="https://api.example.com/v1"
|
||||
onChange={(event) =>
|
||||
onChange({ ...model, base_url: event.target.value })
|
||||
}
|
||||
/>
|
||||
</Field>
|
||||
<div className="grid grid-cols-2 gap-2 sm:grid-cols-3">
|
||||
<Field label="Default size">
|
||||
<select
|
||||
className={inputClass}
|
||||
value={model.default_size}
|
||||
onChange={(event) =>
|
||||
onChange({ ...model, default_size: event.target.value })
|
||||
}
|
||||
>
|
||||
{SIZE_OPTIONS.map((size) => (
|
||||
<option key={size} value={size}>
|
||||
{size}
|
||||
</option>
|
||||
))}
|
||||
{!SIZE_OPTIONS.includes(model.default_size) && (
|
||||
<option value={model.default_size}>{model.default_size}</option>
|
||||
)}
|
||||
</select>
|
||||
</Field>
|
||||
<Field label="Default quality">
|
||||
<input
|
||||
type="text"
|
||||
className={inputClass}
|
||||
value={model.default_quality}
|
||||
placeholder="auto"
|
||||
onChange={(event) =>
|
||||
onChange({ ...model, default_quality: event.target.value })
|
||||
}
|
||||
/>
|
||||
</Field>
|
||||
<Field
|
||||
label="API Key"
|
||||
hint={
|
||||
model.api_key_configured
|
||||
? `configured${model.api_key_hint ? ` (${model.api_key_hint})` : ""} — leave blank to keep`
|
||||
: "paste your API key"
|
||||
}
|
||||
>
|
||||
<div className="relative">
|
||||
<input
|
||||
type={showKey ? "text" : "password"}
|
||||
className={`${inputClass} pr-8`}
|
||||
value={model.api_key}
|
||||
autoComplete="new-password"
|
||||
placeholder={model.api_key_hint ?? "sk-..."}
|
||||
onChange={(event) =>
|
||||
onChange({ ...model, api_key: event.target.value })
|
||||
}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
aria-label={showKey ? "Hide API key" : "Show API key"}
|
||||
className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
|
||||
onClick={() => setShowKey((current) => !current)}
|
||||
>
|
||||
{showKey ? <EyeOff size={16} /> : <Eye size={16} />}
|
||||
</button>
|
||||
</div>
|
||||
</Field>
|
||||
</div>
|
||||
<Field label="Params (JSON object, optional)">
|
||||
<textarea
|
||||
className={`${inputClass} font-mono text-xs`}
|
||||
rows={2}
|
||||
value={model.paramsText}
|
||||
placeholder='{"quality": "high"}'
|
||||
spellCheck={false}
|
||||
onChange={(event) =>
|
||||
onChange({ ...model, paramsText: event.target.value })
|
||||
}
|
||||
/>
|
||||
</Field>
|
||||
{paramsError && (
|
||||
<p role="alert" className="text-[11px] text-destructive">
|
||||
Params: {paramsError}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function ImageModelsEditor() {
|
||||
const [data, setData] = useState<ImageGenerationSettings | null>(null);
|
||||
const [draft, setDraft] = useState<DraftState | null>(null);
|
||||
const [loadError, setLoadError] = useState<string | null>(null);
|
||||
const [forbidden, setForbidden] = useState(false);
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
const load = useCallback(async () => {
|
||||
setLoadError(null);
|
||||
try {
|
||||
const settings = await getImageGeneration();
|
||||
setForbidden(false);
|
||||
setData(settings);
|
||||
setDraft(toDraftState(settings));
|
||||
} catch (reason) {
|
||||
const message =
|
||||
reason instanceof Error
|
||||
? reason.message
|
||||
: "Failed to load image models.";
|
||||
if (message.includes("(403)")) {
|
||||
setForbidden(true);
|
||||
} else {
|
||||
setLoadError(message);
|
||||
}
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
void load();
|
||||
}, [load]);
|
||||
|
||||
const dirty = useMemo(() => {
|
||||
if (!data || !draft) return false;
|
||||
const draftPayload = buildPayload(draft);
|
||||
const savedPayload = buildPayload(toDraftState(data));
|
||||
return JSON.stringify(draftPayload) !== JSON.stringify(savedPayload);
|
||||
}, [data, draft]);
|
||||
|
||||
const save = useCallback(async () => {
|
||||
if (!draft) return;
|
||||
const payload = buildPayload(draft);
|
||||
if (!payload) {
|
||||
toast.error("Fix the invalid params JSON before saving.");
|
||||
return;
|
||||
}
|
||||
setSaving(true);
|
||||
try {
|
||||
const saved = await putImageGeneration(payload);
|
||||
setData(saved);
|
||||
setDraft(toDraftState(saved));
|
||||
toast.success("Image models saved.");
|
||||
} catch (reason) {
|
||||
toast.error(
|
||||
reason instanceof Error ? reason.message : "Failed to save image models."
|
||||
);
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
}, [draft]);
|
||||
|
||||
if (forbidden) {
|
||||
return (
|
||||
<p className="rounded-md border border-border px-4 py-3 text-sm text-muted-foreground">
|
||||
Image model configuration requires an admin account.
|
||||
</p>
|
||||
);
|
||||
}
|
||||
if (loadError) {
|
||||
return (
|
||||
<div className="space-y-2 rounded-md border border-destructive/30 bg-destructive/5 px-4 py-3 text-sm">
|
||||
<p role="alert">{loadError}</p>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => void load()}
|
||||
>
|
||||
Retry
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
if (!data || !draft) {
|
||||
return <p className="text-sm text-muted-foreground">Loading image models…</p>;
|
||||
}
|
||||
|
||||
const defaultOptions = draft.models.map((model) => model.id);
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="grid grid-cols-1 gap-2 rounded-lg border border-border p-4 sm:grid-cols-2">
|
||||
<Field label="Default model">
|
||||
<select
|
||||
className={inputClass}
|
||||
value={draft.default_model}
|
||||
onChange={(event) =>
|
||||
setDraft({ ...draft, default_model: event.target.value })
|
||||
}
|
||||
>
|
||||
<option value="">— none —</option>
|
||||
{defaultOptions.map((id) => (
|
||||
<option key={id} value={id}>
|
||||
{id}
|
||||
</option>
|
||||
))}
|
||||
{draft.default_model &&
|
||||
!defaultOptions.includes(draft.default_model) && (
|
||||
<option value={draft.default_model}>
|
||||
{draft.default_model}
|
||||
</option>
|
||||
)}
|
||||
</select>
|
||||
</Field>
|
||||
<Field label="Timeout (s)">
|
||||
<input
|
||||
type="number"
|
||||
className={inputClass}
|
||||
value={draft.timeout_seconds}
|
||||
min={0}
|
||||
step={1}
|
||||
onChange={(event) => {
|
||||
const parsed = Number(event.target.value);
|
||||
if (Number.isNaN(parsed)) return;
|
||||
setDraft({ ...draft, timeout_seconds: Math.trunc(parsed) });
|
||||
}}
|
||||
/>
|
||||
</Field>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-xs font-medium text-muted-foreground">Models</p>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
setDraft({
|
||||
...draft,
|
||||
models: [
|
||||
...draft.models,
|
||||
{
|
||||
...newImageModelDraft(draft.models),
|
||||
api_key_configured: false,
|
||||
api_key_hint: null,
|
||||
paramsText: "",
|
||||
},
|
||||
],
|
||||
})
|
||||
}
|
||||
>
|
||||
Add model
|
||||
</Button>
|
||||
</div>
|
||||
{draft.models.length === 0 && (
|
||||
<p className="text-xs text-muted-foreground">No models yet.</p>
|
||||
)}
|
||||
{draft.models.map((model, index) => (
|
||||
<ImageModelCard
|
||||
key={`${index}-${model.id}`}
|
||||
model={model}
|
||||
onChange={(next) =>
|
||||
setDraft({
|
||||
...draft,
|
||||
models: draft.models.map((current, i) =>
|
||||
i === index ? next : current
|
||||
),
|
||||
})
|
||||
}
|
||||
onRemove={() =>
|
||||
setDraft({
|
||||
...draft,
|
||||
models: draft.models.filter((_, i) => i !== index),
|
||||
})
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 border-t border-border pt-3">
|
||||
<Button
|
||||
type="button"
|
||||
onClick={() => void save()}
|
||||
disabled={saving || !dirty}
|
||||
>
|
||||
{saving ? "Saving…" : "Save"}
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
disabled={saving || !dirty}
|
||||
onClick={() => setDraft(toDraftState(data))}
|
||||
>
|
||||
Discard changes
|
||||
</Button>
|
||||
{dirty && (
|
||||
<span className="rounded bg-[var(--color-warning)]/10 px-1.5 py-0.5 text-xs text-[var(--color-warning)]">
|
||||
unsaved changes
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-[11px] text-muted-foreground">
|
||||
API keys are write-only: leave the field blank to keep the stored key.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -6,6 +6,7 @@ import { useQueryState } from "nuqs";
|
||||
import { AccountDialog } from "@/app/components/AccountDialog";
|
||||
import { ChangePasswordDialog } from "@/app/components/ChangePasswordDialog";
|
||||
import { ConfigDialog } from "@/app/components/ConfigDialog";
|
||||
import { ImageModelsDialog } from "@/app/components/ImageModelsDialog";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
DropdownMenu,
|
||||
@@ -20,6 +21,7 @@ import type { Assistant } from "@langchain/langgraph-sdk";
|
||||
import {
|
||||
KeyRound,
|
||||
Settings,
|
||||
Image as ImageIcon,
|
||||
SquarePen,
|
||||
PanelLeft,
|
||||
PanelLeftClose,
|
||||
@@ -71,6 +73,7 @@ function HomePageInner({ authEnabled }: HomePageInnerProps) {
|
||||
const [accountDialogOpen, setAccountDialogOpen] = useState(false);
|
||||
const [changePasswordOpen, setChangePasswordOpen] = useState(false);
|
||||
const [modelConfigOpen, setModelConfigOpen] = useState(false);
|
||||
const [imageModelsOpen, setImageModelsOpen] = useState(false);
|
||||
// "Submit a message on the main thread" — registered by ChatInterface (only
|
||||
// while it's mounted, i.e. on the chat view), used by the Agents board to loop
|
||||
// an async result back to the main agent. Null when not on the chat view.
|
||||
@@ -285,6 +288,10 @@ function HomePageInner({ authEnabled }: HomePageInnerProps) {
|
||||
open={modelConfigOpen}
|
||||
onOpenChange={setModelConfigOpen}
|
||||
/>
|
||||
<ImageModelsDialog
|
||||
open={imageModelsOpen}
|
||||
onOpenChange={setImageModelsOpen}
|
||||
/>
|
||||
<div className="flex h-screen flex-col">
|
||||
<header className="flex h-14 items-center justify-between gap-2 border-b border-border px-2.5 sm:px-4">
|
||||
<div className="flex min-w-0 items-center gap-2 sm:gap-3">
|
||||
@@ -385,6 +392,19 @@ function HomePageInner({ authEnabled }: HomePageInnerProps) {
|
||||
/>
|
||||
)}
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => setImageModelsOpen(true)}
|
||||
aria-label="Image models"
|
||||
title="Image models"
|
||||
className="size-8"
|
||||
>
|
||||
<ImageIcon
|
||||
className="size-5"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</Button>
|
||||
<DropdownMenu modal={false}>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
|
||||
@@ -0,0 +1,73 @@
|
||||
export interface ImageModel {
|
||||
id: string;
|
||||
name: string;
|
||||
provider: "openai" | "gemini";
|
||||
api_key: string;
|
||||
base_url: string;
|
||||
supports_generation: boolean;
|
||||
supports_edit: boolean;
|
||||
default_size: string;
|
||||
default_quality: string;
|
||||
params: Record<string, unknown>;
|
||||
}
|
||||
|
||||
export interface ImageModelStatus extends Omit<ImageModel, "api_key"> {
|
||||
api_key: string; // always "" from GET
|
||||
api_key_configured: boolean;
|
||||
api_key_hint: string | null;
|
||||
}
|
||||
|
||||
export interface ImageGenerationSettings {
|
||||
default_model: string;
|
||||
timeout_seconds: number;
|
||||
models: ImageModelStatus[];
|
||||
}
|
||||
|
||||
export interface PutImageGenerationRequest {
|
||||
default_model: string;
|
||||
timeout_seconds: number;
|
||||
models: ImageModel[];
|
||||
}
|
||||
|
||||
export async function getImageGeneration(): Promise<ImageGenerationSettings> {
|
||||
const response = await fetch("/api/image-generation", { cache: "no-store" });
|
||||
if (!response.ok) throw new Error(`Failed to load image models (${response.status})`);
|
||||
return response.json();
|
||||
}
|
||||
|
||||
export async function putImageGeneration(
|
||||
payload: PutImageGenerationRequest
|
||||
): Promise<ImageGenerationSettings> {
|
||||
const response = await fetch("/api/image-generation", {
|
||||
method: "PUT",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
if (!response.ok) {
|
||||
const body = await response.json().catch(() => null);
|
||||
throw new Error(body?.message ?? `Save failed (${response.status})`);
|
||||
}
|
||||
return response.json();
|
||||
}
|
||||
|
||||
export function newImageModelDraft(existing: ImageModel[]): ImageModel {
|
||||
let index = existing.length + 1;
|
||||
let id = `image-model-${index}`;
|
||||
const ids = new Set(existing.map((model) => model.id));
|
||||
while (ids.has(id)) {
|
||||
index += 1;
|
||||
id = `image-model-${index}`;
|
||||
}
|
||||
return {
|
||||
id,
|
||||
name: "",
|
||||
provider: "openai",
|
||||
api_key: "",
|
||||
base_url: "",
|
||||
supports_generation: true,
|
||||
supports_edit: true,
|
||||
default_size: "1024x1024",
|
||||
default_quality: "auto",
|
||||
params: {},
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user