Fix issue with getting captions on runpod

ui/src/app/api/caption/get/route.ts

@@ -4,11 +4,15 @@ import fs from 'fs';
 import path from 'path';
 import { getDatasetsRoot } from '@/server/settings';
 
-export async function GET(request: NextRequest, { params }: { params: { imagePath: string } }) {
-  const { imagePath } = await params;
+export async function POST(request: NextRequest) {
+  
+  const body = await request.json();
+  const { imgPath } = body;
+  console.log('Received POST request for caption:', imgPath);
   try {
     // Decode the path
-    const filepath = decodeURIComponent(imagePath);
+    const filepath = imgPath;
+    console.log('Decoded image path:', filepath);
 
     // caption name is the filepath without extension but with .txt
     const captionPath = filepath.replace(/\.[^/.]+$/, '') + '.txt';

ui/src/components/DatasetImageCard.tsx

@@ -33,7 +33,7 @@ const DatasetImageCard: React.FC<DatasetImageCardProps> = ({
     if (isGettingCaption.current || isCaptionLoaded) return;
     isGettingCaption.current = true;
     apiClient
-      .get(`/api/caption/${encodeURIComponent(imageUrl)}`)
+      .post(`/api/caption/get`, { imgPath: imageUrl })
       .then(res => res.data)
       .then(data => {
         console.log('Caption fetched:', data);
@@ -187,7 +187,7 @@ const DatasetImageCard: React.FC<DatasetImageCardProps> = ({
           </div>
         </div>
         {inViewport && isVisible && (
-          <div className="text-xs text-gray-100 bg-gray-950 mt-1 absolute bottom-0 left-0 p-1 opacity-25 hover:opacity-90 transition-opacity duration-300">
+          <div className="text-xs text-gray-100 bg-gray-950 mt-1 absolute bottom-0 left-0 p-1 opacity-25 hover:opacity-90 transition-opacity duration-300 w-full">
             {imageUrl}
           </div>
         )}