Spaces:

Hyathi
/

hotdub

Paused

App Files Files Community

maaz-ht commited on Dec 29, 2023

Commit

718af96

1 Parent(s): 3ada77e

change ui

Browse files

Files changed (12) hide show

streaming-react-app/index.html +23 -19
streaming-react-app/public/android-chrome-192x192.png +0 -0
streaming-react-app/public/android-chrome-512x512.png +0 -0
streaming-react-app/public/apple-touch-icon.png +0 -0
streaming-react-app/public/favicon-16x16.png +0 -0
streaming-react-app/public/favicon-32x32.png +0 -0
streaming-react-app/public/favicon.ico +0 -0
streaming-react-app/public/logo.png +0 -0
streaming-react-app/src/RoomConfig.tsx +7 -3
streaming-react-app/src/StreamingInterface.css +2 -5
streaming-react-app/src/StreamingInterface.tsx +9 -10
streaming-react-app/src/theme.ts +23 -5

streaming-react-app/index.html CHANGED Viewed

@@ -1,22 +1,26 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
-  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
-  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
-  <link rel="manifest" href="/site.webmanifest">
-  <title>Hotdub Real Time Translation</title>
-  <meta name="description"
-    content="Hotdub: Your gateway to instant understanding through cutting-edge real-time translation technology." />
-</head>
-<body>
-  <div id="root"></div>
-  <script type="module" src="/src/main.tsx"></script>
-</body>
-</html>

 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+    <link rel="manifest" href="/site.webmanifest" />
+    <title>Hotdub Real Time Translation</title>
+    <meta
+      name="description"
+      content="Hotdub: Your gateway to instant understanding through cutting-edge real-time translation technology."
+    />
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+    <link rel="manifest" href="/site.webmanifest" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

streaming-react-app/public/android-chrome-192x192.png CHANGED Viewed

streaming-react-app/public/android-chrome-512x512.png ADDED Viewed

streaming-react-app/public/apple-touch-icon.png CHANGED Viewed

streaming-react-app/public/favicon-16x16.png CHANGED Viewed

streaming-react-app/public/favicon-32x32.png CHANGED Viewed

streaming-react-app/public/favicon.ico CHANGED Viewed

streaming-react-app/public/logo.png CHANGED Viewed

streaming-react-app/src/RoomConfig.tsx CHANGED Viewed

