From f04ef20e7def8c14209b6b0ae1244d2a2bf56b57 Mon Sep 17 00:00:00 2001 From: rockbenben Date: Tue, 3 Sep 2024 15:34:19 +0800 Subject: [PATCH] feat: add random color changing feature --- src/app/components/ResultSection.tsx | 32 +++++- src/app/constants.tsx | 146 ++++++++++++++++++++++++++- 2 files changed, 171 insertions(+), 7 deletions(-) diff --git a/src/app/components/ResultSection.tsx b/src/app/components/ResultSection.tsx index bfde071..a99089e 100644 --- a/src/app/components/ResultSection.tsx +++ b/src/app/components/ResultSection.tsx @@ -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; @@ -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 = ({ selectedTags = [], setSelectedTags, tagsData }) => { const [resultText, setResultText] = useState(selectedTags.map((tag) => tag.displayName).join(", ")); const [suggestedTags, setSuggestedTags] = useState([]); @@ -111,10 +115,11 @@ const ResultSection: FC = ({ 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); } @@ -126,7 +131,7 @@ const ResultSection: FC = ({ 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() !== ""); @@ -216,6 +221,20 @@ const ResultSection: FC = ({ 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 ( <> @@ -279,6 +298,9 @@ const ResultSection: FC = ({ selectedTags = [], setSelectedT
{TIPS_TEXT_2} + + + ); }; diff --git a/src/app/constants.tsx b/src/app/constants.tsx index 8ad8078..151c09c 100644 --- a/src/app/constants.tsx +++ b/src/app/constants.tsx @@ -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", +];