126 lines
2.7 KiB
TypeScript
126 lines
2.7 KiB
TypeScript
import type { CSSProperties } from "react";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
export type ReferenceIconName =
|
|
| "home"
|
|
| "folder"
|
|
| "skill"
|
|
| "brand"
|
|
| "plus"
|
|
| "model-auto"
|
|
| "arrow-up"
|
|
| "commerce"
|
|
| "social"
|
|
| "branding"
|
|
| "creativity"
|
|
| "website"
|
|
| "connections"
|
|
| "clipper"
|
|
| "cursor"
|
|
| "pan"
|
|
| "text"
|
|
| "sparkles"
|
|
| "style-controls"
|
|
| "image-enhance"
|
|
| "tutorial"
|
|
| "video"
|
|
| "toolbox"
|
|
| "settings"
|
|
| "profile"
|
|
| "comment"
|
|
| "draw"
|
|
| "image"
|
|
| "layers"
|
|
| "history"
|
|
| "expand"
|
|
| "collapse"
|
|
| "reference"
|
|
| "skill-filled"
|
|
| "brand-filled"
|
|
| "pinterest"
|
|
| "close"
|
|
| "reference-image"
|
|
| "chevron-down"
|
|
| "points"
|
|
| "page"
|
|
| "model-banana"
|
|
| "model-gpt"
|
|
| "model-seedream"
|
|
| "model-luma"
|
|
| "model-flux"
|
|
| "model-midjourney"
|
|
| "model-ideogram"
|
|
| "model-recraft"
|
|
| "image-local-edit"
|
|
| "image-layout-replace"
|
|
| "image-mark"
|
|
| "image-upscale"
|
|
| "image-remove-background"
|
|
| "image-erase"
|
|
| "image-extract-layer"
|
|
| "image-edit-text"
|
|
| "image-angle"
|
|
| "image-motion"
|
|
| "image-more"
|
|
| "image-download"
|
|
| "image-move-object"
|
|
| "image-mockup"
|
|
| "image-outpaint"
|
|
| "image-adjust"
|
|
| "image-crop"
|
|
| "image-vector"
|
|
| "image-flip-rotate"
|
|
| "toolbar-pin-outline"
|
|
| "toolbar-pin-filled"
|
|
| "toolbar-reset"
|
|
| "toolbar-close";
|
|
|
|
type ReferenceIconProps = {
|
|
name: ReferenceIconName;
|
|
size?: number;
|
|
className?: string;
|
|
style?: CSSProperties;
|
|
};
|
|
|
|
export function ReferenceIcon({
|
|
name,
|
|
size = 18,
|
|
className,
|
|
style,
|
|
}: ReferenceIconProps) {
|
|
const source = `url("/icons/lovart/${name}.svg")`;
|
|
return (
|
|
<span
|
|
aria-hidden="true"
|
|
data-reference-icon={name}
|
|
className={cn("inline-block shrink-0 align-middle", className)}
|
|
style={{
|
|
width: size,
|
|
height: size,
|
|
backgroundColor: "currentColor",
|
|
WebkitMaskImage: source,
|
|
maskImage: source,
|
|
WebkitMaskRepeat: "no-repeat",
|
|
maskRepeat: "no-repeat",
|
|
WebkitMaskPosition: "center",
|
|
maskPosition: "center",
|
|
WebkitMaskSize: "contain",
|
|
maskSize: "contain",
|
|
...style,
|
|
}}
|
|
/>
|
|
);
|
|
}
|
|
|
|
export function getReferenceModelIcon(name: string): ReferenceIconName | null {
|
|
if (/nano[\s-]*banana|gemini|imagen/i.test(name)) return "model-banana";
|
|
if (/gpt|openai|dall[\s-]*e/i.test(name)) return "model-gpt";
|
|
if (/seedream|doubao/i.test(name)) return "model-seedream";
|
|
if (/flux/i.test(name)) return "model-flux";
|
|
if (/luma|uni[\s-]*1/i.test(name)) return "model-luma";
|
|
if (/midjourney/i.test(name)) return "model-midjourney";
|
|
if (/ideogram|p[\s-]*image/i.test(name)) return "model-ideogram";
|
|
if (/recraft/i.test(name)) return "model-recraft";
|
|
return null;
|
|
}
|