ui complete

frontend/app/components/Card.js

@@ -1,7 +1,7 @@
 export default function Card({ children }) {
   return (
     <div className="rounded-xl bg-white border border-zinc-200 p-2 w-full max-w-3xl aspect-video">
-      <div className="overflow-hidden flex-1 h-full bg-zinc-50 rounded-md flex items-center justify-center">
+      <div className="relative overflow-hidden flex-1 h-full bg-zinc-50 rounded-md flex items-center justify-center">
         {children}
       </div>
     </div>

frontend/app/components/Controls.js

@@ -3,7 +3,6 @@
 import {
   Accordion,
   ActionIcon,
-  Button,
   SegmentedControl,
   Textarea,
 } from "@mantine/core";
@@ -14,7 +13,8 @@ import {
   IconPlus,
   IconRotateClockwise,
 } from "@tabler/icons-react";
-import React from "react";
+import React, { useEffect } from "react";
+import useDebounce from "../hooks/debounce";
 import FieldSet from "./FieldSet";
 import Label from "./Label";
 import SelectInput from "./SelectInput";
@@ -33,6 +33,17 @@ export const Controls = React.memo(() => {
     },
   });
 
+  const debounce = useDebounce();
+
+  const handleChange = (event) => {
+    console.log(event);
+  };
+
+  useEffect(() => {
+    if (!form) return;
+    form.isDirty() && debounce(() => handleChange(form.values), 500);
+  }, [form, debounce]);
+
   return (
     <div className="flex flex-col gap-4">
       <Accordion
@@ -61,7 +72,9 @@ export const Controls = React.memo(() => {
                   className="rounded-md"
                   minRows={3}
                   defaultValue={form.getInputProps("positivePrompt").value}
-                  onChange={(v) => form.setFieldValue("positivePrompt", v)}
+                  onChange={(e) =>
+                    form.setFieldValue("positivePrompt", e.target.value)
+                  }
                   classNames={{
                     input:
                       "p-3 font-mono text-emerald-800 bg-emerald-600/[0.07] border-emerald-500/30 focus:border-emerald-500 focus:ring-1 focus:ring-inset focus:ring-emerald-500",
@@ -80,7 +93,9 @@ export const Controls = React.memo(() => {
                   className="rounded-md"
                   minRows={3}
                   defaultValue={form.getInputProps("negativePrompt").value}
-                  onChange={(v) => form.setFieldValue("negativePrompt", v)}
+                  onChange={(e) =>
+                    form.setFieldValue("negativePrompt", e.target.value)
+                  }
                   classNames={{
                     input:
                       "p-3 font-mono text-rose-800 bg-rose-600/[0.07] border-rose-500/30 focus:border-rose-500 focus:ring-1 focus:ring-inset focus:ring-rose-500",
@@ -173,9 +188,6 @@ export const Controls = React.memo(() => {
           <Accordion.Panel>Control net</Accordion.Panel>
         </Accordion.Item>
       </Accordion>
-      <Button className="rounded-full" onClick={() => console.log(form.values)}>
-        Submit
-      </Button>
     </div>
   );
 });

frontend/app/hooks/debounce.js

@@ -0,0 +1,31 @@
+import { useCallback, useEffect, useRef } from "react";
+
+export default function useDebounce() {
+  // Using a ref to store the current timeout identifier
+  // This is to ensure it persists across renders without causing re-renders
+  const timeoutRef = useRef(null);
+
+  // The debounce function
+  const debounce = useCallback((func, wait) => {
+    // Clear any existing timeout to ensure only the latest call is executed
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+
+    // Set the new timeout
+    timeoutRef.current = setTimeout(() => {
+      func();
+    }, wait);
+  }, []);
+
+  // Cleanup function to clear the timeout when the component is unmounted
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+
+  return debounce;
+}

frontend/app/layout.js

@@ -25,16 +25,16 @@ const theme = createTheme({
   defaultRadius: "md",
   colors: {
     darkIndigo: [
-      "#eef3ff",
-      "#dee2f2",
-      "#bdc2de",
-      "#98a0ca",
-      "#7a84ba",
-      "#6672b0",
-      "#5c68ac",
-      "#4c5897",
-      "#424e88",
-      "#364379",
+      "#e0e7ff",
+      "#c7d2fe",
+      "#a5b4fc",
+      "#818cf8",
+      "#6366f1",
+      "#4f46e5",
+      "#4338ca",
+      "#3730a3",
+      "#312e81",
+      "#1e1b4b",
     ],
   },
   primaryColor: "darkIndigo",

frontend/app/test/page.js

@@ -1,6 +1,6 @@
 "use client";
 
-import { ActionIcon } from "@mantine/core";
+import { ActionIcon, LoadingOverlay } from "@mantine/core";
 import {
   IconDoorExit,
   IconInfoSquareRoundedFilled,
@@ -57,14 +57,14 @@ export default function Test() {
 
           <main className="w-full h-full flex flex-col max-w-lg xl:max-w-2xl 2xl:max-w-full 2xl:flex-row items-center justify-center p-6 gap-3">
             <Card>
-              <iframe
-                class="w-full aspect-video"
-                src="https://www.youtube.com/embed/dQw4w9WgXcQ"
-                allowFullScreen
-              ></iframe>
+              <Avatar />
             </Card>
             <Card>
-              <Avatar />
+              <LoadingOverlay
+                visible={true}
+                zIndex={1000}
+                className="bg-zinc-300"
+              />
             </Card>
           </main>