frontend/app/components/Controls.js

"use client";

import { Accordion, ActionIcon, Button, SegmentedControl } from "@mantine/core";
import { useForm } from "@mantine/form";
import { IconRotateClockwise } from "@tabler/icons-react";
import React from "react";
import FieldSet from "./FieldSet";
import Label from "./Label";
import SelectInput from "./SelectInput";
import SlideInput from "./SliderInput";
import TextInput from "./TextInput";

export const Controls = React.memo(() => {
  const form = useForm({
    initialValues: {
      steps: 1,
      guidance: 0.1,
      seed: 45678,
      resolution: "720",
    },
  });

  return (
    <div className="flex flex-col gap-4">
      <Accordion defaultValue="camera">
        <Accordion.Item value="camera" key="camera">
          <Accordion.Control value="camera">Camera</Accordion.Control>
          <Accordion.Panel>
            <FieldSet>
              <SelectInput label="Device" />
              <div>
                <Label>Resolution</Label>
                <SegmentedControl
                  fullWidth
                  size="sm"
                  radius="xl"
                  defaultValue={"720"}
                  data={[
                    { label: "480P", value: "480" },
                    { label: "720P", value: "720" },
                    { label: "1080P", value: "1080" },
                  ]}
                  onChange={(v) => form.setFieldValue("resolution", v)}
                />
              </div>
            </FieldSet>
          </Accordion.Panel>
        </Accordion.Item>
        <Accordion.Item value="inference" key="inference">
          <Accordion.Control value="inference">Inference</Accordion.Control>
          <Accordion.Panel>
            <div className="flex flex-col gap-4">
              <TextInput
                label="Seed"
                type="number"
                fieldProps={form.getInputProps("seed")}
              >
                <ActionIcon
                  radius="sm"
                  variant="subtle"
                  onClick={() =>
                    form.setFieldValue(
                      "seed",
                      Math.floor(Math.random() * 100000001)
                    )
                  }
                >
                  <IconRotateClockwise
                    style={{ width: "70%", height: "70%" }}
                    stroke={2}
                  />
                </ActionIcon>
              </TextInput>
              <SlideInput
                label="Steps"
                fieldProps={form.getInputProps("steps")}
                step={1}
                min={1}
                max={15}
                marks={[
                  { value: 1, label: "Low" },
                  { value: 15, label: "High" },
                ]}
              />
              <SlideInput
                label="Guidance"
                fieldProps={form.getInputProps("guidance")}
                step={0.001}
                min={0}
                max={30}
                marks={[
                  { value: 0, label: "None" },
                  { value: 2.5, label: "Low" },
                  { value: 7.5, label: "Normal" },
                  { value: 12.5, label: "Strict" },
                  { value: 17.5, label: "Very Strict" },
                  { value: 30, label: "Max" },
                ]}
              />
            </div>
          </Accordion.Panel>
        </Accordion.Item>
        <Accordion.Item value="cn" key="cn">
          <Accordion.Control value="cn">Control Net</Accordion.Control>
          <Accordion.Panel>Control net</Accordion.Panel>
        </Accordion.Item>
      </Accordion>
      <Button className="rounded-full" onClick={() => console.log(form.values)}>
        Submit
      </Button>
      Strength
    </div>
  );
});
Controls.displayName = "Controls";

export default Controls;