Mark Duppenthaler commited on
Commit
5aff120
1 Parent(s): bb98523

Frontend changes for max speakers

Browse files
streaming-react-app/src/StreamingInterface.tsx CHANGED
@@ -153,6 +153,8 @@ export default function StreamingInterface() {
153
 
154
  const isStreamConfiguredRef = useRef<boolean>(false);
155
 
 
 
156
  const [outputMode, setOutputMode] = useState<SupportedOutputMode>('s2s&t');
157
  const [inputSource, setInputSource] =
158
  useState<SupportedInputSource>('userMedia');
@@ -165,9 +167,6 @@ export default function StreamingInterface() {
165
 
166
  // Dynamic Params:
167
  const [targetLang, setTargetLang] = useState<string | null>(null);
168
- const [enableExpressive, setEnableExpressive] = useState<boolean | null>(
169
- null,
170
- );
171
 
172
  const [serverDebugFlag, setServerDebugFlag] = useState<boolean>(
173
  debugParam ?? false,
@@ -249,7 +248,6 @@ export default function StreamingInterface() {
249
  setAgent((prevAgent) => {
250
  if (prevAgent?.name !== newAgent?.name) {
251
  setTargetLang(newAgent?.targetLangs[0] ?? null);
252
- setEnableExpressive(null);
253
  }
254
  return newAgent;
255
  });
@@ -308,6 +306,7 @@ export default function StreamingInterface() {
308
  console.log('[configureStreamAsync] sending config', config);
309
 
310
  socket.emit('configure_stream', config, (statusObject) => {
 
311
  if (statusObject.status === 'ok') {
312
  isStreamConfiguredRef.current = true;
313
  console.debug(
@@ -425,7 +424,6 @@ export default function StreamingInterface() {
425
  // available before actually configuring and starting the stream
426
  const fullDynamicConfig: DynamicConfig = {
427
  targetLanguage: targetLang,
428
- expressive: enableExpressive,
429
  };
430
 
431
  await onSetDynamicConfig(fullDynamicConfig);
@@ -755,16 +753,16 @@ export default function StreamingInterface() {
755
  <div className="header-container-sra">
756
  <div>
757
  <Typography variant="body2" sx={{color: '#65676B'}}>
758
- 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`.
759
  <br/>
760
- In your duplicated space, join a room as speaker or listener (or both), and share the
761
  room code to invite listeners.
762
  <br/>
763
  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.
764
  <br/>
765
  SeamlessStreaming model is a research model and is not released
766
- for production deployment. The streaming quality is closely
767
- related to proper VAD segmentation. It works best if you pause
768
  every couple of sentences, or you may wish adjust the VAD threshold
769
  in the model config. The real-time performance will degrade
770
  if you try streaming multiple speakers at the same time.
@@ -911,28 +909,6 @@ export default function StreamingInterface() {
911
  spacing={1}
912
  alignItems="flex-start"
913
  sx={{flexGrow: 1}}>
914
- {currentAgent?.dynamicParams?.includes(
915
- 'expressive',
916
- ) && (
917
- <FormControlLabel
918
- control={
919
- <Switch
920
- checked={enableExpressive ?? false}
921
- onChange={(
922
- event: React.ChangeEvent<HTMLInputElement>,
923
- ) => {
924
- const newValue = event.target.checked;
925
- setEnableExpressive(newValue);
926
- onSetDynamicConfig({
927
- expressive: newValue,
928
- });
929
- }}
930
- />
931
- }
932
- label="Expressive"
933
- />
934
- )}
935
-
936
  {isListener && (
937
  <Box
938
  sx={{
@@ -1115,6 +1091,14 @@ export default function StreamingInterface() {
1115
  </div>
1116
  )}
1117
 
 
 
 
 
 
 
 
 
1118
  {serverState != null &&
1119
  serverState.totalActiveTranscoders >=
1120
  TOTAL_ACTIVE_TRANSCODER_WARNING_THRESHOLD && (
 
153
 
154
  const isStreamConfiguredRef = useRef<boolean>(false);
155
 
156
+ const [hasMaxSpeakers, setHasMaxSpeakers] = useState<boolean>(false);
157
+
158
  const [outputMode, setOutputMode] = useState<SupportedOutputMode>('s2s&t');
159
  const [inputSource, setInputSource] =
160
  useState<SupportedInputSource>('userMedia');
 
167
 
168
  // Dynamic Params:
169
  const [targetLang, setTargetLang] = useState<string | null>(null);
 
 
 
170
 
171
  const [serverDebugFlag, setServerDebugFlag] = useState<boolean>(
172
  debugParam ?? false,
 
248
  setAgent((prevAgent) => {
249
  if (prevAgent?.name !== newAgent?.name) {
250
  setTargetLang(newAgent?.targetLangs[0] ?? null);
 
251
  }
252
  return newAgent;
253
  });
 
306
  console.log('[configureStreamAsync] sending config', config);
307
 
308
  socket.emit('configure_stream', config, (statusObject) => {
309
+ setHasMaxSpeakers(statusObject.message === 'max_speakers')
310
  if (statusObject.status === 'ok') {
311
  isStreamConfiguredRef.current = true;
312
  console.debug(
 
424
  // available before actually configuring and starting the stream
425
  const fullDynamicConfig: DynamicConfig = {
426
  targetLanguage: targetLang,
 
427
  };
428
 
429
  await onSetDynamicConfig(fullDynamicConfig);
 
753
  <div className="header-container-sra">
754
  <div>
755
  <Typography variant="body2" sx={{color: '#65676B'}}>
756
+ 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` and `ONE_USER_ONLY`.
757
  <br/>
758
+ In your duplicated space, join a room as speaker or listener (or both), and share the
759
  room code to invite listeners.
760
  <br/>
761
  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.
762
  <br/>
763
  SeamlessStreaming model is a research model and is not released
764
+ for production deployment. The streaming quality is closely
765
+ related to proper VAD segmentation. It works best if you pause
766
  every couple of sentences, or you may wish adjust the VAD threshold
767
  in the model config. The real-time performance will degrade
768
  if you try streaming multiple speakers at the same time.
 
909
  spacing={1}
910
  alignItems="flex-start"
911
  sx={{flexGrow: 1}}>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
912
  {isListener && (
913
  <Box
914
  sx={{
 
1091
  </div>
1092
  )}
1093
 
1094
+
1095
+ {serverState != null && hasMaxSpeakers && (
1096
+ <div>
1097
+ <Alert severity="error">
1098
+ {`Maximum number of speakers reached. Please try again at a later time.`}
1099
+ </Alert>
1100
+ </div>
1101
+ )}
1102
  {serverState != null &&
1103
  serverState.totalActiveTranscoders >=
1104
  TOTAL_ACTIVE_TRANSCODER_WARNING_THRESHOLD && (