Major restyling of frontend
Signed-off-by: Felipe Cardoso <felipe.cardoso@hotmail.it>
This commit is contained in:
@@ -2,45 +2,47 @@ import {TrainingProgress} from '@/components/TrainingProgress'
|
||||
import {SamplesGallery} from '@/components/SamplesGallery'
|
||||
import {LogViewer} from '@/components/LogViewer'
|
||||
import {Suspense} from 'react'
|
||||
import {TrainingInfo} from "@/components/TrainingInfo";
|
||||
|
||||
export default function DashboardPage() {
|
||||
return (
|
||||
<main className="min-h-screen p-4 bg-gray-50">
|
||||
<main className="min-h-screen p-4 bg-gray-900">
|
||||
<div className="max-w-7xl mx-auto space-y-6">
|
||||
<header className="flex justify-between items-center">
|
||||
<h1 className="text-3xl font-bold text-gray-900">Training Monitor</h1>
|
||||
<div className="text-sm text-gray-500">
|
||||
<h1 className="text-3xl font-bold text-gray-100">Training Monitor</h1>
|
||||
<div className="text-sm text-gray-400">
|
||||
Live monitoring
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
{/* Training Status Section */}
|
||||
<div className="bg-white rounded-lg shadow-sm border border-gray-100 p-6">
|
||||
<h2 className="text-xl font-semibold mb-4 text-gray-500">Training Progress</h2>
|
||||
<Suspense fallback={<div>Loading training status...</div>}>
|
||||
<div className="bg-gray-800 rounded-lg shadow-lg border border-gray-700 p-6">
|
||||
<h2 className="text-xl font-semibold mb-4 text-gray-300">Training Progress</h2>
|
||||
<Suspense fallback={<div className="text-gray-400">Loading training status...</div>}>
|
||||
<TrainingProgress/>
|
||||
</Suspense>
|
||||
</div>
|
||||
|
||||
{/* Latest Samples Section */}
|
||||
<div className="bg-white rounded-lg shadow-sm border border-gray-100 p-6">
|
||||
<div className="bg-gray-800 rounded-lg shadow-lg border border-gray-700 p-6">
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<h2 className="text-xl font-semibold text-gray-500">Latest Samples</h2>
|
||||
<span className="text-sm text-gray-500">Auto-updating</span>
|
||||
<h2 className="text-xl font-semibold text-gray-300">Latest Samples</h2>
|
||||
<span className="text-sm text-gray-400">Auto-updating</span>
|
||||
</div>
|
||||
<Suspense fallback={<div>Loading samples...</div>}>
|
||||
<Suspense fallback={<div className="text-gray-400">Loading samples...</div>}>
|
||||
<SamplesGallery/>
|
||||
</Suspense>
|
||||
</div>
|
||||
|
||||
{/* Log Viewer Section - Full Width */}
|
||||
<div className="bg-white rounded-lg shadow-sm border border-gray-100 p-6 lg:col-span-2 h-[400px]">
|
||||
<div
|
||||
className="bg-gray-800 rounded-lg shadow-lg border border-gray-700 p-6 lg:col-span-2 h-[400px]">
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<h2 className="text-xl font-semibold text-gray-500">Training Logs</h2>
|
||||
<span className="text-sm text-gray-500">Real-time updates</span>
|
||||
<h2 className="text-xl font-semibold text-gray-300">Training Logs</h2>
|
||||
<span className="text-sm text-gray-400">Real-time updates</span>
|
||||
</div>
|
||||
<Suspense fallback={<div>Loading logs...</div>}>
|
||||
<Suspense fallback={<div className="text-gray-400">Loading logs...</div>}>
|
||||
<LogViewer/>
|
||||
</Suspense>
|
||||
</div>
|
||||
|
||||
@@ -3,94 +3,125 @@
|
||||
|
||||
import {useSamples} from '@/contexts/SamplesContext'
|
||||
import Image from 'next/image'
|
||||
import Link from "next/link"
|
||||
import {useMemo} from 'react'
|
||||
|
||||
interface ParsedSample {
|
||||
filename: string
|
||||
timestamp: number
|
||||
batch: number
|
||||
index: number
|
||||
url: string
|
||||
created_at: string
|
||||
// Helper function to parse sample information
|
||||
const parseSampleInfo = (filename: string) => {
|
||||
const [timestamp, info] = filename.split('__')
|
||||
const [batch, index] = info.split('.')[0].split('_')
|
||||
return {
|
||||
timestamp: parseInt(timestamp),
|
||||
batch: parseInt(batch),
|
||||
index: parseInt(index)
|
||||
}
|
||||
}
|
||||
|
||||
export default function SamplesPage() {
|
||||
const {samples, isLoading, error} = useSamples()
|
||||
|
||||
// Group samples by batch number using a memoized calculation
|
||||
const groupedSamples = useMemo(() => {
|
||||
if (!samples?.length) return new Map()
|
||||
|
||||
const parsed: ParsedSample[] = samples.map(sample => {
|
||||
console.debug('sample', sample)
|
||||
const [timestamp, info] = sample.filename.split('__')
|
||||
const [batch, index] = info.split('_')
|
||||
return {
|
||||
// Create groups based on batch numbers
|
||||
const groups = samples.reduce((acc, sample) => {
|
||||
const {batch} = parseSampleInfo(sample.filename)
|
||||
const group = acc.get(batch) || []
|
||||
group.push({
|
||||
...sample,
|
||||
timestamp: parseInt(timestamp),
|
||||
batch: parseInt(batch),
|
||||
index: parseInt(index.replace('.jpg', '')),
|
||||
}
|
||||
})
|
||||
|
||||
// Group by batch
|
||||
const groups = parsed.reduce((acc, sample) => {
|
||||
const group = acc.get(sample.batch) || []
|
||||
group.push(sample)
|
||||
acc.set(sample.batch, group)
|
||||
...parseSampleInfo(sample.filename)
|
||||
})
|
||||
acc.set(batch, group)
|
||||
return acc
|
||||
}, new Map<number, ParsedSample[]>())
|
||||
}, new Map())
|
||||
|
||||
// Sort within each group
|
||||
// Sort samples within each group by index
|
||||
for (const [batch, items] of groups) {
|
||||
groups.set(batch, items.sort((a, b) => b.index - a.index))
|
||||
groups.set(batch, items.sort((a: any, b: any) => a.index - b.index))
|
||||
}
|
||||
|
||||
// return new Map([...groups].sort((a, b) => b[0] - a[0]))
|
||||
return new Map([...groups])
|
||||
// Return groups sorted by batch number (descending)
|
||||
return new Map([...groups].sort((a, b) => b[0] - a[0]))
|
||||
}, [samples])
|
||||
|
||||
if (isLoading) return <div>Loading samples...</div>
|
||||
if (error) return <div>Error: {error.message}</div>
|
||||
|
||||
return (
|
||||
<div className="p-6 space-y-8">
|
||||
<h1 className="text-2xl font-bold">Samples Gallery</h1>
|
||||
|
||||
{Array.from(groupedSamples).map(([batch, items]) => (
|
||||
<div key={batch} className="space-y-2">
|
||||
<h2 className="text-xl font-semibold">
|
||||
Step {batch}
|
||||
</h2>
|
||||
<div className="overflow-x-auto">
|
||||
<div className="flex gap-4 min-w-full pb-4">
|
||||
{items.sort((a: any, b: any) => a.index - b.index).map((sample: any) => (
|
||||
<div key={sample.filename} className="flex-shrink-0 w-48">
|
||||
<Image
|
||||
src={`${process.env.NEXT_PUBLIC_API_URL}${sample.url}`}
|
||||
alt={`Sample ${sample.index}`}
|
||||
width={200}
|
||||
height={200}
|
||||
className="rounded-lg shadow-sm object-cover w-full h-48"
|
||||
/>
|
||||
<div className="mt-2 text-sm">
|
||||
<div className="text-gray-600">
|
||||
{new Date(sample.created_at).toLocaleString()}
|
||||
</div>
|
||||
<a
|
||||
href={`${process.env.NEXT_PUBLIC_API_URL}${sample.url}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-blue-600 hover:underline"
|
||||
>
|
||||
Sample {sample.index}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
// Handle loading and error states with appropriate styling
|
||||
if (isLoading) 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>
|
||||
)
|
||||
|
||||
if (error) 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>
|
||||
)
|
||||
|
||||
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>
|
||||
<Link
|
||||
href="/"
|
||||
className="text-gray-400 hover:text-gray-200 transition-colors duration-200 flex items-center gap-2 group"
|
||||
>
|
||||
← Back to Dashboard
|
||||
</Link>
|
||||
</header>
|
||||
|
||||
{/* 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}
|
||||
</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
|
||||
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>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user