From c0207791b0998ed7dd1c5a74ae63a5a0f8c4ab54 Mon Sep 17 00:00:00 2001
From: ali asaria <aliasaria@users.noreply.github.com>
Date: Thu, 30 Jan 2025 14:12:15 -0500
Subject: [PATCH] add fake generators page
---
.../Experiment/Generate/Generate.tsx | 216 ++++++++++++++++++
src/renderer/components/MainAppPanel.tsx | 5 +
src/renderer/components/Nav/Sidebar.tsx | 11 +
3 files changed, 232 insertions(+)
create mode 100644 src/renderer/components/Experiment/Generate/Generate.tsx
diff --git a/src/renderer/components/Experiment/Generate/Generate.tsx b/src/renderer/components/Experiment/Generate/Generate.tsx
new file mode 100644
index 00000000..5c2c1dd7
--- /dev/null
+++ b/src/renderer/components/Experiment/Generate/Generate.tsx
@@ -0,0 +1,216 @@
+import { useState } from 'react';
+import useSWR from 'swr';
+
+import * as chatAPI from 'renderer/lib/transformerlab-api-sdk';
+
+import Sheet from '@mui/joy/Sheet';
+import {
+ Alert,
+ Button,
+ CircularProgress,
+ Divider,
+ Table,
+ Typography,
+ Box,
+ List,
+ ListItem,
+ ListItemButton,
+ ListItemDecorator,
+ ListItemContent,
+} from '@mui/joy';
+import { ChevronRight, ChevronRightIcon, ClockIcon } from 'lucide-react';
+
+// fetcher used by SWR
+const fetcher = (url) => fetch(url).then((res) => res.json());
+
+export default function Export({ experimentInfo }) {
+ const [runningPlugin, setRunningPlugin] = useState(null);
+ const [exportDetailsJobId, setExportDetailsJobId] = useState(-1);
+ const [selectedPlugin, setSelectedPlugin] = useState(null);
+
+ // call plugins list endpoint and filter based on type="exporter"
+ const {
+ data: plugins,
+ error: pluginsError,
+ isLoading: pluginsIsLoading,
+ } = useSWR(
+ experimentInfo?.id &&
+ chatAPI.Endpoints.Experiment.ListScriptsOfType(
+ experimentInfo?.id,
+ 'exporter'
+ ),
+ fetcher
+ );
+
+ const {
+ data: exportJobs,
+ error: exportJobsError,
+ isLoading: exportJobsIsLoading,
+ mutate: exportJobsMutate,
+ } = useSWR(
+ experimentInfo?.id &&
+ chatAPI.Endpoints.Experiment.GetExportJobs(experimentInfo?.id),
+ fetcher,
+ {
+ refreshInterval: 2000,
+ }
+ );
+
+ // returns true if the currently loaded foundation is in the passed array
+ // supported_architectures - a list of all architectures supported by this plugin
+ function isModelValidArchitecture(supported_architectures) {
+ return (
+ experimentInfo != null &&
+ experimentInfo?.config?.foundation !== '' &&
+ supported_architectures.includes(
+ experimentInfo?.config?.foundation_model_architecture
+ )
+ );
+ }
+
+ // This function is passed to PluginSettingsModal
+ // It allows it to run an exporter plugin on the current experiment's model
+ async function exportRun(
+ plugin_id: string,
+ plugin_architecture: string,
+ params_json: string
+ ) {
+ if (plugin_id) {
+ // sets the running plugin ID, which is used by the UI to set disabled on buttons
+ setRunningPlugin(plugin_id);
+
+ // Call the export job and since this is running async we'll await
+ const response = await fetch(
+ chatAPI.Endpoints.Experiment.RunExport(
+ experimentInfo?.id,
+ plugin_id,
+ plugin_architecture,
+ params_json
+ )
+ );
+
+ // Clean up after export by unsetting running plugin (re-enables buttons)
+ setRunningPlugin(null);
+ }
+ }
+
+ return (
+ <>
+ <Sheet
+ sx={{
+ height: '100%',
+ display: 'flex',
+ flexDirection: 'column',
+ }}
+ >
+ <Typography level="h2" sx={{ mb: 2 }}>
+ Generators
+ </Typography>
+ <Sheet variant="soft" sx={{ p: 1, mb: 2 }}>
+ <List>
+ {[1, 2, 3].map((item) => (
+ <ListItem>
+ <ListItemButton>
+ <ListItemContent>Plugin #{item}</ListItemContent>
+ <ChevronRightIcon />
+ </ListItemButton>
+ </ListItem>
+ ))}
+ </List>{' '}
+ </Sheet>
+ <Typography level="h2" sx={{ mb: 2 }}>
+ Output
+ </Typography>
+ <Sheet
+ sx={{
+ display: 'flex',
+ flexDirection: 'row',
+ overflowY: 'hidden',
+ overflowX: 'hidden',
+ mb: '2rem',
+ height: '100%',
+ gap: 2,
+ }}
+ >
+ <Box sx={{ flex: 1 }}>
+ <List>
+ {[1, 2, 3, 4, 5, 6].map((item) => (
+ <ListItem>
+ <ListItemButton>
+ <ListItemContent>
+ Synthesize - Doc Generator - Jan 30: 5pm
+ </ListItemContent>
+ <ChevronRightIcon />
+ </ListItemButton>
+ </ListItem>
+ ))}
+ </List>
+ </Box>
+ <Box sx={{ flex: 2 }}>
+ <Sheet
+ color="warning"
+ variant="soft"
+ sx={{
+ px: 1,
+ mt: 1,
+ mb: 2,
+ flex: 1,
+ overflow: 'auto',
+ height: '100%',
+ }}
+ >
+ <Table>
+ <thead>
+ <tr>
+ <th style={{ width: '170px' }}>Time</th>
+ <th>Type</th>
+ <th style={{ width: '35%' }}>Output</th>
+ <th style={{ width: '120px' }}>Status</th>
+ <th style={{ width: '90px' }}></th>
+ </tr>
+ </thead>
+ <tbody style={{ overflow: 'auto', height: '100%' }}>
+ {exportJobs?.map((job) => {
+ return (
+ <tr key={job.id}>
+ <td>{job.created_at}</td>
+ <td>{job.job_data.exporter_name}</td>
+ <td>{job.job_data.output_model_name}</td>
+ <td>{job.status}</td>
+ <td
+ style={{
+ display: 'flex',
+ gap: 2,
+ flexWrap: 'wrap',
+ alignItems: 'center',
+ justifyContent: 'flex-end',
+ }}
+ >
+ {' '}
+ <Button
+ size="sm"
+ disabled={
+ !(
+ job.status === 'COMPLETE' ||
+ job.status === 'FAILED'
+ )
+ }
+ onClick={() => {
+ setExportDetailsJobId(job.id);
+ }}
+ >
+ Details
+ </Button>
+ </td>
+ </tr>
+ );
+ })}
+ </tbody>
+ </Table>
+ </Sheet>
+ </Box>
+ </Sheet>
+ </Sheet>
+ </>
+ );
+}
diff --git a/src/renderer/components/MainAppPanel.tsx b/src/renderer/components/MainAppPanel.tsx
index e76b8597..a27d2c90 100644
--- a/src/renderer/components/MainAppPanel.tsx
+++ b/src/renderer/components/MainAppPanel.tsx
@@ -28,6 +28,7 @@ import TransformerLabSettings from './TransformerLabSettings';
import Logs from './Logs';
import FoundationHome from './Experiment/Foundation';
import { useState } from 'react';
+import Generate from './Experiment/Generate/Generate';
// This component renders the main content of the app that is shown
// On the rightmost side, regardless of what menu items are selected
@@ -220,6 +221,10 @@ export default function MainAppPanel({
path="/projects/export"
element={<Export experimentInfo={experimentInfo} />}
/>
+ <Route
+ path="/projects/generate"
+ element={<Generate experimentInfo={experimentInfo} />}
+ />
<Route
path="/projects/plugins"
element={<Plugins experimentInfo={experimentInfo} />}
diff --git a/src/renderer/components/Nav/Sidebar.tsx b/src/renderer/components/Nav/Sidebar.tsx
index 7d9c99f4..895e492e 100644
--- a/src/renderer/components/Nav/Sidebar.tsx
+++ b/src/renderer/components/Nav/Sidebar.tsx
@@ -23,6 +23,7 @@ import {
TextIcon,
RectangleEllipsisIcon,
LogsIcon,
+ SquareStackIcon,
} from 'lucide-react';
import { ButtonGroup, IconButton, Sheet, Tooltip } from '@mui/joy';
@@ -164,6 +165,16 @@ export default function Sidebar({
!experimentInfo?.name || !experimentInfo?.config?.foundation
}
/>
+ {experimentInfo?.name == 'dev' && (
+ <SubNavItem
+ title="Generate"
+ path="/projects/generate"
+ icon={<SquareStackIcon />}
+ disabled={
+ !experimentInfo?.name || !experimentInfo?.config?.foundation
+ }
+ />
+ )}
<SubNavItem
title="Evaluate"
path="/projects/eval"
--
GitLab