Add checkbox parameter (and also a guide to making a PR with Flask-ML changes)

package.json

@@ -37,6 +37,7 @@
     "build:main": "cross-env NODE_ENV=production TS_NODE_TRANSPILE_ONLY=true webpack --config ./.erb/configs/webpack.config.main.prod.ts",
     "build:renderer": "cross-env NODE_ENV=production TS_NODE_TRANSPILE_ONLY=true webpack --config ./.erb/configs/webpack.config.renderer.prod.ts",
     "build:models": "npx openapicmd typegen ./src/shared/openapi.yaml > ./src/shared/generated_models.ts",
+    "tsc": "tsc",
     "postinstall": "ts-node .erb/scripts/check-native-dep.js && electron-builder install-app-deps && npm run build:dll",
     "lint": "cross-env NODE_ENV=development eslint . --ext .js,.jsx,.ts,.tsx",
     "lint-fix-models": "eslint src/shared/generated-models.ts --fix --ext .js,.jsx,.ts,.tsx",
@@ -109,6 +110,7 @@
     "@electron/remote": "^2.1.2",
     "@hookform/resolvers": "^3.9.0",
     "@radix-ui/react-accordion": "^1.2.0",
+    "@radix-ui/react-checkbox": "^1.1.3",
     "@radix-ui/react-collapsible": "^1.1.1",
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-dropdown-menu": "^2.1.2",
@@ -247,7 +249,9 @@
           "universal"
         ]
       },
-      "additionalArguments": ["-s -"],
+      "additionalArguments": [
+        "-s -"
+      ],
       "type": "distribution",
       "hardenedRuntime": true,
       "entitlements": "assets/entitlements.mac.plist",
@@ -313,4 +317,4 @@
     ],
     "logLevel": "quiet"
   }
-}
+}

src/renderer/components/ParameterField.tsx

@@ -8,6 +8,7 @@ import FloatField from './parameter_fields/FloatField';
 import EnumField from './parameter_fields/EnumField';
 import RangedIntField from './parameter_fields/RangedIntField';
 import RangedFloatField from './parameter_fields/RangedFloatField';
+import BooleanField from './parameter_fields/BooleanField';
 
 function LabelAndSubtitle({
   children,
@@ -125,6 +126,16 @@ function getFieldByParameterSchema(
           </LabelAndSubtitle>
         );
       })
+      .with({ parameterType: 'boolean' }, () => {
+        return (
+          <BooleanField
+            parameterSchema={parameterSchema}
+            value={value}
+            onChange={onChange}
+            disabled={disabled}
+          />
+        );
+      })
       .exhaustive();
   } catch (e) {
     if (e instanceof NonExhaustiveError) {

src/renderer/components/parameter_fields/BooleanField.tsx

@@ -0,0 +1,42 @@
+/* eslint-disable jsx-a11y/label-has-associated-control */
+import { ParameterSchema } from 'src/shared/generated_models';
+import { Checkbox } from '@shadcn/checkbox';
+
+export default function BooleanField({
+  parameterSchema,
+  value,
+  onChange,
+  disabled,
+}: {
+  parameterSchema: ParameterSchema;
+  value: boolean;
+  onChange: (value: boolean) => void;
+  disabled: boolean;
+}) {
+  const defaultChecked = disabled
+    ? value
+    : Boolean(parameterSchema.value.default);
+  return (
+    <div className="flex items-center mt-2">
+      <div className="items-top flex space-x-2">
+        <Checkbox
+          id={parameterSchema.key}
+          defaultChecked={defaultChecked}
+          onCheckedChange={(state) => onChange(state as boolean)}
+          disabled={disabled}
+        />
+        <div className="grid gap-1.5 leading-none">
+          <label
+            htmlFor={parameterSchema.key}
+            className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+          >
+            {parameterSchema.label}
+          </label>
+          <p className="text-sm text-muted-foreground">
+            {parameterSchema.subtitle || ''}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

src/renderer/components/ui/checkbox.tsx

@@ -0,0 +1,34 @@
+/* eslint-disable import/prefer-default-export */
+/* eslint-disable react/jsx-props-no-spreading */
+/* eslint-disable react/prop-types */
+
+'use client';
+
+import * as React from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { Check } from 'lucide-react';
+
+import { cn } from 'src/renderer/lib/utils';
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      'peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
+      className,
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn('flex items-center justify-center text-current')}
+    >
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+export { Checkbox };

src/renderer/models/ModelRunTask.tsx

@@ -123,7 +123,10 @@ export default function ModelRunTask() {
                     name={parameterSchema.key}
                     control={control}
                     rules={{
-                      required: `Field is required.`,
+                      required:
+                        parameterSchema.value.parameterType !== 'boolean'
+                          ? `Field is required.`
+                          : undefined,
                       validate: {
                         validInt: (v) =>
                           (parameterSchema.value.parameterType === 'int'
@@ -135,7 +138,7 @@ export default function ModelRunTask() {
                             : true) || `Value must be a float.`,
                       },
                     }}
-                    defaultValue={parameterSchema.value.default || ''}
+                    defaultValue={parameterSchema.value.default ?? ''}
                     render={({ field }) => (
                       <ParameterField
                         parameterSchema={parameterSchema}

src/shared/dummy_data/task_schema4.ts

@@ -134,6 +134,15 @@ const taskSchema4: TaskSchema = {
         },
       },
     },
+    {
+      key: 'sample_checkbox',
+      label: 'Sample Checkbox',
+      subtitle: 'This is a sample checkbox',
+      value: {
+        parameterType: 'boolean',
+        default: false,
+      },
+    },
   ],
 };
 

src/shared/generated_models.ts

@@ -42,6 +42,10 @@ declare namespace Components {
       output_type: 'batchtext';
       texts: TextResponse[];
     }
+    export interface BoolParameterDescriptor {
+      parameterType: ParameterType;
+      default: boolean;
+    }
     export interface DirectoryInput {
       path: string;
     }
@@ -118,7 +122,7 @@ declare namespace Components {
       output_type: 'markdown';
       value: string;
       title?: string | null;
-      subtitle?: string;
+      subtitle?: string | null;
     }
     export interface NewFileInputType {
       /**
@@ -161,15 +165,17 @@ declare namespace Components {
         | EnumParameterDescriptor
         | TextParameterDescriptor
         | RangedIntParameterDescriptor
-        | IntParameterDescriptor;
+        | IntParameterDescriptor
+        | BoolParameterDescriptor;
     }
     export type ParameterType =
       | 'ranged_float'
       | 'float'
       | 'enum'
       | 'text'
       | 'ranged_int'
-      | 'int';
+      | 'int'
+      | 'boolean';
     export interface RangedFloatParameterDescriptor {
       parameterType: ParameterType;
       range: FloatRangeDescriptor;
@@ -243,7 +249,7 @@ declare namespace Components {
       output_type: 'text';
       value: string;
       title?: string | null;
-      subtitle?: string;
+      subtitle?: string | null;
     }
   }
 }
@@ -256,6 +262,8 @@ export type BatchFileInput = Components.Schemas.BatchFileInput;
 export type BatchFileResponse = Components.Schemas.BatchFileResponse;
 export type BatchTextInput = Components.Schemas.BatchTextInput;
 export type BatchTextResponse = Components.Schemas.BatchTextResponse;
+export type BoolParameterDescriptor =
+  Components.Schemas.BoolParameterDescriptor;
 export type DirectoryInput = Components.Schemas.DirectoryInput;
 export type DirectoryResponse = Components.Schemas.DirectoryResponse;
 export type EnumParameterDescriptor =