flowyml 1.2.0__py3-none-any.whl → 1.4.0__py3-none-any.whl

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

@@ -2,6 +2,17 @@ import React, { useState } from 'react';
 import { Search, LayoutGrid, List, Table as TableIcon, ArrowUpDown, Filter } from 'lucide-react';
 import { Button } from './Button';
 
+// Extracted TableRow component to avoid nested map minification issues
+const TableRow = ({ item, columns }) => (
+    <tr className="bg-white dark:bg-slate-800 hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors">
+        {columns.map((column, columnIndex) => (
+            <td key={columnIndex} className="px-6 py-4">
+                {column.render ? column.render(item) : item[column.key]}
+            </td>
+        ))}
+    </tr>
+);
+
 export function DataView({
     title,
     subtitle,
@@ -11,7 +22,7 @@ export function DataView({
     renderGrid,
     renderList,
     searchPlaceholder = "Search...",
-    initialView = 'grid',
+    initialView = 'table',
     emptyState,
     loading = false
 }) {
@@ -19,8 +30,21 @@ export function DataView({
     const [searchQuery, setSearchQuery] = useState('');
     const [sortConfig, setSortConfig] = useState({ key: null, direction: 'asc' });
 
+    // Safety checks
+    const safeItems = Array.isArray(items) ? items : [];
+    const safeColumns = Array.isArray(columns) ? columns : [];
+
+    // Default renderers if not provided
+    const defaultRenderGrid = (item) => (
+        <div className="p-4 bg-white dark:bg-slate-800 rounded-lg border border-slate-200 dark:border-slate-700">
+            <pre className="text-xs overflow-auto">{JSON.stringify(item, null, 2)}</pre>
+        </div>
+    );
+    const safeRenderGrid = renderGrid || defaultRenderGrid;
+    const safeRenderList = renderList || safeRenderGrid;
+
     // Filter items
-    const filteredItems = items.filter(item => {
+    const filteredItems = safeItems.filter(item => {
         if (!searchQuery) return true;
         const searchStr = searchQuery.toLowerCase();
         return Object.values(item).some(val =>
@@ -120,7 +144,7 @@ export function DataView({
                     {view === 'grid' && (
                         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                             {sortedItems.map((item, idx) => (
-                                <div key={idx}>{renderGrid(item)}</div>
+                                <div key={idx}>{safeRenderGrid(item)}</div>
                             ))}
                         </div>
                     )}
@@ -128,7 +152,7 @@ export function DataView({
                     {view === 'list' && (
                         <div className="space-y-4">
                             {sortedItems.map((item, idx) => (
-                                <div key={idx}>{renderList ? renderList(item) : renderGrid(item)}</div>
+                                <div key={idx}>{safeRenderList(item)}</div>
                             ))}
                         </div>
                     )}
@@ -139,29 +163,23 @@ export function DataView({
                                 <table className="w-full text-sm text-left">
                                     <thead className="text-xs text-slate-500 uppercase bg-slate-50 dark:bg-slate-900/50 border-b border-slate-200 dark:border-slate-700">
                                         <tr>
-                                            {columns.map((col, idx) => (
+                                            {safeColumns.map((column, columnIndex) => (
                                                 <th
-                                                    key={idx}
+                                                    key={columnIndex}
                                                     className="px-6 py-3 font-medium cursor-pointer hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors"
-                                                    onClick={() => col.sortable && handleSort(col.key)}
+                                                    onClick={() => column.sortable && handleSort(column.key)}
                                                 >
                                                     <div className="flex items-center gap-2">
-                                                        {col.header}
-                                                        {col.sortable && <ArrowUpDown size={14} className="text-slate-400" />}
+                                                        {column.header}
+                                                        {column.sortable && <ArrowUpDown size={14} className="text-slate-400" />}
                                                     </div>
                                                 </th>
                                             ))}
                                         </tr>
                                     </thead>
                                     <tbody className="divide-y divide-slate-200 dark:divide-slate-700">
-                                        {sortedItems.map((item, idx) => (
-                                            <tr key={idx} className="bg-white dark:bg-slate-800 hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors">
-                                                {columns.map((col, colIdx) => (
-                                                    <td key={colIdx} className="px-6 py-4">
-                                                        {col.render ? col.render(item) : item[col.key]}
-                                                    </td>
-                                                ))}
-                                            </tr>
+                                        {sortedItems.map((item, itemIndex) => (
+                                            <TableRow key={itemIndex} item={item} columns={safeColumns} />
                                         ))}
                                     </tbody>
                                 </table>

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

@@ -0,0 +1,118 @@
+import React from 'react';
+import { RefreshCw, Bug, Terminal } from 'lucide-react';
+import { Button } from './Button';
+
+export class ErrorBoundary extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = { hasError: false, error: null, errorInfo: null, reported: false };
+    }
+
+    static getDerivedStateFromError(error) {
+        // Update state so the next render will show the fallback UI.
+        return { hasError: true, error };
+    }
+
+    componentDidCatch(error, errorInfo) {
+        console.error("Uncaught error:", error, errorInfo);
+        this.setState({ errorInfo });
+
+        // Report to backend
+        this.reportError(error, errorInfo);
+    }
+
+    reportError = async (error, errorInfo) => {
+        if (this.state.reported) return;
+
+        try {
+            // Use relative URL to work with proxy or same origin
+            await fetch('/api/client/errors', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    message: error.message || 'Unknown error',
+                    stack: error.stack,
+                    component_stack: errorInfo?.componentStack,
+                    url: window.location.href,
+                    user_agent: navigator.userAgent
+                }),
+            });
+            this.setState({ reported: true });
+        } catch (e) {
+            console.error("Failed to report error:", e);
+        }
+    }
+
+    handleReset = () => {
+        this.setState({ hasError: false, error: null, errorInfo: null, reported: false });
+        if (this.props.onReset) {
+            this.props.onReset();
+        }
+    };
+
+    render() {
+        if (this.state.hasError) {
+            if (this.props.fallback) {
+                return this.props.fallback;
+            }
+
+            return (
+                <div className="min-h-[400px] flex items-center justify-center p-6 w-full">
+                    <div className="max-w-lg w-full bg-white dark:bg-gray-900 rounded-2xl shadow-xl overflow-hidden border border-gray-200 dark:border-gray-800">
+                        <div className="bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500 h-2"></div>
+                        <div className="p-8">
+                            <div className="flex justify-center mb-6">
+                                <div className="relative">
+                                    <div className="absolute inset-0 bg-red-100 dark:bg-red-900/30 rounded-full animate-ping opacity-75"></div>
+                                    <div className="relative p-4 bg-red-50 dark:bg-red-900/20 rounded-full">
+                                        <Bug className="w-12 h-12 text-red-500 dark:text-red-400" />
+                                    </div>
+                                </div>
+                            </div>
+
+                            <h2 className="text-2xl font-bold text-center text-gray-900 dark:text-white mb-2">
+                                Well, this is awkward...
+                            </h2>
+
+                            <p className="text-center text-gray-600 dark:text-gray-400 mb-6">
+                                The hamsters powering this component decided to take an unscheduled nap.
+                                We've dispatched a team of digital veterinarians (aka developers) to wake them up.
+                            </p>
+
+                            <div className="bg-gray-50 dark:bg-gray-800 rounded-lg p-4 mb-6 font-mono text-xs text-left overflow-auto max-h-32 border border-gray-200 dark:border-gray-700">
+                                <div className="flex items-center text-red-500 mb-2">
+                                    <Terminal className="w-3 h-3 mr-2" />
+                                    <span className="font-semibold">Error Log</span>
+                                </div>
+                                <code className="text-gray-700 dark:text-gray-300 break-all whitespace-pre-wrap">
+                                    {this.state.error?.message || "Unknown error"}
+                                </code>
+                            </div>
+
+                            <div className="flex justify-center gap-4">
+                                <Button
+                                    onClick={() => window.location.reload()}
+                                    variant="outline"
+                                    className="border-gray-300 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800"
+                                >
+                                    Reload Page
+                                </Button>
+                                <Button
+                                    onClick={this.handleReset}
+                                    className="bg-gradient-to-r from-red-500 to-pink-600 hover:from-red-600 hover:to-pink-700 text-white border-0"
+                                >
+                                    <RefreshCw className="w-4 h-4 mr-2" />
+                                    Try Again
+                                </Button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            );
+        }
+
+        return this.props.children;
+    }
+}

flowyml/ui/frontend/src/contexts/ProjectContext.jsx

@@ -17,7 +17,7 @@ export function ProjectProvider({ children }) {
         fetch('/api/projects/')
             .then(res => res.json())
             .then(data => {
-                setProjects(data || []);
+                setProjects(data.projects || []);
                 setLoading(false);
             })
             .catch(err => {
@@ -48,7 +48,7 @@ export function ProjectProvider({ children }) {
         try {
             const res = await fetch('/api/projects/');
             const data = await res.json();
-            setProjects(data || []);
+            setProjects(data.projects || []);
         } catch (err) {
             console.error('Failed to refresh projects:', err);
         } finally {

flowyml/ui/frontend/src/contexts/ToastContext.jsx

@@ -0,0 +1,116 @@
+import React, { createContext, useContext, useState, useCallback } from 'react';
+import { X, CheckCircle, AlertCircle, Info, AlertTriangle } from 'lucide-react';
+import { motion, AnimatePresence } from 'framer-motion';
+
+const ToastContext = createContext();
+
+export function ToastProvider({ children }) {
+    const [toasts, setToasts] = useState([]);
+
+    const addToast = useCallback((message, type = 'info', duration = 5000) => {
+        const id = Date.now() + Math.random();
+        setToasts(prev => [...prev, { id, message, type, duration }]);
+
+        if (duration > 0) {
+            setTimeout(() => {
+                removeToast(id);
+            }, duration);
+        }
+    }, []);
+
+    const removeToast = useCallback((id) => {
+        setToasts(prev => prev.filter(toast => toast.id !== id));
+    }, []);
+
+    const success = useCallback((message, duration) => addToast(message, 'success', duration), [addToast]);
+    const error = useCallback((message, duration) => addToast(message, 'error', duration), [addToast]);
+    const warning = useCallback((message, duration) => addToast(message, 'warning', duration), [addToast]);
+    const info = useCallback((message, duration) => addToast(message, 'info', duration), [addToast]);
+
+    return (
+        <ToastContext.Provider value={{ success, error, warning, info, addToast }}>
+            {children}
+            <ToastContainer toasts={toasts} onRemove={removeToast} />
+        </ToastContext.Provider>
+    );
+}
+
+export function useToast() {
+    const context = useContext(ToastContext);
+    if (!context) {
+        throw new Error('useToast must be used within ToastProvider');
+    }
+    return context;
+}
+
+function ToastContainer({ toasts, onRemove }) {
+    return (
+        <div className="fixed top-4 right-4 z-50 flex flex-col gap-2 pointer-events-none">
+            <AnimatePresence>
+                {toasts.map(toast => (
+                    <Toast
+                        key={toast.id}
+                        toast={toast}
+                        onRemove={() => onRemove(toast.id)}
+                    />
+                ))}
+            </AnimatePresence>
+        </div>
+    );
+}
+
+function Toast({ toast, onRemove }) {
+    const { message, type } = toast;
+
+    const config = {
+        success: {
+            icon: CheckCircle,
+            bgClass: 'bg-emerald-50 dark:bg-emerald-900/20 border-emerald-200 dark:border-emerald-800',
+            iconClass: 'text-emerald-600 dark:text-emerald-400',
+            textClass: 'text-emerald-900 dark:text-emerald-100'
+        },
+        error: {
+            icon: AlertCircle,
+            bgClass: 'bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-800',
+            iconClass: 'text-red-600 dark:text-red-400',
+            textClass: 'text-red-900 dark:text-red-100'
+        },
+        warning: {
+            icon: AlertTriangle,
+            bgClass: 'bg-amber-50 dark:bg-amber-900/20 border-amber-200 dark:border-amber-800',
+            iconClass: 'text-amber-600 dark:text-amber-400',
+            textClass: 'text-amber-900 dark:text-amber-100'
+        },
+        info: {
+            icon: Info,
+            bgClass: 'bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800',
+            iconClass: 'text-blue-600 dark:text-blue-400',
+            textClass: 'text-blue-900 dark:text-blue-100'
+        }
+    };
+
+    const { icon: Icon, bgClass, iconClass, textClass } = config[type] || config.info;
+
+    return (
+        <motion.div
+            initial={{ opacity: 0, y: -20, scale: 0.95 }}
+            animate={{ opacity: 1, y: 0, scale: 1 }}
+            exit={{ opacity: 0, x: 100, scale: 0.95 }}
+            transition={{ duration: 0.2 }}
+            className={`pointer-events-auto ${bgClass} border rounded-lg shadow-lg p-4 pr-12 max-w-md relative`}
+        >
+            <div className="flex items-start gap-3">
+                <Icon className={`${iconClass} shrink-0 mt-0.5`} size={20} />
+                <p className={`${textClass} text-sm font-medium leading-relaxed`}>
+                    {message}
+                </p>
+            </div>
+            <button
+                onClick={onRemove}
+                className={`absolute top-3 right-3 ${iconClass} hover:opacity-70 transition-opacity`}
+            >
+                <X size={16} />
+            </button>
+        </motion.div>
+    );
+}

flowyml/ui/frontend/src/layouts/MainLayout.jsx

@@ -3,6 +3,8 @@ import { Outlet } from 'react-router-dom';
 import { Sidebar } from '../components/sidebar/Sidebar';
 import { Header } from '../components/header/Header';
 
+import { ErrorBoundary } from '../components/ui/ErrorBoundary';
+
 export function MainLayout() {
     const [collapsed, setCollapsed] = useState(false);
 
@@ -14,7 +16,9 @@ export function MainLayout() {
                 <Header />
                 <main className="flex-1 overflow-y-auto p-6 scrollbar-thin scrollbar-thumb-slate-200 dark:scrollbar-thumb-slate-700">
                     <div className="max-w-7xl mx-auto w-full">
-                        <Outlet />
+                        <ErrorBoundary>
+                            <Outlet />
+                        </ErrorBoundary>
                     </div>
                 </main>
             </div>

flowyml/ui/frontend/src/router/index.jsx

@@ -9,7 +9,9 @@ import { Experiments } from '../app/experiments/page';
 import { ExperimentDetails } from '../app/experiments/[experimentId]/page';
 import { Traces } from '../app/traces/page';
 import { Projects } from '../app/projects/page';
+import { ProjectDetails } from '../app/projects/[projectId]/page';
 import { Schedules } from '../app/schedules/page';
+import { Observability } from '../app/observability/page';
 import { Leaderboard } from '../app/leaderboard/page';
 import { Plugins } from '../app/plugins/page';
 import { Settings } from '../app/settings/page';
@@ -29,7 +31,9 @@ export const router = createBrowserRouter([
             { path: 'experiments/:experimentId', element: <ExperimentDetails /> },
             { path: 'traces', element: <Traces /> },
             { path: 'projects', element: <Projects /> },
+            { path: 'projects/:projectId', element: <ProjectDetails /> },
             { path: 'schedules', element: <Schedules /> },
+            { path: 'observability', element: <Observability /> },
             { path: 'leaderboard', element: <Leaderboard /> },
             { path: 'plugins', element: <Plugins /> },
             { path: 'settings', element: <Settings /> },

flowyml/ui/frontend/src/utils/date.js

@@ -0,0 +1,10 @@
+import { format, isValid } from 'date-fns';
+
+export function formatDate(dateString, formatStr = 'MMM d, yyyy') {
+    if (!dateString) return '-';
+
+    const date = new Date(dateString);
+    if (!isValid(date)) return '-';
+
+    return format(date, formatStr);
+}

flowyml/ui/frontend/src/utils/downloads.js

@@ -0,0 +1,11 @@
+import { getBaseUrl } from './api';
+
+export const downloadArtifactById = async (artifactId) => {
+    if (!artifactId) {
+        return;
+    }
+
+    const baseUrl = await getBaseUrl();
+    const url = `${baseUrl}/api/assets/${artifactId}/download`;
+    window.open(url, '_blank', 'noopener,noreferrer');
+};

flowyml/utils/config.py

@@ -18,12 +18,14 @@ class FlowymlConfig:
     cache_dir: Path = field(default_factory=lambda: Path(".flowyml/cache"))
     runs_dir: Path = field(default_factory=lambda: Path(".flowyml/runs"))
     experiments_dir: Path = field(default_factory=lambda: Path(".flowyml/experiments"))
+    projects_dir: Path = field(default_factory=lambda: Path(".flowyml/projects"))
 
     # Execution settings
     default_stack: str = "local"
     execution_mode: str = "local"  # local or remote
     remote_server_url: str = ""
     remote_ui_url: str = ""
+    remote_services: list[dict[str, str]] = field(default_factory=list)
     enable_caching: bool = True
     enable_logging: bool = True
     log_level: str = "INFO"
@@ -60,6 +62,7 @@ class FlowymlConfig:
             "cache_dir",
             "runs_dir",
             "experiments_dir",
+            "projects_dir",
         ]:
             value = getattr(self, field_name)
             if not isinstance(value, Path):
@@ -72,6 +75,7 @@ class FlowymlConfig:
         self.cache_dir.mkdir(parents=True, exist_ok=True)
         self.runs_dir.mkdir(parents=True, exist_ok=True)
         self.experiments_dir.mkdir(parents=True, exist_ok=True)
+        self.projects_dir.mkdir(parents=True, exist_ok=True)
 
         # Create metadata db parent dir
         self.metadata_db.parent.mkdir(parents=True, exist_ok=True)
@@ -85,10 +89,12 @@ class FlowymlConfig:
             "cache_dir": str(self.cache_dir),
             "runs_dir": str(self.runs_dir),
             "experiments_dir": str(self.experiments_dir),
+            "projects_dir": str(self.projects_dir),
             "default_stack": self.default_stack,
             "execution_mode": self.execution_mode,
             "remote_server_url": self.remote_server_url,
             "remote_ui_url": self.remote_ui_url,
+            "remote_services": self.remote_services,
             "enable_caching": self.enable_caching,
             "enable_logging": self.enable_logging,
             "log_level": self.log_level,

flowyml/utils/stack_config.py

@@ -232,13 +232,55 @@ def create_stack_from_config(config: dict[str, Any], name: str):
     elif stack_type == "gcp":
         from flowyml.stacks.gcp import GCPStack
 
+        artifact_cfg = config.get("artifact_store", {})
+        registry_cfg = config.get("container_registry", {})
+        orchestrator_cfg = config.get("orchestrator", {})
+
         return GCPStack(
             name=name,
             project_id=config.get("project_id"),
             region=config.get("region", "us-central1"),
-            bucket_name=config.get("artifact_store", {}).get("bucket"),
-            registry_uri=config.get("container_registry", {}).get("uri"),
-            service_account=config.get("orchestrator", {}).get("service_account"),
+            bucket_name=artifact_cfg.get("bucket"),
+            registry_uri=registry_cfg.get("uri"),
+            service_account=orchestrator_cfg.get("service_account"),
+        )
+
+    elif stack_type == "aws":
+        from flowyml.stacks.aws import AWSStack
+
+        artifact_cfg = config.get("artifact_store", {})
+        registry_cfg = config.get("container_registry", {})
+        orchestrator_cfg = config.get("orchestrator", {})
+
+        return AWSStack(
+            name=name,
+            region=config.get("region", "us-east-1"),
+            bucket_name=artifact_cfg.get("bucket"),
+            account_id=registry_cfg.get("account_id"),
+            registry_alias=registry_cfg.get("registry_alias"),
+            job_queue=orchestrator_cfg.get("job_queue"),
+            job_definition=orchestrator_cfg.get("job_definition"),
+            orchestrator_type=orchestrator_cfg.get("type", "batch"),
+            role_arn=orchestrator_cfg.get("role_arn"),
+        )
+
+    elif stack_type == "azure":
+        from flowyml.stacks.azure import AzureMLStack
+
+        artifact_cfg = config.get("artifact_store", {})
+        registry_cfg = config.get("container_registry", {})
+        orchestrator_cfg = config.get("orchestrator", {})
+
+        return AzureMLStack(
+            name=name,
+            subscription_id=config.get("subscription_id"),
+            resource_group=config.get("resource_group"),
+            workspace_name=config.get("workspace_name"),
+            compute=orchestrator_cfg.get("compute"),
+            account_url=artifact_cfg.get("account_url"),
+            container_name=artifact_cfg.get("container"),
+            registry_name=registry_cfg.get("name"),
+            login_server=registry_cfg.get("login_server"),
         )
 
     else:

{flowyml-1.2.0.dist-info → flowyml-1.4.0.dist-info}/METADATA

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: flowyml
-Version: 1.2.0
+Version: 1.4.0
 Summary: Next-Generation ML Pipeline Framework
 License: Apache-2.0
 License-File: LICENSE
@@ -19,24 +19,30 @@ Classifier: Programming Language :: Python :: 3.13
 Classifier: Programming Language :: Python :: 3.14
 Classifier: Topic :: Scientific/Engineering :: Artificial Intelligence
 Provides-Extra: all
+Provides-Extra: aws
+Provides-Extra: azure
 Provides-Extra: gcp
 Provides-Extra: pytorch
 Provides-Extra: sklearn
 Provides-Extra: tensorflow
 Provides-Extra: ui
 Requires-Dist: click (>=8.0.0)
+Requires-Dist: cloudpickle (>=2.0.0)
 Requires-Dist: croniter (>=2.0.1,<3.0.0)
 Requires-Dist: fastapi (>=0.122.0,<0.123.0) ; extra == "ui"
 Requires-Dist: google-cloud-aiplatform (>=1.35.0) ; extra == "gcp" or extra == "all"
 Requires-Dist: google-cloud-storage (>=2.10.0) ; extra == "gcp" or extra == "all"
+Requires-Dist: httpx (>=0.24,<0.28)
 Requires-Dist: loguru (>=0.7.3,<0.8.0)
 Requires-Dist: numpy (>=1.20.0)
 Requires-Dist: pandas (>=1.3.0)
+Requires-Dist: psycopg2-binary (>=2.9.0)
 Requires-Dist: pydantic (>=2.0.0)
 Requires-Dist: python-multipart (>=0.0.6) ; extra == "ui" or extra == "all"
 Requires-Dist: pytz (>=2024.1,<2025.0)
 Requires-Dist: pyyaml (>=6.0)
 Requires-Dist: scikit-learn (>=1.0.0) ; extra == "sklearn" or extra == "all"
+Requires-Dist: sqlalchemy (>=2.0.0)
 Requires-Dist: tensorflow (>=2.12.0) ; extra == "tensorflow" or extra == "all"
 Requires-Dist: toml (>=0.10.2)
 Requires-Dist: torch (>=2.0.0) ; extra == "pytorch" or extra == "all"
@@ -304,7 +310,41 @@ Ready for the enterprise. Run locally per project or deploy as a centralized ent
 - **Cloud Providers**: AWS, GCP, Azure (via plugins).
 - **Tools**: MLflow, Weights & Biases, Great Expectations.
 
-### 20. 📂 Project-Based Organization
+### 20. 📊 Automatic Training History Tracking
+FlowyML automatically captures and visualizes your model training progress with zero manual intervention.
+
+```python
+from flowyml.integrations.keras import FlowymlKerasCallback
+
+# Just add the callback - that's it!
+callback = FlowymlKerasCallback(
+    experiment_name="my-experiment",
+    project="my-project"
+)
+
+model.fit(
+    x_train, y_train,
+    validation_data=(x_val, y_val),
+    epochs=50,
+    callbacks=[callback]  # Auto-tracks all metrics!
+)
+```
+
+**What gets captured automatically:**
+- ✅ Loss (train & validation) per epoch
+- ✅ Accuracy (train & validation) per epoch
+- ✅ All custom metrics (F1, precision, recall, etc.)
+- ✅ Model architecture and parameters
+- ✅ Interactive charts in the UI
+
+**View beautiful training graphs in the UI:**
+1. Navigate to your project's Structure tab
+2. Click on any model artifact
+3. See interactive loss/accuracy charts over epochs!
+
+No external tools needed - all visualization built into FlowyML.
+
+### 21. 📂 Project-Based Organization
 Built-in multi-tenancy for managing multiple teams and initiatives.
 
 ```python
@@ -318,7 +358,7 @@ runs = project.list_runs()
 stats = project.get_stats()
 ```
 
-### 21. 📝 Pipeline Templates
+### 22. 📝 Pipeline Templates
 Stop reinventing the wheel. Use pre-built templates for common ML patterns.
 
 ```python
@@ -382,7 +422,7 @@ print(f"Run ID: {result.run_id}")
 print(f"Model Score: {result.outputs['model'].score}")
 ```
 
-### 16. 🌐 Pipeline Versioning
+### 23. 🌐 Pipeline Versioning
 Git-like versioning for pipelines. Track changes, compare, rollback.
 
 ```python