Create monorepo from known-good production state

bgbye/src/App.js

@@ -0,0 +1,93 @@
+import React, { useState } from 'react';
+import { Box, ThemeProvider, createTheme, Paper, FormGroup, FormControlLabel, Checkbox, Divider, Typography } from '@mui/material';
+import { Toaster, toast } from 'react-hot-toast';
+import ImageUpload from './components/ImageUpload';
+import ResponsiveAppBar from './components/ResponsiveAppBar';
+import MethodSelector from './components/MethodSelector';
+import ModelsInfo from './components/ModelsInfo';
+
+// Utility function to show error toast
+const showErrorToast = (message) => {
+  toast.error(message, {
+    duration: 4000,
+    position: 'bottom-center',
+    style: {
+      background: '#FF4136',
+      color: '#FFFFFF',
+    },
+  });
+};
+
+const APP_ID = 'bgbye';
+
+function App() {
+  const [processedPanels, setProcessedPanels] = useState(0);
+  const [darkMode, setDarkMode] = useState(() => {
+    const storedTheme = localStorage.getItem(APP_ID + '_theme');
+    return storedTheme !== null ? storedTheme === 'true' : false;
+  });
+  const [selectedModels, setSelectedModels] = useState(
+    Object.keys(ModelsInfo).reduce((acc, key) => {
+      acc[key] = true;
+      return acc;
+    }, {})
+  );
+
+  const handleProcessed = () => {
+    setProcessedPanels((prevCount) => prevCount + 1);
+  };
+
+  const toggleTheme = () => {
+    setDarkMode((prevMode) => !prevMode);
+    localStorage.setItem(APP_ID + '_theme', !darkMode);
+  };
+
+  const handleModelChange = (event) => {
+    setSelectedModels({
+      ...selectedModels,
+      [event.target.name]: event.target.checked
+    });
+  };
+
+  const theme = createTheme({
+    palette: {
+      mode: darkMode ? 'dark' : 'light',
+      background: {
+        default: darkMode
+          ? 'linear-gradient(180deg, #10364a 30%, #0d171c 90%)'
+          : 'linear-gradient(180deg, #cbdbf2 30%, #b0ccff 90%)',
+      },
+    },
+  });
+
+  return (
+    <ThemeProvider theme={theme}>
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          minHeight: '100vh',
+          background: theme.palette.background.default,
+        }}
+      >
+        <ResponsiveAppBar toggleTheme={toggleTheme} darkMode={darkMode}/>
+        {Array.from({ length: processedPanels + 1 }).map((_, index) => (
+          <Box key={index} sx={{ mt: 4 }}>
+            <ImageUpload 
+              onProcessed={handleProcessed} 
+              theme={theme} 
+              fileID={index}
+              selectedModels={selectedModels}
+              showErrorToast={showErrorToast}
+            />
+          </Box>
+        ))}
+        <MethodSelector  selectedModels={selectedModels} handleModelChange={handleModelChange} />
+      </Box>
+      <Toaster />
+    </ThemeProvider>
+  );
+}
+
+export default App;