Merge branch 'main' into fix/recipe-modal-popup

Author: deep1401

.github/workflows/prettier.yml

@@ -0,0 +1,27 @@
+name: Prettier Check
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  prettier-check:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "22"
+          cache: "npm"
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Check Prettier formatting
+        run: npm run format:check

package.json

@@ -42,7 +42,9 @@
     "start:preload-cloud": "cross-env NODE_ENV=development TS_NODE_TRANSPILE_ONLY=true webpack --config ./.erb/configs/webpack.config.preload-cloud.dev.ts",
     "start:renderer": "cross-env NODE_ENV=development TS_NODE_TRANSPILE_ONLY=true webpack serve --config ./.erb/configs/webpack.config.renderer.dev.ts",
     "start:cloud": "cross-env NODE_ENV=development TS_NODE_TRANSPILE_ONLY=true webpack serve --config ./.erb/configs/webpack.config.cloud.dev.ts",
-    "test": "jest"
+    "test": "jest",
+    "format:check": "prettier --check \"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\"",
+    "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\""
   },
   "browserslist": [],
   "prettier": {
@@ -308,4 +310,4 @@
     ],
     "logLevel": "quiet"
   }
-}
+}

src/renderer/App.tsx

@@ -27,6 +27,7 @@ import {
 } from './lib/ExperimentInfoContext';
 import * as chatAPI from './lib/transformerlab-api-sdk';
 import RootAuthCallbackHandler from './components/User/RootAuthCallbackHandler';
