added image in NPC card

index.html

@@ -860,18 +860,39 @@
   async function exportShareCard() {
     if (!currentNPC) return;
     shareBtn.disabled = true;
+    shareBtn.textContent = "📤 Exporting…";
     try {
-      const client  = await getClient();
-      const result  = await client.predict("/generate_share_card", { npc_json: JSON.stringify(currentNPC) });
-      const { image_b64 } = result.data[0];
-      shareImage.src = image_b64;
+      // Dynamically load html2canvas if not already loaded
+      if (typeof html2canvas === "undefined") {
+        await new Promise((resolve, reject) => {
+          const s = document.createElement("script");
+          s.src = "https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js";
+          s.onload = resolve;
+          s.onerror = () => reject(new Error("Failed to load html2canvas"));
+          document.head.appendChild(s);
+        });
+      }
+
+      // Capture the actual rendered card element
+      const canvas = await html2canvas(characterCard, {
+        backgroundColor: "#0d0d1a",
+        scale: 2,              // high-res export
+        useCORS: true,
+        allowTaint: true,
+        logging: false,
+      });
+
+      const dataUrl = canvas.toDataURL("image/png");
+      shareImage.src = dataUrl;
       shareImage.style.display = "block";
-      downloadLink.href = image_b64;
+      downloadLink.href = dataUrl;
       downloadLink.style.display = "inline-block";
     } catch (err) {
+      console.error("Export failed:", err);
       showError();
     } finally {
       shareBtn.disabled = false;
+      shareBtn.textContent = "📤 Export Share Card";
     }
   }