Skip to content

Commit f16b84d

Browse files
mjh1mjh1
committed
Fixes
Disconnect cloud stream on timeline reset Keep resolution to multiples of 64 for cloud
1 parent a136d6f commit f16b84d

File tree

5 files changed

+133
-82
lines changed

5 files changed

+133
-82
lines changed

‎frontend/src/components/InputAndControlsPanel.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@ interface InputAndControlsPanelProps {
4949
timelinePrompts?: TimelinePrompt[];
5050
transitionSteps: number;
5151
onTransitionStepsChange: (steps: number) => void;
52+
cloudMode?: boolean;
5253
}
5354

5455
export function InputAndControlsPanel({
@@ -84,6 +85,7 @@ export function InputAndControlsPanel({
8485
timelinePrompts: _timelinePrompts = [],
8586
transitionSteps,
8687
onTransitionStepsChange,
88+
cloudMode = false,
8789
}: InputAndControlsPanelProps) {
8890
// Helper function to determine if playhead is at the end of timeline
8991
const isAtEndOfTimeline = () => {
@@ -271,6 +273,7 @@ export function InputAndControlsPanel({
271273
transitionSteps={transitionSteps}
272274
onTransitionStepsChange={onTransitionStepsChange}
273275
timelinePrompts={_timelinePrompts}
276+
cloudMode={cloudMode}
274277
/>
275278
)}
276279
</div>

‎frontend/src/components/PromptInput.tsx‎

Lines changed: 69 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ interface PromptInputProps {
3232
transitionSteps?: number;
3333
onTransitionStepsChange?: (steps: number) => void;
3434
timelinePrompts?: TimelinePrompt[];
35+
cloudMode?: boolean;
3536
}
3637

3738
export function PromptInput({
@@ -51,6 +52,7 @@ export function PromptInput({
5152
transitionSteps = 4,
5253
onTransitionStepsChange,
5354
timelinePrompts = [],
55+
cloudMode = false,
5456
}: PromptInputProps) {
5557
const [isProcessing, setIsProcessing] = useState(false);
5658
const [focusedIndex, setFocusedIndex] = useState<number | null>(null);
@@ -160,7 +162,8 @@ export function PromptInput({
160162
/>
161163
</div>
162164

163-
<div className="space-y-2">
165+
<div className="space-y-2">
166+
{!cloudMode && (
164167
<TemporalTransitionControls
165168
transitionSteps={transitionSteps}
166169
onTransitionStepsChange={steps => onTransitionStepsChange?.(steps)}
@@ -171,42 +174,43 @@ export function PromptInput({
171174
disabled={disabled || !isStreaming || timelinePrompts.length === 0}
172175
className="space-y-2"
173176
/>
177+
)}
174178

175-
{/* Add/Submit buttons - Bottom row */}
176-
<div className="flex items-center justify-end gap-2">
177-
{managedPrompts.length < 4 && (
178-
<Button
179-
onMouseDown={e => {
180-
e.preventDefault();
181-
handleAddPrompt();
182-
}}
183-
disabled={disabled}
184-
size="sm"
185-
variant="ghost"
186-
className="rounded-full w-8 h-8 p-0"
187-
>
188-
<Plus className="h-4 w-4" />
189-
</Button>
190-
)}
179+
{/* Add/Submit buttons - Bottom row */}
180+
<div className="flex items-center justify-end gap-2">
181+
{managedPrompts.length < 4 && (
191182
<Button
192183
onMouseDown={e => {
193184
e.preventDefault();
194-
handleSubmit();
185+
handleAddPrompt();
195186
}}
196-
disabled={
197-
disabled ||
198-
!managedPrompts.some(p => p.text.trim()) ||
199-
isProcessing
200-
}
187+
disabled={disabled}
201188
size="sm"
202-
className="rounded-full w-8 h-8 p-0 bg-black hover:bg-gray-800 text-white disabled:opacity-50 disabled:cursor-not-allowed"
189+
variant="ghost"
190+
className="rounded-full w-8 h-8 p-0"
203191
>
204-
{isProcessing ? "..." : <ArrowUp className="h-4 w-4" />}
192+
<Plus className="h-4 w-4" />
205193
</Button>
206-
</div>
194+
)}
195+
<Button
196+
onMouseDown={e => {
197+
e.preventDefault();
198+
handleSubmit();
199+
}}
200+
disabled={
201+
disabled ||
202+
!managedPrompts.some(p => p.text.trim()) ||
203+
isProcessing
204+
}
205+
size="sm"
206+
className="rounded-full w-8 h-8 p-0 bg-black hover:bg-gray-800 text-white disabled:opacity-50 disabled:cursor-not-allowed"
207+
>
208+
{isProcessing ? "..." : <ArrowUp className="h-4 w-4" />}
209+
</Button>
207210
</div>
208211
</div>
209-
);
212+
</div>
213+
);
210214
}
211215

212216
// Multiple prompts mode: show weights and controls
@@ -241,43 +245,47 @@ export function PromptInput({
241245
})}
242246

243247
<div className="space-y-2">
244-
{/* Spatial Blend - only for multiple prompts */}
245-
{managedPrompts.length >= 2 && (
246-
<div className="flex items-center justify-between gap-2">
247-
<span className="text-xs text-muted-foreground">
248-
Spatial Blend:
249-
</span>
250-
<Select
251-
value={interpolationMethod}
252-
onValueChange={value =>
253-
onInterpolationMethodChange?.(value as "linear" | "slerp")
248+
{!cloudMode && (
249+
<>
250+
{/* Spatial Blend - only for multiple prompts */}
251+
{managedPrompts.length >= 2 && (
252+
<div className="flex items-center justify-between gap-2">
253+
<span className="text-xs text-muted-foreground">
254+
Spatial Blend:
255+
</span>
256+
<Select
257+
value={interpolationMethod}
258+
onValueChange={value =>
259+
onInterpolationMethodChange?.(value as "linear" | "slerp")
260+
}
261+
disabled={disabled}
262+
>
263+
<SelectTrigger className="w-24 h-6 text-xs">
264+
<SelectValue />
265+
</SelectTrigger>
266+
<SelectContent>
267+
<SelectItem value="linear">Linear</SelectItem>
268+
<SelectItem value="slerp" disabled={managedPrompts.length > 2}>
269+
Slerp
270+
</SelectItem>
271+
</SelectContent>
272+
</Select>
273+
</div>
274+
)}
275+
276+
<TemporalTransitionControls
277+
transitionSteps={transitionSteps}
278+
onTransitionStepsChange={steps => onTransitionStepsChange?.(steps)}
279+
temporalInterpolationMethod={temporalInterpolationMethod}
280+
onTemporalInterpolationMethodChange={method =>
281+
onTemporalInterpolationMethodChange?.(method)
254282
}
255-
disabled={disabled}
256-
>
257-
<SelectTrigger className="w-24 h-6 text-xs">
258-
<SelectValue />
259-
</SelectTrigger>
260-
<SelectContent>
261-
<SelectItem value="linear">Linear</SelectItem>
262-
<SelectItem value="slerp" disabled={managedPrompts.length > 2}>
263-
Slerp
264-
</SelectItem>
265-
</SelectContent>
266-
</Select>
267-
</div>
283+
disabled={disabled || !isStreaming || timelinePrompts.length === 0}
284+
className="space-y-2"
285+
/>
286+
</>
268287
)}
269288

270-
<TemporalTransitionControls
271-
transitionSteps={transitionSteps}
272-
onTransitionStepsChange={steps => onTransitionStepsChange?.(steps)}
273-
temporalInterpolationMethod={temporalInterpolationMethod}
274-
onTemporalInterpolationMethodChange={method =>
275-
onTemporalInterpolationMethodChange?.(method)
276-
}
277-
disabled={disabled || !isStreaming || timelinePrompts.length === 0}
278-
className="space-y-2"
279-
/>
280-
281289
{/* Add/Submit buttons - Bottom row */}
282290
<div className="flex items-center justify-end gap-2">
283291
{managedPrompts.length < 4 && (

‎frontend/src/components/SettingsPanel.tsx‎

Lines changed: 33 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -161,6 +161,13 @@ export function SettingsPanel({
161161
} else {
162162
setWidthError(`Must be at most ${maxValue}`);
163163
}
164+
} else if (cloudMode && value % 64 !== 0) {
165+
// In cloud mode, dimension must be a multiple of 64
166+
if (dimension === "height") {
167+
setHeightError(`Must be a multiple of 64 in cloud mode`);
168+
} else {
169+
setWidthError(`Must be a multiple of 64 in cloud mode`);
170+
}
164171
} else {
165172
// Clear error if valid
166173
if (dimension === "height") {
@@ -179,7 +186,18 @@ export function SettingsPanel({
179186

180187
const incrementResolution = (dimension: "height" | "width") => {
181188
const maxValue = 2048;
182-
const newValue = Math.min(maxValue, effectiveResolution[dimension] + 1);
189+
const currentValue = effectiveResolution[dimension];
190+
191+
let newValue: number;
192+
if (cloudMode && currentValue % 64 !== 0) {
193+
// Snap to next multiple of 64
194+
newValue = Math.ceil(currentValue / 64) * 64;
195+
} else {
196+
const step = cloudMode ? 64 : 1;
197+
newValue = currentValue + step;
198+
}
199+
200+
newValue = Math.min(maxValue, newValue);
183201
handleResolutionChange(dimension, newValue);
184202
};
185203

@@ -190,7 +208,18 @@ export function SettingsPanel({
190208
pipelineId === "krea-realtime-video"
191209
? MIN_DIMENSION
192210
: 1;
193-
const newValue = Math.max(minValue, effectiveResolution[dimension] - 1);
211+
const currentValue = effectiveResolution[dimension];
212+
213+
let newValue: number;
214+
if (cloudMode && currentValue % 64 !== 0) {
215+
// Snap to previous multiple of 64
216+
newValue = Math.floor(currentValue / 64) * 64;
217+
} else {
218+
const step = cloudMode ? 64 : 1;
219+
newValue = currentValue - step;
220+
}
221+
222+
newValue = Math.max(minValue, newValue);
194223
handleResolutionChange(dimension, newValue);
195224
};
196225

@@ -453,6 +482,7 @@ export function SettingsPanel({
453482
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"
454483
min={MIN_DIMENSION}
455484
max={2048}
485+
step={cloudMode ? 64 : 1}
456486
/>
457487
<Button
458488
variant="ghost"
@@ -502,6 +532,7 @@ export function SettingsPanel({
502532
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"
503533
min={MIN_DIMENSION}
504534
max={2048}
535+
step={cloudMode ? 64 : 1}
505536
/>
506537
<Button
507538
variant="ghost"

‎frontend/src/hooks/useStreamState.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ export function useStreamState() {
5454
const info = await getHardwareInfo();
5555
setHardwareInfo(info);
5656
} catch (error) {
57+
// TODO disable local gpu mode if this fails and only allow cloud?
5758
console.error("Failed to fetch hardware info:", error);
5859
}
5960
};

‎frontend/src/pages/StreamPage.tsx‎

Lines changed: 27 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,14 @@ export function StreamPage() {
6262
const isStartingCloudRef = useRef(false);
6363
const { setPlaybackUrl } = usePlaybackUrl();
6464

65+
// Reusable function to disconnect/cleanup cloud stream state
66+
const disconnectCloudStream = useCallback(() => {
67+
setActiveStream(null);
68+
setIsStreamingCloud(false);
69+
setIsConnectingCloud(false);
70+
setPlaybackUrl(null);
71+
}, [setPlaybackUrl]);
72+
6573
// Stable callbacks for WHIP to avoid effect churn in WhipConnection
6674
const onWhipConnectionStateChange = useCallback((state: RTCPeerConnectionState) => {
6775
if (state === "connected") {
@@ -79,11 +87,8 @@ export function StreamPage() {
7987
}, [setIsStreamingCloud, setIsConnectingCloud]);
8088

8189
const onWhipRetryLimitExceeded = useCallback(() => {
82-
setIsStreamingCloud(false);
83-
setIsConnectingCloud(false);
84-
setActiveStream(null);
85-
setPlaybackUrl(null);
86-
}, [setIsStreamingCloud, setIsConnectingCloud, setPlaybackUrl]);
90+
disconnectCloudStream();
91+
}, [disconnectCloudStream]);
8792

8893
// Timeline state for left panel
8994
const [timelinePrompts, setTimelinePrompts] = useState<TimelinePrompt[]>([]);
@@ -264,10 +269,7 @@ export function StreamPage() {
264269
stopStream();
265270
}
266271
if (isStreamingCloud) {
267-
setActiveStream(null);
268-
setIsStreamingCloud(false);
269-
setIsConnectingCloud(false);
270-
setPlaybackUrl(null);
272+
disconnectCloudStream();
271273
}
272274

273275
// Check if we're switching from no-video-input to video-input pipeline
@@ -582,6 +584,17 @@ export function StreamPage() {
582584
}
583585
}, [videoResolution, isStreaming, settings.pipelineId, updateSettings]);
584586

587+
// Unified disconnect handler for both local and cloud streams
588+
const handleDisconnect = useCallback(() => {
589+
if (settings.cloudMode) {
590+
// Disconnect cloud stream
591+
disconnectCloudStream();
592+
} else {
593+
// Disconnect local WebRTC stream
594+
stopStream();
595+
}
596+
}, [settings.cloudMode, stopStream, disconnectCloudStream]);
597+
585598
const handleStartStream = async (
586599
overridePipelineId?: PipelineId
587600
): Promise<boolean> => {
@@ -592,10 +605,7 @@ export function StreamPage() {
592605
}
593606
} else {
594607
if (isStreamingCloud) {
595-
setActiveStream(null);
596-
setIsStreamingCloud(false);
597-
setIsConnectingCloud(false);
598-
setPlaybackUrl(null);
608+
disconnectCloudStream();
599609
return true;
600610
}
601611
// Ignore new start requests while a cloud connection is being established
@@ -852,6 +862,7 @@ export function StreamPage() {
852862
timelinePrompts={timelinePrompts}
853863
transitionSteps={transitionSteps}
854864
onTransitionStepsChange={setTransitionSteps}
865+
cloudMode={settings.cloudMode}
855866
/>
856867
</div>
857868

@@ -978,7 +989,7 @@ export function StreamPage() {
978989
timelineRef={timelineRef}
979990
onLiveStateChange={setIsLive}
980991
onLivePromptSubmit={handleLivePromptSubmit}
981-
onDisconnect={stopStream}
992+
onDisconnect={handleDisconnect}
982993
onStartStream={handleStartStream}
983994
onVideoPlayPauseToggle={handlePlayPauseToggle}
984995
onPromptEdit={handleTimelinePromptEdit}
@@ -1004,7 +1015,7 @@ export function StreamPage() {
10041015
className="h-full"
10051016
pipelineId={settings.pipelineId}
10061017
onPipelineIdChange={handlePipelineIdChange}
1007-
isStreaming={isStreaming}
1018+
isStreaming={isStreaming || isStreamingCloud}
10081019
isDownloading={isDownloading}
10091020
cloudMode={settings.cloudMode ?? false}
10101021
onCloudModeChange={enabled => {
@@ -1014,10 +1025,7 @@ export function StreamPage() {
10141025
stopStream();
10151026
}
10161027
if (isStreamingCloud) {
1017-
setActiveStream(null);
1018-
setIsStreamingCloud(false);
1019-
setIsConnectingCloud(false);
1020-
setPlaybackUrl(null);
1028+
disconnectCloudStream();
10211029
}
10221030
})();
10231031
updateSettings({ cloudMode: enabled });

0 commit comments

Comments
 (0)