404 lines
16 KiB
TypeScript
404 lines
16 KiB
TypeScript
|
import React from 'react';
|
|||
|
|
import { StatusModal, StatusModalSection } from '@/components/ui/StatusModal/StatusModal';
|
|||
|
|
import { Badge } from '@/components/ui/Badge';
|
|||
|
|
import { Tooltip } from '@/components/ui/Tooltip';
|
|||
|
|
import { TrainedModelResponse, TrainingMetrics } from '@/types/training';
|
|||
|
|
import { Activity, TrendingUp, Calendar, Settings, Lightbulb, AlertTriangle, CheckCircle, Target } from 'lucide-react';
|
|||
|
|
|
|||
|
|
interface ModelDetailsModalProps {
|
|||
|
|
isOpen: boolean;
|
|||
|
|
onClose: () => void;
|
|||
|
|
model: TrainedModelResponse;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Helper function to determine performance color based on accuracy
|
|||
|
|
const getPerformanceColor = (accuracy: number): string => {
|
|||
|
|
if (accuracy >= 90) return 'var(--color-success)';
|
|||
|
|
if (accuracy >= 80) return 'var(--color-info)';
|
|||
|
|
if (accuracy >= 70) return 'var(--color-warning)';
|
|||
|
|
if (accuracy >= 60) return 'var(--color-warning-dark)';
|
|||
|
|
return 'var(--color-error)';
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
|
|||
|
|
// Helper function to determine performance message for bakery owners
|
|||
|
|
const getPerformanceMessage = (accuracy: number): string => {
|
|||
|
|
if (accuracy >= 90) return 'Excelente: Las predicciones son muy precisas, ideales para planificar producción';
|
|||
|
|
if (accuracy >= 80) return 'Bueno: Las predicciones son confiables para planificación diaria';
|
|||
|
|
if (accuracy >= 70) return 'Aceptable: Predicciones útiles pero considera monitorear de cerca';
|
|||
|
|
if (accuracy >= 60) return 'Necesita mejora: Predicciones menos precisas, considera reentrenar';
|
|||
|
|
return 'Poco confiable: El modelo necesita ser reentrenado con más datos';
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// Helper function to format date
|
|||
|
|
const formatDate = (dateString: string): string => {
|
|||
|
|
const date = new Date(dateString);
|
|||
|
|
return date.toLocaleDateString('en-US', {
|
|||
|
|
year: 'numeric',
|
|||
|
|
month: 'short',
|
|||
|
|
day: 'numeric'
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// Helper function to calculate accuracy from MAPE
|
|||
|
|
const calculateAccuracy = (mape: number | undefined): number => {
|
|||
|
|
if (mape === undefined || mape === null || isNaN(mape)) return 0;
|
|||
|
|
// MAPE in the API response is already in percentage form (e.g., 8.5 = 8.5%)
|
|||
|
|
const accuracy = Math.max(0, Math.min(100, 100 - mape));
|
|||
|
|
return accuracy;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// Feature tag component
|
|||
|
|
const FeatureTag: React.FC<{ feature: string }> = ({ feature }) => {
|
|||
|
|
const getIcon = (feature: string) => {
|
|||
|
|
const featureLower = feature.toLowerCase();
|
|||
|
|
if (featureLower.includes('temperature')) return '☀️';
|
|||
|
|
if (featureLower.includes('weekend')) return '📅';
|
|||
|
|
if (featureLower.includes('holiday')) return '🎉';
|
|||
|
|
if (featureLower.includes('precipitation')) return '🌧️';
|
|||
|
|
if (featureLower.includes('traffic')) return '🚗';
|
|||
|
|
return '📊';
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const getTooltip = (feature: string) => {
|
|||
|
|
const featureLower = feature.toLowerCase();
|
|||
|
|
if (featureLower.includes('temperature')) return 'El clima afecta lo que los clientes quieren comprar - días calurosos significan menos productos horneados calientes';
|
|||
|
|
if (featureLower.includes('weekend')) return 'Tus patrones de ventas son diferentes los fines de semana vs días de semana';
|
|||
|
|
if (featureLower.includes('holiday')) return 'Días especiales y festivos cambian cuánto compra la gente';
|
|||
|
|
if (featureLower.includes('precipitation')) return 'La lluvia o nieve afecta cuántos clientes visitan tu panadería';
|
|||
|
|
if (featureLower.includes('traffic')) return 'Calles transitadas usualmente significan más clientes';
|
|||
|
|
return `${feature}: Esto ayuda a predecir cuánto venderás`;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<Tooltip content={getTooltip(feature)}>
|
|||
|
|
<Badge
|
|||
|
|
variant="secondary"
|
|||
|
|
className="flex items-center gap-1 text-xs md:text-sm px-2 py-1"
|
|||
|
|
role="button"
|
|||
|
|
tabIndex={0}
|
|||
|
|
aria-label={`Característica: ${feature}. ${getTooltip(feature)}`}
|
|||
|
|
>
|
|||
|
|
<span className="text-xs" aria-hidden="true">{getIcon(feature)}</span>
|
|||
|
|
<span className="truncate max-w-[120px]">{feature}</span>
|
|||
|
|
</Badge>
|
|||
|
|
</Tooltip>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const ModelDetailsModal: React.FC<ModelDetailsModalProps> = ({
|
|||
|
|
isOpen,
|
|||
|
|
onClose,
|
|||
|
|
model
|
|||
|
|
}) => {
|
|||
|
|
// Early return if model is not provided
|
|||
|
|
if (!model) {
|
|||
|
|
return (
|
|||
|
|
<StatusModal
|
|||
|
|
isOpen={isOpen}
|
|||
|
|
onClose={onClose}
|
|||
|
|
mode="view"
|
|||
|
|
title="Model Details"
|
|||
|
|
sections={[]}
|
|||
|
|
actions={[]}
|
|||
|
|
size="xl"
|
|||
|
|
/>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Calculate business metrics from technical metrics
|
|||
|
|
// The API response has metrics directly on the model object, not nested in training_metrics
|
|||
|
|
const accuracy = calculateAccuracy((model as any).mape || model.training_metrics?.mape);
|
|||
|
|
const performanceColor = getPerformanceColor(accuracy);
|
|||
|
|
const performanceMessage = getPerformanceMessage(accuracy);
|
|||
|
|
|
|||
|
|
// Prepare sections for StatusModal
|
|||
|
|
const sections: StatusModalSection[] = [
|
|||
|
|
{
|
|||
|
|
title: "Resumen",
|
|||
|
|
icon: Activity,
|
|||
|
|
fields: [
|
|||
|
|
{
|
|||
|
|
label: "Rendimiento del Modelo",
|
|||
|
|
value: (
|
|||
|
|
<div className="w-full">
|
|||
|
|
<div className="flex justify-between text-sm mb-1">
|
|||
|
|
<span className="font-medium">Precisión</span>
|
|||
|
|
<span className="font-bold" style={{ color: performanceColor }} aria-label={`Precisión del modelo: ${accuracy.toFixed(0)} porciento`}>
|
|||
|
|
{accuracy.toFixed(0)}%
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<div className="w-full bg-[var(--bg-secondary)] rounded-full h-2.5" role="progressbar" aria-valuenow={accuracy} aria-valuemin={0} aria-valuemax={100} aria-label="Progreso de rendimiento del modelo">
|
|||
|
|
<div
|
|||
|
|
className="h-2.5 rounded-full transition-all duration-300 ease-out"
|
|||
|
|
style={{
|
|||
|
|
width: `${accuracy}%`,
|
|||
|
|
backgroundColor: performanceColor
|
|||
|
|
}}
|
|||
|
|
></div>
|
|||
|
|
</div>
|
|||
|
|
<div className="text-xs text-[var(--text-secondary)] mt-2">
|
|||
|
|
{performanceMessage}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
),
|
|||
|
|
span: 2
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: "Estado",
|
|||
|
|
value: (
|
|||
|
|
<span
|
|||
|
|
className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium"
|
|||
|
|
style={{
|
|||
|
|
backgroundColor: (model as any).is_active
|
|||
|
|
? 'color-mix(in srgb, var(--color-success) 20%, transparent)'
|
|||
|
|
: 'color-mix(in srgb, var(--color-error) 20%, transparent)',
|
|||
|
|
color: (model as any).is_active ? 'var(--color-success)' : 'var(--color-error)'
|
|||
|
|
}}
|
|||
|
|
aria-label={`Estado del modelo: ${(model as any).is_active ? 'Activo' : 'Inactivo'}`}
|
|||
|
|
>
|
|||
|
|
<span
|
|||
|
|
className="inline-block w-2 h-2 rounded-full mr-2"
|
|||
|
|
style={{
|
|||
|
|
backgroundColor: (model as any).is_active ? 'var(--color-success)' : 'var(--color-error)'
|
|||
|
|
}}
|
|||
|
|
></span>
|
|||
|
|
{(model as any).is_active ? 'Activo' : 'Inactivo'}
|
|||
|
|
</span>
|
|||
|
|
)
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: "Última Actualización",
|
|||
|
|
value: formatDate(model.created_at || new Date().toISOString())
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: "Período de Entrenamiento",
|
|||
|
|
value: `${formatDate((model as any).training_start_date || model.training_period?.start_date || new Date().toISOString())} - ${formatDate((model as any).training_end_date || model.training_period?.end_date || new Date().toISOString())}`
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: "Métricas de Rendimiento",
|
|||
|
|
icon: TrendingUp,
|
|||
|
|
fields: [
|
|||
|
|
{
|
|||
|
|
label: "Tasa de Precisión",
|
|||
|
|
value: `${accuracy.toFixed(0)}%`,
|
|||
|
|
highlight: true
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: "Diferencia Típica",
|
|||
|
|
value: (() => {
|
|||
|
|
const maeValue = ((model as any).mae || model.training_metrics?.mae || 0).toFixed(0);
|
|||
|
|
return (
|
|||
|
|
<div className="space-y-1">
|
|||
|
|
<div className="font-medium">±{maeValue} productos</div>
|
|||
|
|
<div className="text-xs text-[var(--text-secondary)]">
|
|||
|
|
En promedio, las predicciones se desvían por {maeValue} productos
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
})()
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: "Confiabilidad General",
|
|||
|
|
value: `${(((model as any).r2_score || model.training_metrics?.r2_score || 0) * 100).toFixed(0)}% confiable`
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: "Qué Significa Esto para Tu Panadería",
|
|||
|
|
icon: Target,
|
|||
|
|
fields: [
|
|||
|
|
{
|
|||
|
|
label: "Precisión de las Predicciones",
|
|||
|
|
value: (() => {
|
|||
|
|
const mapeValue = Math.round((model as any).mape || model.training_metrics?.mape || 0);
|
|||
|
|
return (
|
|||
|
|
<div className="space-y-2">
|
|||
|
|
<div className="text-sm font-medium text-[var(--text-primary)]">
|
|||
|
|
Error promedio: {mapeValue}%
|
|||
|
|
</div>
|
|||
|
|
<div className="text-xs text-[var(--text-secondary)] leading-relaxed">
|
|||
|
|
<strong>Ejemplo práctico:</strong> Si el modelo predice que venderás 100 panes,
|
|||
|
|
es muy probable que vendas entre {100 - mapeValue} y {100 + mapeValue} panes.
|
|||
|
|
Mientras menor sea este porcentaje, más precisas son las predicciones.
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
})(),
|
|||
|
|
span: 2
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: "Potencial de Reducción de Desperdicio",
|
|||
|
|
value: accuracy >= 80
|
|||
|
|
? `Podría ayudar a reducir el desperdicio diario en ~${Math.round(accuracy / 8)}% mediante mejor planificación`
|
|||
|
|
: accuracy >= 60
|
|||
|
|
? 'Alguna reducción de desperdicio posible con monitoreo cuidadoso'
|
|||
|
|
: 'Precisión del modelo demasiado baja para reducción confiable de desperdicio',
|
|||
|
|
highlight: true
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: "Factores que Considera el Modelo",
|
|||
|
|
icon: Settings,
|
|||
|
|
fields: [
|
|||
|
|
{
|
|||
|
|
label: "Información que Analiza",
|
|||
|
|
value: (() => {
|
|||
|
|
const features = ((model as any).features_used || model.features_used || []);
|
|||
|
|
const featureCount = features.length;
|
|||
|
|
|
|||
|
|
if (featureCount === 0) {
|
|||
|
|
return (
|
|||
|
|
<div className="text-sm text-[var(--text-secondary)] italic">
|
|||
|
|
Usando datos básicos de ventas e historial
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="space-y-3">
|
|||
|
|
<div className="text-sm text-[var(--text-secondary)]">
|
|||
|
|
El modelo analiza <strong>{featureCount} factores diferentes</strong> para hacer predicciones más precisas.
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="grid grid-cols-2 gap-3 text-xs">
|
|||
|
|
<div className="space-y-1">
|
|||
|
|
<div className="font-medium text-[var(--text-primary)]">📅 Temporales:</div>
|
|||
|
|
<div className="text-[var(--text-secondary)]">Días de semana, festivos, estaciones</div>
|
|||
|
|
</div>
|
|||
|
|
<div className="space-y-1">
|
|||
|
|
<div className="font-medium text-[var(--text-primary)]">🌤️ Clima:</div>
|
|||
|
|
<div className="text-[var(--text-secondary)]">Temperatura, lluvia, humedad</div>
|
|||
|
|
</div>
|
|||
|
|
<div className="space-y-1">
|
|||
|
|
<div className="font-medium text-[var(--text-primary)]">🚶 Tráfico:</div>
|
|||
|
|
<div className="text-[var(--text-secondary)]">Peatones, congestión, velocidad</div>
|
|||
|
|
</div>
|
|||
|
|
<div className="space-y-1">
|
|||
|
|
<div className="font-medium text-[var(--text-primary)]">📊 Ventas:</div>
|
|||
|
|
<div className="text-[var(--text-secondary)]">Historial, patrones, tendencias</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="text-xs text-[var(--text-secondary)] bg-[var(--bg-secondary)] rounded-md p-3 border-l-4 border-[var(--color-info)]">
|
|||
|
|
<strong>💡 En resumen:</strong> Cuantos más factores analiza el modelo, más precisas son las predicciones para tu panadería.
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
})(),
|
|||
|
|
span: 2
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: "Detalles Técnicos",
|
|||
|
|
icon: Calendar,
|
|||
|
|
fields: [
|
|||
|
|
{
|
|||
|
|
label: "Método de Predicción",
|
|||
|
|
value: model.model_type || 'Pronóstico con IA'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: "Última Actualización",
|
|||
|
|
value: formatDate(model.created_at || new Date().toISOString())
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: "Período de Entrenamiento",
|
|||
|
|
value: `${formatDate((model as any).training_start_date || model.training_period?.start_date || new Date().toISOString())} a ${formatDate((model as any).training_end_date || model.training_period?.end_date || new Date().toISOString())}`,
|
|||
|
|
span: 2
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: "Perspectivas de Negocio",
|
|||
|
|
icon: Lightbulb,
|
|||
|
|
fields: [
|
|||
|
|
{
|
|||
|
|
label: "Qué funciona mejor",
|
|||
|
|
value: (
|
|||
|
|
<div className="flex items-start">
|
|||
|
|
<CheckCircle className="text-[var(--color-success)] mr-2 mt-0.5 flex-shrink-0" size={16} />
|
|||
|
|
<span>Este modelo te da las predicciones más precisas para días de semana regulares</span>
|
|||
|
|
</div>
|
|||
|
|
),
|
|||
|
|
span: 2
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: "Ten cuidado con",
|
|||
|
|
value: (
|
|||
|
|
<div className="flex items-start">
|
|||
|
|
<AlertTriangle className="text-[var(--color-warning)] mr-2 mt-0.5 flex-shrink-0" size={16} />
|
|||
|
|
<span>Las predicciones pueden ser menos confiables durante festivos y eventos especiales</span>
|
|||
|
|
</div>
|
|||
|
|
),
|
|||
|
|
span: 2
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: "Patrones descubiertos",
|
|||
|
|
value: ((model as any).features_used || model.features_used || []).some((f: string) => f.toLowerCase().includes('weekend'))
|
|||
|
|
? "Tu negocio muestra patrones diferentes entre días de semana y fines de semana"
|
|||
|
|
: "Este modelo ha aprendido tus patrones regulares de ventas",
|
|||
|
|
span: 2
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: "Próximos pasos",
|
|||
|
|
value: accuracy < 80
|
|||
|
|
? "Considera reentrenar con datos más recientes para mejorar la precisión"
|
|||
|
|
: "Tu modelo está funcionando bien. Continúa monitoreando las predicciones",
|
|||
|
|
span: 2
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
// Actions for the modal - removed console.log placeholders for production readiness
|
|||
|
|
const actions = [
|
|||
|
|
{
|
|||
|
|
label: 'Actualizar Modelo',
|
|||
|
|
variant: 'primary' as const,
|
|||
|
|
onClick: () => {
|
|||
|
|
// TODO: Implement model retraining functionality
|
|||
|
|
// This should trigger a new training job for the product
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: 'Ver Predicciones',
|
|||
|
|
variant: 'secondary' as const,
|
|||
|
|
onClick: () => {
|
|||
|
|
// TODO: Navigate to forecast history or predictions view
|
|||
|
|
// This should show historical predictions vs actual sales
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
// Only show deactivate if model is active
|
|||
|
|
if ((model as any).is_active) {
|
|||
|
|
actions.push({
|
|||
|
|
label: 'Desactivar',
|
|||
|
|
variant: 'secondary' as const,
|
|||
|
|
onClick: () => {
|
|||
|
|
// TODO: Implement model deactivation
|
|||
|
|
// This should set model status to inactive
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<StatusModal
|
|||
|
|
isOpen={isOpen}
|
|||
|
|
onClose={onClose}
|
|||
|
|
mode="view"
|
|||
|
|
title="Detalles de Predicción de Ventas"
|
|||
|
|
subtitle={`Para ${model.model_type || 'tu producto'} • Actualizado ${model.created_at ? formatDate(model.created_at) : 'recientemente'}`}
|
|||
|
|
sections={sections}
|
|||
|
|
actions={actions}
|
|||
|
|
size="xl"
|
|||
|
|
actionsPosition="footer"
|
|||
|
|
/>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export default ModelDetailsModal;
|