@@ -51,6 +92,7 @@ const MessageContent: React.FC<{
autoSize={true}
variant="filled"
onChange={handleMessageChange}
+ onBlur={handleBlur}
>
@@ -66,4 +108,4 @@ const MessageContent: React.FC<{
);
};
-export default MessageContent;
+export default memo(MessageItem);
diff --git a/src/pages/playground/components/params-settings.tsx b/src/pages/playground/components/params-settings.tsx
index b6659350..c9c28528 100644
--- a/src/pages/playground/components/params-settings.tsx
+++ b/src/pages/playground/components/params-settings.tsx
@@ -2,39 +2,85 @@ import FieldWrapper from '@/components/seal-form/field-wrapper';
import SealInput from '@/components/seal-form/seal-input';
import SealSelect from '@/components/seal-form/seal-select';
import { INPUT_WIDTH } from '@/constants';
+import { queryModelsList } from '@/pages/llmodels/apis';
import { Form, Slider } from 'antd';
-import { useState } from 'react';
+import _ from 'lodash';
+import { useEffect, useState } from 'react';
+
+type ParamsSettingsFormProps = {
+ seed?: number;
+ stop?: number;
+ temperature?: number;
+ top_p?: number;
+ model?: string;
+ max_tokens?: number;
+};
type ParamsSettingsProps = {
- seed?: number;
- stopSequence?: number;
- temperature?: number;
- topP?: number;
- model?: string;
- maxTokens?: number;
+ onClose?: () => void;
+ selectedModel?: string;
+ params?: ParamsSettingsFormProps;
+ setParams: (params: any) => void;
};
-const dataList = [
- { value: 'llama3:latest', label: 'llama3:latest' },
- { value: 'wangfuyun/AnimateLCM', label: 'wangfuyun/AnimateLCM' },
- { value: 'Revanthraja/Text_to_Vision', label: 'Revanthraja/Text_to_Vision' }
-];
+// const dataList = [
+// { value: 'llama3:latest', label: 'llama3:latest' },
+// { value: 'wangfuyun/AnimateLCM', label: 'wangfuyun/AnimateLCM' },
+// { value: 'Revanthraja/Text_to_Vision', label: 'Revanthraja/Text_to_Vision' }
+// ];
-const ParamsSettings: React.FC<{ onClose: () => void }> = ({ onClose }) => {
- const [ModelList, setModelList] = useState(dataList);
+const ParamsSettings: React.FC
= ({
+ onClose,
+ selectedModel,
+ setParams
+}) => {
+ const [ModelList, setModelList] = useState([]);
const initialValues = {
- seed: 1,
- stopSequence: 1,
+ seed: null,
+ stop: null,
temperature: 1,
- topK: 1,
- topP: 1,
- repeatPenalty: 1,
- repeatLastN: 1,
- tfsZ: 1,
- contextLength: 256,
- maxTokens: 256
+ top_p: 1,
+ max_tokens: 1024
};
const [form] = Form.useForm();
+ useEffect(() => {
+ const getModelList = async () => {
+ try {
+ const params = {
+ page: 1,
+ perPage: 100
+ };
+ const res = await queryModelsList(params);
+ const list = _.map(res.items || [], (item: any) => {
+ return {
+ value: item.name,
+ label: item.name
+ };
+ });
+ setModelList(list);
+ form.setFieldsValue({
+ model: selectedModel || _.get(list, '[0].value'),
+ ...initialValues
+ });
+ setParams({
+ model: selectedModel || _.get(list, '[0].value'),
+ ...initialValues
+ });
+ } catch (error) {
+ setModelList([]);
+ form.setFieldsValue({
+ model: selectedModel || '',
+ ...initialValues
+ });
+ setParams({
+ model: selectedModel || '',
+ ...initialValues
+ });
+ }
+ };
+ getModelList();
+ }, []);
+
const handleOnFinish = (values: any) => {
console.log('handleOnFinish', values);
};
@@ -45,61 +91,79 @@ const ParamsSettings: React.FC<{ onClose: () => void }> = ({ onClose }) => {
const handleCancel = () => {
form.resetFields();
- onClose();
+ onClose?.();
+ };
+
+ const handleValuesChange = (changedValues: any, allValues: any) => {
+ console.log('handleValuesChange', changedValues, allValues);
+ setParams?.(allValues);
};
return (