ui updates

frontend/app/components/Card.js

@@ -1,11 +1,9 @@
-export default function Card({ headerText = "Header", HeaderIcon, children }) {
+export default function Card({ children }) {
   return (
-    <div className="overflow-hidden rounded-lg bg-white border shadow-lg">
-      <header className="flex flex-row gap-2 px-4 py-5 sm:px-6">
-        <HeaderIcon className="w-5 h5" />
-        <h3 className="text-sm font-bold">{headerText}</h3>
-      </header>
-      <main className="px-4 pb-4">{children}</main>
+    <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">
+        {children}
+      </div>
     </div>
   );
 }

frontend/app/components/Controls.js

@@ -1,8 +1,19 @@
 "use client";
 
-import { Accordion, ActionIcon, Button, SegmentedControl } from "@mantine/core";
+import {
+  Accordion,
+  ActionIcon,
+  Button,
+  SegmentedControl,
+  Textarea,
+} from "@mantine/core";
 import { useForm } from "@mantine/form";
-import { IconRotateClockwise } from "@tabler/icons-react";
+import {
+  IconArrowDownRight,
+  IconMinus,
+  IconPlus,
+  IconRotateClockwise,
+} from "@tabler/icons-react";
 import React from "react";
 import FieldSet from "./FieldSet";
 import Label from "./Label";
@@ -13,6 +24,8 @@ import TextInput from "./TextInput";
 export const Controls = React.memo(() => {
   const form = useForm({
     initialValues: {
+      positivePrompt: "some kind of prompt",
+      negativePrompt: "bad hands",
       steps: 1,
       guidance: 0.1,
       seed: 45678,
@@ -22,7 +35,62 @@ export const Controls = React.memo(() => {
 
   return (
     <div className="flex flex-col gap-4">
-      <Accordion defaultValue="camera">
+      <Accordion
+        defaultValue="prompt"
+        classNames={{
+          chevron: "w-[20px] text-indigo-500",
+          label: "font-medium text-zinc-900",
+          control: "hover:bg-zinc-50",
+          item: "border-zinc-200",
+        }}
+        chevron={<IconArrowDownRight size={20} stroke={2} className="block" />}
+      >
+        <Accordion.Item value="prompt" key="prompt">
+          <Accordion.Control value="prompt">Prompt</Accordion.Control>
+          <Accordion.Panel>
+            <FieldSet>
+              <div className="flex flex-col">
+                <div className="flex flex-row items-center gap-2 mb-2">
+                  <IconPlus size={20} stroke={1} className="text-emerald-500" />
+                  <span className="font-mono uppercase text-xs tracking-wider text-emerald-600">
+                    Positive Prompt
+                  </span>
+                </div>
+                <Textarea
+                  autosize
+                  className="rounded-md"
+                  minRows={3}
+                  defaultValue={form.getInputProps("positivePrompt").value}
+                  onChange={(v) => form.setFieldValue("positivePrompt", v)}
+                  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",
+                  }}
+                />
+              </div>
+              <div className="flex flex-col">
+                <div className="flex flex-row items-center gap-2 mb-2">
+                  <IconMinus size={20} stroke={1} className="text-rose-500" />
+                  <span className="font-mono uppercase text-xs tracking-wider text-rose-600">
+                    Negative Prompt
+                  </span>
+                </div>
+                <Textarea
+                  autosize
+                  className="rounded-md"
+                  minRows={3}
+                  defaultValue={form.getInputProps("negativePrompt").value}
+                  onChange={(v) => form.setFieldValue("negativePrompt", v)}
+                  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",
+                  }}
+                />
+              </div>
+            </FieldSet>
+          </Accordion.Panel>
+        </Accordion.Item>
+
         <Accordion.Item value="camera" key="camera">
           <Accordion.Control value="camera">Camera</Accordion.Control>
           <Accordion.Panel>
@@ -46,8 +114,8 @@ export const Controls = React.memo(() => {
             </FieldSet>
           </Accordion.Panel>
         </Accordion.Item>
-        <Accordion.Item value="inference" key="inference">
-          <Accordion.Control value="inference">Inference</Accordion.Control>
+        <Accordion.Item value="diffusion" key="diffusion">
+          <Accordion.Control value="inference">Diffusion</Accordion.Control>
           <Accordion.Panel>
             <div className="flex flex-col gap-4">
               <TextInput
@@ -108,7 +176,6 @@ export const Controls = React.memo(() => {
       <Button className="rounded-full" onClick={() => console.log(form.values)}>
         Submit
       </Button>
-      Strength
     </div>
   );
 });

frontend/app/components/HUDItem.js

@@ -0,0 +1,8 @@
+export const HUDItem = ({ value, label }) => (
+  <div className="font-mono text-xs tracking-wider uppercase border border-zinc-200 rounded-md py-2 px-3">
+    <span className="text-zinc-500">{label}: </span>
+    <span className="font-bold text-zinc-700">{value}</span>
+  </div>
+);
+
+export default HUDItem;

frontend/app/components/TrayButton.js

@@ -0,0 +1,30 @@
+import { Button } from "@mantine/core";
+
+const DEFAULT_COLORS =
+  "bg-indigo-700 text-indigo-100 hover:text-indigo-50 hover:bg-indigo-600";
+const DEFAULT_ICON_COLORS = "text-indigo-300 group-hover:text-indigo-200";
+
+const RED_COLORS =
+  "bg-rose-700 text-rose-100 hover:text-rose-50 hover:bg-rose-600";
+const RED_ICON_COLORS = "text-rose-300 group-hover:text-rose-200";
+
+export const TrayButton = ({ Icon, red = false, children }) => (
+  <Button
+    size="md"
+    radius="xl"
+    className={`group transition-colors duration-300 ${
+      red ? RED_COLORS : DEFAULT_COLORS
+    }`}
+    leftSection={
+      <Icon
+        size={20}
+        stroke={2}
+        className={`${
+          red ? RED_ICON_COLORS : DEFAULT_ICON_COLORS
+        } transition-colors duration-300`}
+      />
+    }
+  >
+    {children}
+  </Button>
+);

frontend/app/globals.css

@@ -1,10 +1,12 @@
-@tailwind components;
-@tailwind utilities;
+@import "@mantine/core/styles.css";
 
 @layer tailwind {
   @tailwind base;
 }
 
+@tailwind components;
+@tailwind utilities;
+
 * {
   box-sizing: border-box;
 }
@@ -31,3 +33,12 @@ body {
   -moz-osx-font-smoothing: grayscale;
   @apply text-black;
 }
+
+body {
+  font-family: var(--font-sans);
+  overflow-x: hidden;
+}
+
+.font-mono {
+  font-family: var(--font-mono);
+}

frontend/app/layout.js

@@ -1,9 +1,20 @@
-import { ColorSchemeScript, MantineProvider, createTheme } from "@mantine/core";
-import "@mantine/core/styles.layer.css";
-import { Inter } from "next/font/google";
 import "./globals.css";
 
-const inter = Inter({ subsets: ["latin"] });
+import { ColorSchemeScript, MantineProvider, createTheme } from "@mantine/core";
+import { Space_Grotesk, Space_Mono } from "next/font/google";
+
+// Font
+const sans = Space_Grotesk({
+  subsets: ["latin"],
+  weight: ["400", "500", "600"],
+  variable: "--font-sans",
+});
+
+const mono = Space_Mono({
+  subsets: ["latin"],
+  weight: ["400", "700"],
+  variable: "--font-mono",
+});
 
 export const metadata = {
   title: "Real-time SDTurbo + WebRTC",
@@ -34,8 +45,12 @@ export default function RootLayout({ children }) {
     <html lang="en">
       <head>
         <ColorSchemeScript />
+        <meta
+          name="viewport"
+          content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no"
+        />
       </head>
-      <body className={`${inter.className} bg-gray-100`}>
+      <body className={`${sans.variable} ${mono.variable}`}>
         <MantineProvider theme={theme}>{children}</MantineProvider>
       </body>
     </html>

frontend/app/test/page.js

@@ -1,18 +1,81 @@
+"use client";
+
+import { ActionIcon } from "@mantine/core";
+import {
+  IconDoorExit,
+  IconInfoSquareRoundedFilled,
+  IconLayoutSidebarRightCollapse,
+  IconLayoutSidebarRightExpand,
+} from "@tabler/icons-react";
+import { useState } from "react";
+import Avatar from "../components/Avatar";
+import Card from "../components/Card";
 import Controls from "../components/Controls";
+import { HUDItem } from "../components/HUDItem";
+import { TrayButton } from "../components/TrayButton";
+
+/**
+global settings: resolution
+<br />
+camera settings: simulcast - fps bitrate seed guidance
+<br />
+seed, guidance, strength, cn scale, cn start, cn end, canny low
+threshold, canny_high_threshold, debug canny
+ */
 
 export default function Test() {
+  const [panelHidden, setPanelHidden] = useState(false);
+
   return (
-    <div className="h-screen grid grid-cols-[480px_1fr]">
-      <aside className="overflow-y-auto border-r border-gray-200 bg-white">
-        <Controls />
-        global settings: resolution
-        <br />
-        camera settings: simulcast - fps bitrate seed guidance
-        <br />
-        seed, guidance, strength, cn scale, cn start, cn end, canny low
-        threshold, canny_high_threshold, debug canny
-      </aside>
-      <main className="overflow-y-auto">Main</main>
+    <div className="flex flex-col min-h-screen">
+      <div
+        className={`flex-1 grid ${
+          panelHidden ? "grid-cols-[0px_1fr]" : "grid-cols-[460px_1fr]"
+        }`}
+      >
+        <aside className="overflow-y-auto max-h-screen border-r border-zinc-200 bg-white">
+          <Controls />
+        </aside>
+        <div className="max-h-screen bg-zinc-100 flex items-center justify-center relative">
+          <header className="flex flex-row justify-between px-3 absolute top-3 w-full">
+            <ActionIcon
+              size="lg"
+              className="rounded-md bg-zinc-200 hover:bg-indigo-500 hover:text-indigo-50 text-zinc-500 transition-colors duration-300"
+              onClick={() => setPanelHidden(!panelHidden)}
+            >
+              {panelHidden ? (
+                <IconLayoutSidebarRightCollapse size={20} stroke={2} />
+              ) : (
+                <IconLayoutSidebarRightExpand size={20} stroke={2} />
+              )}
+            </ActionIcon>
+            <div className="flex flex-row gap-2">
+              <HUDItem label="Expiry" value="3:00" />
+              <HUDItem label="FPS" value="0" />
+            </div>
+          </header>
+
+          <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>
+            </Card>
+            <Card>
+              <Avatar />
+            </Card>
+          </main>
+
+          <footer className="absolute flex flex-row gap-2 bottom-3 right-3">
+            <TrayButton Icon={IconInfoSquareRoundedFilled}>About</TrayButton>
+            <TrayButton red Icon={IconDoorExit}>
+              Leave
+            </TrayButton>
+          </footer>
+        </div>
+      </div>
     </div>
   );
 }

frontend/tailwind.config.js

@@ -7,19 +7,7 @@ module.exports = {
   ],
   theme: {
     extend: {
-      color: {
-        brandDark: {
-          100: "#161618",
-          200: "#161618",
-          300: "#161618",
-          400: "#161618",
-          500: "#161618",
-          600: "#161618",
-          700: "#161618",
-          800: "#161618",
-          900: "#161618",
-        },
-      },
+      color: {},
       container: {
         center: true,
         screens: {