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

flowyml/ui/frontend/src/app/pipelines/page.jsx

@@ -111,15 +111,25 @@ export function Pipelines() {
                                 />
                             ) : (
                                 <div className="h-full flex flex-col items-center justify-center text-center p-8 bg-slate-50/50 dark:bg-slate-900/50">
-                                    <div className="w-20 h-20 bg-primary-100 dark:bg-primary-900/30 rounded-full flex items-center justify-center mb-6 animate-pulse">
+                                    <div className="w-20 h-20 bg-gradient-to-br from-primary-100 to-primary-200 dark:from-primary-900/30 dark:to-primary-800/30 rounded-full flex items-center justify-center mb-6">
                                         <Layers size={40} className="text-primary-500" />
                                     </div>
                                     <h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">
                                         Select a Pipeline
                                     </h2>
-                                    <p className="text-slate-500 max-w-md">
+                                    <p className="text-slate-500 max-w-md mb-6">
                                         Choose a pipeline from the sidebar to view execution history and statistics.
                                     </p>
+                                    <div className="bg-slate-900 dark:bg-slate-950 rounded-lg p-4 max-w-md mx-auto text-left shadow-lg">
+                                        <p className="text-xs text-slate-400 mb-2">Define a pipeline in Python:</p>
+                                        <pre className="text-sm font-mono text-slate-300 overflow-x-auto">
+                                            <code>{`from flowyml import pipeline, step
+
+@pipeline
+def training_pipeline():
+    load_data() >> train_model()`}</code>
+                                        </pre>
+                                    </div>
                                 </div>
                             )}
                         </div>

flowyml/ui/frontend/src/app/projects/[projectId]/_components/ProjectExperimentsList.jsx

@@ -130,13 +130,26 @@ export function ProjectExperimentsList({ projectId }) {
                 </div>
             )}
             emptyState={
-                <div className="text-center py-12">
-                    <div className="inline-flex items-center justify-center w-12 h-12 rounded-full bg-slate-100 dark:bg-slate-800 mb-4">
-                        <FlaskConical className="w-6 h-6 text-slate-400" />
+                <div className="text-center py-12 px-6">
+                    <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-gradient-to-br from-purple-100 to-purple-200 dark:from-purple-900/30 dark:to-purple-800/30 mb-6">
+                        <FlaskConical className="w-8 h-8 text-purple-500" />
                     </div>
-                    <h3 className="text-lg font-medium text-slate-900 dark:text-white mb-1">No experiments found</h3>
-                    <p className="text-slate-500">
-                        Create an experiment to track your model development.
+                    <h3 className="text-xl font-bold text-slate-900 dark:text-white mb-2">No experiments yet</h3>
+                    <p className="text-slate-500 max-w-md mx-auto mb-6">
+                        Experiments help you organize and compare multiple pipeline runs. Create one using the SDK:
+                    </p>
+                    <div className="bg-slate-900 dark:bg-slate-950 rounded-lg p-4 max-w-md mx-auto text-left mb-6 shadow-lg">
+                        <pre className="text-sm font-mono text-slate-300 overflow-x-auto">
+                            <code>{`from flowyml import experiment
+
+with experiment("my-experiment"):
+    pipeline.run(context={
+        "learning_rate": 0.01
+    })`}</code>
+                        </pre>
+                    </div>
+                    <p className="text-xs text-slate-400">
+                        All runs within an experiment block are automatically grouped and tracked together.
                     </p>
                 </div>
             }

flowyml/ui/frontend/src/app/runs/[runId]/page.jsx

@@ -14,6 +14,8 @@ import { ProjectSelector } from '../../../components/ProjectSelector';
 import { CodeSnippet } from '../../../components/ui/CodeSnippet';
 import { TrainingMetricsPanel } from '../../../components/TrainingMetricsPanel';
 import { TrainingHistoryChart } from '../../../components/TrainingHistoryChart';
