Add a prompt slider (temporarily above toolbar)

frontend/realtime/src/KonvaRootComponent/KonvaRootComponent.tsx

@@ -23,6 +23,7 @@ import { useLayoutContext } from "./contextSignals/layout";
 import { useRenderCounter } from "~/hooks/useRenderCounter";
 import { useNavigate } from "react-router-dom";
 import { SignaledMagicBox } from "./SignaledMagicBox";
+import { SignaledPromptSlider } from "./SignaledPromptSlider";
 
 export const KonvaRootComponent = ({
   className,
@@ -54,13 +55,14 @@ export const KonvaRootComponent = ({
       <KonvaCanvasContainer
         ref={konvaContainerCallbackRef}
         className={className}
-        // retreive the classNames from the parent for sizing/styling
+      // retreive the classNames from the parent for sizing/styling
       />
       <SignaledMagicBox />
       <SignaledCanvasDragDropFiles
         openAddImage={appUiContext.openAddImage}
         openAddVideo={appUiContext.openAddVideo}
       />
+      <SignaledPromptSlider />
       <SignaledToolbarMain
         layoutSignal={layoutContext.signal}
         appUiContext={appUiContext}

frontend/realtime/src/KonvaRootComponent/SignaledPromptSlider.tsx

@@ -0,0 +1,23 @@
+
+import { useSignalEffect } from "@preact/signals-react";
+import { useCallback, useRef, useState } from "react";
+import { Slider } from "~/components/ui"
+import { dispatchUiEvents, uiEvents } from "~/signals"
+import { DEFAULT_PROMPT_STRENGTH, promptStrength } from "~/signals/uiEvents/promptSettings";
+
+export const SignaledPromptSlider = () => {
+
+    const sliderValue = promptStrength.value
+    const onSliderValueChanged = dispatchUiEvents.promptSettings.setPromptStrength
+
+    // This makes component re-render whenever the signal value changes
+    useSignalEffect(() => {
+        promptStrength.value;
+    })
+
+    return (
+        <div className="fixed bottom-24 left-1/2 -translate-x-1/2 h-4 w-48">
+            <Slider min={0} max={100} value={sliderValue} onChange={onSliderValueChanged} step={1} />
+        </div>
+    )
+}

frontend/realtime/src/signals/uiEvents/index.ts

@@ -24,6 +24,10 @@ import {
   dispatchers as toolbarVideoExtractionDispatchers,
   eventsHandlers as toolbarVideoExtractionEvents,
 } from "./toolbarVideoExtraction";
+import {
+  dispatchers as promptDispatchers,
+  events as promptEvents,
+} from "./promptSettings";
 
 export const uiEvents = {
   ...addMediaEvents,
@@ -34,6 +38,7 @@ export const uiEvents = {
   toolbarMain: toolbarMainEvents,
   toolbarNode: toolbarNodeEvents,
   toolbarVideoExtraction: toolbarVideoExtractionEvents,
+  promptEvents: promptEvents,
 };
 export const dispatchUiEvents = {
   ...addMediaDispatchers,
@@ -44,4 +49,5 @@ export const dispatchUiEvents = {
   toolbarMain: toolbarMainDispatchers,
   toolbarNode: toolbarNodeDispatchers,
   toolbarVideoExtraction: toolbarVideoExtractionDispatchers,
+  promptSettings: promptDispatchers,
 };

frontend/realtime/src/signals/uiEvents/promptSettings.ts

@@ -0,0 +1,44 @@
+import { effect, signal } from "@preact/signals-react";
+
+// Prompt settings
+// - Prompt text
+// - Prompt strength
+export const DEFAULT_PROMPT_TEXT: string = "";
+export const promptText = signal<string>(DEFAULT_PROMPT_TEXT);
+const setPrompt = (data: string) => {
+  promptText.value = data;
+};
+
+const onPromptTextChanged = (callback: (data: string) => void) => {
+  effect(() => {
+    if (promptText.value) {
+      callback(promptText.value);
+    }
+  });
+};
+
+export const DEFAULT_PROMPT_STRENGTH = 100;
+export const promptStrength = signal<number>(DEFAULT_PROMPT_STRENGTH);
+const setPromptStrength = (data: number) => {
+  // Round to integer, then clamp between 0 and 100
+  promptStrength.value = Math.max(0, Math.min(100, Math.round(data)));
+};
+
+const onPromptStrengthChanged = (callback: (data: number) => void) => {
+  effect(() => {
+    if (promptStrength.value) {
+      callback(promptStrength.value);
+    }
+  });
+};
+
+//EXPORTS
+export const dispatchers = {
+  setPrompt,
+  setPromptStrength,
+};
+
+export const events = {
+  onPromptTextChanged,
+  onPromptStrengthChanged,
+};