frontend_max_speakers (#15)

- Frontend changes for max speakers (5aff12044e3bdc4cadaca34ac360c71ee2a2f580)
- Merge (a29f052eedab34bb7f5dc17eee508449dca338c5)

streaming-react-app/src/StreamingInterface.tsx

@@ -152,6 +152,7 @@ export default function StreamingInterface() {
     useState<StreamingStatus>('stopped');
 
   const isStreamConfiguredRef = useRef<boolean>(false);
+  const [hasMaxSpeakers, setHasMaxSpeakers] = useState<boolean>(false);
 
   const [outputMode, setOutputMode] = useState<SupportedOutputMode>('s2s&t');
   const [inputSource, setInputSource] =
@@ -308,6 +309,7 @@ export default function StreamingInterface() {
       console.log('[configureStreamAsync] sending config', config);
 
       socket.emit('configure_stream', config, (statusObject) => {
+        setHasMaxSpeakers(statusObject.message === 'max_speakers')
         if (statusObject.status === 'ok') {
           isStreamConfiguredRef.current = true;
           console.debug(
@@ -755,16 +757,16 @@ export default function StreamingInterface() {
             <div className="header-container-sra">
               <div>
                 <Typography variant="body2" sx={{color: '#65676B'}}>
-                  Welcome! This space is locked, please duplicate the space <a target="_blank" rel="noopener noreferrer" href="https://huggingface.co/spaces/facebook/seamless-streaming?duplicate=true">here</a>. Unset the environment variable `LOCK_SERVER_COMPLETELY`.
+                  Welcome! This space is locked to one speaker at a time, please duplicate the space <a target="_blank" rel="noopener noreferrer" href="https://huggingface.co/spaces/facebook/seamless-streaming?duplicate=true">here</a>. Unset the environment variable `LOCK_SERVER_COMPLETELY`.
                   <br/>
-                  In your duplicated space, join a room as speaker or listener (or both), and share the 
+                  In your duplicated space, join a room as speaker or listener (or both), and share the
                   room code to invite listeners.
                   <br/>
                   Check out the seamless_communication <a target="_blank" rel="noopener noreferrer" href="https://github.com/facebookresearch/seamless_communication/tree/main">README</a> for more information.
                   <br/>
                   SeamlessStreaming model is a research model and is not released
-                  for production deployment. The streaming quality is closely 
-                  related to proper VAD segmentation. It works best if you pause 
+                  for production deployment. The streaming quality is closely
+                  related to proper VAD segmentation. It works best if you pause
                   every couple of sentences, or you may wish adjust the VAD threshold
                   in the model config. The real-time performance will degrade
                   if you try streaming multiple speakers at the same time.
@@ -1114,7 +1116,13 @@ export default function StreamingInterface() {
                       </Alert>
                     </div>
                   )}
-
+                  {serverState != null && hasMaxSpeakers && (
+                    <div>
+                      <Alert severity="error">
+                        {`Maximum number of speakers reached. Please try again at a later time.`}
+                      </Alert>
+                    </div>
+                  )}
                   {serverState != null &&
                     serverState.totalActiveTranscoders >=
                       TOTAL_ACTIVE_TRANSCODER_WARNING_THRESHOLD && (