Skip to content

Commit

Permalink
feat: add random color changing feature
Browse files Browse the repository at this point in the history
  • Loading branch information
@rockbenben
rockbenben committed Sep 3, 2024
1 parent 0fbd810 commit f04ef20
Show file tree
Hide file tree
Showing 2 changed files with 171 additions and 7 deletions.
32 changes: 27 additions & 5 deletions src/app/components/ResultSection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React, { FC, useState, useEffect, useCallback } from "react";
import { Button, Input, message, Tooltip, Typography, Space, Flex, Tag } from "antd";
import { copyToClipboard } from "./copyToClipboard";
import { translateText } from "./translateAPI";
import { CONSTANT_TEXT_1, CONSTANT_TEXT_2, NEGATIVE_TEXT, TIPS_TEXT_1, TIPS_TEXT_2 } from "../constants";
import { CONSTANT_TEXT_1, CONSTANT_TEXT_2, NEGATIVE_TEXT, TIPS_TEXT_1, TIPS_TEXT_2, colorArray } from "../constants";

interface Tag {
attribute: string | undefined;
Expand All @@ -21,6 +21,10 @@ const normalizeText = (text: string) => {
return text.toLowerCase().replace(/[_-\s]+/g, " ");
};

const getRandomColor = () => {
return colorArray[Math.floor(Math.random() * colorArray.length)];
};

const ResultSection: FC<ResultSectionProps> = ({ selectedTags = [], setSelectedTags, tagsData }) => {
const [resultText, setResultText] = useState(selectedTags.map((tag) => tag.displayName).join(", "));
const [suggestedTags, setSuggestedTags] = useState<Tag[]>([]);
Expand Down Expand Up @@ -111,10 +115,11 @@ const ResultSection: FC<ResultSectionProps> = ({ selectedTags = [], setSelectedT
);

const handleSuggestTagClick = (tag: Tag) => {
setIsComposing(false); // 强制结束当前的输入法状态，避免中文输入法兼容问题

const newSelectedTags = [...selectedTags];
const lastTagIndex = newSelectedTags.length - 1;
if (lastTagIndex >= 0) {
newSelectedTags[lastTagIndex] = tag;
if (newSelectedTags.length > 0) {
newSelectedTags[newSelectedTags.length - 1] = tag;
} else {
newSelectedTags.push(tag);
}
Expand All @@ -126,7 +131,7 @@ const ResultSection: FC<ResultSectionProps> = ({ selectedTags = [], setSelectedT
const handleBlur = useCallback(() => {
let replacedText = resultText
.replace(/，/g, ", ")
.replace(/\s*,\s*/g, ", ")
//.replace(/\s*,\s*/g, ", ") //避免组合标签被拆分
.replace(/\s+/g, " ");

const displayNames = replacedText.split(", ").filter((name) => name.trim() !== "");
Expand Down Expand Up @@ -216,6 +221,20 @@ const ResultSection: FC<ResultSectionProps> = ({ selectedTags = [], setSelectedT
}
};

const handleColorReplace = () => {
let updatedText = resultText;

const combinedColorRegex = new RegExp(`\\b(${colorArray.join("|")})\\b`, "gi");

updatedText = updatedText.replace(combinedColorRegex, (match) => {
const newColor = getRandomColor();
console.log(`Replacing ${match} with ${newColor}`);
return newColor;
});

setResultText(updatedText);
};

return (
<>
<Space wrap>
Expand Down Expand Up @@ -279,6 +298,9 @@ const ResultSection: FC<ResultSectionProps> = ({ selectedTags = [], setSelectedT
<br />
{TIPS_TEXT_2}
</Typography.Paragraph>
<Tooltip title="随机替换描述中的颜色">
<Button onClick={handleColorReplace}>随机换色</Button>
</Tooltip>
</>
);
};
Expand Down
146 changes: 144 additions & 2 deletions src/app/constants.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,155 @@
export const NEGATIVE_TEXT =
"(worst quality:2), (low quality:2), (normal quality:2), lowres, jpeg artifacts, blurry, ((monochrome)), ((grayscale)), ugly, duplicate, morbid, mutilated, mutation, deformed, extra fingers, mutated hands, poorly drawn hands, poorly drawn face, missing fingers, extra digit, fewer digits, fused fingers, too many fingers, bad anatomy, bad hands, bad feet, malformed limbs, extra limbs, extra arms, extra legs, missing arms, missing legs, extra foot, bad body, bad proportions, gross proportions, facing away, looking away, tilted head, long neck, cross-eyed, skin spots, acnes, skin blemishes, (fat:1.2), polar lowres, teethcropped, dehydrated, text, error, cropped, out of frame, signature, watermark, username,";
"(normal aesthetic,bad aesthetic,worst quality,low quality,medium quality,illustration,3d,2d,painting,cartoons,sketch:1.4),(blurry:1.4),(depth of field,bokeh,blurred foreground),ugly,bad anatomy,poorly drawn face,poorly drawn hands,deformed,mutation,mutated hands,malformed limbs,extra fingers,extra arms,extra legs,extra limbs,missing fingers,fused fingers,missing arms,missing legs,bad proportions,extra digit,extra foot,bad body,bad feet,duplicate,long neck,tilted head,cross-eyed,looking away,facing away,gross proportions,fewer digits,morbid,mutilated,skin blemishes,skin spots,acnes,(fat:1.2),dehydrated,monochrome,grayscale,polar lowres,lowres,jpeg artifacts,cropped,teethcropped,text,error,signature,watermark,username,out of frame";

export const CONSTANT_TEXT_1 = "Natural Lighting, Studio lighting, Cinematic Lighting, Crepuscular Rays, X-Ray, Backlight";

export const CONSTANT_TEXT_2 =
"insanely detailed and intricate, gorgeous, Surrealistic, smooth, sharp focus, Painting, Digital Art, Concept Art, Illustration, Trending on ArtStation, in a symbolic and meaningful style, 8K";
"insanely detailed and intricate, masterpiece, high_contrast, best quality, best aesthetic, stunning, Gorgeous, Surrealistic, Elegant, luxurious, subtle, delicate, captivating, in a symbolic and meaningful style, 8K";

export const TIPS_TEXT_1 =
"Tips：Prompt 中的词语顺序代表其权重，越靠前权重越大。物体不要太多，两到三个就好。若要特别强调某个元素，可以加很多括号或者惊叹号，比如 beautiful forest background, desert!!, (((sunset))) 中会优先体现「desert」和「sunset」元素。";

export const TIPS_TEXT_2 =
"假设你在提示词中使用了 mountain，生成的图像很可能会有树。但如果你想要生成没有树的山的图像，可以使用 mountain | tree:-10。其中 tree:-10 表示对于树的权重非常负，因此生成的图像中不会出现树。";

export const colorArray = [
"white",
"black",
"darkgray",
"gray",
"lightslategray",
"slategray",
"darkslategray",
"lightgray",
"gainsboro",
"whitesmoke",
"snow",
"ghostwhite",
"floralwhite",
"linen",
"antiquewhite",
"oldlace",
"ivory",
"seashell",
"mintcream",
"honeydew",
"azure",
"aliceblue",
"lavender",
"lightsteelblue",
"slateblue",
"mediumslateblue",
"lightblue",
"powderblue",
"skyblue",
"cornflowerblue",
"royalblue",
"mediumblue",
"blue",
"darkblue",
"navy",
"midnightblue",
"teal",
"darkcyan",
"cadetblue",
"mediumturquoise",
"darkturquoise",
"turquoise",
"paleturquoise",
"aquamarine",
"lightcyan",
"cyan",
"dodgerblue",
"darkgreen",
"green",
"forestgreen",
"seagreen",
"mediumseagreen",
"mediumaquamarine",
"darkseagreen",
"lightseagreen",
"springgreen",
"mediumspringgreen",
"lightgreen",
"palegreen",
"lime",
"limegreen",
"lawngreen",
"chartreuse",
"greenyellow",
"yellowgreen",
"darkolivegreen",
"olivedrab",
"olive",
"darkkhaki",
"khaki",
"palegoldenrod",
"lightyellow",
"lightgoldenrodyellow",
"lemonchiffon",
"beige",
"cornsilk",
"wheat",
"burlywood",
"gold",
"yellow",
"darkorange",
"orange",
"sandybrown",
"peachpuff",
"papayawhip",
"blanchedalmond",
"bisque",
"moccasin",
"navajowhite",
"peru",
"darkgoldenrod",
"goldenrod",
"chocolate",
"saddlebrown",
"sienna",
"rosybrown",
"darksalmon",
"salmon",
"lightsalmon",
"indianred",
"firebrick",
"brown",
"maroon",
"darkred",
"red",
"orangered",
"tomato",
"crimson",
"coral",
"lightpink",
"pink",
"hotpink",
"deeppink",
"palevioletred",
"mediumvioletred",
"lavenderblush",
"lightcoral",
"plum",
"mediumorchid",
"violet",
"magenta",
"fuchsia",
"darkmagenta",
"purple",
"darkorchid",
"darkviolet",
"blueviolet",
"mediumpurple",
"indigo",
"light_brown",
"dark_pink",
"blonde",
"silver",
"mistyrose",
"steelblue",
"thistle",
"darkslateblue",
"Iridescent",
"Chromatic",
];

0 comments on commit f04ef20

Please sign in to comment.