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>
|
||||
)
|
||||
}
|
||||
@@ -1,28 +1,53 @@
|
||||
"use client"
|
||||
import {useSamples} from '@/contexts/SamplesContext'
|
||||
import Image from 'next/image'
|
||||
import Link from "next/link"
|
||||
|
||||
export function SamplesGallery() {
|
||||
const {latestSamples, isLoading, error, refreshSamples} = useSamples()
|
||||
|
||||
if (isLoading) return <div>Loading samples...</div>
|
||||
if (error) return <div>Error loading samples: {error.message}</div>
|
||||
if (latestSamples.length === 0) return <div>No samples available</div>
|
||||
// First, let's handle our loading and error states with appropriate dark mode styling
|
||||
if (isLoading) return <div className="text-gray-400">Loading samples...</div>
|
||||
if (error) return <div className="text-red-400">Error loading samples: {error.message}</div>
|
||||
if (latestSamples.length === 0) return <div className="text-gray-400">No samples available</div>
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-5 gap-4">
|
||||
{latestSamples.map((sample) => (
|
||||
<div key={sample.filename}>
|
||||
<Image
|
||||
src={`${process.env.NEXT_PUBLIC_API_URL}${sample.url}`}
|
||||
alt={sample.filename}
|
||||
width={200}
|
||||
height={200}
|
||||
className="object-cover rounded"
|
||||
/>
|
||||
<p className="text-sm mt-1">{sample.url.split('__')[1]}</p>
|
||||
</div>
|
||||
))}
|
||||
<div>
|
||||
{/* Style the link to match our dark theme while maintaining accessibility */}
|
||||
<Link
|
||||
href="/samples"
|
||||
className="text-gray-400 hover:text-gray-200 transition-colors duration-200 flex items-center gap-2 group"
|
||||
>
|
||||
Go to All samples
|
||||
<span className="group-hover:translate-x-1 transition-transform duration-200">→</span>
|
||||
</Link>
|
||||
|
||||
{/* Update the grid layout with dark mode appropriate spacing and styling */}
|
||||
<div className="mt-4 grid grid-cols-5 gap-4">
|
||||
{latestSamples.map((sample) => (
|
||||
<div
|
||||
key={sample.filename}
|
||||
className="group relative"
|
||||
>
|
||||
{/* Add a subtle hover effect to the image container */}
|
||||
<div
|
||||
className="overflow-hidden rounded-lg bg-gray-700 shadow-md transition-transform duration-200 group-hover:shadow-lg">
|
||||
<Image
|
||||
src={`${process.env.NEXT_PUBLIC_API_URL}${sample.url}`}
|
||||
alt={sample.filename}
|
||||
width={200}
|
||||
height={200}
|
||||
className="object-cover rounded-lg transition-transform duration-200 group-hover:scale-105"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 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]}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,9 +1,11 @@
|
||||
"use client"
|
||||
import {createContext, useContext, useEffect, useState} from 'react'
|
||||
import type {TrainingStatus} from '@/types/api'
|
||||
import {Config} from "@/types/config";
|
||||
|
||||
interface TrainingContextType {
|
||||
status: TrainingStatus | null
|
||||
config: Config | null;
|
||||
logs: string[]
|
||||
isLoading: boolean
|
||||
error: Error | null
|
||||
@@ -13,6 +15,7 @@ const TrainingContext = createContext<TrainingContextType | undefined>(undefined
|
||||
|
||||
export function TrainingProvider({children}: { children: React.ReactNode }) {
|
||||
const [status, setStatus] = useState<TrainingStatus | null>(null)
|
||||
const [config, setConfig] = useState<Config | null>(null)
|
||||
const [logs, setLogs] = useState<string[]>([])
|
||||
const [isLoading, setIsLoading] = useState(true)
|
||||
const [error, setError] = useState<Error | null>(null)
|
||||
@@ -47,6 +50,16 @@ export function TrainingProvider({children}: { children: React.ReactNode }) {
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
const fetchConfig = async () => {
|
||||
try {
|
||||
const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/v1/config/`)
|
||||
const data = await response.json()
|
||||
setConfig(data)
|
||||
} catch (err) {
|
||||
setError(err as Error)
|
||||
}
|
||||
}
|
||||
const fetchStatus = async () => {
|
||||
try {
|
||||
const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/v1/training/status`)
|
||||
@@ -64,7 +77,6 @@ export function TrainingProvider({children}: { children: React.ReactNode }) {
|
||||
const data = await response.json()
|
||||
const filteredLogs = filterLogsKeepLatestProgress(data)
|
||||
setLogs(filteredLogs)
|
||||
setIsLoading(false)
|
||||
} catch (err) {
|
||||
setError(err as Error)
|
||||
}
|
||||
@@ -74,6 +86,7 @@ export function TrainingProvider({children}: { children: React.ReactNode }) {
|
||||
|
||||
|
||||
// Initial fetch
|
||||
fetchConfig()
|
||||
fetchStatus()
|
||||
fetchLogs()
|
||||
|
||||
@@ -87,7 +100,7 @@ export function TrainingProvider({children}: { children: React.ReactNode }) {
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<TrainingContext.Provider value={{status, logs, isLoading, error}}>
|
||||
<TrainingContext.Provider value={{status, config, logs, isLoading, error}}>
|
||||
{children}
|
||||
</TrainingContext.Provider>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user