feat: add gradient mode with multi-color stops, 6 templates, presets, and customizable background

matsuzaka-yuki · matsuzaka-yuki · commit 0e0a4aacbb97 · 2026-04-20T00:13:21.000+08:00
- Add Solid/Gradient mode toggle in control panel
- Support 2-4 gradient color stops with add/remove
- Add 6 gradient templates (horizontal, vertical, diagonal, diagonal-reverse, radial-center, radial-top)
- Add 10 gradient presets (Sunset, Ocean, Neon, Forest, Berry, Ember, Aurora, Lavender, Cherry, Mint)
- Gradient background supports solid color picker and gradient bg style
- SVG defs with linearGradient/radialGradient for icon fill
- PNG/SVG export includes gradient definitions
- i18n support for all 4 locales (en, zh-CN, ja, zh-TW)
diff --git a/src/components/APatchIcon.astro b/src/components/APatchIcon.astro
@@ -3,9 +3,32 @@ interface Props {
   color?: string;
   size?: number;
   id?: string;
+  mode?: "solid" | "gradient";
+  gradientColors?: string[];
+  gradientTemplateId?: string;
 }
 
-const { color = "#3ddc84", id = "apatch-icon" } = Astro.props;
+const {
+  color = "#3ddc84",
+  id = "apatch-icon",
+  mode = "solid",
+  gradientColors = ["#FF6B35", "#FFC145"],
+  gradientTemplateId = "horizontal",
+} = Astro.props;
+
+const templates: Record<string, { type: string; attrs: Record<string, string> }> = {
+  horizontal:        { type: "linearGradient", attrs: { x1: "0%", y1: "50%", x2: "100%", y2: "50%" } },
+  vertical:          { type: "linearGradient", attrs: { x1: "50%", y1: "0%", x2: "50%", y2: "100%" } },
+  diagonal:          { type: "linearGradient", attrs: { x1: "0%", y1: "0%", x2: "100%", y2: "100%" } },
+  "diagonal-reverse":{ type: "linearGradient", attrs: { x1: "100%", y1: "0%", x2: "0%", y2: "100%" } },
+  "radial-center":   { type: "radialGradient", attrs: { cx: "50%", cy: "50%", r: "50%", fx: "50%", fy: "50%" } },
+  "radial-top":      { type: "radialGradient", attrs: { cx: "50%", cy: "0%", r: "70%", fx: "50%", fy: "0%" } },
+};
+
+const tpl = templates[gradientTemplateId] ?? templates.horizontal;
+const isGradient = mode === "gradient";
+const colors = isGradient ? gradientColors : [];
+const fillValue = isGradient ? "url(#apatch-grad)" : color;
 ---
 
 <svg
@@ -14,43 +37,58 @@ const { color = "#3ddc84", id = "apatch-icon" } = Astro.props;
   id={id}
   data-icon="apatch"
   class="w-full h-full"
+  data-mode={mode}
 >
+  {isGradient && (
+    <defs>
+      <tpl.type
+        {...tpl.attrs}
+        id="apatch-grad"
+        gradientUnits="userSpaceOnUse"
+      >
+        {colors.map((c, i) => {
+          const pct = colors.length === 1 ? 0 : Math.round((i / (colors.length - 1)) * 100);
+          return <stop offset={`${pct}%`} stop-color={c} />;
+        })}
+      </tpl.type>
+    </defs>
+  )}
   <g transform="translate(73.34054, 73.34054) scale(0.7135135)">
     <path
       d="M304.6,123.77q25.48,14.78 37.52,40c5,10.5 7.2,21.79 8,33.18a1.4,1.4 0,0 1,-1.31 1.48h-0.08l-186.39,0.1a0.67,0.67 0,0 1,-0.67 -0.67c-0.09,-31.09 17.26,-57.72 43.91,-73.42a1.21,1.21 0,0 0,0.43 -1.64q-7.93,-13.45 -15.7,-27.43a12.35,12.35 0,0 1,-1.87 -7.43c0.68,-5.57 5.72,-5.35 9.95,-4.78a1.81,1.81 0,0 1,1 0.49c3.61,3.44 6.11,8.66 8.21,13.08 3.58,7.57 6.93,13.53 10.77,20a1.15,1.15 0,0 0,1.41 0.5,94.62 94.62,0 0,1 26,-6c15.29,-1.15 31.36,0.5 45.76,6a0.86,0.86 0,0 0,1.07 -0.39c3.87,-7.23 8.21,-14.11 11.54,-21.59a60.66,60.66 0,0 1,5.37 -9.64c2.28,-3.32 4.42,-2.57 7.93,-2.69a3.79,3.79 0,0 1,3.18 1.44,7.08 7.08,0 0,1 1.31,7.8q-3,6.9 -17.56,30.9A0.45,0.45 0,0 0,304.6 123.77ZM202.24,142.7a73.29,73.29 0,0 0,-26 41.57,0.6 0.6,0 0,0 0.46,0.71h0.12q78.3,0 156.93,0a3,3 0,0 0,1 -0.16,0.52 0.52,0 0,0 0.39,-0.7c-2.83,-12 -8.39,-23.5 -16.83,-32.58a93.87,93.87 0,0 0,-21.1 -17.25,63.89 63.89,0 0,0 -13.06,-5.64 98.42,98.42 0,0 0,-13.78 -3.44,89.93 89.93,0 0,0 -45.77,4.37 61,61 0,0 0,-13.44 6.6Q206.56,139.24 202.24,142.7Z"
