feat : fix anything you can think

app/api/guides/[guideId]/artifacts/image/route.tsx

@@ -1,4 +1,6 @@
 /* eslint-disable @next/next/no-img-element */
+import { join } from "node:path";
+
 import { ImageResponse } from "next/og";
 import sharp from "sharp";
 
@@ -53,6 +55,14 @@ async function pngDataUrl(url: string): Promise<string | null> {
   }
 }
 
+async function localPngDataUrl(fileName: string): Promise<string> {
+  const png = await sharp(join(process.cwd(), "public", "icon", fileName))
+    .resize(96, 96, { fit: "contain" })
+    .png()
+    .toBuffer();
+  return `data:image/png;base64,${png.toString("base64")}`;
+}
+
 export async function GET(
   _request: Request,
   context: RouteContext<"/api/guides/[guideId]/artifacts/image">,
@@ -61,7 +71,7 @@ export async function GET(
   const guide = await getPublicArtifactExport(guideId);
   if (!guide) return new Response("Guide not found", { status: 404 });
 
-  const [fonts, groupAssets] = await Promise.all([
+  const [fonts, groupAssets, statIconAssets] = await Promise.all([
     anuphanFonts,
     Promise.all(
       guide.groups.map((group) =>
@@ -73,6 +83,11 @@ export async function GET(
         ),
       ),
     ),
+    Promise.all([
+      localPngDataUrl("Icon_Sands_of_Eon.webp"),
+      localPngDataUrl("Icon_Goblet_of_Eonothem.webp"),
+      localPngDataUrl("Icon_Circlet_of_Logos.webp"),
+    ]),
   ]);
 
   const profile = guide.profile;
@@ -81,7 +96,7 @@ export async function GET(
     ? 60 + profile.targets.length * 30 + (profile.talents.length ? 58 : 0) + (profile.note ? Math.max(48, Math.ceil(profile.note.length / 58) * 24) : 0)
     : 0;
   const rightHeight = profile
-    ? 194 + (profile.substats.length ? 76 : 0) + (detailHeight > 60 ? detailHeight + 16 : 0) + 32
+    ? 242 + (profile.substats.length ? 76 : 0) + (detailHeight > 60 ? detailHeight + 16 : 0) + 32
     : 0;
   const height = Math.max(520, 190 + Math.max(leftHeight, rightHeight));
   const talents = normalizeTalentPriorities(profile?.talents ?? []);
@@ -162,11 +177,12 @@ export async function GET(
               </div>
               <div style={{ display: "flex" }}>
                 {[
-                  { label: "Sands", values: profile.sands },
-                  { label: "Goblet", values: profile.goblet },
-                  { label: "Circlet", values: profile.circlet },
+                  { label: "Sands", values: profile.sands, icon: statIconAssets[0] },
+                  { label: "Goblet", values: profile.goblet, icon: statIconAssets[1] },
+                  { label: "Circlet", values: profile.circlet, icon: statIconAssets[2] },
                 ].map((stat) => (
-                  <div key={stat.label} style={{ display: "flex", flex: 1, minHeight: 128, flexDirection: "column", alignItems: "center", gap: 10, borderRight: stat.label === "Circlet" ? "none" : "1px solid #34343d", padding: "16px 10px", textAlign: "center" }}>
+                  <div key={stat.label} style={{ display: "flex", flex: 1, minHeight: 176, flexDirection: "column", alignItems: "center", gap: 10, borderRight: stat.label === "Circlet" ? "none" : "1px solid #34343d", padding: "16px 10px", textAlign: "center" }}>
+                    <img src={stat.icon} alt="" width={48} height={48} style={{ objectFit: "contain" }} />
                     <div style={{ display: "flex", fontSize: 17, fontWeight: 700 }}>{stat.label}</div>
                     <div style={{ display: "flex", width: "100%", borderTop: "1px solid #34343d" }} />
                     <div style={{ display: "flex", fontSize: 14, lineHeight: 1.45 }}>