diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index cf45e47ba..f7516238c 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -22,7 +22,8 @@
         "react": "^19.1.1",
         "react-dom": "^19.1.1",
         "sonner": "^2.0.7",
-        "tailwind-merge": "^3.3.1"
+        "tailwind-merge": "^3.3.1",
+        "zustand": "^4.5.2"
       },
       "devDependencies": {
         "@eslint/js": "^9.33.0",
@@ -5143,6 +5144,43 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/zustand": {
+      "version": "4.5.2",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.2.tgz",
+      "integrity": "sha512-2cN1tPkDVkwCy5ickKrI7vijSjPksFRfqS6237NzT0vqSsztTNnQdHw9mmN7uBdk3gceVXU0a+21jFzFzAc9+g==",
+      "license": "MIT",
+      "dependencies": {
+        "use-sync-external-store": "1.2.0"
+      },
+      "engines": {
+        "node": ">=12.7.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.8",
+        "immer": ">=9.0.6",
+        "react": ">=16.8"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/zustand/node_modules/use-sync-external-store": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
+      "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
     }
   }
 }
diff --git a/frontend/package.json b/frontend/package.json
index 1ff5b34cd..ddd984206 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -28,7 +28,8 @@
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "sonner": "^2.0.7",
-    "tailwind-merge": "^3.3.1"
+    "tailwind-merge": "^3.3.1",
+    "zustand": "^4.5.2"
   },
   "devDependencies": {
     "@eslint/js": "^9.33.0",
diff --git a/frontend/src/components/InputAndControlsPanel.tsx b/frontend/src/components/InputAndControlsPanel.tsx
index ac28dc21f..710bc7144 100644
--- a/frontend/src/components/InputAndControlsPanel.tsx
+++ b/frontend/src/components/InputAndControlsPanel.tsx
@@ -49,6 +49,7 @@ interface InputAndControlsPanelProps {
   timelinePrompts?: TimelinePrompt[];
   transitionSteps: number;
   onTransitionStepsChange: (steps: number) => void;
+  cloudMode?: boolean;
 }
 
 export function InputAndControlsPanel({
@@ -84,6 +85,7 @@ export function InputAndControlsPanel({
   timelinePrompts: _timelinePrompts = [],
   transitionSteps,
   onTransitionStepsChange,
+  cloudMode = false,
 }: InputAndControlsPanelProps) {
   // Helper function to determine if playhead is at the end of timeline
   const isAtEndOfTimeline = () => {
@@ -271,6 +273,7 @@ export function InputAndControlsPanel({
                     transitionSteps={transitionSteps}
                     onTransitionStepsChange={onTransitionStepsChange}
                     timelinePrompts={_timelinePrompts}
+                    cloudMode={cloudMode}
                   />
                 )}
               </div>
diff --git a/frontend/src/components/PromptInput.tsx b/frontend/src/components/PromptInput.tsx
index 7d1ffc23b..6e59f890b 100644
--- a/frontend/src/components/PromptInput.tsx
+++ b/frontend/src/components/PromptInput.tsx
@@ -32,6 +32,7 @@ interface PromptInputProps {
   transitionSteps?: number;
   onTransitionStepsChange?: (steps: number) => void;
   timelinePrompts?: TimelinePrompt[];
+  cloudMode?: boolean;
 }
 
 export function PromptInput({
@@ -51,6 +52,7 @@ export function PromptInput({
   transitionSteps = 4,
   onTransitionStepsChange,
   timelinePrompts = [],
+  cloudMode = false,
 }: PromptInputProps) {
   const [isProcessing, setIsProcessing] = useState(false);
   const [focusedIndex, setFocusedIndex] = useState<number | null>(null);
@@ -160,7 +162,8 @@ export function PromptInput({
           />
         </div>
 
-        <div className="space-y-2">
+      <div className="space-y-2">
+        {!cloudMode && (
           <TemporalTransitionControls
             transitionSteps={transitionSteps}
             onTransitionStepsChange={steps => onTransitionStepsChange?.(steps)}
@@ -171,42 +174,43 @@ export function PromptInput({
             disabled={disabled || !isStreaming || timelinePrompts.length === 0}
             className="space-y-2"
           />
+        )}
 
-          {/* Add/Submit buttons - Bottom row */}
-          <div className="flex items-center justify-end gap-2">
-            {managedPrompts.length < 4 && (
-              <Button
-                onMouseDown={e => {
-                  e.preventDefault();
-                  handleAddPrompt();
-                }}
-                disabled={disabled}
-                size="sm"
-                variant="ghost"
-                className="rounded-full w-8 h-8 p-0"
-              >
-                <Plus className="h-4 w-4" />
-              </Button>
-            )}
+        {/* Add/Submit buttons - Bottom row */}
+        <div className="flex items-center justify-end gap-2">
+          {managedPrompts.length < 4 && (
             <Button
               onMouseDown={e => {
                 e.preventDefault();
-                handleSubmit();
+                handleAddPrompt();
               }}
-              disabled={
-                disabled ||
-                !managedPrompts.some(p => p.text.trim()) ||
-                isProcessing
-              }
+              disabled={disabled}
               size="sm"
-              className="rounded-full w-8 h-8 p-0 bg-black hover:bg-gray-800 text-white disabled:opacity-50 disabled:cursor-not-allowed"
+              variant="ghost"
+              className="rounded-full w-8 h-8 p-0"
             >
-              {isProcessing ? "..." : <ArrowUp className="h-4 w-4" />}
+              <Plus className="h-4 w-4" />
             </Button>
-          </div>
+          )}
+          <Button
+            onMouseDown={e => {
+              e.preventDefault();
+              handleSubmit();
+            }}
+            disabled={
+              disabled ||
+              !managedPrompts.some(p => p.text.trim()) ||
+              isProcessing
+            }
+            size="sm"
+            className="rounded-full w-8 h-8 p-0 bg-black hover:bg-gray-800 text-white disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            {isProcessing ? "..." : <ArrowUp className="h-4 w-4" />}
+          </Button>
         </div>
       </div>
-    );
+    </div>
+  );
   }
 
   // Multiple prompts mode: show weights and controls
@@ -241,43 +245,47 @@ export function PromptInput({
       })}
 
       <div className="space-y-2">
-        {/* Spatial Blend - only for multiple prompts */}
-        {managedPrompts.length >= 2 && (
-          <div className="flex items-center justify-between gap-2">
-            <span className="text-xs text-muted-foreground">
-              Spatial Blend:
-            </span>
-            <Select
-              value={interpolationMethod}
-              onValueChange={value =>
-                onInterpolationMethodChange?.(value as "linear" | "slerp")
+        {!cloudMode && (
+          <>
+            {/* Spatial Blend - only for multiple prompts */}
+            {managedPrompts.length >= 2 && (
+              <div className="flex items-center justify-between gap-2">
+                <span className="text-xs text-muted-foreground">
+                  Spatial Blend:
+                </span>
+                <Select
+                  value={interpolationMethod}
+                  onValueChange={value =>
+                    onInterpolationMethodChange?.(value as "linear" | "slerp")
+                  }
+                  disabled={disabled}
+                >
+                  <SelectTrigger className="w-24 h-6 text-xs">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="linear">Linear</SelectItem>
+                    <SelectItem value="slerp" disabled={managedPrompts.length > 2}>
+                      Slerp
+                    </SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            )}
+
+            <TemporalTransitionControls
+              transitionSteps={transitionSteps}
+              onTransitionStepsChange={steps => onTransitionStepsChange?.(steps)}
+              temporalInterpolationMethod={temporalInterpolationMethod}
+              onTemporalInterpolationMethodChange={method =>
+                onTemporalInterpolationMethodChange?.(method)
               }
-              disabled={disabled}
-            >
-              <SelectTrigger className="w-24 h-6 text-xs">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="linear">Linear</SelectItem>
-                <SelectItem value="slerp" disabled={managedPrompts.length > 2}>
-                  Slerp
-                </SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
+              disabled={disabled || !isStreaming || timelinePrompts.length === 0}
+              className="space-y-2"
+            />
+          </>
         )}
 
-        <TemporalTransitionControls
-          transitionSteps={transitionSteps}
-          onTransitionStepsChange={steps => onTransitionStepsChange?.(steps)}
-          temporalInterpolationMethod={temporalInterpolationMethod}
-          onTemporalInterpolationMethodChange={method =>
-            onTemporalInterpolationMethodChange?.(method)
-          }
-          disabled={disabled || !isStreaming || timelinePrompts.length === 0}
-          className="space-y-2"
-        />
-
         {/* Add/Submit buttons - Bottom row */}
         <div className="flex items-center justify-end gap-2">
           {managedPrompts.length < 4 && (
diff --git a/frontend/src/components/PromptInputWithTimeline.tsx b/frontend/src/components/PromptInputWithTimeline.tsx
index f6d3cf7fd..d4a52991a 100644
--- a/frontend/src/components/PromptInputWithTimeline.tsx
+++ b/frontend/src/components/PromptInputWithTimeline.tsx
@@ -255,7 +255,7 @@ export function PromptInputWithTimeline({
       }
       return false;
     }
-    return isStreaming; // Already streaming
+    return true; // Already streaming
   }, [isStreaming, onStartStream]);
 
   // Check if at end of timeline
@@ -289,8 +289,10 @@ export function PromptInputWithTimeline({
       setIsLive(true);
       onLiveStateChange?.(true);
 
+      console.log("[PromptInputWithTimeline] handleStartPlayback", prompts.length);
       // Only create a new live prompt if there are no prompts at all in the timeline
       if (prompts.length === 0) {
+        console.log("[PromptInputWithTimeline] Creating new live prompt ", prompts);
         const streamStartedAgain = await initializeStream();
         if (streamStartedAgain) {
           const livePrompt = buildLivePromptFromCurrent(
diff --git a/frontend/src/components/SettingsPanel.tsx b/frontend/src/components/SettingsPanel.tsx
index 4d4d6b085..0df1c5eb3 100644
--- a/frontend/src/components/SettingsPanel.tsx
+++ b/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,
@@ -36,6 +36,8 @@ interface SettingsPanelProps {
   onPipelineIdChange?: (pipelineId: PipelineId) => void;
   isStreaming?: boolean;
   isDownloading?: boolean;
+  cloudMode?: boolean;
+  onCloudModeChange?: (enabled: boolean) => void;
   resolution?: {
     height: number;
     width: number;
@@ -68,6 +70,8 @@ export function SettingsPanel({
   onPipelineIdChange,
   isStreaming = false,
   isDownloading = false,
+  cloudMode = false,
+  onCloudModeChange,
   resolution,
   onResolutionChange,
   seed = 42,
@@ -105,6 +109,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);
@@ -136,6 +161,13 @@ export function SettingsPanel({
       } else {
         setWidthError(`Must be at most ${maxValue}`);
       }
+    } else if (cloudMode && value % 64 !== 0) {
+      // In cloud mode, dimension must be a multiple of 64
+      if (dimension === "height") {
+        setHeightError(`Must be a multiple of 64 in cloud mode`);
+      } else {
+        setWidthError(`Must be a multiple of 64 in cloud mode`);
+      }
     } else {
       // Clear error if valid
       if (dimension === "height") {
@@ -154,7 +186,18 @@ export function SettingsPanel({
 
   const incrementResolution = (dimension: "height" | "width") => {
     const maxValue = 2048;
-    const newValue = Math.min(maxValue, effectiveResolution[dimension] + 1);
+    const currentValue = effectiveResolution[dimension];
+
+    let newValue: number;
+    if (cloudMode && currentValue % 64 !== 0) {
+      // Snap to next multiple of 64
+      newValue = Math.ceil(currentValue / 64) * 64;
+    } else {
+      const step = cloudMode ? 64 : 1;
+      newValue = currentValue + step;
+    }
+
+    newValue = Math.min(maxValue, newValue);
     handleResolutionChange(dimension, newValue);
   };
 
@@ -165,7 +208,18 @@ export function SettingsPanel({
       pipelineId === "krea-realtime-video"
         ? MIN_DIMENSION
         : 1;
-    const newValue = Math.max(minValue, effectiveResolution[dimension] - 1);
+    const currentValue = effectiveResolution[dimension];
+
+    let newValue: number;
+    if (cloudMode && currentValue % 64 !== 0) {
+      // Snap to previous multiple of 64
+      newValue = Math.floor(currentValue / 64) * 64;
+    } else {
+      const step = cloudMode ? 64 : 1;
+      newValue = currentValue - step;
+    }
+
+    newValue = Math.max(minValue, newValue);
     handleResolutionChange(dimension, newValue);
   };
 
@@ -206,6 +260,25 @@ export function SettingsPanel({
         <CardTitle className="text-base font-medium">Settings</CardTitle>
       </CardHeader>
       <CardContent className="space-y-6 overflow-y-auto flex-1 [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-gray-300 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:transition-colors [&::-webkit-scrollbar-thumb:hover]:bg-gray-400">
+        {(import.meta as any).env?.VITE_DAYDREAM_API_KEY && (
+          <div className="space-y-2">
+            <h3 className="text-sm font-medium">Cloud mode</h3>
+            <div className="flex items-center justify-between gap-2">
+              <span className="text-sm text-foreground">Use Daydream (WebRTC)</span>
+              <Toggle
+                pressed={cloudMode}
+                onPressedChange={onCloudModeChange || (() => {})}
+                variant="outline"
+                size="sm"
+                className="h-7"
+                disabled={isStreaming || isDownloading}
+              >
+                {cloudMode ? "ON" : "OFF"}
+              </Toggle>
+            </div>
+          </div>
+        )}
+
         <div className="space-y-2">
           <h3 className="text-sm font-medium">Pipeline ID</h3>
           <Select
@@ -217,7 +290,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>
@@ -371,7 +444,9 @@ export function SettingsPanel({
 
         {(pipelineId === "longlive" ||
           pipelineId === "streamdiffusionv2" ||
-          pipelineId === "krea-realtime-video") && (
+          pipelineId === "krea-realtime-video" ||
+          pipelineId === "sd-turbo" ||
+          pipelineId === "sdxl-turbo") && (
           <div className="space-y-4">
             <div className="space-y-2">
               <div className="space-y-2">
@@ -407,6 +482,7 @@ export function SettingsPanel({
                         className="text-center border-0 focus-visible:ring-0 focus-visible:ring-offset-0 h-8 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
                         min={MIN_DIMENSION}
                         max={2048}
+                        step={cloudMode ? 64 : 1}
                       />
                       <Button
                         variant="ghost"
@@ -456,6 +532,7 @@ export function SettingsPanel({
                         className="text-center border-0 focus-visible:ring-0 focus-visible:ring-offset-0 h-8 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
                         min={MIN_DIMENSION}
                         max={2048}
+                        step={cloudMode ? 64 : 1}
                       />
                       <Button
                         variant="ghost"
@@ -590,7 +667,9 @@ export function SettingsPanel({
 
         {(pipelineId === "longlive" ||
           pipelineId === "streamdiffusionv2" ||
-          pipelineId === "krea-realtime-video") && (
+          pipelineId === "krea-realtime-video" ||
+          pipelineId === "sd-turbo" ||
+          pipelineId === "sdxl-turbo") && (
           <DenoisingStepsSlider
             value={denoisingSteps}
             onChange={onDenoisingStepsChange || (() => {})}
diff --git a/frontend/src/components/VideoOutput.tsx b/frontend/src/components/VideoOutput.tsx
index 4ed6bb610..499045a32 100644
--- a/frontend/src/components/VideoOutput.tsx
+++ b/frontend/src/components/VideoOutput.tsx
@@ -1,7 +1,9 @@
-import { useEffect, useRef, useState, useCallback } from "react";
+import { useEffect, useRef, useState, useCallback, type RefObject } from "react";
 import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
 import { Spinner } from "./ui/spinner";
 import { PlayOverlay } from "./ui/play-overlay";
+import { usePlaybackUrl } from "@/hooks/usePlaybackUrl";
+import { WhepClient } from "@/lib/WhepClient";
 
 interface VideoOutputProps {
   className?: string;
@@ -14,6 +16,7 @@ interface VideoOutputProps {
   onPlayPauseToggle?: () => void;
   onStartStream?: () => void;
   onVideoPlaying?: () => void;
+  whepClientRef?: React.MutableRefObject<WhepClient | null>;
 }
 
 export function VideoOutput({
@@ -27,8 +30,11 @@ export function VideoOutput({
   onPlayPauseToggle,
   onStartStream,
   onVideoPlaying,
+  whepClientRef,
 }: VideoOutputProps) {
+  const { playbackUrl } = usePlaybackUrl();
   const videoRef = useRef<HTMLVideoElement>(null);
+
   const [showOverlay, setShowOverlay] = useState(false);
   const [isFadingOut, setIsFadingOut] = useState(false);
   const overlayTimeoutRef = useRef<number | null>(null);
@@ -39,10 +45,31 @@ export function VideoOutput({
     }
   }, [remoteStream]);
 
+  // Sync video element play/pause state with isPlaying prop
+  useEffect(() => {
+    const video = videoRef.current;
+    // playbackUrl indicates a cloud stream is playing
+    if (!video || !playbackUrl) return;
+
+    // Check if video state is out of sync with prop
+    const shouldBePlaying = isPlaying;
+    const isActuallyPlaying = !video.paused;
+
+    if (shouldBePlaying !== isActuallyPlaying) {
+      if (shouldBePlaying) {
+        video.play().catch((err) => {
+          console.error("[VideoOutput] Error playing video:", err);
+        });
+      } else {
+        video.pause();
+      }
+    }
+  }, [isPlaying, remoteStream, playbackUrl]);
+
   // Listen for video playing event to notify parent
   useEffect(() => {
     const video = videoRef.current;
-    if (!video || !remoteStream) return;
+    if (!video || !(remoteStream || playbackUrl)) return;
 
     const handlePlaying = () => {
       onVideoPlaying?.();
@@ -59,10 +86,11 @@ export function VideoOutput({
     return () => {
       video.removeEventListener("playing", handlePlaying);
     };
-  }, [onVideoPlaying, remoteStream]);
+  }, [onVideoPlaying, remoteStream, playbackUrl]);
 
   const triggerPlayPause = useCallback(() => {
-    if (onPlayPauseToggle && remoteStream) {
+    // Allow play/pause when we have either a direct MediaStream or a cloud playback URL
+    if (onPlayPauseToggle && (remoteStream || playbackUrl)) {
       onPlayPauseToggle();
 
       // Show overlay and immediately start fade out animation
@@ -84,7 +112,7 @@ export function VideoOutput({
         setIsFadingOut(false);
       }, 400);
     }
-  }, [onPlayPauseToggle, remoteStream]);
+  }, [onPlayPauseToggle, remoteStream, playbackUrl]);
 
   const handleVideoClick = () => {
     triggerPlayPause();
@@ -94,7 +122,7 @@ export function VideoOutput({
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
       // Only trigger if spacebar is pressed and stream is active
-      if (e.code === "Space" && remoteStream) {
+      if (e.code === "Space" && (remoteStream || playbackUrl)) {
         // Don't trigger if user is typing in an input/textarea/select or any contenteditable element
         const target = e.target as HTMLElement;
         const isInputFocused =
@@ -115,7 +143,7 @@ export function VideoOutput({
     return () => {
       window.removeEventListener("keydown", handleKeyDown);
     };
-  }, [remoteStream, triggerPlayPause]);
+  }, [remoteStream, playbackUrl, triggerPlayPause]);
 
   // Cleanup timeout on unmount
   useEffect(() => {
@@ -126,13 +154,22 @@ export function VideoOutput({
     };
   }, []);
 
+  // Callback to sync whepClientRef when the client is created
+  const handleClientCreated = useCallback((client: WhepClient | null) => {
+    if (whepClientRef) {
+      whepClientRef.current = client;
+    }
+  }, [whepClientRef]);
+
+  useWhepConnection(playbackUrl, videoRef, handleClientCreated);
+
   return (
     <Card className={`h-full flex flex-col ${className}`}>
       <CardHeader className="flex-shrink-0">
         <CardTitle className="text-base font-medium">Video Output</CardTitle>
       </CardHeader>
       <CardContent className="flex-1 flex items-center justify-center min-h-0 p-4">
-        {remoteStream ? (
+        {remoteStream || playbackUrl ? (
           <div
             className="relative w-full h-full cursor-pointer flex items-center justify-center"
             onClick={handleVideoClick}
@@ -189,3 +226,37 @@ export function VideoOutput({
     </Card>
   );
 }
+
+export const useWhepConnection = (
+  playbackUrl: string | null | undefined,
+  videoRef: RefObject<HTMLVideoElement | null>,
+  onClientCreated?: (client: WhepClient | null) => void,
+  depsKey?: number,
+) => {
+  const clientRef = useRef<WhepClient | null>(null);
+
+  useEffect(() => {
+    if (!playbackUrl) {
+      if (clientRef.current) {
+        void clientRef.current.stop();
+        clientRef.current = null;
+      }
+      onClientCreated?.(null);
+      return;
+    }
+
+    const client = new WhepClient(playbackUrl, () => videoRef.current);
+    clientRef.current = client;
+    client.start();
+    onClientCreated?.(client);
+
+    return () => {
+      if (clientRef.current) {
+        void clientRef.current.stop();
+        clientRef.current = null;
+      }
+    };
+  }, [playbackUrl, videoRef, depsKey]);
+
+  return clientRef;
+};
diff --git a/frontend/src/components/WhipConnection.tsx b/frontend/src/components/WhipConnection.tsx
new file mode 100644
index 000000000..2c3c178b5
--- /dev/null
+++ b/frontend/src/components/WhipConnection.tsx
@@ -0,0 +1,95 @@
+// from http://github.com/livepeer/pipelines/blob/main/apps/streamdiffusion/src/components/WhipConnection.tsx
+"use client";
+
+import { usePlaybackUrl } from "@/hooks/usePlaybackUrl";
+import { memo, useEffect, useRef } from "react";
+import { WhipClient } from "@/lib/WhipClient";
+
+interface WhipConnectionProps {
+  whipUrl: string;
+  stream: MediaStream | null;
+  onConnectionStateChange?: (state: RTCPeerConnectionState) => void;
+  onRetryLimitExceeded?: () => void;
+  iceServers?: RTCIceServer[];
+  sdpTimeout?: number;
+  enableRetry?: boolean;
+  accessKey?: string;
+  jwt?: string;
+  debugStats?: boolean;
+}
+
+export const WhipConnection = memo(
+  ({
+    whipUrl,
+    stream,
+    onConnectionStateChange,
+    onRetryLimitExceeded,
+    iceServers,
+    sdpTimeout = 10000,
+    enableRetry = true,
+    accessKey,
+    jwt,
+    debugStats,
+  }: WhipConnectionProps) => {
+    const { setPlaybackUrl, setLoading } = usePlaybackUrl();
+    const clientRef = useRef<WhipClient | null>(null);
+    const streamRef = useRef<MediaStream | null>(stream);
+
+    useEffect(() => {
+      streamRef.current = stream || null;
+      const client = clientRef.current;
+      if (client && stream) {
+        void client.setStream(stream);
+        void client.connect();
+      }
+    }, [stream]);
+
+    useEffect(() => {
+      console.log("[WhipConnection] Re-rendering WhipConnection");
+      if (!whipUrl) return;
+
+      const client = new WhipClient({
+        whipUrl,
+        getStream: () => streamRef.current,
+        onConnectionStateChange,
+        onRetryLimitExceeded,
+        onPlaybackUrl: (url: string) => {
+          setPlaybackUrl(url);
+          setLoading(false);
+        },
+        iceServers,
+        sdpTimeout,
+        enableRetry,
+        accessKey,
+        jwt,
+        debugStats,
+        initialMaxFramerate: 30,
+      });
+      clientRef.current = client;
+      console.log("[WhipConnection] WhipClient created");
+      void client.connect();
+      console.log("[WhipConnection] WhipClient connected");
+      return () => {
+        console.log("[WhipConnection] WhipClient stopped");
+        void client.stop();
+        clientRef.current = null;
+      };
+    }, [
+      whipUrl,
+      onConnectionStateChange,
+      onRetryLimitExceeded,
+      iceServers,
+      sdpTimeout,
+      enableRetry,
+      accessKey,
+      jwt,
+      debugStats,
+      setPlaybackUrl,
+      setLoading,
+    ]);
+
+    return null;
+  },
+);
+
+WhipConnection.displayName = "WhipConnection";
diff --git a/frontend/src/data/pipelines.ts b/frontend/src/data/pipelines.ts
index 2bc591f16..bb89adbba 100644
--- a/frontend/src/data/pipelines.ts
+++ b/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,8 @@ 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;
+  cloudModelId?: string;
   supportsLoRA?: boolean; // Whether this pipeline supports LoRA adapters
 }
 
@@ -62,6 +65,38 @@ export const PIPELINES: Record<string, PipelineInfo> = {
     defaultTemporalInterpolationSteps: 4,
     supportsLoRA: true,
   },
+  "sdxl-turbo": {
+    name: "SDXL Turbo",
+    docsUrl:
+      "",
+    about:
+      "",
+    modified: true,
+    category: "video-input",
+    defaultPrompt:
+      "A dog in the grass looking around, photorealistic",
+    requiresModels: false,
+    defaultTemporalInterpolationMethod: "linear",
+    defaultTemporalInterpolationSteps: 4,
+    pipelineCompatibility: "cloud",
+    cloudModelId: "stabilityai/sdxl-turbo",
+  },
+  "sd-turbo": {
+    name: "SDTurbo",
+    docsUrl:
+      "",
+    about:
+      "",
+    modified: true,
+    category: "video-input",
+    defaultPrompt:
+      "A dog in the grass looking around, photorealistic",
+    requiresModels: false,
+    defaultTemporalInterpolationMethod: "linear",
+    defaultTemporalInterpolationSteps: 4,
+    pipelineCompatibility: "cloud",
+    cloudModelId: "stabilityai/sd-turbo",
+  },
   passthrough: {
     name: "Passthrough",
     about:
diff --git a/frontend/src/hooks/usePlaybackUrl.ts b/frontend/src/hooks/usePlaybackUrl.ts
new file mode 100644
index 000000000..9dd2420f2
--- /dev/null
+++ b/frontend/src/hooks/usePlaybackUrl.ts
@@ -0,0 +1,15 @@
+import { create } from "zustand";
+
+interface PlaybackUrlState {
+  loading: boolean;
+  playbackUrl: string | null;
+  setPlaybackUrl: (url: string | null) => void;
+  setLoading: (loading: boolean) => void;
+}
+
+export const usePlaybackUrl = create<PlaybackUrlState>(set => ({
+  loading: true,
+  playbackUrl: null,
+  setPlaybackUrl: url => set({ playbackUrl: url }),
+  setLoading: (loading: boolean) => set({ loading }),
+}));
diff --git a/frontend/src/hooks/useStreamState.ts b/frontend/src/hooks/useStreamState.ts
index c8ff165b8..c95e1125b 100644
--- a/frontend/src/hooks/useStreamState.ts
+++ b/frontend/src/hooks/useStreamState.ts
@@ -33,6 +33,7 @@ export function useStreamState() {
     quantization: null,
     kvCacheAttentionBias: 0.3, // Default cache bias
     paused: false, // Default to not paused (generating)
+    cloudMode: false,
     loraMergeStrategy: "permanent_merge", // Default LoRA merge strategy
   });
 
@@ -53,6 +54,7 @@ export function useStreamState() {
         const info = await getHardwareInfo();
         setHardwareInfo(info);
       } catch (error) {
+        // TODO disable local gpu mode if this fails and only allow cloud?
         console.error("Failed to fetch hardware info:", error);
       }
     };
diff --git a/frontend/src/hooks/useWebRTCStats.ts b/frontend/src/hooks/useWebRTCStats.ts
index 05fb9184d..262b2e232 100644
--- a/frontend/src/hooks/useWebRTCStats.ts
+++ b/frontend/src/hooks/useWebRTCStats.ts
@@ -1,4 +1,5 @@
 import { useState, useEffect, useRef, useCallback } from "react";
+import type { WhepClient } from "@/lib/WhepClient";
 
 interface WebRTCStats {
   fps: number;
@@ -8,11 +9,13 @@ interface WebRTCStats {
 interface UseWebRTCStatsProps {
   peerConnectionRef: React.MutableRefObject<RTCPeerConnection | null>;
   isStreaming: boolean;
+  whepClientRef?: React.MutableRefObject<WhepClient | null>;
 }
 
 export function useWebRTCStats({
   peerConnectionRef,
   isStreaming,
+  whepClientRef,
 }: UseWebRTCStatsProps) {
   const [stats, setStats] = useState<WebRTCStats>({
     fps: 0,
@@ -30,7 +33,10 @@ export function useWebRTCStats({
   const bitrateHistoryRef = useRef<number[]>([]);
 
   const calculateStats = useCallback(async () => {
-    const peerConnection = peerConnectionRef.current;
+    // Try to get peer connection from whepClientRef first (cloud mode), then fall back to local
+    const cloudPeerConnection = whepClientRef?.current?.getPeerConnection();
+    const localPeerConnection = peerConnectionRef.current;
+    const peerConnection = cloudPeerConnection || localPeerConnection;
 
     if (!peerConnection || !isStreaming) {
       setStats(prev => ({ ...prev, fps: 0, bitrate: 0 }));
@@ -116,11 +122,15 @@ export function useWebRTCStats({
     } catch (error) {
       console.error("Error getting WebRTC stats:", error);
     }
-  }, [peerConnectionRef, isStreaming]);
+  }, [peerConnectionRef, isStreaming, whepClientRef]);
 
   // Start/stop stats collection based on streaming state
   useEffect(() => {
-    const peerConnection = peerConnectionRef.current;
+    // Check for peer connection from either source
+    const cloudPeerConnection = whepClientRef?.current?.getPeerConnection();
+    const localPeerConnection = peerConnectionRef.current;
+    const peerConnection = cloudPeerConnection || localPeerConnection;
+
     if (isStreaming && peerConnection) {
       // Start collecting stats immediately
       calculateStats();
@@ -150,7 +160,7 @@ export function useWebRTCStats({
         statsIntervalRef.current = null;
       }
     };
-  }, [isStreaming, peerConnectionRef, calculateStats]);
+  }, [isStreaming, peerConnectionRef, whepClientRef, calculateStats]);
 
   return stats;
 }
diff --git a/frontend/src/lib/WhepClient.ts b/frontend/src/lib/WhepClient.ts
new file mode 100644
index 000000000..7ec985f68
--- /dev/null
+++ b/frontend/src/lib/WhepClient.ts
@@ -0,0 +1,244 @@
+// from https://github.com/livepeer/pipelines/blob/main/apps/streamdiffusion/src/lib/WhepClient.ts
+export type GetVideoElement = () => HTMLVideoElement | null;
+
+export class WhepClient {
+  private playbackUrl: string;
+  private getVideoElement: GetVideoElement;
+  private pc: RTCPeerConnection | null = null;
+  private remoteStream: MediaStream | null = null;
+  private reconnectTimeout: ReturnType<typeof setTimeout> | null = null;
+  private retryCount = 0;
+  private abortController: AbortController | null = null;
+  private stopped = false;
+  private disconnectedGraceTimeout: ReturnType<typeof setTimeout> | null = null;
+
+  constructor(playbackUrl: string, getVideoElement: GetVideoElement) {
+    this.playbackUrl = playbackUrl;
+    this.getVideoElement = getVideoElement;
+  }
+
+  start(): void {
+    this.stopped = false;
+    if (this.reconnectTimeout) {
+      clearTimeout(this.reconnectTimeout);
+      this.reconnectTimeout = null;
+    }
+    void this.connect();
+  }
+
+  async connect(): Promise<void> {
+    if (!this.playbackUrl || this.stopped) return;
+    await this.cleanupPeerConnection();
+
+    const iceServers: RTCIceServer[] = [
+      { urls: "stun:stun.l.google.com:19302" },
+      { urls: "stun:stun1.l.google.com:19302" },
+      { urls: "stun:stun.cloudflare.com:3478" },
+    ];
+
+    const pc = new RTCPeerConnection({ iceServers });
+    this.pc = pc;
+
+    const remoteStream = new MediaStream();
+    this.remoteStream = remoteStream;
+    const videoEl = this.getVideoElement();
+    if (videoEl) {
+      videoEl.srcObject = remoteStream;
+    }
+
+    pc.addEventListener("track", event => {
+      const [stream] = event.streams;
+      if (stream) {
+        this.remoteStream = stream;
+        const el = this.getVideoElement();
+        if (el) {
+          el.srcObject = stream;
+          void el.play().catch(() => {});
+        }
+      } else if (this.remoteStream) {
+        this.remoteStream.addTrack(event.track);
+      }
+    });
+
+    pc.addEventListener("iceconnectionstatechange", () => {
+      if (this.pc !== pc) return;
+      const state = pc.iceConnectionState;
+      if (state === "connected" || state === "completed") {
+        if (this.disconnectedGraceTimeout) {
+          clearTimeout(this.disconnectedGraceTimeout);
+          this.disconnectedGraceTimeout = null;
+        }
+        return;
+      }
+      if (state === "disconnected") {
+        if (this.disconnectedGraceTimeout) {
+          clearTimeout(this.disconnectedGraceTimeout);
+          this.disconnectedGraceTimeout = null;
+        }
+        try {
+          pc.restartIce();
+        } catch {}
+        this.disconnectedGraceTimeout = setTimeout(() => {
+          if (this.stopped || this.pc !== pc) return;
+          const current = pc.iceConnectionState;
+          if (current === "disconnected") {
+            this.scheduleReconnect();
+          }
+        }, 2000);
+        return;
+      }
+      if (state === "failed" || state === "closed") {
+        if (this.disconnectedGraceTimeout) {
+          clearTimeout(this.disconnectedGraceTimeout);
+          this.disconnectedGraceTimeout = null;
+        }
+        this.scheduleReconnect();
+      }
+    });
+
+    try {
+      pc.addTransceiver("video", { direction: "recvonly" });
+      pc.addTransceiver("audio", { direction: "recvonly" });
+
+      const offer = await pc.createOffer();
+      await pc.setLocalDescription(offer);
+
+      const localDesc = await this.waitForIceGatheringComplete(pc, 2000);
+      if (!localDesc.sdp) throw new Error("No local SDP generated");
+
+      const controller = new AbortController();
+      this.abortController = controller;
+
+      const response = await fetch(this.playbackUrl, {
+        method: "POST",
+        headers: { "Content-Type": "application/sdp" },
+        body: localDesc.sdp,
+        signal: controller.signal,
+      });
+
+      if (!response.ok) {
+        const errorText = await response.text().catch(() => "");
+        throw new Error(
+          `WHEP request failed: ${response.status} ${response.statusText} ${errorText}`,
+        );
+      }
+
+      const answerSdp = await response.text();
+      await pc.setRemoteDescription({ type: "answer", sdp: answerSdp });
+
+      this.retryCount = 0;
+    } catch {
+      this.scheduleReconnect();
+    }
+  }
+
+  async stop(): Promise<void> {
+    this.stopped = true;
+    if (this.reconnectTimeout) {
+      clearTimeout(this.reconnectTimeout);
+      this.reconnectTimeout = null;
+    }
+    await this.cleanupPeerConnection();
+  }
+
+  getPeerConnection(): RTCPeerConnection | null {
+    return this.pc;
+  }
+
+  private scheduleReconnect(): void {
+    if (this.stopped) return;
+    if (this.reconnectTimeout) {
+      clearTimeout(this.reconnectTimeout);
+      this.reconnectTimeout = null;
+    }
+    const attempt = this.retryCount;
+    const delay = this.calculateDelay(attempt);
+    this.reconnectTimeout = setTimeout(() => {
+      if (this.stopped) return;
+      this.retryCount = attempt + 1;
+      void this.connect();
+    }, delay);
+  }
+
+  private async cleanupPeerConnection(): Promise<void> {
+    if (this.disconnectedGraceTimeout) {
+      clearTimeout(this.disconnectedGraceTimeout);
+      this.disconnectedGraceTimeout = null;
+    }
+    if (this.abortController) {
+      try {
+        this.abortController.abort();
+      } catch {}
+      this.abortController = null;
+    }
+    if (this.pc) {
+      const currentPc = this.pc;
+      this.pc = null;
+      try {
+        currentPc.getTransceivers().forEach(t => {
+          try {
+            t.stop();
+          } catch {}
+        });
+      } catch {}
+      try {
+        currentPc.close();
+      } catch {}
+    }
+    const el = this.getVideoElement();
+    if (el) {
+      try {
+        el.srcObject = null;
+      } catch {}
+    }
+    this.remoteStream = null;
+  }
+
+  private calculateDelay(count: number): number {
+    const initialDelay = 500;
+    const linearPhaseDelay = 300;
+    const linearPhaseEndCount = 10;
+    const baseExponentialDelay = 500;
+    const maxExponentialDelay = 60 * 1000;
+    const exponentFactor = 2;
+    if (count === 0) return initialDelay;
+    if (count > 0 && count <= linearPhaseEndCount) return linearPhaseDelay;
+    const exponentialAttemptNumber = count - linearPhaseEndCount;
+    const delay =
+      baseExponentialDelay *
+      Math.pow(exponentFactor, exponentialAttemptNumber - 1);
+    return Math.min(delay, maxExponentialDelay);
+  }
+
+  private waitForIceGatheringComplete(
+    pc: RTCPeerConnection,
+    timeoutMs: number,
+  ): Promise<RTCSessionDescriptionInit> {
+    return new Promise((resolve, reject) => {
+      if (pc.iceGatheringState === "complete" && pc.localDescription) {
+        resolve(pc.localDescription);
+        return;
+      }
+      const onChange = () => {
+        if (pc.iceGatheringState === "complete" && pc.localDescription) {
+          cleanup();
+          resolve(pc.localDescription);
+        }
+      };
+      const onTimeout = () => {
+        cleanup();
+        if (pc.localDescription) {
+          resolve(pc.localDescription);
+        } else {
+          reject(new Error("ICE gathering timeout without localDescription"));
+        }
+      };
+      const cleanup = () => {
+        pc.removeEventListener("icegatheringstatechange", onChange);
+        clearTimeout(timerId);
+      };
+      pc.addEventListener("icegatheringstatechange", onChange);
+      const timerId = setTimeout(onTimeout, timeoutMs);
+    });
+  }
+}
diff --git a/frontend/src/lib/WhipClient.ts b/frontend/src/lib/WhipClient.ts
new file mode 100644
index 000000000..a137b2a32
--- /dev/null
+++ b/frontend/src/lib/WhipClient.ts
@@ -0,0 +1,700 @@
+// from https://github.com/livepeer/pipelines/blob/main/apps/streamdiffusion/src/lib/WhipClient.ts
+export type GetStream = () => MediaStream | null;
+
+type AccessControlParams = {
+  accessKey?: string;
+  jwt?: string;
+};
+
+type WhipClientOptions = {
+  whipUrl: string;
+  getStream: GetStream;
+  onConnectionStateChange?: (state: RTCPeerConnectionState) => void;
+  onRetryLimitExceeded?: () => void;
+  onPlaybackUrl?: (url: string) => void;
+  iceServers?: RTCIceServer[];
+  sdpTimeout?: number;
+  enableRetry?: boolean;
+  accessKey?: string;
+  jwt?: string;
+  debugStats?: boolean;
+  initialMaxFramerate?: number;
+  maxRetries?: number;
+  retryDelayBaseMs?: number;
+};
+
+const VIDEO_BITRATE = 300000;
+const AUDIO_BITRATE = 64000;
+
+const MAX_REDIRECT_CACHE_SIZE = 10;
+const redirectUrlCache = new Map<string, URL>();
+const playbackIdPattern = /([/+])([^/+?]+)$/;
+const REPLACE_PLACEHOLDER = "PLAYBACK_ID";
+
+function getCachedTemplate(key: string): URL | undefined {
+  const cachedItem = redirectUrlCache.get(key);
+  if (cachedItem) {
+    redirectUrlCache.delete(key);
+    redirectUrlCache.set(key, cachedItem);
+  }
+  return cachedItem;
+}
+
+function setCachedTemplate(key: string, value: URL): void {
+  if (redirectUrlCache.has(key)) {
+    redirectUrlCache.delete(key);
+  } else if (redirectUrlCache.size >= MAX_REDIRECT_CACHE_SIZE) {
+    const oldestKey = redirectUrlCache.keys().next().value;
+    if (oldestKey) redirectUrlCache.delete(oldestKey);
+  }
+  redirectUrlCache.set(key, value);
+}
+
+function preferCodec(sdp: string, codec: string): string {
+  const lines = sdp.split("\r\n");
+  const mLineIndex = lines.findIndex(line => line.startsWith("m=video"));
+  if (mLineIndex === -1) return sdp;
+  const codecRegex = new RegExp(`a=rtpmap:(\\d+) ${codec}(/\\d+)+`);
+  const codecLine = lines.find(line => codecRegex.test(line));
+  if (!codecLine) return sdp;
+  const codecPayload = codecRegex.exec(codecLine)?.[1];
+  if (!codecPayload) return sdp;
+  const mLineElements = lines[mLineIndex].split(" ");
+  const reorderedMLine = [
+    ...mLineElements.slice(0, 3),
+    codecPayload,
+    ...mLineElements.slice(3).filter(payload => payload !== codecPayload),
+  ];
+  lines[mLineIndex] = reorderedMLine.join(" ");
+  return lines.join("\r\n");
+}
+
+function getRTCPeerConnectionConstructor(): typeof RTCPeerConnection | null {
+  if (typeof window === "undefined") return null;
+  return (
+    window.RTCPeerConnection ||
+    (window as any).webkitRTCPeerConnection ||
+    (window as any).mozRTCPeerConnection ||
+    null
+  );
+}
+
+async function waitToCompleteICEGathering(
+  peerConnection: RTCPeerConnection,
+  timeoutMs: number,
+): Promise<RTCSessionDescription | null> {
+  return new Promise<RTCSessionDescription | null>(resolve => {
+    const timeout = setTimeout(() => {
+      resolve(peerConnection.localDescription);
+    }, timeoutMs);
+    peerConnection.onicegatheringstatechange = () => {
+      if (peerConnection.iceGatheringState === "complete") {
+        clearTimeout(timeout);
+        resolve(peerConnection.localDescription);
+      }
+    };
+  });
+}
+
+async function constructClientOffer(
+  peerConnection: RTCPeerConnection,
+  noIceGathering?: boolean,
+): Promise<RTCSessionDescription | null> {
+  const originalOffer = await peerConnection.createOffer({
+    offerToReceiveAudio: false,
+    offerToReceiveVideo: false,
+  });
+  const enhancedOffer = new RTCSessionDescription({
+    type: originalOffer.type,
+    sdp: preferCodec(originalOffer.sdp || "", "H264"),
+  });
+  await peerConnection.setLocalDescription(enhancedOffer);
+  if (noIceGathering) return peerConnection.localDescription;
+  const ofr = await waitToCompleteICEGathering(peerConnection, 1000);
+  if (!ofr) throw Error("Failed to gather ICE candidates for offer");
+  return ofr;
+}
+
+async function postSDPOffer(
+  endpoint: string,
+  data: string,
+  controller: AbortController,
+  accessControl: AccessControlParams,
+  sdpTimeout: number,
+  onPlaybackUrl?: (url: string) => void,
+): Promise<Response> {
+  const id = setTimeout(() => controller.abort(), sdpTimeout);
+  const urlForPost = new URL(endpoint);
+  const parsedMatches = urlForPost.pathname.match(playbackIdPattern);
+  const currentPlaybackId = parsedMatches?.[2];
+  const cachedTemplateUrl = getCachedTemplate(endpoint);
+  if (cachedTemplateUrl && currentPlaybackId) {
+    urlForPost.host = cachedTemplateUrl.host;
+    urlForPost.pathname = cachedTemplateUrl.pathname.replace(
+      REPLACE_PLACEHOLDER,
+      currentPlaybackId,
+    );
+    urlForPost.search = cachedTemplateUrl.search;
+  }
+  try {
+    const response = await fetch(urlForPost.toString(), {
+      method: "POST",
+      mode: "cors",
+      headers: {
+        "Content-Type": "application/sdp",
+        ...(accessControl.accessKey && {
+          "Livepeer-Access-Key": accessControl.accessKey,
+        }),
+        ...(accessControl.jwt && {
+          "Livepeer-Jwt": accessControl.jwt,
+        }),
+      },
+      body: data,
+      signal: controller.signal,
+    });
+    clearTimeout(id);
+    const playbackUrl = response.headers.get("livepeer-playback-url");
+    if (playbackUrl && onPlaybackUrl) onPlaybackUrl(playbackUrl);
+    if (response.url !== urlForPost.toString()) {
+      const actualRedirectedUrl = new URL(response.url);
+      const templateForCache = new URL(actualRedirectedUrl);
+      templateForCache.pathname = templateForCache.pathname.replace(
+        playbackIdPattern,
+        `$1${REPLACE_PLACEHOLDER}`,
+      );
+      if (
+        !templateForCache.searchParams.has("ingestpb") ||
+        templateForCache.searchParams.get("ingestpb") !== "true"
+      ) {
+        setCachedTemplate(endpoint, templateForCache);
+      }
+    }
+    return response;
+  } catch (error) {
+    clearTimeout(id);
+    throw error;
+  }
+}
+
+async function applyBitrateConstraints(
+  peerConnection: RTCPeerConnection,
+  maxFramerate?: number,
+) {
+  const senders = peerConnection.getSenders();
+  for (const sender of senders) {
+    if (!sender.track) continue;
+    const params = sender.getParameters();
+    const trackKind = sender.track.kind;
+    if (trackKind === "video") {
+      if (!params.encodings) params.encodings = [{}];
+      params.degradationPreference = "maintain-resolution";
+      const encoding = params.encodings[0];
+      encoding.maxBitrate = VIDEO_BITRATE;
+      if (typeof maxFramerate === "number" && maxFramerate > 0) {
+        encoding.maxFramerate = maxFramerate;
+      }
+      encoding.scaleResolutionDownBy = 1.0;
+      encoding.priority = "high";
+      encoding.networkPriority = "high";
+
+      try {
+        await sender.setParameters(params);
+      } catch {}
+    } else if (trackKind === "audio") {
+      if (!params.encodings) params.encodings = [{}];
+      const encoding = params.encodings[0];
+      encoding.maxBitrate = AUDIO_BITRATE;
+      encoding.priority = "medium";
+      encoding.networkPriority = "medium";
+      try {
+        await sender.setParameters(params);
+      } catch {}
+    }
+  }
+}
+
+function debounceBitrate(
+  fn: (pc: RTCPeerConnection, fps?: number) => Promise<void>,
+  wait: number,
+) {
+  let t: ReturnType<typeof setTimeout> | null = null;
+  let resolvers: Array<() => void> = [];
+  let lastArgs: [RTCPeerConnection, number?] | null = null;
+
+  return (pc: RTCPeerConnection, fps?: number) => {
+    lastArgs = [pc, fps];
+    if (t) {
+      clearTimeout(t);
+      resolvers.forEach(r => r());
+      resolvers = [];
+    }
+    return new Promise<void>(resolve => {
+      resolvers.push(resolve);
+      t = setTimeout(() => {
+        const [p, f] = lastArgs!;
+        fn(p, f)
+          .catch(() => {})
+          .finally(() => {
+            resolvers.forEach(r => r());
+            resolvers = [];
+            t = null;
+          });
+      }, wait);
+    });
+  };
+}
+
+const applyBitrateConstraintsDebounced = debounceBitrate(
+  applyBitrateConstraints,
+  50,
+);
+
+export class WhipClient {
+  private whipUrl: string;
+  private getStream: GetStream;
+  private onConnectionStateChange?: (state: RTCPeerConnectionState) => void;
+  private onRetryLimitExceeded?: () => void;
+  private onPlaybackUrl?: (url: string) => void;
+  private iceServers?: RTCIceServer[];
+  private sdpTimeout: number;
+  private enableRetry: boolean;
+  private accessKey?: string;
+  private jwt?: string;
+  private debugStats?: boolean;
+  private pc: RTCPeerConnection | null = null;
+  private videoSender: RTCRtpSender | null = null;
+  private audioSender: RTCRtpSender | null = null;
+  private videoTransceiver: RTCRtpTransceiver | null = null;
+  // private audioTransceiver: RTCRtpTransceiver | null = null;
+  private abortController: AbortController | null = null;
+  private isConnecting = false;
+  private connectionEstablished = false;
+  private retryTimeout: ReturnType<typeof setTimeout> | null = null;
+  private retryCount = 0;
+  private maxRetries: number;
+  private retryDelayBaseMs: number;
+  private stopped = false;
+  private disconnectedGraceTimeout: ReturnType<typeof setTimeout> | null = null;
+  private maxFramerate?: number;
+
+  constructor(options: WhipClientOptions) {
+    this.whipUrl = options.whipUrl;
+    this.getStream = options.getStream;
+    this.onConnectionStateChange = options.onConnectionStateChange;
+    this.onRetryLimitExceeded = options.onRetryLimitExceeded;
+    this.onPlaybackUrl = options.onPlaybackUrl;
+    this.iceServers = options.iceServers;
+    this.sdpTimeout = options.sdpTimeout ?? 10000;
+    this.enableRetry = options.enableRetry ?? true;
+    this.accessKey = options.accessKey;
+    this.jwt = options.jwt;
+    this.debugStats = options.debugStats;
+    this.maxRetries = options.maxRetries ?? 2;
+    this.retryDelayBaseMs = options.retryDelayBaseMs ?? 1000;
+    this.maxFramerate = options.initialMaxFramerate;
+  }
+
+  async connect(): Promise<void> {
+    if (this.stopped) return;
+    const stream = this.getStream();
+    if (!stream || !stream.active) return;
+    const v = stream.getVideoTracks()[0];
+    if (!v || v.readyState !== "live") return;
+    if (this.connectionEstablished && this.pc) {
+      const replaced = await this.replaceTracks(stream).catch(() => false);
+      if (replaced) return;
+    }
+    if (this.isConnecting) return;
+    this.isConnecting = true;
+    if (this.abortController) {
+      try {
+        this.abortController.abort();
+      } catch {}
+    }
+    if (this.disconnectedGraceTimeout) {
+      clearTimeout(this.disconnectedGraceTimeout);
+      this.disconnectedGraceTimeout = null;
+    }
+    this.abortController = new AbortController();
+    try {
+      if (this.pc) {
+        try {
+          this.pc.close();
+        } catch {}
+        this.pc = null;
+        this.connectionEstablished = false;
+        this.videoSender = null;
+        this.audioSender = null;
+        this.videoTransceiver = null;
+        // this.audioTransceiver = null;
+      }
+      const pc = this.createPeerConnection();
+      this.pc = pc;
+      await this.attachStream(stream, pc);
+      try {
+        if (this.videoTransceiver) {
+          const caps = RTCRtpSender.getCapabilities("video");
+          if (caps?.codecs?.length) {
+            const h264 = caps.codecs.filter(c =>
+              c.mimeType.toLowerCase().includes("h264"),
+            );
+            if (h264.length && this.videoTransceiver.setCodecPreferences) {
+              this.videoTransceiver.setCodecPreferences(h264);
+            }
+          }
+        }
+      } catch {}
+      if (this.pc)
+        await applyBitrateConstraintsDebounced(this.pc, this.maxFramerate);
+      const offer = await constructClientOffer(pc, false);
+      if (!offer?.sdp) throw new Error("Failed to create valid offer");
+      const accessControl: AccessControlParams = {
+        accessKey: this.accessKey,
+        jwt: this.jwt,
+      };
+      const response = await postSDPOffer(
+        this.whipUrl,
+        offer.sdp,
+        this.abortController,
+        accessControl,
+        this.sdpTimeout,
+        this.onPlaybackUrl,
+      );
+      if (!response.ok) {
+        const msg = await response.text().catch(() => "");
+        throw new Error(
+          `WHIP request failed: ${response.status} ${response.statusText} - ${msg}`,
+        );
+      }
+      const answerSdp = await response.text();
+      await pc.setRemoteDescription({ type: "answer", sdp: answerSdp });
+      if (this.pc)
+        await applyBitrateConstraintsDebounced(this.pc, this.maxFramerate);
+      this.retryCount = 0;
+      this.connectionEstablished = true;
+    } catch (e) {
+      if (this.pc) {
+        try {
+          this.pc.close();
+        } catch {}
+        this.pc = null;
+      }
+      this.connectionEstablished = false;
+      this.scheduleRetry();
+    } finally {
+      this.isConnecting = false;
+    }
+  }
+
+  async stop(): Promise<void> {
+    this.stopped = true;
+    if (this.retryTimeout) {
+      clearTimeout(this.retryTimeout);
+      this.retryTimeout = null;
+    }
+    if (this.disconnectedGraceTimeout) {
+      clearTimeout(this.disconnectedGraceTimeout);
+      this.disconnectedGraceTimeout = null;
+    }
+    if (this.abortController) {
+      try {
+        this.abortController.abort();
+      } catch {}
+      this.abortController = null;
+    }
+    if (this.pc) {
+      try {
+        this.pc.getTransceivers().forEach(t => {
+          try {
+            t.stop();
+          } catch {}
+        });
+      } catch {}
+      try {
+        this.pc.close();
+      } catch {}
+      this.pc = null;
+    }
+    this.videoSender = null;
+    this.audioSender = null;
+    this.videoTransceiver = null;
+    // this.audioTransceiver = null;
+  }
+
+  setMaxFramerate(fps?: number) {
+    this.maxFramerate = fps;
+    const pc = this.pc;
+    if (!pc) return;
+    void applyBitrateConstraintsDebounced(pc, this.maxFramerate);
+  }
+
+  setWhipUrl(url: string) {
+    this.whipUrl = url;
+  }
+
+  async setStream(_: MediaStream | null) {
+    if (!this.pc || !this.connectionEstablished) return;
+    const s = this.getStream();
+    if (!s) return;
+    await this.replaceTracks(s).catch(() => {});
+  }
+
+  private createPeerConnection(): RTCPeerConnection {
+    const RTCPeerConnectionConstructor = getRTCPeerConnectionConstructor();
+    if (!RTCPeerConnectionConstructor)
+      throw new Error("No RTCPeerConnection constructor");
+    const defaultIceServers: RTCIceServer[] = [
+      { urls: "stun:stun.l.google.com:19302" },
+      { urls: "stun:stun1.l.google.com:19302" },
+      { urls: "stun:stun.cloudflare.com:3478" },
+    ];
+    const pc = new RTCPeerConnectionConstructor({
+      iceServers: this.iceServers || defaultIceServers,
+      iceCandidatePoolSize: 10,
+    });
+    try {
+      const v = pc.addTransceiver("video", { direction: "sendonly" });
+      const a = pc.addTransceiver("audio", { direction: "sendonly" });
+      this.videoTransceiver = v;
+      // this.audioTransceiver = a;
+      this.videoSender = v.sender || null;
+      this.audioSender = a.sender || null;
+    } catch {}
+    pc.onconnectionstatechange = () => {
+      this.onConnectionStateChange?.(pc.connectionState);
+      if (this.pc !== pc) return;
+      switch (pc.connectionState) {
+        case "connected":
+          this.connectionEstablished = true;
+          if (this.disconnectedGraceTimeout) {
+            clearTimeout(this.disconnectedGraceTimeout);
+            this.disconnectedGraceTimeout = null;
+          }
+          break;
+        case "disconnected":
+          this.connectionEstablished = false;
+          if (this.disconnectedGraceTimeout) {
+            clearTimeout(this.disconnectedGraceTimeout);
+            this.disconnectedGraceTimeout = null;
+          }
+          try {
+            pc.restartIce();
+          } catch {}
+          this.disconnectedGraceTimeout = setTimeout(() => {
+            if (this.stopped || this.pc !== pc) return;
+            if (pc.connectionState === "disconnected") {
+              this.scheduleRetry();
+            }
+          }, 2000);
+          break;
+        case "failed":
+          this.connectionEstablished = false;
+          this.isConnecting = false;
+          if (this.disconnectedGraceTimeout) {
+            clearTimeout(this.disconnectedGraceTimeout);
+            this.disconnectedGraceTimeout = null;
+          }
+          this.scheduleRetry();
+          break;
+        case "closed":
+          this.connectionEstablished = false;
+          this.isConnecting = false;
+          if (this.disconnectedGraceTimeout) {
+            clearTimeout(this.disconnectedGraceTimeout);
+            this.disconnectedGraceTimeout = null;
+          }
+          break;
+      }
+    };
+    pc.oniceconnectionstatechange = () => {
+      if (
+        (pc.iceConnectionState === "failed" ||
+          pc.iceConnectionState === "disconnected") &&
+        this.enableRetry
+      ) {
+        try {
+          pc.restartIce();
+        } catch {}
+      }
+      void applyBitrateConstraintsDebounced(pc, this.maxFramerate);
+    };
+    if (this.debugStats) this.setupDebugStats(pc);
+    return pc;
+  }
+
+  private async attachStream(mediaStream: MediaStream, _: RTCPeerConnection) {
+    const videoTrack = mediaStream.getVideoTracks()[0] || null;
+    const audioTrack = mediaStream.getAudioTracks()[0] || null;
+    if (this.videoSender) {
+      const current = this.videoSender.track || null;
+      const same = current && videoTrack && current.id === videoTrack.id;
+      if (!same) {
+        try {
+          await this.videoSender.replaceTrack(videoTrack);
+        } catch {}
+      }
+      if (videoTrack && videoTrack.contentHint == null) {
+        try {
+          videoTrack.contentHint = "motion";
+        } catch {}
+      }
+    }
+    if (this.audioSender) {
+      if (audioTrack) {
+        const current = this.audioSender.track || null;
+        const same = current && current.id === audioTrack.id;
+        try {
+          if (!same) await this.audioSender.replaceTrack(audioTrack);
+        } catch {}
+      }
+    }
+  }
+
+  private async replaceTracks(newStream: MediaStream) {
+    if (!this.pc) return false;
+    const tasks: Promise<void>[] = [];
+    const videoTrack = newStream.getVideoTracks()[0] || null;
+    const audioTrack = newStream.getAudioTracks()[0] || null;
+    if (this.videoSender) {
+      tasks.push(this.videoSender.replaceTrack(videoTrack).catch(() => {}));
+    }
+    if (this.audioSender) {
+      if (audioTrack) {
+        const current = this.audioSender.track || null;
+        const same = current && current.id === audioTrack.id;
+        if (!same)
+          tasks.push(this.audioSender.replaceTrack(audioTrack).catch(() => {}));
+      }
+    }
+    await Promise.allSettled(tasks);
+    if (this.pc)
+      await applyBitrateConstraintsDebounced(this.pc, this.maxFramerate);
+    return true;
+  }
+
+  private scheduleRetry() {
+    if (!this.enableRetry) return;
+    if (this.retryCount >= this.maxRetries) {
+      this.onRetryLimitExceeded?.();
+      return;
+    }
+    if (this.retryTimeout) {
+      clearTimeout(this.retryTimeout);
+      this.retryTimeout = null;
+    }
+    const delay = this.retryDelayBaseMs * Math.pow(2, this.retryCount);
+    this.retryTimeout = setTimeout(() => {
+      if (this.stopped) return;
+      this.retryCount++;
+      void this.connect();
+    }, delay);
+  }
+
+  private setupDebugStats(pc: RTCPeerConnection) {
+    let interval: ReturnType<typeof setInterval> | null = null;
+    let lastVideoBytes = 0;
+    let lastAudioBytes = 0;
+    let lastFrames = 0;
+    let videoBaseFrames = 0;
+    let videoBaseFramesSet = false;
+    let videoFpsEma: number | null = null;
+    const fpsAlpha = 0.3;
+    let audioBaseDuration = 0;
+    let audioBaseDurationSet = false;
+    const tick = async () => {
+      try {
+        const senders = pc.getSenders();
+        const videoSender = senders.find(s => s.track?.kind === "video");
+        const audioSender = senders.find(s => s.track?.kind === "audio");
+        let videoRelTimeSec: number | undefined;
+        let audioRelTimeSec: number | undefined;
+        if (videoSender?.getStats) {
+          const stats = await videoSender.getStats();
+          stats.forEach(report => {
+            if (report.type === "outbound-rtp" && report.kind === "video") {
+              const bytes = report.bytesSent || 0;
+              const frames = report.framesEncoded || report.framesSent || 0;
+              const width = report.frameWidth;
+              const height = report.frameHeight;
+              const rtt = report.roundTripTime;
+              const bytesDelta = bytes - lastVideoBytes;
+              const framesDelta = frames - lastFrames;
+              lastVideoBytes = bytes;
+              lastFrames = frames;
+              if (!videoBaseFramesSet && frames > 0) {
+                videoBaseFrames = frames;
+                videoBaseFramesSet = true;
+              }
+              const relFrames = frames - videoBaseFrames;
+              const fpsInstant = Math.max(0, framesDelta);
+              videoFpsEma =
+                videoFpsEma == null
+                  ? fpsInstant
+                  : videoFpsEma * (1 - fpsAlpha) + fpsInstant * fpsAlpha;
+              if (videoFpsEma && videoFpsEma > 0) {
+                videoRelTimeSec = relFrames / videoFpsEma;
+              }
+              if (bytesDelta >= 0 || framesDelta >= 0) {
+                const size = width && height ? `${width}x${height}` : undefined;
+                const visibility =
+                  typeof document !== "undefined"
+                    ? document.visibilityState
+                    : undefined;
+                console.log("WHIP video tx", {
+                  kbps: Math.round((bytesDelta * 8) / 1000),
+                  framesDelta,
+                  size,
+                  rtt,
+                  visibility,
+                });
+              }
+            }
+          });
+        }
+        if (audioSender?.getStats) {
+          const stats = await audioSender.getStats();
+          stats.forEach(report => {
+            if (report.type === "outbound-rtp" && report.kind === "audio") {
+              const bytes = report.bytesSent || 0;
+              const bytesDelta = bytes - lastAudioBytes;
+              lastAudioBytes = bytes;
+              console.debug("WHIP audio tx", {
+                kbps: Math.round((bytesDelta * 8) / 1000),
+              });
+            }
+            if (report.type === "media-source" && report.kind === "audio") {
+              const dur = report.totalSamplesDuration;
+              if (typeof dur === "number") {
+                if (!audioBaseDurationSet) {
+                  audioBaseDuration = dur;
+                  audioBaseDurationSet = true;
+                }
+                audioRelTimeSec = dur - audioBaseDuration;
+              }
+            }
+          });
+        }
+        if (
+          typeof videoRelTimeSec === "number" &&
+          typeof audioRelTimeSec === "number"
+        ) {
+          const delta = audioRelTimeSec - videoRelTimeSec;
+          console.log("WHIP av sync", {
+            audio_time_s: Math.round(audioRelTimeSec * 1000) / 1000,
+            video_time_s: Math.round(videoRelTimeSec * 1000) / 1000,
+            delta_s: Math.round(delta * 1000) / 1000,
+          });
+        }
+      } catch {}
+    };
+    interval = setInterval(tick, 1000);
+    const stop = () => {
+      if (interval) clearInterval(interval);
+    };
+    const origClose = pc.close.bind(pc);
+    pc.close = () => {
+      stop();
+      origClose();
+    };
+  }
+}
diff --git a/frontend/src/lib/daydream.ts b/frontend/src/lib/daydream.ts
new file mode 100644
index 000000000..84b4a601e
--- /dev/null
+++ b/frontend/src/lib/daydream.ts
@@ -0,0 +1,294 @@
+const DAYDREAM_API_BASE =
+  (import.meta as any).env?.VITE_DAYDREAM_API_BASE || "https://api.daydream.live";
+const DAYDREAM_API_KEY = (import.meta as any).env?.VITE_DAYDREAM_API_KEY;
+
+/**
+ * Prompt can be a single string or weighted list of (prompt, weight) tuples
+ */
+export type PromptInput =
+  | string
+  | Array<[string, number]>;
+
+/**
+ * Seed can be a single integer or weighted list of (seed, weight) tuples
+ */
+export type SeedInput =
+  | number
+  | Array<[number, number]>;
+
+/**
+ * ControlNet configuration for guided generation
+ */
+export interface ControlNetConfig {
+  /** ControlNet model identifier. Must be unique and compatible with base model */
+  model_id: string;
+  /** Strength of ControlNet's influence (0.0-1.0) */
+  conditioning_scale: number;
+  /** Preprocessor to apply to input frames */
+  preprocessor:
+    | "pose_tensorrt"
+    | "soft_edge"
+    | "canny"
+    | "depth_tensorrt"
+    | "passthrough"
+    | "feedback";
+  /** Additional parameters for the preprocessor */
+  preprocessor_params?: Record<string, unknown>;
+  /** Whether this ControlNet is active */
+  enabled: boolean;
+  /** Fraction of denoising process (0.0-1.0) when guidance begins */
+  control_guidance_start?: number;
+  /** Fraction of denoising process (0.0-1.0) when guidance ends */
+  control_guidance_end?: number;
+}
+
+/**
+ * IP Adapter configuration for style conditioning
+ */
+export interface IPAdapterConfig {
+  /** Type of IP adapter: 'faceid' for SDXL-faceid models, 'regular' for others */
+  type: "regular" | "faceid";
+  /** Whether IP adapter is enabled */
+  enabled: boolean;
+  /** Strength of IP adapter style conditioning */
+  scale: number;
+  /** Weight interpolation method for IP adapter */
+  weight_type:
+    | "linear"
+    | "ease in"
+    | "ease out"
+    | "ease in-out"
+    | "reverse in-out"
+    | "weak input"
+    | "weak output"
+    | "weak middle"
+    | "strong middle"
+    | "style transfer"
+    | "composition"
+    | "strong style transfer"
+    | "style and composition"
+    | "style transfer precise"
+    | "composition precise";
+}
+
+/**
+ * Pipeline parameters for stream updates. Structure depends on model_id.
+ * Based on Daydream API documentation for SDTurbo, SDXL, and SD1.5 models.
+ */
+export interface StreamParams {
+  /** Model identifier */
+  model_id?: string;
+  /** Text prompt describing the desired image */
+  prompt?: PromptInput;
+  /** Method for interpolating between multiple prompts */
+  prompt_interpolation_method?: "linear" | "slerp";
+  /** Whether to normalize prompt weights to sum to 1.0 */
+  normalize_prompt_weights?: boolean;
+  /** Whether to normalize seed weights to sum to 1.0 */
+  normalize_seed_weights?: boolean;
+  /** Text describing what to avoid in the generated image */
+  negative_prompt?: string;
+  /** Strength of prompt adherence. Higher values make model follow prompt more strictly */
+  guidance_scale?: number;
+  /** Delta sets per-frame denoising progress */
+  delta?: number;
+  /** Builds the full denoising schedule. Typical range 10-200, default 50 */
+  num_inference_steps?: number;
+  /** Ordered list of step indices from num_inference_steps schedule to execute per frame (1-4 elements) */
+  t_index_list?: number[];
+  /** Whether to use safety checker for content filtering */
+  use_safety_checker?: boolean;
+  /** Output image width in pixels. Must be divisible by 64 and between 384-1024 */
+  width?: number;
+  /** Output image height in pixels. Must be divisible by 64 and between 384-1024 */
+  height?: number;
+  /** Dictionary mapping LoRA model paths to their weights */
+  lora_dict?: Record<string, number> | null;
+  /** Whether to use Latent Consistency Model LoRA for faster inference */
+  use_lcm_lora?: boolean;
+  /** Identifier for the LCM LoRA model to use */
+  lcm_lora_id?: string;
+  /** Acceleration method for inference */
+  acceleration?: "none" | "xformers" | "tensorrt";
+  /** Whether to process multiple denoising steps in a single batch */
+  use_denoising_batch?: boolean;
+  /** Whether to add noise to input frames before processing */
+  do_add_noise?: boolean;
+  /** Random seed for generation */
+  seed?: SeedInput;
+  /** Method for interpolating between multiple seeds */
+  seed_interpolation_method?: "linear" | "slerp";
+  /** Whether to skip frames that are too similar to previous output */
+  enable_similar_image_filter?: boolean;
+  /** Similarity threshold for the image filter (0.0-1.0) */
+  similar_image_filter_threshold?: number;
+  /** Maximum number of consecutive frames that can be skipped */
+  similar_image_filter_max_skip_frame?: number;
+  /** List of ControlNet configurations for guided generation */
+  controlnets?: ControlNetConfig[];
+  /** IP adapter configuration (available for SDXL, SDXL-faceid, SD1.5) */
+  ip_adapter?: IPAdapterConfig;
+  /** HTTPS URL or base64-encoded data URI of style image for IP adapter */
+  ip_adapter_style_image_url?: string;
+}
+
+/**
+ * Request payload for creating a new stream via the Daydream API.
+ *
+ * @see https://api.daydream.live/v1/streams
+ */
+interface CreateStreamRequest {
+  /** Pipeline type to use for the stream. Currently only "streamdiffusion" is supported. */
+  pipeline: string;
+  /** Pipeline configuration parameters. The structure depends on the model_id selected. */
+  params?: StreamParams;
+  /** Human-readable name for the stream */
+  name?: string;
+  /** Custom RTMP URL for stream output destination */
+  output_rtmp_url?: string;
+}
+
+export interface CreateStreamResponse {
+  pipeline: string;
+  params: Record<string, unknown>;
+  id: string;
+  stream_key: string;
+  created_at: string;
+  output_playback_id: string;
+  name?: string;
+  author?: string;
+  from_playground?: boolean;
+  gateway_host?: string;
+  is_smoke_test?: boolean;
+  whip_url?: string;
+  // other fields may exist
+}
+
+/**
+ * Request payload for updating an existing stream via the Daydream API.
+ *
+ * @see https://api.daydream.live/v1/streams/{id}
+ */
+export interface UpdateStreamRequest {
+  /** Updated pipeline parameters for the stream */
+  params?: StreamParams;
+  /** Updated prompt to apply to the stream processing */
+  prompt?: string;
+}
+
+interface UpdateStreamResponse {
+  pipeline: string;
+  params: Record<string, unknown>;
+  id: string;
+  stream_key: string;
+  created_at: string;
+  output_playback_id: string;
+  name?: string;
+  author?: string;
+  from_playground?: boolean;
+  gateway_host?: string;
+  is_smoke_test?: boolean;
+  whip_url?: string;
+  // other fields may exist
+}
+
+export interface DaydreamWebRTCOfferRequest {
+  sdp?: string;
+  type?: string;
+  initialParameters?: Record<string, unknown>;
+}
+
+export async function createCloudStream(req: CreateStreamRequest) {
+  if (!DAYDREAM_API_KEY) {
+    throw new Error("VITE_DAYDREAM_API_KEY is not set");
+  }
+
+  const response = await fetch(`${DAYDREAM_API_BASE}/v1/streams`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${DAYDREAM_API_KEY}`,
+    },
+    body: JSON.stringify(req),
+  });
+
+  if (!response.ok) {
+    const errorText = await response.text();
+    throw new Error(
+      `Daydream create stream failed: ${response.status} ${response.statusText}: ${errorText}`
+    );
+  }
+
+  const result = (await response.json()) as CreateStreamResponse;
+  return result;
+}
+
+/**
+ * Updates pipeline parameters for an existing video processing stream.
+ *
+ * @param streamId - ID of the stream to update
+ * @param req - Update request containing params and/or prompt
+ * @returns Updated stream information
+ * @see https://api.daydream.live/v1/streams/{id}
+ */
+export async function updateCloudStream(
+  streamId: string,
+  req: UpdateStreamRequest
+): Promise<UpdateStreamResponse> {
+  if (!DAYDREAM_API_KEY) {
+    throw new Error("VITE_DAYDREAM_API_KEY is not set");
+  }
+
+  const response = await fetch(
+    `${DAYDREAM_API_BASE}/v1/streams/${encodeURIComponent(streamId)}`,
+    {
+      method: "PATCH",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${DAYDREAM_API_KEY}`,
+      },
+      body: JSON.stringify(req),
+    }
+  );
+
+  if (!response.ok) {
+    const errorText = await response.text();
+    throw new Error(
+      `Daydream update stream failed: ${response.status} ${response.statusText}: ${errorText}`
+    );
+  }
+
+  const result = (await response.json()) as UpdateStreamResponse;
+  return result;
+}
+
+export async function sendDaydreamWebRTCOffer(
+  streamId: string,
+  data: DaydreamWebRTCOfferRequest
+): Promise<RTCSessionDescriptionInit> {
+  if (!DAYDREAM_API_KEY) {
+    throw new Error("VITE_DAYDREAM_API_KEY is not set");
+  }
+
+  const response = await fetch(
+    `${DAYDREAM_API_BASE}/v1/streams/${encodeURIComponent(streamId)}/webrtc/offer`,
+    {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${DAYDREAM_API_KEY}`,
+      },
+      body: JSON.stringify(data),
+    }
+  );
+
+  if (!response.ok) {
+    const errorText = await response.text();
+    throw new Error(
+      `Daydream WebRTC offer failed: ${response.status} ${response.statusText}: ${errorText}`
+    );
+  }
+
+  const result = await response.json();
+  return result;
+}
diff --git a/frontend/src/pages/StreamPage.tsx b/frontend/src/pages/StreamPage.tsx
index 09ea961dd..5d559dca7 100644
--- a/frontend/src/pages/StreamPage.tsx
+++ b/frontend/src/pages/StreamPage.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef } from "react";
+import { useState, useEffect, useRef, useCallback } from "react";
 import { Header } from "../components/Header";
 import { InputAndControlsPanel } from "../components/InputAndControlsPanel";
 import { VideoOutput } from "../components/VideoOutput";
@@ -17,7 +17,11 @@ import { getDefaultDenoisingSteps, getDefaultResolution } from "../lib/utils";
 import type { PipelineId, LoRAConfig, LoraMergeStrategy } from "../types";
 import type { PromptItem, PromptTransition } from "../lib/api";
 import { checkModelStatus, downloadPipelineModels } from "../lib/api";
+import { createCloudStream, updateCloudStream, type CreateStreamResponse, type StreamParams } from "../lib/daydream";
+import { WhipConnection } from "../components/WhipConnection";
+import { usePlaybackUrl } from "@/hooks/usePlaybackUrl";
 import { sendLoRAScaleUpdates } from "../utils/loraHelpers";
+import type { WhepClient } from "@/lib/WhepClient";
 
 function buildLoRAParams(
   loras?: LoRAConfig[],
@@ -52,6 +56,42 @@ export function StreamPage() {
   const [selectedTimelinePrompt, setSelectedTimelinePrompt] =
     useState<TimelinePrompt | null>(null);
 
+  // Cloud mode state (WHIP)
+  const [isConnectingCloud, setIsConnectingCloud] = useState(false);
+  const [isStreamingCloud, setIsStreamingCloud] = useState(false);
+  const [activeStream, setActiveStream] = useState<CreateStreamResponse | null>(null);
+  const isStartingCloudRef = useRef(false);
+  const { setPlaybackUrl } = usePlaybackUrl();
+  const whepClientRef = useRef<WhepClient | null>(null);
+
+  // Reusable function to disconnect/cleanup cloud stream state
+  const disconnectCloudStream = useCallback(() => {
+    setActiveStream(null);
+    setIsStreamingCloud(false);
+    setIsConnectingCloud(false);
+    setPlaybackUrl(null);
+  }, [setPlaybackUrl]);
+
+  // Stable callbacks for WHIP to avoid effect churn in WhipConnection
+  const onWhipConnectionStateChange = useCallback((state: RTCPeerConnectionState) => {
+    if (state === "connected") {
+      console.log("[StreamPage] WHIP connected");
+      setIsStreamingCloud(true);
+      setIsConnectingCloud(false);
+    } else if (state === "connecting" || state === "new") {
+      console.log("[StreamPage] WHIP connecting");
+      setIsConnectingCloud(true);
+    } else if (state === "failed" || state === "disconnected" || state === "closed") {
+      setIsStreamingCloud(false);
+      setIsConnectingCloud(false);
+      console.log("[StreamPage] WHIP disconnected");
+    }
+  }, [setIsStreamingCloud, setIsConnectingCloud]);
+
+  const onWhipRetryLimitExceeded = useCallback(() => {
+    disconnectCloudStream();
+  }, [disconnectCloudStream]);
+
   // Timeline state for left panel
   const [timelinePrompts, setTimelinePrompts] = useState<TimelinePrompt[]>([]);
   const [timelineCurrentTime, setTimelineCurrentTime] = useState(0);
@@ -102,10 +142,94 @@ export function StreamPage() {
     sendParameterUpdate,
   } = useWebRTC();
 
+  // Convert local params to Daydream API StreamParams format
+  const convertToStreamParams = useCallback((
+    prompts?: PromptItem[] | string | string[] | Array<[string, number]>,
+    denoisingSteps?: number[],
+    height?: number,
+    width?: number,
+    seed?: number
+  ): Partial<StreamParams> => {
+    const streamParams: Partial<StreamParams> = {};
+
+    // Convert denoising_step_list to t_index_list
+    // Scale from 0-1000 range to 0-50 range
+    if (denoisingSteps && Array.isArray(denoisingSteps)) {
+      streamParams.t_index_list = [...denoisingSteps]
+        .reverse()
+        .map(step => Math.round(step * (50 / 1000)));
+    }
+
+    // Map prompts - convert PromptItem[] to [string, number][]
+    if (prompts) {
+      if (Array.isArray(prompts) && prompts.length > 0) {
+        // Handle PromptItem[] format (most common case)
+        if (typeof prompts[0] === 'object' && prompts[0] !== null && 'text' in prompts[0]) {
+          const converted = (prompts as PromptItem[])
+            .map(item => [item.text, item.weight] as [string, number])
+            .filter(([text]) => text.trim() !== '');
+          if (converted.length > 0) {
+            streamParams.prompt = converted;
+          }
+        } else if (Array.isArray(prompts[0])) {
+          // Already in tuple format [string, number][]
+          const filtered = (prompts as Array<[string, number]>).filter(([text]) => text.trim() !== '');
+          if (filtered.length > 0) {
+            streamParams.prompt = filtered;
+          }
+        } else if (typeof prompts[0] === 'string' && prompts[0].trim() !== '') {
+          // string[] - use first non-empty string
+          streamParams.prompt = prompts[0];
+        }
+      } else if (typeof prompts === 'string' && prompts.trim() !== '') {
+        streamParams.prompt = prompts;
+      }
+    }
+
+    // Include height, width, and seed if provided
+    if (height !== undefined) {
+      streamParams.height = height;
+    }
+    if (width !== undefined) {
+      streamParams.width = width;
+    }
+    if (seed !== undefined) {
+      streamParams.seed = seed;
+    }
+
+    return streamParams;
+  }, []);
+
+  // Handle parameter updates - cloud mode vs local mode
+  const handleParameterUpdate = useCallback((params: Parameters<typeof sendParameterUpdate>[0]) => {
+    console.trace("[StreamPage] handleParameterUpdate", params);
+    if (settings.cloudMode) {
+      if (!activeStream?.id) {
+        return;
+      }
+
+      const prompts = params.prompts || params.transition?.target_prompts || undefined;
+
+      // Convert local params format to Daydream API format
+      const streamParams = convertToStreamParams(
+        prompts,
+        'denoising_step_list' in params && Array.isArray(params.denoising_step_list) ? params.denoising_step_list : undefined,
+      );
+
+      updateCloudStream(activeStream.id, {
+        params: streamParams as StreamParams,
+      });
+
+    } else {
+      sendParameterUpdate(params);
+    }
+  }, [settings.cloudMode, sendParameterUpdate, activeStream, convertToStreamParams]);
+
   // Get WebRTC stats for FPS
   const webrtcStats = useWebRTCStats({
     peerConnectionRef,
-    isStreaming,
+    isStreaming: isStreaming || isStreamingCloud,
+    whepClientRef,
   });
 
   // Video source for preview (camera or video)
@@ -137,7 +261,7 @@ export function StreamPage() {
     }
 
     // Send transition to backend
-    sendParameterUpdate({
+    handleParameterUpdate({
       transition,
     });
   };
@@ -147,6 +271,9 @@ export function StreamPage() {
     if (isStreaming) {
       stopStream();
     }
+    if (isStreamingCloud) {
+      disconnectCloudStream();
+    }
 
     // Check if we're switching from no-video-input to video-input pipeline
     const currentPipelineCategory = PIPELINES[settings.pipelineId]?.category;
@@ -278,7 +405,7 @@ export function StreamPage() {
   const handleDenoisingStepsChange = (denoisingSteps: number[]) => {
     updateSettings({ denoisingSteps });
     // Send denoising steps update to backend
-    sendParameterUpdate({
+    handleParameterUpdate({
       denoising_step_list: denoisingSteps,
     });
   };
@@ -286,7 +413,7 @@ export function StreamPage() {
   const handleNoiseScaleChange = (noiseScale: number) => {
     updateSettings({ noiseScale });
     // Send noise scale update to backend
-    sendParameterUpdate({
+    handleParameterUpdate({
       noise_scale: noiseScale,
     });
   };
@@ -294,7 +421,7 @@ export function StreamPage() {
   const handleNoiseControllerChange = (enabled: boolean) => {
     updateSettings({ noiseController: enabled });
     // Send noise controller update to backend
-    sendParameterUpdate({
+    handleParameterUpdate({
       noise_controller: enabled,
     });
   };
@@ -302,7 +429,7 @@ export function StreamPage() {
   const handleManageCacheChange = (enabled: boolean) => {
     updateSettings({ manageCache: enabled });
     // Send manage cache update to backend
-    sendParameterUpdate({
+    handleParameterUpdate({
       manage_cache: enabled,
     });
   };
@@ -315,7 +442,7 @@ export function StreamPage() {
   const handleKvCacheAttentionBiasChange = (bias: number) => {
     updateSettings({ kvCacheAttentionBias: bias });
     // Send KV cache attention bias update to backend
-    sendParameterUpdate({
+    handleParameterUpdate({
       kv_cache_attention_bias: bias,
     });
   };
@@ -350,12 +477,13 @@ export function StreamPage() {
 
   const handleResetCache = () => {
     // Send reset cache command to backend
-    sendParameterUpdate({
+    handleParameterUpdate({
       reset_cache: true,
     });
   };
 
   const handleLivePromptSubmit = (prompts: PromptItem[]) => {
+    console.log("[StreamPage] handleLivePromptSubmit", prompts);
     // Use the timeline ref to submit the prompt
     if (timelineRef.current) {
       timelineRef.current.submitLivePrompt(prompts);
@@ -363,7 +491,7 @@ export function StreamPage() {
 
     // Also send the updated parameters to the backend immediately
     // Preserve the full blend while live
-    sendParameterUpdate({
+    handleParameterUpdate({
       prompts,
       prompt_interpolation_method: interpolationMethod,
       denoising_step_list: settings.denoisingSteps || [700, 500],
@@ -427,7 +555,7 @@ export function StreamPage() {
   const handlePlayPauseToggle = () => {
     const newPausedState = !settings.paused;
     updateSettings({ paused: newPausedState });
-    sendParameterUpdate({
+    handleParameterUpdate({
       paused: newPausedState,
     });
 
@@ -459,18 +587,90 @@ export function StreamPage() {
     }
   }, [videoResolution, isStreaming, settings.pipelineId, updateSettings]);
 
+  // Unified disconnect handler for both local and cloud streams
+  const handleDisconnect = useCallback(() => {
+    if (settings.cloudMode) {
+      // Disconnect cloud stream
+      disconnectCloudStream();
+    } else {
+      // Disconnect local WebRTC stream
+      stopStream();
+    }
+  }, [settings.cloudMode, stopStream, disconnectCloudStream]);
+
   const handleStartStream = async (
     overridePipelineId?: PipelineId
   ): Promise<boolean> => {
-    if (isStreaming) {
-      stopStream();
-      return true;
+    if (!settings.cloudMode) {
+      if (isStreaming) {
+        stopStream();
+        return true;
+      }
+    } else {
+      if (isStreamingCloud) {
+        disconnectCloudStream();
+        return true;
+      }
+      // Ignore new start requests while a cloud connection is being established
+      if (isConnectingCloud || isStartingCloudRef.current) {
+        return false;
+      }
     }
 
     // Use override pipeline ID if provided, otherwise use current settings
     const pipelineIdToUse = overridePipelineId || settings.pipelineId;
 
     try {
+      // Cloud mode via WHIP
+      if (settings.cloudMode) {
+        const resolution = settings.resolution || videoResolution;
+
+        // Convert prompts and denoising steps to StreamParams format
+        const streamParams = convertToStreamParams(
+          promptItems,
+          settings.denoisingSteps,
+          resolution?.height,
+          resolution?.width,
+          settings.seed ?? 42
+        );
+
+        let params: StreamParams = {
+          model_id: PIPELINES[pipelineIdToUse]?.cloudModelId as StreamParams["model_id"],
+          ...streamParams,
+        };
+
+        setIsConnectingCloud(true);
+        isStartingCloudRef.current = true;
+        const created = await createCloudStream({
+          pipeline: 'streamdiffusion',
+          params: params,
+        });
+
+        const needsVideoInput =
+          PIPELINES[pipelineIdToUse]?.category === "video-input";
+        if (needsVideoInput && !localStream) {
+          console.error("Video input required but no local stream available");
+          setIsConnectingCloud(false);
+          return false;
+        }
+
+        console.log("[StreamPage] created:", created.stream_key);
+        const endpoint = created.whip_url;
+        // const endpoint = "https://ai.livepeer.monster/aiWebrtc/foo3-out/whip";
+        if (!endpoint) {
+          console.error("Create stream response missing whip_url");
+          setIsConnectingCloud(false);
+          return false;
+        }
+
+        // Store the full stream response for access to all fields
+        setActiveStream(created);
+
+        updateSettings({ paused: false });
+        // Keep connecting state true until RTCPeerConnection reports connected
+        return true;
+      }
+
       // Check if models are needed but not downloaded
       const pipelineInfo = PIPELINES[pipelineIdToUse];
       if (pipelineInfo?.requiresModels) {
@@ -558,7 +758,6 @@ export function StreamPage() {
       const streamToSend = needsVideoInput
         ? localStream || undefined
         : undefined;
-
       if (needsVideoInput && !localStream) {
         console.error("Video input required but no local stream available");
         return false;
@@ -615,6 +814,9 @@ export function StreamPage() {
       console.error("Error during stream start:", error);
       return false;
     }
+    finally {
+      isStartingCloudRef.current = false;
+    }
   };
 
   return (
@@ -663,6 +865,7 @@ export function StreamPage() {
             timelinePrompts={timelinePrompts}
             transitionSteps={transitionSteps}
             onTransitionStepsChange={setTransitionSteps}
+            cloudMode={settings.cloudMode}
           />
         </div>
 
@@ -673,8 +876,10 @@ export function StreamPage() {
             <VideoOutput
               className="h-full"
               remoteStream={remoteStream}
-              isPipelineLoading={isPipelineLoading}
-              isConnecting={isConnecting}
+              isPipelineLoading={
+                settings.cloudMode ? false : isPipelineLoading
+              }
+              isConnecting={settings.cloudMode ? isConnectingCloud : isConnecting}
               pipelineError={pipelineError}
               isPlaying={!settings.paused}
               isDownloading={isDownloading}
@@ -697,23 +902,25 @@ export function StreamPage() {
                   onVideoPlayingCallbackRef.current = null; // Clear after execution
                 }
               }}
+              whepClientRef={whepClientRef}
             />
           </div>
           {/* Timeline area - compact, always visible */}
-          <div className="flex-shrink-0 mt-2">
+          <div className={`flex-shrink-0 mt-2`}>
             <PromptInputWithTimeline
               currentPrompt={promptItems[0]?.text || ""}
               currentPromptItems={promptItems}
               transitionSteps={transitionSteps}
               temporalInterpolationMethod={temporalInterpolationMethod}
               onPromptSubmit={text => {
+                console.log("[StreamPage] onPromptSubmit", text);
                 // Update the left panel's prompt state to reflect current timeline prompt
                 const prompts = [{ text, weight: 100 }];
                 setPromptItems(prompts);
 
-                // Send to backend - use transition if streaming and transition steps > 0
-                if (isStreaming && transitionSteps > 0) {
-                  sendParameterUpdate({
+                // Send to backend - use transition if streaming (local or cloud) and transition steps > 0
+                if ((isStreaming || isStreamingCloud) && transitionSteps > 0) {
+                  handleParameterUpdate({
                     transition: {
                       target_prompts: prompts,
                       num_steps: transitionSteps,
@@ -723,7 +930,7 @@ export function StreamPage() {
                   });
                 } else {
                   // Send direct prompts without transition
-                  sendParameterUpdate({
+                  handleParameterUpdate({
                     prompts,
                     prompt_interpolation_method: interpolationMethod,
                     denoising_step_list: settings.denoisingSteps || [700, 500],
@@ -735,6 +942,7 @@ export function StreamPage() {
                 blockTransitionSteps,
                 blockTemporalInterpolationMethod
               ) => {
+                console.log("[StreamPage] onPromptItemsSubmit", prompts);
                 // Update the left panel's prompt state to reflect current timeline prompt blend
                 setPromptItems(prompts);
 
@@ -755,9 +963,9 @@ export function StreamPage() {
                   );
                 }
 
-                // Send to backend - use transition if streaming and transition steps > 0
-                if (isStreaming && effectiveTransitionSteps > 0) {
-                  sendParameterUpdate({
+                // Send to backend - use transition if streaming (local or cloud) and transition steps > 0
+                if ((isStreaming || isStreamingCloud) && effectiveTransitionSteps > 0) {
+                  handleParameterUpdate({
                     transition: {
                       target_prompts: prompts,
                       num_steps: effectiveTransitionSteps,
@@ -767,7 +975,7 @@ export function StreamPage() {
                   });
                 } else {
                   // Send direct prompts without transition
-                  sendParameterUpdate({
+                  handleParameterUpdate({
                     prompts,
                     prompt_interpolation_method: interpolationMethod,
                     denoising_step_list: settings.denoisingSteps || [700, 500],
@@ -780,12 +988,12 @@ export function StreamPage() {
                 isConnecting ||
                 showDownloadDialog
               }
-              isStreaming={isStreaming}
+              isStreaming={isStreaming || isStreamingCloud}
               isVideoPaused={settings.paused}
               timelineRef={timelineRef}
               onLiveStateChange={setIsLive}
               onLivePromptSubmit={handleLivePromptSubmit}
-              onDisconnect={stopStream}
+              onDisconnect={handleDisconnect}
               onStartStream={handleStartStream}
               onVideoPlayPauseToggle={handlePlayPauseToggle}
               onPromptEdit={handleTimelinePromptEdit}
@@ -811,8 +1019,21 @@ export function StreamPage() {
             className="h-full"
             pipelineId={settings.pipelineId}
             onPipelineIdChange={handlePipelineIdChange}
-            isStreaming={isStreaming}
+            isStreaming={isStreaming || isStreamingCloud}
             isDownloading={isDownloading}
+            cloudMode={settings.cloudMode ?? false}
+            onCloudModeChange={enabled => {
+              // Stop any active stream when switching modes to avoid mixed state
+              (async () => {
+                if (isStreaming) {
+                  stopStream();
+                }
+              if (isStreamingCloud) {
+                disconnectCloudStream();
+              }
+              })();
+              updateSettings({ cloudMode: enabled });
+            }}
             resolution={
               settings.resolution || getDefaultResolution(settings.pipelineId)
             }
@@ -856,6 +1077,15 @@ export function StreamPage() {
           onDownload={handleDownloadModels}
         />
       )}
+      {/* WHIP Connection Mount Point (cloud mode) */}
+      {settings.cloudMode && activeStream?.whip_url ? (
+        <WhipConnection
+          whipUrl={activeStream.whip_url}
+          stream={localStream ?? null}
+          onConnectionStateChange={onWhipConnectionStateChange}
+          onRetryLimitExceeded={onWhipRetryLimitExceeded}
+        />
+      ) : null}
     </div>
   );
 }
diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
index b49c20694..8e495a211 100644
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -2,7 +2,10 @@ export type PipelineId =
   | "streamdiffusionv2"
   | "passthrough"
   | "longlive"
-  | "krea-realtime-video";
+  | "krea-realtime-video"
+  | "sd-turbo"
+  | "sdxl-turbo"
+  | "sd15";
 
 export interface SystemMetrics {
   cpu: number;
@@ -44,6 +47,7 @@ export interface SettingsState {
   quantization?: "fp8_e4m3fn" | null;
   kvCacheAttentionBias?: number;
   paused?: boolean;
+  cloudMode?: boolean;
   loras?: LoRAConfig[];
   loraMergeStrategy?: LoraMergeStrategy;
 }