pucmnw7fs
/
gpustack
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

chore: image edit init params

Browse Source
main
jialin 11 months ago
parent 911b4b9138
commit 69feb6a4f1
5 changed files with 170 additions and 586 deletions
Show Stats Download Patch File Download Diff File

2
src/pages/playground/components/dynamic-params.tsx
Unescape View File

@ -22,7 +22,7 @@ type ParamsSettingsProps = {
onValuesChange?: (changeValues: any, value: Record<string, any>) => void;
onModelChange?: (model: string) => void;
paramsConfig?: ParamsSchema[];
initialValues?: Record<string, any>;
initialValues?: Record<string, any>; // for initial values when switch model
extra?: React.ReactNode;
};

54
src/pages/playground/components/ground-images.tsx
Unescape View File

@ -3,6 +3,7 @@ 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, SwapOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import { Button, Tooltip } from 'antd';
@ -19,7 +20,6 @@ import React, {
useState
} from 'react';
import { CREAT_IMAGE_API } from '../apis';
import { MessageItem } from '../config/types';
import { useInitImageMeta } from '../hooks/use-init-meta';
import useTextImage from '../hooks/use-text-image';
import '../style/ground-left.less';
@ -48,6 +48,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
const {
handleOnValuesChange,
handleToggleParamsStyle,
setParams,
form,
paramsConfig,
initialValues,
@ -66,7 +67,9 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
submitMessage
} = useTextImage({
scroller,
paramsRef
paramsRef,
chunkFields: ['stream_options', 'chunk_results'],
API: CREAT_IMAGE_API
});
useImperativeHandle(ref, () => {
@ -111,7 +114,6 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
}, [parameters]);
const viewCodeContent = useMemo(() => {
console.log('finalParameters:', finalParameters);
if (isOpenaiCompatible) {
return generateOpenaiImageCode({
api: CREAT_IMAGE_API,
@ -134,11 +136,53 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
setCurrentPrompt(e.target.value);
};
const handleSendMessage = async (message: Omit<MessageItem, 'uid'>) => {
const generateParams = () => {
// preview
let stream_options: Record<string, any> = {
chunk_size: 16 * 1024,
chunk_results: true
};
if (parameters.preview === 'preview') {
stream_options = {
preview: true
};
}
if (parameters.preview === 'preview_faster') {
stream_options = {
preview_faster: true
};
}
const params = {
..._.omitBy(
parameters,
(value: string, key: string) =>
!value || ['width', 'height', 'seed'].includes(key)
),
seed: parameters.random_seed ? generateRandomNumber() : parameters.seed,
stream: true,
stream_options: {
...stream_options
},
prompt: currentPrompt
};
return params;
};
const handleSendMessage = async () => {
try {
await form.current?.form?.validateFields();
if (!parameters.model) return;
submitMessage(finalParameters);
const params = generateParams();
setParams({
...params,
seed: params.seed
});
form.current?.form?.setFieldValue('seed', params.seed);
console.log('params:', params, parameters);
submitMessage(params);
setRouteCache(routeCachekey['/playground/text-to-image'], true);
} catch (error) {
// console.log('error:', error);

613
src/pages/playground/components/image-edit.tsx
Unescape View File

@ -3,19 +3,12 @@ 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 FieldComponent from '@/components/seal-form/field-component';
import SealSelect from '@/components/seal-form/seal-select';
import routeCachekey from '@/config/route-cachekey';
import useOverlayScroller from '@/hooks/use-overlay-scroller';
import UploadImg from '@/pages/playground/components/upload-img';
import { base64ToFile, generateRandomNumber } from '@/utils';
import {
fetchChunkedDataPostFormData as fetchChunkedData,
readLargeStreamData as readStreamData
} from '@/utils/fetch-chunk-data';
import { SwapOutlined } from '@ant-design/icons';
import { useIntl, useSearchParams } from '@umijs/max';
import { Button, Divider, Form, Tooltip } from 'antd';
import { useIntl } from '@umijs/max';
import { Button, Divider, Tooltip } from 'antd';
import classNames from 'classnames';
import _ from 'lodash';
import 'overlayscrollbars/overlayscrollbars.css';
@ -30,15 +23,8 @@ import React, {
useState
} from 'react';
import { EDIT_IMAGE_API } from '../apis';
import { extractErrorMessage } from '../config';
import {
ImageAdvancedParamsConfig,
ImageCustomSizeConfig,
ImageParamsConfig,
ImageconstExtraConfig,
imageSizeOptions
} from '../config/params-config';
import { MessageItem, ParamsSchema } from '../config/types';
import { useInitImageMeta } from '../hooks/use-init-meta';
import useTextImage from '../hooks/use-text-image';
import '../style/ground-left.less';
import '../style/system-message-wrap.less';
import { generateImageCode, generateOpenaiImageCode } from '../view-code/image';
@ -52,81 +38,19 @@ interface MessageProps {
ref?: any;
}
// for advanced fields
const METAKEYS = [
'sample_method',
'sampling_steps',
'schedule_method',
'cfg_scale',
'guidance',
'negative_prompt',
'strength'
];
const ODD_STRING = 'AAAABJRU5ErkJgg===';
const advancedFieldsDefaultValus = {
seed: null,
sample_method: 'euler_a',
cfg_scale: 4.5,
guidance: 3.5,
strength: 0.75,
sampling_steps: 10,
negative_prompt: null,
preview: 'preview_faster',
schedule_method: 'discrete'
};
const openaiCompatibleFieldsDefaultValus = {
quality: 'standard',
style: null
};
const initialValues = {
n: 1,
size: '512x512',
...advancedFieldsDefaultValus
};
const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
const { modelList } = props;
const messageId = useRef<number>(0);
const [isOpenaiCompatible, setIsOpenaiCompatible] = useState<boolean>(false);
const [imageList, setImageList] = useState<
{
dataUrl: string;
height: number | string;
width: string | number;
maxHeight: string | number;
maxWidth: string | number;
uid: number;
span?: number;
loading?: boolean;
progress?: number;
preview?: boolean;
}[]
>([]);
const intl = useIntl();
const [searchParams] = useSearchParams();
const selectModel = searchParams.get('model') || '';
const [parameters, setParams] = useState<any>({});
const [show, setShow] = useState(false);
const [loading, setLoading] = useState(false);
const [tokenResult, setTokenResult] = useState<any>(null);
const [collapse, setCollapse] = useState(false);
const scroller = useRef<any>(null);
const paramsRef = useRef<any>(null);
const messageListLengthCache = useRef<number>(0);
const requestToken = useRef<any>(null);
const [currentPrompt, setCurrentPrompt] = useState<string>('');
const form = 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 [modelMeta, setModelMeta] = useState<any>({});
const [imageStatus, setImageStatus] = useState<{
isOriginal: boolean;
isResetNeeded: boolean;
@ -139,12 +63,34 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
height: 512
});
const doneImage = useRef<boolean>(false);
const cacheFormData = useRef<any>({});
const size = Form.useWatch('size', form.current?.form);
const [activeImgUid, setActiveImgUid] = useState<number>(0);
const { initialize, updateScrollerPosition } = useOverlayScroller();
const { initialize: innitializeParams } = useOverlayScroller();
const {
handleOnValuesChange,
handleToggleParamsStyle,
setParams,
updateCacheFormData,
form,
paramsConfig,
initialValues,
parameters,
isOpenaiCompatible
} = useInitImageMeta(props);
const {
loading,
tokenResult,
imageList,
currentPrompt,
setImageList,
setCurrentPrompt,
handleStopConversation,
submitMessage
} = useTextImage({
scroller,
paramsRef,
chunkFields: ['stream_options_chunk_result'],
API: EDIT_IMAGE_API
});
useImperativeHandle(ref, () => {
return {
@ -158,76 +104,6 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
};
});
const removeBase64Suffix = (str: string, suffix: string) => {
return str.endsWith(suffix) ? str.slice(0, -suffix.length) : str;
};
const updateCacheFormData = (values: Record<string, any>) => {
cacheFormData.current = {
...cacheFormData.current,
...values
};
};
const getNewImageSizeOptions = useCallback((metaData: any) => {
const { max_height, max_width } = metaData || {};
if (!max_height || !max_width) {
return imageSizeOptions;
}
const newImageSizeOptions = imageSizeOptions.filter((item) => {
return item.width <= max_width && item.height <= max_height;
});
if (
!newImageSizeOptions.find(
(item) => item.width === max_width && item.height === max_height
)
) {
newImageSizeOptions.push({
width: max_width,
height: max_height,
label: `${max_width}x${max_height}`,
value: `${max_width}x${max_height}`
});
}
return newImageSizeOptions;
}, []);
const paramsConfig = useMemo(() => {
const newImageSizeOptions = getNewImageSizeOptions(modelMeta);
let result = ImageParamsConfig.map((item) => {
if (item.name === 'size') {
return {
...item,
options: newImageSizeOptions
};
}
return item;
});
if (!newImageSizeOptions.length) {
result = result.filter((item) => item.name !== 'size');
}
return result;
}, [modelMeta, getNewImageSizeOptions]);
const setImageSize = useCallback(() => {
let size: Record<string, string | number> = {
span: 12
};
if (parameters.n === 1) {
size.span = 24;
}
if (parameters.n === 2) {
size.span = 12;
}
if (parameters.n === 3) {
size.span = 8;
}
if (parameters.n === 4) {
size.span = 6;
}
return size;
}, [parameters.n]);
const imageFile = useMemo(() => {
if (!image) return null;
return base64ToFile(image, 'image');
@ -280,357 +156,73 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
});
}, [finalParameters, currentPrompt, parameters.size]);
const setMessageId = () => {
messageId.current = messageId.current + 1;
return messageId.current;
const handleClear = () => {
// setImageList([]);
// setTokenResult(null);
// setMask('');
// setImage('');
// setUploadList([]);
setCurrentPrompt('');
};
const handleStopConversation = () => {
requestToken.current?.abort?.();
setLoading(false);
const handleInputChange = (e: any) => {
setCurrentPrompt(e.target.value);
};
const submitMessage = async (current?: { content: string }) => {
try {
await form.current?.form?.validateFields();
if (!parameters.model) return;
doneImage.current = false;
const size: any = setImageSize();
setLoading(true);
setMessageId();
setTokenResult(null);
setCurrentPrompt(current?.content || '');
// setUploadList((pre) => {
// return pre.map((item) => {
// return {
// ...item,
// uid: activeImgUid
// };
// });
// });
setRouteCache(routeCachekey['/playground/text-to-image'], true);
const imgSize = _.split(finalParameters.size, 'x').map((item: string) =>
_.toNumber(item)
);
// preview
let stream_options: Record<string, any> = {
stream_options_chunk_size: 16 * 1024,
stream_options_chunk_result: true
const generateParams = () => {
// preview
let stream_options: Record<string, any> = {
stream_options_chunk_size: 16 * 1024,
stream_options_chunk_result: true
};
if (parameters.preview === 'preview') {
stream_options = {
stream_options_preview: true
};
if (parameters.preview === 'preview') {
stream_options = {
stream_options_preview: true
};
}
if (parameters.preview === 'preview_faster') {
stream_options = {
stream_options_preview_faster: true
};
}
}
let newImageList = Array(parameters.n)
.fill({})
.map((item, index: number) => {
return {
dataUrl: 'data:image/png;base64,',
...size,
progress: 0,
height: imgSize[1],
width: imgSize[0],
loading: true,
progressType: 'dashboard',
preview: false,
uid: setMessageId()
};
});
setImageList(newImageList);
if (parameters.preview === 'preview_faster') {
stream_options = {
stream_options_preview_faster: true
};
}
requestToken.current?.abort?.();
requestToken.current = new AbortController();
const params = {
..._.omitBy(finalParameters, (value: string) => !value),
seed: parameters.random_seed ? generateRandomNumber() : parameters.seed,
stream: true,
...stream_options,
prompt: currentPrompt
};
return params;
};
const params = {
..._.omitBy(finalParameters, (value: string) => !value),
seed: parameters.random_seed ? generateRandomNumber() : parameters.seed,
stream: true,
...stream_options,
prompt: current?.content || currentPrompt || ''
};
const handleSendMessage = async () => {
try {
await form.current?.form?.validateFields();
if (!parameters.model) return;
const params = generateParams();
setParams({
...parameters,
...params,
seed: params.seed
});
form.current?.form?.setFieldValue('seed', params.seed);
const result: any = await fetchChunkedData({
data: params,
url: EDIT_IMAGE_API,
signal: requestToken.current.signal
});
console.log('result:', result);
if (result.error) {
setTokenResult({
error: true,
errorMessage: extractErrorMessage(result)
});
setImageList([]);
return;
}
const { reader, decoder } = result;
await readStreamData(reader, decoder, (chunk: any) => {
if (chunk?.error) {
setTokenResult({
error: true,
errorMessage: chunk?.error?.message || chunk?.message || ''
});
return;
}
chunk?.data?.forEach((item: any) => {
const imgItem = newImageList[item.index];
if (item.b64_json && params.stream_options_chunk_result) {
imgItem.dataUrl += removeBase64Suffix(item.b64_json, ODD_STRING);
} else if (item.b64_json) {
imgItem.dataUrl = `data:image/png;base64,${removeBase64Suffix(item.b64_json, ODD_STRING)}`;
}
const progress = item.progress;
newImageList[item.index] = {
dataUrl: imgItem.dataUrl,
height: imgSize[1],
width: imgSize[0],
maxHeight: `${imgSize[1]}px`,
maxWidth: `${imgSize[0]}px`,
uid: imgItem.uid,
span: imgItem.span,
loading: params.stream_options_chunk_result
? progress < 100
: false,
preview: false,
progress: progress
};
});
setImageList([...newImageList]);
});
form.current?.form?.setFieldValue('seed', params.seed);
console.log('params:', params, parameters);
submitMessage(params);
setRouteCache(routeCachekey['/playground/text-to-image'], true);
} catch (error) {
console.log('error:', error);
requestToken.current?.abort?.();
setImageList([]);
// console.log('error:', error);
} finally {
setLoading(false);
console.log('finally---------');
setRouteCache(routeCachekey['/playground/text-to-image'], false);
}
};
const handleClear = () => {
setMessageId();
setImageList([]);
setTokenResult(null);
setMask('');
setImage('');
setUploadList([]);
};
const handleInputChange = (e: any) => {
setCurrentPrompt(e.target.value);
};
const handleSendMessage = (message: Omit<MessageItem, 'uid'>) => {
const currentMessage = message.content ? message : undefined;
submitMessage(currentMessage);
};
const handleCloseViewCode = () => {
setShow(false);
};
const handleToggleParamsStyle = () => {
if (isOpenaiCompatible) {
form.current?.form?.setFieldsValue({
...advancedFieldsDefaultValus
});
setParams((pre: object) => {
return {
..._.omit(pre, _.keys(openaiCompatibleFieldsDefaultValus)),
...advancedFieldsDefaultValus
};
});
} else {
form.current?.form?.setFieldsValue({
...openaiCompatibleFieldsDefaultValus
});
setParams((pre: object) => {
return {
...openaiCompatibleFieldsDefaultValus,
..._.omit(pre, _.keys(advancedFieldsDefaultValus))
};
});
}
setIsOpenaiCompatible(!isOpenaiCompatible);
};
const renderExtra = useMemo(() => {
if (!isOpenaiCompatible) {
return [];
}
return ImageconstExtraConfig.map((item: ParamsSchema) => {
return (
<Form.Item name={item.name} rules={item.rules} key={item.name}>
<SealSelect
{...item.attrs}
options={item.options}
label={
item.label.isLocalized
? intl.formatMessage({ id: item.label.text })
: item.label.text
}
></SealSelect>
</Form.Item>
);
});
}, [ImageconstExtraConfig, isOpenaiCompatible, intl]);
const handleFieldChange = (e: any) => {
if (e.target.id.indexOf('random_seed') > -1) {
form.current?.form?.setFieldValue('random_seed', e.target.checked);
setParams((pre: object) => {
return {
...pre,
random_seed: e.target.checked
};
});
}
};
const renderAdvanced = useMemo(() => {
if (isOpenaiCompatible) {
return [];
}
const formValues = form.current?.form?.getFieldsValue();
return ImageAdvancedParamsConfig.map((item: ParamsSchema) => {
return (
<Form.Item
name={item.name}
rules={item.rules}
key={item.name}
noStyle={item.name === 'random_seed'}
>
<FieldComponent
style={item.name === 'random_seed' ? { marginBottom: 20 } : {}}
disabled={
item.disabledConfig
? item.disabledConfig?.when?.(formValues)
: item.disabled
}
description={
item.description?.isLocalized
? intl.formatMessage({ id: item.description.text })
: item.description?.text || ''
}
onChange={item.name === 'random_seed' ? handleFieldChange : null}
{..._.omit(item, [
'name',
'rules',
'disabledConfig',
'description'
])}
></FieldComponent>
</Form.Item>
);
});
}, [ImageAdvancedParamsConfig, isOpenaiCompatible, intl, form.current]);
const renderCustomSize = useMemo(() => {
if (size === 'custom') {
return ImageCustomSizeConfig.map((item: ParamsSchema) => {
return (
<Form.Item
name={item.name}
rules={[
{
message: intl.formatMessage(
{ id: 'common.form.rule.input' },
{ name: intl.formatMessage({ id: item.label.text }) }
),
required: true
}
]}
key={item.name}
>
<FieldComponent
label={
item.label.isLocalized
? intl.formatMessage({ id: item.label.text })
: item.label.text
}
description={
item.description?.isLocalized
? intl.formatMessage({ id: item.description.text })
: item.description?.text
}
{..._.omit(item, [
'name',
'description',
'rules',
'disabledConfig',
'attrs'
])}
{...item.attrs}
defaultValue={
item.name === 'height'
? modelMeta.default_height
: modelMeta.default_width
}
max={
item.name === 'height'
? modelMeta.max_height || item.attrs?.max
: modelMeta.max_width || item.attrs?.max
}
></FieldComponent>
</Form.Item>
);
});
}
return null;
}, [size, intl, modelMeta]);
const handleOnModelChange = useCallback(
(val: string) => {
if (!val) return;
const model = modelList.find((item) => item.value === val);
setModelMeta(model?.meta || {});
const imageSizeOptions = getNewImageSizeOptions(model?.meta);
const w = model?.meta?.default_width || 512;
const h = model?.meta?.default_height || 512;
const defaultSize = imageSizeOptions.length ? `${w}x${h}` : 'custom';
if (!isOpenaiCompatible) {
setParams((pre: object) => {
const obj = _.merge({}, pre, _.pick(model?.meta, METAKEYS, {}));
return { ...obj, size: defaultSize, width: w, height: h };
});
form.current?.form?.setFieldsValue({
..._.pick(model?.meta, METAKEYS, {}),
size: defaultSize,
width: w,
height: h
});
}
updateCacheFormData({
..._.pick(model?.meta, METAKEYS, {}),
size: defaultSize,
width: w,
height: h
});
},
[modelList, isOpenaiCompatible]
);
const handleOnScaleImageSize = useCallback(
(data: { width: number; height: number }) => {
const { width, height } = data;
@ -806,53 +398,6 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
);
}, [uploadList, handleOnImgClick]);
useEffect(() => {
return () => {
requestToken.current?.abort?.();
};
}, []);
useEffect(() => {
if (size === 'custom') {
form.current?.form?.setFieldsValue({
width: cacheFormData.current.width || 512,
height: cacheFormData.current.height || 512
});
setParams((pre: object) => {
return {
...pre,
width: cacheFormData.current.width || 512,
height: cacheFormData.current.height || 512
};
});
}
}, [size]);
useEffect(() => {
if (scroller.current) {
initialize(scroller.current);
}
}, [scroller.current, initialize]);
useEffect(() => {
if (paramsRef.current) {
innitializeParams(paramsRef.current);
}
}, [paramsRef.current, innitializeParams]);
useEffect(() => {
if (loading) {
updateScrollerPosition();
}
}, [imageList, loading]);
useEffect(() => {
if (imageList.length > messageListLengthCache.current) {
updateScrollerPosition();
}
messageListLengthCache.current = imageList.length;
}, [imageList.length]);
return (
<div className="ground-left-wrapper">
<div className="ground-left">
@ -975,19 +520,16 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
</Tooltip>
</div>
}
onModelChange={handleOnModelChange}
setParams={setParams}
onValuesChange={handleOnValuesChange}
paramsConfig={paramsConfig}
initialValues={initialValues}
params={parameters}
selectedModel={selectModel}
modelList={modelList}
extra={[renderCustomSize, ...renderExtra, ...renderAdvanced]}
/>
</div>
</div>
<div style={{ width: 389 }}>
<MessageInput
actions={['clear']}
defaultSize={{
minRows: 5,
maxRows: 5
@ -996,7 +538,6 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
placeholer={intl.formatMessage({
id: 'playground.input.prompt.holder'
})}
actions={[]}
title={
<span className="font-600">
{intl.formatMessage({ id: 'playground.image.prompt' })}

4
src/pages/playground/hooks/use-init-meta.ts
Unescape View File

@ -146,6 +146,7 @@ export const useInitLLmMeta = (
setModelMeta,
setInitialValues,
setParams,
setParamsConfig,
formRef,
paramsConfig,
initialValues,
@ -389,6 +390,9 @@ export const useInitImageMeta = (props: MessageProps) => {
]);
setParams(allValues);
updateCacheFormData(changeValues);
} else {
setParams(allValues);
updateCacheFormData(changeValues);
}
},
[

83
src/pages/playground/hooks/use-text-image.ts
Unescape View File

@ -1,20 +1,34 @@
import useOverlayScroller from '@/hooks/use-overlay-scroller';
import { CREAT_IMAGE_API } from '@/pages/playground/apis';
import { extractErrorMessage, promptList } from '@/pages/playground/config';
import { generateRandomNumber } from '@/utils';
import {
fetchChunkedData,
fetchChunkedDataPostFormData,
readLargeStreamData as readStreamData
} from '@/utils/fetch-chunk-data';
import _ from 'lodash';
import { useEffect, useRef, useState } from 'react';
import { CREAT_IMAGE_API, EDIT_IMAGE_API } from '../apis';
const ODD_STRING = 'AAAABJRU5ErkJgg===';
export default function useTextImage({ scroller, paramsRef }: any) {
export default function useTextImage(props: any) {
const { scroller, paramsRef, chunkFields, API } = props;
const [loading, setLoading] = useState(false);
const [tokenResult, setTokenResult] = useState<any>(null);
const [imageList, setImageList] = useState<any[]>([]);
const [imageList, setImageList] = useState<
{
dataUrl: string;
height: number | string;
width: string | number;
maxHeight: string | number;
maxWidth: string | number;
uid: number;
span?: number;
loading?: boolean;
progress?: number;
preview?: boolean;
}[]
>([]);
const [currentPrompt, setCurrentPrompt] = useState('');
const messageId = useRef<number>(0);
const requestToken = useRef<any>(null);
@ -76,23 +90,6 @@ export default function useTextImage({ scroller, paramsRef }: any) {
_.toNumber(item)
);
// preview
let stream_options: Record<string, any> = {
chunk_size: 16 * 1024,
chunk_results: true
};
if (parameters.preview === 'preview') {
stream_options = {
preview: true
};
}
if (parameters.preview === 'preview_faster') {
stream_options = {
preview_faster: true
};
}
let newImageList = Array(parameters.n)
.fill({})
.map((item, index: number) => {
@ -113,26 +110,23 @@ export default function useTextImage({ scroller, paramsRef }: any) {
requestToken.current?.abort?.();
requestToken.current = new AbortController();
const params = {
..._.omitBy(
parameters,
(value: string, key: string) =>
!value || ['width', 'height', 'seed'].includes(key)
),
size: `${imgSize[0]}x${imgSize[1]}`,
seed: parameters.random_seed ? generateRandomNumber() : parameters.seed,
stream: true,
stream_options: {
...stream_options
},
prompt: currentPrompt
};
const result: any = await fetchChunkedData({
data: params,
url: `${CREAT_IMAGE_API}?t=${Date.now()}`,
signal: requestToken.current.signal
});
let result: any = {};
if (API === CREAT_IMAGE_API) {
result = await fetchChunkedData({
data: parameters,
url: `${API}?t=${Date.now()}`,
signal: requestToken.current.signal
});
}
if (API === EDIT_IMAGE_API) {
result = await fetchChunkedDataPostFormData({
data: parameters,
url: `${API}?t=${Date.now()}`,
signal: requestToken.current.signal
});
}
if (result.error) {
setTokenResult({
error: true,
@ -154,7 +148,7 @@ export default function useTextImage({ scroller, paramsRef }: any) {
}
chunk?.data?.forEach((item: any) => {
const imgItem = newImageList[item.index];
if (item.b64_json && stream_options.chunk_results) {
if (item.b64_json && _.get(parameters, chunkFields)) {
imgItem.dataUrl += removeBase64Suffix(item.b64_json, ODD_STRING);
} else if (item.b64_json) {
imgItem.dataUrl = `data:image/png;base64,${removeBase64Suffix(item.b64_json, ODD_STRING)}`;
@ -169,8 +163,8 @@ export default function useTextImage({ scroller, paramsRef }: any) {
maxWidth: `${imgSize[0]}px`,
uid: imgItem.uid,
span: imgItem.span,
loading: stream_options.chunk_results ? progress < 100 : false,
preview: progress >= 100,
loading: _.get(parameters, chunkFields) ? progress < 100 : false,
preview: API === CREAT_IMAGE_API ? progress >= 100 : false,
progress: progress
};
});
@ -208,6 +202,7 @@ export default function useTextImage({ scroller, paramsRef }: any) {
imageList,
promptList,
currentPrompt,
setImageList,
setTokenResult,
setCurrentPrompt,
handleStopConversation,

Write Preview
Loading…
Cancel
Save