From 7ab44ae0cd5d511ef83dec0e9d355fcf6072c06c Mon Sep 17 00:00:00 2001
From: Jaret Burkett <jaretburkett@gmail.com>
Date: Fri, 11 Jul 2025 19:16:50 +0000
Subject: [PATCH] Fix issue with getting captions on runpod

---
 .../app/api/caption/{[...imagePath] => get}/route.ts   | 10 +++++++---
 ui/src/components/DatasetImageCard.tsx                 |  4 ++--
 2 files changed, 9 insertions(+), 5 deletions(-)
 rename ui/src/app/api/caption/{[...imagePath] => get}/route.ts (82%)

diff --git a/ui/src/app/api/caption/[...imagePath]/route.ts b/ui/src/app/api/caption/get/route.ts
similarity index 82%
rename from ui/src/app/api/caption/[...imagePath]/route.ts
rename to ui/src/app/api/caption/get/route.ts
index 6919aa93..4f8d2818 100644
--- a/ui/src/app/api/caption/[...imagePath]/route.ts
+++ b/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';
diff --git a/ui/src/components/DatasetImageCard.tsx b/ui/src/components/DatasetImageCard.tsx
index 762a44f6..7eb562b5 100644
--- a/ui/src/components/DatasetImageCard.tsx
+++ b/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>
         )}