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/components/auto-image/index.tsx
+32 -29
View File
@@ -19,10 +19,11 @@ const AutoImage: React.FC<
height: number | string;
width?: number | string;
autoSize?: boolean;
preview?: boolean;
onLoad?: () => void;
}
> = (props) => {
const { height = 100, width: w, autoSize, ...rest } = props;
const { height = 100, width: w, autoSize, preview = true, ...rest } = props;
const [width, setWidth] = useState(w || 0);
const [isError, setIsError] = useState(false);
@@ -88,35 +89,37 @@ const AutoImage: React.FC<
onLoad={handleImgLoad}
fallback={fallbackImg}
crossOrigin="anonymous"
preview={{
mask: <EyeOutlined />,
toolbarRender: (
_,
{
transform: { scale },
actions: {
onFlipY,
onFlipX,
onRotateLeft,
onRotateRight,
onZoomOut,
onZoomIn,
onReset
preview={
preview ?? {
mask: <EyeOutlined />,
toolbarRender: (
_,
{
transform: { scale },
actions: {
onFlipY,
onFlipX,
onRotateLeft,
onRotateRight,
onZoomOut,
onZoomIn,
onReset
}
}
}
) => (
<Space size={12} className="toolbar-wrapper">
<DownloadOutlined onClick={onDownload} />
<SwapOutlined rotate={90} onClick={onFlipY} />
<SwapOutlined onClick={onFlipX} />
<RotateLeftOutlined onClick={onRotateLeft} />
<RotateRightOutlined onClick={onRotateRight} />
<ZoomOutOutlined disabled={scale === 1} onClick={onZoomOut} />
<ZoomInOutlined disabled={scale === 50} onClick={onZoomIn} />
<UndoOutlined onClick={onReset} />
</Space>
)
}}
) => (
<Space size={12} className="toolbar-wrapper">
<DownloadOutlined onClick={onDownload} />
<SwapOutlined rotate={90} onClick={onFlipY} />
<SwapOutlined onClick={onFlipX} />
<RotateLeftOutlined onClick={onRotateLeft} />
<RotateRightOutlined onClick={onRotateRight} />
<ZoomOutOutlined disabled={scale === 1} onClick={onZoomOut} />
<ZoomInOutlined disabled={scale === 50} onClick={onZoomIn} />
<UndoOutlined onClick={onReset} />
</Space>
)
}
}
/>
);
};
src/components/auto-image/progress-line.less
+44
View File
@@ -0,0 +1,44 @@
.img-wrapper {
position: relative;
display: inline-block;
}
.img-wrapper .auto-image {
display: block;
}
.img-wrapper .progress-wrapper {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
}
.progress-square {
width: 100%;
height: 100%;
transform: rotate(0deg);
}
.progress-square-bg {
fill: none;
}
.progress-square-fg {
fill: none;
stroke-linecap: square;
stroke-dasharray: 400;
stroke-dashoffset: 400;
transition: stroke-dashoffset 0.3s ease;
}
.progress-text {
position: absolute;
color: black;
font-size: 20px;
font-weight: bold;
}
src/components/auto-image/single-image.less
+7
View File
@@ -8,6 +8,13 @@
border-radius: var(--border-radius-base);
overflow: hidden;
.progress-wrapper {
position: absolute;
bottom: 20px;
left: 20px;
right: 20px;
}
.img {
display: flex;
width: auto;
src/components/auto-image/single-image.tsx
+79 -13
View File
@@ -1,11 +1,10 @@
import { CloseCircleOutlined } from '@ant-design/icons';
import { Progress } from 'antd';
import { Progress, Tooltip } from 'antd';
import classNames from 'classnames';
import ResizeObserver from 'rc-resize-observer';
import React, { useCallback } from 'react';
import AutoImage from './index';
import './single-image.less';
interface SingleImageProps {
loading?: boolean;
width?: number;
@@ -15,17 +14,23 @@ interface SingleImageProps {
maxWidth?: number;
dataUrl: string;
uid: number;
preview?: boolean;
autoSize?: boolean;
onDelete: (uid: number) => void;
onClick?: (item: any) => void;
autoBgColor?: boolean;
editable?: boolean;
style?: React.CSSProperties;
progressType?: 'line' | 'circle' | 'dashboard';
progressColor?: string;
progressWidth?: number;
}
const SingleImage: React.FC<SingleImageProps> = (props) => {
const {
editable,
onDelete: handleOnDelete,
onClick,
autoSize,
uid,
loading,
@@ -36,10 +41,13 @@ const SingleImage: React.FC<SingleImageProps> = (props) => {
maxWidth,
dataUrl,
style,
autoBgColor
autoBgColor,
progressColor = 'var(--ant-color-primary)',
progressWidth = 2,
preview = true,
progressType = 'dashboard'
} = props;
const [color, setColor] = React.useState({});
const imgWrapper = React.useRef<HTMLSpanElement>(null);
const [imgSize, setImgSize] = React.useState({
width: width,
@@ -50,6 +58,10 @@ const SingleImage: React.FC<SingleImageProps> = (props) => {
return loading ? { width: '100%', height: '100%' } : {};
}, [loading, imgSize]);
const handleOnClick = useCallback(() => {
onClick?.(props);
}, [onClick, props]);
const handleResize = useCallback(
(size: { width: number; height: number }) => {
if (!autoSize) return;
@@ -119,18 +131,47 @@ const SingleImage: React.FC<SingleImageProps> = (props) => {
overflow: 'hidden'
}}
>
<Progress
percent={progress}
type="dashboard"
steps={{ count: 50, gap: 2 }}
format={() => (
<span className="font-size-20">{progress}%</span>
)}
trailColor="var(--ant-color-fill-secondary)"
/>
{progressType === 'dashboard' ? (
<Progress
percent={progress}
type="dashboard"
steps={{ count: 50, gap: 2 }}
format={() => (
<span className="font-size-20">{progress}%</span>
)}
trailColor="var(--ant-color-fill-secondary)"
/>
) : (
<span
className="progress-wrapper"
style={{ bottom: 'unset' }}
>
<Tooltip title={`${progress}%`} open={true}>
<Progress
style={{
paddingInline: 0,
borderRadius: 12,
display: 'flex',
alignItems: 'center',
backgroundColor: 'rgba(0,0,0,0.5)'
}}
percent={progress}
percentPosition={{
align: 'center',
type: 'inner'
}}
type="line"
size={[undefined, 6]}
strokeLinecap="round"
strokeColor="var(--color-white-1)"
/>
</Tooltip>
</span>
)}
</span>
) : (
<span
onClick={handleOnClick}
className="img"
style={{
maxHeight: `min(${maxHeight}, 100%)`,
@@ -138,12 +179,37 @@ const SingleImage: React.FC<SingleImageProps> = (props) => {
}}
>
<AutoImage
preview={preview}
autoSize={autoSize}
src={dataUrl}
width={imgSize.width || 100}
height={imgSize.height || 100}
onLoad={handleOnLoad}
/>
{progress && progress < 100 && (
<span className="progress-wrapper">
<Tooltip title={`${progress}%`} open={true}>
<Progress
style={{
paddingInline: 0,
borderRadius: 12,
display: 'flex',
alignItems: 'center',
backgroundColor: 'rgba(0,0,0,0.5)'
}}
percent={progress}
percentPosition={{
align: 'center',
type: 'inner'
}}
type="line"
size={[undefined, 6]}
strokeLinecap="round"
strokeColor="var(--color-white-1)"
/>
</Tooltip>
</span>
)}
</span>
)}
</>
src/components/image-editor/index.less
+18
View File
@@ -0,0 +1,18 @@
.editor-wrapper {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
.tools {
margin-bottom: 10px;
display: flex;
gap: 10px;
}
.editor-content {
display: flex;
justify-content: center;
align-items: center;
}
}
src/components/image-editor/index.tsx
+433
View File
@@ -0,0 +1,433 @@
import {
DownloadOutlined,
FormatPainterOutlined,
SaveOutlined,
SyncOutlined,
UndoOutlined
} from '@ant-design/icons';
import { Button, Slider, Tooltip } from 'antd';
import React, { useCallback, useEffect, useRef, useState } from 'react';
import './index.less';
type Point = { x: number; y: number };
type Stroke = { start: Point; end: Point };
type CanvasImageEditorProps = {
imageSrc: string;
disabled?: boolean;
onSave: (imageData: string) => void;
uploadButton: React.ReactNode;
};
const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
imageSrc,
disabled,
onSave,
uploadButton
}) => {
const COLOR = 'rgba(0, 0, 255, 0.3)';
const canvasRef = useRef<HTMLCanvasElement>(null);
const overlayCanvasRef = useRef<HTMLCanvasElement>(null);
const containerRef = useRef<HTMLDivElement>(null);
const [lineWidth, setLineWidth] = useState<number>(30);
const [strokes, setStrokes] = useState<Stroke[]>([]);
const isDrawing = useRef<boolean>(false);
const lastPoint = useRef<Point | null>(null);
const imgLoaded = useRef<boolean>(false);
const currentPoint = useRef<Point | null>(null);
const [cursorVisible, setCursorVisible] = useState(false);
const [cursorPosition, setCursorPosition] = useState<Point | null>(null);
useEffect(() => {
console.log('Image src:', imageSrc);
if (!containerRef.current || !canvasRef.current) return;
imgLoaded.current = false;
const canvas = canvasRef.current;
const overlayCanvas = overlayCanvasRef.current;
const ctx = canvas!.getContext('2d');
const img = new Image();
img.src = imageSrc;
img.onload = () => {
const container = containerRef.current;
const scale = Math.min(
container!.offsetWidth / img.width,
container!.offsetHeight / img.height,
1
);
canvas!.width = img.width * scale;
canvas!.height = img.height * scale;
overlayCanvas!.width = canvas!.width;
overlayCanvas!.height = canvas!.height;
ctx!.clearRect(0, 0, canvas.width, canvas.height);
ctx!.drawImage(img, 0, 0, canvas!.width, canvas!.height);
imgLoaded.current = true;
};
}, [imageSrc, containerRef.current, canvasRef.current]);
const handleResize = useCallback(() => {
const container = containerRef.current;
const canvas = canvasRef.current;
const overlayCanvas = overlayCanvasRef.current;
if (
!container ||
!canvas ||
!overlayCanvas ||
!overlayCanvas.width ||
!overlayCanvas.height
)
return;
console.log(
'disconnect:',
container,
canvas,
overlayCanvas,
overlayCanvas.width,
overlayCanvas.height
);
// Save current overlay content
const imgData = overlayCanvas
.getContext('2d')!
.getImageData(0, 0, overlayCanvas.width, overlayCanvas.height);
const img = new Image();
img.src = imageSrc;
img.onload = () => {
// Recalculate scale
const scale = Math.min(
container.offsetWidth / img.width,
container.offsetHeight / img.height,
1
);
// Update canvas dimensions
canvas.width = img.width * scale;
canvas.height = img.height * scale;
overlayCanvas.width = canvas.width;
overlayCanvas.height = canvas.height;
// Redraw background image
const ctx = canvas.getContext('2d');
ctx!.clearRect(0, 0, canvas.width, canvas.height);
ctx!.drawImage(img, 0, 0, canvas.width, canvas.height);
// Restore overlay content
overlayCanvas.getContext('2d')!.putImageData(imgData, 0, 0);
};
}, [imageSrc, containerRef.current, canvasRef.current]);
const handleMouseEnter = () => {
setCursorVisible(true);
};
const mapMousePosition = (
e: React.MouseEvent<HTMLCanvasElement>,
canvas: HTMLCanvasElement
) => {
const rect = canvas.getBoundingClientRect();
const scaleX = canvas.width / rect.width;
const scaleY = canvas.height / rect.height;
return {
x: (e.clientX - rect.left) * scaleX,
y: (e.clientY - rect.top) * scaleY
};
};
const handleMouseMove = (e: React.MouseEvent<HTMLCanvasElement>) => {
const { offsetX, offsetY } = e.nativeEvent;
setCursorPosition({ x: offsetX, y: offsetY });
};
const handleMouseLeave = () => {
setCursorVisible(false);
setCursorPosition(null);
};
useEffect(() => {
const resizeObserver = new ResizeObserver(() => {
handleResize();
});
const container = containerRef.current;
if (container) resizeObserver.observe(container);
return () => {
resizeObserver.disconnect();
};
}, [handleResize, strokes, containerRef.current]);
const generateMask = useCallback(() => {
const canvas = overlayCanvasRef.current!;
const finalImage = document.createElement('canvas');
finalImage.width = canvas.width;
finalImage.height = canvas.height;
const finalCtx = finalImage.getContext('2d');
// Create the transparent overlay
finalCtx!.fillStyle = 'black';
finalCtx!.fillRect(0, 0, finalImage.width, finalImage.height);
finalCtx!.globalCompositeOperation = 'destination-out';
finalCtx!.drawImage(canvas, 0, 0);
onSave(finalImage.toDataURL('image/png'));
}, [onSave]);
const downloadMask = useCallback(() => {
const canvas = overlayCanvasRef.current!;
const maskCanvas = document.createElement('canvas');
maskCanvas.width = canvas.width;
maskCanvas.height = canvas.height;
const maskCtx = maskCanvas.getContext('2d');
// set the background to black
maskCtx!.fillStyle = 'black';
maskCtx!.fillRect(0, 0, maskCanvas.width, maskCanvas.height);
maskCtx!.globalCompositeOperation = 'destination-out';
maskCtx!.drawImage(canvas, 0, 0);
const link = document.createElement('a');
link.download = 'mask.png';
link.href = maskCanvas.toDataURL('image/png');
link.click();
}, []);
const draw = (e: React.MouseEvent<HTMLCanvasElement>) => {
if (!isDrawing.current || !lastPoint.current || !currentPoint.current)
return;
const { offsetX, offsetY } = e.nativeEvent;
currentPoint.current = { x: offsetX, y: offsetY };
const ctx = overlayCanvasRef.current!.getContext('2d');
ctx!.save(); // 保存当前状态
// 1. 清除当前路径重叠的部分
ctx!.globalCompositeOperation = 'destination-out';
ctx!.lineWidth = lineWidth;
ctx!.lineCap = 'round';
ctx!.lineJoin = 'round';
ctx!.beginPath();
ctx!.moveTo(lastPoint.current.x, lastPoint.current.y);
ctx!.lineTo(offsetX, offsetY);
ctx!.stroke();
// 2. 重新绘制带颜色的路径
ctx!.globalCompositeOperation = 'source-over';
ctx!.strokeStyle = COLOR;
ctx!.beginPath();
ctx!.moveTo(lastPoint.current.x, lastPoint.current.y);
ctx!.lineTo(offsetX, offsetY);
ctx!.stroke();
ctx!.restore(); // 恢复状态
// lastPoint.current = { x: offsetX, y: offsetY };
};
const startDrawing = (e: React.MouseEvent<HTMLCanvasElement>) => {
isDrawing.current = true;
lastPoint.current = null;
currentPoint.current = null;
const { offsetX, offsetY } = e.nativeEvent;
console.log('Start Drawing:', { x: offsetX, y: offsetY });
lastPoint.current = { x: offsetX, y: offsetY };
currentPoint.current = { x: offsetX, y: offsetY };
draw(e);
};
const endDrawing = () => {
console.log('End Drawing:', lastPoint.current);
if (!lastPoint.current || !currentPoint.current) return;
isDrawing.current = false;
const copyLastPoint = { ...lastPoint.current };
const copyCurrentPoint = { ...currentPoint.current };
setStrokes((prevStrokes) => [
...prevStrokes,
{
start: { x: copyLastPoint!.x, y: copyLastPoint!.y },
end: { x: copyCurrentPoint!.x, y: copyCurrentPoint!.y }
}
]);
lastPoint.current = null;
currentPoint.current = null;
generateMask();
};
const onClear = () => {
const ctx = overlayCanvasRef.current!.getContext('2d');
ctx!.clearRect(
0,
0,
overlayCanvasRef.current!.width,
overlayCanvasRef.current!.height
);
setStrokes([]);
lastPoint.current = null;
};
const undo = () => {
if (strokes.length === 0) return;
const newStrokes = strokes.slice(0, -1);
setStrokes(newStrokes);
const ctx = overlayCanvasRef.current!.getContext('2d');
ctx!.clearRect(
0,
0,
overlayCanvasRef.current!.width,
overlayCanvasRef.current!.height
);
newStrokes.forEach((stroke) => {
ctx!.globalCompositeOperation = 'source-over';
ctx!.strokeStyle = COLOR;
ctx!.lineWidth = lineWidth;
ctx!.lineCap = 'round';
ctx!.lineJoin = 'round';
ctx!.beginPath();
ctx!.moveTo(stroke.start.x, stroke.start.y);
ctx!.lineTo(stroke.end.x, stroke.end.y);
ctx!.stroke();
});
};
const download = () => {
// download the canvasRef as an image
const canvas = canvasRef.current!;
const link = document.createElement('a');
link.download = 'image.png';
link.href = canvas.toDataURL('image/png');
link.click();
link.remove();
};
useEffect(() => {
const handleUndoShortcut = (e: KeyboardEvent) => {
if ((e.ctrlKey || e.metaKey) && e.key === 'z') {
undo();
}
};
window.addEventListener('keydown', handleUndoShortcut);
return () => {
window.removeEventListener('keydown', handleUndoShortcut);
};
}, [strokes]);
return (
<div className="editor-wrapper">
<div className="flex-between">
<div className="tools">
<Tooltip
placement="bottomLeft"
arrow={false}
overlayInnerStyle={{
background: 'var(--color-white-1)',
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-start',
width: 160
}}
title={
<div className="flex-column" style={{ width: '100%' }}>
<span className="text-secondary">Brush Size</span>
<Slider
disabled={disabled}
style={{ marginBlock: '4px 6px', marginLeft: 0, flex: 1 }}
vertical={false}
defaultValue={lineWidth}
min={1}
max={60}
onChange={(value) => setLineWidth(value)}
/>
</div>
}
>
<Button size="middle" type="text">
<FormatPainterOutlined className="font-size-14" />
</Button>
</Tooltip>
<Tooltip title="Undo">
<Button
onClick={undo}
size="middle"
type="text"
disabled={disabled}
>
<UndoOutlined className="font-size-14" />
</Button>
</Tooltip>
{uploadButton}
<Tooltip title="Reset">
<Button
onClick={onClear}
size="middle"
type="text"
disabled={disabled}
>
<SyncOutlined className="font-size-14" />
</Button>
</Tooltip>
</div>
<div className="tools">
<Tooltip title="Save Mask">
<Button onClick={downloadMask} size="middle" type="text">
<SaveOutlined className="font-size-14" />
</Button>
</Tooltip>
<Tooltip title="Download">
<Button onClick={download} size="middle" type="text">
<DownloadOutlined className="font-size-14" />
</Button>
</Tooltip>
</div>
</div>
<div
className="editor-content"
ref={containerRef}
style={{ position: 'relative', width: '100%', height: '100%', flex: 1 }}
>
<canvas ref={canvasRef} style={{ position: 'absolute', zIndex: 1 }} />
<canvas
ref={overlayCanvasRef}
style={{ position: 'absolute', zIndex: 2 }}
onMouseDown={startDrawing}
onMouseUp={endDrawing}
onMouseMove={(e) => {
draw(e);
}}
onMouseLeave={(e) => {
endDrawing();
}}
/>
{cursorVisible && (
<div
style={{
position: 'absolute',
top: cursorPosition?.y,
left: cursorPosition?.x,
width: lineWidth,
height: lineWidth,
backgroundColor: COLOR,
borderRadius: '50%',
pointerEvents: 'none',
zIndex: 3
}}
/>
)}
</div>
</div>
);
};
export default React.memo(CanvasImageEditor);
src/global.less
+4
View File
@@ -636,6 +636,10 @@ body {
}
}
.ant-upload.ant-upload-drag {
background: none;
}
.ant-message-notice-wrapper {
.ant-message-notice-error {
.ant-message-notice-content {
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 = `
src/utils/fetch-chunk-data.ts
+56 -1
View File
@@ -1,5 +1,4 @@
import qs from 'query-string';
const extractStreamRegx = /data:\s*({.*?})(?=\n|$)/g;
const extractJSON = (dataStr: string) => {
@@ -68,6 +67,62 @@ export const fetchChunkedData = async (params: {
};
};
const createFormData = (data: any): FormData => {
const formData = new FormData();
const appendToFormData = (key: string, value: any) => {
if (value instanceof File) {
// 处理文件类型
formData.append(key, value);
} else if (typeof value === 'object' && value !== null) {
// 如果是对象或数组，序列化为 JSON 字符串
formData.append(key, JSON.stringify(value));
} else {
// 处理基本数据类型
formData.append(key, String(value));
}
};
for (const key in data) {
if (Object.prototype.hasOwnProperty.call(data, key)) {
appendToFormData(key, data[key]);
}
}
return formData;
};
export const fetchChunkedDataPostFormData = async (params: {
data?: any;
url: string;
params?: any;
signal?: AbortSignal;
method?: string;
headers?: any;
}) => {
const { url } = params;
const response = await fetch(url, {
method: 'POST',
body: createFormData(params.data),
signal: params.signal
});
console.log('response====', response);
if (!response.ok) {
return {
error: true,
data: await response.json()
};
}
const reader = response?.body?.getReader();
const decoder = new TextDecoder('utf-8', {
fatal: true
});
return {
reader,
decoder
};
};
export const readStreamData = async (
reader: any,
decoder: TextDecoder,
src/utils/index.ts
+33
View File
@@ -140,3 +140,36 @@ export const generateRandomNumber = () => {
// 16: 0x1000；32:0x100000000
return Math.floor(Math.random() * 0x100000000);
};
function base64ToBlob(base64: string, contentType = '', sliceSize = 512) {
const byteCharacters = atob(base64.split(',')[1]); // 去掉 Base64 前缀部分
const byteArrays = [];
for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
const slice = byteCharacters.slice(offset, offset + sliceSize);
const byteNumbers = new Array(slice.length);
for (let i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
}
const byteArray = new Uint8Array(byteNumbers);
byteArrays.push(byteArray);
}
return new Blob(byteArrays, { type: contentType });
}
export const base64ToFile = (base64String: string, fileName: string) => {
if (!base64String) {
return null;
}
console.log('base64String:', base64String);
const match = base64String.match(/data:(.*?);base64,/);
if (!match) {
throw new Error('Invalid base64 string');
}
const contentType = match[1];
const blob = base64ToBlob(base64String, contentType);
return new File([blob], fileName || contentType, { type: contentType });
};