Features for V0.55

docs/contribution.md

@@ -79,14 +79,14 @@ The steps to creating a custom model can be done in a several steps:
         ```
       - return (`self._key_`, self) as a tuple.
     - `load(self)`
-      - Load the model into a variable and return that variable
+      - Load the model into a variable and save that variable into `self._model_`.
         ```python
         loaded_model = load_the_model(<model_path>)
-        return loaded_model
+        self._model_ = loaded_model
         ```
-    - `predict(self, model, image_array)`
+    - `predict(self, image_array)`
 
-      - Take in the model and perform inference on the image array.
+      - Perform inference on the image array.
       - Return the inference as a dictionary of
 
         ```python
@@ -107,6 +107,8 @@ The steps to creating a custom model can be done in a several steps:
         }
         ```
 
+        NOTE: The segmentation masks are in the form of image masks, not bounding box masks.
+
     You may also define other functions, but these functions are the basic necessity.
 
 5.  In the [Model Factory](../src/engine/server/models/abstract/Model.py) `src/engine/server/models/abstract/Model.py`, import and add your your custom model class into the `model_class` dictionary.

src/app/pages/index.js

@@ -6,7 +6,11 @@ import dynamic from "next/dynamic";
 import { Classes } from "@blueprintjs/core";
 import { setConfiguration } from "react-grid-system";
 import HeaderNav from "@portal/components/ui/header/navbar";
-import { APIGetGPU } from "@portal/api/general";
+import {
+  APIGetGPU,
+  APIAutosaveQuery,
+  APIAutosaveToggle,
+} from "@portal/api/general";
 
 /* Global Setting / Styling */
 const THEME_LOCAL_STORAGE_KEY = "nexus-theme";
@@ -29,12 +33,14 @@ class Annotation extends React.Component {
       useDarkTheme: true,
       loadedModel: undefined,
       isConnected: false,
+      isAutosave: false,
     };
 
     /* Grid Layout Configuration */
     setConfiguration({ gutterWidth: 12 });
     this.setTheme = this.setTheme.bind(this);
     this.setGPU = this.setGPU.bind(this);
+    this.setAutosave = this.setAutosave.bind(this);
   }
 
   componentDidMount() {
@@ -49,6 +55,13 @@ class Annotation extends React.Component {
         this.setState({ isGPU: true });
       }
     });
+
+    // Call for the autosave settings from the backend
+    APIAutosaveQuery().then(res => {
+      if (res.data === 1) {
+        this.setState({ isAutosave: true });
+      }
+    });
   }
 
   setTheme(flag) {
@@ -62,6 +75,14 @@ class Annotation extends React.Component {
     this.setState({ isGPU: flag });
   }
 
+  async setAutosave(flag) {
+    APIAutosaveToggle(flag).then(res => {
+      if (res.status === 200) {
+        this.setState({ isAutosave: flag });
+      }
+    });
+  }
+
   render() {
     return (
       <>
@@ -105,6 +126,7 @@ class Annotation extends React.Component {
             GlobalSettingCallback={{
               setTheme: this.setTheme,
               setGPU: this.setGPU,
+              setAutosave: this.setAutosave,
               handleIsConnected: isConnected => {
                 this.setState({ isConnected });
               },

src/app/src/api/annotation.ts

@@ -136,7 +136,8 @@ export function APIRegisterModel(
   description: string,
   directory: string,
   modelKey: string,
-  projectSecret: string
+  projectSecret: string,
+  modelURL: string
 ): Promise<AxiosResponse<any>> {
   const config = {
     type,
@@ -146,6 +147,7 @@ export function APIRegisterModel(
     credentials: {
       modelKey,
       projectSecret,
+      modelURL,
     },
     directory,
   };

src/app/src/api/general.ts

@@ -7,6 +7,8 @@ import {
   GET_GPU,
   SET_GPU,
   CLEAR_GPU,
+  AUTOSAVE_QUERY,
+  AUTOSAVE_TOGGLE,
 } from "@portal/constants/api";
 
 export function APIIsAlive(isElectron: boolean): Promise<AxiosResponse<any>> {
@@ -23,6 +25,8 @@ export function APIShutdown(
   });
 }
 
+/* -------------- CACHE API -------------- */
+
 export function APILoadCache(): Promise<AxiosResponse<any>> {
   return axios.post(SERVER_ADDRESS + CACHE);
 }
@@ -31,6 +35,18 @@ export function APIRejectCache(): Promise<AxiosResponse<any>> {
   return axios.put(SERVER_ADDRESS + CACHE);
 }
 
+/* -------------- AUTOSAVE API -------------- */
+
+export function APIAutosaveQuery(): Promise<AxiosResponse<any>> {
+  return axios.get(SERVER_ADDRESS + AUTOSAVE_QUERY);
+}
+
+export function APIAutosaveToggle(flag: boolean): Promise<AxiosResponse<any>> {
+  return axios.post(
+    SERVER_ADDRESS + AUTOSAVE_TOGGLE + "/" + (flag ? "on" : "off")
+  );
+}
+
 /* -------------- GPU API -------------- */
 
 export function APIGetGPU(): Promise<AxiosResponse<any>> {

src/app/src/components/annotations/annotator.tsx

@@ -239,7 +239,7 @@ export default class Annotator extends Component<
         cacheResults: false,
         iou: 0.8,
         video: {
-          frameInterval: 20,
+          frameInterval: 1,
         },
       },
       currAnnotationPlaybackId: 0,

src/app/src/components/annotations/model.tsx

@@ -60,6 +60,7 @@ export type FormData = {
   directory: string;
   modelKey: string;
   projectSecret: string;
+  modelURL: string;
   modelType: "tensorflow" | "darknet" | "";
 };
 
@@ -131,6 +132,7 @@ export default class Model extends React.Component<ModelProps, ModelState> {
         directory: "",
         modelKey: "",
         projectSecret: "",
+        modelURL: "",
       },
       drawerTabId: "details",
       registrationTabId: "local",
@@ -190,7 +192,7 @@ export default class Model extends React.Component<ModelProps, ModelState> {
 
   /** -------- Methods related to API calls -------- */
 
-  /** Calls the Model Registratiion API with info recorded in formData */
+  /** Calls the Model Registration API with info recorded in formData */
   private handleRegisterModel = async () => {
     this.setState({ isAPIcalled: true });
     if (
@@ -213,6 +215,17 @@ export default class Model extends React.Component<ModelProps, ModelState> {
         Intent.WARNING,
         3000
       );
+    } else if (
+      this.state.formData.type === "endpoint" &&
+      (this.state.formData.modelURL === "" ||
+        this.state.formData.projectSecret === "" ||
+        this.state.formData.name === "")
+    ) {
+      CreateGenericToast(
+        "Please fill in the name, URL and project secret of the model you want to load from endpoint.",
+        Intent.WARNING,
+        3000
+      );
     } else {
       await APIRegisterModel(
         this.state.formData.type,
@@ -221,7 +234,8 @@ export default class Model extends React.Component<ModelProps, ModelState> {
         this.state.formData.description,
         this.state.formData.directory,
         this.state.formData.modelKey,
-        this.state.formData.projectSecret
+        this.state.formData.projectSecret,
+        this.state.formData.modelURL
       )
         .then(result => {
           if (result.status === 200) {
@@ -505,6 +519,80 @@ export default class Model extends React.Component<ModelProps, ModelState> {
     return dict;
   };
 
+  /** Render Tab Input Settings based on registrationTabId.
+   * @param registrationTabId : the tab id of the tab to be rendered
+   * @return jsx : the tab input settings
+   */
+  private renderTabSettings = (
+    registrationTabId: TabId,
+    browseButton: JSX.Element,
+    browseHint: JSX.Element
+  ) => {
+    switch (registrationTabId) {
+      case "local":
+        return (
+          <FormGroup label="Folder Path" labelFor="label-input">
+            <InputGroup
+              id="directory"
+              name="directory"
+              value={this.state.formData.directory}
+              placeholder={"Enter model folder path..."}
+              onChange={this.handleChangeForm}
+              rightElement={isElectron() ? browseButton : browseHint}
+            />
+          </FormGroup>
+        );
+      case "hub":
+        return (
+          <>
+            <FormGroup label="Model Key" labelFor="label-input">
+              <InputGroup
+                id="modelKey"
+                name="modelKey"
+                value={this.state.formData.modelKey}
+                placeholder="Enter model key from hub..."
+                onChange={this.handleChangeForm}
+              />
+            </FormGroup>
+            <FormGroup label="Project Secret" labelFor="label-input">
+              <InputGroup
+                id="projectSecret"
+                name="projectSecret"
+                value={this.state.formData.projectSecret}
+                placeholder="Enter project secret from hub..."
+                onChange={this.handleChangeForm}
+              />{" "}
+            </FormGroup>
+          </>
+        );
+      case "endpoint":
+        return (
+          <>
+            <FormGroup label="Endpoint URL" labelFor="label-input">
+              <InputGroup
+                id="modelURL"
+                name="modelURL"
+                value={this.state.formData.modelURL}
+                placeholder="Enter the URL from endpoint..."
+                onChange={this.handleChangeForm}
+              />
+            </FormGroup>
+            <FormGroup label="Project Secret" labelFor="label-input">
+              <InputGroup
+                id="projectSecret"
+                name="projectSecret"
+                value={this.state.formData.projectSecret}
+                placeholder="Enter project secret from endpoint..."
+                onChange={this.handleChangeForm}
+              />{" "}
+            </FormGroup>
+          </>
+        );
+      default:
+        return null;
+    }
+  };
+
   /** Create MenuItems from the registereModelList
    * @return {Array<MenuItem>} An array of registered models in the format of MenuItems
    */
@@ -584,6 +672,7 @@ export default class Model extends React.Component<ModelProps, ModelState> {
         directory: "",
         modelKey: "",
         projectSecret: "",
+        modelURL: "",
       },
       registrationTabId: tabId,
     });
@@ -717,38 +806,10 @@ export default class Model extends React.Component<ModelProps, ModelState> {
             onChange={this.handleChangeForm}
           />
         </FormGroup>
-        {this.state.registrationTabId === "local" ? (
-          <FormGroup label="Folder Path" labelFor="label-input">
-            <InputGroup
-              id="directory"
-              name="directory"
-              value={this.state.formData.directory}
-              placeholder={"Enter model folder path..."}
-              onChange={this.handleChangeForm}
-              rightElement={isElectron() ? browseButton : browseHint}
-            />
-          </FormGroup>
-        ) : (
-          <>
-            <FormGroup label="Model Key" labelFor="label-input">
-              <InputGroup
-                id="modelKey"
-                name="modelKey"
-                value={this.state.formData.modelKey}
-                placeholder="Enter model key from hub..."
-                onChange={this.handleChangeForm}
-              />
-            </FormGroup>
-            <FormGroup label="Project Secret" labelFor="label-input">
-              <InputGroup
-                id="projectSecret"
-                name="projectSecret"
-                value={this.state.formData.projectSecret}
-                placeholder="Enter project secret from hub..."
-                onChange={this.handleChangeForm}
-              />{" "}
-            </FormGroup>
-          </>
+        {this.renderTabSettings(
+          this.state.registrationTabId,
+          browseButton,
+          browseHint
         )}
         <Button
           type="submit"
@@ -971,6 +1032,11 @@ export default class Model extends React.Component<ModelProps, ModelState> {
                   >
                     <Tab id="local" title="Local" />
                     <Tab id="hub" title="Datature Hub" />
+                    <Tab
+                      id="endpoint"
+                      title="Datature API (Coming Soon)"
+                      disabled={true}
+                    />
                     <Tabs.Expander />
                   </Tabs>
                 </NavbarGroup>{" "}
@@ -992,6 +1058,7 @@ export default class Model extends React.Component<ModelProps, ModelState> {
                 directory: "",
                 modelKey: "",
                 projectSecret: "",
+                modelURL: "",
               },
               registrationTabId: "local",
               isOpenRegistraionForm: false,

src/app/src/components/ui/header/settings.js

@@ -39,6 +39,17 @@ export default class QuickSetting extends React.Component {
             />
           </Tooltip>
         </FormGroup>
+        <FormGroup label={<b>Autosave</b>}>
+          <Switch
+            label={"Autosave Progress"}
+            checked={this.props.GlobalSetting.isAutosave}
+            onChange={event => {
+              this.props.GlobalSettingCallback.setAutosave(
+                event.target.checked
+              );
+            }}
+          />
+        </FormGroup>
       </>
     );
   }

src/app/src/constants/api.js

@@ -4,6 +4,10 @@ export const IS_ALIVE = `/heartbeat`;
 export const SHUTDOWN = `/shutdown`;
 export const CACHE = `/cache`;
 
+// Autosave Query route
+export const AUTOSAVE_QUERY = `/autosave`;
+export const AUTOSAVE_TOGGLE = `/autosave/toggle`;
+
 // Assets/folders routes
 export const POST_PROJECT_REGISTER_IMAGES = `/api/project/register`;
 export const GET_PROJECT_ASSETS = `/api/project/assets`;