push syntax update + dotenv integration + compiler options + loading screen

back/generators/vst_generator.py

@@ -122,14 +122,14 @@ class VSTGenerator(SoundGenerator):
         fixed = []
         for line in self.synth.get_parameters_description():
             line['defaultValue']=float(line['defaultValue'])
-            if line['index'] < 86:
+            # if line['index'] < 86:
             #     fixed.append(
             #     {"id": line['index'], "name": line['name'], "value": line['defaultValue']}
             #     )
             # else:    
-                params.append(
-                    {"id": line['index'], "name": line['name'], "value": line['defaultValue']}
-                )
+            params.append(
+                {"id": line['index'], "name": line['name'], "value": line['defaultValue']}
+            )
         output = {"parameters": params, "fixed_parameters": fixed}
         os.makedirs("plugin_config", exist_ok=True)
         with open("plugin_config/gen_config_"+str(self.vst)+'.json', "w") as f:

back/main.py

@@ -1,5 +1,6 @@
 from contextlib import asynccontextmanager
 import uuid
+from dotenv import load_dotenv
 from fastapi import Depends, FastAPI, File, HTTPException, UploadFile
 from fastapi.responses import JSONResponse
 from fastapi.staticfiles import StaticFiles
@@ -9,14 +10,16 @@ from fastapi.middleware.cors import CORSMiddleware
 import pathlib
 from contextlib import asynccontextmanager
 from glob import glob
+import os
 
-
-from models.launch import inferrence, train_model
+from models.launch import inference, train_model
 from models.spectrogram_cnn import get_model
 
 # distinguish model type for reshaping
 
-SERVER = "https://yderre-aubay-infer-vst.hf.space/"
+load_dotenv() 
+
+SERVER = str(os.environ.get('API_URL'))
 
 path = os.path.dirname(os.path.realpath(__file__))
 
@@ -46,9 +49,6 @@ def load_model_and_parameters():
 
 @asynccontextmanager
 async def lifespan(app: FastAPI):
-
-    
-
     # Remove all files in the temp folder
     tempFolderPath = os.path.join(path, "temp")
     if os.path.exists(tempFolderPath):
@@ -80,10 +80,6 @@ class SPAStaticFiles(StaticFiles):
             else:
                 raise ex
 
-
-
-
-
 @app.get("/download/{file_id}")
 async def generate_audio(file_id: str):
     try:
@@ -141,6 +137,7 @@ async def upload_audio_file(file: UploadFile = File(...)):
         # generate_output_audio(file_path, output_file_path)
         output = await start_inference(model=model, parameters_file=parameters_file, file_id=file_id, file_extension=file_extension)
         # Send a confirmation with the identifier
+        print(SERVER+output[0])
         return {"file_path": SERVER+output[0], "csv_path": SERVER+output[1], "output_file_path": SERVER+output[2]}
 
     except Exception as e:
@@ -149,7 +146,7 @@ async def upload_audio_file(file: UploadFile = File(...)):
 async def start_inference(model, parameters_file, file_id: str, file_extension : str):
     file_path = os.path.join("temp", file_id + file_extension)
     
-    output = inferrence(model=model, parameters_file=parameters_file, file_path=file_path, file_id=file_id)
+    output = inference(model=model, parameters_file=parameters_file, file_path=file_path, file_id=file_id)
     
     return output
 

back/models/launch.py

@@ -301,7 +301,9 @@ PRINT = 1
 # DAWDREAMER EXPORT SETTINGS
 SAMPLE_RATE = 16384
 BUFFER_SIZE = 1024
-SYNTH_PLUGIN = "libTAL-NoiseMaker.so"
+SYNTH_PLUGIN = 'libTAL-NoiseMaker.so'
+
+# SYNTH_PLUGIN = "TAL-NoiseMaker.vst3"
 
 ENGINE = daw.RenderEngine(SAMPLE_RATE, BUFFER_SIZE)
 SYNTH = ENGINE.make_plugin_processor("my_synth", SYNTH_PLUGIN)
