From 5c55d9f8ba5268d025fdcf8d0c4762e3825cc2a4 Mon Sep 17 00:00:00 2001
From: Felipe Cardoso <felipe.cardoso@hotmail.it>
Date: Thu, 23 Jan 2025 14:40:42 +0100
Subject: [PATCH] Add better samples components support

Signed-off-by: Felipe Cardoso <felipe.cardoso@hotmail.it>
---
 frontend/src/app/samples/page.tsx          | 77 +++++++++++-----------
 frontend/src/components/SampleCard.tsx     | 43 ++++++++++++
 frontend/src/components/SamplesGallery.tsx |  2 +-
 3 files changed, 82 insertions(+), 40 deletions(-)
 create mode 100644 frontend/src/components/SampleCard.tsx

diff --git a/frontend/src/app/samples/page.tsx b/frontend/src/app/samples/page.tsx
index ad7acf5..db34f24 100644
--- a/frontend/src/app/samples/page.tsx
+++ b/frontend/src/app/samples/page.tsx
@@ -2,9 +2,10 @@
 "use client"
 
 import {useSamples} from '@/contexts/SamplesContext'
-import Image from 'next/image'
 import Link from "next/link"
 import {useMemo} from 'react'
+import {useTraining} from "@/contexts/TrainingContext";
+import {SampleCard} from "@/components/SampleCard";
 
 // Helper function to parse sample information
 const parseSampleInfo = (filename: string) => {
@@ -18,7 +19,11 @@ const parseSampleInfo = (filename: string) => {
 }
 
 export default function SamplesPage() {
-    const {samples, isLoading, error} = useSamples()
+    const {samples, isLoading: samplesLoading, error: samplesError} = useSamples()
+    const {config, isLoading: configLoading} = useTraining()
+
+    // Get prompts from config
+    const prompts = config?.config?.process[0]?.sample?.prompts || []
 
     // Group samples by batch number using a memoized calculation
     const groupedSamples = useMemo(() => {
@@ -45,25 +50,26 @@ export default function SamplesPage() {
         return new Map([...groups].sort((a, b) => b[0] - a[0]))
     }, [samples])
 
-    // Handle loading and error states with appropriate styling
-    if (isLoading) return (
+    // Handle loading and error states
+    if (samplesLoading || configLoading) return (
         <div className="min-h-screen bg-gray-900 p-4">
-            <div className="max-w-7xl mx-auto text-gray-400">Loading samples...</div>
+            <div className="max-w-7xl mx-auto text-gray-400">Loading...</div>
         </div>
     )
 
-    if (error) return (
+    if (samplesError) return (
         <div className="min-h-screen bg-gray-900 p-4">
-            <div className="max-w-7xl mx-auto text-red-400">Error: {error.message}</div>
+            <div className="max-w-7xl mx-auto text-red-400">Error: {samplesError.message}</div>
         </div>
     )
 
+
     return (
         <main className="min-h-screen bg-gray-900 p-4">
             <div className="max-w-7xl mx-auto space-y-6">
                 {/* Header with navigation */}
                 <header className="flex justify-between items-center">
-                    <h1 className="text-3xl font-bold text-gray-100">Sample Gallery</h1>
+                    <h1 className="text-3xl font-bold text-gray-100">Samples Gallery</h1>
                     <Link
                         href="/"
                         className="text-gray-400 hover:text-gray-200 transition-colors duration-200 flex items-center gap-2 group"
@@ -72,49 +78,42 @@ export default function SamplesPage() {
                     </Link>
                 </header>
 
+
+                {/* Prompts display */}
+                <div className="sticky top-4 z-10 bg-gray-800 rounded-lg shadow-lg border border-gray-700 p-6">
+                    <h2 className="text-xl font-semibold text-gray-300 mb-4">
+                        Generation Prompts
+                    </h2>
+                    <div className="grid grid-cols-[repeat(auto-fit,minmax(200px,1fr))] gap-4">
+                        {prompts.map((prompt, index) => (
+                            <div
+                                key={index}
+                                className="text-sm text-gray-400 p-3 bg-gray-700 rounded-lg"
+                            >
+                                <span className="font-mono text-gray-500 mr-2">{index}:</span>
+                                {prompt}
+                            </div>
+                        ))}
+                    </div>
+                </div>
+
                 {/* Sample groups */}
                 <div className="space-y-8">
                     {Array.from(groupedSamples).map(([batch, items]) => (
                         <div key={batch} className="bg-gray-800 rounded-lg shadow-lg border border-gray-700 p-6">
                             <h2 className="text-xl font-semibold text-gray-300 mb-4">
-                                Step {batch}
+                                Steps {batch}
                             </h2>
 
                             {/* Scrollable container for samples */}
                             <div className="overflow-x-auto">
                                 <div className="flex gap-4 min-w-full pb-4">
                                     {items.map((sample: any) => (
-                                        <div
+                                        <SampleCard
                                             key={sample.filename}
-                                            className="flex-shrink-0 group"
-                                        >
-                                            {/* Image container with hover effects */}
-                                            <div
-                                                className="w-48 overflow-hidden rounded-lg bg-gray-700 shadow-md transition-all duration-200 group-hover:shadow-lg">
-                                                <Image
-                                                    src={`${process.env.NEXT_PUBLIC_API_URL}${sample.url}`}
-                                                    alt={`Sample ${sample.index}`}
-                                                    width={200}
-                                                    height={200}
-                                                    className="object-cover w-full h-48 rounded-lg transition-transform duration-200 group-hover:scale-105"
-                                                />
-                                            </div>
-
-                                            {/* Sample information */}
-                                            <div className="mt-2 space-y-1">
-                                                <div className="text-sm text-gray-400">
-                                                    {new Date(sample.created_at).toLocaleString()}
-                                                </div>
-                                                <a
-                                                    href={`${process.env.NEXT_PUBLIC_API_URL}${sample.url}`}
-                                                    target="_blank"
-                                                    rel="noopener noreferrer"
-                                                    className="text-sm text-gray-400 hover:text-gray-200 transition-colors duration-200 font-mono"
-                                                >
-                                                    Sample {sample.index}
-                                                </a>
-                                            </div>
-                                        </div>
+                                            sample={sample}
+                                            prompt={prompts[sample.index]}
+                                        />
                                     ))}
                                 </div>
                             </div>
diff --git a/frontend/src/components/SampleCard.tsx b/frontend/src/components/SampleCard.tsx
new file mode 100644
index 0000000..258e9c0
--- /dev/null
+++ b/frontend/src/components/SampleCard.tsx
@@ -0,0 +1,43 @@
+"use client"
+
+import Image from 'next/image'
+
+interface SampleCardProps {
+    sample: {
+        filename: string
+        url: string
+        created_at: string
+        index: number
+    }
+    prompt?: string  // Associated prompt from config
+}
+
+export function SampleCard({sample, prompt}: SampleCardProps) {
+    return (
+        <div className="flex-shrink-0 group">
+            <div
+                className="w-48 overflow-hidden rounded-lg bg-gray-700 shadow-md transition-all duration-200 group-hover/card:shadow-lg">
+                <Image
+                    src={`${process.env.NEXT_PUBLIC_API_URL}${sample.url}`}
+                    alt={`Sample ${sample.index}`}
+                    width={200}
+                    height={200}
+                    className="object-cover w-full h-48 rounded-lg transition-transform duration-200 group-hover/card:scale-105"
+                />
+            </div>
+
+            <div className="mt-2 space-y-1">
+                <div className="text-sm text-gray-400">
+                    {new Date(sample.created_at).toLocaleString()}
+                </div>
+                <a href={`${process.env.NEXT_PUBLIC_API_URL}${sample.url}`}
+                   target="_blank"
+                   rel="noopener noreferrer"
+                   className="text-sm text-gray-400 hover:text-gray-200 transition-colors duration-200 font-mono"
+                >
+                    Sample {sample.index}
+                </a>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/frontend/src/components/SamplesGallery.tsx b/frontend/src/components/SamplesGallery.tsx
index 96fad9b..10d8e44 100644
--- a/frontend/src/components/SamplesGallery.tsx
+++ b/frontend/src/components/SamplesGallery.tsx
@@ -43,7 +43,7 @@ export function SamplesGallery() {
 
                         {/* Style the filename with appropriate dark mode colors */}
                         <p className="text-sm mt-2 text-gray-400 font-mono transition-colors duration-200 group-hover:text-gray-200">
-                            {sample.url.split('__')[1]}
+                            {sample.url.split('__')[1].split(".")[0]}
                         </p>
                     </div>
                 ))}