+import { RunMetaPanel } from '../../../components/RunMetaPanel';
+import { useAIContext } from '../../../hooks/useAIContext';
 
 export function RunDetails() {
     const { runId } = useParams();
@@ -31,6 +33,15 @@ export function RunDetails() {
     const [stepPanelExpanded, setStepPanelExpanded] = useState(false);
     const [hasTrainingHistory, setHasTrainingHistory] = useState(false);
 
+    // Share run context with AI assistant
+    useAIContext({
+        pageType: 'run',
+        resourceId: runId,
+        includeLogs: true,
+        includeCode: true,
+        includeMetrics: true
+    });
+
     const handleStopRun = async () => {
         if (!confirm('Are you sure you want to stop this run?')) return;
 
@@ -231,12 +242,16 @@ export function RunDetails() {
                 />
             </div>
 
+            {/* Environment & Metadata Panel */}
+            <RunMetaPanel run={run} />
+
+            {/* Main Content - Dynamic Split View */}
+
             {/* Main Content - Dynamic Split View */}
-            <div className={`grid gap-6 transition-all duration-300 ${
-                stepPanelExpanded
-                    ? 'grid-cols-1 lg:grid-cols-2'
-                    : 'grid-cols-1 lg:grid-cols-3'
-            }`}>
+            <div className={`grid gap-6 transition-all duration-300 ${stepPanelExpanded
+                ? 'grid-cols-1 lg:grid-cols-2'
+                : 'grid-cols-1 lg:grid-cols-3'
+                }`}>
                 {/* DAG Visualization */}
                 <div className={stepPanelExpanded ? 'lg:col-span-1' : 'lg:col-span-2'}>
                     <h3 className="text-xl font-bold text-slate-900 dark:text-white mb-4 flex items-center gap-2">
@@ -278,7 +293,7 @@ export function RunDetails() {
                                             found = artifacts.find(a =>
                                                 a.type === expectedType &&
                                                 (a.name.toLowerCase().includes(suffix.toLowerCase()) ||
-                                                 suffix.toLowerCase().includes(a.name.toLowerCase().replace(/_/g, '')))
+                                                    suffix.toLowerCase().includes(a.name.toLowerCase().replace(/_/g, '')))
                                             );
                                         }
 
@@ -322,9 +337,8 @@ export function RunDetails() {
                     </div>
 
                     {selectedStepData ? (
-                        <Card className={`overflow-hidden transition-all duration-300 ${
-                            stepPanelExpanded ? 'h-auto' : ''
-                        }`}>
+                        <Card className={`overflow-hidden transition-all duration-300 ${stepPanelExpanded ? 'h-auto' : ''
+                            }`}>
                             {/* Step Header */}
                             <div className="pb-4 border-b border-slate-100 dark:border-slate-700">
                                 <div className="flex items-center justify-between">
@@ -385,9 +399,8 @@ export function RunDetails() {
                             </div>
 
                             {/* Tab Content - Larger when expanded */}
-                            <div className={`mt-4 overflow-y-auto transition-all duration-300 ${
-                                stepPanelExpanded ? 'max-h-[600px]' : 'max-h-[450px]'
-                            }`}>
+                            <div className={`mt-4 overflow-y-auto transition-all duration-300 ${stepPanelExpanded ? 'max-h-[600px]' : 'max-h-[450px]'
+                                }`}>
                                 {activeTab === 'overview' && (
                                     <OverviewTab
                                         stepData={selectedStepData}
@@ -952,8 +965,8 @@ function ArtifactModal({ artifact, onClose }) {
                         <div className="flex gap-1 px-6 py-3 border-b border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800/50">
                             <TabBtn active={activeTab === 'visualization'} onClick={() => setActiveTab('visualization')}>
                                 {isModel ? <><LineChart size={14} /> Visualization</> :
-                                 isDataset ? <><BarChart2 size={14} /> Statistics</> :
-                                 <><Activity size={14} /> Metrics</>}
+                                    isDataset ? <><BarChart2 size={14} /> Statistics</> :
+                                        <><Activity size={14} /> Metrics</>}
                             </TabBtn>
                             {displayableProps.length > 0 && (
                                 <TabBtn active={activeTab === 'properties'} onClick={() => setActiveTab('properties')}>
@@ -1059,8 +1072,8 @@ function ArtifactModal({ artifact, onClose }) {
                                                 </span>
                                                 <span className="text-sm font-mono font-semibold text-slate-900 dark:text-white break-all">
                                                     {typeof value === 'object' ? JSON.stringify(value, null, 2) :
-                                                     typeof value === 'number' ? value.toLocaleString() :
-                                                     String(value)}
+                                                        typeof value === 'number' ? value.toLocaleString() :
+                                                            String(value)}
                                                 </span>
                                             </div>
                                         ))}
@@ -1139,11 +1152,10 @@ function TabBtn({ active, onClick, children }) {
     return (
         <button
             onClick={onClick}
-            className={`flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition-all ${
-                active
-                    ? 'bg-white dark:bg-slate-700 text-slate-900 dark:text-white shadow-sm'
-                    : 'text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 hover:bg-white/50 dark:hover:bg-slate-700/50'
-            }`}
+            className={`flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition-all ${active
+                ? 'bg-white dark:bg-slate-700 text-slate-900 dark:text-white shadow-sm'
+                : 'text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 hover:bg-white/50 dark:hover:bg-slate-700/50'
+                }`}
         >
             {children}
         </button>
@@ -1176,9 +1188,9 @@ function MetricDisplayCard({ name, value, index }) {
 
     // Determine if this is a "good" metric (accuracy, score) or "bad" (loss, error)
     const isLossLike = name.toLowerCase().includes('loss') ||
-                       name.toLowerCase().includes('error') ||
-                       name.toLowerCase().includes('mse') ||
-                       name.toLowerCase().includes('mae');
+        name.toLowerCase().includes('error') ||
+        name.toLowerCase().includes('mse') ||
+        name.toLowerCase().includes('mae');
 
     return (
         <motion.div

flowyml/ui/frontend/src/app/runs/page.jsx

@@ -169,15 +169,21 @@ export function Runs() {
                                 />
                             ) : (
                                 <div className="h-full flex flex-col items-center justify-center text-center p-8 bg-slate-50/50 dark:bg-slate-900/50">
-                                    <div className="w-20 h-20 bg-blue-100 dark:bg-blue-900/30 rounded-full flex items-center justify-center mb-6 animate-pulse">
+                                    <div className="w-20 h-20 bg-gradient-to-br from-blue-100 to-blue-200 dark:from-blue-900/30 dark:to-blue-800/30 rounded-full flex items-center justify-center mb-6">
                                         <PlayCircle size={40} className="text-blue-500" />
                                     </div>
                                     <h2 className="text-2xl font-bold text-slate-900 dark:text-white mb-2">
                                         Select a Run
                                     </h2>
-                                    <p className="text-slate-500 max-w-md">
+                                    <p className="text-slate-500 max-w-md mb-6">
                                         Choose a run from the sidebar to view execution details, logs, and artifacts.
                                     </p>
+                                    <div className="bg-slate-900 dark:bg-slate-950 rounded-lg p-4 max-w-md mx-auto text-left shadow-lg">
+                                        <p className="text-xs text-slate-400 mb-2">Run a pipeline from the CLI:</p>
+                                        <pre className="text-sm font-mono text-slate-300 overflow-x-auto">
+                                            <code>{`flowyml run my_pipeline`}</code>
+                                        </pre>
+                                    </div>
                                 </div>
                             )}
                         </div>