Spaces:

yderre-aubay
/

infer-vst

Sleeping

App Files Files Community

Yann commited on Jan 29, 2024

Commit

15975c4

1 Parent(s): 86694c3

add front

Browse files

This view is limited to 50 files because it contains too many changes. See raw diff

Files changed (50) hide show

front/.gitignore +2 -0
front/README.md +8 -0
front/dist/assets/index-GjkfYCwO.js +0 -0
front/index.html +11 -0
front/package.json +39 -0
front/public/vite.svg +1 -0
front/src/App.tsx +14 -0
front/src/components/AppBar/MainAppBar.tsx +241 -0
front/src/components/Container/MainContainer.tsx +35 -0
front/src/components/Drawer/MainDrawer.tsx +120 -0
front/src/favicon.svg +15 -0
front/src/main.tsx +12 -0
front/src/pages/About/About.tsx +15 -0
front/src/pages/ColorSystem/ColorSystem.tsx +239 -0
front/src/pages/Express/Express.tsx +53 -0
front/src/pages/Home/Home.tsx +87 -0
front/src/pages/Inferrence/CustomizeVST/CustomizeVST.tsx +187 -0
front/src/pages/Inferrence/Inferrence.tsx +203 -0
front/src/pages/Inferrence/Results/Results.tsx +97 -0
front/src/pages/Layout/MainLayout.tsx +67 -0
front/src/pages/pagesData.tsx +42 -0
front/src/pages/router.tsx +21 -0
front/src/requests/download.tsx +49 -0
front/src/requests/upload.tsx +255 -0
front/src/theme/M3/M3.tsx +25 -0
front/src/theme/M3/components/Accordion.ts +41 -0
front/src/theme/M3/components/Alert.ts +71 -0
front/src/theme/M3/components/AppBar.ts +35 -0
front/src/theme/M3/components/Badge.ts +39 -0
front/src/theme/M3/components/Button.ts +171 -0
front/src/theme/M3/components/Card.ts +127 -0
front/src/theme/M3/components/CssBaseline.ts +25 -0
front/src/theme/M3/components/Drawer.ts +24 -0
front/src/theme/M3/components/Fab.ts +126 -0
front/src/theme/M3/components/ListItem.ts +27 -0
front/src/theme/M3/components/ListItemButton.ts +55 -0
front/src/theme/M3/components/ListItemIcon.ts +26 -0
front/src/theme/M3/components/Menu.ts +31 -0
front/src/theme/M3/components/Switch.ts +83 -0
front/src/theme/M3/components/ToggleButton.ts +68 -0
front/src/theme/M3/components/ToggleButtonGroup.ts +39 -0
front/src/theme/M3/components/Tooltip.ts +23 -0
front/src/theme/M3/components/index.ts +17 -0
front/src/theme/M3/hooks/useThemeMode.ts +24 -0
front/src/theme/M3/hooks/useTonalPalette.ts +43 -0
front/src/theme/M3/providers/ThemeModeProvider.tsx +30 -0
front/src/theme/M3/providers/ThemeSchemeProvider.tsx +47 -0
front/src/theme/M3/types/ThemeMode.ts +1 -0
front/src/theme/M3/types/ThemeScheme.ts +14 -0
front/src/theme/M3/types/ThemeTokens.ts +218 -0

front/.gitignore ADDED Viewed

	@@ -0,0 +1,2 @@


1	+ node_modules/*
2	+ package-lock.json

front/README.md ADDED Viewed

	@@ -0,0 +1,8 @@

+# React + Vite
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+Currently, two official plugins are available:
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh

front/dist/assets/index-GjkfYCwO.js ADDED Viewed

The diff for this file is too large to render. See raw diff

front/index.html ADDED Viewed

	@@ -0,0 +1,11 @@

+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

front/package.json ADDED Viewed

	@@ -0,0 +1,39 @@

+{
+  "name": "vst-infer",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.11.3",
+    "@emotion/styled": "^11.11.0",
+    "@material/material-color-utilities": "^0.2.7",
+    "@mui/icons-material": "^5.14.5",
+    "@mui/material": "^5.15.5",
+    "axios": "^1.6.5",
+    "react": "^18.2.0",
+    "react-audio-player": "^0.17.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.21.2",
+    "uuid": "^9.0.1",
+    "vite-plugin-progress": "^0.0.7"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.43",
+    "@types/react-dom": "^18.2.17",
+    "@vitejs/plugin-react": "^4.2.1",
+    "eslint": "^8.55.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "vite": "^5.0.11"
+  },
+  "optionalDependencies": {
+    "@rollup/rollup-linux-x64-gnu": "4.9.5"
+  }
+}

front/public/vite.svg ADDED Viewed

front/src/App.tsx ADDED Viewed

	@@ -0,0 +1,14 @@

+import { BrowserRouter } from "react-router-dom";
+import Router from "./pages/router";
+const App = () => {
+  return (
+    <BrowserRouter>
+      <Router />
+    </BrowserRouter>
+  );
+};
+export default App;

front/src/components/AppBar/MainAppBar.tsx ADDED Viewed

	@@ -0,0 +1,241 @@

+import {
+    AppBar,
+    Box,
+    Button,
+    Grid,
+    IconButton,
+    Modal,
+    Toolbar,
+    Tooltip,
+    Typography,
+    useScrollTrigger,
+    useTheme
+} from "@mui/material";
+import { FC, useContext, useState } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+import { ThemeModeContext, ThemeSchemeContext } from "../../theme";
+import DarkIcon from "@mui/icons-material/DarkModeOutlined";
+import LightIcon from "@mui/icons-material/LightModeOutlined";
+import MenuIcon from "@mui/icons-material/MenuTwoTone";
+interface HeaderProps {
+  onDrawerToggle?: () => void;
+  window?: () => Window;
+}
+const MainAppBar: FC<HeaderProps> = ({ onDrawerToggle, window }) => {
+  const { toggleTheme, themeMode, setThemeMode } = useContext(ThemeModeContext);
+  const { generateScheme, themeScheme } = useContext(ThemeSchemeContext);
+  const muiTheme = useTheme();
+  const location = useLocation();
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const open = Boolean(anchorEl);
+  const openMenu = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const closeMenu = () => {
+    setAnchorEl(null);
+  };
+  const [openModal, setOpenModal] = useState(false)
+  const handleOpen = () => setOpenModal(true)
+  const handleClose = () => setOpenModal(false)
+  const trigger = useScrollTrigger({
+    disableHysteresis: true,
+    threshold: 0,
+    target: window ? window() : undefined,
+  });
+  const DIGITS: string = "0123456789ABCDEF";
+  const randomColor = (): string => {
+    let result = "";
+    for (let i = 0; i < 6; ++i) {
+      const index = Math.floor(16 * Math.random());
+      result += DIGITS[index];
+    }
+    return "#" + result;
+  };
+  const onGenerate = () => generateScheme(randomColor());
+  const onReset = () => {
+    generateScheme("#6750a4"); //#6750a4 #005fb0
+    setThemeMode("light");
+  };
+  const downloadTheme = () => {
+    closeMenu();
+    const themeString = JSON.stringify(themeScheme, null, 2);
+    // make it downloadable
+    const element = document.createElement("a");
+    const file = new Blob([themeString], { type: "application/json" });
+    element.href = URL.createObjectURL(file);
+    element.download = "ThemeScheme.json";
+    document.body.appendChild(element);
+    element.click();
+  };
+  const downloadMUITheme = () => {
+    closeMenu();
+    const themeString = JSON.stringify(muiTheme, null, 2);
+    // make it downloadable
+    const element = document.createElement("a");
+    const file = new Blob([themeString], { type: "application/json" });
+    element.href = URL.createObjectURL(file);
+    element.download = "ThemeMUI.json";
+    document.body.appendChild(element);
+    element.click();
+  };
+  const navigate = useNavigate();
+  return (
+    <>
+      <AppBar position="sticky" elevation={trigger ? 2 : 0}>
+        <Toolbar>
+          <Grid container spacing={1} alignItems="center">
+            <Grid item sx={{ display: { md: "none", sm: "block" } }}>
+              <IconButton color="inherit" edge="start" onClick={onDrawerToggle}>
+                <MenuIcon />
+              </IconButton>
+            </Grid>
+            <Grid item sx={{ display: "flex", alignItems: "baseline" }}>
+              <Typography
+                color="inherit"
+                sx={{ fontWeight: 500, letterSpacing: 0.5, fontSize: 20 }}
+              >
+                {location.pathname.replace("/", "")}
+              </Typography>
+            </Grid>
+            <Grid item xs></Grid>
+            <Grid item>
+              <Tooltip title="Switch Theme">
+                <IconButton size="large" color="inherit" onClick={toggleTheme}>
+                  {themeMode == "light" ? <DarkIcon /> : <LightIcon />}
+                </IconButton>
+              </Tooltip>
+            </Grid>
+          </Grid>
+          <Button variant="tonal" color="tertiary" onClick={handleOpen}>
+            Credits
+          </Button>
+          <div>
+            <Modal
+              open={openModal}
+              onClose={handleClose}
+              aria-labelledby="modal-modal-title"
+              aria-describedby="modal-modal-description"
+            >
+              <Box sx={style_modal}>
+                <Typography
+                  id="modal-modal-title"
+                  variant="h6"
+                  sx={{
+                    paddingTop: "10px",
+                    fontFamily: "monospace",
+                    fontStyle: "italic",
+                  }}
+                >
+                  Inferrence
+                </Typography>
+                <Typography
+                  id="modal-modal-title"
+                  variant="h6"
+                  sx={{ paddingTop: "10px", fontFamily: "monospace" }}
+                  component="h2"
+                >
+                  Project contributors
+                </Typography>
+                <Typography
+                  id="modal-modal-title"
+                  variant="h6"
+                  sx={{ paddingTop: "10px", fontFamily: "monospace" }}
+                  component="h2"
+                >
+                  Application & Model:
+                </Typography>
+                <Box sx={{ gap: "1px", marginLeft: "10px" }}>
+                  <Typography
+                    id="modal-modal-description"
+                    paragraph
+                    sx={{
+                      mt: 0,
+                      mb: 0,
+                      fontSize: "18px",
+                      fontFamily: "monospace",
+                    }}
+                  >
+                    - Yann Derré
+                  </Typography>
+                  <Typography
+                    id="modal-modal-description"
+                    paragraph
+                    sx={{
+                      mt: 0,
+                      mb: 0,
+                      fontSize: "18px",
+                      fontFamily: "monospace",
+                    }}
+                  >
+                    - Anselme Canivet
+                  </Typography>
+                </Box>
+                <Typography
+                  id="modal-modal-title"
+                  variant="h6"
+                  sx={{ paddingTop: "10px", fontFamily: "monospace" }}
+                  component="h2"
+                >
+                  Extra Support model:
+                </Typography>
+                <Box sx={{ gap: "1px", marginLeft: "10px" }}>
+                  <Typography
+                    id="modal-modal-description"
+                    paragraph
+                    sx={{
+                      mt: 0,
+                      mb: 0,
+                      fontSize: "18px",
+                      fontFamily: "monospace",
+                    }}
+                  >
+                    Inverynsth implementation Carlos
+                  </Typography>
+                </Box>
+                <Typography
+                  id="modal-modal-description"
+                  sx={{ mt: 2, fontFamily: "monospace" }}
+                >
+                  Link to the POC paper:
+                </Typography>
+              </Box>
+            </Modal>
+          </div>
+        </Toolbar>
+      </AppBar>
+    </>
+  );
+};
+const style_modal = {
+    position: "absolute" as "absolute",
+    top: "50%",
+    left: "50%",
+    transform: "translate(-50%, -50%)",
+    width: 500,
+    color: "inherit",
+    bgcolor: "background.paper",
+    p: 4,
+    borderRadius: "10px",
+  }
+export default MainAppBar;

front/src/components/Container/MainContainer.tsx ADDED Viewed

	@@ -0,0 +1,35 @@

+import { useMediaQuery, useTheme, SxProps, Paper } from '@mui/material';
+import { FC } from 'react';
+const MainContainer: FC<{ children?: React.ReactNode }> = ({ children }) => {
+    const theme = useTheme();
+    const isSmUp = useMediaQuery(theme.breakpoints.up('md'));
+    const isSxUp = useMediaQuery(theme.breakpoints.up('sm'));
+    const radiusTop = 30;
+    const radiusBottom = isSxUp ? 25 : 0;
+    const paperStyle: SxProps = {
+        p: isSxUp ? 4 : 2,
+        borderTopLeftRadius: radiusTop,
+        borderTopRightRadius: radiusTop,
+        borderBottomLeftRadius: radiusBottom,
+        borderBottomRightRadius: radiusBottom,
+        /*height: isSxUp ? 'auto' : 1,
+        m: isSxUp ? 2 : 0,*/
+        height: isSxUp ? '99%' : 1,
+        mt: 0,
+        mb: isSxUp ? 2 : 0,
+        mr: isSxUp ? 2 : 0,
+        ml: isSxUp ? (isSmUp ? 0 : 2) : 0
+    };
+    return (
+        <Paper sx={paperStyle} elevation={0} >
+            {children}
+        </Paper>
+    );
+}
+export default MainContainer;

front/src/components/Drawer/MainDrawer.tsx ADDED Viewed

	@@ -0,0 +1,120 @@