@@ -405,7 +407,7 @@ def train_model(
         return model, parameters_file
 
 
-def inferrence(model: keras.Model, parameters_file: str, file_path: str, file_id: str):
+def inference(model: keras.Model, parameters_file: str, file_path: str, file_id: str):
     # Start infer
 
     with open(parameters_file, "rb") as f:

back/models/spectrogram_cnn.py

@@ -112,7 +112,7 @@ def get_model(
 
 if __name__ == "__main__":
 
-    from models.launch import train_model, inferrence
+    from models.launch import train_model, inference
     from models.runner import standard_run_parser
 
     # Get a standard parser, and the arguments out of it
@@ -127,7 +127,7 @@ if __name__ == "__main__":
     
     model, parameters_file = train_model(model_callback=get_model, **setup)
     
-    file_path, csv_path = inferrence(model, parameters_file)
+    file_path, csv_path = inference(model, parameters_file)
     
     print(file_path)
     

back/requirements.txt

@@ -26,3 +26,4 @@ keras-preprocessing
 keras
 librosa
 h5py
+dotenv

front/.env

@@ -0,0 +1 @@
+VITE_API_URL = http://localhost:7860

front/src/components/AppBar/MainAppBar.tsx

@@ -12,12 +12,13 @@ import {
     useTheme
 } from "@mui/material";
 import { FC, useContext, useState } from "react";
-import { useLocation, useNavigate } from "react-router-dom";
+import { Navigate, useLocation, useNavigate, useNavigation } 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";
+import { Home } from "@mui/icons-material";
 
 interface HeaderProps {
   onDrawerToggle?: () => void;
@@ -26,19 +27,8 @@ interface HeaderProps {
 
 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)
@@ -50,67 +40,28 @@ const MainAppBar: FC<HeaderProps> = ({ onDrawerToggle, window }) => {
     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 navigate = useNavigate()
 
-  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 item sx={{ display: "flex", alignItems: "center", alignContent:"center"}} onClick={(e) => navigate('/Home')}>
+            <Home sx={{pr: 1.5, fontSize:30}}/>
+              <Typography
+                color="inherit"
+                sx={{ fontWeight: "bold", letterSpacing: 1, fontSize: 20, fontFamily:"monospace"  }}
+              >
+                AMP Aubay
+              </Typography>
             </Grid>
             <Grid item sx={{ display: "flex", alignItems: "baseline" }}>
               <Typography
                 color="inherit"
-                sx={{ fontWeight: 500, letterSpacing: 0.5, fontSize: 20 }}
+                sx={{ fontWeight: "normal", letterSpacing: 0.5, fontSize: 20, fontFamily:"monospace", pl:1}}
               >
-                {location.pathname.replace("/", "")}
+                // {location.pathname.replace("/", "")}
               </Typography>
             </Grid>
             <Grid item xs></Grid>
@@ -123,7 +74,7 @@ const MainAppBar: FC<HeaderProps> = ({ onDrawerToggle, window }) => {
             </Grid>
           </Grid>
           <Button variant="tonal" color="tertiary" onClick={handleOpen}>
-            Credits
+            About
           </Button>
           <div>
             <Modal
@@ -142,7 +93,7 @@ const MainAppBar: FC<HeaderProps> = ({ onDrawerToggle, window }) => {
                     fontStyle: "italic",
                   }}
                 >
-                  Inferrence 
+                  Inference 
                 </Typography>
 
                 <Typography
@@ -231,7 +182,7 @@ const style_modal = {
     top: "50%",
     left: "50%",
     transform: "translate(-50%, -50%)",
-    width: 500,
+    width: "auto",
     color: "inherit",
     bgcolor: "background.paper",
     p: 4,

front/src/components/Drawer/MainDrawer.tsx

@@ -1,5 +1,5 @@
 import { Box, Drawer, DrawerProps, Fab, List, ListItem, ListItemButton, ListItemIcon, ListItemText, Toolbar, Typography } from "@mui/material";
-import { FC, useState, useEffect } from 'react';
+import { FC, useEffect, useState } from 'react';
 
 import { Link, useLocation } from "react-router-dom";
 
@@ -8,15 +8,10 @@ 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 { AddOutlined } from "@mui/icons-material";
 import Add from "@mui/icons-material/Add";
-import { AddOutlined, FlashOn, FlashOnOutlined } from "@mui/icons-material";
+import PaletteTwoToneIcon from '@mui/icons-material/Palette';
+import PaletteOutlinedIcon from '@mui/icons-material/PaletteOutlined';
 
 const MainDrawer: FC<DrawerProps> = (props) => {
     const { onClose, ...others } = props;
@@ -54,19 +49,14 @@ const MainDrawer: FC<DrawerProps> = (props) => {
         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 color='tertiary' sx={{mx: 2, px: 1, py:1, height: "50px"}} variant='extended' component={Link} to='/Inference' onClick={() => handleListItemClick('Inference')}>
+                    {selectedIndex == 'Inference' ? <Add sx={{ mr: 1 }} /> : <AddOutlined sx={{ mr: 1 }} />}
+                    <Typography color="inherit" sx={{ mr: 1, fontSize: 16, fontWeight: 500, mt:0.3}}>New inference</Typography>
                 </Fab>
                 <Box sx={{py:1}}/>
-            <List>
+            {/* <List>
                 <Box>
                     <ListItem >
                         <ListItemButton component={Link} to='/Home' selected={selectedIndex == 'Home'} onClick={() => handleListItemClick('Home')}>
@@ -77,11 +67,11 @@ const MainDrawer: FC<DrawerProps> = (props) => {
                         </ListItemButton>
                     </ListItem>
                     <ListItem >
-                        <ListItemButton component={Link} to='/Inferrence' selected={selectedIndex == 'Inferrence'} onClick={() => handleListItemClick('Inferrence')}>
+                        <ListItemButton component={Link} to='/Inference' selected={selectedIndex == 'Inference'} onClick={() => handleListItemClick('Inference')}>
                             <ListItemIcon>
-                                {selectedIndex == 'Inferrence' ? <PaletteTwoToneIcon /> : <PaletteOutlinedIcon />}
+                                {selectedIndex == 'Inference' ? <PaletteTwoToneIcon /> : <PaletteOutlinedIcon />}
                             </ListItemIcon>
-                            <ListItemText>Inferrence</ListItemText>
+                            <ListItemText>Inference</ListItemText>
                         </ListItemButton>
                     </ListItem>
                     <ListItem >
@@ -93,27 +83,8 @@ const MainDrawer: FC<DrawerProps> = (props) => {
                         </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>
+            </List> */}
+        </>
     );
 };
 

front/src/pages/Express/Express.tsx

@@ -19,7 +19,7 @@ const Express = () => {
           }}
         >
           <Stack sx={{ height: '30vh', borderRadius: '12px', gap: "30px", minWidth: "20vw", maxWidth:"300px"}}>
-          <Card variant="outlined" onClick={() => navigate("/Inferrence")}>
+          <Card variant="outlined" onClick={() => navigate("/Inference")}>
             <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" }}>

front/src/pages/Home/Home.tsx

@@ -1,15 +1,29 @@
 
-import { Stack } from '@mui/material';
+import { Snackbar, 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";
+import { useState } from 'react';
 
 const Home = () => {
     const navigate = useNavigate()
+    const [open, setOpen] = useState(false);
 
+    const handleClick = () => {
+      setOpen(true);
+    };
+  
+    const handleClose = (event: React.SyntheticEvent | Event, reason?: string) => {
+      if (reason === 'clickaway') {
+        return;
+      }
+  
+      setOpen(false);
+    };
+  
     return (
         <>
             <MainContainer>
@@ -18,13 +32,12 @@ const Home = () => {
           sx={{
             justifyContent: "center",
             display: "flex",
-            pt: 10,
-            height:"100%",
+            pt: 2,
             alignItems: "center",
           }}
         >
           <Stack sx={{ height: '100%', borderRadius: '12px', gap: "30px", minWidth: "20vw", maxWidth:"300px"}}>
-          <Card variant="outlined" onClick={() => navigate("/Inferrence")}>
+          <Card variant="outlined" onClick={() => navigate("/Inference")}>
             <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" }}>
@@ -37,7 +50,7 @@ const Home = () => {
           </Card>
           <Box></Box>
           <Divider>Or</Divider>
-          <Card variant="outlined" onClick={() => navigate("/CustomizeVST")}>
+          <Card variant="outlined"  onClick={() => handleClick()}>
             <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" }}>
@@ -49,6 +62,14 @@ const Home = () => {
             </Box>
           </Card>
         </Stack>
+        <Snackbar
+          anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
+          open={open}
+          onClose={handleClose}
+          message="This feature is not yet available :("
+          sx={{borderRadius:"200px"}}
+          style={{borderRadius:"200px"}}
+        />
         </Box>
         </MainContainer>
         </>
@@ -78,7 +99,7 @@ export function ExplainText(props: any) {
         <Typography variant="h4">Hi!👋</Typography>
         <div style={{ paddingTop: "10px" }}>
           <Typography fontSize={"20px"}>
-            Start inferring now!!!!!! 🧑‍🍳🧑‍🍳
+            This project is aiming to provide an easy way to reproduce a provided sound on the TAL-Noisemaker VST using a custom Inversynth model implementation
           </Typography>
         </div>
       </Box>

front/src/pages/Inference/CustomizeVST/CustomizeVST.tsx

@@ -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/Inference/Inference.tsx

@@ -0,0 +1,197 @@
+import {
+  Box,
+  LinearProgress,
+  Modal,
+  Typography
+} from "@mui/material";
+import { useCallback, useEffect, useState } from "react";
+import { useLocation } from "react-router-dom";
+import MainContainer from "../../components/Container/MainContainer";
+import AudioUploader from "../../requests/upload";
+
+const Inference = () => {
+  
+  
+  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 Inference;
+
+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/Inference/Results/Results.tsx

@@ -0,0 +1,160 @@
+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
+    const storedFilePath = localStorage.getItem("file_path");
+    const storedCsvFilePath = localStorage.getItem("csv_file_path");
+    const storedOutputFilePath = localStorage.getItem("output_file_path");
+
+    // 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")));
+
+    // Check if any required values are missing
+    if (!storedFilePath || !storedCsvFilePath || !storedOutputFilePath) {
+      // Values are missing, redirect to another page (replace '/path-to-redirect' with the desired path)
+      navigate("/Inference");
+    }
+  }, []); // 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="/Inference"
+          >
+            <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

@@ -16,11 +16,16 @@ const MainLayout: FC = () => {
 
     const rootStyles: SxProps = {
         display: 'flex',
-        minHeight: '100vh',
+        height: '100vh',
     };
     const navStyles: SxProps = {
-        width: { md: drawerWidth },
-        flexShrink: { md: 0 },
+        width: "100vw",
+        position: "fixed",
+        bottom: "0",
+        display:"flex",
+        flexDirection:"row-reverse",
+        pb:3,
+        pr:2
     };
 
     const mainStyles: SxProps = {
@@ -41,25 +46,15 @@ const MainLayout: FC = () => {
     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 sx={navStyles}>
+                <MainDrawer variant="permanent"/>
+            </Box>
         </Box>
     );
 }

front/src/pages/pagesData.tsx

@@ -1,10 +1,10 @@
 import { routerType } from "../types/router.types";
 import About from "./About/About";
-import Inferrence from "./Inferrence/Inferrence";
+import Inference from "./Inference/Inference";
 import Home from "./Home/Home";
 import Express from "./Express/Express";
-import Results from "./Inferrence/Results/Results";
-import CustomizeVST from "./Inferrence/CustomizeVST/CustomizeVST";
+import Results from "./Inference/Results/Results";
+import CustomizeVST from "./Inference/CustomizeVST/CustomizeVST";
 
 const pagesData: routerType[] = [
     {
@@ -13,9 +13,9 @@ const pagesData: routerType[] = [
         title: "Home",
     },
     {
-        path: "Inferrence",
-        element: <Inferrence/>,
-        title: "Inferrence"
+        path: "Inference",
+        element: <Inference/>,
+        title: "Inference"
     },
     {
         path: "About",

front/src/requests/download.tsx

@@ -6,16 +6,18 @@ const AudioDownloader = () => {
 
   const [downloadUrl, setDownloadUrl] = useState<string | null>(null);
 
-    const fileId = localStorage.getItem('uploadId');
-    console.log('Retrieved Upload ID:', fileId); 
+  const fileId = localStorage.getItem('uploadId');
+  console.log('Retrieved Upload ID:', fileId); 
+
 
   const handleDownload = async () => {
     try {
-      const response = await axios.get(`https://yderre-aubay-infer-vst.hf.space/download/${fileId}`);
+      const server = import.meta.env.VITE_API_URL;
+
+      const response = await axios.get(`${server}/download/${fileId}`);
       
       // Assuming the response.data contains the URL
       const url = response.data.url;
-      const server = 'https://yderre-aubay-infer-vst.hf.space/'
 
       
 

front/src/requests/upload.tsx

@@ -16,6 +16,8 @@ import {
   Typography,
   CardActions,
   Button,
+  Modal,
+  CircularProgress,
 } from "@mui/material";
 import { ThemeSchemeContext, ThemeModeContext } from "../theme";
 
@@ -31,10 +33,11 @@ const AudioUploader = ({ ...props }) => {
 
   const [audioFile, setAudioFile] = useState<File | null>(null);
 
+
   const [uploadStatus, setUploadStatus] = useState("");
   const inputFile = useRef<HTMLInputElement | null>(null);
 
-  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [modalOpen, setModalOpen] = useState(false);
 
   const onDragEnter = useCallback(
     (e: { stopPropagation: () => void; preventDefault: () => void }) => {
@@ -95,6 +98,10 @@ const AudioUploader = ({ ...props }) => {
     }
   };
 
+  const handleCloseModal = () => {
+    setModalOpen(false);
+  };
+
   const onButtonClick = () => {
     // `current` points to the mounted file input element
     inputFile?.current?.click();
@@ -103,9 +110,12 @@ const AudioUploader = ({ ...props }) => {
   const handleUpload = async () => {
     if (audioFile) {
       try {
+        const server = import.meta.env.VITE_API_URL;
+
         const form = new FormData();
 
         if (audioFile) {
+          setModalOpen(true);
           const blob = new Blob([audioFile], {
             type: "application/octet-stream",
           });
@@ -116,7 +126,7 @@ const AudioUploader = ({ ...props }) => {
         }
 
         const response = await axios.post(
-          "https://yderre-aubay-infer-vst.hf.space/upload/",
+          `${server}/upload/`,
           form,
           {
             headers: { Accept: "multipart/form-data" },
@@ -148,6 +158,7 @@ const AudioUploader = ({ ...props }) => {
         console.error("Error:", error);
         props.handleClose();
         setIsError(true);
+        setModalOpen(false);
         setNextCard(false);
         setUploadStatus(`Error: ${error}`);
       }
@@ -170,7 +181,7 @@ const AudioUploader = ({ ...props }) => {
               <Typography gutterBottom variant="h5" sx={{ pb: 3 }}>
                 {isVisible
                   ? "Drop here to upload"
-                  : "Drag a file to start inferrence"}
+                  : "Drag a file to start inference"}
               </Typography>
               <UploadFile sx={{ fontSize: "35px", color: "inherit" }} />
             </CardContent>
@@ -229,6 +240,16 @@ const AudioUploader = ({ ...props }) => {
             </CardActions>
           </Box>
         </Card>
+        <Modal
+              open={modalOpen}
+              onClose={handleCloseModal}
+              aria-labelledby="modal-modal-title"
+              aria-describedby="modal-modal-description"
+            >
+              <Box sx={style_modal}>
+                <CircularProgress size={60} thickness={4} />
+              </Box>
+            </Modal>
       </Box>
     </>
   );
@@ -253,3 +274,17 @@ const PaletteSwatch = ({ onTitle, titleColor, onTitleColor, visible }: any) => {
     </Box>
   );
 };
+
+const style_modal = {
+  position: "absolute" as "absolute",
+  top: "50%",
+  left: "50%",
+  transform: "translate(-50%, -50%)",
+  color: "inherit",
+  bgcolor: "background.paper",
+  p: 4,
+  borderRadius: "10px",
+  display: "flex",
+  justifyContent: "center",
+  alignTtems: "center",
+};

front/tsconfig.json

@@ -5,6 +5,7 @@
     "lib": ["ES2020", "DOM", "DOM.Iterable"],
     "module": "ESNext",
     "skipLibCheck": true,
+    "types": ["vite/client"],
 
     /* Bundler mode */
     "moduleResolution": "bundler",