update dev from main

.gitignore

@@ -20,4 +20,5 @@ yarn.lock
 *backend/test_resources/test_outputs/*.png
 *.env*
 samba_logo/*
-backend/17*
+backend/17*
+scripts/*

README.md

@@ -4,7 +4,6 @@
 
 ![Tests](https://github.com/tldr-group/samba-web/actions/workflows/tests.yml/badge.svg)
 
-<!-- ![Diagram showing (a) different labelling types in SAMBA, (b) impact of scale parameter on smart labelling and (c) output segmentation ](docs/gui.png) --> 
 
 
 `SAMBA` (Segment Anything Model Based App) is a trainable segmentation tool for materials science that uses [deep learning](https://github.com/facebookresearch/segment-anything) for fast, high-quality labels and random forests for robust, generalizable segmentations. It is accessible in the browser ([https://www.sambasegment.com](https://www.sambasegment.com)), without the need to download any external dependencies. This repo is a local version of the website which contains the frontend for the website (React + TSX) and the backend (Python + Flask). The frontend handles labelling and the backend sends back SAM embeddings (if requested) and segmentations.

frontend/src/components/Modals.tsx

@@ -100,7 +100,7 @@ const WelcomeModalContent = () => {
             </Modal.Header>
             <Modal.Body>
                 <p>SAMBA is a <b>web-based trainable segmentation app</b>. It has deep-learning powered label suggestions and a random-forest classifier backend.</p>
-                <p>Load an image, choose your brush on the sidebar and place some labels with <b>left click</b>. Zoom with the <b>scroll wheel</b> and pan with <b>arrow keys</b> or <b>WASD</b>. <b>Right click</b> to change the smart label focus size or to finish a polygon. Once you've labelled an example of each class, press <b>"Train Classifier"</b> to segment the image. If you still need help, check out the <a href="https://github.com/tldr-group/samba-web/manual.md">manual</a> or watch a <a href="coming-soon">video tutorial</a>. Have fun!</p>
+                <p>Load an image, choose your brush on the sidebar and place some labels with <b>left click</b>. Zoom with the <b>scroll wheel</b> and pan with <b>arrow keys</b> or <b>WASD</b>. <b>Right click</b> to change the smart label focus size or to finish a polygon. Once you've labelled an example of each class, press <b>"Train Classifier"</b> to segment the image. If you still need help, check out the <a href="https://github.com/tldr-group/samba-web/blob/main/MANUAL.md" target="_blank">manual</a> or watch a <a href="coming-soon">video tutorial</a>. Have fun!</p>
                 <p>Hotkeys:</p>
                 <ul>
                     <li><b>Left Click:</b> place label/polygon point. Hold to draw brush stroke, release to finish.</li>

frontend/src/components/Topbar.tsx

@@ -36,6 +36,7 @@ const Topbar = ({ loadFromFile, loadLabelFile, deleteAll, deleteCurrent, saveSeg
         postProcess: [, setPostProcess],
     } = useContext(AppContext)!;
     const fileInputRef = useRef<HTMLInputElement>(null);
+    const labelInputRef = useRef<HTMLInputElement>(null);
     const loadClassifierRef = useRef<HTMLInputElement>(null);
 
     // Common pattern for opening file dialog w/ button: hidden <input> who is clicked when button is clicked.
@@ -45,6 +46,12 @@ const Topbar = ({ loadFromFile, loadLabelFile, deleteAll, deleteCurrent, saveSeg
         }
     }
 
+    const addLabel = () => {
+        if (labelInputRef.current) {
+            labelInputRef.current.click();
+        }
+    }
+
     const loadClassifierClick = () => {
         if (loadClassifierRef.current) {
             loadClassifierRef.current.click();
@@ -80,7 +87,7 @@ const Topbar = ({ loadFromFile, loadLabelFile, deleteAll, deleteCurrent, saveSeg
         ["Settings", "settings.png", "", ''],
         ["Gallery", "gallery.png", "", ''],
         ["Paper", "paper.png", "coming_soon", '_blank'],
-        ["Help", "help.png", "https://github.com/tldr-group/samba-web/blob/development/MANUAL.md", '_blank'],
+        ["Help", "help.png", "https://github.com/tldr-group/samba-web/blob/main/MANUAL.md", '_blank'],
         ["Contact", "mail.png", "", ""],
         ["TLDR Group", "tldr.png", "https://tldr-group.github.io/#/", '_blank']
     ]
@@ -109,19 +116,19 @@ const Topbar = ({ loadFromFile, loadLabelFile, deleteAll, deleteCurrent, saveSeg
                             <NavDropdown.Item onClick={addData}>Load Image(s)</NavDropdown.Item>
                             <input
                                 type='file'
-                                id='file'
+                                id='file_load'
                                 ref={fileInputRef}
                                 style={{ display: 'none' }}
                                 onChange={e => handleFileUpload(e, "image")} />
-                            <NavDropdown.Item onClick={addData}>Load Labels</NavDropdown.Item>
-                            <NavDropdown.Item onClick={deleteCurrent}>Remove Image</NavDropdown.Item>
-                            <NavDropdown.Item onClick={e => setLabelType("Crop")}>Crop</NavDropdown.Item>
+                            <NavDropdown.Item onClick={addLabel}>Load Labels</NavDropdown.Item>
                             <input
                                 type='file'
-                                id='file'
-                                ref={fileInputRef}
+                                id='file_load'
+                                ref={labelInputRef}
                                 style={{ display: 'none' }}
                                 onChange={e => handleFileUpload(e, "label")} />
+                            <NavDropdown.Item onClick={deleteCurrent}>Remove Image</NavDropdown.Item>
+                            <NavDropdown.Item onClick={e => setLabelType("Crop")}>Crop</NavDropdown.Item>
                             <NavDropdown.Divider />
                             <NavDropdown.Item onClick={deleteAll}>Clear All</NavDropdown.Item>
                         </NavDropdown>