root/gpustack-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: image edit ux

Browse Source
This commit is contained in:
jialin
2024-12-27 14:56:06 +08:00
parent 91c5e7e06c
commit 542f048a67
17 changed files with 1198 additions and 206 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/playground/apis/index.ts
+1
View File
@@ -3,6 +3,7 @@ import { request } from '@umijs/max';
export const CHAT_API = '/v1-openai/chat/completions';
export const CREAT_IMAGE_API = '/v1-openai/images/generations';
export const EDIT_IMAGE_API = '/v1-openai/images/edits';
export const EMBEDDING_API = '/v1-openai/embeddings';
src/pages/playground/components/ground-images.tsx
+51 -8
View File
@@ -11,7 +11,7 @@ import {
} from '@/utils/fetch-chunk-data';
import { FileImageOutlined, SwapOutlined } from '@ant-design/icons';
import { useIntl, useSearchParams } from '@umijs/max';
import { Button, Form, Tooltip } from 'antd';
import { Button, Checkbox, Form, Tooltip } from 'antd';
import classNames from 'classnames';
import _ from 'lodash';
import 'overlayscrollbars/overlayscrollbars.css';
@@ -99,6 +99,10 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
const [currentPrompt, setCurrentPrompt] = useState<string>('');
const form = useRef<any>(null);
const inputRef = useRef<any>(null);
const previewRef = useRef<any>({
preview: false,
preview_faster: false
});
const size = Form.useWatch('size', form.current?.form);
@@ -153,7 +157,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
const finalParameters = useMemo(() => {
if (parameters.size === 'custom') {
return {
..._.omit(parameters, ['width', 'height']),
..._.omit(parameters, ['width', 'height', 'preview']),
size:
parameters.width && parameters.height
? `${parameters.width}x${parameters.height}`
@@ -161,7 +165,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
};
}
return {
..._.omit(parameters, ['width', 'height', 'random_seed'])
..._.omit(parameters, ['width', 'height', 'random_seed', 'preview'])
};
}, [parameters]);
@@ -205,6 +209,23 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
setCurrentPrompt(current?.content || '');
const imgSize = _.split(finalParameters.size, 'x');
// 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) => {
@@ -215,6 +236,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
height: imgSize[1],
width: imgSize[0],
loading: true,
progressType: stream_options.chunk_results ? 'dashboard' : 'line',
uid: setMessageId()
};
});
@@ -228,8 +250,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
seed: parameters.random_seed ? generateRandomNumber() : parameters.seed,
stream: true,
stream_options: {
chunk_size: 16 * 1024,
chunk_results: true
...stream_options
},
prompt: current?.content || currentPrompt || ''
};
@@ -266,8 +287,10 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
}
chunk?.data?.forEach((item: any) => {
const imgItem = newImageList[item.index];
if (item.b64_json) {
if (item.b64_json && stream_options.chunk_results) {
imgItem.dataUrl += item.b64_json;
} else if (item.b64_json) {
imgItem.dataUrl = `data:image/png;base64,${item.b64_json}`;
}
const progress = _.round(item.progress, 0);
newImageList[item.index] = {
@@ -278,7 +301,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
maxWidth: `${imgSize[0]}px`,
uid: imgItem.uid,
span: imgItem.span,
loading: progress < 100,
loading: stream_options.chunk_results ? progress < 100 : false,
progress: progress
};
});
@@ -439,6 +462,27 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
return null;
}, [size, intl]);
const hanldeOnPreview = (e: any) => {
previewRef.current.preview = e.target.checked;
};
const hanldeOnPreviewFaster = (e: any) => {
previewRef.current.preview_faster = e.target.checked;
};
const renderPreview = useMemo(() => {
return (
<>
<Checkbox onChange={hanldeOnPreview} defaultChecked={false}>
Preview
</Checkbox>
<Checkbox onChange={hanldeOnPreviewFaster} defaultChecked={false}>
Preview Faster
</Checkbox>
</>
);
}, []);
useEffect(() => {
return () => {
requestToken.current?.abort?.();
@@ -508,7 +552,6 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
autoBgColor={false}
editable={false}
dataList={imageList}
loading={loading}
responseable={true}
gutter={[8, 16]}
autoSize={true}
src/pages/playground/components/image-edit.tsx
+274 -111
View File
@@ -1,16 +1,19 @@
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 useOverlayScroller from '@/hooks/use-overlay-scroller';
import ThumbImg from '@/pages/playground/components/thumb-img';
import { generateRandomNumber } from '@/utils';
import UploadImg from '@/pages/playground/components/upload-img';
import { base64ToFile, generateRandomNumber } from '@/utils';
import {
fetchChunkedData,
fetchChunkedDataPostFormData as fetchChunkedData,
readLargeStreamData as readStreamData
} from '@/utils/fetch-chunk-data';
import { FileImageOutlined, SwapOutlined } from '@ant-design/icons';
import { SwapOutlined } from '@ant-design/icons';
import { useIntl, useSearchParams } from '@umijs/max';
import { Button, Form, Tooltip } from 'antd';
import { Button, Divider, Form, Image, Tooltip } from 'antd';
import classNames from 'classnames';
import _ from 'lodash';
import 'overlayscrollbars/overlayscrollbars.css';
@@ -24,7 +27,7 @@ import React, {
useRef,
useState
} from 'react';
import { CREAT_IMAGE_API } from '../apis';
import { EDIT_IMAGE_API } from '../apis';
import { promptList } from '../config';
import {
ImageAdvancedParamsConfig,
@@ -46,7 +49,7 @@ interface MessageProps {
ref?: any;
}
const advancedFieldsDefaultValus = {
seed: null,
seed: 1,
sampler: 'euler_a',
cfg_scale: 4.5,
sample_steps: 10,
@@ -98,6 +101,10 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
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>('');
const [showOriginal, setShowOriginal] = useState<boolean>(false);
const [uploadList, setUploadList] = useState<any[]>([]);
const size = Form.useWatch('size', form.current?.form);
@@ -141,10 +148,10 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
size.span = 12;
}
if (parameters.n === 3) {
size.span = 12;
size.span = 8;
}
if (parameters.n === 4) {
size.span = 12;
size.span = 6;
}
return size;
}, [parameters.n]);
@@ -152,7 +159,9 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
const finalParameters = useMemo(() => {
if (parameters.size === 'custom') {
return {
..._.omit(parameters, ['width', 'height']),
..._.omit(parameters, ['width', 'height', 'preview']),
image: base64ToFile(image, 'image'),
mask: base64ToFile(mask, 'mask'),
size:
parameters.width && parameters.height
? `${parameters.width}x${parameters.height}`
@@ -160,14 +169,18 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
};
}
return {
..._.omit(parameters, ['width', 'height', 'random_seed'])
image: base64ToFile(image, 'image'),
mask: base64ToFile(mask, 'mask'),
..._.omit(parameters, ['width', 'height', 'random_seed', 'preview'])
};
}, [parameters]);
}, [parameters, image, mask]);
const viewCodeContent = useMemo(() => {
if (isOpenaiCompatible) {
return generateOpenaiImageCode({
api: '/v1-openai/images/generations',
api: EDIT_IMAGE_API,
edit: true,
isFormdata: true,
parameters: {
...finalParameters,
prompt: currentPrompt
@@ -175,7 +188,9 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
});
}
return generateImageCode({
api: '/v1-openai/images/generations',
api: EDIT_IMAGE_API,
isFormdata: true,
edit: true,
parameters: {
...finalParameters,
prompt: currentPrompt
@@ -202,8 +217,26 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
setMessageId();
setTokenResult(null);
setCurrentPrompt(current?.content || '');
const imgSize = _.split(finalParameters.size, 'x');
// 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) => {
@@ -214,6 +247,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
height: imgSize[1],
width: imgSize[0],
loading: true,
progressType: stream_options.chunk_results ? 'dashboard' : 'line',
uid: setMessageId()
};
});
@@ -227,8 +261,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
seed: parameters.random_seed ? generateRandomNumber() : parameters.seed,
stream: true,
stream_options: {
chunk_size: 16 * 1024,
chunk_results: true
...stream_options
},
prompt: current?.content || currentPrompt || ''
};
@@ -240,7 +273,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
const result: any = await fetchChunkedData({
data: params,
url: `${CREAT_IMAGE_API}?t=${Date.now()}`,
url: `http://192.168.50.4:40325/v1/images/edits?t=${Date.now()}`,
signal: requestToken.current.signal
});
if (result.error) {
@@ -265,8 +298,10 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
}
chunk?.data?.forEach((item: any) => {
const imgItem = newImageList[item.index];
if (item.b64_json) {
if (item.b64_json && stream_options.chunk_results) {
imgItem.dataUrl += item.b64_json;
} else if (item.b64_json) {
imgItem.dataUrl = `data:image/png;base64,${item.b64_json}`;
}
const progress = _.round(item.progress, 0);
newImageList[item.index] = {
@@ -277,7 +312,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
maxWidth: `${imgSize[0]}px`,
uid: imgItem.uid,
span: imgItem.span,
loading: progress < 100,
loading: stream_options.chunk_results ? progress < 100 : false,
progress: progress
};
});
@@ -295,6 +330,9 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
setMessageId();
setImageList([]);
setTokenResult(null);
setMask('');
setImage('');
setUploadList([]);
};
const handleInputChange = (e: any) => {
@@ -438,6 +476,62 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
return null;
}, [size, intl]);
const handleUpdateImageList = useCallback((base64List: any) => {
const img = _.get(base64List, '[0].dataUrl', '');
setUploadList(base64List);
setImage(img);
}, []);
const handleOnSave = useCallback((url: string) => {
console.log('url:', url);
setMask(url);
}, []);
const renderImageEditor = useMemo(() => {
if (image) {
return (
<CanvasImageEditor
imageSrc={image}
disabled={loading}
onSave={handleOnSave}
uploadButton={
<Tooltip title="Upload Image">
<UploadImg
disabled={loading}
handleUpdateImgList={handleUpdateImageList}
size="middle"
></UploadImg>
</Tooltip>
}
></CanvasImageEditor>
);
}
return (
<UploadImg
drag={true}
multiple={false}
handleUpdateImgList={handleUpdateImageList}
>
<div
className="flex-column flex-center gap-10 justify-center"
style={{ width: 150, height: 150 }}
>
<IconFont
type="icon-upload_image"
className="font-size-24"
></IconFont>
<h3>Click or drag image to this area to upload</h3>
</div>
</UploadImg>
);
}, [image, loading, handleOnSave, handleUpdateImageList]);
const handleOnImgClick = useCallback((item: any) => {
console.log('item:', item);
setImage(item.dataUrl);
setShowOriginal(true);
}, []);
useEffect(() => {
return () => {
requestToken.current?.abort?.();
@@ -495,114 +589,183 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
>
<>
<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}
loading={loading}
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>
{renderImageEditor}
</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={['clear']}
defaultSize={{
minRows: 5,
maxRows: 5
<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'
}}
title={
<span className="font-600">
{intl.formatMessage({ id: 'playground.image.prompt' })}
</span>
}
>
{uploadList.length > 0 && (
<Image
onClick={() => handleOnImgClick(uploadList[0])}
src={uploadList[0]?.dataUrl}
style={{
height: 125,
objectFit: 'cover'
}}
></Image>
)}
{imageList.length > 0 && (
<>
<Divider
type="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,
minWidth: 125,
maxHeight: 125
}}
key={item.uid}
>
<SingleImage
{...item}
height={125}
maxHeight={125}
key={item.uid}
preview={true}
loading={item.loading}
autoSize={false}
editable={false}
autoBgColor={false}
onClick={() => handleOnImgClick(item)}
></SingleImage>
</div>
);
})}
</div>
</>
)}
{/* <ThumbImg
column={parameters.n}
style={{
padding: 0,
height: '100%',
justifyContent: 'center',
flexDirection: 'column',
flexWrap: 'unset',
alignItems: 'center'
}}
preview={false}
autoBgColor={false}
editable={false}
dataList={imageList}
loading={loading}
disabled={!parameters.model}
isEmpty={!imageList.length}
handleSubmit={handleSendMessage}
handleAbortFetch={handleStopConversation}
onInputChange={handleInputChange}
shouldResetMessage={false}
clearAll={handleClear}
/>
onClick={handleOnImgClick}
responseable={true}
gutter={[8, 16]}
autoSize={true}
></ThumbImg> */}
</div>
</div>
</div>
<div
className={classNames('params-wrapper', {
collapsed: collapse
})}
ref={paramsRef}
style={{
display: 'flex',
flexDirection: 'column',
overflow: 'hidden'
}}
>
<div className="box">
<DynamicParams
ref={form}
parametersTitle={
<div className="flex-between flex-center">
<span>
{intl.formatMessage({ id: 'playground.parameters' })}
</span>
<Tooltip
title={intl.formatMessage({
id: 'playground.image.params.custom.tips'
})}
>
<Button
size="middle"
type="text"
icon={<SwapOutlined />}
onClick={handleToggleParamsStyle}
<div style={{ flex: 1, overflow: 'auto' }} ref={paramsRef}>
<div className="box">
<DynamicParams
ref={form}
parametersTitle={
<div className="flex-between flex-center">
<span>
{intl.formatMessage({ id: 'playground.parameters' })}
</span>
<Tooltip
title={intl.formatMessage({
id: 'playground.image.params.custom.tips'
})}
>
{isOpenaiCompatible
? intl.formatMessage({
id: 'playground.image.params.custom'
})
: intl.formatMessage({
id: 'playground.image.params.openai'
})}
</Button>
</Tooltip>
</div>
<Button
size="middle"
type="text"
icon={<SwapOutlined />}
onClick={handleToggleParamsStyle}
>
{isOpenaiCompatible
? intl.formatMessage({
id: 'playground.image.params.custom'
})
: intl.formatMessage({
id: 'playground.image.params.openai'
})}
</Button>
</Tooltip>
</div>
}
setParams={setParams}
paramsConfig={paramsConfig}
initialValues={initialValues}
params={parameters}
selectedModel={selectModel}
modelList={modelList}
extra={[renderCustomSize, ...renderExtra, ...renderAdvanced]}
/>
</div>
</div>
<div style={{ width: 389 }}>
<MessageInput
defaultSize={{
minRows: 5,
maxRows: 5
}}
ref={inputRef}
placeholer={intl.formatMessage({
id: 'playground.input.prompt.holder'
})}
actions={['clear']}
title={
<span className="font-600">
{intl.formatMessage({ id: 'playground.image.prompt' })}
</span>
}
setParams={setParams}
paramsConfig={paramsConfig}
initialValues={initialValues}
params={parameters}
selectedModel={selectModel}
modelList={modelList}
extra={[renderCustomSize, ...renderExtra, ...renderAdvanced]}
loading={loading}
disabled={!parameters.model || mask === ''}
isEmpty={!imageList.length}
handleSubmit={handleSendMessage}
handleAbortFetch={handleStopConversation}
onInputChange={handleInputChange}
shouldResetMessage={false}
clearAll={handleClear}
/>
</div>
</div>
src/pages/playground/components/thumb-img.tsx
+54 -23
View File
@@ -6,8 +6,15 @@ import '../style/thumb-img.less';
const ThumbImg: React.FC<{
dataList: any[];
column?: number;
layout?: {
rows: number;
cols: number;
};
preview?: boolean;
editable?: boolean;
onDelete?: (uid: number) => void;
onClick?: (item: any) => void;
loading?: boolean;
style?: React.CSSProperties;
responseable?: boolean;
@@ -16,11 +23,18 @@ const ThumbImg: React.FC<{
autoSize?: boolean;
autoBgColor?: boolean;
}> = ({
layout = {
rows: 1,
cols: 1
},
preview = true,
column = 2,
dataList,
editable,
responseable,
gutter,
onDelete,
onClick,
autoBgColor,
autoSize,
style
@@ -32,6 +46,14 @@ const ThumbImg: React.FC<{
[onDelete]
);
const handleOnClick = useCallback(
(item: any) => {
console.log('item=======', item);
onClick?.(item);
},
[onClick]
);
const responseableStyle: Record<number, any> = useMemo(() => {
if (!responseable) return {};
if (dataList.length === 1) {
@@ -88,7 +110,7 @@ const ThumbImg: React.FC<{
alignItems: 'flex-start'
}
};
}, [dataList, responseable]);
}, [dataList, responseable, column]);
return (
<>
@@ -100,34 +122,40 @@ const ThumbImg: React.FC<{
gutter={gutter || []}
className="flex-center"
style={{
height: dataList.length > 2 ? '50%' : '100%',
height: dataList.length > column ? '50%' : '100%',
flex: 'none',
width: '100%',
justifyContent:
dataList.length === 1 ? 'center' : 'flex-start'
}}
>
{_.map(_.slice(dataList, 0, 2), (item: any, index: number) => {
return (
<Col
span={item.span}
key={`1-${index}`}
className="flex-center justify-center"
style={{ height: '100%', width: '100%' }}
>
<SingleImage
{...item}
style={{ ...(responseableStyle[index] || {}) }}
autoSize={autoSize}
editable={editable}
autoBgColor={autoBgColor}
onDelete={handleOnDelete}
></SingleImage>
</Col>
);
})}
{_.map(
_.slice(dataList, 0, column),
(item: any, index: number) => {
return (
<Col
span={item.span}
key={`1-${index}`}
className="flex-center justify-center"
style={{ height: '100%', width: '100%' }}
>
<SingleImage
{...item}
preview={preview}
style={{ ...(responseableStyle[index] || {}) }}
loading={item.loading}
autoSize={autoSize}
editable={editable}
autoBgColor={autoBgColor}
onDelete={handleOnDelete}
onClick={() => handleOnClick(item)}
></SingleImage>
</Col>
);
}
)}
</Row>
{dataList.length > 2 && (
{dataList.length > column && (
<Row
gutter={gutter || []}
style={{
@@ -140,7 +168,6 @@ const ThumbImg: React.FC<{
className="flex-center"
>
{_.map(_.slice(dataList, 2), (item: any, index: number) => {
console.log('index=======', index);
return (
<Col
span={item.span}
@@ -150,12 +177,14 @@ const ThumbImg: React.FC<{
>
<SingleImage
{...item}
preview={preview}
style={{ ...(responseableStyle[index + 2] || {}) }}
loading={item.loading}
autoSize={autoSize}
editable={editable}
autoBgColor={autoBgColor}
onDelete={handleOnDelete}
onClick={() => handleOnClick(item)}
></SingleImage>
</Col>
);
@@ -169,11 +198,13 @@ const ThumbImg: React.FC<{
return (
<SingleImage
{...item}
preview={preview}
key={item.uid}
autoSize={autoSize}
editable={editable}
autoBgColor={autoBgColor}
onDelete={handleOnDelete}
onClick={() => handleOnClick(item)}
></SingleImage>
);
})}
src/pages/playground/components/upload-img.tsx
+55 -14
View File
@@ -9,6 +9,10 @@ import React, { useCallback, useRef } from 'react';
interface UploadImgProps {
size?: 'small' | 'middle' | 'large';
height?: number;
multiple?: boolean;
drag?: boolean;
disabled?: boolean;
children?: React.ReactNode;
handleUpdateImgList: (
imgList: { dataUrl: string; uid: number | string }[]
) => void;
@@ -16,7 +20,10 @@ interface UploadImgProps {
const UploadImg: React.FC<UploadImgProps> = ({
handleUpdateImgList,
height = 100,
multiple = true,
drag = false,
disabled = false,
children,
size = 'small'
}) => {
const intl = useIntl();
@@ -71,19 +78,53 @@ const UploadImg: React.FC<UploadImgProps> = ({
return (
<>
<Upload
ref={uploadRef}
accept="image/*"
multiple
action="/"
fileList={[]}
beforeUpload={(file) => false}
onChange={handleChange}
>
<Tooltip title={intl.formatMessage({ id: 'playground.img.upload' })}>
<Button size={size} type="text" icon={<PictureOutlined />}></Button>
</Tooltip>
</Upload>
{drag ? (
<Upload.Dragger
ref={uploadRef}
accept="image/*"
multiple={multiple}
action="/"
fileList={[]}
beforeUpload={(file) => false}
onChange={handleChange}
>
{children ?? (
<Tooltip
title={intl.formatMessage({ id: 'playground.img.upload' })}
>
<Button
disabled={disabled}
size={size}
type="text"
icon={<PictureOutlined />}
></Button>
</Tooltip>
)}
</Upload.Dragger>
) : (
<Upload
ref={uploadRef}
accept="image/*"
multiple={multiple}
action="/"
fileList={[]}
beforeUpload={(file) => false}
onChange={handleChange}
>
{children ?? (
<Tooltip
title={intl.formatMessage({ id: 'playground.img.upload' })}
>
<Button
disabled={disabled}
size={size}
type="text"
icon={<PictureOutlined />}
></Button>
</Tooltip>
)}
</Upload>
)}
</>
);
};
src/pages/playground/config/params-config.ts
+20
View File
@@ -330,6 +330,26 @@ export const ImageAdvancedParamsConfig: ParamsSchema[] = [
}
]
},
{
type: 'Select',
name: 'preview',
options: [
{ label: 'Faster', value: 'preview_faster' },
{ label: 'Normal', value: 'preview' }
],
label: {
text: 'Preview',
isLocalized: false
},
attrs: {
allowClear: true
},
rules: [
{
required: false
}
]
},
{
type: 'InputNumber',
name: 'seed',
src/pages/playground/style/ground-left.less
-1
View File
@@ -71,7 +71,6 @@
}
.ant-upload-wrapper .ant-upload-drag {
background-color: var(--color-fill-sider);
display: flex;
flex-direction: column;
justify-content: center;
src/pages/playground/view-code/image.ts
+37 -6
View File
@@ -1,14 +1,32 @@
import _ from 'lodash';
import { fomatNodeJsParams, formatCurlArgs, formatPyParams } from './utils';
export const generateImageCode = ({ api, parameters }: Record<string, any>) => {
export const generateImageCode = ({
api,
parameters,
isFormdata = false,
edit = false
}: Record<string, any>) => {
const host = window.location.origin;
// ========================= Curl =========================
const curlCode = `
let curlCode = `
curl ${host}${api} \\
-H "Content-Type: application/json" \\
-H "Authorization: Bearer $\{YOUR_GPUSTACK_API_KEY}" \\
${formatCurlArgs(parameters, false)}`.trim();
${formatCurlArgs(parameters, isFormdata)}`.trim();
if (edit) {
curlCode = `
curl ${host}${api} \\
-H "Content-Type: multipart/form-data" \\
-H "Authorization: Bearer $\{YOUR_GPUSTACK_API_KEY}" \\
-F image="@image.png" \\
-F mask="@mask.png" \\
${formatCurlArgs(_.omit(parameters, ['mask', 'image']), isFormdata)}`
.trim()
.replace(/\\$/, '');
}
// ========================= Python =========================
const pythonCode = `
@@ -46,16 +64,29 @@ axios.post(url, data, { headers }).then((response) => {
export const generateOpenaiImageCode = ({
api,
parameters
parameters,
isFormdata = false,
edit = false
}: Record<string, any>) => {
const host = window.location.origin;
// ========================= Curl =========================
const curlCode = `
let curlCode = `
curl ${host}${api} \\
-H "Content-Type: multipart/form-data" \\
-H "Authorization: Bearer $\{YOUR_GPUSTACK_API_KEY}" \\
${formatCurlArgs(parameters, isFormdata)}`.trim();
if (edit) {
curlCode = `
curl ${host}${api} \\
-H "Content-Type: application/json" \\
-H "Authorization: Bearer $\{YOUR_GPUSTACK_API_KEY}" \\
${formatCurlArgs(parameters, false)}`.trim();
-F image="@image.png" \\
-F mask="@mask.png" \\
${formatCurlArgs(_.omit(parameters, ['mask', 'image']), isFormdata)}`
.trim()
.replace(/\\$/, '');
}
// ========================= Python =========================
const pythonCode = `