-      fill={color}
+      fill={fillValue}
     />
     <path
       d="M156,309.12a21.63,21.63 0,0 1,-19.68 21.15q-13,1.07 -20.5,-9.7a10.64,10.64 0,0 1,-1.8 -6q0,-49.69 0,-98.85a9.93,9.93 0,0 1,1.81 -5.86,22.21 22.21,0 0,1 35.45,-1.63c3.62,4.36 4.75,9.37 4.75,14.87Q156,265.18 156,309.12ZM142.95,222.12a8.63,8.63 0,0 0,-8.63 -8.63L134,213.49a8.63,8.63 0,0 0,-8.63 8.63h0L125.37,308.7a8.63,8.63 0,0 0,8.63 8.63h0.3A8.63,8.63 0,0 0,143 308.7Z"
-      fill={color}
+      fill={fillValue}
     />
     <path
       d="M399,308.83a21.3,21.3 0,0 1,-21.27 21.34h-1.48A21.3,21.3 0,0 1,355 308.91h0l-0.16,-87.22a21.3,21.3 0,0 1,21.27 -21.34h1.48a21.3,21.3 0,0 1,21.33 21.26h0ZM385.48,221.45a7.87,7.87 0,0 0,-7.84 -7.9h-1a7.87,7.87 0,0 0,-7.9 7.84l-0.3,88a7.87,7.87 0,0 0,7.84 7.9h1a7.87,7.87 0,0 0,7.9 -7.84Z"
-      fill={color}
+      fill={fillValue}
     />
     <path
       d="M242.54,363.52q-0.09,22.29 0.09,44.46c0.07,8.21 -4.76,15 -11.91,19.12 -4.3,2.49 -9.53,2.16 -14.42,1.79 -6.54,-0.5 -13,-7.88 -15.17,-13.15a22.1,22.1 0,0 1,-1.47 -8.58q0.12,-22.4 0.08,-43.79a0.42,0.42 0,0 0,-0.42 -0.41c-11.48,0.22 -22.67,1.25 -31.25,-7.75 -6.34,-6.66 -6.64,-12.59 -6.6,-22.33q0.27,-66.81 -0.08,-128a0.83,0.83 0,0 1,0.82 -0.83h187a0.8,0.8 0,0 1,0.8 0.81q0,64.92 0,129.87c0,16.14 -8.17,27.31 -25.11,28.21a115.4,115.4 0,0 1,-11.91 0c-0.77,0 -1.14,0.33 -1.13,1.09q0.19,21.76 0.07,41.42 -0.09,13 -10.08,20.67a15,15 0,0 1,-9.09 3c-3.37,0 -7.6,0.32 -10.62,-1.18q-9.9,-4.9 -12.66,-13.73 -1.54,-4.92 -1.41,-16 0.19,-17.55 0.06,-34.75a0.45,0.45 0,0 0,-0.52 -0.51l-24.62,0.05A0.48,0.48 0,0 0,242.54 363.52ZM204.46,350.63c5.26,1.85 7.52,8.11 7.51,13.3q0,18.68 0,40.92a18.92,18.92 0,0 0,0.66 5A8.41,8.41 0,0 0,225 415q5,-2.91 5,-10.15 -0.07,-20.33 0,-42.76 0,-7.64 6.29,-11.18a17.67,17.67 0,0 1,7.48 -1.69q12.3,0 23.73,0a5.94,5.94 0,0 1,1.77 0.27c1.44,0.45 3,0.49 4.37,1.13q7.94,3.69 7.85,12.49 -0.25,23.72 0.25,43.09a10.52,10.52 0,0 0,3.45 7.89,8.43 8.43,0 0,0 13.05,-2.88 13.45,13.45 0,0 0,1 -5.33q-0.1,-20.39 0,-39.88c0,-6.48 2.17,-13.84 9,-15.7a24,24 0,0 1,6 -1.08q5.76,0 11.39,0.07a10.06,10.06 0,0 0,8.7 -3.85c2.38,-3.09 2.06,-7.7 2,-11.44q-0.24,-50.9 0,-100.2 0,-8.13 0.52,-16.54a0.48,0.48 0,0 0,-0.45 -0.51h-161a0.48,0.48 0,0 0,-0.49 0.48h0q0,59.14 -0.07,118.94c0,5.08 0.71,9.07 5.52,11.79a12.21,12.21 0,0 0,6.63 1.36C192.72,349.13 198.89,348.68 204.46,350.63Z"
