Add TrainingInfo.tsx

Signed-off-by: Felipe Cardoso <felipe.cardoso@hotmail.it>

frontend/src/app/page.tsx

@@ -15,6 +15,12 @@ export default function DashboardPage() {
                     </div>
                 </header>
 
+                <Suspense fallback={<div className="bg-gray-800 rounded-lg shadow-lg border border-gray-700 p-6">
+                    Loading training configuration...
+                </div>}>
+                    <TrainingInfo/>
+                </Suspense>
+
                 <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                     {/* Training Status Section */}
                     <div className="bg-gray-800 rounded-lg shadow-lg border border-gray-700 p-6">

frontend/src/components/TrainingInfo.tsx

@@ -0,0 +1,91 @@
+"use client"
+import {useTraining} from '@/contexts/TrainingContext'
+
+export function TrainingInfo() {
+    const {config} = useTraining()
+
+    if (!config) return null
+
+    const process = config.config.process[0]
+    const {train, model, sample, save, datasets} = process
+
+    // Common styles for better organization and consistency
+    const sectionStyles = "space-y-2"
+    const headerStyles = "font-medium text-gray-300"  // Lighter text for headers
+    const labelStyles = "text-gray-400"              // Slightly dimmer for labels
+    const valueStyles = "font-mono text-gray-200"    // Bright text for important values
+
+    return (
+        <div
+            className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-4 bg-gray-800 rounded-lg shadow-lg border border-gray-700">
+            {/* Basic Information */}
+            <div className={sectionStyles}>
+                <h3 className={headerStyles}>Basic Info</h3>
+                <div className="text-sm space-y-1">
+                    <p className={labelStyles}>
+                        Name: <span className={valueStyles}>{config.config.name}</span>
+                    </p>
+                    {process.trigger_word && (
+                        <p className={labelStyles}>
+                            Trigger Word: <span className={valueStyles}>{process.trigger_word}</span>
+                        </p>
+                    )}
+                </div>
+            </div>
+
+            {/* Training Configuration */}
+            <div className={sectionStyles}>
+                <h3 className={headerStyles}>Training Setup</h3>
+                <div className="text-sm space-y-1">
+                    <p className={labelStyles}>
+                        Batch Size: <span className={valueStyles}>{train.batch_size}</span>
+                    </p>
+                    <p className={labelStyles}>
+                        Learning Rate: <span className={valueStyles}>{train.lr}</span>
+                    </p>
+                    <p className={labelStyles}>
+                        Model: <span className={`${valueStyles} break-all`}>{model.name_or_path}</span>
+                    </p>
+                </div>
+            </div>
+
+            {/* Save Configuration */}
+            <div className={sectionStyles}>
+                <h3 className={headerStyles}>Save Settings</h3>
+                <div className="text-sm space-y-1">
+                    <p className={labelStyles}>
+                        Save Every: <span className={valueStyles}>{save?.save_every} steps</span>
+                    </p>
+                    <p className={labelStyles}>
+                        Max Saves: <span className={valueStyles}>{save?.max_step_saves_to_keep}</span>
+                    </p>
+                </div>
+            </div>
+
+            {/* Sampling Configuration */}
+            <div className={sectionStyles}>
+                <h3 className={headerStyles}>Sampling</h3>
+                <div className="text-sm space-y-1">
+                    <p className={labelStyles}>
+                        Sample Every: <span className={valueStyles}>{sample.sample_every} steps</span>
+                    </p>
+                    <p className={labelStyles}>
+                        Resolution: <span className={valueStyles}>{sample.width}×{sample.height}</span>
+                    </p>
+                </div>
+            </div>
+
+            {/* Dataset Configuration */}
+            <div className={`${sectionStyles} col-span-1 md:col-span-2 lg:col-span-3`}>
+                <h3 className={headerStyles}>Dataset</h3>
+                <div className="text-sm">
+                    <p className={labelStyles}>
+                        Resolution Steps: <span className={valueStyles}>
+                            {datasets[0].resolution?.join(', ')}
+                        </span>
+                    </p>
+                </div>
+            </div>
+        </div>
+    )
+}