Update the error message and automatically download a dataset when a part of a recipe is not found

README.md

@@ -2,10 +2,10 @@
 <br />
 <div align="center">
   <a href="/~https://github.com/transformerlab/transformerlab-app">
-    <img src="https://transformerlab.ai/img/flask.svg" alt="Logo" width="80" height="80">
+    <img src="https://transformerlab.ai/img/logo2.svg" alt="Logo" width="80" height="80">
   </a>
 
-  <h1 align="center" style="color: rgb(68, 73, 80); letter-spacing: -1px">Transformer Lab</h1>
+  <h1 align="center" style="color: rgb(16, 16, 18); letter-spacing: -1px">Transformer Lab</h1>
 
   <p align="center">
     Download, interact, and finetune models locally.

src/main/main.ts

@@ -200,18 +200,40 @@ const startListeningToServerLog = async () => {
   });
 };
 
-ipcMain.handle('dark-mode:toggle', () => {
-  if (nativeTheme.shouldUseDarkColors) {
-    nativeTheme.themeSource = 'light';
-  } else {
-    nativeTheme.themeSource = 'dark';
-  }
-  return nativeTheme.shouldUseDarkColors;
+/***********************
+ * DARK MODE stuff
+ ***********************/
+// Listn to nativeTheme update change from the OS:
+nativeTheme.on('updated', () => {
+  console.log('nativeTheme updated', nativeTheme.shouldUseDarkColors);
+  mainWindow?.webContents.send(
+    'dark-mode:updated',
+    nativeTheme.shouldUseDarkColors
+  );
 });
 
+// ipcMain.handle('dark-mode:toggle', () => {
+//   console.log('dark-mode:toggle');
+//   console.log(nativeTheme);
+//   if (nativeTheme.shouldUseDarkColors) {
+//     nativeTheme.themeSource = 'light';
+//   } else {
+//     nativeTheme.themeSource = 'dark';
+//   }
+//   return nativeTheme.shouldUseDarkColors;
+// });
+
+// ipcMain.handle('dark-mode:set', (_event, shouldUseDarkColors) => {
+//   console.log('dark-mode:set', shouldUseDarkColors);
+//   nativeTheme.themeSource = shouldUseDarkColors ? 'dark' : 'light';
+// });
+
 ipcMain.handle('dark-mode:system', () => {
   nativeTheme.themeSource = 'system';
 });
+/***********************
+ * DARK MODE stuff END
+ ***********************/
 
 startListeningToServerLog();
 

src/main/preload.ts

@@ -103,4 +103,7 @@ contextBridge.exposeInMainWorld('autoUpdater', {
 contextBridge.exposeInMainWorld('darkMode', {
   toggle: () => ipcRenderer.invoke('dark-mode:toggle'),
   system: () => ipcRenderer.invoke('dark-mode:system'),
+  setMode: (value) => ipcRenderer.invoke('dark-mode:set', value),
+  onUpdate: (callback) =>
+    ipcRenderer.on('dark-mode:updated', (_event, value) => callback(value)),
 });

src/renderer/App.tsx

@@ -15,6 +15,15 @@ import * as chatAPI from 'renderer/lib/transformerlab-api-sdk';
 
 import useSWR from 'swr';
 import XtermJSDrawer from './components/Connect/XtermJS';
+import OutputTerminal from './components/OutputTerminal';
+import {
+  ChevronDown,
+  ChevronDownIcon,
+  ChevronUpIcon,
+  Icon,
+} from 'lucide-react';
+import { IconButton } from '@mui/joy';
+import { log } from 'node:console';
 // import OutputTerminal from './components/OutputTerminal';
 // import AutoUpdateModal from './components/AutoUpdateModal';
 
@@ -27,7 +36,7 @@ export default function App() {
 
   const [sshConnection, setSSHConnection] = useState(null);
 
-  const [drawerOpen, setDrawerOpen] = useState(false);
+  const [logsDrawerOpen, setLogsDrawerOpen] = useState(false);
 
   useEffect(() => {
     async function getSavedExperimentId() {
@@ -84,13 +93,12 @@ export default function App() {
           width: '100dvw',
           overflow: 'hidden',
           gridTemplateColumns: '220px 1fr',
-          gridTemplateRows: '60px 5fr 0fr',
+          gridTemplateRows: logsDrawerOpen ? '60px 5fr 308px' : '60px 5fr 18px',
           gridTemplateAreas: `
               "sidebar header"
               "sidebar main"
               "sidebar footer"
               `,
-
           // backgroundColor: (theme) => theme.vars.palette.background.surface,
         })}
       >
@@ -105,7 +113,8 @@ export default function App() {
         <Sidebar
           experimentInfo={experimentInfo}
           setExperimentId={setExperimentId}
-          setDrawerOpen={setDrawerOpen}
+          logsDrawerOpen={logsDrawerOpen}
+          setLogsDrawerOpen={setLogsDrawerOpen}
         />
         <Box
           sx={{
@@ -130,19 +139,48 @@ export default function App() {
             experimentInfoMutate={experimentInfoMutate}
           />
         </Box>
-        {/* <OutputTerminal /> */}
+        <Box
+          sx={{
+            gridArea: 'footer',
+            display: 'flex',
+            flexDirection: 'column',
+            height: logsDrawerOpen ? '100%' : '18px',
+            width: '100%',
+            overflow: 'hidden',
+            alignItems: 'flex-end',
+            backgroundColor: 'var(--joy-palette-background-level3)',
+          }}
+        >
+          <IconButton
+            sx={{ padding: 0, margin: 0, minHeight: 0 }}
+            onClick={() => setLogsDrawerOpen(!logsDrawerOpen)}
+          >
+            {logsDrawerOpen ? (
+              <ChevronDownIcon size="18px" />
+            ) : (
+              <ChevronUpIcon size="18px" />
+            )}
+          </IconButton>
+          <Box
+            sx={{
+              height: logsDrawerOpen ? '100%' : '0px',
+              overflow: 'hidden',
+              border: logsDrawerOpen ? '10px solid #444' : '0',
+              padding: logsDrawerOpen ? '6px' : '0',
+              backgroundColor: '#000',
+              width: '100%',
+            }}
+          >
+            <OutputTerminal initialMessage="** Running a Model will Display Output Here **" />
+          </Box>
+        </Box>
         <LoginModal
           setServer={setConnection}
           connection={connection}
-          setTerminalDrawerOpen={setDrawerOpen}
+          setTerminalDrawerOpen={setLogsDrawerOpen}
           setSSHConnection={setSSHConnection}
         />
       </Box>
-      <XtermJSDrawer
-        sshConnection={sshConnection}
-        drawerOpen={drawerOpen}
-        setDrawerOpen={setDrawerOpen}
-      />
     </CssVarsProvider>
   );
 }