imoroved ui

streaming-react-app/src/StreamingInterface.css

@@ -3,6 +3,8 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  width: 100%;
+  min-height: 100vh;
 }
 
 .main-container-sra {
@@ -11,8 +13,8 @@
   flex-direction: column;
   justify-content: flex-start;
   text-align: left;
-  margin: 16px;
-  margin-bottom: 36px;
+  padding: 16px;
+  padding-bottom: 36px;
   border-radius: 8px;
   box-shadow: 0px 24px 30px rgba(0, 0, 0, 0.3);
   border: 1px solid rgba(0, 0, 0, 0.05);
@@ -21,7 +23,7 @@
 
 .top-section-sra {
   padding-top: 24px;
-  margin-bottom: 24px;
+  padding-bottom: 24px;
 }
 
 .horizontal-padding-sra {
@@ -34,12 +36,12 @@
   flex-direction: column;
   gap:10px;
   align-items: center;
-  margin-bottom: 24px;
+  padding-bottom: 20px;
 }
 
 .header-icon-sra {
   display: block;
-  margin-right: 12px;
+  padding-right: 12px;
 }
 
 .translation-text-container-sra {
@@ -49,5 +51,5 @@
 }
 
 .text-chunk-sra {
-  margin-bottom: 12px;
+  padding-bottom: 12px;
 }

streaming-react-app/src/StreamingInterface.tsx

@@ -98,8 +98,8 @@ async function requestDisplayMediaAudioStream(
 }
 
 const buttonLabelMap: {[key in StreamingStatus]: string} = {
-  stopped: 'Start Streaming',
-  running: 'Stop Streaming',
+  stopped: 'Start broadcasting',
+  running: 'Stop broadcasting',
   starting: 'Starting...',
 };
 
@@ -734,13 +734,14 @@ export default function StreamingInterface() {
 
   return (
     <div className="app-wrapper-sra">
-      <Box
+      <div
         // 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'}}>
+        style={{width:"100%"}}
+        >
         <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}}>
+          <Stack alignItems="center" sx={{ flex: 1, borderRight: { md: 1 } }}>
             <div className="header-container-sra">
               <img
                 src={"./logo.png"}
@@ -750,13 +751,13 @@ export default function StreamingInterface() {
               />
 
               <div>
-                <Typography variant="h1" fontSize={18} sx={{color: '#65676B'}}>
+                <Typography variant="h1" fontSize={20} >
                   Hotdub Real Time Translation
                 </Typography>
               </div>
             </div>
             
-              <Box>
+              {/* <Box> */}
                 <RoomConfig
                   roomState={roomState}
                   serverState={serverState}
@@ -781,54 +782,13 @@ export default function StreamingInterface() {
                     {volumeSliderNode}
                   </Box>
                 )}
-              </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
-                    </FormLabel>
-                    <FormControl
-                      disabled={
-                        streamFixedConfigOptionsDisabled ||
-                        agentsCapabilities.length === 0
-                      }
-                      fullWidth
-                      sx={{minWidth: '14em'}}>
-                      <InputLabel id="model-selector-input-label">
-                        Model
-                      </InputLabel>
-                      <Select
-                        labelId="model-selector-input-label"
-                        label="Model"
-                        onChange={(e: SelectChangeEvent) => {
-                          const newAgent =
-                            agentsCapabilities.find(
-                              (agent) => e.target.value === agent.name,
-                            ) ?? null;
-                          if (newAgent == null) {
-                            console.error(
-                              'Unable to find agent with name',
-                              e.target.value,
-                            );
-                          }
-                          setAgentAndUpdateParams(newAgent);
-                        }}
-                        value={model ?? ''}>
-                        {agentsCapabilities.map((agent) => (
-                          <MenuItem value={agent.name} key={agent.name}>
-                            Hotdub Real Time Translation
-                          </MenuItem>
-                        ))}
-                      </Select>
-                    </FormControl>
-
-                  </Stack>
-
-                  <Stack spacing={0.5}>
+                <Stack spacing={0.5}>
                     <FormLabel id="output-modes-radio-group-label">
                       Output
                     </FormLabel>
@@ -836,7 +796,7 @@ export default function StreamingInterface() {
                     <Box sx={{paddingTop: 2, paddingBottom: 1}}>
                       <FormControl fullWidth sx={{minWidth: '14em'}}>
                         <InputLabel id="target-selector-input-label">
-                          Target Language
+                           Language
                         </InputLabel>
                         <Select
                           labelId="target-selector-input-label"
@@ -934,14 +894,56 @@ export default function StreamingInterface() {
                     </Grid>
                   </Stack>
 
+                  <Stack spacing="12px" direction="column">
+                    <FormLabel id="output-modes-radio-group-label">
+                      Model
+                    </FormLabel>
+                    <FormControl
+                      disabled={
+                        streamFixedConfigOptionsDisabled ||
+                        agentsCapabilities.length === 0
+                      }
+                      fullWidth
+                      sx={{minWidth: '14em'}}>
+                      <InputLabel id="model-selector-input-label">
+                        Model
+                      </InputLabel>
+                      <Select
+                        labelId="model-selector-input-label"
+                        label="Model"
+                        onChange={(e: SelectChangeEvent) => {
+                          const newAgent =
+                            agentsCapabilities.find(
+                              (agent) => e.target.value === agent.name,
+                            ) ?? null;
+                          if (newAgent == null) {
+                            console.error(
+                              'Unable to find agent with name',
+                              e.target.value,
+                            );
+                          }
+                          setAgentAndUpdateParams(newAgent);
+                        }}
+                        value={model ?? ''}>
+                        {agentsCapabilities.map((agent) => (
+                          <MenuItem value={agent.name} key={agent.name}>
+                            Hotdub Real Time Translation
+                          </MenuItem>
+                        ))}
+                      </Select>
+                    </FormControl>
+
+                  </Stack>
+
+
                   <Stack
                     direction="row"
-                    spacing={2}
-                    justifyContent="space-between">
-                    <Box sx={{flex: 1}}>
+                    // spacing={2}
+                    justifyContent="space-between" >
+                    <Box >
                       <FormControl disabled={streamFixedConfigOptionsDisabled}>
                         <FormLabel id="input-source-radio-group-label">
-                          Input Source
+                        Audio Input
                         </FormLabel>
                         <RadioGroup
                           aria-labelledby="input-source-radio-group-label"
@@ -964,7 +966,7 @@ export default function StreamingInterface() {
                       </FormControl>
                     </Box>
 
-                    <Box sx={{flex: 1, flexGrow: 2}}>
+                    <Box >
                     <FormControl disabled={streamFixedConfigOptionsDisabled}>
                         <FormLabel>Options</FormLabel>
                         <FormControlLabel
@@ -982,7 +984,7 @@ export default function StreamingInterface() {
                               }
                             />
                           }
-                          label="Noise Suppression"
+                          label="Noise Reduction"
                         />
                         <FormControlLabel
                           control={
@@ -999,7 +1001,7 @@ export default function StreamingInterface() {
                               }
                             />
                           }
-                          label="Echo Cancellation (not recommended)"
+                          label="Echo Reduction"
                         />
                         <FormControlLabel
                           control={
@@ -1010,7 +1012,7 @@ export default function StreamingInterface() {
                               ) => setServerDebugFlag(event.target.checked)}
                             />
                           }
-                          label="Enable Server Debugging"
+                          label="Debug Mode"
                         />
                       </FormControl>
                     </Box>
@@ -1038,9 +1040,10 @@ export default function StreamingInterface() {
                     </div>
                   )}
 
-                  <Stack direction="row" spacing={2}>
+                  <Stack direction="row" spacing={6} justifyContent="center">
                     {streamingStatus === 'stopped' ? (
                       <Button
+                      sx={{borderRadius: "20px"}}
                         variant="contained"
                         onClick={startStreaming}
                         disabled={
@@ -1185,7 +1188,7 @@ export default function StreamingInterface() {
             </Stack>
           </div> */}
         </div>
-      </Box>
+      </div>
     </div>
   );
 }

streaming-react-app/src/theme.ts

@@ -21,7 +21,6 @@ const themeObject = {
   //   text: {primary: '#1C2A33'},
   // },
   palette: {
-    background: {default: '#000033'},
     primary: {
       main: '#1976d2',
     },

streaming-react-app/src/types/StreamingTypes.ts

@@ -54,7 +54,7 @@ export const SUPPORTED_INPUT_SOURCES: Array<{
   label: string;
 }> = [
   {value: 'userMedia', label: 'Microphone'},
-  {value: 'displayMedia', label: 'Browser Tab (Chrome only)'},
+  {value: 'displayMedia', label: 'Browser Tab'},
 ];
 
 export type StartStreamEventConfig = {