Spaces:
Paused
Paused
File size: 2,571 Bytes
1c72248 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 |
import { useMemo } from 'react';
import useSampleImages from '@/hooks/useSampleImages';
import SampleImageCard from './SampleImageCard';
import { Job } from '@prisma/client';
import { JobConfig } from '@/types';
interface SampleImagesProps {
job: Job;
}
export default function SampleImages({ job }: SampleImagesProps) {
const { sampleImages, status, refreshSampleImages } = useSampleImages(job.id, 5000);
const numSamples = useMemo(() => {
if (job?.job_config) {
const jobConfig = JSON.parse(job.job_config) as JobConfig;
const sampleConfig = jobConfig.config.process[0].sample;
return sampleConfig.prompts.length;
}
return 10;
}, [job]);
// Use direct Tailwind class without string interpolation
// This way Tailwind can properly generate the class
// I hate this, but it's the only way to make it work
const gridColsClass = useMemo(() => {
const cols = Math.min(numSamples, 20);
switch (cols) {
case 1:
return 'grid-cols-1';
case 2:
return 'grid-cols-2';
case 3:
return 'grid-cols-3';
case 4:
return 'grid-cols-4';
case 5:
return 'grid-cols-5';
case 6:
return 'grid-cols-6';
case 7:
return 'grid-cols-7';
case 8:
return 'grid-cols-8';
case 9:
return 'grid-cols-9';
case 10:
return 'grid-cols-10';
case 11:
return 'grid-cols-11';
case 12:
return 'grid-cols-12';
case 13:
return 'grid-cols-13';
case 14:
return 'grid-cols-14';
case 15:
return 'grid-cols-15';
case 16:
return 'grid-cols-16';
case 17:
return 'grid-cols-17';
case 18:
return 'grid-cols-18';
case 19:
return 'grid-cols-19';
case 20:
return 'grid-cols-20';
default:
return 'grid-cols-1';
}
}, [numSamples]);
return (
<div>
<div className="pb-4">
{status === 'loading' && sampleImages.length === 0 && <p>Loading...</p>}
{status === 'error' && <p>Error fetching sample images</p>}
{sampleImages && (
<div className={`grid ${gridColsClass} gap-1`}>
{sampleImages.map((sample: string) => (
<SampleImageCard
key={sample}
imageUrl={sample}
numSamples={numSamples}
sampleImages={sampleImages}
alt="Sample Image"
/>
))}
</div>
)}
</div>
</div>
);
}
|