93 lines
2.6 KiB
JavaScript
93 lines
2.6 KiB
JavaScript
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;
|