feat(gui): add profile download button

ssube · Jul 22, 2023 · a6e0461 · a6e0461
1 parent f14f197
commit a6e0461
Showing 1 changed file with 21 additions and 1 deletion.
diff --git a/gui/src/components/Profiles.tsx b/gui/src/components/Profiles.tsx
@@ -1,5 +1,5 @@
 import { InvalidArgumentError, Maybe, doesExist, mustExist } from '@apextoaster/js-utils';
-import { Delete as DeleteIcon, ImageSearch, Save as SaveIcon } from '@mui/icons-material';
+import { Delete as DeleteIcon, Download, ImageSearch, Save as SaveIcon } from '@mui/icons-material';
 import {
   Autocomplete,
   Button,
@@ -153,6 +153,11 @@ export function Profiles(props: ProfilesProps) {
         }}
       />
     </Button>
+    <Button component='label' variant='contained' onClick={() => {
+      downloadParamsAsFile(props.params);
+    }}>
+      <Download />
+    </Button>
   </Stack>;
 }
 
@@ -174,6 +179,21 @@ export async function loadParamsFromFile(file: File): Promise<Partial<Txt2ImgPar
   }
 }
 
+/**
+ * from https://stackoverflow.com/a/30800715
+ */
+export function downloadParamsAsFile(params: Txt2ImgParams): void {
+  const dataStr = 'data:text/json;charset=utf-8,' + encodeURIComponent(JSON.stringify({
+    params,
+  }));
+  const elem = document.createElement('a');
+  elem.setAttribute('href', dataStr);
+  elem.setAttribute('download', 'parameters.json');
+  document.body.appendChild(elem); // required for firefox
+  elem.click();
+  elem.remove();
+}
+
 export async function parseImageParams(file: File): Promise<Partial<Txt2ImgParams>> {
   const tags = await ExifReader.load(file);