Merge remote-tracking branch 'origin/master'

LinuzJ · Nov 11, 2023 · 2d99ead · 2d99ead
2 parents d7b1aec + 2927d49
commit 2d99ead
Show file tree

Hide file tree

Showing 16 changed files with 198 additions and 216 deletions.
diff --git a/README.md b/README.md
@@ -51,6 +51,7 @@ We used the _YOLOv8n-pose_ model to extract pose data efficiently on the server
 
 The frontend is implemented in Vite, while the backend is a mixture of Go and Python together with Pocketbase as a database.
 
+![inferencing](examples/inferenced.mp4)
 
 ## References
 

diff --git a/dance-app/src/App.tsx b/dance-app/src/App.tsx
@@ -1,11 +1,7 @@
-import { useState } from "react";
-
-import PocketBase, { RecordAuthResponse } from "pocketbase";
 import { AuthProvider } from "./context/AuthContext";
 
 import { ThemeProvider } from "@emotion/react";
 import { Box, createTheme, CssBaseline } from "@mui/material";
-import Login from "./sections/login";
 import LandingPage from "./sections/landing";
 import MainDrawerLayout from "./layouts/MainDrawerLayout";
 
@@ -15,10 +11,10 @@ const theme = createTheme({
   },
   palette: {
     background: {
-      default: "#121640",
+      default: "#01bfc8",
     },
     primary: {
-      main: "#00c4cc", // big text
+      main: "#121640",
     },
     secondary: {
       main: "#e43397", // small text
@@ -39,8 +35,6 @@ const theme = createTheme({
 });
 
 function App() {
-  const pb = new PocketBase("https://junctionb.nyman.dev");
-
   return (
     <AuthProvider>
       <ThemeProvider theme={theme}>
@@ -50,12 +44,12 @@ function App() {
             display: "flex",
             alignItems: "start",
             justifyContent: "center",
-            height: "100vh",
+            height: "100dvh",
             width: "100vw",
           }}
         >
           <MainDrawerLayout>
-            <LandingPage pb={pb} />
+            <LandingPage />
           </MainDrawerLayout>
         </Box>
       </ThemeProvider>

diff --git a/dance-app/src/Leaderboard.css b/dance-app/src/Leaderboard.css
@@ -1,7 +1,7 @@
 .list {
   width: 100vw;
   overflow: scroll;
-  max-height: 100vh;
+  max-height: 100dvh;
 }
 
 .spacer {

diff --git a/dance-app/src/Loader.css b/dance-app/src/Loader.css
@@ -1,6 +1,6 @@
 .center {
   width: 100%;
-  height: 100vh;
+  height: 100dvh;
   display: flex;
   justify-content: center;
   align-items: center;

diff --git a/dance-app/src/Recording.css b/dance-app/src/Recording.css
@@ -1,6 +1,6 @@
 .App {
   width: 100vw;
-  height: 100vh;
+  height: 100dvh;
   overflow: hidden;
   position: relative;
 }
@@ -43,15 +43,13 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 128px;
   margin: auto;
   margin-top: 100px;
-  border-radius: 100px;
   z-index: 5;
 } 
 
-.record-button span {
-  padding: 50px;
+.App-header > .record-button h2 {
+  font-weight: 500;
 }
 
 .container {
@@ -67,7 +65,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  height: 100vh;
+  height: 100dvh;
 }
 .video-container > video {
   height: 100%;

diff --git a/dance-app/src/components/Drawer.tsx b/dance-app/src/components/Drawer.tsx
@@ -1,14 +1,8 @@
 import { Box, Button, useTheme } from "@mui/material";
-import { FC } from "react";
 import "../Drawer.css";
 import { makeStyles } from "@mui/styles";
 import { Pages } from "../context/PageContext";
 
-interface DrawerProps {
-  view: Pages;
-  setView: (view: Pages) => void;
-}
-
 const useStyles = makeStyles(() => ({
   box: {
     position: "absolute",
@@ -33,7 +27,12 @@ const useStyles = makeStyles(() => ({
   },
 }));
 
-const Drawer: FC<DrawerProps> = ({ view, setView }) => {
+type DrawerProps = {
+  view: Pages;
+  setView: (view: Pages) => void;
+};
+
+const Drawer = ({ view, setView }: DrawerProps) => {
   const theme = useTheme();
   const classes = useStyles(theme);
 

diff --git a/dance-app/src/components/Leaderboard.tsx b/dance-app/src/components/Leaderboard.tsx
@@ -1,8 +1,8 @@
 import { useEffect, useState } from "react";
 import Loader from "./Loader";
-import PocketBase from "pocketbase";
 import "../Leaderboard.css";
-import {Card, CardContent, CardMedia, Stack, Typography} from "@mui/material";
+import { Card, CardContent, CardMedia, Stack, Typography } from "@mui/material";
+import pb from "../pocketBase";
 
 interface VideoData {
   id: string;
@@ -20,25 +20,17 @@ interface User {
   email: string;
   name: string;
 }
-interface LeaderboardProps {
-  pb: PocketBase;
-}
 
-function Leaderboard({ pb }: LeaderboardProps) {
+function Leaderboard() {
   const [isLoading, setIsLoading] = useState(true);
   const [videos, setVideos] = useState<VideoData[]>([]);
 
   useEffect(() => {
-    const getVideos = async () => {
-      const newVideos = await pb
-        .collection("videos")
-        .getFullList<VideoData>({ expand: "user" });
-      console.log(newVideos);
-      setVideos(newVideos);
-      setIsLoading(false);
-    };
-    getVideos();
-  }, [pb]);
+    pb.collection("videos")
+      .getFullList<VideoData>({ expand: "user" })
+      .then((newVideos) => setVideos(newVideos))
+      .then(() => setIsLoading(false));
+  }, []);
 
   if (isLoading) {
     return <Loader />;
@@ -57,26 +49,30 @@ function Leaderboard({ pb }: LeaderboardProps) {
             Todays high scores
           </Typography>
         </div>
-        {scoredVideos.map(({ id, collectionId, video, tier, score, expand }) => (
-          <Card key={id} padding-top="10" >
-            <CardMedia
-              component="video"
-              src={`https://junctionb.nyman.dev/api/files/${collectionId}/${id}/${video}`}
-              width={120}
-              autoPlay
-              muted
-              loop
-             />
-            <CardContent>
-              <Typography gutterBottom variant="h4">Tier {tier}</Typography>
-              <Typography variant="body2">
-                {expand?.user?.name}
-                {': '}
-                <b>{score}</b>
-              </Typography>
-            </CardContent>
-          </Card>
-        ))}
+        {scoredVideos.map(
+          ({ id, collectionId, video, tier, score, expand }) => (
+            <Card key={id} padding-top="10">
+              <CardMedia
+                component="video"
+                src={`https://junctionb.nyman.dev/api/files/${collectionId}/${id}/${video}`}
+                width={120}
+                autoPlay
+                muted
+                loop
+              />
+              <CardContent>
+                <Typography gutterBottom variant="h4">
+                  Tier {tier}
+                </Typography>
+                <Typography variant="body2">
+                  {expand?.user?.name}
+                  {": "}
+                  <b>{score}</b>
+                </Typography>
+              </CardContent>
+            </Card>
+          ),
+        )}
       </Stack>
     </div>
   );

diff --git a/dance-app/src/components/LoginForm.tsx b/dance-app/src/components/LoginForm.tsx
@@ -2,8 +2,8 @@ import { useState, FormEvent, useContext } from "react";
 import Button from "@mui/material/Button";
 import TextField from "@mui/material/TextField";
 import Typography from "@mui/material/Typography";
-import Paper from "@mui/material/Paper";
 import { makeStyles } from "@mui/styles";
+import { Box, useTheme } from "@mui/material";
 import { AuthContext } from "../context/AuthContext";
 
 const useStyles = makeStyles(() => ({
@@ -16,11 +16,12 @@ const useStyles = makeStyles(() => ({
     margin: "auto",
     marginTop: 3,
     borderRadius: 10,
-    backgroundColor: "#4c0bd1",
+    zIndex: "15",
   },
 }));
 
 const LoginForm = () => {
+  const theme = useTheme();
   const classes = useStyles();
   const { login } = useContext(AuthContext);
 
@@ -42,19 +43,28 @@ const LoginForm = () => {
   };
 
   return (
-    <Paper elevation={25} className={classes.paper}>
+    <Box
+      className={classes.paper}
+      sx={{
+        backgroundColor: theme.palette.primary.main,
+        boxShadow: "5px 5px 5px 1px rgba(0, 0, 0, 0.75)",
+      }}
+    >
       <>
-        <Typography variant="h4" gutterBottom>
+        <Typography variant="h4" color="white" gutterBottom>
           Login
         </Typography>
-        <form onSubmit={handleSubmit}>
+        <form onSubmit={handleSubmit} style={{ color: "white" }}>
           <TextField
             label="Username"
             type="text"
             value={username}
             onChange={handleUsernameChange}
             fullWidth
             margin="normal"
+            sx={{
+              input: { color: "white" },
+            }}
           />
           <TextField
             label="Password"
@@ -63,14 +73,24 @@ const LoginForm = () => {
             onChange={handlePasswordChange}
             fullWidth
             margin="normal"
+            sx={{
+              input: { color: "white" },
+            }}
           />
           <br />
-          <Button type="submit" variant="contained" color="primary">
+          <Button
+            type="submit"
+            variant="contained"
+            sx={{
+              color: "white",
+              backgroundColor: theme.palette.secondary.main,
+            }}
+          >
             Login
           </Button>
         </form>
       </>
-    </Paper>
+    </Box>
   );
 };
 

diff --git a/dance-app/src/components/logo.tsx b/dance-app/src/components/logo.tsx
@@ -81,8 +81,8 @@ const Logo = (props: SVGProps<SVGSVGElement>) => (
       />
     </g>
     <path
-      fill="#00c4cc"
-      d="M149.843 256.503h-6.219l-4.406-16.422-4.484 16.422h-6.235l-7.765-23.75h6.437l4.656 17.468 4.547-17.468h5.89l4.657 17.468 4.578-17.468h6.172ZM167.77 238.018c3.163 0 5.546.977 7.14 2.922 1.594 1.938 2.289 4.606 2.094 8h-12.86c.29 1.086.805 1.922 1.547 2.516.75.586 1.672.875 2.766.875 1.664 0 3.125-.617 4.375-1.86l3.078 3.016c-1.969 2.149-4.625 3.219-7.969 3.219-2.96 0-5.32-.848-7.078-2.547-1.75-1.695-2.625-3.945-2.625-6.75 0-2.82.875-5.094 2.625-6.813 1.758-1.718 4.063-2.578 6.906-2.578Zm-3.735 7.766h7.328c0-1.102-.324-1.992-.969-2.672-.636-.687-1.492-1.031-2.562-1.031-.992 0-1.824.336-2.5 1-.68.668-1.11 1.57-1.297 2.703ZM180.904 230.737c.582-.57 1.328-.86 2.234-.86.907 0 1.645.29 2.22.86.57.574.859 1.313.859 2.219 0 .906-.29 1.656-.86 2.25-.574.586-1.312.875-2.219.875-.906 0-1.652-.29-2.234-.875-.574-.594-.86-1.344-.86-2.25 0-.906.286-1.645.86-2.219Zm5.11 25.766h-5.829V238.22h5.828ZM202.904 237.94c2.008 0 3.625.64 4.844 1.922 1.227 1.281 1.844 2.984 1.844 5.11v11.53h-5.875v-9.906c0-1.062-.29-1.898-.86-2.515-.574-.625-1.359-.938-2.359-.938-1.137 0-2.043.407-2.719 1.22-.68.812-1.015 1.855-1.015 3.124v9.016h-5.86V231.33h5.86v9.906c1.289-2.144 3.336-3.242 6.14-3.297ZM231.538 238.221v18.282h-5.875v-3.016c-1.242 2.168-3.218 3.25-5.937 3.25-1.992 0-3.578-.629-4.766-1.89-1.187-1.27-1.78-2.97-1.78-5.094V238.22h5.874v9.875c0 1.086.273 1.938.828 2.563.551.617 1.29.922 2.219.922 1.101-.02 1.973-.43 2.61-1.235.632-.8.952-1.835.952-3.109v-9.016ZM244.414 237.94c2.508 0 4.457.586 5.844 1.75 1.394 1.168 2.101 2.793 2.125 4.875v11.938h-5.735v-2.11c-1.199 1.586-3.062 2.375-5.594 2.375-1.918 0-3.445-.53-4.578-1.593-1.125-1.063-1.687-2.442-1.687-4.141 0-1.738.601-3.086 1.812-4.047 1.207-.957 2.942-1.445 5.203-1.469h4.813v-.28c0-.907-.305-1.61-.906-2.11-.594-.508-1.48-.766-2.657-.766-1.648 0-3.464.508-5.453 1.516l-1.672-3.86c2.97-1.382 5.797-2.078 8.485-2.078Zm-1.563 14.86c.926 0 1.739-.227 2.438-.688.707-.469 1.148-1.07 1.328-1.812v-1.641h-3.688c-1.773 0-2.656.656-2.656 1.969 0 .687.223 1.226.672 1.61.457.374 1.094.562 1.906.562Zm0 0"
+      fill="#121640"
+      d="M149.84 257.086h-6.219l-4.406-16.422-4.485 16.422h-6.234l-7.766-23.75h6.438l4.656 17.469 4.547-17.469h5.89l4.657 17.469 4.578-17.469h6.172ZM167.767 238.602c3.164 0 5.546.976 7.14 2.921 1.594 1.938 2.29 4.606 2.094 8h-12.86c.29 1.086.805 1.922 1.547 2.516.75.586 1.672.875 2.766.875 1.664 0 3.125-.617 4.375-1.86l3.078 3.016c-1.969 2.149-4.625 3.22-7.969 3.22-2.96 0-5.32-.849-7.078-2.548-1.75-1.695-2.625-3.945-2.625-6.75 0-2.82.875-5.094 2.625-6.812 1.758-1.719 4.063-2.578 6.907-2.578Zm-3.735 7.765h7.328c0-1.101-.324-1.992-.968-2.672-.637-.687-1.493-1.03-2.563-1.03-.992 0-1.824.335-2.5 1-.68.667-1.11 1.57-1.297 2.702ZM180.902 231.32c.582-.57 1.328-.859 2.234-.859.906 0 1.644.289 2.219.86.57.574.859 1.312.859 2.218 0 .906-.289 1.656-.86 2.25-.574.586-1.312.875-2.218.875-.906 0-1.652-.289-2.234-.875-.575-.594-.86-1.344-.86-2.25 0-.906.285-1.644.86-2.219Zm5.109 25.766h-5.828v-18.281h5.828ZM202.902 238.523c2.008 0 3.625.641 4.844 1.922 1.226 1.282 1.843 2.985 1.843 5.11v11.531h-5.875v-9.906c0-1.063-.289-1.899-.859-2.516-.574-.625-1.36-.937-2.36-.937-1.136 0-2.042.406-2.718 1.218-.68.813-1.016 1.856-1.016 3.125v9.016h-5.86v-25.172h5.86v9.906c1.29-2.144 3.336-3.242 6.14-3.297ZM231.536 238.805v18.281h-5.875v-3.016c-1.242 2.168-3.218 3.25-5.937 3.25-1.992 0-3.578-.629-4.766-1.89-1.187-1.27-1.781-2.969-1.781-5.094v-11.531h5.875v9.875c0 1.086.273 1.937.828 2.562.55.617 1.29.922 2.219.922 1.101-.02 1.972-.43 2.61-1.234.632-.801.952-1.836.952-3.11v-9.015ZM244.412 238.523c2.508 0 4.457.586 5.844 1.75 1.394 1.168 2.101 2.793 2.125 4.875v11.938h-5.735v-2.11c-1.199 1.587-3.062 2.376-5.593 2.376-1.918 0-3.446-.532-4.579-1.594-1.125-1.063-1.687-2.442-1.687-4.14 0-1.74.601-3.087 1.812-4.048 1.207-.957 2.942-1.445 5.204-1.468h4.812v-.282c0-.906-.305-1.609-.906-2.109-.594-.508-1.48-.766-2.656-.766-1.649 0-3.465.508-5.454 1.516l-1.671-3.86c2.968-1.382 5.796-2.078 8.484-2.078Zm-1.563 14.86c.926 0 1.739-.227 2.438-.688.707-.468 1.148-1.07 1.328-1.812v-1.64h-3.687c-1.774 0-2.657.655-2.657 1.968 0 .687.223 1.227.672 1.61.457.374 1.094.562 1.906.562Zm0 0"
     />
   </svg>
 );

diff --git a/dance-app/src/context/PocketBaseContext.tsx b/dance-app/src/context/PocketBaseContext.tsx
diff --git a/dance-app/src/index.css b/dance-app/src/index.css
@@ -28,7 +28,7 @@ body {
   display: flex;
   place-items: center;
   min-width: 320px;
-  min-height: 100vh;
+  min-height: 100dvh;
 }
 
 h1 {

diff --git a/dance-app/src/layouts/MainDrawerLayout.tsx b/dance-app/src/layouts/MainDrawerLayout.tsx
@@ -13,7 +13,7 @@ const useStyles = makeStyles(() => ({
   root: {
     position: "relative",
     display: "flex",
-    height: "100vh",
+    height: "100dvh",
     width: "100vw",
     alignItems: "center",
     // justifyContent: "center",