Use proxy meme URL in dynamic page

src/app/api/flux/route.ts

@@ -24,7 +24,9 @@ export async function POST(req: NextRequest): Promise<NextResponse> {
   try {
     await initializeDataSource();
 
-    const { prompt, modelId, transactionSignature } = await req.json()
+    const { prompt, modelId, transactionSignature } = await req.json();
+    const host = req.headers.get("host"); // Get the hostname from request headers
+    const protocol = req.headers.get("x-forwarded-proto") || "http"; // Handle reverse proxies
 
     if (!prompt || !modelId) {
       return NextResponse.json(
@@ -107,7 +109,10 @@ export async function POST(req: NextRequest): Promise<NextResponse> {
       )
     }
 
-    const publicUrl = pinataResult.imageUrl;
+    // Extract CID from the URL
+    const cid = pinataResult.imageUrl!.split("/ipfs/")[1];
+
+    const publicUrl = `${protocol}://${host}/api/image/${cid}`;
 
     return NextResponse.json({ imageUrl: publicUrl })
   } catch (error) {

src/app/api/image/[cid]/route.ts

@@ -0,0 +1,30 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+export async function GET(req: NextRequest, { params }: { params: { cid?: string } }) {
+  const { cid } = params;
+
+  if (!cid) {
+    return NextResponse.json({ error: 'CID is required' }, { status: 400 });
+  }
+
+  const pinataUrl = `https://${process.env.PINATA_GATEWAY}/ipfs/${cid}`;
+
+  try {
+    const response = await fetch(pinataUrl);
+
+    if (!response.ok) {
+      return NextResponse.json({ error: 'Failed to fetch from Pinata' }, { status: response.status });
+    }
+
+    const contentType = response.headers.get('content-type') || 'application/octet-stream';
+    const buffer = await response.arrayBuffer();
+
+    return new NextResponse(buffer, {
+      status: 200,
+      headers: { 'Content-Type': contentType },
+    });
+  } catch (error) {
+    console.error('Error fetching from Pinata:', error);
+    return NextResponse.json({ error: 'Server error' }, { status: 500 });
+  }
+}

src/app/memes/[id]/page.tsx

@@ -5,8 +5,8 @@ interface Props {
 }
 
 function getMeme(id: string): string {
-  const pinataImageUrl = `https://${process.env.PINATA_GATEWAY}/ipfs/${id}`
-  return pinataImageUrl;
+  const memeUrl = `${process.env.SITE_URL}/api/image/${id}`
+  return memeUrl;
 }
 
 export async function generateMetadata(

src/components/AIServiceCard.tsx

@@ -93,8 +93,8 @@ const AIServiceCard: React.FC<AIServiceCardProps> = ({
 
   const generateTwitterShareUrl = (imageUrl: string, transactionSignature: string): string => {
     const baseUrl = window.location.href;
-    const ipfsImageUrl = imageUrl.split("/ipfs/")[1];
-    const memeUrl = `${baseUrl}/memes/${ipfsImageUrl}`;
+    const ipfsImageUrl = imageUrl.split("/image/")[1];
+    const memeUrl = `${baseUrl}memes/${ipfsImageUrl}`;
 
     return `https://twitter.com/intent/tweet?text=Check%20out%20this%20meme%20I%20generated!&url=${encodeURIComponent(memeUrl)}`;
   };