@@ -149,7 +149,7 @@ export default function RoomConfig({
   return (
     <Stack direction="column" spacing="12px">
-      <Stack direction="row" spacing="12px" sx={{alignItems: 'center'}}>
         <TextField
           size="small"
           label="Room Code"
@@ -166,9 +166,10 @@ export default function RoomConfig({
               setRoomIDError(true);
             }
           }}
-          sx={{width: '8em'}}
         />
         <div>
           <Button
             variant="contained"
@@ -197,8 +198,10 @@ export default function RoomConfig({
           </div>
         )}
       </Stack>
       <FormGroup>
         {Object.keys(roles).map((role) => {
           return (
             <FormControlLabel
@@ -219,6 +222,7 @@ export default function RoomConfig({
             />
           );
         })}
         {urlParams.enableServerLock && roles['speaker'] === true && (
           <>

   return (
     <Stack direction="column" spacing="12px">
+      <Stack direction="column" spacing={2} sx={{alignItems: 'center'}}>
         <TextField
           size="small"
           label="Room Code"
               setRoomIDError(true);
             }
           }}
+          sx={{width: '100%'}}
         />
+<Stack direction="row" spacing={4} sx={{alignItems: 'center'}}>
         <div>
           <Button
             variant="contained"
           </div>
         )}
       </Stack>
+      </Stack>
       <FormGroup>
+        <Stack direction="row" justifyContent="space-between">
         {Object.keys(roles).map((role) => {
           return (
             <FormControlLabel
             />
           );
         })}
+        </Stack>
         {urlParams.enableServerLock && roles['speaker'] === true && (
           <>

streaming-react-app/src/StreamingInterface.css CHANGED Viewed

@@ -22,9 +22,6 @@
 .top-section-sra {
   padding-top: 24px;
   margin-bottom: 24px;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
 }
 .horizontal-padding-sra {
@@ -34,8 +31,8 @@
 .header-container-sra {
   display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
   align-items: center;
   margin-bottom: 24px;
 }

 .top-section-sra {
   padding-top: 24px;
   margin-bottom: 24px;
 }
 .horizontal-padding-sra {
 .header-container-sra {
   display: flex;
+  flex-direction: column;
+  gap:10px;
   align-items: center;
   margin-bottom: 24px;
 }

streaming-react-app/src/StreamingInterface.tsx CHANGED Viewed

@@ -30,7 +30,6 @@ import FormControlLabel from '@mui/material/FormControlLabel';
 import Radio from '@mui/material/Radio';
 import './StreamingInterface.css';
 import RoomConfig from './RoomConfig';
-import Divider from '@mui/material/Divider';
 import {useSocket} from './useSocket';
 import {RoomState} from './types/RoomState';
 import useStable from './useStable';
@@ -738,25 +737,25 @@ export default function StreamingInterface() {
       <Box
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore Not sure why it's complaining about complexity here
-        sx={{width: '100%', maxWidth: '660px', minWidth: '320px'}}>
         <div className="main-container-sra">
-          <div className="top-section-sra horizontal-padding-sra">
             <div className="header-container-sra">
               <img
                 src={"./logo.png"}
                 className="header-icon-sra"
                 alt="Hotdub Translation Logo"
-                height={24}
-                width={24}
               />
               <div>
-                <Typography variant="h1" sx={{color: '#65676B'}}>
                   Hotdub Real Time Translation
                 </Typography>
               </div>
             </div>
-            <Stack spacing="22px" direction="column">
               <Box>
                 <RoomConfig
                   roomState={roomState}
@@ -783,11 +782,11 @@ export default function StreamingInterface() {
                   </Box>
                 )}
               </Box>
               {!isSpeaker && (
                 <>
-                  <Divider />
                   <Stack spacing="12px" direction="column">
                     <FormLabel id="output-modes-radio-group-label">
                       Model
@@ -1127,7 +1126,7 @@ export default function StreamingInterface() {
                 </>
               )}
             </Stack>
-          </div>
           {debugParam && roomID != null && <DebugSection />}

 import Radio from '@mui/material/Radio';
 import './StreamingInterface.css';
 import RoomConfig from './RoomConfig';
 import {useSocket} from './useSocket';
 import {RoomState} from './types/RoomState';
 import useStable from './useStable';
       <Box
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore Not sure why it's complaining about complexity here
+        sx={{width: '100%', maxWidth: '800px', minWidth: '320px'}}>
         <div className="main-container-sra">
+          <Stack direction={{ xs: 'column', md: 'row' }} spacing={6} className="top-section-sra horizontal-padding-sra">
+            <Stack alignItems="center" spacing={4} sx={{flex:1}}>
             <div className="header-container-sra">
               <img
                 src={"./logo.png"}
                 className="header-icon-sra"
                 alt="Hotdub Translation Logo"
               />
               <div>
+                <Typography variant="h1" fontSize={18} sx={{color: '#65676B'}}>
                   Hotdub Real Time Translation
                 </Typography>
               </div>
             </div>
               <Box>
                 <RoomConfig
                   roomState={roomState}
                   </Box>
                 )}
               </Box>
+              </Stack>
+              <Stack spacing="22px" direction="column" sx={{flex:1}}>
               {!isSpeaker && (
                 <>
                   <Stack spacing="12px" direction="column">
                     <FormLabel id="output-modes-radio-group-label">
                       Model
                 </>
               )}
             </Stack>
+          </Stack>
           {debugParam && roomID != null && <DebugSection />}

streaming-react-app/src/theme.ts CHANGED Viewed

@@ -1,15 +1,33 @@
 import {createTheme} from '@mui/material/styles';
 const themeObject = {
   palette: {
-    background: {default: '#383838'},
     primary: {
-      main: '#465A69',
     },
-    info: {
-      main: '#0064E0',
     },
-    text: {primary: '#1C2A33'},
   },
   typography: {
     fontFamily: [

 import {createTheme} from '@mui/material/styles';
 const themeObject = {
+  breakpoints: {
+    values: {
+      xs: 0,
+      sm: 600,
+      md: 770,
+      lg: 1200,
+      xl: 1536,
+    },
+  },
+  // palette: {
+  //   background: {default: '#383838'},
+  //   primary: {
+  //     main: '#465A69',
+  //   },
+  //   info: {
+  //     main: '#0064E0',
+  //   },
+  //   text: {primary: '#1C2A33'},
+  // },
   palette: {
+    background: {default: '#000033'},
     primary: {
+      main: '#1976d2',
     },
+    secondary: {
+      main: '#dc004e',
     },
   },
   typography: {
     fontFamily: [