refactor: adjust playground pages dir
This commit is contained in:
jialin
@@ -0,0 +1,286 @@
|
||||
import { setRouteCache } from '@/atoms/route-cache';
|
||||
import AlertInfo from '@/components/alert-info';
|
||||
import IconFont from '@/components/icon-font';
|
||||
import routeCachekey from '@/config/route-cachekey';
|
||||
import ThumbImg from '@/pages/playground/components/thumb-img';
|
||||
import { generateRandomNumber } from '@/utils';
|
||||
import { FileImageOutlined } from '@ant-design/icons';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import { Button, Tooltip } from 'antd';
|
||||
import _ from 'lodash';
|
||||
import 'overlayscrollbars/overlayscrollbars.css';
|
||||
import React, {
|
||||
forwardRef,
|
||||
useCallback,
|
||||
useImperativeHandle,
|
||||
useMemo,
|
||||
useRef,
|
||||
useState
|
||||
} from 'react';
|
||||
import { CREAT_IMAGE_API } from '../apis';
|
||||
import DynamicParams from '../components/dynamic-params';
|
||||
import MessageInput from '../components/message-input';
|
||||
import RightContainer from '../components/right-container';
|
||||
import ViewCommonCode from '../components/view-common-code';
|
||||
import { useInitImageMeta } from '../hooks/use-init-meta';
|
||||
import useTextImage from '../hooks/use-text-image';
|
||||
import '../style/ground-llm.less';
|
||||
import '../style/system-message-wrap.less';
|
||||
import { generateImageCode, generateOpenaiImageCode } from '../view-code/image';
|
||||
|
||||
interface MessageProps {
|
||||
modelList: Global.BaseOption<string>[];
|
||||
loaded?: boolean;
|
||||
ref?: any;
|
||||
}
|
||||
|
||||
const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
|
||||
const { modelList } = props;
|
||||
|
||||
const intl = useIntl();
|
||||
const [show, setShow] = useState(false);
|
||||
const [collapse, setCollapse] = useState(false);
|
||||
const scroller = useRef<any>(null);
|
||||
const inputRef = useRef<any>(null);
|
||||
|
||||
const {
|
||||
handleOnValuesChange,
|
||||
handleToggleParamsStyle,
|
||||
setParams,
|
||||
form,
|
||||
formFields,
|
||||
paramsConfig,
|
||||
initialValues,
|
||||
parameters,
|
||||
isOpenaiCompatible
|
||||
} = useInitImageMeta(props, {
|
||||
type: 'create'
|
||||
});
|
||||
const {
|
||||
loading,
|
||||
tokenResult,
|
||||
imageList,
|
||||
promptList,
|
||||
currentPrompt,
|
||||
setCurrentPrompt,
|
||||
handleClear,
|
||||
handleStopConversation,
|
||||
submitMessage
|
||||
} = useTextImage({
|
||||
scroller,
|
||||
chunkFields: ['stream_options', 'chunk_results'],
|
||||
API: CREAT_IMAGE_API
|
||||
});
|
||||
|
||||
useImperativeHandle(ref, () => {
|
||||
return {
|
||||
viewCode() {
|
||||
setShow(true);
|
||||
},
|
||||
setCollapse() {
|
||||
setCollapse(!collapse);
|
||||
},
|
||||
collapse: collapse
|
||||
};
|
||||
});
|
||||
|
||||
const generateNumber = (min: number, max: number) => {
|
||||
return Math.floor(Math.random() * (max - min + 1) + min);
|
||||
};
|
||||
|
||||
const handleRandomPrompt = useCallback(() => {
|
||||
const randomIndex = generateNumber(0, promptList.length - 1);
|
||||
const randomPrompt = promptList[randomIndex];
|
||||
inputRef.current?.handleInputChange({
|
||||
target: {
|
||||
value: randomPrompt
|
||||
}
|
||||
});
|
||||
}, []);
|
||||
|
||||
const finalParameters = useMemo(() => {
|
||||
if (parameters.size === 'custom') {
|
||||
return {
|
||||
..._.omit(parameters, ['width', 'height', 'preview', 'random_seed']),
|
||||
size:
|
||||
parameters.width && parameters.height
|
||||
? `${parameters.width}x${parameters.height}`
|
||||
: ''
|
||||
};
|
||||
}
|
||||
return {
|
||||
..._.omit(parameters, ['width', 'height', 'random_seed', 'preview'])
|
||||
};
|
||||
}, [parameters]);
|
||||
|
||||
const viewCodeContent = useMemo(() => {
|
||||
if (isOpenaiCompatible) {
|
||||
return generateOpenaiImageCode({
|
||||
api: CREAT_IMAGE_API,
|
||||
parameters: {
|
||||
...finalParameters,
|
||||
prompt: currentPrompt
|
||||
}
|
||||
});
|
||||
}
|
||||
return generateImageCode({
|
||||
api: CREAT_IMAGE_API,
|
||||
parameters: {
|
||||
...finalParameters,
|
||||
prompt: currentPrompt
|
||||
}
|
||||
});
|
||||
}, [finalParameters, isOpenaiCompatible, currentPrompt]);
|
||||
|
||||
const handleInputChange = (e: any) => {
|
||||
setCurrentPrompt(e.target.value);
|
||||
};
|
||||
|
||||
const generateParams = () => {
|
||||
const params = {
|
||||
..._.omitBy(finalParameters, (value: string) => !value),
|
||||
seed: parameters.random_seed
|
||||
? generateRandomNumber()
|
||||
: parameters.seed || null,
|
||||
stream: false,
|
||||
prompt: currentPrompt
|
||||
};
|
||||
return params;
|
||||
};
|
||||
|
||||
const handleSendMessage = async () => {
|
||||
try {
|
||||
await form.current?.form?.validateFields();
|
||||
if (!parameters.model) return;
|
||||
const params = generateParams();
|
||||
console.log('generateParams:', params);
|
||||
setParams({
|
||||
...parameters,
|
||||
seed: params.seed
|
||||
});
|
||||
|
||||
form.current?.form?.setFieldValue('seed', params.seed);
|
||||
console.log('params:', params, parameters);
|
||||
setRouteCache(routeCachekey['/playground/text-to-image'], true);
|
||||
await submitMessage(params);
|
||||
} catch (error) {
|
||||
// console.log('error:', error);
|
||||
} finally {
|
||||
console.log('finally---------');
|
||||
setRouteCache(routeCachekey['/playground/text-to-image'], false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCloseViewCode = useCallback(() => {
|
||||
setShow(false);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="ground-left-wrapper">
|
||||
<div className="ground-left">
|
||||
<div
|
||||
className="message-list-wrap"
|
||||
ref={scroller}
|
||||
style={{ paddingBottom: 16 }}
|
||||
>
|
||||
<>
|
||||
<div className="content" style={{ height: '100%' }}>
|
||||
<ThumbImg
|
||||
style={{
|
||||
padding: 0,
|
||||
height: '100%',
|
||||
justifyContent: 'center',
|
||||
flexDirection: 'column',
|
||||
flexWrap: 'unset',
|
||||
alignItems: 'center'
|
||||
}}
|
||||
autoBgColor={false}
|
||||
editable={false}
|
||||
dataList={imageList}
|
||||
responseable={true}
|
||||
gutter={[8, 16]}
|
||||
autoSize={true}
|
||||
></ThumbImg>
|
||||
{!imageList.length && (
|
||||
<div className="flex-column font-size-14 flex-center gap-20 justify-center hold-wrapper">
|
||||
<span>
|
||||
<FileImageOutlined className="font-size-32 text-secondary" />
|
||||
</span>
|
||||
<span>
|
||||
{intl.formatMessage({
|
||||
id: 'playground.params.empty.tips'
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
</div>
|
||||
{tokenResult && (
|
||||
<div style={{ height: 40 }}>
|
||||
<AlertInfo
|
||||
type="danger"
|
||||
message={tokenResult?.errorMessage}
|
||||
></AlertInfo>
|
||||
</div>
|
||||
)}
|
||||
<div className="ground-left-footer">
|
||||
<MessageInput
|
||||
ref={inputRef}
|
||||
placeholer={intl.formatMessage({
|
||||
id: 'playground.input.prompt.holder'
|
||||
})}
|
||||
actions={[]}
|
||||
defaultSize={{
|
||||
minRows: 5,
|
||||
maxRows: 5
|
||||
}}
|
||||
title={intl.formatMessage({ id: 'playground.image.prompt' })}
|
||||
loading={loading}
|
||||
disabled={!parameters.model}
|
||||
isEmpty={!imageList.length}
|
||||
handleSubmit={handleSendMessage}
|
||||
handleAbortFetch={handleStopConversation}
|
||||
onInputChange={handleInputChange}
|
||||
shouldResetMessage={false}
|
||||
clearAll={handleClear}
|
||||
tools={
|
||||
<>
|
||||
<Tooltip
|
||||
title={intl.formatMessage({
|
||||
id: 'playground.image.prompt.random'
|
||||
})}
|
||||
>
|
||||
<Button
|
||||
onClick={handleRandomPrompt}
|
||||
size="middle"
|
||||
type="text"
|
||||
icon={<IconFont type="icon-random"></IconFont>}
|
||||
></Button>
|
||||
</Tooltip>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<RightContainer collapsed={collapse}>
|
||||
<DynamicParams
|
||||
ref={form}
|
||||
formFields={formFields}
|
||||
onValuesChange={handleOnValuesChange}
|
||||
paramsConfig={paramsConfig}
|
||||
initialValues={initialValues}
|
||||
modelList={modelList}
|
||||
/>
|
||||
</RightContainer>
|
||||
<ViewCommonCode
|
||||
open={show}
|
||||
viewCodeContent={viewCodeContent}
|
||||
onCancel={handleCloseViewCode}
|
||||
title={intl.formatMessage({ id: 'playground.viewcode' })}
|
||||
></ViewCommonCode>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
export default GroundImages;
|
||||
@@ -0,0 +1,551 @@
|
||||
import { setRouteCache } from '@/atoms/route-cache';
|
||||
import AlertInfo from '@/components/alert-info';
|
||||
import SingleImage from '@/components/auto-image/single-image';
|
||||
import IconFont from '@/components/icon-font';
|
||||
import CanvasImageEditor from '@/components/image-editor';
|
||||
import { processImage } from '@/components/image-editor/extract-image-colors';
|
||||
import routeCachekey from '@/config/route-cachekey';
|
||||
import UploadImg from '@/pages/playground/components/upload-img';
|
||||
import { base64ToFile, generateRandomNumber } from '@/utils';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import { Divider } from 'antd';
|
||||
import _ from 'lodash';
|
||||
import 'overlayscrollbars/overlayscrollbars.css';
|
||||
import React, {
|
||||
forwardRef,
|
||||
useCallback,
|
||||
useEffect,
|
||||
useImperativeHandle,
|
||||
useMemo,
|
||||
useRef,
|
||||
useState
|
||||
} from 'react';
|
||||
import { EDIT_IMAGE_API } from '../apis';
|
||||
import DynamicParams from '../components/dynamic-params';
|
||||
import MessageInput from '../components/message-input';
|
||||
import RightContainer from '../components/right-container';
|
||||
import ViewCommonCode from '../components/view-common-code';
|
||||
import { EDIT_IMAGE_ACCEPT, scaleImageSize } from '../config';
|
||||
import { useInitImageMeta } from '../hooks/use-init-meta';
|
||||
import useTextImage from '../hooks/use-text-image';
|
||||
import '../style/ground-llm.less';
|
||||
import '../style/system-message-wrap.less';
|
||||
import { generateImageCode, generateOpenaiImageCode } from '../view-code/image';
|
||||
|
||||
interface MessageProps {
|
||||
modelList: Global.BaseOption<string>[];
|
||||
loaded?: boolean;
|
||||
ref?: any;
|
||||
}
|
||||
|
||||
const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
|
||||
const { modelList } = props;
|
||||
|
||||
const intl = useIntl();
|
||||
const [show, setShow] = useState(false);
|
||||
const [collapse, setCollapse] = useState(false);
|
||||
const scroller = useRef<any>(null);
|
||||
const inputRef = useRef<any>(null);
|
||||
const [image, setImage] = useState<string>('');
|
||||
const [mask, setMask] = useState<string | null>(null);
|
||||
const [uploadList, setUploadList] = useState<any[]>([]);
|
||||
const [maskUpload, setMaskUpload] = useState<any[]>([]);
|
||||
const [imageStatus, setImageStatus] = useState<{
|
||||
isOriginal: boolean;
|
||||
isResetNeeded: boolean;
|
||||
width: number;
|
||||
height: number;
|
||||
}>({
|
||||
isOriginal: false,
|
||||
isResetNeeded: false,
|
||||
width: 512,
|
||||
height: 512
|
||||
});
|
||||
const doneImage = useRef<boolean>(false);
|
||||
const [activeImgUid, setActiveImgUid] = useState<number>(0);
|
||||
const imageEditorRef = useRef<any>(null);
|
||||
|
||||
const {
|
||||
handleOnValuesChange,
|
||||
handleToggleParamsStyle,
|
||||
setParams,
|
||||
updateCacheFormData,
|
||||
setInitialValues,
|
||||
updateParamsConfig,
|
||||
setParamsConfig,
|
||||
form,
|
||||
modelMeta,
|
||||
formFields,
|
||||
paramsConfig,
|
||||
initialValues,
|
||||
parameters,
|
||||
isOpenaiCompatible
|
||||
} = useInitImageMeta(props, {
|
||||
type: 'edit'
|
||||
});
|
||||
const {
|
||||
loading,
|
||||
tokenResult,
|
||||
imageList,
|
||||
currentPrompt,
|
||||
setImageList,
|
||||
setCurrentPrompt,
|
||||
handleStopConversation,
|
||||
submitMessage
|
||||
} = useTextImage({
|
||||
scroller,
|
||||
chunkFields: ['stream_options_chunk_result'],
|
||||
API: EDIT_IMAGE_API
|
||||
});
|
||||
|
||||
useImperativeHandle(ref, () => {
|
||||
return {
|
||||
viewCode() {
|
||||
setShow(true);
|
||||
},
|
||||
setCollapse() {
|
||||
setCollapse(!collapse);
|
||||
},
|
||||
collapse: collapse
|
||||
};
|
||||
});
|
||||
|
||||
const finalParameters = useMemo(() => {
|
||||
if (parameters.size === 'custom') {
|
||||
return {
|
||||
..._.omit(parameters, ['width', 'height', 'preview', 'random_seed']),
|
||||
image: null,
|
||||
mask: null,
|
||||
size:
|
||||
parameters.width && parameters.height
|
||||
? `${parameters.width}x${parameters.height}`
|
||||
: ''
|
||||
};
|
||||
}
|
||||
return {
|
||||
image: null,
|
||||
mask: null,
|
||||
..._.omit(parameters, ['width', 'height', 'random_seed', 'preview'])
|
||||
};
|
||||
}, [parameters]);
|
||||
|
||||
const viewCodeContent = useMemo(() => {
|
||||
if (isOpenaiCompatible) {
|
||||
return generateOpenaiImageCode({
|
||||
api: EDIT_IMAGE_API,
|
||||
edit: true,
|
||||
isFormdata: true,
|
||||
parameters: {
|
||||
...finalParameters,
|
||||
prompt: currentPrompt
|
||||
}
|
||||
});
|
||||
}
|
||||
return generateImageCode({
|
||||
api: EDIT_IMAGE_API,
|
||||
isFormdata: true,
|
||||
edit: true,
|
||||
parameters: {
|
||||
...finalParameters,
|
||||
prompt: currentPrompt
|
||||
}
|
||||
});
|
||||
}, [finalParameters, currentPrompt, isOpenaiCompatible]);
|
||||
|
||||
const handleClear = () => {
|
||||
setCurrentPrompt('');
|
||||
};
|
||||
|
||||
const handleInputChange = (e: any) => {
|
||||
setCurrentPrompt(e.target.value);
|
||||
};
|
||||
|
||||
const generateParams = () => {
|
||||
const params = {
|
||||
..._.omitBy(finalParameters, (value: string) => !value),
|
||||
seed: parameters.random_seed
|
||||
? generateRandomNumber()
|
||||
: parameters.seed || null,
|
||||
stream: false,
|
||||
prompt: currentPrompt
|
||||
};
|
||||
return params;
|
||||
};
|
||||
|
||||
const handleSendMessage = async () => {
|
||||
try {
|
||||
await form.current?.form?.validateFields();
|
||||
if (!parameters.model) return;
|
||||
const params = generateParams();
|
||||
setParams({
|
||||
...parameters,
|
||||
seed: params.seed
|
||||
});
|
||||
|
||||
form.current?.form?.setFieldValue('seed', params.seed);
|
||||
|
||||
setRouteCache(routeCachekey['/playground/text-to-image'], true);
|
||||
|
||||
await submitMessage({
|
||||
...params,
|
||||
image: base64ToFile(_.get(uploadList, '0.dataUrl'), 'image'),
|
||||
mask: mask ? base64ToFile(mask, 'mask') : null
|
||||
});
|
||||
} catch (error) {
|
||||
// console.log('error:', error);
|
||||
} finally {
|
||||
console.log('finally---------');
|
||||
setRouteCache(routeCachekey['/playground/text-to-image'], false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCloseViewCode = () => {
|
||||
setShow(false);
|
||||
};
|
||||
|
||||
const handleOnScaleImageSize = useCallback(
|
||||
(data: { rawWidth: number; rawHeight: number }) => {
|
||||
let { width, height } = scaleImageSize({
|
||||
width: data.rawWidth,
|
||||
height: data.rawHeight
|
||||
});
|
||||
const { max_width: maxWidth, max_height: maxHeight } = modelMeta;
|
||||
|
||||
// update width, height
|
||||
if (maxWidth) {
|
||||
width = Math.max(Math.min(width, maxWidth), 512);
|
||||
}
|
||||
|
||||
if (maxHeight) {
|
||||
height = Math.max(Math.min(height, maxHeight), 512);
|
||||
}
|
||||
|
||||
const newParamsConfig = updateParamsConfig({
|
||||
size: 'custom',
|
||||
isOpenaiCompatible
|
||||
});
|
||||
setParamsConfig(newParamsConfig);
|
||||
const newParameters = {
|
||||
...parameters,
|
||||
size: 'custom',
|
||||
width: width || 512,
|
||||
height: height || 512
|
||||
};
|
||||
setParams(newParameters);
|
||||
updateCacheFormData({
|
||||
size: 'custom',
|
||||
width: width || 512,
|
||||
height: height || 512
|
||||
});
|
||||
setInitialValues(newParameters);
|
||||
},
|
||||
[parameters, modelMeta, isOpenaiCompatible]
|
||||
);
|
||||
|
||||
const handleUpdateImageList = useCallback(
|
||||
(base64List: any[]) => {
|
||||
const currentImg = _.get(base64List, '[0]', {});
|
||||
const img = _.get(currentImg, 'dataUrl', '');
|
||||
handleOnScaleImageSize(currentImg);
|
||||
setUploadList(base64List);
|
||||
setImage(img);
|
||||
setActiveImgUid(_.get(base64List, '[0].uid', ''));
|
||||
setImageStatus({
|
||||
isOriginal: true,
|
||||
isResetNeeded: true,
|
||||
width: _.get(currentImg, 'width', 512),
|
||||
height: _.get(currentImg, 'height', 512)
|
||||
});
|
||||
setImageList([]);
|
||||
},
|
||||
[handleOnScaleImageSize]
|
||||
);
|
||||
|
||||
const handleUpdateMaskList = useCallback(async (base64List: any[]) => {
|
||||
const mask = _.get(base64List, '[0].dataUrl', '');
|
||||
const maskColors = await processImage(mask);
|
||||
console.log('maskColors:', maskColors);
|
||||
imageEditorRef.current?.loadMaskPixs(maskColors || []);
|
||||
}, []);
|
||||
|
||||
const handleClearUploadMask = useCallback(() => {
|
||||
setMaskUpload([]);
|
||||
setMask(null);
|
||||
imageEditorRef.current?.clearMask();
|
||||
}, []);
|
||||
|
||||
const handleOnSave = useCallback(
|
||||
(data: { img: string; mask: string | null }) => {
|
||||
setImageStatus((pre) => {
|
||||
return {
|
||||
...pre,
|
||||
isResetNeeded: false
|
||||
};
|
||||
});
|
||||
setMask(data.mask || maskUpload[0]?.dataUrl || null);
|
||||
setImage(data.img);
|
||||
},
|
||||
[]
|
||||
);
|
||||
|
||||
const renderImageEditor = useMemo(() => {
|
||||
if (image) {
|
||||
return (
|
||||
<CanvasImageEditor
|
||||
ref={imageEditorRef}
|
||||
imguid={activeImgUid}
|
||||
imageStatus={imageStatus}
|
||||
imageSrc={image}
|
||||
loading={loading}
|
||||
disabled={loading || !imageStatus.isOriginal}
|
||||
onSave={handleOnSave}
|
||||
clearUploadMask={handleClearUploadMask}
|
||||
handleUpdateImageList={handleUpdateImageList}
|
||||
handleUpdateMaskList={handleUpdateMaskList}
|
||||
maskUpload={maskUpload}
|
||||
accept={EDIT_IMAGE_ACCEPT}
|
||||
></CanvasImageEditor>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<UploadImg
|
||||
accept={EDIT_IMAGE_ACCEPT}
|
||||
drag={true}
|
||||
multiple={false}
|
||||
handleUpdateImgList={handleUpdateImageList}
|
||||
>
|
||||
<div
|
||||
className="flex-column flex-center gap-10 justify-center"
|
||||
style={{ width: 155, height: 155 }}
|
||||
>
|
||||
<IconFont
|
||||
type="icon-upload_image"
|
||||
className="font-size-24"
|
||||
></IconFont>
|
||||
<span>
|
||||
{intl.formatMessage({ id: 'playground.image.edit.tips' })}
|
||||
</span>
|
||||
</div>
|
||||
</UploadImg>
|
||||
</>
|
||||
);
|
||||
}, [
|
||||
intl,
|
||||
image,
|
||||
loading,
|
||||
maskUpload,
|
||||
imageStatus,
|
||||
handleOnSave,
|
||||
handleUpdateImageList
|
||||
]);
|
||||
|
||||
const handleOnImgClick = useCallback(
|
||||
(item: any, isOrigin: boolean) => {
|
||||
if (item.progress < 100 && !isOrigin) {
|
||||
return;
|
||||
}
|
||||
if (item.uid === activeImgUid) {
|
||||
return;
|
||||
}
|
||||
setActiveImgUid(item.uid);
|
||||
setImage(item.dataUrl);
|
||||
setImageStatus({
|
||||
isOriginal: isOrigin,
|
||||
isResetNeeded: false,
|
||||
width: item.width,
|
||||
height: item.height
|
||||
});
|
||||
},
|
||||
[activeImgUid]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (imageList.length > 0) {
|
||||
const doneImg = imageList.find((item) => item.progress === 100);
|
||||
if (doneImg && !doneImage.current) {
|
||||
doneImage.current = true;
|
||||
handleOnImgClick(doneImg, false);
|
||||
}
|
||||
}
|
||||
}, [imageList, handleOnImgClick]);
|
||||
|
||||
const renderOriginImage = useMemo(() => {
|
||||
if (!uploadList.length) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<SingleImage
|
||||
{...uploadList[0]}
|
||||
height={125}
|
||||
maxHeight={125}
|
||||
preview={false}
|
||||
loading={false}
|
||||
autoSize={false}
|
||||
editable={false}
|
||||
autoBgColor={false}
|
||||
onClick={() => handleOnImgClick(uploadList[0], true)}
|
||||
label={
|
||||
<span>{intl.formatMessage({ id: 'playground.image.origin' })}</span>
|
||||
}
|
||||
></SingleImage>
|
||||
</>
|
||||
);
|
||||
}, [uploadList, intl, handleOnImgClick]);
|
||||
|
||||
const renderMaskImage = useMemo(() => {
|
||||
if (!maskUpload.length) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<SingleImage
|
||||
{...maskUpload[0]}
|
||||
height={125}
|
||||
maxHeight={125}
|
||||
preview={false}
|
||||
loading={false}
|
||||
autoSize={false}
|
||||
editable={true}
|
||||
autoBgColor={false}
|
||||
onDelete={() => handleClearUploadMask()}
|
||||
label={
|
||||
<span>{intl.formatMessage({ id: 'playground.image.mask' })}</span>
|
||||
}
|
||||
></SingleImage>
|
||||
</>
|
||||
);
|
||||
}, [maskUpload, intl]);
|
||||
|
||||
return (
|
||||
<div className="ground-left-wrapper">
|
||||
<div className="ground-left">
|
||||
<div className="message-list-wrap" style={{ paddingBottom: 16 }}>
|
||||
<>
|
||||
<div className="content" style={{ height: '100%' }}>
|
||||
{
|
||||
<div className="flex-column font-size-14 flex-center gap-20 justify-center hold-wrapper">
|
||||
{renderImageEditor}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</>
|
||||
</div>
|
||||
<div className="ground-left-footer" style={{ padding: 10 }}>
|
||||
{tokenResult && (
|
||||
<div style={{ height: 40 }}>
|
||||
<AlertInfo
|
||||
type="danger"
|
||||
message={tokenResult?.errorMessage}
|
||||
></AlertInfo>
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center'
|
||||
}}
|
||||
>
|
||||
<div className="m-r-10">{renderMaskImage}</div>
|
||||
{renderOriginImage}
|
||||
{imageList.length > 0 && (
|
||||
<>
|
||||
<Divider
|
||||
orientation="vertical"
|
||||
style={{
|
||||
margin: '0 30px',
|
||||
height: 80
|
||||
}}
|
||||
></Divider>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
gap: 10
|
||||
}}
|
||||
>
|
||||
{_.map(imageList, (item: any, index: number) => {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
height: 125,
|
||||
width: 125,
|
||||
maxHeight: 125
|
||||
}}
|
||||
key={item.uid}
|
||||
>
|
||||
<SingleImage
|
||||
{...item}
|
||||
height={125}
|
||||
width={125}
|
||||
maxHeight={125}
|
||||
preview={item.preview}
|
||||
loading={item.loading}
|
||||
autoSize={false}
|
||||
editable={false}
|
||||
autoBgColor={false}
|
||||
onClick={() => handleOnImgClick(item, false)}
|
||||
></SingleImage>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<RightContainer
|
||||
collapsed={collapse}
|
||||
footer={
|
||||
<div style={{ width: 389 }}>
|
||||
<MessageInput
|
||||
actions={[]}
|
||||
defaultSize={{
|
||||
minRows: 5,
|
||||
maxRows: 5
|
||||
}}
|
||||
ref={inputRef}
|
||||
placeholer={intl.formatMessage({
|
||||
id: 'playground.input.prompt.holder'
|
||||
})}
|
||||
title={
|
||||
<span className="font-600">
|
||||
{intl.formatMessage({ id: 'playground.image.prompt' })}
|
||||
</span>
|
||||
}
|
||||
loading={loading}
|
||||
disabled={!parameters.model}
|
||||
isEmpty={!imageList.length}
|
||||
handleSubmit={handleSendMessage}
|
||||
handleAbortFetch={handleStopConversation}
|
||||
onInputChange={handleInputChange}
|
||||
shouldResetMessage={false}
|
||||
clearAll={handleClear}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<DynamicParams
|
||||
ref={form}
|
||||
formFields={formFields}
|
||||
onValuesChange={handleOnValuesChange}
|
||||
paramsConfig={paramsConfig}
|
||||
initialValues={initialValues}
|
||||
modelList={modelList}
|
||||
/>
|
||||
</RightContainer>
|
||||
<ViewCommonCode
|
||||
open={show}
|
||||
viewCodeContent={viewCodeContent}
|
||||
onCancel={handleCloseViewCode}
|
||||
title={intl.formatMessage({ id: 'playground.viewcode' })}
|
||||
></ViewCommonCode>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
export default GroundImages;
|
||||
@@ -0,0 +1,185 @@
|
||||
import breakpoints from '@/config/breakpoints';
|
||||
import HotKeys from '@/config/hotkeys';
|
||||
import useWindowResize from '@/hooks/use-window-resize';
|
||||
import { ExtraContent } from '@/layouts/extraRender';
|
||||
import { modelCategoriesMap } from '@/pages/llmodels/config';
|
||||
import { DiffOutlined, HighlightOutlined } from '@ant-design/icons';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import { useMemoizedFn } from 'ahooks';
|
||||
import { Divider, Segmented, Tabs, TabsProps } from 'antd';
|
||||
import classNames from 'classnames';
|
||||
import _ from 'lodash';
|
||||
import { useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { useHotkeys } from 'react-hotkeys-hook';
|
||||
import { PageContainerInner } from '../../_components/page-box';
|
||||
import { queryModelsList } from '../apis';
|
||||
import ViewCodeButtons from '../components/view-code-buttons';
|
||||
import '../style/play-ground.less';
|
||||
import ImageCreate from './create';
|
||||
import ImageEdit from './edit';
|
||||
|
||||
const TabsValueMap = {
|
||||
Tab1: 'generate',
|
||||
Tab2: 'edit'
|
||||
};
|
||||
|
||||
const TextToImages: React.FC = () => {
|
||||
const intl = useIntl();
|
||||
const { size } = useWindowResize();
|
||||
const [activeKey, setActiveKey] = useState(TabsValueMap.Tab1);
|
||||
const groundTabRef1 = useRef<any>(null);
|
||||
const groundTabRef2 = useRef<any>(null);
|
||||
const [modelList, setModelList] = useState<Global.BaseOption<string>[]>([]);
|
||||
|
||||
const optionsList = useMemo(() => {
|
||||
return [
|
||||
{
|
||||
label: intl.formatMessage({ id: 'playground.image.generate' }),
|
||||
value: TabsValueMap.Tab1,
|
||||
icon: <DiffOutlined />
|
||||
},
|
||||
{
|
||||
label: intl.formatMessage({ id: 'playground.image.edit' }),
|
||||
value: TabsValueMap.Tab2,
|
||||
icon: <HighlightOutlined />
|
||||
}
|
||||
];
|
||||
}, [intl]);
|
||||
|
||||
const handleViewCode = useMemoizedFn(() => {
|
||||
if (activeKey === TabsValueMap.Tab1) {
|
||||
groundTabRef1.current?.viewCode?.();
|
||||
} else if (activeKey === TabsValueMap.Tab2) {
|
||||
groundTabRef2.current?.viewCode?.();
|
||||
}
|
||||
});
|
||||
|
||||
const handleToggleCollapse = useMemoizedFn(() => {
|
||||
if (activeKey === TabsValueMap.Tab1) {
|
||||
groundTabRef1.current?.setCollapse?.();
|
||||
return;
|
||||
}
|
||||
groundTabRef2.current?.setCollapse?.();
|
||||
});
|
||||
|
||||
const items: TabsProps['items'] = useMemo(() => {
|
||||
return [
|
||||
{
|
||||
key: TabsValueMap.Tab1,
|
||||
label: 'Generate',
|
||||
children: (
|
||||
<ImageCreate ref={groundTabRef1} modelList={modelList}></ImageCreate>
|
||||
)
|
||||
},
|
||||
{
|
||||
key: TabsValueMap.Tab2,
|
||||
label: 'Edit',
|
||||
children: <ImageEdit modelList={modelList} ref={groundTabRef2} />
|
||||
}
|
||||
];
|
||||
}, [modelList]);
|
||||
|
||||
useEffect(() => {
|
||||
if (size.width < breakpoints.lg) {
|
||||
if (!groundTabRef1.current?.collapse) {
|
||||
groundTabRef1.current?.setCollapse?.();
|
||||
}
|
||||
if (!groundTabRef2.current?.collapse) {
|
||||
groundTabRef2.current?.setCollapse?.();
|
||||
}
|
||||
}
|
||||
}, [size.width]);
|
||||
|
||||
useEffect(() => {
|
||||
const getModelList = async () => {
|
||||
try {
|
||||
const params = {
|
||||
categories: modelCategoriesMap.image,
|
||||
with_meta: true
|
||||
};
|
||||
const res = await queryModelsList(params);
|
||||
const list = _.map(res.data || [], (item: any) => {
|
||||
return {
|
||||
value: item.id,
|
||||
label: item.id,
|
||||
meta: item.meta
|
||||
};
|
||||
}) as Global.BaseOption<string>[];
|
||||
return list;
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
return [];
|
||||
}
|
||||
};
|
||||
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
const modelist = await getModelList();
|
||||
setModelList(modelist);
|
||||
} catch (error) {
|
||||
// error
|
||||
}
|
||||
};
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
const header = useMemo(() => {
|
||||
return {
|
||||
title: (
|
||||
<div className="flex items-center">
|
||||
<span className="font-600">
|
||||
{intl.formatMessage({ id: 'menu.playground.text2images' })}
|
||||
</span>
|
||||
{
|
||||
<Segmented
|
||||
options={optionsList}
|
||||
size="middle"
|
||||
className="m-l-24 font-600"
|
||||
value={activeKey}
|
||||
onChange={(key) => setActiveKey(key)}
|
||||
></Segmented>
|
||||
}
|
||||
</div>
|
||||
)
|
||||
};
|
||||
}, [activeKey, optionsList, intl]);
|
||||
|
||||
useHotkeys(
|
||||
HotKeys.RIGHT.join(','),
|
||||
() => {
|
||||
groundTabRef1.current?.setCollapse?.();
|
||||
},
|
||||
{
|
||||
preventDefault: true
|
||||
}
|
||||
);
|
||||
|
||||
return (
|
||||
<PageContainerInner
|
||||
header={header}
|
||||
extra={[
|
||||
<ViewCodeButtons
|
||||
handleViewCode={handleViewCode}
|
||||
handleToggleCollapse={handleToggleCollapse}
|
||||
activeKey={activeKey}
|
||||
key="view-code-buttons"
|
||||
></ViewCodeButtons>,
|
||||
<Divider
|
||||
key="divider"
|
||||
orientation="vertical"
|
||||
style={{ height: 16, marginInline: 16 }}
|
||||
/>,
|
||||
<ExtraContent key="extra-content" />
|
||||
]}
|
||||
className={classNames('playground-container chat')}
|
||||
>
|
||||
<div className="play-ground">
|
||||
<div className="chat">
|
||||
<Tabs items={items} activeKey={activeKey}></Tabs>
|
||||
</div>
|
||||
</div>
|
||||
</PageContainerInner>
|
||||
);
|
||||
};
|
||||
|
||||
export default TextToImages;
|
||||
Reference in New Issue
Block a user