Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: image edit api #270

Merged
merged 2 commits into from
Dec 30, 2024
Merged

chore: image edit api #270

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2552a44
chore: image edit api
hibig Dec 27, 2024
2ef22f0
chore: update edit api
hibig Dec 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions src/components/auto-image/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ const AutoImage: React.FC<
return;
}
const { ratio } = await getImgRatio(props.src || '');
console.log('ratio', ratio);
if (typeof height === 'number') {
setWidth(height * ratio);
} else {
Expand All @@ -66,6 +67,7 @@ const AutoImage: React.FC<

const handleImgLoad = useCallback(() => {
props.onLoad?.();
setIsError(false);
}, [props.onLoad]);

const handleOnError = () => {
Expand Down
2 changes: 1 addition & 1 deletion src/components/icon-font/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { createFromIconfontCN } from '@ant-design/icons';
// import './iconfont/iconfont.js';

const IconFont = createFromIconfontCN({
scriptUrl: '//at.alicdn.com/t/c/font_4613488_hdf3t88r4j.js'
scriptUrl: '//at.alicdn.com/t/c/font_4613488_bslq45omhet.js'
});

export default IconFont;
46 changes: 35 additions & 11 deletions src/components/image-editor/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ type Stroke = Point[];
type CanvasImageEditorProps = {
imageSrc: string;
disabled?: boolean;
onSave: (imageData: string) => void;
onSave: (imageData: { mask: string; img: string }) => void;
uploadButton: React.ReactNode;
imageStatus: {
isOriginal: boolean;
Expand Down Expand Up @@ -131,20 +131,44 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
const maskCanvas = document.createElement('canvas');
maskCanvas.width = overlayCanvas.width;
maskCanvas.height = overlayCanvas.height;
const maskCtx = maskCanvas.getContext('2d');
const maskCtx = maskCanvas.getContext('2d')!;
const overlayCtx = overlayCanvas.getContext('2d')!;

const imageData = overlayCtx.getImageData(
0,
0,
overlayCanvas.width,
overlayCanvas.height
);
const data = imageData.data;

for (let i = 0; i < data.length; i += 4) {
const alpha = data[i + 3];
if (alpha > 0) {
data[i] = 255; // Red
data[i + 1] = 255; // Green
data[i + 2] = 255; // Blue
data[i + 3] = 255; // Alpha
}
}
maskCtx.putImageData(imageData, 0, 0);

// Create the transparent overlay
maskCtx!.fillStyle = 'black';
maskCtx!.fillRect(0, 0, maskCanvas.width, maskCanvas.height);
maskCtx!.globalCompositeOperation = 'destination-out';
maskCtx!.drawImage(overlayCanvas, 0, 0);
maskCtx.globalCompositeOperation = 'destination-over';
maskCtx.fillStyle = 'black';
maskCtx.fillRect(0, 0, maskCanvas.width, maskCanvas.height);

return maskCanvas.toDataURL('image/png');
}, []);

const saveMask = useCallback(() => {
const generateImage = useCallback(() => {
const canvas = canvasRef.current!;
return canvas.toDataURL('image/png');
}, []);

const saveImage = useCallback(() => {
const mask = generateMask();
onSave(mask);
const img = generateImage();
onSave({ mask, img });
}, [onSave, generateMask]);

const downloadMask = useCallback(() => {
Expand Down Expand Up @@ -273,7 +297,7 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({

currentStroke.current = [];

saveMask();
saveImage();
};

const clearOverlayCanvas = useCallback(() => {
Expand Down Expand Up @@ -560,7 +584,7 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = ({
<div className="tools">
<Tooltip title="Save Mask">
<Button onClick={downloadMask} size="middle" type="text">
<IconFont className="font-size-14" type="icon-save1"></IconFont>
<IconFont className="font-size-14" type="icon-save2"></IconFont>
</Button>
</Tooltip>
<Tooltip title="Download">
Expand Down
4 changes: 2 additions & 2 deletions src/components/status-tag/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ const StatusTag: React.FC<StatusTagProps> = ({
></CopyButton>
{actions?.map((item) => {
return (
<>
<div key={item.key}>
<Divider
style={{
marginBlock: 5,
Expand All @@ -99,7 +99,7 @@ const StatusTag: React.FC<StatusTagProps> = ({
<span className="font-size-14">{item.icon}</span>
</Button>
</Tooltip>
</>
</div>
);
})}
</div>
Expand Down
9 changes: 9 additions & 0 deletions src/pages/playground/components/ground-images.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@ const advancedFieldsDefaultValus = {
seed: null,
sample_method: 'euler_a',
cfg_scale: 4.5,
guidance: 3.5,
sampling_steps: 10,
negative_prompt: null,
schedule_method: 'discrete',
Expand Down Expand Up @@ -404,6 +405,9 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
}
const formValues = form.current?.form?.getFieldsValue();
return ImageAdvancedParamsConfig.map((item: ParamsSchema) => {
if (item.name === 'strength') {
return null;
}
return (
<Form.Item
name={item.name}
Expand All @@ -418,6 +422,11 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
? 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'])}
></FieldComponent>
Expand Down
25 changes: 20 additions & 5 deletions src/pages/playground/components/image-edit.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,8 @@ const advancedFieldsDefaultValus = {
seed: 1,
sample_method: 'euler_a',
cfg_scale: 4.5,
guidance: 3.5,
strength: 0.75,
sampling_steps: 10,
negative_prompt: null,
preview: null,
Expand Down Expand Up @@ -152,10 +154,12 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
}, [parameters.n]);

const imageFile = useMemo(() => {
console.log('image:', image);
return base64ToFile(image, 'image');
}, [image]);

const maskFile = useMemo(() => {
console.log('mask:', mask);
return base64ToFile(mask, 'mask');
}, [mask]);

Expand Down Expand Up @@ -222,7 +226,9 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
setCurrentPrompt(current?.content || '');
setRouteCache(routeCachekey.playgroundTextToImage, true);

const imgSize = _.split(finalParameters.size, 'x');
const imgSize = _.split(finalParameters.size, 'x').map((item: string) =>
_.toNumber(item)
);

// preview
let stream_options: Record<string, any> = {
Expand Down Expand Up @@ -278,9 +284,12 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {

const result: any = await fetchChunkedData({
data: params,
// url: `http://192.168.50.174:40935/v1/images/edits?t=${Date.now()}`,
url: `${EDIT_IMAGE_API}?t=${Date.now()}`,
signal: requestToken.current.signal
});

console.log('result:', result);
if (result.error) {
setTokenResult({
error: true,
Expand Down Expand Up @@ -432,6 +441,11 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
? 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'])}
></FieldComponent>
Expand Down Expand Up @@ -494,16 +508,16 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
setImageList([]);
}, []);

const handleOnSave = useCallback((url: string) => {
const handleOnSave = useCallback((data: { img: string; mask: string }) => {
setImageStatus({
isOriginal: true,
isResetNeeded: false
});
setMask(url);
setMask(data.mask);
setImage(data.img);
}, []);

const renderImageEditor = useMemo(() => {
console.log('image:', image);
if (image) {
return (
<CanvasImageEditor
Expand All @@ -517,6 +531,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
disabled={loading}
handleUpdateImgList={handleUpdateImageList}
size="middle"
accept="image/png"
></UploadImg>
</Tooltip>
}
Expand All @@ -525,6 +540,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
}
return (
<UploadImg
accept="image/png"
drag={true}
multiple={false}
handleUpdateImgList={handleUpdateImageList}
Expand Down Expand Up @@ -676,7 +692,6 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
<div
style={{
height: 125,
minWidth: 125,
maxHeight: 125
}}
key={item.uid}
Expand Down
6 changes: 4 additions & 2 deletions src/pages/playground/components/upload-img.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ interface UploadImgProps {
drag?: boolean;
disabled?: boolean;
children?: React.ReactNode;
accept?: string;
handleUpdateImgList: (
imgList: { dataUrl: string; uid: number | string }[]
) => void;
Expand All @@ -24,6 +25,7 @@ const UploadImg: React.FC<UploadImgProps> = ({
drag = false,
disabled = false,
children,
accept = 'image/*',
size = 'small'
}) => {
const intl = useIntl();
Expand Down Expand Up @@ -81,7 +83,7 @@ const UploadImg: React.FC<UploadImgProps> = ({
{drag ? (
<Upload.Dragger
ref={uploadRef}
accept="image/*"
accept={accept}
multiple={multiple}
action="/"
fileList={[]}
Expand All @@ -104,7 +106,7 @@ const UploadImg: React.FC<UploadImgProps> = ({
) : (
<Upload
ref={uploadRef}
accept="image/*"
accept={accept}
multiple={multiple}
action="/"
fileList={[]}
Expand Down
41 changes: 41 additions & 0 deletions src/pages/playground/config/params-config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -297,6 +297,47 @@ export const ImageAdvancedParamsConfig: ParamsSchema[] = [
}
]
},
{
type: 'InputNumber',
name: 'guidance',
label: {
text: 'Guidance',
isLocalized: false
},
attrs: {
min: 1.0,
max: 10,
step: 0.1
},
rules: [
{
required: false
}
]
},
{
type: 'InputNumber',
name: 'strength',
label: {
text: 'Strength',
isLocalized: false
},
// description: {
// text: '值越高，它对原图的修改越大，更多变化',
// html: false,
// isLocalized: false
// },
attrs: {
min: 0,
max: 1,
step: 0.1
},
rules: [
{
required: false
}
]
},
{
type: 'InputNumber',
name: 'cfg_scale',
Expand Down
6 changes: 3 additions & 3 deletions src/pages/playground/images.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import useWindowResize from '@/hooks/use-window-resize';
import { DiffOutlined, HighlightOutlined } from '@ant-design/icons';
import { PageContainer } from '@ant-design/pro-components';
import { useIntl } from '@umijs/max';
import { Button, Space, Tabs, TabsProps } from 'antd';
import { Button, Segmented, Space, Tabs, TabsProps } from 'antd';
import classNames from 'classnames';
import _ from 'lodash';
import { useCallback, useEffect, useRef, useState } from 'react';
Expand Down Expand Up @@ -155,14 +155,14 @@ const TextToImages: React.FC = () => {
<span className="font-600">
{intl.formatMessage({ id: 'menu.playground.text2images' })}
</span>
{/* {
{
<Segmented
options={optionsList}
size="middle"
className="m-l-40"
onChange={(key) => setActiveKey(key)}
></Segmented>
} */}
}
</div>
),
breadcrumb: {}
Expand Down
Loading