680 lines
26 KiB
TypeScript
680 lines
26 KiB
TypeScript
|
import React, { useState, useMemo } from 'react';
|
||
|
|
import { Brain, TrendingUp, AlertCircle, Play, RotateCcw, Eye, Loader, CheckCircle } from 'lucide-react';
|
||
|
|
import { Button, Card, Badge, Modal, Table, Select, Input } from '../../../../components/ui';
|
||
|
|
import { PageHeader } from '../../../../components/layout';
|
||
|
|
import { useToast } from '../../../../hooks/ui/useToast';
|
||
|
|
import { useCurrentTenant } from '../../../../stores/tenant.store';
|
||
|
|
import { useIngredients } from '../../../../api/hooks/inventory';
|
||
|
|
import {
|
||
|
|
useModels,
|
||
|
|
useActiveModel,
|
||
|
|
useTrainSingleProduct,
|
||
|
|
useModelMetrics,
|
||
|
|
useModelPerformance,
|
||
|
|
useTenantTrainingStatistics
|
||
|
|
} from '../../../../api/hooks/training';
|
||
|
|
import type { IngredientResponse } from '../../../../api/types/inventory';
|
||
|
|
import type { TrainedModelResponse, SingleProductTrainingRequest } from '../../../../api/types/training';
|
||
|
|
|
||
|
|
// Actual API response structure (different from expected paginated response)
|
||
|
|
interface ModelsApiResponse {
|
||
|
|
tenant_id: string;
|
||
|
|
models: TrainedModelResponse[];
|
||
|
|
total_returned: number;
|
||
|
|
active_only: boolean;
|
||
|
|
pagination: any;
|
||
|
|
enhanced_features: boolean;
|
||
|
|
repository_integration: boolean;
|
||
|
|
}
|
||
|
|
|
||
|
|
interface ModelStatus {
|
||
|
|
ingredient: IngredientResponse;
|
||
|
|
hasModel: boolean;
|
||
|
|
model?: TrainedModelResponse;
|
||
|
|
isTraining: boolean;
|
||
|
|
trainingJobId?: string;
|
||
|
|
lastTrainingDate?: string;
|
||
|
|
accuracy?: number;
|
||
|
|
status: 'no_model' | 'active' | 'training' | 'error';
|
||
|
|
}
|
||
|
|
|
||
|
|
const ModelsConfigPage: React.FC = () => {
|
||
|
|
const { addToast } = useToast();
|
||
|
|
const currentTenant = useCurrentTenant();
|
||
|
|
const tenantId = currentTenant?.id || '';
|
||
|
|
|
||
|
|
const [selectedIngredient, setSelectedIngredient] = useState<IngredientResponse | null>(null);
|
||
|
|
const [showTrainingModal, setShowTrainingModal] = useState(false);
|
||
|
|
const [showModelDetailsModal, setShowModelDetailsModal] = useState(false);
|
||
|
|
const [trainingSettings, setTrainingSettings] = useState<Partial<SingleProductTrainingRequest>>({
|
||
|
|
seasonality_mode: 'additive',
|
||
|
|
daily_seasonality: true,
|
||
|
|
weekly_seasonality: true,
|
||
|
|
yearly_seasonality: false,
|
||
|
|
});
|
||
|
|
|
||
|
|
// API hooks
|
||
|
|
const { data: ingredients = [], isLoading: ingredientsLoading } = useIngredients(tenantId);
|
||
|
|
const { data: modelsData, isLoading: modelsLoading, error: modelsError } = useModels(tenantId);
|
||
|
|
const { data: statistics, error: statsError } = useTenantTrainingStatistics(tenantId);
|
||
|
|
const trainMutation = useTrainSingleProduct();
|
||
|
|
|
||
|
|
// Debug: Log the models data structure
|
||
|
|
React.useEffect(() => {
|
||
|
|
console.log('Models data structure:', {
|
||
|
|
modelsData,
|
||
|
|
modelsLoading,
|
||
|
|
modelsError,
|
||
|
|
ingredients: ingredients.length
|
||
|
|
});
|
||
|
|
}, [modelsData, modelsLoading, modelsError, ingredients]);
|
||
|
|
|
||
|
|
// Build model status for each ingredient
|
||
|
|
const modelStatuses = useMemo<ModelStatus[]>(() => {
|
||
|
|
// Handle different possible data structures from the API response
|
||
|
|
let models: TrainedModelResponse[] = [];
|
||
|
|
|
||
|
|
// The API actually returns { models: [...], tenant_id: ..., total_returned: ... }
|
||
|
|
const apiResponse = modelsData as any as ModelsApiResponse;
|
||
|
|
if (apiResponse?.models && Array.isArray(apiResponse.models)) {
|
||
|
|
models = apiResponse.models;
|
||
|
|
} else if (modelsData?.data && Array.isArray(modelsData.data)) {
|
||
|
|
models = modelsData.data;
|
||
|
|
} else if (modelsData && Array.isArray(modelsData)) {
|
||
|
|
models = modelsData as any;
|
||
|
|
}
|
||
|
|
|
||
|
|
console.log('Processing models:', {
|
||
|
|
modelsData,
|
||
|
|
extractedModels: models,
|
||
|
|
modelsCount: models.length,
|
||
|
|
ingredientsCount: ingredients.length
|
||
|
|
});
|
||
|
|
|
||
|
|
return ingredients.map((ingredient: IngredientResponse) => {
|
||
|
|
const model = models.find((m: any) => {
|
||
|
|
// Focus only on ID-based matching
|
||
|
|
return m.inventory_product_id === ingredient.id ||
|
||
|
|
String(m.inventory_product_id) === String(ingredient.id);
|
||
|
|
});
|
||
|
|
|
||
|
|
const isTraining = false; // We'll track this separately for active training jobs
|
||
|
|
|
||
|
|
console.log(`Ingredient ${ingredient.name} (${ingredient.id}):`, {
|
||
|
|
hasModel: !!model,
|
||
|
|
model: model ? {
|
||
|
|
id: model.model_id,
|
||
|
|
created: model.created_at,
|
||
|
|
inventory_product_id: model.inventory_product_id
|
||
|
|
} : null
|
||
|
|
});
|
||
|
|
|
||
|
|
return {
|
||
|
|
ingredient,
|
||
|
|
hasModel: !!model,
|
||
|
|
model,
|
||
|
|
isTraining,
|
||
|
|
lastTrainingDate: model?.created_at,
|
||
|
|
accuracy: model?.training_metrics?.mape ? (100 - model.training_metrics.mape) : undefined,
|
||
|
|
status: model
|
||
|
|
? (isTraining ? 'training' : 'active')
|
||
|
|
: 'no_model'
|
||
|
|
};
|
||
|
|
});
|
||
|
|
}, [ingredients, modelsData]);
|
||
|
|
|
||
|
|
// Calculate orphaned models (models for ingredients that no longer exist)
|
||
|
|
const orphanedModels = useMemo(() => {
|
||
|
|
const apiResponse = modelsData as any as ModelsApiResponse;
|
||
|
|
const models = apiResponse?.models || [];
|
||
|
|
const ingredientIds = new Set(ingredients.map(ing => ing.id));
|
||
|
|
|
||
|
|
return models.filter((model: any) => !ingredientIds.has(model.inventory_product_id));
|
||
|
|
}, [modelsData, ingredients]);
|
||
|
|
|
||
|
|
// Filter and search
|
||
|
|
const [searchTerm, setSearchTerm] = useState('');
|
||
|
|
const [statusFilter, setStatusFilter] = useState<string>('all');
|
||
|
|
|
||
|
|
const filteredStatuses = useMemo(() => {
|
||
|
|
return modelStatuses.filter(status => {
|
||
|
|
const matchesSearch = status.ingredient.name.toLowerCase().includes(searchTerm.toLowerCase());
|
||
|
|
const matchesStatus = statusFilter === 'all' || status.status === statusFilter;
|
||
|
|
return matchesSearch && matchesStatus;
|
||
|
|
});
|
||
|
|
}, [modelStatuses, searchTerm, statusFilter]);
|
||
|
|
|
||
|
|
const handleTrainModel = async () => {
|
||
|
|
if (!selectedIngredient) return;
|
||
|
|
|
||
|
|
try {
|
||
|
|
await trainMutation.mutateAsync({
|
||
|
|
tenantId,
|
||
|
|
inventoryProductId: selectedIngredient.id,
|
||
|
|
request: trainingSettings
|
||
|
|
});
|
||
|
|
|
||
|
|
addToast(`Entrenamiento iniciado para ${selectedIngredient.name}`, { type: 'success' });
|
||
|
|
setShowTrainingModal(false);
|
||
|
|
} catch (error) {
|
||
|
|
addToast('Error al iniciar el entrenamiento', { type: 'error' });
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleViewModelDetails = (ingredient: IngredientResponse) => {
|
||
|
|
setSelectedIngredient(ingredient);
|
||
|
|
setShowModelDetailsModal(true);
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleStartTraining = (ingredient: IngredientResponse) => {
|
||
|
|
setSelectedIngredient(ingredient);
|
||
|
|
setShowTrainingModal(true);
|
||
|
|
};
|
||
|
|
|
||
|
|
const getStatusBadge = (status: ModelStatus['status']) => {
|
||
|
|
switch (status) {
|
||
|
|
case 'no_model':
|
||
|
|
return <Badge variant="secondary">Sin modelo</Badge>;
|
||
|
|
case 'active':
|
||
|
|
return <Badge variant="success">Activo</Badge>;
|
||
|
|
case 'training':
|
||
|
|
return <Badge variant="warning">Entrenando</Badge>;
|
||
|
|
case 'error':
|
||
|
|
return <Badge variant="error">Error</Badge>;
|
||
|
|
default:
|
||
|
|
return <Badge variant="secondary">Desconocido</Badge>;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const getAccuracyBadge = (accuracy?: number) => {
|
||
|
|
if (!accuracy) return null;
|
||
|
|
|
||
|
|
const variant = accuracy >= 90 ? 'success' : accuracy >= 75 ? 'warning' : 'error';
|
||
|
|
return <Badge variant={variant} size="sm">{accuracy.toFixed(1)}%</Badge>;
|
||
|
|
};
|
||
|
|
|
||
|
|
// Table columns configuration
|
||
|
|
const tableColumns = [
|
||
|
|
{
|
||
|
|
key: 'ingredient',
|
||
|
|
title: 'Ingrediente',
|
||
|
|
render: (_: any, status: ModelStatus) => (
|
||
|
|
<div className="flex items-center gap-3">
|
||
|
|
<div className="w-10 h-10 bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-primary-dark)] rounded-lg flex items-center justify-center text-white font-bold">
|
||
|
|
{status.ingredient.name.charAt(0).toUpperCase()}
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<div className="font-medium text-[var(--text-primary)]">{status.ingredient.name}</div>
|
||
|
|
<div className="text-sm text-[var(--text-secondary)]">{status.ingredient.category}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: 'status',
|
||
|
|
title: 'Estado del Modelo',
|
||
|
|
render: (_: any, status: ModelStatus) => (
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
{getStatusBadge(status.status)}
|
||
|
|
{status.accuracy && getAccuracyBadge(status.accuracy)}
|
||
|
|
</div>
|
||
|
|
),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: 'lastTrained',
|
||
|
|
title: 'Último Entrenamiento',
|
||
|
|
render: (_: any, status: ModelStatus) => (
|
||
|
|
<div className="text-sm text-[var(--text-secondary)]">
|
||
|
|
{status.lastTrainingDate
|
||
|
|
? new Date(status.lastTrainingDate).toLocaleDateString('es-ES')
|
||
|
|
: 'Nunca'
|
||
|
|
}
|
||
|
|
</div>
|
||
|
|
),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: 'actions',
|
||
|
|
title: 'Acciones',
|
||
|
|
render: (_: any, status: ModelStatus) => (
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
{status.hasModel && (
|
||
|
|
<Button
|
||
|
|
variant="ghost"
|
||
|
|
size="sm"
|
||
|
|
onClick={() => handleViewModelDetails(status.ingredient)}
|
||
|
|
leftIcon={<Eye className="w-4 h-4" />}
|
||
|
|
>
|
||
|
|
Ver detalles
|
||
|
|
</Button>
|
||
|
|
)}
|
||
|
|
<Button
|
||
|
|
variant={status.hasModel ? "outline" : "primary"}
|
||
|
|
size="sm"
|
||
|
|
onClick={() => handleStartTraining(status.ingredient)}
|
||
|
|
leftIcon={status.hasModel ? <RotateCcw className="w-4 h-4" /> : <Play className="w-4 h-4" />}
|
||
|
|
disabled={status.isTraining}
|
||
|
|
>
|
||
|
|
{status.hasModel ? 'Reentrenar' : 'Entrenar'}
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
),
|
||
|
|
},
|
||
|
|
];
|
||
|
|
|
||
|
|
if (ingredientsLoading || modelsLoading) {
|
||
|
|
return (
|
||
|
|
<div className="p-6 space-y-6">
|
||
|
|
<PageHeader
|
||
|
|
title="Configuración de Modelos IA"
|
||
|
|
description="Gestiona el entrenamiento y configuración de modelos de predicción para cada ingrediente"
|
||
|
|
/>
|
||
|
|
<div className="flex items-center justify-center h-64">
|
||
|
|
<Loader className="w-8 h-8 animate-spin" />
|
||
|
|
<span className="ml-2">
|
||
|
|
{ingredientsLoading ? 'Cargando ingredientes...' : 'Cargando modelos...'}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
if (modelsError) {
|
||
|
|
console.error('Error loading models:', modelsError);
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="p-6 space-y-6">
|
||
|
|
<PageHeader
|
||
|
|
title="Configuración de Modelos IA"
|
||
|
|
description="Gestiona el entrenamiento y configuración de modelos de predicción para cada ingrediente"
|
||
|
|
/>
|
||
|
|
|
||
|
|
|
||
|
|
{/* Statistics Cards */}
|
||
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-6">
|
||
|
|
<Card className="p-6">
|
||
|
|
<div className="flex items-center justify-between">
|
||
|
|
<div>
|
||
|
|
<div className="text-2xl font-bold text-[var(--text-primary)]">
|
||
|
|
{modelStatuses.filter(s => s.hasModel).length}
|
||
|
|
</div>
|
||
|
|
<div className="text-sm text-[var(--text-secondary)]">Ingredientes con Modelo</div>
|
||
|
|
</div>
|
||
|
|
<Brain className="w-8 h-8 text-[var(--color-primary)]" />
|
||
|
|
</div>
|
||
|
|
</Card>
|
||
|
|
|
||
|
|
<Card className="p-6">
|
||
|
|
<div className="flex items-center justify-between">
|
||
|
|
<div>
|
||
|
|
<div className="text-2xl font-bold text-[var(--text-primary)]">
|
||
|
|
{modelStatuses.filter(s => s.status === 'no_model').length}
|
||
|
|
</div>
|
||
|
|
<div className="text-sm text-[var(--text-secondary)]">Sin Modelo</div>
|
||
|
|
</div>
|
||
|
|
<AlertCircle className="w-8 h-8 text-[var(--color-warning)]" />
|
||
|
|
</div>
|
||
|
|
</Card>
|
||
|
|
|
||
|
|
<Card className="p-6">
|
||
|
|
<div className="flex items-center justify-between">
|
||
|
|
<div>
|
||
|
|
<div className="text-2xl font-bold text-[var(--text-primary)]">
|
||
|
|
{orphanedModels.length}
|
||
|
|
</div>
|
||
|
|
<div className="text-sm text-[var(--text-secondary)]">Modelos Huérfanos</div>
|
||
|
|
</div>
|
||
|
|
<AlertCircle className="w-8 h-8 text-[var(--color-secondary)]" />
|
||
|
|
</div>
|
||
|
|
</Card>
|
||
|
|
|
||
|
|
<Card className="p-6">
|
||
|
|
<div className="flex items-center justify-between">
|
||
|
|
<div>
|
||
|
|
<div className="text-2xl font-bold text-[var(--text-primary)]">
|
||
|
|
{statsError ? 'N/A' : (statistics?.average_accuracy ? `${(100 - statistics.average_accuracy).toFixed(1)}%` : 'N/A')}
|
||
|
|
</div>
|
||
|
|
<div className="text-sm text-[var(--text-secondary)]">Precisión Promedio</div>
|
||
|
|
</div>
|
||
|
|
<TrendingUp className="w-8 h-8 text-[var(--color-primary)]" />
|
||
|
|
</div>
|
||
|
|
</Card>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Orphaned Models Warning */}
|
||
|
|
{orphanedModels.length > 0 && (
|
||
|
|
<Card className="p-4 bg-orange-50 border-orange-200">
|
||
|
|
<div className="flex items-start gap-3">
|
||
|
|
<AlertCircle className="w-5 h-5 text-orange-600 mt-0.5" />
|
||
|
|
<div>
|
||
|
|
<h4 className="font-medium text-orange-900 mb-1">
|
||
|
|
Modelos Huérfanos Detectados
|
||
|
|
</h4>
|
||
|
|
<p className="text-sm text-orange-700">
|
||
|
|
Se encontraron {orphanedModels.length} modelos entrenados para ingredientes que ya no existen en el inventario.
|
||
|
|
Estos modelos pueden ser eliminados para optimizar el espacio de almacenamiento.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</Card>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* Filters */}
|
||
|
|
<Card className="p-6">
|
||
|
|
<div className="flex flex-col sm:flex-row gap-4">
|
||
|
|
<div className="flex-1">
|
||
|
|
<Input
|
||
|
|
placeholder="Buscar ingrediente..."
|
||
|
|
value={searchTerm}
|
||
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div className="w-full sm:w-48">
|
||
|
|
<Select
|
||
|
|
value={statusFilter}
|
||
|
|
onChange={(value) => setStatusFilter(value as string)}
|
||
|
|
options={[
|
||
|
|
{ value: 'all', label: 'Todos los estados' },
|
||
|
|
{ value: 'no_model', label: 'Sin modelo' },
|
||
|
|
{ value: 'active', label: 'Activo' },
|
||
|
|
{ value: 'training', label: 'Entrenando' },
|
||
|
|
{ value: 'error', label: 'Error' },
|
||
|
|
]}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</Card>
|
||
|
|
|
||
|
|
{/* Models Table */}
|
||
|
|
<Card>
|
||
|
|
{filteredStatuses.length === 0 ? (
|
||
|
|
<div className="flex flex-col items-center justify-center py-12">
|
||
|
|
<Brain className="w-12 h-12 text-[var(--color-secondary)] mb-4" />
|
||
|
|
<h3 className="text-lg font-medium text-[var(--text-primary)] mb-2">
|
||
|
|
No se encontraron ingredientes
|
||
|
|
</h3>
|
||
|
|
<p className="text-[var(--text-secondary)] text-center">
|
||
|
|
No hay ingredientes que coincidan con los filtros aplicados.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
) : (
|
||
|
|
<Table
|
||
|
|
data={filteredStatuses}
|
||
|
|
columns={tableColumns}
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
</Card>
|
||
|
|
|
||
|
|
{/* Training Modal */}
|
||
|
|
<Modal
|
||
|
|
isOpen={showTrainingModal}
|
||
|
|
onClose={() => setShowTrainingModal(false)}
|
||
|
|
title={`Entrenar Modelo - ${selectedIngredient?.name}`}
|
||
|
|
size="lg"
|
||
|
|
>
|
||
|
|
<div className="space-y-6">
|
||
|
|
<div className="p-4 bg-blue-50 rounded-lg">
|
||
|
|
<h4 className="font-medium text-blue-900 mb-2">Configuración de Entrenamiento</h4>
|
||
|
|
<p className="text-sm text-blue-700">
|
||
|
|
Configure los parámetros para el entrenamiento del modelo de predicción de demanda.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
|
|
<div>
|
||
|
|
<label className="block text-sm font-medium mb-2">Modo de Estacionalidad</label>
|
||
|
|
<Select
|
||
|
|
value={trainingSettings.seasonality_mode || 'additive'}
|
||
|
|
onChange={(value) => setTrainingSettings(prev => ({ ...prev, seasonality_mode: value as any }))}
|
||
|
|
options={[
|
||
|
|
{ value: 'additive', label: 'Aditivo' },
|
||
|
|
{ value: 'multiplicative', label: 'Multiplicativo' }
|
||
|
|
]}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="space-y-4">
|
||
|
|
<h4 className="font-medium text-sm">Patrones Estacionales</h4>
|
||
|
|
|
||
|
|
<label className="flex items-center space-x-2">
|
||
|
|
<input
|
||
|
|
type="checkbox"
|
||
|
|
checked={trainingSettings.daily_seasonality || false}
|
||
|
|
onChange={(e) => setTrainingSettings(prev => ({ ...prev, daily_seasonality: e.target.checked }))}
|
||
|
|
className="rounded border-[var(--border-primary)]"
|
||
|
|
/>
|
||
|
|
<span className="text-sm">Estacionalidad diaria</span>
|
||
|
|
</label>
|
||
|
|
|
||
|
|
<label className="flex items-center space-x-2">
|
||
|
|
<input
|
||
|
|
type="checkbox"
|
||
|
|
checked={trainingSettings.weekly_seasonality || false}
|
||
|
|
onChange={(e) => setTrainingSettings(prev => ({ ...prev, weekly_seasonality: e.target.checked }))}
|
||
|
|
className="rounded border-[var(--border-primary)]"
|
||
|
|
/>
|
||
|
|
<span className="text-sm">Estacionalidad semanal</span>
|
||
|
|
</label>
|
||
|
|
|
||
|
|
<label className="flex items-center space-x-2">
|
||
|
|
<input
|
||
|
|
type="checkbox"
|
||
|
|
checked={trainingSettings.yearly_seasonality || false}
|
||
|
|
onChange={(e) => setTrainingSettings(prev => ({ ...prev, yearly_seasonality: e.target.checked }))}
|
||
|
|
className="rounded border-[var(--border-primary)]"
|
||
|
|
/>
|
||
|
|
<span className="text-sm">Estacionalidad anual</span>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="flex justify-end space-x-3 pt-4 border-t">
|
||
|
|
<Button variant="outline" onClick={() => setShowTrainingModal(false)}>
|
||
|
|
Cancelar
|
||
|
|
</Button>
|
||
|
|
<Button
|
||
|
|
onClick={handleTrainModel}
|
||
|
|
isLoading={trainMutation.isPending}
|
||
|
|
leftIcon={<Play className="w-4 h-4" />}
|
||
|
|
>
|
||
|
|
Iniciar Entrenamiento
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</Modal>
|
||
|
|
|
||
|
|
{/* Model Details Modal */}
|
||
|
|
<Modal
|
||
|
|
isOpen={showModelDetailsModal}
|
||
|
|
onClose={() => setShowModelDetailsModal(false)}
|
||
|
|
title={`Detalles del Modelo - ${selectedIngredient?.name}`}
|
||
|
|
size="lg"
|
||
|
|
>
|
||
|
|
<div className="space-y-6">
|
||
|
|
{selectedIngredient && (
|
||
|
|
<ModelDetailsContent
|
||
|
|
tenantId={tenantId}
|
||
|
|
ingredientId={selectedIngredient.id}
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</Modal>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
// Component for model details content
|
||
|
|
const ModelDetailsContent: React.FC<{
|
||
|
|
tenantId: string;
|
||
|
|
ingredientId: string;
|
||
|
|
}> = ({ tenantId, ingredientId }) => {
|
||
|
|
const { data: activeModel } = useActiveModel(tenantId, ingredientId);
|
||
|
|
|
||
|
|
if (!activeModel) {
|
||
|
|
return (
|
||
|
|
<div className="text-center py-12">
|
||
|
|
<AlertCircle className="w-16 h-16 text-[var(--color-warning)] mx-auto mb-4" />
|
||
|
|
<h3 className="text-xl font-semibold mb-2 text-[var(--text-primary)]">No hay modelo disponible</h3>
|
||
|
|
<p className="text-[var(--text-secondary)] max-w-md mx-auto">
|
||
|
|
Este ingrediente no tiene un modelo entrenado disponible. Puedes entrenar uno nuevo usando el botón "Entrenar".
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
const precision = activeModel.training_metrics?.mape
|
||
|
|
? (100 - activeModel.training_metrics.mape).toFixed(1)
|
||
|
|
: 'N/A';
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="space-y-6">
|
||
|
|
{/* Model Overview */}
|
||
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||
|
|
<div className="bg-gradient-to-br from-green-50 to-green-100 p-6 rounded-xl border border-green-200">
|
||
|
|
<div className="text-center">
|
||
|
|
<div className="text-3xl font-bold text-green-700 mb-1">
|
||
|
|
{precision}%
|
||
|
|
</div>
|
||
|
|
<div className="text-sm font-medium text-green-600">Precisión</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="bg-gradient-to-br from-blue-50 to-blue-100 p-6 rounded-xl border border-blue-200">
|
||
|
|
<div className="text-center">
|
||
|
|
<div className="text-3xl font-bold text-blue-700 mb-1">
|
||
|
|
{activeModel.training_metrics?.mae?.toFixed(2) || 'N/A'}
|
||
|
|
</div>
|
||
|
|
<div className="text-sm font-medium text-blue-600">MAE</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="bg-gradient-to-br from-purple-50 to-purple-100 p-6 rounded-xl border border-purple-200">
|
||
|
|
<div className="text-center">
|
||
|
|
<div className="text-3xl font-bold text-purple-700 mb-1">
|
||
|
|
{activeModel.training_metrics?.rmse?.toFixed(2) || 'N/A'}
|
||
|
|
</div>
|
||
|
|
<div className="text-sm font-medium text-purple-600">RMSE</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Model Information */}
|
||
|
|
<Card className="p-6 bg-[var(--bg-primary)]">
|
||
|
|
<h4 className="text-lg font-semibold mb-6 text-[var(--text-primary)] flex items-center">
|
||
|
|
<Brain className="w-5 h-5 mr-2 text-[var(--color-primary)]" />
|
||
|
|
Información del Modelo
|
||
|
|
</h4>
|
||
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
|
|
<div className="space-y-4">
|
||
|
|
<div className="flex flex-col">
|
||
|
|
<span className="text-xs font-semibold text-[var(--text-tertiary)] uppercase tracking-wide mb-1">
|
||
|
|
Creado
|
||
|
|
</span>
|
||
|
|
<span className="text-sm text-[var(--text-primary)]">
|
||
|
|
{new Date(activeModel.created_at).toLocaleString('es-ES', {
|
||
|
|
year: 'numeric',
|
||
|
|
month: 'long',
|
||
|
|
day: 'numeric',
|
||
|
|
hour: '2-digit',
|
||
|
|
minute: '2-digit'
|
||
|
|
})}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="flex flex-col">
|
||
|
|
<span className="text-xs font-semibold text-[var(--text-tertiary)] uppercase tracking-wide mb-1">
|
||
|
|
Características usadas
|
||
|
|
</span>
|
||
|
|
<span className="text-sm text-[var(--text-primary)]">
|
||
|
|
{activeModel.features_used?.length || 0} variables
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="space-y-4">
|
||
|
|
<div className="flex flex-col">
|
||
|
|
<span className="text-xs font-semibold text-[var(--text-tertiary)] uppercase tracking-wide mb-1">
|
||
|
|
Período de entrenamiento
|
||
|
|
</span>
|
||
|
|
<span className="text-sm text-[var(--text-primary)]">
|
||
|
|
{activeModel.training_period?.start_date && activeModel.training_period?.end_date
|
||
|
|
? `${new Date(activeModel.training_period.start_date).toLocaleDateString('es-ES')} - ${new Date(activeModel.training_period.end_date).toLocaleDateString('es-ES')}`
|
||
|
|
: 'No disponible'
|
||
|
|
}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="flex flex-col">
|
||
|
|
<span className="text-xs font-semibold text-[var(--text-tertiary)] uppercase tracking-wide mb-1">
|
||
|
|
Hiperparámetros
|
||
|
|
</span>
|
||
|
|
<span className="text-sm text-[var(--text-primary)]">
|
||
|
|
{Object.keys(activeModel.hyperparameters || {}).length} configurados
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</Card>
|
||
|
|
|
||
|
|
{/* Features Used */}
|
||
|
|
{activeModel.features_used && activeModel.features_used.length > 0 && (
|
||
|
|
<Card className="p-6 bg-[var(--bg-primary)]">
|
||
|
|
<h4 className="text-lg font-semibold mb-4 text-[var(--text-primary)] flex items-center">
|
||
|
|
<TrendingUp className="w-5 h-5 mr-2 text-[var(--color-primary)]" />
|
||
|
|
Características del Modelo
|
||
|
|
</h4>
|
||
|
|
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
|
||
|
|
{activeModel.features_used.map((feature: string, index: number) => (
|
||
|
|
<div
|
||
|
|
key={index}
|
||
|
|
className="bg-[var(--bg-secondary)] border border-[var(--border-primary)] rounded-lg px-3 py-2 text-center"
|
||
|
|
>
|
||
|
|
<span className="text-sm font-medium text-[var(--text-primary)]">
|
||
|
|
{feature.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</Card>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* Training Performance */}
|
||
|
|
{activeModel.training_metrics && (
|
||
|
|
<Card className="p-6 bg-[var(--bg-primary)]">
|
||
|
|
<h4 className="text-lg font-semibold mb-4 text-[var(--text-primary)] flex items-center">
|
||
|
|
<CheckCircle className="w-5 h-5 mr-2 text-[var(--color-success)]" />
|
||
|
|
Métricas de Rendimiento
|
||
|
|
</h4>
|
||
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||
|
|
<div className="text-center p-4 bg-[var(--bg-secondary)] rounded-lg border border-[var(--border-primary)]">
|
||
|
|
<div className="text-2xl font-bold text-[var(--color-success)] mb-1">
|
||
|
|
{precision}%
|
||
|
|
</div>
|
||
|
|
<div className="text-xs text-[var(--text-tertiary)] uppercase tracking-wide">Precisión</div>
|
||
|
|
</div>
|
||
|
|
<div className="text-center p-4 bg-[var(--bg-secondary)] rounded-lg border border-[var(--border-primary)]">
|
||
|
|
<div className="text-2xl font-bold text-[var(--text-primary)] mb-1">
|
||
|
|
{activeModel.training_metrics.mae?.toFixed(2) || 'N/A'}
|
||
|
|
</div>
|
||
|
|
<div className="text-xs text-[var(--text-tertiary)] uppercase tracking-wide">MAE</div>
|
||
|
|
</div>
|
||
|
|
<div className="text-center p-4 bg-[var(--bg-secondary)] rounded-lg border border-[var(--border-primary)]">
|
||
|
|
<div className="text-2xl font-bold text-[var(--text-primary)] mb-1">
|
||
|
|
{activeModel.training_metrics.rmse?.toFixed(2) || 'N/A'}
|
||
|
|
</div>
|
||
|
|
<div className="text-xs text-[var(--text-tertiary)] uppercase tracking-wide">RMSE</div>
|
||
|
|
</div>
|
||
|
|
<div className="text-center p-4 bg-[var(--bg-secondary)] rounded-lg border border-[var(--border-primary)]">
|
||
|
|
<div className="text-2xl font-bold text-[var(--text-primary)] mb-1">
|
||
|
|
{activeModel.training_metrics.r2_score?.toFixed(3) || 'N/A'}
|
||
|
|
</div>
|
||
|
|
<div className="text-xs text-[var(--text-tertiary)] uppercase tracking-wide">R²</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</Card>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default ModelsConfigPage;
|