[untested] frontend progress

frontend/src/app.sass

@@ -26,3 +26,6 @@
 .image-math-legend-table
     width: 40rem
     height: 13.5rem
+
+.form
+    width: 40rem

frontend/src/components/SelectFileSingle.svelte

@@ -8,7 +8,7 @@
 
 <FileUploader 
   multiple={false}
-  buttonLabel="Upload file"
+  buttonLabel={`Upload ${type == 'image' ? 'image' : 'file'}`}
   status="complete"
   accept={(() => {
     switch (type) {

frontend/src/lib/backend.ts

@@ -0,0 +1,26 @@
+import { VITE_BACKEND_URL } from "$env/static/private"
+
+export async function mathTransform(
+    image: File, 
+    latex: string,
+    autoMinMax: boolean,
+    heatmapOut: boolean
+): Promise<{
+    img_b64: string,
+    legend: object | null
+}> {
+    const b64 = "abc"
+
+    const resp = await fetch(`${VITE_BACKEND_URL}/math-transform`, {
+        method: "POST",
+        body: {
+            img: b64,
+            latex: latex,
+            autominmax: autoMinMax,
+            heatmap_out: false
+        }
+    })
+    const data = resp.json()
+}
+
+export async function ()

frontend/src/lib/nav.ts

@@ -20,6 +20,10 @@ const navItems: NavItemList = {
         {
             name: "Smooth Image (Convolutional)",
             urlPath: "smooth-conv"
+        },
+        {
+            name: "Object Extraction",
+            urlPath: "object-extraction"
         }
     ],
     data: [

frontend/src/routes/+page.svelte

@@ -1,7 +1,7 @@
 <script>
 	import { goto } from "$app/navigation";
 	import { ClickableTile, Column, Grid, Row} from "carbon-components-svelte";
-	import { Fire, FunctionMath, WatsonHealthSmoothing } from "carbon-icons-svelte";
+	import { Fire, FunctionMath, ImageSearchAlt, VisualRecognition, WatsonHealthSmoothing } from "carbon-icons-svelte";
 
 </script>
 <h1>Lab Tools</h1>
@@ -52,12 +52,12 @@
       </ClickableTile>
     </Column>
     <Column>
-      <ClickableTile href="/imaging/heatmap">
+      <ClickableTile href="/imaging/object-extraction">
         <div class="tile-row">
-          <Fire size={32}/>
+          <ImageSearchAlt size={32}/>
           <div class="tile-col">
-            <h4>Heatmap</h4>
-            <p>Generates a heatmap of pixel intensities.</p>
+            <h4>Simple Object Extraction</h4>
+            <p>Extracts objects from the image given light intensity criteria.</p>
           </div>
         </div>
       </ClickableTile>

frontend/src/routes/imaging/heatmap/+page.svelte

@@ -1,7 +1,14 @@
-<script>
-	import { Fire } from "carbon-icons-svelte";
+<script lang="ts">
+	import { Button, FormLabel } from "carbon-components-svelte";
+	import { Checkmark, Fire, Save } from "carbon-icons-svelte";
+	import SelectFileSingle from "src/components/SelectFileSingle.svelte";
 
+  let files: File[] = [];
+
+  let loading = false;
+  let finished = false;
 </script>
+
 <div class="title-row">
   <Fire size={32}/>
   <h1>Pixel Intensity Heatmap</h1>
@@ -9,3 +16,12 @@
 <br>
 <p>Generates a heatmap based on pixel intensities.</p>
 <br>
+
+<SelectFileSingle
+type="image"
+bind:files
+/>
+<br>
+
+<Button on:click={() => {}} icon={Checkmark}>Apply Transformation</Button>
+<Button on:click={() => {}} icon={Save} kind="secondary" disabled={!finished}>Save Output</Button>

frontend/src/routes/imaging/math-transform/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Button, Checkbox, FileUploaderButton, FormLabel, Select, SelectItem, SelectItemGroup, StructuredList, StructuredListBody, StructuredListCell, StructuredListHead, StructuredListRow } from "carbon-components-svelte";
+	import { Button, ButtonSet, Checkbox, FileUploaderButton, FormLabel, Select, SelectItem, SelectItemGroup, StructuredList, StructuredListBody, StructuredListCell, StructuredListHead, StructuredListRow } from "carbon-components-svelte";
 	import { Checkmark, FunctionMath, Group, Label, Save } from "carbon-icons-svelte";
 	import SelectFileSingle from "src/components/SelectFileSingle.svelte";
   import { MathQuill } from "svelte-mathquill";
@@ -70,6 +70,7 @@ bind:files
 </StructuredList>
 </div>
 
+<FormLabel>Config Options</FormLabel>
 <Checkbox labelText="Automatically calculate intensity maxima & minima" bind:checked={autoMinMax}/>
 <Checkbox labelText="Ouptut a heatmap" bind:checked={heatmapOutput}/>
 <br>

frontend/src/routes/imaging/object-extraction/+page.svelte

@@ -0,0 +1,22 @@
+<script>
+
+	import { InlineNotification } from "carbon-components-svelte";
+import { ImageSearchAlt } from "carbon-icons-svelte";
+
+</script>
+<div class="title-row">
+  <ImageSearchAlt size={32}/>
+  <h1>Object Extraction</h1>
+</div>
+<br>
+<p>Detects and extracts objects in the image. Uses a simple, 
+  contrast-based edge detection strategy.</p>
+<br>
+
+<InlineNotification
+  hideCloseButton
+  lowContrast
+  kind="warning"
+  title="This feature is currently under construction."
+  subtitle="Check again soon!"
+/>

frontend/src/routes/imaging/smooth-conv/+page.svelte

@@ -1,5 +1,13 @@
-<script>
-	import { WatsonHealthSmoothing } from "carbon-icons-svelte";
+<script lang="ts">
+	import { Button, FormLabel, Slider, TextInput } from "carbon-components-svelte";
+	import { Checkmark, Save, WatsonHealthSmoothing } from "carbon-icons-svelte";
+	import SelectFileSingle from "src/components/SelectFileSingle.svelte";
+
+  let files: File[] = [];
+  let radius: number = 1;
+
+  let loading = false;
+  let finished = false;
 
 </script>
 
@@ -10,3 +18,18 @@
 <br>
 <p>Applies a convolutional smoothing kernel of a customizable radius.</p>
 <br>
+
+<SelectFileSingle
+type="image"
+bind:files
+/>
+<br>
+
+<div class="form">
+<FormLabel>Smoothing Radius (px)</FormLabel>
+<Slider bind:value={radius} min={1} max={40}/>
+<br>
+</div>
+
+<Button on:click={() => {}} icon={Checkmark}>Apply Transformation</Button>
+<Button on:click={() => {}} icon={Save} kind="secondary" disabled={!finished}>Save Output</Button>