Added a way to secure the UI. Plus various bug fixes and quality of life updates

ui/src/hooks/useDatasetList.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useEffect, useState } from 'react';
+import { apiClient } from '@/utils/api';
 
 export default function useDatasetList() {
   const [datasets, setDatasets] = useState<string[]>([]);
@@ -8,8 +9,9 @@ export default function useDatasetList() {
 
   const refreshDatasets = () => {
     setStatus('loading');
-    fetch('/api/datasets/list')
-      .then(res => res.json())
+    apiClient
+      .get('/api/datasets/list')
+      .then(res => res.data)
       .then(data => {
         console.log('Datasets:', data);
         // sort

ui/src/hooks/useFilesList.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useEffect, useState, useRef } from 'react';
+import { apiClient } from '@/utils/api';
 
 interface FileObject {
   path: string;
@@ -18,8 +19,9 @@ export default function useFilesList(jobID: string, reloadInterval: null | numbe
       loadStatus = 'refreshing';
     }
     setStatus(loadStatus);
-    fetch(`/api/jobs/${jobID}/files`)
-      .then(res => res.json())
+    apiClient
+      .get(`/api/jobs/${jobID}/files`)
+      .then(res => res.data)
       .then(data => {
         console.log('Fetched files:', data);
         if (data.files) {

ui/src/hooks/useGPUInfo.tsx

@@ -2,6 +2,7 @@
 
 import { GPUApiResponse, GpuInfo } from '@/types';
 import { useEffect, useState } from 'react';
+import { apiClient } from '@/utils/api';
 
 export default function useGPUInfo(gpuIds: null | number[] = null, reloadInterval: null | number = null) {
   const [gpuList, setGpuList] = useState<GpuInfo[]>([]);
@@ -11,18 +12,11 @@ export default function useGPUInfo(gpuIds: null | number[] = null, reloadInterva
   const fetchGpuInfo = async () => {
     setStatus('loading');
     try {
-      const response = await fetch('/api/gpu');
-
-      if (!response.ok) {
-        throw new Error(`HTTP error! Status: ${response.status}`);
-      }
-
-      const data: GPUApiResponse = await response.json();
+      const data: GPUApiResponse = await apiClient.get('/api/gpu').then(res => res.data);
       let gpus = data.gpus.sort((a, b) => a.index - b.index);
       if (gpuIds) {
         gpus = gpus.filter(gpu => gpuIds.includes(gpu.index));
       }
-
       setGpuList(gpus);
       setStatus('success');
     } catch (err) {
@@ -51,4 +45,4 @@ export default function useGPUInfo(gpuIds: null | number[] = null, reloadInterva
   }, [gpuIds, reloadInterval]); // Added dependencies
 
   return { gpuList, setGpuList, isGPUInfoLoaded, status, refreshGpuInfo: fetchGpuInfo };
-}
+}

ui/src/hooks/useJob.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect, useState } from 'react';
 import { Job } from '@prisma/client';
+import { apiClient } from '@/utils/api';
 
 export default function useJob(jobID: string, reloadInterval: null | number = null) {
   const [job, setJob] = useState<Job | null>(null);
@@ -9,8 +10,9 @@ export default function useJob(jobID: string, reloadInterval: null | number = nu
 
   const refreshJob = () => {
     setStatus('loading');
-    fetch(`/api/jobs?id=${jobID}`)
-      .then(res => res.json())
+    apiClient
+      .get(`/api/jobs?id=${jobID}`)
+      .then(res => res.data)
       .then(data => {
         console.log('Job:', data);
         setJob(data);
@@ -32,7 +34,7 @@ export default function useJob(jobID: string, reloadInterval: null | number = nu
 
       return () => {
         clearInterval(interval);
-      }
+      };
     }
   }, [jobID]);
 

ui/src/hooks/useJobsList.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect, useState } from 'react';
 import { Job } from '@prisma/client';
+import { apiClient } from '@/utils/api';
 
 export default function useJobsList(onlyActive = false) {
   const [jobs, setJobs] = useState<Job[]>([]);
@@ -9,8 +10,9 @@ export default function useJobsList(onlyActive = false) {
 
   const refreshJobs = () => {
     setStatus('loading');
-    fetch('/api/jobs')
-      .then(res => res.json())
+    apiClient
+      .get('/api/jobs')
+      .then(res => res.data)
       .then(data => {
         console.log('Jobs:', data);
         if (data.error) {

ui/src/hooks/useSampleImages.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useEffect, useState } from 'react';
+import { apiClient } from '@/utils/api';
 
 export default function useSampleImages(jobID: string, reloadInterval: null | number = null) {
   const [sampleImages, setSampleImages] = useState<string[]>([]);
@@ -8,9 +9,11 @@ export default function useSampleImages(jobID: string, reloadInterval: null | nu
 
   const refreshSampleImages = () => {
     setStatus('loading');
-    fetch(`/api/jobs/${jobID}/samples`)
-      .then(res => res.json())
+    apiClient
+      .get(`/api/jobs/${jobID}/samples`)
+      .then(res => res.data)
       .then(data => {
+        console.log('Fetched sample images:', data);
         if (data.samples) {
           setSampleImages(data.samples);
         }

ui/src/hooks/useSettings.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useEffect, useState } from 'react';
+import { apiClient } from '@/utils/api';
 
 export interface Settings {
   HF_TOKEN: string;
@@ -16,10 +17,11 @@ export default function useSettings() {
   });
   const [isSettingsLoaded, setIsLoaded] = useState(false);
   useEffect(() => {
-    // Fetch current settings
-    fetch('/api/settings')
-      .then(res => res.json())
+    apiClient
+      .get('/api/settings')
+      .then(res => res.data)
       .then(data => {
+        console.log('Settings:', data);
         setSettings({
           HF_TOKEN: data.HF_TOKEN || '',
           TRAINING_FOLDER: data.TRAINING_FOLDER || '',