Skip to content
Snippets Groups Projects
Commit ee3e3bbb authored by abhimazu's avatar abhimazu
Browse files

Moved model provenance from model zoo to Foundation

parent 07fb838e
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/renderer/components/Experiment/Foundation/CurrentFoundationInfo.tsx
+ 37
− 0
View file @ ee3e3bbb
...@@ -64,6 +64,17 @@ export default function CurrentFoundationInfo({ ...@@ -64,6 +64,17 @@ export default function CurrentFoundationInfo({
const [huggingfaceData, setHugggingfaceData] = useState({}); const [huggingfaceData, setHugggingfaceData] = useState({});
const huggingfaceId = experimentInfo?.config?.foundation; const huggingfaceId = experimentInfo?.config?.foundation;
// Sample provenance data – replace with your actual data source.
const provenanceData = [
{ jobId: 3, jobType: 'Train', metadata: { dataset: 'win-wang/Machine_Learning_QA_Collection' }, date: '2024-08-01' },
{ jobId: 8, jobType: 'Evaluation', metadata: { accuracy: 95.5 }, date: '2024-08-02' },
{ jobId: 10, jobType: 'Evaluation', metadata: { accuracy: 95.5}, date: '2024-08-03' },
{ jobId: 11, jobType: 'Train', metadata: { dataset: 'win-wang/Machine_Learning_QA_Collection' }, date: '2024-08-04' },
{ jobId: 15, jobType: 'Evaluation', metadata: { accuracy: 95.5 }, date: '2024-08-05' },
{ jobId: 19, jobType: 'Train', metadata: { dataset: 'win-wang/Machine_Learning_QA_Collection' }, date: '2024-08-06' },
];
useMemo(() => { useMemo(() => {
// This is a local model // This is a local model
if (experimentInfo?.config?.foundation_filename) { if (experimentInfo?.config?.foundation_filename) {
...@@ -114,6 +125,32 @@ export default function CurrentFoundationInfo({ ...@@ -114,6 +125,32 @@ export default function CurrentFoundationInfo({
)} )}
</tbody> </tbody>
</Table> </Table>
{/* Model Provenance Table */}
<Box mt={4}>
<Typography level="h6" mb={1}>
Model Provenance
</Typography>
<Table id="model-provenance-table">
<thead>
<tr>
<th style={{ width: '10%' }}>Job ID</th>
<th style={{ width: '15%' }}>Job Type</th>
<th style={{ width: '55%' }}>Metadata</th>
<th style={{ width: '20%' }}>Date</th>
</tr>
</thead>
<tbody>
{provenanceData.map((row) => (
<tr key={row.jobId}>
<td style={{ width: '10%' }}>{row.jobId}</td>
<td style={{ width: '15%' }}>{row.jobType}</td>
<td style={{ width: '55%' }}>{JSON.stringify(row.metadata)}</td>
<td style={{ width: '20%' }}>{row.date}</td>
</tr>
))}
</tbody>
</Table>
</Box>
</Box> </Box>
<Box flex={1}> <Box flex={1}>
<Typography level="title-lg" marginTop={1} marginBottom={1}> <Typography level="title-lg" marginTop={1} marginBottom={1}>
......
src/renderer/components/MainAppPanel.tsx
+ 0
− 4
View file @ ee3e3bbb
...@@ -289,10 +289,6 @@ export default function MainAppPanel({ ...@@ -289,10 +289,6 @@ export default function MainAppPanel({
path="/zoo/store" path="/zoo/store"
element={<ModelZoo experimentInfo={experimentInfo} tab="store" />} element={<ModelZoo experimentInfo={experimentInfo} tab="store" />}
/> />
<Route
path="/zoo/journey"
element={<ModelZoo experimentInfo={experimentInfo} tab="journey" />}
/>
<Route path="/data" element={<Data />} /> <Route path="/data" element={<Data />} />
<Route <Route
path="/model-home" path="/model-home"
......
src/renderer/components/ModelZoo/ModelJourney.tsx deleted 100644 → 0
+ 0
− 252
View file @ 07fb838e
import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import Box from '@mui/joy/Box';
import Typography from '@mui/joy/Typography';
import Tooltip from '@mui/joy/Tooltip';
// Sample JSON data representing the model journey
const sampleData = {
models: [
{
type: 'base_model',
id: 'meta/llama3.1-8B-instruct',
name: 'meta/llama3.1-8B-instruct',
children: [
{
type: 'fine_tuning_job',
jobId: 1,
metadata: { dataset: 'Dataset A' },
child: {
type: 'fine_tuned_model',
modelId: 'ft_model_1',
name: 'Fine Tuned Model 1',
children: [
{
type: 'eval_job',
jobId: 2,
metadata: { metric: 'accuracy', value: 95.5 }
},
{
type: 'eval_job',
jobId: 3,
metadata: { metric: 'accuracy', value: 96.7 }
},
{
type: 'fine_tuning_job',
jobId: 6,
metadata: { dataset: 'Dataset B' },
child: {
type: 'fine_tuned_model',
modelId: 'ft_model_3',
name: 'Fine Tuned Model 3',
children: []
}
}
]
}
},
{
type: 'fine_tuning_job',
jobId: 4,
metadata: { dataset: 'Dataset C' },
child: {
type: 'fine_tuned_model',
modelId: 'ft_model_2',
name: 'Fine Tuned Model 2',
children: [
{
type: 'eval_job',
jobId: 5,
metadata: { metric: 'accuracy', value: 97.0 }
}
]
}
}
]
}
]
};
// Determine styles based on the node type.
const getNodeStyle = (node) => {
switch (node.type) {
case 'base_model':
return { backgroundColor: 'primary.light', color: 'primary.contrastText', border: '1px solid', borderColor: 'divider' };
case 'fine_tuned_model':
return { backgroundColor: 'info.light', color: 'info.contrastText', border: '1px solid', borderColor: 'divider' };
case 'fine_tuning_job':
return { backgroundColor: 'success.light', color: 'success.contrastText', border: '1px solid', borderColor: 'divider' };
case 'eval_job':
return { backgroundColor: 'warning.light', color: 'warning.contrastText', border: '1px solid', borderColor: 'divider' };
default:
return {};
}
};
// Return a label based on node type.
const getNodeLabel = (node) => {
switch (node.type) {
case 'base_model':
return node.name;
case 'fine_tuned_model':
return node.name;
case 'fine_tuning_job':
return `Fine Tuning Job (ID: ${node.jobId})`;
case 'eval_job':
return `Evaluation (ID: ${node.jobId})`;
default:
return 'Node';
}
};
// Prepare tooltip content from metadata (if available)
const getTooltipContent = (node) => {
if (node.metadata) {
return Object.entries(node.metadata)
.map(([key, value]) => `${key}: ${value}`)
.join(', ');
}
return node.name || '';
};
// Recursive component that renders a job or model node.
const JourneyNode = ({ node }) => {
const navigate = useNavigate();
// Click handling: navigate based on the type.
const handleClick = (e) => {
e.stopPropagation();
if (node.type === 'fine_tuning_job' || node.type === 'eval_job') {
navigate(`/job/${node.jobId}`);
} else if (node.type === 'base_model' || node.type === 'fine_tuned_model') {
// For models, use either node.id or node.modelId
navigate(`/model/${node.id || node.modelId}`);
}
};
return (
<Box sx={{ ml: 4, mt: 2, position: 'relative' }}>
<Tooltip title={getTooltipContent(node)} arrow placement="right">
<Box
onClick={handleClick}
sx={{
display: 'inline-block',
px: 1,
py: 0.5,
borderRadius: '8px',
...getNodeStyle(node),
position: 'relative',
zIndex: 1,
cursor: 'pointer'
}}
>
<Typography level="body2">{getNodeLabel(node)}</Typography>
</Box>
</Tooltip>
{/* For a fine tuning job, render its single child (the resulting model) */}
{node.type === 'fine_tuning_job' && node.child && (
<Box sx={{ display: 'flex', mt: 2 }}>
<Box sx={{ width: 20, position: 'relative' }}>
<Box sx={{ position: 'absolute', left: '50%', top: 0, bottom: 0, borderLeft: '2px solid #ccc' }} />
</Box>
<Box sx={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
<Box sx={{ display: 'flex', alignItems: 'center', position: 'relative' }}>
<Box sx={{ width: 20, position: 'relative' }}>
<Box sx={{ position: 'absolute', left: '50%', top: '50%', width: 20, borderTop: '2px solid #ccc' }} />
</Box>
<JourneyNode node={node.child} />
</Box>
</Box>
</Box>
)}
{/* For model nodes (base_model or fine_tuned_model) with a children array */}
{(node.type === 'base_model' || node.type === 'fine_tuned_model') &&
node.children &&
node.children.length > 0 && (
<Box sx={{ display: 'flex', mt: 2 }}>
<Box sx={{ width: 20, position: 'relative' }}>
<Box sx={{ position: 'absolute', left: '50%', top: 0, bottom: 0, borderLeft: '2px solid #ccc' }} />
</Box>
<Box sx={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
{node.children.map((child) => (
<Box key={child.jobId || child.modelId} sx={{ display: 'flex', alignItems: 'center', position: 'relative' }}>
<Box sx={{ width: 20, position: 'relative' }}>
<Box sx={{ position: 'absolute', left: '50%', top: '50%', width: 20, borderTop: '2px solid #ccc' }} />
</Box>
<JourneyNode node={child} />
</Box>
))}
</Box>
</Box>
)}
</Box>
);
};
// The base model container is minimized by default and expands when clicked.
const BaseModelBox = ({ model }) => {
const [expanded, setExpanded] = useState(false);
// Toggle expansion on header click.
const handleHeaderClick = (e) => {
e.stopPropagation();
setExpanded(!expanded);
};
return (
<Box
sx={{
border: '1px solid',
borderColor: 'divider',
borderRadius: 2,
p: 2,
mb: 4,
position: 'relative',
cursor: 'pointer'
}}
onClick={handleHeaderClick}
>
{/* Base model header (always visible) */}
<Tooltip title={`Base Model: ${model.name}`} arrow placement="top">
<Box
sx={{
position: 'absolute',
top: 8,
left: 8,
borderRadius: '8px',
px: 1,
py: 0.5,
backgroundColor: 'primary.light',
border: '1px solid',
borderColor: 'divider'
}}
>
<Typography level="body2">{model.name}</Typography>
</Box>
</Tooltip>
{/* Expanded content shows the journey (child nodes) */}
{expanded && (
<Box sx={{ mt: 4 }}>
{model.children &&
model.children.map((child) => (
<JourneyNode key={child.jobId || child.modelId} node={child} />
))}
</Box>
)}
</Box>
);
};
const ModelJourney = () => {
return (
<Box sx={{ p: 2 }}>
{sampleData.models.map((model) => (
<BaseModelBox key={model.id} model={model} />
))}
</Box>
);
};
export default ModelJourney;
src/renderer/components/ModelZoo/ModelZoo.tsx
+ 0
− 8
View file @ ee3e3bbb
...@@ -5,7 +5,6 @@ import { StoreIcon } from 'lucide-react'; ...@@ -5,7 +5,6 @@ import { StoreIcon } from 'lucide-react';
import { Tab, TabList, TabPanel, Tabs } from '@mui/joy'; import { Tab, TabList, TabPanel, Tabs } from '@mui/joy';
import ModelStore from './ModelStore'; import ModelStore from './ModelStore';
import LocalModels from './LocalModels'; import LocalModels from './LocalModels';
import ModelJourney from './ModelJourney';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
export default function ModelZoo({ experimentInfo, tab = 'store' }) { export default function ModelZoo({ experimentInfo, tab = 'store' }) {
...@@ -42,7 +41,6 @@ export default function ModelZoo({ experimentInfo, tab = 'store' }) { ...@@ -42,7 +41,6 @@ export default function ModelZoo({ experimentInfo, tab = 'store' }) {
<StoreIcon color="grey" /> <StoreIcon color="grey" />
&nbsp; Model Store &nbsp; Model Store
</Tab> </Tab>
<Tab value="journey">Model Journey</Tab>
</TabList> </TabList>
<TabPanel <TabPanel
value="local" value="local"
...@@ -65,12 +63,6 @@ export default function ModelZoo({ experimentInfo, tab = 'store' }) { ...@@ -65,12 +63,6 @@ export default function ModelZoo({ experimentInfo, tab = 'store' }) {
sx={{ p: 0, py: 1, height: '100%', overflow: 'hidden' }} sx={{ p: 0, py: 1, height: '100%', overflow: 'hidden' }}
> >
<ModelStore /> <ModelStore />
</TabPanel>
<TabPanel
value="journey"
sx={{ p: 0, py: 1, height: '100%', overflow: 'hidden' }}
>
<ModelJourney />
</TabPanel> </TabPanel>
</Tabs> </Tabs>
</Sheet> </Sheet>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

:feet::heart: Strive to be the person your dogs believe you are :heart::feet: