Hugging Face's logo

Spaces:
Hyathi
/
hotdub
Paused

App Files Community
Aman Sharma commited on
Commit
197b11e
·
unverified ·
2 Parent(s): 3ada77e718af96

Merge pull request #1 from Hyathi/change-ui

Browse files
Files changed (12) hide show
  1. streaming-react-app/index.html +23 -19
  2. streaming-react-app/public/android-chrome-192x192.png +0 -0
  3. streaming-react-app/public/android-chrome-512x512.png +0 -0
  4. streaming-react-app/public/apple-touch-icon.png +0 -0
  5. streaming-react-app/public/favicon-16x16.png +0 -0
  6. streaming-react-app/public/favicon-32x32.png +0 -0
  7. streaming-react-app/public/favicon.ico +0 -0
  8. streaming-react-app/public/logo.png +0 -0
  9. streaming-react-app/src/RoomConfig.tsx +7 -3
  10. streaming-react-app/src/StreamingInterface.css +2 -5
  11. streaming-react-app/src/StreamingInterface.tsx +9 -10
  12. streaming-react-app/src/theme.ts +23 -5
streaming-react-app/index.html CHANGED
@@ -1,22 +1,26 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
3
 
4
- <head>
5
- <meta charset="UTF-8" />
6
- <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
7
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
8
- <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
9
- <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
10
- <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
11
- <link rel="manifest" href="/site.webmanifest">
12
- <title>Hotdub Real Time Translation</title>
13
- <meta name="description"
14
- content="Hotdub: Your gateway to instant understanding through cutting-edge real-time translation technology." />
15
- </head>
16
-
17
- <body>
18
- <div id="root"></div>
19
- <script type="module" src="/src/main.tsx"></script>
20
- </body>
21
-
22
- </html>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
+ <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
8
+ <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
9
+ <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
10
+ <link rel="manifest" href="/site.webmanifest" />
11
+ <title>Hotdub Real Time Translation</title>
12
+ <meta
13
+ name="description"
14
+ content="Hotdub: Your gateway to instant understanding through cutting-edge real-time translation technology."
15
+ />
16
+ <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
17
+ <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
18
+ <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
19
+ <link rel="manifest" href="/site.webmanifest" />
20
+ </head>
21
 
22
+ <body>
23
+ <div id="root"></div>
24
+ <script type="module" src="/src/main.tsx"></script>
25
+ </body>
26
+ </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
streaming-react-app/public/android-chrome-192x192.png CHANGED
streaming-react-app/public/android-chrome-512x512.png ADDED
streaming-react-app/public/apple-touch-icon.png CHANGED
streaming-react-app/public/favicon-16x16.png CHANGED
streaming-react-app/public/favicon-32x32.png CHANGED
streaming-react-app/public/favicon.ico CHANGED
streaming-react-app/public/logo.png CHANGED
streaming-react-app/src/RoomConfig.tsx CHANGED
@@ -149,7 +149,7 @@ export default function RoomConfig({
149
 
150
  return (
151
  <Stack direction="column" spacing="12px">
152
- <Stack direction="row" spacing="12px" sx={{alignItems: 'center'}}>
153
  <TextField
154
  size="small"
155
  label="Room Code"
@@ -166,9 +166,10 @@ export default function RoomConfig({
166
  setRoomIDError(true);
167
  }
168
  }}
169
- sx={{width: '8em'}}
170
  />
171
-
 
172
  <div>
173
  <Button
174
  variant="contained"
@@ -197,8 +198,10 @@ export default function RoomConfig({
197
  </div>
198
  )}
199
  </Stack>
 
200
 
201
  <FormGroup>
 
202
  {Object.keys(roles).map((role) => {
203
  return (
204
  <FormControlLabel
@@ -219,6 +222,7 @@ export default function RoomConfig({
219
  />
220
  );
221
  })}
 
222
 
223
  {urlParams.enableServerLock && roles['speaker'] === true && (
224
  <>
 
149
 
150
  return (
151
  <Stack direction="column" spacing="12px">
152
+ <Stack direction="column" spacing={2} sx={{alignItems: 'center'}}>
153
  <TextField
154
  size="small"
155
  label="Room Code"
 
166
  setRoomIDError(true);
167
  }
168
  }}
169
+ sx={{width: '100%'}}
170
  />
171
+
172
+ <Stack direction="row" spacing={4} sx={{alignItems: 'center'}}>
173
  <div>
174
  <Button
175
  variant="contained"
 
198
  </div>
199
  )}
200
  </Stack>
201
+ </Stack>
202
 
203
  <FormGroup>
204
+ <Stack direction="row" justifyContent="space-between">
205
  {Object.keys(roles).map((role) => {
206
  return (
207
  <FormControlLabel
 
222
  />
223
  );
224
  })}
225
+ </Stack>
226
 
227
  {urlParams.enableServerLock && roles['speaker'] === true && (
228
  <>
streaming-react-app/src/StreamingInterface.css CHANGED
@@ -22,9 +22,6 @@
22
  .top-section-sra {
23
  padding-top: 24px;
24
  margin-bottom: 24px;
25
- display: flex;
26
- flex-direction: column;
27
- justify-content: flex-start;
28
  }
29
 
30
  .horizontal-padding-sra {
@@ -34,8 +31,8 @@
34
 
35
  .header-container-sra {
36
  display: flex;
37
- flex-direction: row;
38
- justify-content: flex-start;
39
  align-items: center;
40
  margin-bottom: 24px;
41
  }
 
22
  .top-section-sra {
23
  padding-top: 24px;
24
  margin-bottom: 24px;
 
 
 
25
  }
26
 
27
  .horizontal-padding-sra {
 
31
 
32
  .header-container-sra {
33
  display: flex;
34
+ flex-direction: column;
35
+ gap:10px;
36
  align-items: center;
37
  margin-bottom: 24px;
38
  }
streaming-react-app/src/StreamingInterface.tsx CHANGED
@@ -30,7 +30,6 @@ import FormControlLabel from '@mui/material/FormControlLabel';
30
  import Radio from '@mui/material/Radio';
31
  import './StreamingInterface.css';
32
  import RoomConfig from './RoomConfig';
33
- import Divider from '@mui/material/Divider';
34
  import {useSocket} from './useSocket';
35
  import {RoomState} from './types/RoomState';
36
  import useStable from './useStable';
@@ -738,25 +737,25 @@ export default function StreamingInterface() {
738
  <Box
739
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
740
  // @ts-ignore Not sure why it's complaining about complexity here
741
- sx={{width: '100%', maxWidth: '660px', minWidth: '320px'}}>
742
  <div className="main-container-sra">
743
- <div className="top-section-sra horizontal-padding-sra">
 
744
  <div className="header-container-sra">
745
  <img
746
  src={"./logo.png"}
747
  className="header-icon-sra"
748
  alt="Hotdub Translation Logo"
749
- height={24}
750
- width={24}
751
  />
752
 
753
  <div>
754
- <Typography variant="h1" sx={{color: '#65676B'}}>
755
  Hotdub Real Time Translation
756
  </Typography>
757
  </div>
758
  </div>
759
- <Stack spacing="22px" direction="column">
760
  <Box>
761
  <RoomConfig
762
  roomState={roomState}
@@ -783,11 +782,11 @@ export default function StreamingInterface() {
783
  </Box>
784
  )}
785
  </Box>
 
786
 
 
787
  {!isSpeaker && (
788
  <>
789
- <Divider />
790
-
791
  <Stack spacing="12px" direction="column">
792
  <FormLabel id="output-modes-radio-group-label">
793
  Model
@@ -1127,7 +1126,7 @@ export default function StreamingInterface() {
1127
  </>
1128
  )}
1129
  </Stack>
1130
- </div>
1131
 
1132
  {debugParam && roomID != null && <DebugSection />}
1133
 
 
30
  import Radio from '@mui/material/Radio';
31
  import './StreamingInterface.css';
32
  import RoomConfig from './RoomConfig';
 
33
  import {useSocket} from './useSocket';
34
  import {RoomState} from './types/RoomState';
35
  import useStable from './useStable';
 
737
  <Box
738
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
739
  // @ts-ignore Not sure why it's complaining about complexity here
740
+ sx={{width: '100%', maxWidth: '800px', minWidth: '320px'}}>
741
  <div className="main-container-sra">
742
+ <Stack direction={{ xs: 'column', md: 'row' }} spacing={6} className="top-section-sra horizontal-padding-sra">
743
+ <Stack alignItems="center" spacing={4} sx={{flex:1}}>
744
  <div className="header-container-sra">
745
  <img
746
  src={"./logo.png"}
747
  className="header-icon-sra"
748
  alt="Hotdub Translation Logo"
749
+
 
750
  />
751
 
752
  <div>
753
+ <Typography variant="h1" fontSize={18} sx={{color: '#65676B'}}>
754
  Hotdub Real Time Translation
755
  </Typography>
756
  </div>
757
  </div>
758
+
759
  <Box>
760
  <RoomConfig
761
  roomState={roomState}
 
782
  </Box>
783
  )}
784
  </Box>
785
+ </Stack>
786
 
787
+ <Stack spacing="22px" direction="column" sx={{flex:1}}>
788
  {!isSpeaker && (
789
  <>
 
 
790
  <Stack spacing="12px" direction="column">
791
  <FormLabel id="output-modes-radio-group-label">
792
  Model
 
1126
  </>
1127
  )}
1128
  </Stack>
1129
+ </Stack>
1130
 
1131
  {debugParam && roomID != null && <DebugSection />}
1132
 
streaming-react-app/src/theme.ts CHANGED
@@ -1,15 +1,33 @@
1
  import {createTheme} from '@mui/material/styles';
2
 
3
  const themeObject = {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4
  palette: {
5
- background: {default: '#383838'},
6
  primary: {
7
- main: '#465A69',
8
  },
9
- info: {
10
- main: '#0064E0',
11
  },
12
- text: {primary: '#1C2A33'},
13
  },
14
  typography: {
15
  fontFamily: [
 
1
  import {createTheme} from '@mui/material/styles';
2
 
3
  const themeObject = {
4
+ breakpoints: {
5
+ values: {
6
+ xs: 0,
7
+ sm: 600,
8
+ md: 770,
9
+ lg: 1200,
10
+ xl: 1536,
11
+ },
12
+ },
13
+ // palette: {
14
+ // background: {default: '#383838'},
15
+ // primary: {
16
+ // main: '#465A69',
17
+ // },
18
+ // info: {
19
+ // main: '#0064E0',
20
+ // },
21
+ // text: {primary: '#1C2A33'},
22
+ // },
23
  palette: {
24
+ background: {default: '#000033'},
25
  primary: {
26
+ main: '#1976d2',
27
  },
28
+ secondary: {
29
+ main: '#dc004e',
30
  },
 
31
  },
32
  typography: {
33
  fontFamily: [