AI
@@ -72,7 +73,7 @@ export function AppShell(props: {
-
+
{props.state === 'error' && 数据加载失败}
{props.children}
diff --git a/apps/web/src/pages/PlaygroundPage.tsx b/apps/web/src/pages/PlaygroundPage.tsx
new file mode 100644
index 0000000..1681d6e
--- /dev/null
+++ b/apps/web/src/pages/PlaygroundPage.tsx
@@ -0,0 +1,713 @@
+import { useEffect, useMemo, useState, type ReactNode } from 'react';
+import {
+ AssistantRuntimeProvider,
+ ComposerPrimitive,
+ MessagePrimitive,
+ ThreadPrimitive,
+ useMessagePartText,
+ useLocalRuntime,
+ type ChatModelAdapter,
+ type ThreadMessage,
+} from '@assistant-ui/react';
+import { StreamdownTextPrimitive } from '@assistant-ui/react-streamdown';
+import { cjk } from '@streamdown/cjk';
+import { code } from '@streamdown/code';
+import { math } from '@streamdown/math';
+import { mermaid } from '@streamdown/mermaid';
+import type { GatewayApiKey, PlatformModel } from '@easyai-ai-gateway/contracts';
+import { Bot, ChevronDown, Image as ImageIcon, MessageSquarePlus, Paperclip, Send, Sparkles, Video } from 'lucide-react';
+import { Badge, Button, Select, Textarea } from '../components/ui';
+import { streamChatCompletionText } from '../api';
+import type { PlaygroundMode } from '../types';
+
+type VideoCreateMode = 'text_to_video' | 'first_last_frame' | 'omni_reference';
+
+interface ModelOption {
+ count: number;
+ label: string;
+ provider: string;
+ value: string;
+}
+
+const modeOptions: Array<{ description: string; icon: ReactNode; label: string; value: PlaygroundMode }> = [
+ { value: 'chat', label: '大模型对话', description: '对话、推理、结构化输出', icon: },
+ { value: 'image', label: '图像生成', description: '文生图、图像编辑参数预览', icon: },
+ { value: 'video', label: '视频生成', description: '图生视频、文生视频任务测试', icon: },
+];
+
+const videoModeOptions: Array<{ label: string; value: VideoCreateMode }> = [
+ { value: 'text_to_video', label: '文生视频' },
+ { value: 'first_last_frame', label: '首尾帧' },
+ { value: 'omni_reference', label: '全能参考' },
+];
+
+const placeholderByMode: Record = {
+ chat: '输入问题、角色设定或测试提示词，支持 OpenAI 兼容格式验证...',
+ image: '描述你想生成的画面，例如：未来城市中的玻璃温室，晨光，电影级构图...',
+ video: '描述视频镜头、主体运动和风格，例如：低角度跟拍，一辆复古跑车穿过雨夜街道...',
+};
+
+const quickPrompts: Record = {
+ chat: ['写一个产品发布摘要', '生成接口调用示例', '分析失败重试策略'],
+ image: ['产品海报', '角色设定图', '电商主图'],
+ video: ['5 秒运镜', '首帧转视频', '宣传短片'],
+};
+
+const publicWorks = [
+ { title: '雨夜霓虹街区', type: '图像生成', image: 'https://picsum.photos/seed/easyai-neon-city/720/960' },
+ { title: '玻璃温室晨光', type: '图像生成', image: 'https://picsum.photos/seed/easyai-glasshouse/720/540' },
+ { title: '山谷航拍镜头', type: '视频生成', image: 'https://picsum.photos/seed/easyai-valley-flight/720/1040' },
+ { title: '极简产品广告', type: '图像生成', image: 'https://picsum.photos/seed/easyai-product-ad/720/680' },
+ { title: '机械结构设定', type: '图像编辑', image: 'https://picsum.photos/seed/easyai-mecha-sketch/720/920' },
+ { title: '城市模型推演', type: '大模型', image: 'https://picsum.photos/seed/easyai-city-plan/720/620' },
+ { title: '海边人物电影感', type: '图像生成', image: 'https://picsum.photos/seed/easyai-cinematic-sea/720/980' },
+ { title: '空间站漫游', type: '视频生成', image: 'https://picsum.photos/seed/easyai-orbital-walk/720/860' },
+ { title: '水彩建筑手稿', type: '图像生成', image: 'https://picsum.photos/seed/easyai-watercolor-arch/720/760' },
+ { title: '品牌 KV 探索', type: '图像生成', image: 'https://picsum.photos/seed/easyai-brand-kv/720/560' },
+ { title: '古城夜游镜头', type: '视频生成', image: 'https://picsum.photos/seed/easyai-night-town/720/1020' },
+ { title: '界面概念板', type: '大模型', image: 'https://picsum.photos/seed/easyai-ui-board/720/650' },
+];
+
+const streamdownPlugins = { cjk, code, math, mermaid };
+
+export function PlaygroundPage(props: {
+ apiKeySecretsById: Record;
+ apiKeys: GatewayApiKey[];
+ mode: PlaygroundMode;
+ models: PlatformModel[];
+ selectedApiKeyId: string;
+ token: string;
+ onApiKeyChange: (apiKeyId: string) => void;
+ onCreateApiKey: () => void;
+ onLogin: () => void;
+ onModeChange: (mode: PlaygroundMode) => void;
+}) {
+ const [prompt, setPrompt] = useState('');
+ const [selectedModel, setSelectedModel] = useState('');
+ const [imageHasReference, setImageHasReference] = useState(false);
+ const [videoMode, setVideoMode] = useState('text_to_video');
+ const [threadKey, setThreadKey] = useState(0);
+ const activeMode = useMemo(() => modeOptions.find((item) => item.value === props.mode) ?? modeOptions[0], [props.mode]);
+ const modelOptions = useMemo(
+ () => buildModelOptions(filterModelsForMode(props.models, props.mode, imageHasReference, videoMode)),
+ [imageHasReference, props.mode, props.models, videoMode],
+ );
+
+ useEffect(() => {
+ setSelectedModel((current) => modelOptions.some((item) => item.value === current) ? current : modelOptions[0]?.value ?? '');
+ }, [modelOptions]);
+
+ return (
+
+
+
+
+
+ {props.mode === 'chat' ? (
+
+ ) : (
+ <>
+
+
+ undefined}
+ onVideoModeChange={setVideoMode}
+ />
+
+ )}
+
+
+
+ 开启你的 即刻测试
+
+ {
+ setMode(nextMode);
+ openPlayground(nextMode);
+ }}
+ onModelChange={() => undefined}
+ onPromptChange={setPrompt}
+ onSubmit={() => openPlayground(mode)}
+ />
+
+ {modeOptions.map((item) => (
+
+ ))}
+
+
+ );
+}
+
+export function PublicWorksGallery() {
+ return (
+
+
+
+
Community Gallery
+
公开作品展示
+
+
+
+
+
+
+
+ {publicWorks.map((item) => (
+
+ 
+
+ {item.type}
+ {item.title}
+
+
+ ))}
+
+ {apiKeyNotice && (
+
+ {apiKeyNotice}
+
+
+ )}
+
+
+
+
+
+
+
+
+
+ {modeOptions.map((item) => (
+
+ ))}
+
+ );
+}
+
+function PlaygroundGreeting(props: {
+ activeMode: { description: string; label: string };
+}) {
+ return (
+
+ 你好，想测试什么？
+ {props.activeMode.label}
+ {props.activeMode.description}
+
+ );
+}
+
+function AssistantEmptyState(props: {
+ activeApiKeySecret: string;
+ apiKeyNotice: string;
+ apiKeySecretsById: Record;
+ apiKeys: GatewayApiKey[];
+ canRun: boolean;
+ modelOptions: ModelOption[];
+ selectedApiKeyId: string;
+ selectedModel: string;
+ token: string;
+ onApiKeyChange: (apiKeyId: string) => void;
+ onCreateApiKey: () => void;
+ onModeChange: (mode: PlaygroundMode) => void;
+ onModelChange: (value: string) => void;
+}) {
+ const activeMode = modeOptions.find((item) => item.value === 'chat') ?? modeOptions[0];
+ const placeholder = props.canRun ? placeholderByMode.chat : assistantPlaceholder(props.token, props.selectedModel, props.activeApiKeySecret);
+
+ return (
+
+ );
+}
+
+function AssistantChatComposer(props: {
+ apiKeyNotice: string;
+ apiKeySecretsById: Record;
+ apiKeys: GatewayApiKey[];
+ canRun: boolean;
+ docked?: boolean;
+ modelOptions: ModelOption[];
+ placeholder: string;
+ selectedApiKeyId: string;
+ selectedModel: string;
+ onApiKeyChange: (apiKeyId: string) => void;
+ onCreateApiKey: () => void;
+ onModeChange: (mode: PlaygroundMode) => void;
+ onModelChange: (value: string) => void;
+}) {
+ const className = ['playgroundComposer', 'assistantChatComposer', props.docked ? 'assistantDockComposer' : 'assistantEmptyComposer'].join(' ');
+
+ return (
+
+
+
+
+
+
+ {props.apiKeyNotice && (
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+ 模型正在回复...
+
+
+
+
+ 调用失败，请检查模型、平台凭证或测试模式配置。
+
+
+ );
+}
+
+function PlainMessageText() {
+ const { text } = useMessagePartText();
+ return {text};
+}
+
+function AssistantMarkdownText() {
+ return (
+
+ );
+}
+
+function toGatewayChatMessages(messages: readonly ThreadMessage[]) {
+ return messages
+ .filter((message) => message.role === 'user' || message.role === 'assistant')
+ .map((message) => ({
+ content: threadMessageText(message),
+ role: message.role,
+ }))
+ .filter((message) => message.content.trim().length > 0);
+}
+
+function threadMessageText(message: ThreadMessage) {
+ return message.content
+ .map((part) => part.type === 'text' ? part.text : '')
+ .join('')
+ .trim();
+}
+
+function resolveSelectedApiKeyId(apiKeys: GatewayApiKey[], secretsById: Record, selectedApiKeyId: string) {
+ if (selectedApiKeyId && secretsById[selectedApiKeyId]) return selectedApiKeyId;
+ const firstUsable = apiKeys.find((item) => Boolean(secretsById[item.id]));
+ return firstUsable?.id ?? '';
+}
+
+function apiKeyNoticeText(apiKeys: GatewayApiKey[], secretsById: Record) {
+ if (!apiKeys.length) return '当前账号还没有可用 API Key，请先创建一个 Key。';
+ if (!apiKeys.some((item) => Boolean(secretsById[item.id]))) {
+ return '当前没有可用于在线测试的完整 API Key，请重新加载或创建一个 Key。';
+ }
+ return '';
+}
+
+function assistantPlaceholder(token: string, selectedModel: string, apiKeySecret: string) {
+ if (!token) return '请先登录后再测试模型';
+ if (!apiKeySecret) return '请选择可用于测试的 API Key';
+ if (!selectedModel) return '当前没有可用模型';
+ return '输入消息，Enter 发送，Shift + Enter 换行';
+}
+
+function Composer(props: {
+ apiKeySecretsById?: Record;
+ apiKeys?: GatewayApiKey[];
+ compact?: boolean;
+ imageHasReference?: boolean;
+ mode: PlaygroundMode;
+ modelOptions: ModelOption[];
+ prompt: string;
+ selectedApiKeyId?: string;
+ selectedModel?: string;
+ videoMode?: VideoCreateMode;
+ onApiKeyChange?: (apiKeyId: string) => void;
+ onCreateApiKey?: () => void;
+ onImageReferenceChange?: (value: boolean) => void;
+ onModeChange: (mode: PlaygroundMode) => void;
+ onModelChange: (value: string) => void;
+ onPromptChange: (value: string) => void;
+ onSubmit?: () => void;
+ onVideoModeChange?: (value: VideoCreateMode) => void;
+}) {
+ const quickItems = quickPrompts[props.mode];
+ const apiKeyNotice = props.apiKeys && props.apiKeySecretsById ? apiKeyNoticeText(props.apiKeys, props.apiKeySecretsById) : '';
+ return (
+
+
+
+