Spaces:
Sleeping
Sleeping
File size: 3,975 Bytes
15975c4 165d4bd 15975c4 d909077 15975c4 165d4bd 15975c4 d909077 15975c4 d909077 15975c4 d909077 15975c4 35961be 15975c4 35961be 15975c4 165d4bd d909077 165d4bd d909077 165d4bd 15975c4 165d4bd 15975c4 165d4bd 15975c4 da8b8de 15975c4 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 |
import { Snackbar, Stack, useMediaQuery, useTheme } 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>
<ExplainText/>
<Box
sx={{
justifyContent: "center",
display: "flex",
pt: 2,
alignItems: "center",
}}
>
<Stack sx={{ height: '100%', borderRadius: '12px', gap: "30px", minWidth: "20vw", maxWidth:"300px"}}>
<Card variant="outlined" sx={{cursor:"pointer"}} 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" }}>
<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" sx={{cursor:"pointer"}} 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" }}>
<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 sx={{borderRadius:"200px"}}>
<Snackbar
anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
open={open}
onClose={handleClose}
autoHideDuration={35000}
message="This feature is not yet available :("
style={{borderRadius:"200px"}}
/>
</Box>
</Box>
</MainContainer>
</>
);
};
export default Home;
export function ExplainText(props: any) {
const theme = useTheme();
const isSmUp = useMediaQuery(theme.breakpoints.up('md'));
const isSxUp = useMediaQuery(theme.breakpoints.up('sm'));
return (
<div
style={{
display: "flex",
justifyContent: "center",
marginBottom: "10px",
}}
>
<Box
sx={{
width: !isSxUp ? "100%" : "50vw",
borderRadius: "20px",
bgcolor: "background.default",
padding: "35px"
}}
>
<Typography variant="h4">Hi!👋</Typography>
<div style={{ paddingTop: "10px" }}>
<Typography fontSize={"20px"}>
This project provides an easy way to reproduce a given sound by inferring its parameters on the TAL-Noisemaker VST using a custom InverSynth model implementation.
</Typography>
</div>
</Box>
</div>
)
} |