-      fill={color}
+      fill={fillValue}
     />
     <path
       d="M256.14,241.06a1.83,1.83 0,0 0,-2.08 0.34A19.08,19.08 0,0 0,249.4 249a2.42,2.42 0,0 1,-3 1.54l-0.14,-0.05c-1.93,-0.76 -4.88,-1.53 -6.39,-3a1,1 0,0 1,-0.29 -0.94,14.06 14.06,0 0,1 1.4,-3.83c4.31,-8 12.47,-16.89 21.57,-9.18A28.37,28.37 0,0 1,270.78 245a1.7,1.7 0,0 1,-1 2.45l-5.18,2.23a1.87,1.87 0,0 1,-2.66 -0.93C260.65,246.47 258.61,242.27 256.14,241.06Z"
-      fill={color}
+      fill={fillValue}
     />
     <path
-      d="M244,262.69c-7.5,-3.81 -17.85,-8.76 -25.87,-8.09a2.54,2.54 0,0 0,-2.53 2.4,3.7 3.7,0 0,0 3.23,4.21c9.07,1.09 12.52,11.27 5.94,17.65q-5,4.83 -11.39,1.84c-4.56,-2.14 -6.08,-6.84 -5.19,-11.62a8,8 0,0 0,-0.25 -4.07c-1.1,-3.27 -2.32,-6.6 -2.12,-10.08 0.91,-15.73 21.76,-10.55 30.71,-7.3a136.77,136.77 0,0 1,18.21 8.14,0.79 0.79,0 0,0 0.84,0 98.9,98.9 0,0 1,22.7 -10.19,40.62 40.62,0 0,1 15.52,-2.07c3.62,0.3 9.33,2.47 10.17,6.6a24.68,24.68 0,0 1,-2.5 16.87c-8.27,14.21 -22.24,27.08 -35.09,35.66 -5.22,3.49 -10.51,7.38 -16,10.29 -9.88,5.27 -22.24,10.35 -33.21,9.79 -16.32,-0.85 -11.45,-19 -5.94,-27.34a77.72,77.72 0,0 1,9.36 -11.74c7.3,-7.39 14.69,-14.37 23.42,-20.14a0.45,0.45 0,0 0,0.14 -0.62A0.55,0.55 0,0 0,244 262.69ZM252.39,295.58a1.36,1.36 0,0 1,-0.44 1.57,65 65,0 0,1 -6.55,4.29 2.69,2.69 0,0 1,-3.07 -0.08,124 124,0 0,1 -12.82,-10.07 0.93,0.93 0,0 0,-1.29 0c-4,4 -12.35,13 -12.18,18.91a2.06,2.06 0,0 0,1.92 2,26.58 26.58,0 0,0 11.29,-1.58 121.66,121.66 0,0 0,24.36 -12.43,212.63 212.63,0 0,0 25.07,-19.73c6,-5.5 14,-13.41 16,-21.4 1.65,-6.65 -13.58,-1.58 -16.06,-0.51q-6,2.61 -12.34,5.71a0.54,0.54 0,0 0,-0.25 0.71,0.64 0.64,0 0,0 0.19,0.21 137.63,137.63 0,0 1,12.46 9.29,2 2,0 0,1 0.3,3.15 21.39,21.39 0,0 1,-6 5.14,2.06 2.06,0 0,1 -2.34,-0.21 134.52,134.52 0,0 0,-14.92 -10.77,0.78 0.78,0 0,0 -0.9,0 157.9,157.9 0,0 0,-17.7 13.43,0.33 0.33,0 0,0 0,0.45l0.06,0.05q7.53,5.38 14.56,10.95A2.16,2.16 0,0 1,252.39 295.58Z"
-      fill={color}
+      d="M244,262.69c-7.5,-3.81 -17.85,-8.76 -25.87,-8.09a2.54,2.54 0,0 0,-2.53 2.4,3.7 3.7,0 0,0 3.23,4.21c9.07,1.09 12.52,11.27 5.94,17.65q-5,4.83 -11.39,1.84c-4.56,-2.14 -6.08,-6.84 -5.19,-11.62a8,8 0,0 0,-0.25 -4.07c-1.1,-3.27 -2.32,-6.6 -2.12,-10.08 0.91,-15.73 21.76,-10.55 30.71,-7.3a136.77,136.77 0,0 1,18.21 8.14,0.79 0.79,0 0,0 0.84,0 98.9,98.9 0,0 1,22.7 -10.19,40.62 40.62,0 0,1 15.52,-2.07c3.62,0.3 9.33,2.47 10.17,6.6a24.68,24.68 0,0 1,-2.5 16.87c-8.27,14.21 -22.24,27.08 -35.09,35.66 -5.22,3.49 -10.51,7.38 -16,10.29 -9.88,5.27 -22.24,10.35 -33.21,9.79 -16.32,-0.85 -11.45,-19 -5.94,-27.34a77.72,77.72 0,0 1,9.36 -11.74c7.3,-7.39 14.69,-14.37 23.42,-20.14a0.45,0.45 0,0 0,0.14 -0.62A0.55,0.55 0,0 0,244 262.69ZM252.39,295.58a1.36,1.36 0,0 1,-0.44 1.57,65 65,0 0,1 -6.55,4.29 2.69,2.69 0,0 1,-3.07 -0.08,124 124,0 0,1 -12.82,-10.07 0.93,0.93 0,0 0,-1.29 0c-4,4 -12.35,13 -12.18,18.91a2.06,2.06 0,0 0,1.92 2,26.58 26.58 0,0 0 11.29,-1.58 121.66,121.66 0,0 0,24.36 -12.43,212.63 212.63,0 0,0 25.07,-19.73c6,-5.5 14,-13.41 16,-21.4 1.65,-6.65 -13.58,-1.58 -16.06,-0.51q-6,2.61 -12.34,5.71a0.54,0.54 0,0 0,-0.25 0.71,0.64 0.64,0 0,0 0.19,0.21 137.63,137.63 0,0 1,12.46 9.29,2 2,0 0,1 0.3,3.15 21.39,21.39 0,0 1,-6 5.14,2.06 2.06,0 0,1 -2.34,-0.21 134.52,134.52 0,0 0,-14.92 -10.77,0.78 0.78 0,0 0 -0.9,0 157.9,157.9 0,0 0,-17.7 13.43,0.33 0.33 0,0 0 0,0.45l0.06,0.05q7.53,5.38 14.56,10.95A2.16,2.16 0,0 1,252.39 295.58Z"
+      fill={fillValue}
     />
     <path
       d="M247.42,276.94L249.39,274.98A8.83,8.83 90.2,0 1,261.88 275.02L263.88,277.04A8.83,8.83 90.2,0 1,263.83 289.53L261.86,291.49A8.83,8.83 90.2,0 1,249.37 291.44L247.37,289.43A8.83,8.83 90.2,0 1,247.42 276.94z"