+import { Box, Drawer, DrawerProps, Fab, List, ListItem, ListItemButton, ListItemIcon, ListItemText, Toolbar, Typography } from "@mui/material";
+import { FC, useState, useEffect } from 'react';
+import { Link, useLocation } from "react-router-dom";
+import HomeIcon from '@mui/icons-material/Home';
+import HomeIconOutlined from '@mui/icons-material/HomeOutlined';
+import InfoIcon from '@mui/icons-material/Info';
+import InfoIconOutlined from '@mui/icons-material/InfoOutlined';
+import PeopleIcon from '@mui/icons-material/PeopleOutline';
+import PermMediaOutlinedIcon from '@mui/icons-material/PhotoSizeSelectActualOutlined';
+import PublicIcon from '@mui/icons-material/PublicOutlined';
+import SettingsEthernetIcon from '@mui/icons-material/SettingsEthernetOutlined';
+import SettingsInputComponentIcon from '@mui/icons-material/SettingsInputComponentOutlined';
+import PaletteOutlinedIcon from '@mui/icons-material/PaletteOutlined';
+import PaletteTwoToneIcon from '@mui/icons-material/Palette';
+import Add from "@mui/icons-material/Add";
+import { AddOutlined, FlashOn, FlashOnOutlined } from "@mui/icons-material";
+const MainDrawer: FC<DrawerProps> = (props) => {
+    const { onClose, ...others } = props;
+    // const categories = [
+    //     {
+    //         id: 'Build',
+    //         children: [
+    //             {
+    //                 id: 'Authentication',
+    //                 icon: <PeopleIcon />,
+    //             },
+    //             { id: 'Database', icon: <PeopleIcon /> },
+    //             { id: 'Storage', icon: <PermMediaOutlinedIcon /> },
+    //             { id: 'Hosting', icon: <PublicIcon /> },
+    //             { id: 'Functions', icon: <SettingsEthernetIcon /> },
+    //             {
+    //                 id: 'Machine learning',
+    //                 icon: <SettingsInputComponentIcon />,
+    //             },
+    //         ],
+    //     },
+    // ];
+    const location = useLocation();
+    const [selectedIndex, setSelectedIndex] = useState(location.pathname.replace('/', ''));
+    useEffect(() => {
+        setSelectedIndex(location.pathname.replace('/', ''));
+    }, [location.pathname])
+    const handleListItemClick = (index: string) => {
+        setSelectedIndex(index);
+        onClose?.({}, 'backdropClick');
+    };
+    return (
+        <Drawer {...others} onClose={onClose}>
+            <Toolbar >
+                <Typography color="inherit" sx={{ fontWeight: "bold", letterSpacing: 0.5, fontSize: 25, py:2, pt:5, textAlign: "center"}}>
+                    Placeholder logo
+                </Typography>
+            </Toolbar>
+                <Box sx={{py:1}}/>
+                <Fab color='tertiary' sx={{mx: 2, px: 1, py:1, height: "50px"}} variant='extended' component={Link} to='/Inferrence' onClick={() => handleListItemClick('Inferrence')}>
+                    {selectedIndex == 'Inferrence' ? <Add sx={{ mr: 1 }} /> : <AddOutlined sx={{ mr: 1 }} />}
+                    <Typography color="inherit" sx={{ mr: 1, fontSize: 16, fontWeight: 500, mt:0.3}}>New inferrence</Typography>
+                </Fab>
+                <Box sx={{py:1}}/>
+            <List>
+                <Box>
+                    <ListItem >
+                        <ListItemButton component={Link} to='/Home' selected={selectedIndex == 'Home'} onClick={() => handleListItemClick('Home')}>
+                            <ListItemIcon>
+                                {selectedIndex == 'Home' ? <HomeIcon /> : <HomeIconOutlined />}
+                            </ListItemIcon>
+                            <ListItemText>Home</ListItemText>
+                        </ListItemButton>
+                    </ListItem>
+                    <ListItem >
+                        <ListItemButton component={Link} to='/Inferrence' selected={selectedIndex == 'Inferrence'} onClick={() => handleListItemClick('Inferrence')}>
+                            <ListItemIcon>
+                                {selectedIndex == 'Inferrence' ? <PaletteTwoToneIcon /> : <PaletteOutlinedIcon />}
+                            </ListItemIcon>
+                            <ListItemText>Inferrence</ListItemText>
+                        </ListItemButton>
+                    </ListItem>
+                    <ListItem >
+                        <ListItemButton component={Link} to='/About' selected={selectedIndex == 'About'} onClick={() => handleListItemClick('About')}>
+                            <ListItemIcon>
+                                {selectedIndex == 'About' ? <InfoIcon /> : <InfoIconOutlined />}
+                            </ListItemIcon>
+                            <ListItemText>About</ListItemText>
+                        </ListItemButton>
+                    </ListItem>
+                </Box>
+                {/* {categories.map(({ id, children }) => (
+                    <Box key={id}>
+                        <ListItem sx={{ py: 2, px: 3 }}>
+                            <ListItemText sx={{ fontWeight: 'bold' }}>
+                                <Typography color="inherit" sx={{ ml: 1, fontSize: 15, fontWeight: 500 }} >
+                                    {id}
+                                </Typography>
+                            </ListItemText>
+                        </ListItem>
+                        {children.map(({ id: childId, icon }) => (
+                            <ListItem key={childId}>
+                                <ListItemButton selected={selectedIndex == childId} onClick={() => handleListItemClick(childId)}>
+                                    <ListItemIcon>{icon}</ListItemIcon>
+                                    <ListItemText>{childId}</ListItemText>
+                                </ListItemButton>
+                            </ListItem>
+                        ))}
+                    </Box>
+                ))} */}
+            </List>
+        </Drawer>
+    );
+};
+export default MainDrawer;

front/src/favicon.svg ADDED Viewed

front/src/main.tsx ADDED Viewed

	@@ -0,0 +1,12 @@

+import { createRoot } from 'react-dom/client';
+import App from './App';
+import M3 from './theme/M3/M3';
+const container = document.getElementById('root') as Element;
+const root = createRoot(container);
+root.render(
+    <M3>
+        <App />
+    </M3>
+);

front/src/pages/About/About.tsx ADDED Viewed

	@@ -0,0 +1,15 @@

+import { Typography } from '@mui/material'
+import MainContainer from '../../components/Container/MainContainer';
+const About = () => {
+    return (
+        <>
+            <MainContainer>
+                <Typography variant='body1'>Credits</Typography>
+            </MainContainer>
+        </>
+    );
+};
+export default About;

front/src/pages/ColorSystem/ColorSystem.tsx ADDED Viewed

	@@ -0,0 +1,239 @@

+import { Box, Stack, Typography, Paper, SxProps, useTheme, useMediaQuery, Grid } from '@mui/material';
+import { useContext } from 'react';
+import { ThemeSchemeContext } from '../../theme';
+import { ThemeModeContext } from '../../theme/M3/providers/ThemeModeProvider';
+const PaletteSwatch = ({ title, onTitle, titleColor, onTitleColor }: any) => {
+    return (
+        <Stack sx={{ height: '80px', borderRadius: '12px' }}>
+            <Box sx={{
+                flex: 1,
+                p: 1,
+                borderTopLeftRadius: '10px',
+                borderTopRightRadius: '10px',
+                bgcolor: titleColor,
+                color: onTitleColor,
+            }}>
+                <Typography fontSize={12} fontWeight={'bold'} >{title} - {titleColor.toUpperCase()}</Typography>
+            </Box>
+            <Box sx={{
+                flex: 1,
+                p: 1,
+                borderBottomLeftRadius: '10px',
+                borderBottomRightRadius: '10px',
+                bgcolor: onTitleColor,
+                color: titleColor,
+            }}>
+                <Typography fontSize={12} fontWeight={'bold'}>{onTitle} - {onTitleColor.toUpperCase()}</Typography>
+            </Box>
+        </Stack>
+    );
+};
+const PaletteSwatchSurface = ({ title, titleColor, onTitleColor }: any) => {
+    return (
+        <Stack sx={{ height: 'auto', }}>
+            <Box sx={{
+                p: 1.5,
+                bgcolor: titleColor,
+                color: onTitleColor,
+                borderRadius: '10px'
+            }}>
+                <Typography fontSize={12} fontWeight={'bold'}>{title} - {titleColor.toUpperCase()}</Typography>
+            </Box>
+        </Stack>
+    );
+}
+const ColorSystem = () => {
+    const { themeScheme } = useContext(ThemeSchemeContext);
+    const { themeMode } = useContext(ThemeModeContext);
+    const light = themeScheme[themeMode];
+    const theme = useTheme();
+    const isSmUp = useMediaQuery(theme.breakpoints.up('md'));
+    const isSxUp = useMediaQuery(theme.breakpoints.up('sm'));
+    const radius = isSxUp ? 4 : 0;
+    const paperStyle: SxProps = {
+        py: 2,
+        px: 2,
+        borderRadius: radius,
+        //height: isSxUp ? 'auto' : 1,
+        mt: 0,
+        mb: isSxUp ? 2 : 0,
+        mr: isSxUp ? 2 : 0,
+        ml: isSxUp ? (isSmUp ? 0 : 2) : 0
+    };
+    return (
+        <Grid container columns={1} spacing={isSxUp ? (isSmUp ? 2 : 1) : 0} columnSpacing={1} >
+            <Grid xs={1}>
+                <Paper elevation={0} sx={{ ...paperStyle, height: 'auto' }} >
+                    <Typography variant="h6" fontWeight="bold" sx={{ m: 1 }}>
+                        {themeMode == 'light' ? 'Light Theme' : 'Dark Theme'}
+                    </Typography>
+                    <Grid container columns={4} spacing={2}>
+                        <Grid xs={2} sm={2} md={2} lg={1} xl={1}>
+                            <PaletteSwatch title='Primary' titleColor={light.primary} onTitle='OnPrimary' onTitleColor={light.onPrimary} />
+                        </Grid>
+                        <Grid xs={2} sm={2} md={2} lg={1} xl={1}>
+                            <PaletteSwatch title='Secondary' titleColor={light.secondary} onTitle='OnSecondary' onTitleColor={light.onSecondary} />
+                        </Grid>
+                        <Grid xs={2} sm={2} md={2} lg={1} xl={1}>
+                            <PaletteSwatch title='Tertiary' titleColor={light.tertiary} onTitle='OnTertiary' onTitleColor={light.onTertiary} />
+                        </Grid>
+                        <Grid xs={2} sm={2} md={2} lg={1} xl={1}>
+                            <PaletteSwatch title='Error' titleColor={light.error} onTitle='OnError' onTitleColor={light.onError} />
+                        </Grid>
+                        <Grid xs={2} sm={2} md={2} lg={1} xl={1}>
+                            <PaletteSwatch title='PrimaryContainer' titleColor={light.primaryContainer} onTitle='OnPrimaryContainer' onTitleColor={light.onPrimaryContainer} />
+                        </Grid>
+                        <Grid xs={2} sm={2} md={2} lg={1} xl={1}>
+                            <PaletteSwatch title='SecondaryContainer' titleColor={light.secondaryContainer} onTitle='OnSecondaryContainer' onTitleColor={light.onSecondaryContainer} />
+                        </Grid>
+                        <Grid xs={2} sm={2} md={2} lg={1} xl={1}>
+                            <PaletteSwatch title='TertiaryContainer' titleColor={light.tertiaryContainer} onTitle='OnTertiaryContainer' onTitleColor={light.onTertiaryContainer} />
+                        </Grid>
+                        <Grid xs={2} sm={2} md={2} lg={1} xl={1}>
+                            <PaletteSwatch title='ErrorContainer' titleColor={light.errorContainer} onTitle='OnErrorContainer' onTitleColor={light.onErrorContainer} />
+                        </Grid>
+                    </Grid>
+                </Paper>
+                <Paper elevation={0} sx={{ ...paperStyle, height: 'auto' }}>
+                    <Grid container columns={4} spacing={2}>
+                        <Grid xs={2} sm={2} md={2} lg={1} xl={1}>
+                            <PaletteSwatchSurface title='PrimaryFixed' titleColor={light.primaryFixed} onTitleColor={light.onPrimaryFixed} />
+                        </Grid>
+                        <Grid xs={2} sm={2} md={2} lg={1} xl={1}>
+                            <PaletteSwatchSurface title='PrimaryFixedDim' titleColor={light.primaryFixedDim} onTitleColor={light.onPrimaryFixedVariant} />
+                        </Grid>
+                        <Grid xs={2} sm={2} md={2} lg={1} xl={1} >
+                            <PaletteSwatchSurface title='OnPrimaryFixed' titleColor={light.onPrimaryFixed} onTitleColor={light.primaryFixed} />
+                        </Grid>
+                        <Grid xs={2} sm={2} md={2} lg={1} xl={1}>
+                            <PaletteSwatchSurface title='OnPrimaryFixedVariant' titleColor={light.onPrimaryFixedVariant} onTitleColor={light.primaryFixedDim} />
+                        </Grid>
+                        <Grid xs={2} sm={2} md={2} lg={1} xl={1}>
+                            <PaletteSwatchSurface title='SecondaryFixed' titleColor={light.secondaryFixed} onTitleColor={light.onSecondaryFixed} />
+                        </Grid>
+                        <Grid xs={2} sm={2} md={2} lg={1} xl={1}>
+                            <PaletteSwatchSurface title='SecondaryFixedDim' titleColor={light.secondaryFixedDim} onTitleColor={light.onSecondaryFixedVariant} />
+                        </Grid>
+                        <Grid xs={2} sm={2} md={2} lg={1} xl={1} >
+                            <PaletteSwatchSurface title='OnSecondaryFixed' titleColor={light.onSecondaryFixed} onTitleColor={light.secondaryFixed} />
+                        </Grid>
+                        <Grid xs={2} sm={2} md={2} lg={1} xl={1}>
+                            <PaletteSwatchSurface title='OnSecondaryFixedVariant' titleColor={light.onSecondaryFixedVariant} onTitleColor={light.secondaryFixedDim} />
+                        </Grid>
+                        <Grid xs={2} sm={2} md={2} lg={1} xl={1}>
+                            <PaletteSwatchSurface title='TertiaryFixed' titleColor={light.tertiaryFixed} onTitleColor={light.onTertiaryFixed} />
+                        </Grid>
+                        <Grid xs={2} sm={2} md={2} lg={1} xl={1}>
+                            <PaletteSwatchSurface title='TertiaryFixedDim' titleColor={light.tertiaryFixedDim} onTitleColor={light.onTertiaryFixedVariant} />
+                        </Grid>
+                        <Grid xs={2} sm={2} md={2} lg={1} xl={1} >
+                            <PaletteSwatchSurface title='OnTertiaryFixed' titleColor={light.onTertiaryFixed} onTitleColor={light.tertiaryFixed} />
+                        </Grid>
+                        <Grid xs={2} sm={2} md={2} lg={1} xl={1}>
+                            <PaletteSwatchSurface title='OnTertiaryFixedVariant' titleColor={light.onTertiaryFixedVariant} onTitleColor={light.tertiaryFixedDim} />
+                        </Grid>
+                    </Grid>
+                </Paper>
+                <Paper elevation={0} sx={{ ...paperStyle, height: 'auto' }}>
+                    <Grid container columns={5} spacing={1} rowSpacing={2}>
+                        <Grid xs={1.7}>
+                            <PaletteSwatchSurface title='SurfaceDim' titleColor={light.surfaceDim} onTitleColor={light.onSurface} />
+                        </Grid>
+                        <Grid xs={1.6}>
+                            <PaletteSwatchSurface title='Surface' titleColor={light.surface} onTitleColor={light.onSurface} />
+                        </Grid>
+                        <Grid xs={1.7}>
+                            <PaletteSwatchSurface title='SurfaceBright' titleColor={light.surfaceBright} onTitleColor={light.onSurface} />
+                        </Grid>
+                        <Grid xs={1}>
+                            <PaletteSwatchSurface title='Surf. ContainerLowest' titleColor={light.surfaceContainerLowest} onTitleColor={light.onSurface} />
+                        </Grid>
+                        <Grid xs={1}>
+                            <PaletteSwatchSurface title='Surf. ContainerLow' titleColor={light.surfaceContainerLow} onTitleColor={light.onSurface} />
+                        </Grid>
+                        <Grid xs={1}>
+                            <PaletteSwatchSurface title='Surf. Container' titleColor={light.surfaceContainer} onTitleColor={light.onSurface} />
+                        </Grid>
+                        <Grid xs={1}>
+                            <PaletteSwatchSurface title='Surf. ContainerHigh' titleColor={light.surfaceContainerHigh} onTitleColor={light.onSurface} />
+                        </Grid>
+                        <Grid xs={1}>
+                            <PaletteSwatchSurface title='Surf. ContainerHighest' titleColor={light.surfaceContainerHighest} onTitleColor={light.onSurface} />
+                        </Grid>
+                        <Grid xs={1.25}>
+                            <PaletteSwatchSurface title='OnSurface' titleColor={light.onSurface} onTitleColor={light.surface} />
+                        </Grid>
+                        <Grid xs={1.25}>
+                            <PaletteSwatchSurface title='OnSurfaceVariant' titleColor={light.onSurfaceVariant} onTitleColor={light.surface} />
+                        </Grid>
+                        <Grid xs={1.25}>
+                            <PaletteSwatchSurface title='Outline' titleColor={light.outline} onTitleColor={light.surface} />
+                        </Grid>
+                        <Grid xs={1.25}>
+                            <PaletteSwatchSurface title='OutlineVariant' titleColor={light.outlineVariant} onTitleColor={light.inverseSurface} />
+                        </Grid>
+                    </Grid>
+                </Paper>
+                <Paper elevation={0} sx={{ ...paperStyle, height: 'auto' }}>
+                    <Grid container columns={5} spacing={1}>
+                        <Grid xs={1.25}>
+                            <PaletteSwatch title='InverseSurface' titleColor={light.inverseSurface} onTitle='InverseOnSurface' onTitleColor={light.inverseOnSurface} />
+                        </Grid>
+                        <Grid xs={1.25}>
+                            <PaletteSwatchSurface title='InversePrimary' titleColor={light.inversePrimary} onTitleColor={light.onPrimaryContainer} />
+                        </Grid>
+                        <Grid xs={1.25}>
+                            <PaletteSwatchSurface title='Scrim' titleColor={light.scrim} onTitleColor={'#FFF'} />
+                        </Grid>
+                        <Grid xs={1.25}>
+                            <PaletteSwatchSurface title='Shadow' titleColor={light.shadow} onTitleColor={'#FFF'} />
+                        </Grid>
+                    </Grid>
+                </Paper>
+                <Paper elevation={0} sx={{ ...paperStyle }} >
+                    <Typography variant="h6" fontWeight="bold" sx={{ m: 1, mt: 2 }}>
+                        Custom Colors
+                    </Typography>
+                    <Grid container columns={3} spacing={2}>
+                        <Grid xs={1}>
+                            <PaletteSwatch title='Info' titleColor={light.info} onTitle='OnInfo' onTitleColor={light.onInfo} />
+                        </Grid>
+                        <Grid xs={1}>
+                            <PaletteSwatch title='Warning' titleColor={light.warning} onTitle='OnWarning' onTitleColor={light.onWarning} />
+                        </Grid>
+                        <Grid xs={1}>
+                            <PaletteSwatch title='Success' titleColor={light.success} onTitle='OnSuccess' onTitleColor={light.onSuccess} />
+                        </Grid>
+                        <Grid xs={1}>
+                            <PaletteSwatch title='InfoContainer' titleColor={light.infoContainer} onTitle='OnInfoContainer' onTitleColor={light.onInfoContainer} />
+                        </Grid>
+                        <Grid xs={1}>
+                            <PaletteSwatch title='WarningContainer' titleColor={light.warningContainer} onTitle='OnWarningContainer' onTitleColor={light.onWarningContainer} />
+                        </Grid>
+                        <Grid xs={1}>
+                            <PaletteSwatch title='SuccessContainer' titleColor={light.successContainer} onTitle='OnSuccesContainer' onTitleColor={light.onSuccessContainer} />
+                        </Grid>
+                    </Grid>
+                </Paper>
+            </Grid>
+        </Grid>
+    );
+};
+export default ColorSystem;

