flowyml 1.7.1__py3-none-any.whl → 1.7.2__py3-none-any.whl

flowyml/ui/frontend/src/components/ArtifactViewer.jsx

@@ -10,9 +10,13 @@ import {
     Code,
     Table as TableIcon,
     AlertCircle,
-    Download
+    Download,
+    TrendingUp,
+    Database,
 } from 'lucide-react';
-import { Button } from './ui/Button'; // Assuming you have a Button component, or use native button if not
+import { Button } from './ui/Button';
+import { TrainingHistoryChart } from './TrainingHistoryChart';
+import { DatasetViewer } from './DatasetViewer';
 
 SyntaxHighlighter.registerLanguage('json', json);
 SyntaxHighlighter.registerLanguage('python', python);
@@ -23,6 +27,17 @@ export function ArtifactViewer({ artifact }) {
     const [loading, setLoading] = useState(false);
     const [error, setError] = useState(null);
 
+    // Check if this is a Dataset artifact FIRST - before any async operations
+    // This ensures Dataset gets its own specialized viewer with histograms
+    const isDataset = artifact?.type?.toLowerCase() === 'dataset' ||
+        artifact?.asset_type?.toLowerCase() === 'dataset';
+
+    // Render Dataset viewer immediately if it's a dataset
+    // Don't wait for content fetch - dataset data is in properties
+    if (isDataset) {
+        return <DatasetViewer artifact={artifact} />;
+    }
+
     useEffect(() => {
         if (!artifact?.artifact_id) return;
         fetchContent();
@@ -110,6 +125,51 @@ export function ArtifactViewer({ artifact }) {
         );
     }
 
+    // Check if artifact has training history (from Keras callback)
+    const hasTrainingHistory = artifact?.training_history &&
+        artifact.training_history.epochs &&
+        artifact.training_history.epochs.length > 0;
+
+    // Render training history chart for model artifacts with training data
+    if (hasTrainingHistory) {
+        return (
+            <div className="space-y-6">
+                {/* Training History Visualization */}
+                <div>
+                    <div className="flex items-center gap-2 mb-4 pb-3 border-b border-slate-200 dark:border-slate-700">
+                        <TrendingUp className="text-primary-500" size={20} />
+                        <h4 className="text-lg font-bold text-slate-900 dark:text-white">Training History</h4>
+                        <span className="text-xs text-slate-500 bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded-full">
+                            {artifact.training_history.epochs.length} epochs
+                        </span>
+                    </div>
+                    <TrainingHistoryChart trainingHistory={artifact.training_history} compact={false} />
+                </div>
+
+                {/* Also show JSON content if available */}
+                {content && contentType === 'json' && (
+                    <div className="mt-6 pt-6 border-t border-slate-200 dark:border-slate-700">
+                        <h5 className="text-sm font-semibold text-slate-600 dark:text-slate-400 mb-3 flex items-center gap-2">
+                            <Code size={14} />
+                            Raw Metadata
+                        </h5>
+                        <div className="rounded-lg overflow-hidden border border-slate-200 dark:border-slate-700 shadow-sm">
+                            <div className="max-h-[30vh] overflow-y-auto bg-white dark:bg-slate-900">
+                                <SyntaxHighlighter
+                                    language="json"
+                                    style={docco}
+                                    customStyle={{ margin: 0, padding: '1rem', fontSize: '0.75rem' }}
+                                >
+                                    {JSON.stringify(content, null, 2)}
+                                </SyntaxHighlighter>
+                            </div>
+                        </div>
+                    </div>
+                )}
+            </div>
+        );
+    }
+
     if (contentType === 'image') {
         return (
             <div className="flex flex-col items-center bg-slate-50 dark:bg-slate-900 p-4 rounded-lg border border-slate-200 dark:border-slate-700">

flowyml/ui/frontend/src/components/AssetDetailsPanel.jsx

@@ -14,7 +14,17 @@ import {
     Layers,
     HardDrive,
     ExternalLink,
-    Info
+    Info,
+    Cpu,
+    Zap,
+    Settings,
+    Table,
+    PieChart,
+    TrendingUp,
+    Hash,
+    Gauge,
+    LineChart,
+    Eye
 } from 'lucide-react';
 import { Card } from './ui/Card';
 import { Badge } from './ui/Badge';
@@ -25,8 +35,10 @@ import { Link } from 'react-router-dom';
 import { motion } from 'framer-motion';
 import { ProjectSelector } from './ProjectSelector';
 import { fetchApi } from '../utils/api';
+import { DatasetViewer } from './DatasetViewer';
+import { TrainingHistoryChart } from './TrainingHistoryChart';
 
-export function AssetDetailsPanel({ asset, onClose }) {
+export function AssetDetailsPanel({ asset, onClose, hideHeader = false }) {
     const [activeTab, setActiveTab] = useState('overview');
     const [currentProject, setCurrentProject] = useState(asset?.project);
 
@@ -98,43 +110,54 @@ export function AssetDetailsPanel({ asset, onClose }) {
             className="h-full flex flex-col"
         >
             <Card className="flex-1 flex flex-col overflow-hidden">
-                {/* Header */}
-                <div className={`p-6 ${config.bgColor} border-b ${config.borderColor}`}>
-                    <div className="flex items-start justify-between mb-4">
-                        <div className={`p-3 rounded-xl bg-gradient-to-br ${config.color} text-white shadow-lg`}>
-                            <Icon size={32} />
+                {/* Header - can be hidden when embedded */}
+                {!hideHeader && (
+                    <div className={`p-6 ${config.bgColor} border-b ${config.borderColor}`}>
+                        <div className="flex items-start justify-between mb-4">
+                            <div className={`p-3 rounded-xl bg-gradient-to-br ${config.color} text-white shadow-lg`}>
+                                <Icon size={32} />
+                            </div>
+                            <button
+                                onClick={onClose}
+                                className="p-2 hover:bg-white/50 dark:hover:bg-slate-800/50 rounded-lg transition-colors"
+                            >
+                                <X size={20} className="text-slate-400" />
+                            </button>
                         </div>
-                        <button
-                            onClick={onClose}
-                            className="p-2 hover:bg-white/50 dark:hover:bg-slate-800/50 rounded-lg transition-colors"
-                        >
-                            <X size={20} className="text-slate-400" />
-                        </button>
-                    </div>
 
-                    <h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">
-                        {asset.name}
-                    </h2>
-
-                    <div className="flex items-center gap-2 flex-wrap">
-                        <Badge className={`bg-gradient-to-r ${config.color} text-white border-0`}>
-                            {asset.type}
-                        </Badge>
-                        <ProjectSelector
-                            currentProject={currentProject}
-                            onUpdate={handleProjectUpdate}
-                        />
+                        <h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">
+                            {asset.name}
+                        </h2>
+
+                        <div className="flex items-center gap-2 flex-wrap">
+                            <Badge className={`bg-gradient-to-r ${config.color} text-white border-0`}>
+                                {asset.type}
+                            </Badge>
+                            <ProjectSelector
+                                currentProject={currentProject}
+                                onUpdate={handleProjectUpdate}
+                            />
+                        </div>
                     </div>
-                </div>
+                )}
 
                 {/* Tabs */}
-                <div className="flex items-center gap-1 p-2 border-b border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900">
+                <div className="flex items-center gap-1 p-2 border-b border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 overflow-x-auto">
                     <TabButton
                         active={activeTab === 'overview'}
                         onClick={() => setActiveTab('overview')}
                         icon={Info}
                         label="Overview"
                     />
+                    {/* Show Visualization tab for Datasets and Models */}
+                    {(asset.type?.toLowerCase() === 'dataset' || asset.type?.toLowerCase() === 'model') && (
+                        <TabButton
+                            active={activeTab === 'visualization'}
+                            onClick={() => setActiveTab('visualization')}
+                            icon={asset.type?.toLowerCase() === 'model' ? LineChart : BarChart2}
+                            label={asset.type?.toLowerCase() === 'model' ? 'Training' : 'Statistics'}
+                        />
+                    )}
                     <TabButton
                         active={activeTab === 'properties'}
                         onClick={() => setActiveTab('properties')}
@@ -151,8 +174,38 @@ export function AssetDetailsPanel({ asset, onClose }) {
 
                 {/* Content */}
                 <div className="flex-1 overflow-y-auto p-6 space-y-6">
+                    {/* Visualization Tab - Rich interactive visualizations */}
+                    {activeTab === 'visualization' && (
+                        <div className="space-y-6">
+                            {/* Dataset Visualization with full DatasetViewer */}
+                            {asset.type?.toLowerCase() === 'dataset' && (
+                                <DatasetViewer artifact={asset} />
+                            )}
+
+                            {/* Model Visualization with Training History */}
+                            {asset.type?.toLowerCase() === 'model' && (
+                                <ModelVisualization asset={asset} />
+                            )}
+                        </div>
+                    )}
+
                     {activeTab === 'overview' && (
                         <>
+                            {/* Model-specific Auto-extracted Info */}
+                            {asset.type?.toLowerCase() === 'model' && asset.properties && (
+                                <ModelOverview properties={asset.properties} />
+                            )}
+
+                            {/* Dataset-specific Auto-extracted Info */}
+                            {asset.type?.toLowerCase() === 'dataset' && asset.properties && (
+                                <DatasetOverview properties={asset.properties} />
+                            )}
+
+                            {/* Metrics-specific Info */}
+                            {asset.type?.toLowerCase() === 'metrics' && asset.properties && (
+                                <MetricsOverview properties={asset.properties} />
+                            )}
+
                             {/* Key Information */}
                             <div>
                                 <h3 className="text-sm font-semibold text-slate-700 dark:text-slate-300 uppercase tracking-wider mb-3 flex items-center gap-2">
@@ -371,3 +424,323 @@ function TabButton({ active, onClick, icon: Icon, label }) {
         </button>
     );
 }
+
+// Model-specific overview with auto-extracted metadata
+function ModelOverview({ properties }) {
+    const framework = properties.framework;
+    const parameters = properties.parameters;
+    const trainableParams = properties.trainable_parameters;
+    const optimizer = properties.optimizer;
+    const learningRate = properties.learning_rate;
+    const lossFunction = properties.loss_function;
+    const numLayers = properties.num_layers;
+    const layerTypes = properties.layer_types;
+    const architecture = properties.architecture || properties.model_class;
+    const isAutoExtracted = properties._auto_extracted;
+
+    if (!framework && !parameters) return null;
+
+    const formatNumber = (num) => {
+        if (!num) return 'N/A';
+        if (num >= 1000000) return (num / 1000000).toFixed(1) + 'M';
+        if (num >= 1000) return (num / 1000).toFixed(1) + 'K';
+        return num.toLocaleString();
+    };
+
+    return (
+        <div className="space-y-4">
+            <div className="flex items-center justify-between">
+                <h3 className="text-sm font-semibold text-slate-700 dark:text-slate-300 uppercase tracking-wider flex items-center gap-2">
+                    <Cpu size={16} className="text-purple-500" />
+                    Model Details
+                </h3>
+                {isAutoExtracted && (
+                    <span className="text-[10px] bg-purple-100 dark:bg-purple-900/30 text-purple-600 dark:text-purple-400 px-2 py-0.5 rounded-full">
+                        Auto-extracted
+                    </span>
+                )}
+            </div>
+
+            {/* Framework & Architecture */}
+            <div className="grid grid-cols-2 gap-3">
+                {framework && (
+                    <div className="bg-gradient-to-br from-purple-50 to-pink-50 dark:from-purple-900/20 dark:to-pink-900/20 rounded-lg p-3 border border-purple-100 dark:border-purple-800">
+                        <div className="flex items-center gap-2 mb-1">
+                            <Zap size={12} className="text-purple-500" />
+                            <span className="text-[10px] text-purple-600 dark:text-purple-400 font-medium uppercase">Framework</span>
+                        </div>
+                        <p className="text-lg font-bold text-purple-700 dark:text-purple-300 capitalize">{framework}</p>
+                    </div>
+                )}
+                {architecture && (
+                    <div className="bg-slate-50 dark:bg-slate-800/50 rounded-lg p-3 border border-slate-200 dark:border-slate-700">
+                        <div className="flex items-center gap-2 mb-1">
+                            <Settings size={12} className="text-slate-500" />
+                            <span className="text-[10px] text-slate-500 font-medium uppercase">Architecture</span>
+                        </div>
+                        <p className="text-sm font-semibold text-slate-900 dark:text-white truncate">{architecture}</p>
+                    </div>
+                )}
+            </div>
+
+            {/* Parameters */}
+            {parameters && (
+                <div className="grid grid-cols-2 gap-3">
+                    <div className="bg-slate-50 dark:bg-slate-800/50 rounded-lg p-3 border border-slate-200 dark:border-slate-700">
+                        <div className="flex items-center gap-2 mb-1">
+                            <Hash size={12} className="text-slate-500" />
+                            <span className="text-[10px] text-slate-500 font-medium uppercase">Parameters</span>
+                        </div>
+                        <p className="text-xl font-bold text-slate-900 dark:text-white">{formatNumber(parameters)}</p>
+                    </div>
+                    {trainableParams && (
+                        <div className="bg-slate-50 dark:bg-slate-800/50 rounded-lg p-3 border border-slate-200 dark:border-slate-700">
+                            <div className="flex items-center gap-2 mb-1">
+                                <TrendingUp size={12} className="text-slate-500" />
+                                <span className="text-[10px] text-slate-500 font-medium uppercase">Trainable</span>
+                            </div>
+                            <p className="text-xl font-bold text-slate-900 dark:text-white">{formatNumber(trainableParams)}</p>
+                        </div>
+                    )}
+                </div>
+            )}
+
+            {/* Training Config */}
+            {(optimizer || lossFunction || learningRate) && (
+                <div className="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-3 border border-blue-100 dark:border-blue-800">
+                    <h4 className="text-[10px] text-blue-600 dark:text-blue-400 font-medium uppercase mb-2">Training Configuration</h4>
+                    <div className="grid grid-cols-3 gap-2 text-xs">
+                        {optimizer && (
+                            <div>
+                                <span className="text-blue-500">Optimizer:</span>
+                                <span className="ml-1 font-medium text-blue-700 dark:text-blue-300">{optimizer}</span>
+                            </div>
+                        )}
+                        {learningRate && (
+                            <div>
+                                <span className="text-blue-500">LR:</span>
+                                <span className="ml-1 font-medium text-blue-700 dark:text-blue-300">
+                                    {typeof learningRate === 'number' ? learningRate.toExponential(2) : learningRate}
+                                </span>
+                            </div>
+                        )}
+                        {lossFunction && (
+                            <div>
+                                <span className="text-blue-500">Loss:</span>
+                                <span className="ml-1 font-medium text-blue-700 dark:text-blue-300">{lossFunction}</span>
+                            </div>
+                        )}
+                    </div>
+                </div>
+            )}
+
+            {/* Layers */}
+            {(numLayers || layerTypes) && (
+                <div className="bg-slate-50 dark:bg-slate-800/50 rounded-lg p-3 border border-slate-200 dark:border-slate-700">
+                    <div className="flex items-center justify-between mb-2">
+                        <h4 className="text-[10px] text-slate-500 font-medium uppercase">Layers</h4>
+                        {numLayers && <span className="text-sm font-bold text-slate-900 dark:text-white">{numLayers}</span>}
+                    </div>
+                    {layerTypes && (
+                        <div className="flex flex-wrap gap-1">
+                            {(Array.isArray(layerTypes) ? layerTypes : JSON.parse(layerTypes || '[]')).map((type, i) => (
+                                <span key={i} className="text-[10px] bg-slate-200 dark:bg-slate-700 text-slate-600 dark:text-slate-300 px-2 py-0.5 rounded">
+                                    {type}
+                                </span>
+                            ))}
+                        </div>
+                    )}
+                </div>
+            )}
+        </div>
+    );
+}
+
+// Dataset-specific overview with auto-extracted metadata
+function DatasetOverview({ properties }) {
+    const samples = properties.samples || properties.num_samples;
+    const features = properties.num_features;
+    const columns = properties.columns || properties.feature_columns;
+    const framework = properties.framework;
+    const labelColumn = properties.label_column;
+    const columnStats = properties.column_stats;
+    const isAutoExtracted = properties._auto_extracted;
+
+    if (!samples && !features && !columns) return null;
+
+    return (
+        <div className="space-y-4">
+            <div className="flex items-center justify-between">
+                <h3 className="text-sm font-semibold text-slate-700 dark:text-slate-300 uppercase tracking-wider flex items-center gap-2">
+                    <Database size={16} className="text-blue-500" />
+                    Dataset Details
+                </h3>
+                {isAutoExtracted && (
+                    <span className="text-[10px] bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 px-2 py-0.5 rounded-full">
+                        Auto-extracted
+                    </span>
+                )}
+            </div>
+
+            {/* Key Stats */}
+            <div className="grid grid-cols-3 gap-3">
+                {samples && (
+                    <div className="bg-gradient-to-br from-blue-50 to-cyan-50 dark:from-blue-900/20 dark:to-cyan-900/20 rounded-lg p-3 border border-blue-100 dark:border-blue-800">
+                        <div className="flex items-center gap-2 mb-1">
+                            <Table size={12} className="text-blue-500" />
+                            <span className="text-[10px] text-blue-600 dark:text-blue-400 font-medium uppercase">Samples</span>
+                        </div>
+                        <p className="text-xl font-bold text-blue-700 dark:text-blue-300">{samples.toLocaleString()}</p>
+                    </div>
+                )}
+                {features && (
+                    <div className="bg-slate-50 dark:bg-slate-800/50 rounded-lg p-3 border border-slate-200 dark:border-slate-700">
+                        <div className="flex items-center gap-2 mb-1">
+                            <PieChart size={12} className="text-slate-500" />
+                            <span className="text-[10px] text-slate-500 font-medium uppercase">Features</span>
+                        </div>
+                        <p className="text-xl font-bold text-slate-900 dark:text-white">{features}</p>
+                    </div>
+                )}
+                {framework && (
+                    <div className="bg-slate-50 dark:bg-slate-800/50 rounded-lg p-3 border border-slate-200 dark:border-slate-700">
+                        <div className="flex items-center gap-2 mb-1">
+                            <Zap size={12} className="text-slate-500" />
+                            <span className="text-[10px] text-slate-500 font-medium uppercase">Format</span>
+                        </div>
+                        <p className="text-sm font-bold text-slate-900 dark:text-white capitalize">{framework}</p>
+                    </div>
+                )}
+            </div>
+
+            {/* Columns */}
+            {columns && (
+                <div className="bg-slate-50 dark:bg-slate-800/50 rounded-lg p-3 border border-slate-200 dark:border-slate-700">
+                    <div className="flex items-center justify-between mb-2">
+                        <h4 className="text-[10px] text-slate-500 font-medium uppercase">Columns</h4>
+                        <span className="text-xs text-slate-400">{Array.isArray(columns) ? columns.length : 0} total</span>
+                    </div>
+                    <div className="flex flex-wrap gap-1">
+                        {(Array.isArray(columns) ? columns : []).slice(0, 10).map((col, i) => (
+                            <span
+                                key={i}
+                                className={`text-[10px] px-2 py-0.5 rounded ${
+                                    col === labelColumn
+                                        ? 'bg-emerald-100 dark:bg-emerald-900/30 text-emerald-600 dark:text-emerald-400 font-medium'
+                                        : 'bg-slate-200 dark:bg-slate-700 text-slate-600 dark:text-slate-300'
+                                }`}
+                            >
+                                {col}{col === labelColumn && ' (target)'}
+                            </span>
+                        ))}
+                        {Array.isArray(columns) && columns.length > 10 && (
+                            <span className="text-[10px] text-slate-400">+{columns.length - 10} more</span>
+                        )}
+                    </div>
+                </div>
+            )}
+
+            {/* Column Stats Preview */}
+            {columnStats && Object.keys(columnStats).length > 0 && (
+                <div className="bg-emerald-50 dark:bg-emerald-900/20 rounded-lg p-3 border border-emerald-100 dark:border-emerald-800">
+                    <h4 className="text-[10px] text-emerald-600 dark:text-emerald-400 font-medium uppercase mb-2">Column Statistics Available</h4>
+                    <p className="text-xs text-emerald-700 dark:text-emerald-300">
+                        {Object.keys(columnStats).length} columns with statistics (mean, std, min, max, etc.)
+                    </p>
+                </div>
+            )}
+        </div>
+    );
+}
+
+// Metrics-specific overview
+function MetricsOverview({ properties }) {
+    // Filter out internal properties
+    const metricEntries = Object.entries(properties).filter(([key]) =>
+        !key.startsWith('_') && !['data', 'samples', 'source'].includes(key)
+    );
+
+    if (metricEntries.length === 0) return null;
+
+    const formatValue = (value) => {
+        if (typeof value === 'number') {
+            if (value < 0.01 && value !== 0) return value.toExponential(3);
+            if (value > 1000) return value.toLocaleString();
+            return value.toFixed(4);
+        }
+        return String(value);
+    };
+
+    return (
+        <div className="space-y-4">
+            <h3 className="text-sm font-semibold text-slate-700 dark:text-slate-300 uppercase tracking-wider flex items-center gap-2">
+                <Gauge size={16} className="text-emerald-500" />
+                Evaluation Metrics
+            </h3>
+
+            <div className="grid grid-cols-2 gap-3">
+                {metricEntries.slice(0, 8).map(([key, value]) => (
+                    <div
+                        key={key}
+                        className="bg-gradient-to-br from-emerald-50 to-teal-50 dark:from-emerald-900/20 dark:to-teal-900/20 rounded-lg p-3 border border-emerald-100 dark:border-emerald-800"
+                    >
+                        <span className="text-[10px] text-emerald-600 dark:text-emerald-400 font-medium uppercase block mb-1">
+                            {key.replace(/_/g, ' ')}
+                        </span>
+                        <p className="text-lg font-bold text-emerald-700 dark:text-emerald-300 font-mono">
+                            {formatValue(value)}
+                        </p>
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+}
+
+// Model Visualization with Training History
+function ModelVisualization({ asset }) {
+    // Check for training history in different locations
+    const trainingHistory = asset.training_history ||
+        asset.properties?.training_history ||
+        null;
+
+    const hasTrainingHistory = trainingHistory &&
+        trainingHistory.epochs &&
+        trainingHistory.epochs.length > 0;
+
+    if (!hasTrainingHistory) {
+        return (
+            <div className="text-center py-12 bg-slate-50 dark:bg-slate-800/50 rounded-xl border border-slate-200 dark:border-slate-700">
+                <div className="inline-flex p-4 bg-white dark:bg-slate-800 rounded-full mb-4 shadow-sm">
+                    <LineChart size={32} className="text-slate-400" />
+                </div>
+                <h4 className="text-lg font-bold text-slate-900 dark:text-white mb-2">No Training History Available</h4>
+                <p className="text-sm text-slate-500 dark:text-slate-400 max-w-md mx-auto">
+                    This model artifact doesn't have training history data.
+                    <br />
+                    Use <code className="bg-slate-100 dark:bg-slate-700 px-1.5 py-0.5 rounded text-xs">FlowymlKerasCallback</code> during training to capture metrics.
+                </p>
+            </div>
+        );
+    }
+
+    return (
+        <div className="space-y-6">
+            {/* Header */}
+            <div className="flex items-center gap-3 pb-4 border-b border-slate-200 dark:border-slate-700">
+                <div className="p-3 bg-gradient-to-br from-purple-500 to-pink-600 rounded-xl shadow-lg">
+                    <LineChart size={24} className="text-white" />
+                </div>
+                <div>
+                    <h3 className="text-xl font-bold text-slate-900 dark:text-white">Training History</h3>
+                    <p className="text-sm text-slate-500 dark:text-slate-400">
+                        {trainingHistory.epochs.length} epochs recorded
+                    </p>
+                </div>
+            </div>
+
+            {/* Training History Chart */}
+            <TrainingHistoryChart trainingHistory={trainingHistory} compact={false} />
+        </div>
+    );
+}