add ctrl+s to download image

web_app/src/components/Editor.tsx

@@ -501,7 +501,7 @@ export default function Editor(props: EditorProps) {
     }
   )
 
-  const download = async () => {
+  const download = useCallback(async () => {
     if (file === undefined) {
       return
     }
@@ -543,7 +543,17 @@ export default function Editor(props: EditorProps) {
       // Get the code to click the download link
       aDownloadLink.click()
     }
-  }
+  }, [
+    file,
+    enableAutoSaving,
+    renders,
+    settings,
+    imageHeight,
+    imageWidth,
+    lineGroups,
+  ])
+
+  useHotKey("meta+s,ctrl+s", download)
 
   const toggleShowBrush = (newState: boolean) => {
     if (newState !== showBrush && !isPanning && !isCropperExtenderResizing) {

web_app/src/components/Settings.tsx

@@ -47,6 +47,7 @@ const formSchema = z.object({
   enableDownloadMask: z.boolean(),
   enableManualInpainting: z.boolean(),
   enableUploadMask: z.boolean(),
+  enableAutoExtractPrompt: z.boolean(),
 })
 
 const TAB_GENERAL = "General"
@@ -92,6 +93,7 @@ export function SettingsDialog() {
       enableDownloadMask: settings.enableDownloadMask,
       enableManualInpainting: settings.enableManualInpainting,
       enableUploadMask: settings.enableUploadMask,
+      enableAutoExtractPrompt: settings.enableAutoExtractPrompt,
       inputDirectory: fileManagerState.inputDirectory,
       outputDirectory: fileManagerState.outputDirectory,
     },
@@ -103,6 +105,7 @@ export function SettingsDialog() {
       enableDownloadMask: values.enableDownloadMask,
       enableManualInpainting: values.enableManualInpainting,
       enableUploadMask: values.enableUploadMask,
+      enableAutoExtractPrompt: values.enableAutoExtractPrompt,
     })
 
     // TODO: validate input/output Directory
@@ -308,6 +311,28 @@ export function SettingsDialog() {
 
         <Separator />
 
+        <FormField
+          control={form.control}
+          name="enableAutoExtractPrompt"
+          render={({ field }) => (
+            <FormItem className="flex items-center justify-between">
+              <div className="space-y-0.5">
+                <FormLabel>Enable auto extract prompt</FormLabel>
+                <FormDescription>
+                  Automatically extract prompt/negativate prompt from the image
+                  meta.
+                </FormDescription>
+              </div>
+              <FormControl>
+                <Switch
+                  checked={field.value}
+                  onCheckedChange={field.onChange}
+                />
+              </FormControl>
+            </FormItem>
+          )}
+        />
+
         {/* <FormField
           control={form.control}
           name="enableUploadMask"

web_app/src/lib/api.ts

@@ -176,8 +176,7 @@ export async function downloadToOutput(
 ) {
   const file = await srcToFile(image.src, filename, mimeType)
   const fd = new FormData()
-  fd.append("image", file)
+  fd.append("file", file)
-  fd.append("filename", filename)
 
   try {
     const res = await fetch(`${API_ENDPOINT}/save_image`, {