front/src/pages/Express/Express.tsx ADDED Viewed

	@@ -0,0 +1,53 @@

+import { Box, Card, CardContent, Chip, Divider, LinearProgress, Stack, Typography } from "@mui/material";
+import MainContainer from "../../components/Container/MainContainer";
+import { ChecklistSharp, DeveloperBoard, FlashOn, LineAxis, Settings, SettingsTwoTone, UploadFile } from "@mui/icons-material";
+import { useCallback, useEffect, useState } from "react";
+import { Link, useNavigate, useNavigation } from "react-router-dom";
+const Express = () => {
+  const navigate = useNavigate()
+  return (
+    <>
+      <MainContainer>
+        <Box
+          sx={{
+            justifyContent: "center",
+            display: "flex",
+            height: "99%",
+            alignItems: "center",
+          }}
+        >
+          <Stack sx={{ height: '30vh', borderRadius: '12px', gap: "30px", minWidth: "20vw", maxWidth:"300px"}}>
+          <Card variant="outlined" onClick={() => navigate("/Inferrence")}>
+            <Box>
+              <CardContent sx={{ display: "flex", justifyItems: "center", flexDirection: "row-reverse", alignItems:"center", justifyContent: "flex-end", userSelect: "none", gap:"30px"}}>
+              <Box sx={{ display: "flex", flexDirection:"column" }}>
+                <Typography variant="h5">Express generation</Typography>
+                <Typography variant="body1" fontStyle={"italic"}>TAL-Noisemaker synthesizer and recommended config is used</Typography>
+              </Box>
+                <FlashOn sx={{ fontSize: "40px", color: "inherit" }} />
+              </CardContent>
+            </Box>
+          </Card>
+          <Box></Box>
+          <Divider>Or</Divider>
+          <Card variant="outlined" onClick={() => navigate("/")}>
+            <Box sx={{ display: "inherit"}}>
+              <CardContent sx={{ display: "flex", justifyItems: "center", flexDirection: "row-reverse", alignItems:"center", justifyContent: "flex-end", gap:"30px", userSelect: "none"}}>
+              <Box sx={{ display: "flex", flexDirection:"column" }}>
+                <Typography variant="h5">Custom generation</Typography>
+                <Typography variant="body1" fontStyle={"italic"}>Bring your own VST and customize your model</Typography>
+              </Box>
+                <Settings sx={{ fontSize: "40px", color: "inherit" }} />
+              </CardContent>
+            </Box>
+          </Card>
+        </Stack>
+        </Box>
+      </MainContainer>
+    </>
+  );
+};
+export default Express;

front/src/pages/Home/Home.tsx ADDED Viewed

	@@ -0,0 +1,87 @@

+import { Stack } from '@mui/material';
+import MainContainer from '../../components/Container/MainContainer';
+import { FlashOn, Settings } from "@mui/icons-material";
+import { Box, Card, CardContent, Divider, Typography } from "@mui/material";
+import { useNavigate } from "react-router-dom";
+const Home = () => {
+    const navigate = useNavigate()
+    return (
+        <>
+            <MainContainer>
+               <ExplainText/>
+               <Box
+          sx={{
+            justifyContent: "center",
+            display: "flex",
+            pt: 10,
+            height:"100%",
+            alignItems: "center",
+          }}
+        >
+          <Stack sx={{ height: '100%', borderRadius: '12px', gap: "30px", minWidth: "20vw", maxWidth:"300px"}}>
+          <Card variant="outlined" onClick={() => navigate("/Inferrence")}>
+            <Box>
+              <CardContent sx={{ display: "flex", justifyItems: "center", flexDirection: "row-reverse", alignItems:"center", justifyContent: "flex-end", userSelect: "none", gap:"30px"}}>
+              <Box sx={{ display: "flex", flexDirection:"column" }}>
+                <Typography variant="h5">Express generation</Typography>
+                <Typography variant="body1" fontStyle={"italic"}>TAL-Noisemaker synthesizer and recommended config is used</Typography>
+              </Box>
+                <FlashOn sx={{ fontSize: "40px", color: "inherit" }} />
+              </CardContent>
+            </Box>
+          </Card>
+          <Box></Box>
+          <Divider>Or</Divider>
+          <Card variant="outlined" onClick={() => navigate("/CustomizeVST")}>
+            <Box sx={{ display: "inherit"}}>
+              <CardContent sx={{ display: "flex", justifyItems: "center", flexDirection: "row-reverse", alignItems:"center", justifyContent: "flex-end", gap:"30px", userSelect: "none"}}>
+              <Box sx={{ display: "flex", flexDirection:"column" }}>
+                <Typography variant="h5">Custom generation</Typography>
+                <Typography variant="body1" fontStyle={"italic"}>Bring your own VST and customize your model</Typography>
+              </Box>
+                <Settings sx={{ fontSize: "40px", color: "inherit" }} />
+              </CardContent>
+            </Box>
+          </Card>
+        </Stack>
+        </Box>
+        </MainContainer>
+        </>
+    );
+};
+export default Home;
+export function ExplainText(props: any) {
+  return (
+    <div
+      style={{
+        display: "flex",
+        justifyContent: "center",
+        marginBottom: "10px",
+      }}
+    >
+      <Box
+        sx={{
+          width: "50vw",
+          borderRadius: "20px",
+          bgcolor: "background.default",
+          padding: "35px"
+        }}
+      >
+        <Typography variant="h4">Hi!👋</Typography>
+        <div style={{ paddingTop: "10px" }}>
+          <Typography fontSize={"20px"}>
+            Start inferring now!!!!!! 🧑‍🍳🧑‍🍳
+          </Typography>
+        </div>
+      </Box>
+    </div>
+  )
+}

front/src/pages/Inferrence/CustomizeVST/CustomizeVST.tsx ADDED Viewed

	@@ -0,0 +1,187 @@

