123 lines
3.5 KiB
TypeScript
123 lines
3.5 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { useImageGeneration } from '../hooks/use-image-generation';
|
|
import {
|
|
MODEL_CONFIGS,
|
|
type ModelMode,
|
|
PROVIDERS,
|
|
type ProviderKey,
|
|
} from '../lib/provider-config';
|
|
import type { Suggestion } from '../lib/suggestions';
|
|
import { ImageGeneratorHeader } from './ImageGeneratorHeader';
|
|
import { ModelCardCarousel } from './ModelCardCarousel';
|
|
import { PromptInput } from './PromptInput';
|
|
|
|
export function ImageImageGeneratorByProvider({
|
|
suggestions,
|
|
providerKey,
|
|
}: {
|
|
suggestions: Suggestion[];
|
|
providerKey: ProviderKey;
|
|
}) {
|
|
const {
|
|
images,
|
|
timings,
|
|
failedProviders,
|
|
isLoading,
|
|
startGeneration,
|
|
activePrompt,
|
|
} = useImageGeneration();
|
|
|
|
const [showProviders, setShowProviders] = useState(true);
|
|
const [selectedModels, setSelectedModels] = useState<
|
|
Record<ProviderKey, string>
|
|
>(MODEL_CONFIGS.performance);
|
|
const [mode, setMode] = useState<ModelMode>('performance');
|
|
const toggleView = () => {
|
|
setShowProviders((prev) => !prev);
|
|
};
|
|
|
|
const handleModeChange = (newMode: ModelMode) => {
|
|
setMode(newMode);
|
|
setSelectedModels(MODEL_CONFIGS[newMode]);
|
|
setShowProviders(true);
|
|
};
|
|
|
|
const handleModelChange = (providerKey: ProviderKey, model: string) => {
|
|
setSelectedModels((prev) => ({ ...prev, [providerKey]: model }));
|
|
};
|
|
|
|
// Only map the active provider to its selected model
|
|
const providerToModel = {
|
|
[providerKey]: selectedModels[providerKey],
|
|
} as Record<ProviderKey, string>;
|
|
|
|
const handlePromptSubmit = (newPrompt: string) => {
|
|
const activeProviders: ProviderKey[] = [providerKey];
|
|
startGeneration(newPrompt, activeProviders, providerToModel);
|
|
setShowProviders(false);
|
|
};
|
|
|
|
return (
|
|
<div className="rounded-lg bg-background py-8 px-4 sm:px-6 lg:px-8">
|
|
<div className="mx-auto">
|
|
{/* header */}
|
|
<ImageGeneratorHeader />
|
|
|
|
{/* input prompt */}
|
|
<PromptInput
|
|
onSubmit={handlePromptSubmit}
|
|
isLoading={isLoading}
|
|
showProviders={showProviders}
|
|
onToggleProviders={toggleView}
|
|
mode={mode}
|
|
onModeChange={handleModeChange}
|
|
suggestions={suggestions}
|
|
/>
|
|
|
|
{/* models carousel */}
|
|
{(() => {
|
|
const key = providerKey;
|
|
const provider = PROVIDERS[key];
|
|
if (!provider) return null;
|
|
|
|
const imageItem = images.find((img) => img.provider === key);
|
|
const imageData = imageItem?.image;
|
|
const modelId = imageItem?.modelId ?? selectedModels[key] ?? '';
|
|
const timing = timings[key];
|
|
|
|
const modelProps = {
|
|
label: provider.displayName,
|
|
models: provider.models,
|
|
value: selectedModels[key],
|
|
providerKey: key,
|
|
onChange: (model: string, pKey: ProviderKey) =>
|
|
handleModelChange(pKey, model),
|
|
iconPath: provider.iconPath,
|
|
color: provider.color,
|
|
enabled: true,
|
|
image: imageData,
|
|
modelId,
|
|
timing,
|
|
failed: failedProviders.includes(key),
|
|
} as const;
|
|
|
|
return (
|
|
<>
|
|
<div>
|
|
<ModelCardCarousel models={[modelProps]} />
|
|
</div>
|
|
{activePrompt && activePrompt.length > 0 && (
|
|
<div className="text-center mt-8 text-muted-foreground">
|
|
{activePrompt}
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
})()}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|