Clean up interface for HF, add instructions

streaming-react-app/package.json

@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite --host --strictPort",
-    "build": "vite build",
+    "build": "tsc && vite build",
     "preview": "vite preview",
     "clean:node-modules": "rm -rf node_modules/",
     "ts-check": "tsc --noEmit",

streaming-react-app/src/SocketWrapper.tsx

@@ -18,8 +18,7 @@ export default function SocketWrapper({children}) {
   const [socket, setSocket] = useState<Socket | null>(null);
   const [connected, setConnected] = useState<boolean | null>(null);
   // Default to true:
-  const [willAttemptReconnect, setWillAttemptReconnect] =
-    useState<boolean>(true);
+  const [willAttemptReconnect] = useState<boolean>(true);
   const serverIDRef = useRef<string | null>(null);
 
   const setAppResetKey = useContext(AppResetKeyContext);

streaming-react-app/src/StreamingInterface.tsx

@@ -58,7 +58,6 @@ import {CURSOR_BLINK_INTERVAL_MS} from './cursorBlinkInterval';
 import {getURLParams} from './URLParams';
 import debug from './debug';
 import DebugSection from './DebugSection';
-import Switch from '@mui/material/Switch';
 import {Grid} from '@mui/material';
 
 const AUDIO_STREAM_DEFAULTS: {
@@ -148,7 +147,6 @@ export default function StreamingInterface() {
   const [serverExceptions, setServerExceptions] = useState<
     Array<ServerExceptionData>
   >([]);
-  const [connectionError, setConnectionError] = useState<string | null>(null);
   const [roomState, setRoomState] = useState<RoomState | null>(null);
   const roomID = roomState?.room_id ?? null;
   const isSpeaker =
@@ -173,9 +171,6 @@ export default function StreamingInterface() {
 
   // Dynamic Params:
   const [targetLang, setTargetLang] = useState<string | null>(null);
-  const [enableExpressive, setEnableExpressive] = useState<boolean | null>(
-    null,
-  );
 
   const [serverDebugFlag, setServerDebugFlag] = useState<boolean>(
     debugParam ?? false,
@@ -257,7 +252,6 @@ export default function StreamingInterface() {
       setAgent((prevAgent) => {
         if (prevAgent?.name !== newAgent?.name) {
           setTargetLang(newAgent?.targetLangs[0] ?? null);
-          setEnableExpressive(null);
         }
         return newAgent;
       });
@@ -433,7 +427,6 @@ export default function StreamingInterface() {
       // available before actually configuring and starting the stream
       const fullDynamicConfig: DynamicConfig = {
         targetLanguage: targetLang,
-        expressive: enableExpressive,
       };
 
       await onSetDynamicConfig(fullDynamicConfig);
@@ -759,6 +752,11 @@ export default function StreamingInterface() {
                   Seamless Translation
                 </Typography>
               </div>
+              <div>
+                <Typography variant="body2" sx={{color: '#65676B'}}>
+                  Welcome! Join a room as speaker or listener (or both), and share the room code to invite listeners.
+                </Typography>
+              </div>
             </div>
 
             <Stack spacing="22px" direction="column">
@@ -832,11 +830,6 @@ export default function StreamingInterface() {
                       </Select>
                     </FormControl>
 
-                    <Typography variant="body2">
-                      {`Supported Source Languages: ${
-                        currentAgent?.sourceLangs.join(', ') ?? 'None'
-                      }`}
-                    </Typography>
                   </Stack>
 
                   <Stack spacing={0.5}>
@@ -902,28 +895,6 @@ export default function StreamingInterface() {
                           spacing={1}
                           alignItems="flex-start"
                           sx={{flexGrow: 1}}>
-                          {currentAgent?.dynamicParams?.includes(
-                            'expressive',
-                          ) && (
-                            <FormControlLabel
-                              control={
-                                <Switch
-                                  checked={enableExpressive ?? false}
-                                  onChange={(
-                                    event: React.ChangeEvent<HTMLInputElement>,
-                                  ) => {
-                                    const newValue = event.target.checked;
-                                    setEnableExpressive(newValue);
-                                    onSetDynamicConfig({
-                                      expressive: newValue,
-                                    });
-                                  }}
-                                />
-                              }
-                              label="Expressive"
-                            />
-                          )}
-
                           {isListener && (
                             <Box
                               sx={{
@@ -940,6 +911,13 @@ export default function StreamingInterface() {
                     </Grid>
                   </Stack>
 
+                  <Typography variant="body2">
+                    Note: we don't recommend echo cancellation, as it may distort 
+                    the input audio (dropping words/sentences) if there is output 
+                    audio playing. Instead, you should use headphones if you'd like 
+                    to listen to the output audio while speaking.
+                  </Typography>
+
                   <Stack
                     direction="row"
                     spacing={2}

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

@@ -125,8 +125,6 @@ export type DynamicConfig = {
   // targetLanguage: a 3-letter string representing the desired output language.
   // Supported languages are provided by the agent capabilities config
   targetLanguage: string;
-
-  expressive: boolean | null;
 };
 
 export type PartialDynamicConfig = Partial<DynamicConfig>;