+import {
+  DeveloperBoardOutlined
+} from "@mui/icons-material";
+import {
+  Box,
+  Button,
+  Card,
+  CardActions,
+  CardContent,
+  Checkbox,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  TextField,
+  Typography
+} from "@mui/material";
+import { useState } from "react";
+import { Link } from "react-router-dom";
+import MainContainer from "../../../components/Container/MainContainer";
+const CustomizeVST = () => {
+  type DataType = {
+    [key: string]: number | number[];
+  };
+  const data: DataType = {
+    item1: 1,
+    item2: 42,
+    item3: 2,
+    item4: 7,
+    item5: [3, 2],
+  };
+  type Column = {
+    id: string;
+    label: string;
+  };
+  const columns: Column[] = [
+    { id: "checkbox", label: "Enabled" },
+    { id: "name", label: "Name" },
+    { id: "value", label: "Value" },
+  ];
+  const [selectedItems, setSelectedItems] = useState<string[]>([]);
+  const [editedValues, setEditedValues] = useState<DataType>({});
+  const handleCheckboxChange = (itemName: string) => {
+    if (selectedItems.includes(itemName)) {
+      setSelectedItems(selectedItems.filter((item) => item !== itemName));
+    } else {
+      setSelectedItems([...selectedItems, itemName]);
+    }
+  };
+  const handleValueChange = (itemName: string, value: number | number[]) => {
+    setEditedValues((prevValues) => ({
+      ...prevValues,
+      [itemName]: value,
+    }));
+  };
+  return (
+    <>
+      <MainContainer>
+        <Box
+          sx={{
+            justifyContent: "center",
+            display: "flex",
+            height: "99%",
+            alignItems: "center",
+          }}
+        >
+          <Card variant={"filled"} sx={{ width: "30vw" }}>
+            <Box>
+              <CardContent
+                sx={{
+                  display: "grid",
+                  justifyItems: "center",
+                  alignItems: "center",
+                }}
+              >
+                <DeveloperBoardOutlined sx={{ fontSize: "50px" }} />
+                <Typography
+                  sx={{ fontFamily: "monospace", pt: 1, fontSize: "50px" }}
+                >
+                  VST Name
+                </Typography>
+                <Typography sx={{ fontFamily: "monospace", pb: 1 }}>
+                  Properties available
+                </Typography>
+                <TableContainer sx={{}}>
+                  <Table>
+                    <TableHead>
+                      <TableRow>
+                        {columns.map((column) => (
+                          <TableCell key={column.id}>{column.label}</TableCell>
+                        ))}
+                      </TableRow>
+                    </TableHead>
+                    <TableBody>
+                      {Object.keys(data).map((itemName) => (
+                        <TableRow key={itemName}>
+                          <TableCell>
+                            <Checkbox
+                              checked={selectedItems.includes(itemName)}
+                              onChange={() => handleCheckboxChange(itemName)}
+                            />
+                          </TableCell>
+                          <TableCell>{itemName}</TableCell>
+                          <TableCell>
+                            {Array.isArray(data[itemName]) ? (
+                              <>
+                                <TextField
+                                  type="number"
+                                  value={
+                                    editedValues[itemName] !== undefined
+                                      ? editedValues[itemName]
+                                      : data[itemName]
+                                  }
+                                  onChange={(e) =>
+                                    handleValueChange(
+                                      itemName,
+                                      Number(e.target.value)
+                                    )
+                                  }
+                                />
+                                <TextField
+                                  type="number"
+                                  value={
+                                    editedValues[itemName] !== undefined
+                                      ? editedValues[itemName]
+                                      : data[itemName]
+                                  }
+                                  onChange={(e) =>
+                                    handleValueChange(
+                                      itemName,
+                                      Number(e.target.value)
+                                    )
+                                  }
+                                />
+                              </>
+                            ) : (
+                              <TextField
+                                sx={{
+                                  width: "100px",
+                                  WebkitAppearance: "none",
+                                  margin: 0,
+                                }}
+                                type="number"
+                                value={
+                                  editedValues[itemName] !== undefined
+                                    ? editedValues[itemName]
+                                    : data[itemName]
+                                }
+                                onChange={(e) =>
+                                  handleValueChange(
+                                    itemName,
+                                    Number(e.target.value)
+                                  )
+                                }
+                              />
+                            )}
+                          </TableCell>
+                        </TableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
+                </TableContainer>
+              </CardContent>
+              <CardActions sx={{ display: "flex", justifyContent: "flex-end" }}>
+                <Button variant="filled" component={Link} to="/Results">
+                  Next
+                </Button>
+              </CardActions>
+            </Box>
+          </Card>
+        </Box>
+      </MainContainer>
+    </>
+  );
+};
+export default CustomizeVST;

front/src/pages/Inferrence/Inferrence.tsx ADDED Viewed

	@@ -0,0 +1,203 @@

+import { UploadFile } from "@mui/icons-material";
+import {
+  Box,
+  Button,
+  Card,
+  CardActions,
+  CardContent,
+  LinearProgress,
+  Modal,
+  Typography,
+} from "@mui/material";
+import { useCallback, useEffect, useState } from "react";
+import { Link, useLocation } from "react-router-dom";
+import MainContainer from "../../components/Container/MainContainer";
+import AudioUploader from "../../requests/upload";
+import ColorSystem from "../ColorSystem/ColorSystem";
+const Inferrence = () => {
+  useEffect(() => {
+    // Retrieve values from localStorage
+    const storedFilePath = localStorage.getItem('file_path');
+    const storedCsvFilePath = localStorage.getItem('csv_file_path');
+    const storedOutputFilePath = localStorage.getItem('output_file_path');
+    // Check if values are stored and delete them
+    if (storedFilePath || storedCsvFilePath || storedOutputFilePath) {
+      localStorage.removeItem('file_path');
+      localStorage.removeItem('csv_file_path');
+      localStorage.removeItem('output_file_path');
+    }
+  }, []);
+  const location = useLocation();
+  const [selectedIndex, setSelectedIndex] = useState(
+    location.pathname.replace("/", "")
+  );
+  const [isVisible, setIsVisible] = useState(false);
+  const [files, setFile] = useState<File | null>(null);
+  const [filename, setFileName] = useState<string>("null");
+  const [NextCard, setNextCard] = useState(false);
+  const handleListItemClick = (index: string) => {
+    setSelectedIndex(index);
+  };
+  useEffect(() => {
+    setSelectedIndex(location.pathname.replace("/", ""));
+  }, [location.pathname]);
+  const uploadNow = () => {
+    //start upload function and pass the file selected as argument
+  };
+  const onDragEnter = useCallback(
+    (e: { stopPropagation: () => void; preventDefault: () => void }) => {
+      setIsVisible(true);
+      e.stopPropagation();
+      e.preventDefault();
+      return false;
+    },
+    []
+  );
+  const onDragOver = useCallback(
+    (e: { preventDefault: () => void; stopPropagation: () => void }) => {
+      e.preventDefault();
+      e.stopPropagation();
+      return false;
+    },
+    []
+  );
+  const onDragLeave = useCallback(
+    (e: { stopPropagation: () => void; preventDefault: () => void }) => {
+      setIsVisible(false);
+      e.stopPropagation();
+      e.preventDefault();
+      return false;
+    },
+    []
+  );
+  const onDrop = useCallback(
+    (e: { preventDefault: () => void; dataTransfer: any }) => {
+      e.preventDefault();
+      const files = e.dataTransfer.files;
+      setFile(e.dataTransfer.files[0]);
+      setFileName(e.dataTransfer.files[0].name);
+      console.log("Files dropped: ", filename);
+      // Upload files
+      //check file type
+      setNextCard(true);
+      setIsVisible(false);
+      return false;
+    },
+    []
+  );
+  useEffect(() => {
+    window.addEventListener("mouseup", onDragLeave);
+    window.addEventListener("dragenter", onDragEnter);
+    window.addEventListener("dragover", onDragOver);
+    window.addEventListener("drop", onDrop);
+    return () => {
+      window.removeEventListener("mouseup", onDragLeave);
+      window.removeEventListener("dragenter", onDragEnter);
+      window.removeEventListener("dragover", onDragOver);
+      window.removeEventListener("drop", onDrop);
+    };
+  }, [onDragEnter, onDragLeave, onDragOver, onDrop]);
+  //Modal OpenClose
+  const [openModal, setOpenModal] = useState(false);
+  const handleOpen = () => setOpenModal(true);
+  const handleClose = () => setOpenModal(false);
+  return (
+    <>
+      <MainContainer>
+        <Box
+          onDragEnter={onDragEnter}
+          onDragOver={onDragEnter}
+          onDragLeave={onDragLeave}
+          sx={{
+            justifyContent: "center",
+            display: "flex",
+            height: "99%",
+            alignItems: "center",
+          }}
+        >
+          <AudioUploader handleClose={handleClose} handleOpen={handleOpen}/>
+          </Box>
+        <GenerationModal GenerationStatus="It's working for sure" handleClose={handleClose} handleOpen={openModal}/>
+      </MainContainer>
+    </>
+  );
+};
+export default Inferrence;
+interface GenerationModalProps {
+  GenerationStatus: string; // Replace "string" with the actual type of GenerationStatus
+  handleOpen : boolean;
+  handleClose: React.Dispatch<React.SetStateAction<boolean>>;
+}
+export function GenerationModal({
+  GenerationStatus,
+  handleOpen,
+  handleClose
+}: GenerationModalProps): any {
+  const [statusText, setStatusText] = useState(GenerationStatus);
+  useEffect(() => {
+    // Update the displayText whenever the prop 'text' changes
+    setStatusText(GenerationStatus);
+  }, [GenerationStatus]);
+  return (
+    <div
+      style={{
+        display: "flex",
+        justifyContent: "center",
+        marginBottom: "10px",
+      }}
+    >
+      <Modal
+        open={handleOpen}
+        onClose={handleClose}
+        aria-labelledby="modal-modal-title"
+        aria-describedby="modal-modal-description"
+      >
+        <Box sx={style_modal}>
+          <Typography variant="h4">Model Running</Typography>
+          <div style={{ paddingTop: "10px" }}>
+            <Typography fontSize={"20px"}>{GenerationStatus}</Typography>
+            <Box sx={{ pt: 2 }}>
+              <LinearProgress color={"primary"} sx={{ borderRadius: "50px" }} />
+            </Box>
+          </div>
+        </Box>
+      </Modal>
+    </div>
+  );
+}
+const style_modal = {
+  position: "absolute" as "absolute",
+  top: "50%",
+  left: "50%",
+  transform: "translate(-50%, -50%)",
+  width: 500,
+  color: "inherit",
+  bgcolor: "background.paper",
+  p: 4,
+  borderRadius: "10px",
+};

front/src/pages/Inferrence/Results/Results.tsx ADDED Viewed

	@@ -0,0 +1,97 @@

+import { Box, Card, CardContent, Chip, Divider, Fab, Grid, LinearProgress, Stack, Typography } from "@mui/material";
+import MainContainer from "../../../components/Container/MainContainer";
+import { Audiotrack, ChecklistSharp, DeveloperBoard, FlashOn, LineAxis, Loop, RestartAlt, Settings, SettingsTwoTone, UploadFile } from "@mui/icons-material";
+import { useCallback, useEffect, useState } from "react";
+import { Link, useNavigate, useNavigation } from "react-router-dom";
+import ReactAudioPlayer from "react-audio-player";
+const Results = () => {
+  const navigate = useNavigate()
+  const handleRetry = () => {
+    // Implement retry logic here
+    console.log('Retry button clicked');
+  };
+  const [filePath, setFilePath] = useState('');
+  const [csvFilePath, setCsvFilePath] = useState(' ');
+  const [outputFilePath, setOutputFilePath] = useState(' ');
+  useEffect(() => {
+    // Retrieve values from localStorag
+    // Function to replace backslashes with forward slashes
+    const convertSlashes = (path: string | null ) : string => {
+      if(path != null){
+        return path.replace(/\\/g, '/');
+      }
+      return ""
+    }
+    // Update state variables with converted values
+    setFilePath(convertSlashes(localStorage.getItem('file_path')));
+    setCsvFilePath(convertSlashes(localStorage.getItem('csv_file_path')));
+    setOutputFilePath(convertSlashes(localStorage.getItem('output_file_path')));
+  }, []); // Empty dependency array ensures the useEffect runs only once on mount
+  return (
+    <MainContainer>
+    <Box
+      sx={{
+        justifyContent: "center",
+        display: "flex",
+        height: "99%",
+        alignItems: "center",
+      }}
+    >
+    <Stack sx={{borderRadius: '12px', gap: "30px", alignItems:"center"}}>
+    <Grid container spacing={2} alignItems="center" justifyContent="center">
+      {/* Before Card */}
+      <Grid item>
+        <Card>
+          <CardContent>
+            <Typography sx={{pt:0.5, pb: 4}} variant="h6">Sample</Typography>
+            {/* Add your audio player component for the 'before' state here */}
+            {/* Example: <AudioPlayer audioFile={beforeAudioFile} /> */}
+            <ReactAudioPlayer src={filePath} controls/>
+          </CardContent>
+        </Card>
+      </Grid>
+      {/* Vertical Line Divider */}
+      {/* After Card */}
+      <Grid item>
+        <Card>
+          <CardContent>
+            <Typography sx={{pt:0.5, pb: 4}} variant="h6">Generated</Typography>
+            {/* Add your audio player component for the 'before' state here */}
+            {/* Example: <AudioPlayer audioFile={beforeAudioFile} /> */}
+            <ReactAudioPlayer src={outputFilePath} controls/>
+          </CardContent>
+        </Card>
+      </Grid>
+    </Grid>
+      {/* Retry FAB */}
+      <Fab color='primary' sx={{height: "70px"}} variant='extended' component={Link} target="_blank" to={csvFilePath}>
+          <Audiotrack />
+            <Typography color="inherit" sx={{ mr: 1, fontSize: 16, fontWeight: 500, mt:0.3, ml: 2}}>Download Preset</Typography>
+        </Fab>
+        <Divider sx={{width: "5vw", py:2}}>Or</Divider>
+        <Fab color='surface' sx={{mt: 5, height: "70px"}} variant='extended' component={Link} to='/Inferrence'>
+            <RestartAlt/>
+            <Typography color="inherit" sx={{ mr: 1, fontSize: 16, fontWeight: 500, mt:0.3, ml: 2}}>Retry</Typography>
+        </Fab>
+        </Stack>
+    </Box>
+    </MainContainer>
+  );
+};
+export default Results;
+function convertSlashes(arg0: string | null): import("react").SetStateAction<string> {
+  throw new Error("Function not implemented.");
+}

front/src/pages/Layout/MainLayout.tsx ADDED Viewed

	@@ -0,0 +1,67 @@

+import { Box, SxProps, useMediaQuery, useTheme } from "@mui/material";
+import { FC, useState } from "react";
+import { Outlet } from "react-router-dom";
+import MainDrawer from "../../components/Drawer/MainDrawer";
+import MainAppBar from "../../components/AppBar/MainAppBar";
+const drawerWidth = 260;
+const MainLayout: FC = () => {
+    const theme = useTheme();
+    const isSmUp = useMediaQuery(theme.breakpoints.up('md'));
+    const [mobileOpen, setMobileOpen] = useState(false);
+    const rootStyles: SxProps = {
+        display: 'flex',
+        minHeight: '100vh',
+    };
+    const navStyles: SxProps = {
+        width: { md: drawerWidth },
+        flexShrink: { md: 0 },
+    };
+    const mainStyles: SxProps = {
+        flex: 1,
+        display: 'flex',
+        flexDirection: 'column',
+        //bgcolor: '#f3f3f3'
+    };
+    const containerStyles: SxProps = {
+        p: 0,
+        flex: 1,
+    };
+    const handleDrawerToggle = () => {
+        setMobileOpen(!mobileOpen);
+    };
+    return (
+        <Box sx={rootStyles}>
+            <Box component="nav" sx={navStyles}>
+                {isSmUp ? null : (
+                    <MainDrawer
+                        PaperProps={{ style: { width: drawerWidth } }}
+                        variant="temporary"
+                        open={mobileOpen}
+                        onClose={handleDrawerToggle}
+                    />
+                )}
+                <MainDrawer variant="permanent"
+                    PaperProps={{ style: { width: drawerWidth } }}
+                    sx={{ display: { md: 'block', sm: 'none', xs: 'none' } }} />
+            </Box>
+            <Box sx={mainStyles}>
+                <MainAppBar onDrawerToggle={handleDrawerToggle} />
+                <Box sx={containerStyles}>
+                    <Outlet />
+                </Box>
+            </Box>
+        </Box>
+    );
+}
+export default MainLayout;

front/src/pages/pagesData.tsx ADDED Viewed

	@@ -0,0 +1,42 @@

+import { routerType } from "../types/router.types";
+import About from "./About/About";
+import Inferrence from "./Inferrence/Inferrence";
+import Home from "./Home/Home";
+import Express from "./Express/Express";
+import Results from "./Inferrence/Results/Results";
+import CustomizeVST from "./Inferrence/CustomizeVST/CustomizeVST";
+const pagesData: routerType[] = [
+    {
+        path: "Home",
+        element: <Home />,
+        title: "Home",
+    },
+    {
+        path: "Inferrence",
+        element: <Inferrence/>,
+        title: "Inferrence"
+    },
+    {
+        path: "About",
+        element: <About />,
+        title: "about"
+    },
+    {
+        path: "Express",
+        element: <Express />,
+        title: "Express"
+    },
+    {
+        path: "CustomizeVST",
+        element: <CustomizeVST />,
+        title: "CustomizeVST"
+    },
+    {
+        path: "Results",
+        element: <Results/>,
+        title: "Results"
+    },
+];
+export default pagesData;

front/src/pages/router.tsx ADDED Viewed

	@@ -0,0 +1,21 @@

+import { Navigate, Route, Routes } from "react-router-dom";
+import { routerType } from "../types/router.types";
+import pagesData from "./pagesData";
+import MainLayout from "./Layout/MainLayout";
+const Router = () => {
+    const pageRoutes = pagesData.map(({ path, title, element }: routerType) => {
+        return <Route key={title} path={`/${path}`} element={element} />;
+    });
+    return (
+        <Routes>
+            <Route element={<MainLayout />} path="/">
+                <Route index element={<Navigate to="/Home" replace />} />
+                {pageRoutes}
+            </Route>
+        </Routes>
+    );
+};
+export default Router;

front/src/requests/download.tsx ADDED Viewed

	@@ -0,0 +1,49 @@

+import React, { useState } from 'react';
+import axios from 'axios';
+const AudioDownloader = () => {
+  const [downloadUrl, setDownloadUrl] = useState<string | null>(null);
+    const fileId = localStorage.getItem('uploadId');
+    console.log('Retrieved Upload ID:', fileId);
+  const handleDownload = async () => {
+    try {
+      const response = await axios.get(`http://localhost:7860/download/${fileId}`);
+      // Assuming the response.data contains the URL
+      const url = response.data.url;
+      const server = 'http://localhost:7860'
+      // Set the download URL in the state
+      setDownloadUrl(`${server}/${url}`);
+    } catch (error) {
+      console.error('Error fetching download URL:', error);
+    }
+  };
+  const handleClear = () => {
+    // Clear the download URL from the state
+    setDownloadUrl(null);
+  };
+  return (
+    <div>
+      <button onClick={handleDownload}>Download Audio</button>
+      {downloadUrl && (
+        <div>
+          <a href={downloadUrl} download={`downloadUrl`}>
+            Download Link
+          </a>
+          <button onClick={handleClear}>Clear Download Link</button>
+        </div>
+      )}
+    </div>
+  );
+};
+export default AudioDownloader;

front/src/requests/upload.tsx ADDED Viewed

	@@ -0,0 +1,255 @@

+import React, {
+  ChangeEvent,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import axios from "axios";
+import { useNavigate } from "react-router-dom";
+import { Delete, UploadFile } from "@mui/icons-material";
+import {
+  Card,
+  Box,
+  CardContent,
+  Typography,
+  CardActions,
+  Button,
+} from "@mui/material";
+import { ThemeSchemeContext, ThemeModeContext } from "../theme";
+const AudioUploader = ({ ...props }) => {
+  const { themeScheme } = useContext(ThemeSchemeContext);
+  const { themeMode } = useContext(ThemeModeContext);
+  const light = themeScheme[themeMode];
+  const navigate = useNavigate();
+  const [isVisible, setIsVisible] = useState(false);
+  const [NextCard, setNextCard] = useState(false);
+  const [isError, setIsError] = useState(false);
+  const [audioFile, setAudioFile] = useState<File | null>(null);
+  const [uploadStatus, setUploadStatus] = useState("");
+  const inputFile = useRef<HTMLInputElement | null>(null);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const onDragEnter = useCallback(
+    (e: { stopPropagation: () => void; preventDefault: () => void }) => {
+      setIsVisible(true);
+      e.stopPropagation();
+      e.preventDefault();
+      return false;
+    },
+    []
+  );
+  const onDragOver = useCallback(
+    (e: { preventDefault: () => void; stopPropagation: () => void }) => {
+      e.preventDefault();
+      e.stopPropagation();
+      return false;
+    },
+    []
+  );
+  const onDragLeave = useCallback(
+    (e: { stopPropagation: () => void; preventDefault: () => void }) => {
+      setIsVisible(false);
+      e.stopPropagation();
+      e.preventDefault();
+      return false;
+    },
+    []
+  );
+  const onDrop = useCallback(
+    (e: { preventDefault: () => void; dataTransfer: any }) => {
+      e.preventDefault();
+      setAudioFile(e.dataTransfer.files[0]);
+      console.log("Files dropped: ", audioFile!.name);
+      setNextCard(true);
+      setIsVisible(false);
+      return false;
+    },
+    []
+  );
+  useEffect(() => {
+    window.addEventListener("mouseup", onDragLeave);
+    window.addEventListener("dragenter", onDragEnter);
+    window.addEventListener("dragover", onDragOver);
+    window.addEventListener("drop", onDrop);
+    return () => {
+      window.removeEventListener("mouseup", onDragLeave);
+      window.removeEventListener("dragenter", onDragEnter);
+      window.removeEventListener("dragover", onDragOver);
+      window.removeEventListener("drop", onDrop);
+    };
+  }, [onDragEnter, onDragLeave, onDragOver, onDrop]);
+  const handleFileChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (file) {
+      setAudioFile(file);
+      setNextCard(true);
+    }
+  };
+  const onButtonClick = () => {
+    // `current` points to the mounted file input element
+    inputFile?.current?.click();
+  };
+  const handleUpload = async () => {
+    if (audioFile) {
+      try {
+        const form = new FormData();
+        if (audioFile) {
+          const blob = new Blob([audioFile], {
+            type: "application/octet-stream",
+          });
+          const audio_file = new File([blob], audioFile.name, {
+            type: blob.type,
+          });
+          form.append("file", audio_file);
+        }
+        const response = await axios.post(
+          "http://localhost:7860/upload/",
+          form,
+          {
+            headers: { Accept: "multipart/form-data" },
+            responseType: "blob",
+          }
+        );
+        setUploadStatus("Upload successful. Waiting for generation...");
+        console.log("Upload successful:", response);
+        // Extract JSON from the blob
+        const blobText = await response.data.text();
+        const jsonFromBlob = JSON.parse(blobText);
+        // Assuming the 'id' property is part of the JSON
+        const file_path = jsonFromBlob.file_path;
+        const csv_file_path = jsonFromBlob.csv_path;
+        const output_file_path = jsonFromBlob.output_file_path;
+        // Store the ID in localStorage
+        localStorage.setItem("file_path", file_path);
+        // Store the ID in localStorage
+        localStorage.setItem("csv_file_path", csv_file_path);
+        // Store the ID in localStorage
+        localStorage.setItem("output_file_path", output_file_path);
+        // Start uploading
+        navigate("/Results");
+        // setUploadStatus('Generation complete!');
+      } catch (error) {
+        console.error("Error:", error);
+        props.handleClose();
+        setIsError(true);
+        setNextCard(false);
+        setUploadStatus(`Error: ${error}`);
+      }
+    }
+  };
+  return (
+    <>
+      <Box sx={{ display: "grid", gap: "1vh" }}>
+        <PaletteSwatch
+          title={uploadStatus}
+          titleColor={light.errorContainer}
+          onTitle={uploadStatus}
+          onTitleColor={light.onErrorContainer}
+          visible={isError}
+        />
+        <Card variant={isVisible ? "outlined" : "filled"}>
+          <Box sx={{ display: NextCard ? "none" : "inherit" }}>
+            <CardContent sx={{ display: "grid", justifyItems: "center" }}>
+              <Typography gutterBottom variant="h5" sx={{ pb: 3 }}>
+                {isVisible
+                  ? "Drop here to upload"
+                  : "Drag a file to start inferrence"}
+              </Typography>
+              <UploadFile sx={{ fontSize: "35px", color: "inherit" }} />
+            </CardContent>
+            <CardActions sx={{ display: "flex", justifyContent: "flex-end" }}>
+              <input
+                type="file"
+                accept="audio/*"
+                ref={inputFile}
+                style={{ display: "none" }}
+                onChange={handleFileChange}
+              />
+              <Button
+                variant="filled"
+                size="small"
+                onClick={() => onButtonClick()}
+              >
+                Upload
+              </Button>
+            </CardActions>
+          </Box>
+          <Box sx={{ display: NextCard ? "inherit" : "none" }}>
+            <CardContent
+              sx={{
+                display: "flex",
+                justifyItems: "center",
+                flexDirection: "column",
+                alignItems: "flex-end",
+                gap: "1vh",
+              }}
+            >
+              <Box sx={{ mr: "1" }}>
+                <Button
+                  variant="outlined"
+                  size="small"
+                  onClick={() => {
+                    setNextCard(false);
+                    setIsVisible(false);
+                  }}
+                >
+                  <Delete />
+                </Button>
+              </Box>
+              <Typography fontFamily={"monospace"} fontSize={"15pt"}>
+                {audioFile?.name}
+              </Typography>
+            </CardContent>
+            <CardActions sx={{ display: "flex", justifyContent: "center" }}>
+              <Button
+                variant="filled"
+                size="medium"
+                onClick={() => handleUpload()}
+              >
+                Confirm
+              </Button>
+            </CardActions>
+          </Box>
+        </Card>
+      </Box>
+    </>
+  );
+};
+export default AudioUploader;
+const PaletteSwatch = ({ onTitle, titleColor, onTitleColor, visible }: any) => {
+  return (
+    <Box
+      sx={{
+        p: 1.5,
+        borderRadius: "10px",
+        bgcolor: onTitleColor,
+        color: titleColor,
+        visibility: visible ? "visible" : "collapse",
+      }}
+    >
+      <Typography fontSize={12} fontWeight={"bold"}>
+        {onTitle}
+      </Typography>
+    </Box>
+  );
+};

front/src/theme/M3/M3.tsx ADDED Viewed

	@@ -0,0 +1,25 @@

+import ThemeModeProvider from "./providers/ThemeModeProvider";
+import ThemeSchemeProvider from "./providers/ThemeSchemeProvider";
+import M3Theme from "./wrapper/M3Theme";
+interface M3Props {
+    children?: React.ReactNode;
+};
+const M3 = ({ children }: M3Props) => {
+    return (
+        // ThemeModeProvider -> ThemeSchemeProvider
+        <ThemeModeProvider>
+            <ThemeSchemeProvider>
+                <M3Theme>
+                    {children}
+                </M3Theme>
+            </ThemeSchemeProvider>
+        </ThemeModeProvider >
+    );
+}
+export default M3;

front/src/theme/M3/components/Accordion.ts ADDED Viewed

	@@ -0,0 +1,41 @@

+import {
+    Theme,
+    ComponentsProps, ComponentsOverrides, ComponentsVariants
+} from '@mui/material';
+interface M3Accordion {
+    MuiAccordion: {
+        defaultProps?: ComponentsProps['MuiAccordion'];
+        styleOverrides?: ComponentsOverrides<Theme>['MuiAccordion'];
+        variants?: ComponentsVariants['MuiAccordion'];
+    }
+}
+export const getAccordion = (theme: Theme): M3Accordion => {
+    const { palette } = theme;
+    return {
+        MuiAccordion: {
+            styleOverrides: {
+                root: {
+                    boxShadow: theme.shadows[1],
+                    border: `0px solid ${palette.outlineVariant.main}`,
+                    color: palette.onBackground.main,
+                    backgroundColor: palette.surfaceBright.main,
+                    '&:before': {
+                        backgroundColor: palette.surfaceBright.main,
+                        display: 'none'
+                    },
+                    '&.Mui-disabled': {
+                        backgroundColor: palette.inverseOnSurface.main,
+                        color: palette.inverseSurface.main,
+                        border: `0px solid ${palette.outlineVariant.main}`,
+                    },
+                    '& .MuiAccordionSummary-root > .MuiAccordionSummary-expandIconWrapper ': {
+                        color: palette.onBackground.main,
+                    }
+                }
+            }
+        }
+    };
+}

front/src/theme/M3/components/Alert.ts ADDED Viewed

	@@ -0,0 +1,71 @@

+import { Theme, ComponentsProps, ComponentsOverrides, ComponentsVariants } from "@mui/material";
+interface M3Alert {
+    MuiAlert: {
+        defaultProps?: ComponentsProps['MuiAlert'];
+        styleOverrides?: ComponentsOverrides<Theme>['MuiAlert'];
+        variants?: ComponentsVariants['MuiAlert'];
+    }
+};
+export const getAlert = (theme: Theme): M3Alert => {
+    const { palette } = theme;
+    return {
+        MuiAlert: {
+            defaultProps: {
+                variant: 'standard'
+            },
+            styleOverrides: {
+                root: {
+                    borderRadius: '20px'
+                },
+                standardError: {
+                    background: palette.errorContainer.main,
+                    color: palette.onErrorContainer.main
+                },
+                standardInfo: {
+                    background: palette.infoContainer.main,
+                    color: palette.infoContainer.contrastText
+                },
+                standardWarning: {
+                    background: palette.warningContainer.main,
+                    color: palette.onWarningContainer.main
+                },
+                standardSuccess: {
+                    background: palette.successContainer.main,
+                    color: palette.onSuccessContainer.main
+                },
+                filledError: {
+                    background: palette.error.main,
+                    color: palette.onError.main
+                },
+                filledInfo: {
+                    background: palette.info.main,
+                    color: palette.onInfo.main
+                },
+                filledWarning: {
+                    background: palette.warning.main,
+                    color: palette.onWarning.main
+                },
+                filledSuccess: {
+                    background: palette.success.main,
+                    color: palette.onSuccess.main
+                },
+                outlinedError: {
+                    color: palette.error.main
+                },
+                outlinedInfo: {
+                    color: palette.info.main
+                },
+                outlinedWarning: {
+                    color: palette.warning.main
+                },
+                outlinedSuccess: {
+                    color: palette.success.main
+                },
+            }
+        }
+    }
+}

front/src/theme/M3/components/AppBar.ts ADDED Viewed

	@@ -0,0 +1,35 @@

+import {
+    Theme,
+    ComponentsProps, ComponentsOverrides, ComponentsVariants
+} from '@mui/material';
+interface M3AppBar {
+    MuiAppBar: {
+        defaultProps?: ComponentsProps['MuiAppBar'];
+        styleOverrides?: ComponentsOverrides<Theme>['MuiAppBar'];
+        variants?: ComponentsVariants['MuiAppBar'];
+    }
+}
+export const getAppBar = (theme: Theme): M3AppBar => {
+    const { palette } = theme;
+    return {
+        MuiAppBar: {
+            defaultProps: {
+                elevation: 0,
+                color: 'default'
+            },
+            styleOverrides: {
+                colorDefault: {
+                    background: palette.surfaceContainer.main,
+                    color: palette.onSurface.main
+                },
+                colorPrimary: {
+                    background: palette.surface.main,
+                    color: palette.onSurface.main
+                }
+            }
+        }
+    };
+}

front/src/theme/M3/components/Badge.ts ADDED Viewed

	@@ -0,0 +1,39 @@

+import {
+    Theme,
+    ComponentsProps, ComponentsOverrides, ComponentsVariants
+} from '@mui/material';
+declare module '@mui/material/Badge' {
+    interface BadgePropsColorOverrides {
+        tertiary: true;
+    }
+}
+interface M3Badge {
+    MuiBadge: {
+        defaultProps?: ComponentsProps['MuiBadge'];
+        styleOverrides?: ComponentsOverrides<Theme>['MuiBadge'];
+        variants?: ComponentsVariants['MuiBadge'];
+    }
+}
+export const getBadge = (theme: Theme): M3Badge => {
+    const { palette } = theme;
+    return {
+        MuiBadge: {
+            defaultProps: { color: 'default' },
+            variants: [
+                {
+                    props: { color: 'default' },
+                    style: {
+                        '.MuiBadge-badge': {
+                            backgroundColor: palette.error.main,
+                            color: palette.onError.main
+                        }
+                    }
+                }
+            ]
+        }
+    };
+}

front/src/theme/M3/components/Button.ts ADDED Viewed

	@@ -0,0 +1,171 @@

+import {
+    Theme,
+    ComponentsProps, ComponentsOverrides, ComponentsVariants, alpha
+} from '@mui/material';
+import { StateLayer, getStateLayerColor } from '../..';
+declare module '@mui/material/Button' {
+    interface ButtonPropsVariantOverrides {
+        elevated: true;
+        filled: true;
+        tonal: true;
+        outlined: true;
+        text: true;
+        contained: false;
+    }
+    interface ButtonPropsColorOverrides {
+        tertiary: true;
+        surface: true;
+    }
+}
+interface M3Button {
+    MuiButton: {
+        defaultProps?: ComponentsProps['MuiButton'];
+        styleOverrides?: ComponentsOverrides<Theme>['MuiButton'];
+        variants?: ComponentsVariants['MuiButton'];
+    }
+}
+export const getButton = (theme: Theme): M3Button => {
+    const { palette } = theme;
+    return {
+        MuiButton: {
+            styleOverrides: {
+                root: {
+                    borderRadius: '30px',
+                    textTransform: 'none',
+                    fontWeight: 'bold',
+                    '&:has(>svg)': {
+                        padding: '8px',
+                        borderRadius: '50%',
+                        minWidth: '1em',
+                        minHeight: '1em'
+                    }
+                }
+            },
+            variants: [
+                {
+                    props: { variant: 'elevated' },
+                    style: {
+                        boxShadow: theme.shadows[1],
+                        backgroundColor: palette.surfaceContainerLow.main,
+                        color: palette.primary.main,
+                        '&:hover': {
+                            background: getStateLayerColor(StateLayer.Hover, palette.surfaceContainerLow.main, palette.primary.main),
+                            boxShadow: theme.shadows[2]
+                        },
+                        '&:focus': {
+                            background: getStateLayerColor(StateLayer.Focus, palette.surfaceContainerLow.main, palette.primary.main)
+                        },
+                        '&:active': {
+                            background: getStateLayerColor(StateLayer.Press, palette.surfaceContainerLow.main, palette.primary.main)
+                        },
+                        '&.Mui-disabled': {
+                            backgroundColor: alpha(palette.onSurface.main, 0.12),
+                            color: alpha(palette.onSurface.main, 0.38),
+                            boxShadow: theme.shadows[0]
+                        },
+                    }
+                },
+                {
+                    props: { variant: 'filled' },
+                    style: {
+                        backgroundColor: palette.primary.main,
+                        color: palette.onPrimary.main,
+                        boxShadow: theme.shadows[0],
+                        '&.Mui-disabled': {
+                            backgroundColor: alpha(palette.onSurface.main, 0.12),
+                            color: alpha(palette.onSurface.main, 0.38),
+                            boxShadow: theme.shadows[0]
+                        },
+                        '&:hover': {
+                            backgroundColor: getStateLayerColor(StateLayer.Hover, palette.primary.main, palette.onPrimary.main),
+                            boxShadow: theme.shadows[1],
+                        },
+                        '&:focus': {
+                            backgroundColor: getStateLayerColor(StateLayer.Focus, palette.primary.main, palette.onPrimary.main),
+                            boxShadow: theme.shadows[0],
+                        },
+                        '&:active': {
+                            backgroundColor: getStateLayerColor(StateLayer.Press, palette.primary.main, palette.onPrimary.main),
+                            boxShadow: theme.shadows[0],
+                        }
+                    }
+                },
+                {
+                    props: { variant: 'tonal' },
+                    style: {
+                        backgroundColor: palette.secondaryContainer.main,
+                        color: palette.onSecondaryContainer.main,
+                        boxShadow: theme.shadows[0],
+                        '&.Mui-disabled': {
+                            backgroundColor: alpha(palette.onSurface.main, 0.12),
+                            color: alpha(palette.onSurface.main, 0.38),
+                            boxShadow: theme.shadows[0]
+                        },
+                        '&:hover': {
+                            backgroundColor: getStateLayerColor(StateLayer.Hover, palette.secondaryContainer.main, palette.onSecondaryContainer.main),
+                            boxShadow: theme.shadows[1],
+                        },
+                        '&:focus': {
+                            backgroundColor: getStateLayerColor(StateLayer.Focus, palette.secondaryContainer.main, palette.onSecondaryContainer.main),
+                            boxShadow: theme.shadows[0],
+                        },
+                        '&:active': {
+                            backgroundColor: getStateLayerColor(StateLayer.Press, palette.secondaryContainer.main, palette.onSecondaryContainer.main),
+                            boxShadow: theme.shadows[0],
+                        }
+                    }
+                },
+                {
+                    props: { variant: 'outlined' },
+                    style: {
+                        //backgroundColor: palette.surface.main,
+                        color: palette.primary.main,
+                        borderColor: palette.outline.main,
+                        borderWidth: '1px',
+                        boxShadow: theme.shadows[0],
+                        '&.Mui-disabled': {
+                            borderColor: alpha(palette.onSurface.main, 0.12),
+                            color: alpha(palette.onSurface.main, 0.38),
+                        },
+                        '&:hover': {
+                            backgroundColor: getStateLayerColor(StateLayer.Hover, palette.surface.main, palette.primary.main),
+                            borderColor: getStateLayerColor(StateLayer.Hover, palette.outline.main, palette.primary.main),
+                        },
+                        '&:focus': {
+                            backgroundColor: getStateLayerColor(StateLayer.Focus, palette.surface.main, palette.primary.main),
+                            borderColor: getStateLayerColor(StateLayer.Focus, palette.primary.main, palette.primary.main),
+                        },
+                        '&:active': {
+                            backgroundColor: getStateLayerColor(StateLayer.Press, palette.surface.main, palette.primary.main),
+                            borderColor: getStateLayerColor(StateLayer.Press, palette.outline.main, palette.primary.main),
+                        }
+                    }
+                },
+                {
+                    props: { variant: 'text' },
+                    style: {
+                        backgroundColor: 'transparent',
+                        color: palette.primary.main,
+                        boxShadow: theme.shadows[0],
+                        padding: '5px 15px',
+                        '&.Mui-disabled': {
+                            color: alpha(palette.onSurface.main, 0.38),
+                        },
+                        '&:hover': {
+                            backgroundColor: getStateLayerColor(StateLayer.Hover, palette.surface.main, palette.primary.main),
+                        },
+                        '&:focus': {
+                            backgroundColor: getStateLayerColor(StateLayer.Focus, palette.surface.main, palette.primary.main),
+                        },
+                        '&:active': {
+                            backgroundColor: getStateLayerColor(StateLayer.Press, palette.surface.main, palette.primary.main),
+                        },
+                    }
+                }
+            ]
+        }
+    };
+}

front/src/theme/M3/components/Card.ts ADDED Viewed

	@@ -0,0 +1,127 @@

+import {
+    Theme,
+    ComponentsProps, ComponentsOverrides, ComponentsVariants
+} from '@mui/material';
+import { StateLayer, getStateLayerColor } from '../..';
+import { alpha } from '@mui/material';
+declare module '@mui/material/Paper' {
+    interface PaperPropsVariantOverrides {
+        filled: true;
+    }
+}
+interface M3Card {
+    MuiCard: {
+        defaultProps?: ComponentsProps['MuiCard'];
+        styleOverrides?: ComponentsOverrides<Theme>['MuiCard'];
+        variants?: ComponentsVariants['MuiCard'];
+    }
+}
+export const getCard = (theme: Theme): M3Card => {
+    const { palette } = theme;
+    return {
+        MuiCard: {
+            styleOverrides: {
+                root: {
+                    borderRadius: '20px',
+                    padding: '10px 6px'
+                }
+            },
+            variants: [
+                {
+                    props: { variant: 'elevation' },
+                    style: {
+                        boxShadow: theme.shadows[1],
+                        backgroundColor: palette.surfaceContainerLow.main,
+                        transition: theme.transitions.create(
+                            ['background-color', 'box-shadow', 'border-color', 'color'],
+                            {
+                                duration: theme.transitions.duration.short,
+                            },
+                        ),
+                        '&:hover': {
+                            background: getStateLayerColor(StateLayer.Hover, palette.surfaceContainerLow.main, palette.primary.main),
+                            boxShadow: theme.shadows[2]
+                        },
+                        '&:focus': {
+                            boxShadow: theme.shadows[1],
+                            background: getStateLayerColor(StateLayer.Focus, palette.surfaceContainerLow.main, palette.primary.main)
+                        },
+                        '&:active': {
+                            boxShadow: theme.shadows[1],
+                            background: getStateLayerColor(StateLayer.Press, palette.surfaceContainerLow.main, palette.primary.main)
+                        },
+                        '&.Mui-disabled': {
+                            backgroundColor: alpha(palette.surfaceContainerLow.main, 0.38),
+                            color: palette.surfaceVariant.main,
+                            boxShadow: theme.shadows[0]
+                        },
+                    }
+                },
+                {
+                    props: { variant: 'filled' },
+                    style: {
+                        boxShadow: theme.shadows[0],
+                        backgroundColor: palette.surfaceContainerHighest.main,
+                        transition: theme.transitions.create(
+                            ['background-color', 'box-shadow', 'border-color', 'color'],
+                            {
+                                duration: theme.transitions.duration.short,
+                            },
+                        ),
+                        '&:hover': {
+                            background: getStateLayerColor(StateLayer.Hover, palette.surfaceContainerHighest.main, palette.primary.main),
+                            boxShadow: theme.shadows[1]
+                        },
+                        '&:focus': {
+                            boxShadow: theme.shadows[0],
+                            background: getStateLayerColor(StateLayer.Focus, palette.surfaceContainerHighest.main, palette.primary.main)
+                        },
+                        '&:active': {
+                            boxShadow: theme.shadows[1],
+                            background: getStateLayerColor(StateLayer.Press, palette.surfaceContainerHighest.main, palette.primary.main)
+                        },
+                        '&.Mui-disabled': {
+                            backgroundColor: alpha(palette.surfaceContainerHighest.main, 0.38),
+                            color: palette.surfaceVariant.main,
+                            boxShadow: theme.shadows[1]
+                        },
+                    }
+                },
+                {
+                    props: { variant: 'outlined' },
+                    style: {
+                        boxShadow: theme.shadows[0],
+                        backgroundColor: palette.surface.main,
+                        borderColor: palette.outline.main,
+                        transition: theme.transitions.create(
+                            ['background-color', 'box-shadow', 'border-color', 'color'],
+                            {
+                                duration: theme.transitions.duration.short,
+                            },
+                        ),
+                        '&:hover': {
+                            background: getStateLayerColor(StateLayer.Hover, palette.surface.main, palette.primary.main),
+                            boxShadow: theme.shadows[1]
+                        },
+                        '&:focus': {
+                            boxShadow: theme.shadows[0],
+                            background: getStateLayerColor(StateLayer.Focus, palette.surface.main, palette.primary.main)
+                        },
+                        '&:active': {
+                            boxShadow: theme.shadows[2],
+                            background: getStateLayerColor(StateLayer.Press, palette.surfaceContainerHighest.main, palette.primary.main)
+                        },
+                        '&.Mui-disabled': {
+                            borderColor: alpha(palette.surfaceContainerHighest.main, 0.12),
+                            boxShadow: theme.shadows[0]
+                        },
+                    }
+                }
+            ]
+        }
+    };
+}

front/src/theme/M3/components/CssBaseline.ts ADDED Viewed

	@@ -0,0 +1,25 @@

+import { Theme, ComponentsProps, ComponentsOverrides, ComponentsVariants } from "@mui/material";
+interface M3CssBaseline {
+    MuiCssBaseline: {
+        defaultProps?: ComponentsProps['MuiCssBaseline'];
+        styleOverrides?: ComponentsOverrides<Theme>['MuiCssBaseline'];
+        variants?: ComponentsVariants['MuiCssBaseline'];
+    }
+};
+export const getCssBaseline = (_theme: Theme): M3CssBaseline => {
+    return {
+        MuiCssBaseline: {
+            defaultProps: {
+                enableColorScheme: true,
+            },
+            styleOverrides: {
+                '*::-webkit-scrollbar': {
+                    'display': 'none'
+                }
+            }
+        }
+    }
+}

front/src/theme/M3/components/Drawer.ts ADDED Viewed

	@@ -0,0 +1,24 @@

+import { Theme, ComponentsProps, ComponentsOverrides, ComponentsVariants } from "@mui/material";
+interface M3Drawer {
+    MuiDrawer: {
+        defaultProps?: ComponentsProps['MuiDrawer'];
+        styleOverrides?: ComponentsOverrides<Theme>['MuiDrawer'];
+        variants?: ComponentsVariants['MuiDrawer'];
+    }
+};
+export const getDrawer = (theme: Theme): M3Drawer => {
+    const { palette } = theme;
+    return {
+        MuiDrawer: {
+            styleOverrides: {
+                paper: {
+                    border: '0px',
+                    background: palette.surfaceContainer.main,
+                    color: palette.onSurfaceVariant.main
+                }
+            }
+        },
+    }
+}

front/src/theme/M3/components/Fab.ts ADDED Viewed

	@@ -0,0 +1,126 @@

+import { Theme, ComponentsProps, ComponentsOverrides, ComponentsVariants } from "@mui/material";
+import { StateLayer, getStateLayerColor } from "../..";
+interface M3Fab {
+    MuiFab: {
+        defaultProps?: ComponentsProps['MuiFab'];
+        styleOverrides?: ComponentsOverrides<Theme>['MuiFab'];
+        variants?: ComponentsVariants['MuiFab'];
+    }
+};
+declare module '@mui/material/Fab' {
+    interface FabPropsColorOverrides {
+        primary: true,
+        surface: true,
+        secondary: true,
+        tertiary: true,
+        success: false,
+        info: false,
+        warning: false,
+        error: false,
+        default: false,
+        inherit: false
+    }
+}
+export const getFab = (theme: Theme): M3Fab => {
+    const { palette } = theme;
+    return {
+        MuiFab: {
+            defaultProps: { color: 'secondary' },
+            styleOverrides: {
+                root: {
+                    boxShadow: theme.shadows[3],
+                    borderRadius: '18px'
+                }
+            },
+            variants: [
+                {
+                    props: { color: 'primary' },
+                    style:
+                    {
+                        backgroundColor: palette.primaryContainer.main,
+                        color: palette.onPrimaryContainer.main,
+                        '&:hover': {
+                            background: getStateLayerColor(StateLayer.Hover, palette.primaryContainer.main, palette.onPrimaryContainer.main),
+                            boxShadow: theme.shadows[4]
+                        },
+                        '&:focus': {
+                            background: getStateLayerColor(StateLayer.Focus, palette.primaryContainer.main, palette.onPrimaryContainer.main),
+                            boxShadow: theme.shadows[3]
+                        },
+                        '&:active': {
+                            background: getStateLayerColor(StateLayer.Press, palette.primaryContainer.main, palette.onPrimaryContainer.main),
+                            boxShadow: theme.shadows[3]
+                        },
+                    }
+                },
+                {
+                    props: { color: 'secondary' },
+                    style:
+                    {
+                        backgroundColor: palette.secondaryContainer.main,
+                        color: palette.onSecondaryContainer.main,
+                        '&:hover': {
+                            background: getStateLayerColor(StateLayer.Hover, palette.secondaryContainer.main, palette.onSecondaryContainer.main),
+                            boxShadow: theme.shadows[4]
+                        },
+                        '&:focus': {
+                            background: getStateLayerColor(StateLayer.Focus, palette.secondaryContainer.main, palette.onSecondaryContainer.main),
+                            boxShadow: theme.shadows[3]
+                        },
+                        '&:active': {
+                            background: getStateLayerColor(StateLayer.Press, palette.secondaryContainer.main, palette.onSecondaryContainer.main),
+                            boxShadow: theme.shadows[3]
+                        },
+                    }
+                },
+                {
+                    props: { color: 'surface' },
+                    style:
+                    {
+                        backgroundColor: palette.surfaceContainer.main,
+                        color: palette.primary.main,
+                        '&:hover': {
+                            background: getStateLayerColor(StateLayer.Hover, palette.surfaceContainer.main, palette.primary.main),
+                            boxShadow: theme.shadows[4]
+                        },
+                        '&:focus': {
+                            background: getStateLayerColor(StateLayer.Focus, palette.surfaceContainer.main, palette.primary.main),
+                            boxShadow: theme.shadows[3]
+                        },
+                        '&:active': {
+                            background: getStateLayerColor(StateLayer.Press, palette.surfaceContainer.main, palette.primary.main),
+                            boxShadow: theme.shadows[3]
+                        },
+                    }
+                },
+                {
+                    props: { color: 'tertiary' },
+                    style: {
+                        backgroundColor: palette.tertiaryContainer.main,
+                        color: palette.onTertiaryContainer.main,
+                        '&:hover': {
+                            background: getStateLayerColor(StateLayer.Hover, palette.tertiaryContainer.main, palette.onTertiaryContainer.main),
+                            boxShadow: theme.shadows[4]
+                        },
+                        '&:focus': {
+                            background: getStateLayerColor(StateLayer.Focus, palette.tertiaryContainer.main, palette.onTertiaryContainer.main),
+                            boxShadow: theme.shadows[3]
+                        },
+                        '&:active': {
+                            background: getStateLayerColor(StateLayer.Press, palette.tertiaryContainer.main, palette.onTertiaryContainer.main),
+                            boxShadow: theme.shadows[3]
+                        },
+                    }
+                }
+            ]
+        }
+    }
+}

front/src/theme/M3/components/ListItem.ts ADDED Viewed

	@@ -0,0 +1,27 @@

+import { Theme, ComponentsProps, ComponentsOverrides, ComponentsVariants } from "@mui/material";
+interface M3ListItem {
+    MuiListItem: {
+        defaultProps?: ComponentsProps['MuiListItem'];
+        styleOverrides?: ComponentsOverrides<Theme>['MuiListItem'];
+        variants?: ComponentsVariants['MuiListItem'];
+    }
+};
+export const getListItem = (_theme: Theme): M3ListItem => {
+    //const { palette } = theme;
+    return {
+        MuiListItem: {
+            styleOverrides: {
+                root: {
+                    paddingTop: 1,
+                    paddingBottom: 1,
+                    '& .MuiListItemButton-root': {
+                        paddingTop: 8,
+                        paddingBottom: 8
+                    }
+                }
+            }
+        }
+    }
+}

front/src/theme/M3/components/ListItemButton.ts ADDED Viewed

	@@ -0,0 +1,55 @@

+import { Theme, ComponentsProps, ComponentsOverrides, ComponentsVariants } from "@mui/material";
+import { StateLayer, getStateLayerColor } from "../..";
+interface M3ListItemButton {
+    MuiListItemButton: {
+        defaultProps?: ComponentsProps['MuiListItemButton'];
+        styleOverrides?: ComponentsOverrides<Theme>['MuiListItemButton'];
+        variants?: ComponentsVariants['MuiListItemButton'];
+    }
+};
+export const getListItemButton = (theme: Theme): M3ListItemButton => {
+    const { palette } = theme;
+    return {
+        MuiListItemButton: {
+            styleOverrides: {
+                root: {
+                    borderRadius: 50,
+                    color: palette.onSurfaceVariant.main,
+                    '&:hover': {
+                        backgroundColor: getStateLayerColor(StateLayer.Hover, palette.surfaceContainerLow.main, palette.onSurface.main),
+                        color: getStateLayerColor(StateLayer.Hover, palette.onSurfaceVariant.main, palette.onSurface.main)
+                    },
+                    /*'&:focus': {
+                        backgroundColor: getStateLayerColor(StateLayer.Focus, palette.surfaceContainerLow.main, palette.onSurface.main),
+                        color: getStateLayerColor(StateLayer.Focus, palette.onSurfaceVariant.main, palette.onSurface.main)
+                    },*/
+                    '&:active': {
+                        backgroundColor: getStateLayerColor(StateLayer.Press, palette.surfaceContainerLow.main, palette.onSecondaryContainer.main),
+                        color: getStateLayerColor(StateLayer.Press, palette.onSurfaceVariant.main, palette.onSurface.main)
+                    },
+                    '&.Mui-selected': {
+                        color: palette.onSecondaryContainer.main,
+                        background: palette.secondaryContainer.main,
+                        '& > .MuiListItemText-root > .MuiTypography-root': {
+                            fontWeight: 'bold'
+                        },
+                        '&:hover': {
+                            backgroundColor: getStateLayerColor(StateLayer.Hover, palette.secondaryContainer.main, palette.onSecondaryContainer.main),
+                            color: getStateLayerColor(StateLayer.Hover, palette.onSecondaryContainer.main, palette.secondaryContainer.main)
+                        },
+                        /*'&:focus': {
+                            backgroundColor: getStateLayerColor(StateLayer.Focus, palette.secondaryContainer.main, palette.onSecondaryContainer.main),
+                            color: getStateLayerColor(StateLayer.Focus, palette.onSecondaryContainer.main, palette.secondaryContainer.main)
+                        },*/
+                        '&:active': {
+                            backgroundColor: getStateLayerColor(StateLayer.Press, palette.secondaryContainer.main, palette.onSecondaryContainer.main),
+                            color: getStateLayerColor(StateLayer.Press, palette.onSecondaryContainer.main, palette.secondaryContainer.main)
+                        },
+                    }
+                },
+            }
+        }
+    }
+}

front/src/theme/M3/components/ListItemIcon.ts ADDED Viewed

	@@ -0,0 +1,26 @@

+import { Theme, ComponentsProps, ComponentsOverrides, ComponentsVariants } from "@mui/material";
+interface M3ListItemIcon {
+    MuiListItemIcon: {
+        defaultProps?: ComponentsProps['MuiListItemIcon'];
+        styleOverrides?: ComponentsOverrides<Theme>['MuiListItemIcon'];
+        variants?: ComponentsVariants['MuiListItemIcon'];
+    }
+};
+export const getListItemIcon = (_theme: Theme): M3ListItemIcon => {
+    //const { palette } = theme;
+    return {
+        MuiListItemIcon: {
+            styleOverrides: {
+                root: {
+                    color: 'inherit',
+                    minWidth: 32,
+                    '&.Mui-selected': {
+                        fontWeight: 'bold'
+                    },
+                },
+            }
+        }
+    }
+}

front/src/theme/M3/components/Menu.ts ADDED Viewed

	@@ -0,0 +1,31 @@

+import {
+    Theme,
+    ComponentsProps, ComponentsOverrides, ComponentsVariants
+} from '@mui/material';
+interface M3Menu {
+    MuiMenu: {
+        defaultProps?: ComponentsProps['MuiMenu'];
+        styleOverrides?: ComponentsOverrides<Theme>['MuiMenu'];
+        variants?: ComponentsVariants['MuiMenu'];
+    }
+}
+export const getMenu = (theme: Theme): M3Menu => {
+    const { palette } = theme;
+    return {
+        MuiMenu: {
+            defaultProps: { color: 'default' },
+            styleOverrides: {
+                root: {
+                },
+                paper: {
+                    backgroundColor: palette.surfaceContainerLow.main,
+                    boxShadow: theme.shadows[3],
+                    color: palette.onSurface.main
+                }
+            }
+        }
+    };
+}

front/src/theme/M3/components/Switch.ts ADDED Viewed

	@@ -0,0 +1,83 @@

+import { Theme, ComponentsProps, ComponentsOverrides, ComponentsVariants, alpha } from "@mui/material";
+interface M3Switch {
+    MuiSwitch: {
+        defaultProps?: ComponentsProps['MuiSwitch'];
+        styleOverrides?: ComponentsOverrides<Theme>['MuiSwitch'];
+        variants?: ComponentsVariants['MuiSwitch'];
+    }
+};
+export const getSwitch = (theme: Theme): M3Switch => {
+    const { palette } = theme;
+    return {
+        MuiSwitch: {
+            styleOverrides: {
+                root: {
+                    width: 42,
+                    height: 26,
+                    padding: 0,
+                    marginLeft: 12,
+                    marginRight: 8,
+                    borderColor: palette.outline.main,
+                    '& .MuiSwitch-switchBase': {
+                        padding: 0,
+                        margin: 7,
+                        transitionDuration: '100ms',
+                        '&.Mui-checked': {
+                            transform: 'translateX(16px)',
+                            margin: 4,
+                            '& + .MuiSwitch-track': {
+                                backgroundColor: palette.primary.main,
+                                opacity: 1,
+                                border: 0,
+                            },
+                            '& .MuiSwitch-thumb': {
+                                color: palette.onPrimary.main,
+                                width: 18,
+                                height: 18,
+                            },
+                            '&.Mui-disabled + .MuiSwitch-track': {
+                                backgroundColor: alpha(palette.onSurface.main, 0.1),
+                            },
+                            '&.Mui-disabled .MuiSwitch-thumb': {
+                                color: alpha(palette.surface.main, 0.8),
+                            },
+                        },
+                        '&.Mui-focusVisible .MuiSwitch-thumb': {
+                            color: palette.primary.main,
+                            border: `6px solid ${palette.onPrimary.main}`,
+                        },
+                        '&.Mui-disabled .MuiSwitch-thumb': {
+                            color: alpha(palette.onSurface.main, 0.3),
+                        },
+                    },
+                    '& .MuiSwitch-thumb': {
+                        boxSizing: 'border-box',
+                        color: palette.outline.main,
+                        width: 12,
+                        height: 12,
+                        '&:before': {
+                            content: "''",
+                            position: 'absolute',
+                            width: '100%',
+                            height: '100%',
+                            left: 0,
+                            top: 0,
+                            backgroundRepeat: 'no-repeat',
+                            backgroundPosition: 'center',
+                        },
+                    },
+                    '& .MuiSwitch-track': {
+                        borderRadius: 20,
+                        border: `2px solid ${palette.outline.main}`,
+                        backgroundColor: palette.surfaceContainerHighest.main,
+                        opacity: 1,
+                        transition: 'background .2s'
+                    },
+                },
+            }
+        }
+    }
+}

front/src/theme/M3/components/ToggleButton.ts ADDED Viewed

	@@ -0,0 +1,68 @@

+import {
+    Theme,
+    ComponentsProps, ComponentsOverrides, ComponentsVariants
+} from '@mui/material';
+//import { StateLayer, getStateLayerColor } from '../..';
+interface M3ToggleButton {
+    MuiToggleButton: {
+        defaultProps?: ComponentsProps['MuiToggleButton'];
+        styleOverrides?: ComponentsOverrides<Theme>['MuiToggleButton'];
+        variants?: ComponentsVariants['MuiToggleButton'];
+    }
+}
+export const getToggleButton = (theme: Theme): M3ToggleButton => {
+    const { palette } = theme;
+    return {
+        MuiToggleButton: {
+            styleOverrides: {
+                root: {
+                    borderRadius: '50px',
+                    textTransform: 'none',
+                    color: palette.onSurface.main,
+                    "&.Mui-selected": {
+                        color: palette.onSecondaryContainer.main,
+                        backgroundColor: palette.secondaryContainer.main,
+                    },
+                    '&.MuiToggleButton-primary': {
+                        borderColor: 'transparent'
+                    },
+                    '&.MuiToggleButton-primary.Mui-selected': {
+                        color: palette.onPrimary.main,
+                        backgroundColor: palette.primary.main
+                    },
+                    /*'&.MuiToggleButton-primary.Mui-selected:hover': {
+                        background: getStateLayerColor(StateLayer.Hover, palette.primary.main, palette.onPrimary.main),
+                    },
+                    '&.Mui-selected:not(.MuiToggleButtonGroup-grouped):has(>svg)': {
+                        color: palette.onPrimary.main,
+                        backgroundColor: palette.primary.main
+                    },*/
+                    /*'&:hover': {
+                        background: getStateLayerColor(StateLayer.Hover, palette.surface.main, palette.primary.main),
+                    },
+                    '&.Mui-selected:hover': {
+                        background: getStateLayerColor(StateLayer.Hover, palette.secondaryContainer.main, palette.onSecondaryContainer.main),
+                    },
+                    '&:focus': {
+                        background: getStateLayerColor(StateLayer.Focus, palette.surface.main, palette.onSurface.main),
+                    },
+                    '&.Mui-selected:focus': {
+                        background: getStateLayerColor(StateLayer.Focus, palette.secondaryContainer.main, palette.onSecondaryContainer.main),
+                    },
+                    '&:active': {
+                        background: getStateLayerColor(StateLayer.Press, palette.surface.main, palette.onSurface.main),
+                    },
+                    '&.Mui-selected:active': {
+                        background: getStateLayerColor(StateLayer.Press, palette.secondaryContainer.main, palette.onSecondaryContainer.main),
+                    }*/
+                },
+            },
+        }
+    };
+}

front/src/theme/M3/components/ToggleButtonGroup.ts ADDED Viewed

	@@ -0,0 +1,39 @@

+import {
+    Theme,
+    ComponentsProps, ComponentsOverrides, ComponentsVariants
+} from '@mui/material';
+import { StateLayer, getStateLayerColor } from '../..';
+interface M3ToggleButtonGroup {
+    MuiToggleButtonGroup: {
+        defaultProps?: ComponentsProps['MuiToggleButtonGroup'];
+        styleOverrides?: ComponentsOverrides<Theme>['MuiToggleButtonGroup'];
+        variants?: ComponentsVariants['MuiToggleButtonGroup'];
+    }
+}
+export const getToggleButtonGroup = (theme: Theme): M3ToggleButtonGroup => {
+    const { palette } = theme;
+    return {
+        MuiToggleButtonGroup: {
+            styleOverrides: {
+                grouped: {
+                    borderRadius: '50px',
+                    borderColor: palette.outline.main,
+                    '&:not(:first-of-type)': {
+                        marginLeft: 0,
+                        borderLeft: 0,
+                    },
+                    '&:hover': {
+                        background: getStateLayerColor(StateLayer.Hover, palette.surface.main, palette.primary.main)
+                    },
+                    '&.Mui-selected:hover': {
+                        background: getStateLayerColor(StateLayer.Hover, palette.secondaryContainer.main, palette.onSecondaryContainer.main)
+                    }
+                },
+            }
+        },
+    };
+}

front/src/theme/M3/components/Tooltip.ts ADDED Viewed

	@@ -0,0 +1,23 @@

+import { Theme, ComponentsProps, ComponentsOverrides, ComponentsVariants } from "@mui/material";
+interface M3Tooltip {
+    MuiTooltip: {
+        defaultProps?: ComponentsProps['MuiTooltip'];
+        styleOverrides?: ComponentsOverrides<Theme>['MuiTooltip'];
+        variants?: ComponentsVariants['MuiTooltip'];
+    }
+};
+export const getTooltip = (theme: Theme): M3Tooltip => {
+    const { palette } = theme;
+    return {
+        MuiTooltip: {
+            styleOverrides: {
+                tooltip: {
+                    background: palette.inverseSurface.main,
+                    color: palette.inverseOnSurface.main
+                }
+            }
+        }
+    }
+}

front/src/theme/M3/components/index.ts ADDED Viewed

	@@ -0,0 +1,17 @@

+export * from './CssBaseline';
+export * from './Alert';
+export * from './Accordion'
+export * from './AppBar';
+export * from './Badge';
+export * from './Button';
+export * from './Card';
+export * from './Drawer';
+export * from './Fab';
+export * from './ListItem';
+export * from './ListItemButton';
+export * from './ListItemIcon';
+export * from './Menu';
+export * from './Switch';
+export * from './ToggleButton';
+export * from './ToggleButtonGroup';
+export * from './Tooltip';

front/src/theme/M3/hooks/useThemeMode.ts ADDED Viewed

	@@ -0,0 +1,24 @@

+import { useLayoutEffect, useState } from 'react';
+import { ThemeMode } from '../..';
+export const THEME_MODE_KEY = 'ThemeModeKey';
+export const useThemeMode = () => {
+    const [themeMode, setThemeMode] = useState<ThemeMode>('light');
+    useLayoutEffect(() => {
+        if (localStorage.getItem(THEME_MODE_KEY)) {
+            const localMode = JSON.parse(localStorage.getItem(THEME_MODE_KEY) || '{}');
+            setThemeMode(localMode);
+        }
+    }, []);
+    const toggleTheme = () => {
+        const value = themeMode == 'light' ? 'dark' : 'light';
+        setThemeMode(value);
+        localStorage.setItem(THEME_MODE_KEY, JSON.stringify(value));
+    }
+    return [themeMode, toggleTheme, setThemeMode] as const;
+}

front/src/theme/M3/hooks/useTonalPalette.ts ADDED Viewed

	@@ -0,0 +1,43 @@

+import { argbFromHex, hexFromArgb, themeFromSourceColor } from '@material/material-color-utilities'
+import { TonalPalette, TonalPaletteDefault } from '../..';
+import { useLayoutEffect, useState } from 'react';
+export const TONAL_PALETTE_KEY = 'TonalPaletteKey';
+const LEVELS = [0, 4, 6, 10, 12, 17, 20, 22, 24, 30, 40, 50, 60, 70, 80, 87, 90, 92, 94, 95, 96, 98, 99, 100];
+export const useTonalPalette = () => {
+    const [tonalPalette, setTonalPalette] = useState<TonalPalette>(TonalPaletteDefault);
+    useLayoutEffect(() => {
+        if (localStorage.getItem(TONAL_PALETTE_KEY)) {
+            const localTonalPalette = JSON.parse(localStorage.getItem(TONAL_PALETTE_KEY) || '{}');
+            setTonalPalette(localTonalPalette);
+        }
+    }, []);
+    const generatePalette = (hexColor: string) => {
+        const intColor = argbFromHex(hexColor)
+        const { palettes } = themeFromSourceColor(intColor);
+        const tones: any = {};
+        for (const [key, palette] of Object.entries(palettes)) {
+            const tonelevel: any = {}
+            for (const level of LEVELS) {
+                tonelevel[level] = hexFromArgb(palette.tone(level));
+            }
+            tones[key] = tonelevel;
+        }
+        setTonalPalette(tones);
+        localStorage.setItem(TONAL_PALETTE_KEY, JSON.stringify(tones));
+    }
+    /*
+    const setDefaultPalette = () => {
+        generatePalette('#6750A4');
+    }*/
+    return [tonalPalette, generatePalette] as const;
+}

front/src/theme/M3/providers/ThemeModeProvider.tsx ADDED Viewed

	@@ -0,0 +1,30 @@

+import { FC, createContext } from 'react';
+import { ThemeMode, useThemeMode } from '../..';
+export type ThemeModeContextType = {
+    themeMode: ThemeMode,
+    toggleTheme: () => void,
+    setThemeMode: (mode: ThemeMode) => void
+};
+export interface ThemeModeProviderProps {
+    children?: React.ReactNode;
+};
+export const ThemeModeContext = createContext<ThemeModeContextType>({
+    themeMode: 'light',
+    toggleTheme: () => { },
+    setThemeMode: () => { }
+});
+const ThemeModeProvider: FC<ThemeModeProviderProps> = ({ children }) => {
+    const [themeMode, toggleTheme, setThemeMode] = useThemeMode();
+    return (<ThemeModeContext.Provider value={{ themeMode, toggleTheme, setThemeMode }}>
+        {children}
+    </ThemeModeContext.Provider>);
+};
+export default ThemeModeProvider;

front/src/theme/M3/providers/ThemeSchemeProvider.tsx ADDED Viewed

	@@ -0,0 +1,47 @@

+import { createContext, FC, useLayoutEffect, useState } from 'react';
+import { generateDesignTokens, ThemeScheme, ThemeSchemeDefault, useTonalPalette } from "../..";
+export interface ThemeSchemeContextType {
+    generateScheme: (hexColor: string) => void;
+    themeScheme: ThemeScheme;
+};
+export interface ThemeSchemeProviderProps {
+    children?: React.ReactNode;
+};
+export const ThemeSchemeContext = createContext<ThemeSchemeContextType>({
+    generateScheme: () => { },
+    themeScheme: ThemeSchemeDefault
+});
+const ThemeSchemeProvider: FC<ThemeSchemeProviderProps> = ({ children }) => {
+    const [tonalPalette, generatePalette] = useTonalPalette();
+    const [themeScheme, setThemeScheme] = useState<ThemeScheme>(ThemeSchemeDefault);
+    useLayoutEffect(() => {
+        const lightTokens = generateDesignTokens('light', tonalPalette);
+        const darkTokens = generateDesignTokens('dark', tonalPalette);
+        setThemeScheme({
+            light: lightTokens,
+            dark: darkTokens,
+            tones: tonalPalette
+        });
+    }, [tonalPalette]);
+    const generateScheme = (hexColor: string) => {
+        generatePalette(hexColor);
+    };
+    return (
+        <ThemeSchemeContext.Provider value={{ generateScheme, themeScheme }}>
+            {children}
+        </ThemeSchemeContext.Provider >
+    );
+}
+export default ThemeSchemeProvider;

front/src/theme/M3/types/ThemeMode.ts ADDED Viewed

	@@ -0,0 +1 @@


1	+ export type ThemeMode = 'light' \| 'dark';

front/src/theme/M3/types/ThemeScheme.ts ADDED Viewed

	@@ -0,0 +1,14 @@

+import { DarkTokensDefault, LightTokensDefault, ThemeTokens } from "./ThemeTokens"
+import { TonalPalette, TonalPaletteDefault } from './TonalPalette';
+export type ThemeScheme = {
+    tones: TonalPalette;
+    light: ThemeTokens;
+    dark: ThemeTokens;
+}
+export const ThemeSchemeDefault = {
+    tones: TonalPaletteDefault,
+    light: LightTokensDefault,
+    dark: DarkTokensDefault,
+}

front/src/theme/M3/types/ThemeTokens.ts ADDED Viewed

	@@ -0,0 +1,218 @@

+export type ThemeTokens = {
+    primary: string;
+    onPrimary: string;
+    primaryContainer: string;
+    onPrimaryContainer: string;
+    secondary: string;
+    onSecondary: string;
+    secondaryContainer: string;
+    onSecondaryContainer: string;
+    tertiary: string;
+    onTertiary: string;
+    tertiaryContainer: string;
+    onTertiaryContainer: string;
+    error: string;
+    onError: string;
+    errorContainer: string;
+    onErrorContainer: string;
+    primaryFixed: string;
+    primaryFixedDim: string;
+    onPrimaryFixed: string;
+    onPrimaryFixedVariant: string;
+    secondaryFixed: string;
+    secondaryFixedDim: string;
+    onSecondaryFixed: string;
+    onSecondaryFixedVariant: string;
+    tertiaryFixed: string;
+    tertiaryFixedDim: string;
+    onTertiaryFixed: string;
+    onTertiaryFixedVariant: string;
+    surface: string;
+    onSurface: string;
+    surfaceDim: string;
+    surfaceBright: string;
+    surfaceContainerLowest: string;
+    surfaceContainerLow: string;
+    surfaceContainer: string;
+    surfaceContainerHigh: string;
+    surfaceContainerHighest: string;
+    surfaceVariant: string;
+    onSurfaceVariant: string;
+    outline: string;
+    outlineVariant: string;
+    inverseSurface: string;
+    inverseOnSurface: string;
+    inversePrimary: string;
+    inverseOnPrimary: string;
+    shadow: string;
+    scrim: string;
+    surfaceTintColor: string;
+    background: string;
+    onBackground: string;
+    info: string;
+    onInfo: string;
+    infoContainer: string;
+    onInfoContainer: string;
+    success: string;
+    onSuccess: string;
+    successContainer: string;
+    onSuccessContainer: string;
+    warning: string;
+    onWarning: string;
+    warningContainer: string;
+    onWarningContainer: string;
+}
+export const LightTokensDefault: ThemeTokens = {
+    "primary": "#6750a4",
+    "onPrimary": "#ffffff",
+    "primaryContainer": "#e9ddff",
+    "onPrimaryContainer": "#22005d",
+    "secondary": "#625b71",
+    "onSecondary": "#ffffff",
+    "secondaryContainer": "#e8def8",
+    "onSecondaryContainer": "#1e192b",
+    "tertiary": "#7e5260",
+    "onTertiary": "#ffffff",
+    "tertiaryContainer": "#ffd9e3",
+    "onTertiaryContainer": "#31101d",
+    "error": "#ba1a1a",
+    "onError": "#ffffff",
+    "errorContainer": "#ffdad6",
+    "onErrorContainer": "#410002",
+    "primaryFixed": "#e9ddff",
+    "primaryFixedDim": "#cfbcff",
+    "onPrimaryFixed": "#22005d",
+    "onPrimaryFixedVariant": "#4f378a",
+    "secondaryFixed": "#e8def8",
+    "secondaryFixedDim": "#cbc2db",
+    "onSecondaryFixed": "#1e192b",
+    "onSecondaryFixedVariant": "#4a4458",
+    "tertiaryFixed": "#ffd9e3",
+    "tertiaryFixedDim": "#efb8c8",
+    "onTertiaryFixed": "#31101d",
+    "onTertiaryFixedVariant": "#633b48",
+    "surface": "#fdf8fd",
+    "onSurface": "#1c1b1e",
+    "surfaceDim": "#ddd8dd",
+    "surfaceBright": "#fdf8fd",
+    "surfaceContainerLowest": "#ffffff",
+    "surfaceContainerLow": "#f7f2f7",
+    "surfaceContainer": "#f2ecf1",
+    "surfaceContainerHigh": "#ece7eb",
+    "surfaceContainerHighest": "#e6e1e6",
+    "surfaceVariant": "#e7e0eb",
+    "onSurfaceVariant": "#49454e",
+    "outline": "#7a757f",
+    "outlineVariant": "#cac4cf",
+    "inverseSurface": "#313033",
+    "inverseOnSurface": "#f4eff4",
+    "inversePrimary": "#cfbcff",
+    "inverseOnPrimary": "",
+    "shadow": "#000000",
+    "scrim": "#000000",
+    "surfaceTintColor": "#6750a4",
+    "background": "#fdf8fd",
+    "onBackground": "#1c1b1e",
+    "info": "#125db2",
+    "onInfo": "#ffffff",
+    "infoContainer": "#d6e3ff",
+    "onInfoContainer": "#001b3d",
+    "success": "#006d43",
+    "onSuccess": "#ffffff",
+    "successContainer": "#92f7bc",
+    "onSuccessContainer": "#002111",
+    "warning": "#ad3212",
+    "onWarning": "#ffffff",
+    "warningContainer": "#ffdad2",
+    "onWarningContainer": "#3c0700"
+};
+export const DarkTokensDefault: ThemeTokens = {
+    "primary": "#cfbcff",
+    "onPrimary": "#4f378a",
+    "primaryContainer": "#4f378a",
+    "onPrimaryContainer": "#e9ddff",
+    "secondary": "#cbc2db",
+    "onSecondary": "#332d41",
+    "secondaryContainer": "#4a4458",
+    "onSecondaryContainer": "#e8def8",
+    "tertiary": "#efb8c8",
+    "onTertiary": "#633b48",
+    "tertiaryContainer": "#633b48",
+    "onTertiaryContainer": "#ffd9e3",
+    "error": "#ffb4ab",
+    "onError": "#690005",
+    "errorContainer": "#93000a",
+    "onErrorContainer": "#ffdad6",
+    "primaryFixed": "#e9ddff",
+    "primaryFixedDim": "#cfbcff",
+    "onPrimaryFixed": "#22005d",
+    "onPrimaryFixedVariant": "#4f378a",
+    "secondaryFixed": "#e8def8",
+    "secondaryFixedDim": "#cbc2db",
+    "onSecondaryFixed": "#1e192b",
+    "onSecondaryFixedVariant": "#4a4458",
+    "tertiaryFixed": "#ffd9e3",
+    "tertiaryFixedDim": "#efb8c8",
+    "onTertiaryFixed": "#31101d",
+    "onTertiaryFixedVariant": "#633b48",
+    "surface": "#141316",
+    "onSurface": "#e6e1e6",
+    "surfaceDim": "#141316",
+    "surfaceBright": "#3a383c",
+    "surfaceContainerLowest": "#0f0e11",
+    "surfaceContainerLow": "#1c1b1e",
+    "surfaceContainer": "#201f22",
+    "surfaceContainerHigh": "#2b292d",
+    "surfaceContainerHighest": "#363438",
+    "surfaceVariant": "#49454e",
+    "onSurfaceVariant": "#cac4cf",
+    "outline": "#948f99",
+    "outlineVariant": "#49454e",
+    "inverseSurface": "#e6e1e6",
+    "inverseOnSurface": "#313033",
+    "inversePrimary": "#6750a4",
+    "inverseOnPrimary": "",
+    "shadow": "#000000",
+    "scrim": "#000000",
+    "surfaceTintColor": "#cfbcff",
+    "background": "#141316",
+    "onBackground": "#e6e1e6",
+    "info": "#a9c7ff",
+    "onInfo": "#003063",
+    "infoContainer": "#00468c",
+    "onInfoContainer": "#d6e3ff",
+    "success": "#76daa1",
+    "onSuccess": "#003920",
+    "successContainer": "#005231",
+    "onSuccessContainer": "#92f7bc",
+    "warning": "#ffb4a2",
+    "onWarning": "#621200",
+    "warningContainer": "#8a1d00",
+    "onWarningContainer": "#ffdad2"
+};