+import SidebarForGPUOrchestration from './components/Nav/SidebarForGPUOrchestration';
 
 type AppContentProps = {
   connection: string;
@@ -37,6 +38,8 @@ type AppContentProps = {
   themeSetter: (name: string) => void;
   setSSHConnection: (conn: any) => void;
   setConnection: (conn: string) => void;
+  gpuOrchestrationServer: string;
+  setGPUOrchestrationServer: (server: string) => void;
 };
 
 function AppContent({
@@ -48,6 +51,8 @@ function AppContent({
   themeSetter,
   setSSHConnection,
   setConnection,
+  gpuOrchestrationServer,
+  setGPUOrchestrationServer,
 }: AppContentProps) {
   const onOutputDrawerDrag = useCallback(
     (pos: { y: number }) => {
@@ -80,12 +85,24 @@ function AppContent({
         `,
       })}
     >
-      <Header connection={connection} setConnection={setConnection} />
-      <Sidebar
-        logsDrawerOpen={logsDrawerOpen}
-        setLogsDrawerOpen={setLogsDrawerOpen as any}
-        themeSetter={themeSetter}
+      <Header
+        connection={connection}
+        setConnection={setConnection}
+        gpuOrchestrationServer={gpuOrchestrationServer}
       />
+      {gpuOrchestrationServer !== '' ? (
+        <SidebarForGPUOrchestration
+          logsDrawerOpen={logsDrawerOpen}
+          setLogsDrawerOpen={setLogsDrawerOpen as any}
+          themeSetter={themeSetter}
+        />
+      ) : (
+        <Sidebar
+          logsDrawerOpen={logsDrawerOpen}
+          setLogsDrawerOpen={setLogsDrawerOpen as any}
+          themeSetter={themeSetter}
+        />
+      )}
       <Box
         sx={{
           px: {
@@ -103,7 +120,10 @@ function AppContent({
         }}
         id="main-app-panel"
       >
-        <MainAppPanel setLogsDrawerOpen={setLogsDrawerOpen as any} />
+        <MainAppPanel
+          setLogsDrawerOpen={setLogsDrawerOpen as any}
+          gpuOrchestrationServer={gpuOrchestrationServer}
+        />
       </Box>
       <Box
         sx={{
@@ -166,6 +186,7 @@ function AppContent({
         connection={connection}
         setTerminalDrawerOpen={setLogsDrawerOpen}
         setSSHConnection={setSSHConnection}
+        setGPUOrchestrationServer={setGPUOrchestrationServer}
       />
     </Box>
   );
@@ -175,6 +196,7 @@ const INITIAL_LOGS_DRAWER_HEIGHT = 200; // Default height for logs drawer when f
 
 export default function App() {
   const [connection, setConnection] = useState('');
+  const [gpuOrchestrationServer, setGPUOrchestrationServer] = useState('');
   const [logsDrawerOpen, setLogsDrawerOpen] = useState(false);
   const [logsDrawerHeight, setLogsDrawerHeight] = useState(0);
   const [theme, setTheme] = useState(customTheme);
@@ -210,6 +232,8 @@ export default function App() {
             themeSetter={themeSetter}
             setSSHConnection={() => {}}
             setConnection={setConnection}
+            gpuOrchestrationServer={gpuOrchestrationServer}
+            setGPUOrchestrationServer={setGPUOrchestrationServer}
           />
         </ExperimentInfoProvider>
       </CssVarsProvider>

src/renderer/components/Computer.tsx

@@ -65,8 +65,6 @@ function StatRow({ title, value }) {
   );
 }
 
-const fetcher = (url) => fetch(url).then((res) => res.json());
-
 export default function Computer() {
   const [searchText, setSearchText] = useState('');
 

src/renderer/components/Connect/LoginModal.tsx

@@ -37,6 +37,7 @@ export default function LoginModal({
   connection,
   setTerminalDrawerOpen,
   setSSHConnection,
+  setGPUOrchestrationServer,
 }) {
   const [checking, setChecking] = React.useState<boolean>(false);
   const [failed, setFailed] = React.useState<boolean>(false);
@@ -95,6 +96,9 @@ export default function LoginModal({
         (window as any).TransformerLab = (window as any).TransformerLab || {};
         (window as any).TransformerLab.UserInitiatedConnect = true;
       } catch {}
+      if (response?.gpu_orchestration_server) {
+        setGPUOrchestrationServer(response.gpu_orchestration_server);
+      }
       setServer(window.TransformerLab.API_URL);
     } else {
       setFailed(true);

src/renderer/components/Data/Data.tsx

@@ -7,7 +7,7 @@ import DataStore from './DataStore';
 import LocalDatasets from './LocalDatasets';
 import GeneratedDatasets from './GeneratedDatasets';
 
-export default function Data() {
+export default function Data({ gpuOrchestrationServer = '' }) {
   return (
     <Sheet sx={{ display: 'flex', height: '100%' }}>
       <Tabs
@@ -24,10 +24,12 @@ export default function Data() {
         <TabList>
           <Tab>Local Datasets</Tab>
           <Tab>Generated Datasets</Tab>
-          <Tab>
-            <StoreIcon color="grey" />
-            &nbsp; Dataset Store
-          </Tab>
+          {gpuOrchestrationServer === '' && (
+            <Tab>
+              <StoreIcon color="grey" />
+              &nbsp; Dataset Store
+            </Tab>
+          )}
         </TabList>
         <TabPanel value={0} sx={{ overflow: 'hidden' }}>
           <LocalDatasets />

src/renderer/components/Data/DataStore.tsx

@@ -16,7 +16,7 @@ import { filterByFilters } from 'renderer/lib/utils';
 
 import * as chatAPI from '../../lib/transformerlab-api-sdk';
 
-const fetcher = (url) => fetch(url).then((res) => res.json());
+import { fetcher } from '../../lib/transformerlab-api-sdk';
 
 export default function DataStore() {
   const [searchText, setSearchText] = useState('');

src/renderer/components/Data/DatasetCard.tsx

@@ -131,7 +131,9 @@ export default function DatasetCard({
                     if (
                       confirm('Are you sure you want to delete this dataset?')
                     ) {
-                      await fetch(chatAPI.Endpoints.Dataset.Delete(name));
+                      await chatAPI.authenticatedFetch(
+                        chatAPI.Endpoints.Dataset.Delete(name),
+                      );
                       parentMutate();
                     }
                   }}
@@ -201,7 +203,8 @@ export default function DatasetCard({
               }
               onClick={() => {
                 setInstalling(true);
-                fetch(chatAPI.Endpoints.Dataset.Download(repo))
+                chatAPI
+                  .authenticatedFetch(chatAPI.Endpoints.Dataset.Download(repo))
                   .then((response) => {
                     if (!response.ok) {
                       console.log(response);

src/renderer/components/Data/DatasetInfoModal.tsx

@@ -19,7 +19,7 @@ import {
 
 import * as chatAPI from '../../lib/transformerlab-api-sdk';
 
-const fetcher = (url) => fetch(url).then((res) => res.json());
+import { fetcher } from '../../lib/transformerlab-api-sdk';
 
 export default function DatasetInfoModal({ dataset_id, open, setOpen }) {
   const { data, error, isLoading, mutate } = useSWR(

src/renderer/components/Data/DatasetTable.tsx

@@ -18,11 +18,7 @@ import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';
 import useSWR from 'swr';
 import * as chatAPI from '../../lib/transformerlab-api-sdk';
 import AudioPlayer from './AudioPlayer';
-
-const fetcher = (url: string) =>
-  fetch(url)
-    .then((res) => res.json())
-    .then((data) => data);
+import { fetcher } from '../../lib/transformerlab-api-sdk';
 
 const DatasetTable = ({ datasetId }: { datasetId: string }) => {
   const [pageNumber, setPageNumber] = useState(1);