-      fill={color}
+      fill={fillValue}
     />
     <path
       d="M293.62,306.14q-7.56,0 -10.69,-7c-2.69,-6 2.2,-12.22 7.77,-13.69 5.05,-1.33 10,2.3 11.84,6.81 1.06,2.66 0.27,5.62 0.93,8.44 1.56,6.67 3.08,11.44 0,17 -2.57,4.74 -11.66,4.92 -16.4,4.11a89.73,89.73 0,0 1,-28.29 -10.15,1.73 1.73,0 0,1 -0.69,-2.34 1.78,1.78 0,0 1,0.61 -0.64l6.94,-4.3a2.45,2.45 0,0 1,2.4 -0.11c7.44,3.73 16.71,8.08 24.95,7.42a2.06,2.06 0,0 0,2.13 -2.28c0,-0.63 0,-1.25 0,-1.88A1.32,1.32 0,0 0,293.62 306.14Z"
-      fill={color}
+      fill={fillValue}
     />
     <path
       d="M249.66,317.34c1.05,3 4.84,11.72 9.08,5.69a30.07,30.07 0,0 0,3.14 -5.77,2.34 2.34,0 0,1 3.54,-1.39l4.16,1.88a2.53,2.53 0,0 1,1.44 3.69q-3.48,8.22 -9.42,12.37c-9.59,6.69 -18.44,-4.92 -21.61,-12.47a1.86,1.86 0,0 1,0.8 -2.55,21.29 21.29 0,0 1 6.63,-2.68A1.92,1.92 0,0 1,249.66 317.34Z"
