+
+ );
+ }
+
+ return (
+
+
+
+
+ {t('正在思考...')}
+
+
+ AI 正在分析您的问题
+
+
+
+ {/* 渲染推理内容 */}
+ {message.role === 'assistant' && finalExtractedThinkingContent && (
+
+ );
+};
+
+export default MessageContent;
\ No newline at end of file
diff --git a/web/src/components/playground/ParameterControl.js b/web/src/components/playground/ParameterControl.js
new file mode 100644
index 00000000..cd7e939c
--- /dev/null
+++ b/web/src/components/playground/ParameterControl.js
@@ -0,0 +1,234 @@
+import React from 'react';
+import {
+ Input,
+ Slider,
+ Typography,
+ Button,
+ Tag,
+} from '@douyinfe/semi-ui';
+import {
+ Hash,
+ Thermometer,
+ Target,
+ Repeat,
+ Ban,
+ Shuffle,
+ Check,
+ X,
+} from 'lucide-react';
+
+const ParameterControl = ({
+ inputs,
+ parameterEnabled,
+ onInputChange,
+ onParameterToggle,
+}) => {
+ return (
+ <>
+ {/* Temperature */}
+
+
+ )}
+
+ {/* 渲染消息内容 */}
+ {(() => {
+ // 处理多模态内容（文本+图片）
+ if (Array.isArray(message.content)) {
+ const textContent = message.content.find(item => item.type === 'text');
+ const imageContents = message.content.filter(item => item.type === 'image_url');
+
+ return (
+ onToggleReasoningExpansion(message.id)}
+ >
+
+
+
+
+
+
+
+ {headerText}
+
+ {thinkingSource && (
+
+ 来源: {thinkingSource}
+
+ )}
+
+
+ {isThinkingStatus && (
+
+
+
+ 思考中
+
+
+ )}
+ {!isThinkingStatus && (
+
+ {message.isReasoningExpanded ?
+
+ )}
+
+ {message.isReasoningExpanded && (
+
+
+
+ )}
+
+
+
+
+
+ {/* 显示图片 */}
+ {imageContents.length > 0 && (
+
+ );
+ }
+
+ // 处理纯文本内容或助手回复
+ if (typeof message.content === 'string') {
+ if (message.role === 'assistant') {
+ // 助手回复使用处理后的内容
+ if (finalDisplayableFinalContent && finalDisplayableFinalContent.trim() !== '') {
+ return (
+
+ {imageContents.map((imgItem, index) => (
+
+ )}
+
+ {/* 显示文本内容 */}
+ {textContent && textContent.text && textContent.text.trim() !== '' && (
+
+ 
{
+ e.target.style.display = 'none';
+ e.target.nextSibling.style.display = 'block';
+ }}
+ />
+
+ ))}
+
+ 图片加载失败: {imgItem.image_url.url}
+
+
+
+ )}
+
+
+ );
+ }
+ } else {
+ // 用户文本消息
+ return (
+
+
+ );
+ }
+ }
+
+ return null;
+ })()}
+
+
+ 控制输出的随机性和创造性
+
+ onInputChange('temperature', value)}
+ className="mt-2"
+ disabled={!parameterEnabled.temperature}
+ />
+
+
+ {/* Top P */}
+
+
+
+
+ Temperature
+
+
+ {inputs.temperature}
+
+
+ :
+
+ 核采样，控制词汇选择的多样性
+
+ onInputChange('top_p', value)}
+ className="mt-2"
+ disabled={!parameterEnabled.top_p}
+ />
+
+
+ {/* Frequency Penalty */}
+
+
+
+
+ Top P
+
+
+ {inputs.top_p}
+
+
+ :
+
+ 频率惩罚，减少重复词汇的出现
+
+ onInputChange('frequency_penalty', value)}
+ className="mt-2"
+ disabled={!parameterEnabled.frequency_penalty}
+ />
+
+
+ {/* Presence Penalty */}
+
+
+
+
+ Frequency Penalty
+
+
+ {inputs.frequency_penalty}
+
+
+ :
+
+ 存在惩罚，鼓励讨论新话题
+
+ onInputChange('presence_penalty', value)}
+ className="mt-2"
+ disabled={!parameterEnabled.presence_penalty}
+ />
+
+
+ {/* MaxTokens */}
+
+
+
+
+ Presence Penalty
+
+
+ {inputs.presence_penalty}
+
+
+ :
+
+
+ {/* Seed */}
+
+
+ onInputChange('max_tokens', value)}
+ className="!rounded-lg"
+ disabled={!parameterEnabled.max_tokens}
+ />
+
+
+ Max Tokens
+
+
+ :
+
+
+ );
+};
+
+export default ParameterControl;
\ No newline at end of file
diff --git a/web/src/components/playground/SettingsPanel.js b/web/src/components/playground/SettingsPanel.js
new file mode 100644
index 00000000..150f9836
--- /dev/null
+++ b/web/src/components/playground/SettingsPanel.js
@@ -0,0 +1,195 @@
+import React from 'react';
+import {
+ Card,
+ Select,
+ TextArea,
+ Typography,
+ Button,
+ Switch,
+ Divider,
+} from '@douyinfe/semi-ui';
+import {
+ Sparkles,
+ Users,
+ Type,
+ ToggleLeft,
+ X,
+} from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { renderGroupOption } from '../../helpers/render.js';
+import ParameterControl from './ParameterControl';
+import ImageUrlInput from './ImageUrlInput';
+import ConfigManager from './ConfigManager';
+
+const SettingsPanel = ({
+ inputs,
+ parameterEnabled,
+ models,
+ groups,
+ systemPrompt,
+ styleState,
+ showDebugPanel,
+ onInputChange,
+ onParameterToggle,
+ onSystemPromptChange,
+ onCloseSettings,
+ onConfigImport,
+ onConfigReset,
+}) => {
+ const { t } = useTranslation();
+
+ const currentConfig = {
+ inputs,
+ parameterEnabled,
+ systemPrompt,
+ showDebugPanel,
+ };
+
+ return (
+
+
+ onInputChange('seed', value === '' ? null : value)}
+ className="!rounded-lg"
+ disabled={!parameterEnabled.seed}
+ />
+
+
+ Seed
+
+
+ (可选，用于复现结果)
+
+
+ :
+ {/* 移动端显示配置管理下拉菜单和关闭按钮 */}
+
+ )}
+
+
+ {/* 分组选择 */}
+ onInputChange('imageUrls', urls)}
+ />
+
+ {/* 参数控制组件 */}
+
+
+ {/* 桌面端的配置管理放在底部 */}
+ {!styleState.isMobile && (
+
+
+
+ {/* 模型选择 */}
+
+
+ {t('分组')}
+
+
+
+
+
+ {/* 图片URL输入 */}
+
+
+ {t('模型')}
+
+
+
+
+
+ {/* System Prompt */}
+
+ onInputChange('stream', checked)}
+ checkedText="开"
+ uncheckedText="关"
+ size="small"
+ />
+
+
+
+ 流式输出
+
+
+
+
+
+
+ System Prompt
+
+
+
+
+
+ )}
+