feat: intelligently determine necessary views for thin objects and update SparkPlug UI to support dynamic number of views

src/pages/SparkPlug.tsx

@@ -80,12 +80,11 @@ export default function SparkPlug() {
       }
       // Call our backend endpoint which queries Gemini Imagen
       const images = await api.generateImages(extractedPrompt);
-      
-      if (images && images.length === 4) {
+      if (images && images.length > 0) {
         setGeneratedImages(images);
         setCurrentStep(3);
       } else {
-        throw new Error("Failed to generate exactly 4 images.");
+        throw new Error("Failed to generate images.");
       }
     } catch (err: any) {
       console.error(err);
@@ -328,8 +327,8 @@ export default function SparkPlug() {
                     {generatedImages.map((img, idx) => (
                       <div key={idx} className="relative bg-zinc-900 rounded-lg overflow-hidden border border-zinc-800 flex items-center justify-center">
                         <img src={img} alt={`View ${idx + 1}`} className="max-w-full max-h-[150px] object-contain" />
-                        <div className="absolute top-2 left-2 bg-black/50 backdrop-blur-sm px-2 py-1 rounded text-[10px] font-bold text-zinc-300">
-                          {['FRONT', 'BACK', 'LEFT', 'RIGHT'][idx]}
+                        <div className="absolute top-2 left-2 bg-black/50 backdrop-blur-sm px-2 py-1 rounded text-[10px] font-bold text-zinc-300 uppercase">
+                          {idx === 0 ? 'FRONT' : idx === 1 ? 'BACK' : idx === 2 ? 'LEFT' : 'RIGHT'}
                         </div>
                       </div>
                     ))}