-      fill={color}
+      fill={fillValue}
     />
   </g>
 </svg>
diff --git a/src/components/presets.ts b/src/components/presets.ts
@@ -16,3 +16,69 @@ export const presets = [
   { name: "Coral", color: "#FF7043" },
   { name: "Brown", color: "#795548" },
 ];
+
+export type GradientType = "linear" | "radial";
+
+export interface GradientTemplate {
+  id: string;
+  name: string;
+  type: GradientType;
+  attrs: Record<string, string>;
+}
+
+export const gradientTemplates: GradientTemplate[] = [
+  {
+    id: "horizontal",
+    name: "Horizontal",
+    type: "linear",
+    attrs: { x1: "0%", y1: "50%", x2: "100%", y2: "50%" },
+  },
+  {
+    id: "vertical",
+    name: "Vertical",
+    type: "linear",
+    attrs: { x1: "50%", y1: "0%", x2: "50%", y2: "100%" },
+  },
+  {
+    id: "diagonal",
+    name: "Diagonal",
+    type: "linear",
+    attrs: { x1: "0%", y1: "0%", x2: "100%", y2: "100%" },
+  },
+  {
+    id: "diagonal-reverse",
+    name: "Diagonal Reverse",
+    type: "linear",
+    attrs: { x1: "100%", y1: "0%", x2: "0%", y2: "100%" },
+  },
+  {
+    id: "radial-center",
+    name: "Radial",
+    type: "radial",
+    attrs: { cx: "50%", cy: "50%", r: "50%", fx: "50%", fy: "50%" },
+  },
+  {
+    id: "radial-top",
+    name: "Radial Top",
+    type: "radial",
+    attrs: { cx: "50%", cy: "0%", r: "70%", fx: "50%", fy: "0%" },
+  },
+];
+
+export interface GradientPreset {
+  name: string;
+  colors: [string, string];
+}
+
+export const gradientPresets: GradientPreset[] = [
+  { name: "Sunset", colors: ["#FF6B35", "#FFC145"] },
+  { name: "Ocean", colors: ["#0077B6", "#00B4D8"] },
+  { name: "Neon", colors: ["#FF00FF", "#00FFFF"] },
+  { name: "Forest", colors: ["#2D6A4F", "#95D5B2"] },
+  { name: "Berry", colors: ["#7B2D8E", "#F72585"] },
+  { name: "Ember", colors: ["#DC2626", "#F97316"] },
+  { name: "Aurora", colors: ["#4361EE", "#4CC9F0"] },
+  { name: "Lavender", colors: ["#9D4EDD", "#E0AAFF"] },
+  { name: "Cherry", colors: ["#D00000", "#FFB3C1"] },
+  { name: "Mint", colors: ["#06D6A0", "#B5EAD7"] },
+];
diff --git a/src/i18n/translations.ts b/src/i18n/translations.ts
@@ -35,6 +35,19 @@ export const translations: Record<Locale, Record<string, string>> = {
     sizeRange: "64 to 4096, increments of 64",
     exportPng: "Export PNG",
     exportSvg: "Export SVG",
+    modeSolid: "Solid",
+    modeGradient: "Gradient",
+    gradientTemplates: "Gradient Template",
+    gradientColors: "Gradient Colors",
+    addColor: "Add Color",
+    gradientPresets: "Gradient Presets",
+    removeColor: "Remove",
+    tplHorizontal: "Horizontal",
+    tplVertical: "Vertical",
+    tplDiagonal: "Diagonal",
+    tplDiagonalReverse: "Reverse Diagonal",
+    tplRadialCenter: "Radial",
+    tplRadialTop: "Radial Top",
     footer: '&copy; Matsuzaka Yuki &middot; <a href="https://github.com/matsuzaka-yuki" target="_blank" rel="noopener noreferrer">GitHub</a> &middot; Based on <a href="https://github.com/LyraVoid/APatch-Image-WebUI" target="_blank" rel="noopener noreferrer">APatch-Image-WebUI</a>',
   },
   "zh-CN": {
@@ -62,6 +75,19 @@ export const translations: Record<Locale, Record<string, string>> = {
     sizeRange: "64 到 4096，步进 64",
     exportPng: "导出 PNG",
     exportSvg: "导出 SVG",
+    modeSolid: "纯色",
+    modeGradient: "渐变",
+    gradientTemplates: "渐变模板",
+    gradientColors: "渐变颜色",
+    addColor: "添加颜色",
+    gradientPresets: "渐变预设",
+    removeColor: "移除",
+    tplHorizontal: "水平",
+    tplVertical: "垂直",
+    tplDiagonal: "对角线",
+    tplDiagonalReverse: "反对角线",
+    tplRadialCenter: "径向",
+    tplRadialTop: "径向顶部",
     footer: '&copy; Matsuzaka Yuki &middot; <a href="https://github.com/matsuzaka-yuki" target="_blank" rel="noopener noreferrer">GitHub</a> &middot; 基于 <a href="https://github.com/LyraVoid/APatch-Image-WebUI" target="_blank" rel="noopener noreferrer">APatch-Image-WebUI</a>',
   },
   ja: {
@@ -89,6 +115,19 @@ export const translations: Record<Locale, Record<string, string>> = {
     sizeRange: "64 ～ 4096、64 単位",
     exportPng: "PNG エクスポート",
     exportSvg: "SVG エクスポート",
+    modeSolid: "単色",
+    modeGradient: "グラデーション",
+    gradientTemplates: "グラデーションテンプレート",
+    gradientColors: "グラデーションカラー",
+    addColor: "カラー追加",
+    gradientPresets: "グラデーションプリセット",
+    removeColor: "削除",
+    tplHorizontal: "水平",
+    tplVertical: "垂直",
+    tplDiagonal: "斜め",
+    tplDiagonalReverse: "逆斜め",
+    tplRadialCenter: "放射",
+    tplRadialTop: "放射（上部）",
     footer: '&copy; Matsuzaka Yuki &middot; <a href="https://github.com/matsuzaka-yuki" target="_blank" rel="noopener noreferrer">GitHub</a> &middot; <a href="https://github.com/LyraVoid/APatch-Image-WebUI" target="__blank" rel="noopener noreferrer">APatch-Image-WebUI</a> に基づく',
   },
   "zh-TW": {
@@ -116,6 +155,19 @@ export const translations: Record<Locale, Record<string, string>> = {
     sizeRange: "64 到 4096，步進 64",
     exportPng: "匯出 PNG",
     exportSvg: "匯出 SVG",
+    modeSolid: "純色",
+    modeGradient: "漸層",
+    gradientTemplates: "漸層模板",
+    gradientColors: "漸層顏色",
+    addColor: "新增顏色",
+    gradientPresets: "漸層預設",
+    removeColor: "移除",
+    tplHorizontal: "水平",
+    tplVertical: "垂直",
+    tplDiagonal: "對角線",
+    tplDiagonalReverse: "反對角線",
+    tplRadialCenter: "徑向",
+    tplRadialTop: "徑向頂部",
     footer: '&copy; Matsuzaka Yuki &middot; <a href="https://github.com/matsuzaka-yuki" target="_blank" rel="noopener noreferrer">GitHub</a> &middot; 基於 <a href="https://github.com/LyraVoid/APatch-Image-WebUI" target="_blank" rel="noopener noreferrer">APatch-Image-WebUI</a>',
   },
 };
diff --git a/src/pages/index.astro b/src/pages/index.astro
