Remove unnecessary muxer and make pipeline list update based on cloud mode

Author: mjh1

frontend/src/App.tsx

@@ -1,16 +1,13 @@
 import { StreamPage } from "./pages/StreamPage";
 import { Toaster } from "./components/ui/sonner";
 import "./index.css";
-import { MuxerProvider } from "@/muxer";
 
 function App() {
   return (
-    <MuxerProvider width={512} height={512} fps={30} sendFps={30}>
-      <>
-        <StreamPage />
-        <Toaster />
-      </>
-    </MuxerProvider>
+    <>
+      <StreamPage />
+      <Toaster />
+    </>
   );
 }
 

frontend/src/components/SettingsPanel.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useEffect, useMemo } from "react";
 import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
 import {
   Select,
@@ -100,6 +100,27 @@ export function SettingsPanel({
   const [widthError, setWidthError] = useState<string | null>(null);
   const [seedError, setSeedError] = useState<string | null>(null);
 
+  // Get filtered pipeline IDs based on cloudMode
+  const filteredPipelineIds = useMemo(() => {
+    return Object.keys(PIPELINES).filter(id => {
+      const pipeline = PIPELINES[id];
+      const compatibility = pipeline.pipelineCompatibility || "local";
+
+      if (cloudMode) {
+        return compatibility === "cloud" || compatibility === "both";
+      } else {
+        return compatibility === "local" || compatibility === "both";
+      }
+    });
+  }, [cloudMode]);
+
+  // Auto-select first available pipeline if current selection is no longer available
+  useEffect(() => {
+    if (filteredPipelineIds.length > 0 && !filteredPipelineIds.includes(pipelineId)) {
+      onPipelineIdChange?.(filteredPipelineIds[0] as PipelineId);
+    }
+  }, [cloudMode, filteredPipelineIds, pipelineId, onPipelineIdChange]);
+
   const handlePipelineIdChange = (value: string) => {
     if (value in PIPELINES) {
       onPipelineIdChange?.(value as PipelineId);
@@ -229,7 +250,7 @@ export function SettingsPanel({
               <SelectValue placeholder="Select a pipeline" />
             </SelectTrigger>
             <SelectContent>
-              {Object.keys(PIPELINES).map(id => (
+              {filteredPipelineIds.map(id => (
                 <SelectItem key={id} value={id}>
                   {id}
                 </SelectItem>

frontend/src/components/WhipConnection.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { usePlaybackUrl } from "@/hooks/usePlaybackUrl";
-import { useMuxer } from "@/muxer";
 import { memo, useEffect, useRef } from "react";
 import { WhipClient } from "@/lib/WhipClient";
 
@@ -32,7 +31,6 @@ export const WhipConnection = memo(
     debugStats,
   }: WhipConnectionProps) => {
     const { setPlaybackUrl, setLoading } = usePlaybackUrl();
-    const muxer = useMuxer();
     const clientRef = useRef<WhipClient | null>(null);
     const streamRef = useRef<MediaStream | null>(stream);
 
@@ -89,12 +87,6 @@ export const WhipConnection = memo(
       setLoading,
     ]);
 
-    useEffect(() => {
-      const client = clientRef.current;
-      if (!client) return;
-      client.setMaxFramerate(muxer.sendFps);
-    }, [muxer.sendFps]);
-
     return null;
   },
 );

frontend/src/data/pipelines.ts

@@ -1,4 +1,5 @@
 export type PipelineCategory = "video-input" | "no-video-input";
+export type PipelineCompatibility = "local" | "cloud" | "both";
 
 export interface PipelineInfo {
   name: string;
@@ -11,6 +12,7 @@ export interface PipelineInfo {
   requiresModels?: boolean; // Whether this pipeline requires models to be downloaded
   defaultTemporalInterpolationMethod?: "linear" | "slerp"; // Default method for temporal interpolation
   defaultTemporalInterpolationSteps?: number; // Default number of steps for temporal interpolation
+  pipelineCompatibility?: PipelineCompatibility;
 }
 
 export const PIPELINES: Record<string, PipelineInfo> = {
@@ -58,6 +60,22 @@ export const PIPELINES: Record<string, PipelineInfo> = {
     defaultTemporalInterpolationMethod: "linear",
     defaultTemporalInterpolationSteps: 4,
   },
+  "sd-turbo": {
+    name: "SD-turbo",
+    docsUrl:
+      "",
+    about:
+      "",
+    modified: true,
+    category: "video-input",
+    defaultPrompt:
+      "",
+    estimatedVram: 32,
+    requiresModels: true,
+    defaultTemporalInterpolationMethod: "linear",
+    defaultTemporalInterpolationSteps: 4,
+    pipelineCompatibility: "cloud",
+  },
   passthrough: {
     name: "Passthrough",
     about:

frontend/src/main.tsx

@@ -4,7 +4,7 @@ import "./index.css";
 import App from "./App.tsx";
 
 createRoot(document.getElementById("root")!).render(
-  // <StrictMode>
+  <StrictMode>
     <App />
-  // </StrictMode>
+  </StrictMode>
 );