Add API endpoint to add labels to photos

backend/btviewer/blueprints/label/views.py

@@ -4,20 +4,21 @@
 
 from btviewer.blueprints.photo.model import Photo
 
+app: flask.Flask = flask.current_app
 blueprint = flask.Blueprint('label', __name__, url_prefix='/labels')
 
 
-@blueprint.route('/<path:path>', methods=['GET'])
-def detail(path: str):
+@blueprint.route('/detail?path=<path:photo_path>', methods=['GET'])
+def detail(photo_path: str):
     """
     Get all the tags associated with this image
     """
-    photo = Photo(path)
+    photo = Photo(photo_path)
     return flask.jsonify(photo.labels)
 
 
-@blueprint.route('/<path:path>', methods=['POST'])
-def create(path: str):
+@blueprint.route('/create', methods=['POST'])
+def create():
     """
     Create new labels
 
@@ -42,13 +43,17 @@ def create(path: str):
         }
     ]
     """
-    photo = Photo(path)
+
+    # Load the selected image
+    photo_path = flask.request.args['path']
+    source = flask.request.args['source']
+    photo = Photo(photo_path)
 
     # Get the label data from the request
     labels = flask.request.json
 
     # Create the labels
-    photo.add_labels(labels)
+    photo.add_labels(labels, source=source)
 
     # Return a success response
-    return HTTPStatus.CREATED
+    return flask.Response(status=HTTPStatus.CREATED)

backend/btviewer/blueprints/photo/model.py

@@ -1,5 +1,6 @@
 import datetime
 import io
+import json
 from pathlib import Path
 from typing import Iterable, Mapping, Union
 
@@ -80,17 +81,28 @@ def add_label(self, **kwargs):
         """
         raise NotImplementedError
 
+    def add_labels(self, labels: list[dict], source: str):
+        label_file_path = self.label_directory.joinpath(f'{source}.json')
+
+        # Make label directory
+        self.label_directory.mkdir(exist_ok=True)
+
+        # Save label file
+        with label_file_path.open('w') as file:
+            json.dump(labels, file)
+            app.logger.info("Labels saved to '%s'", file.name)
+
     @property
     def label_directory(self) -> Path:
         """
         The path of the directory containing all the label files associated with this image.
         :return:
         """
         # If the photo path is
-        # ~/photos/2020-01-01T09+40+43_00123.tiff
+        # ~/photos/2020-01-01T09+40+43_00123.np
         # the label directory is
         # ~/photos/2020-01-01T09+40+43_00123/
-        folder_name = self.path.name
+        folder_name = self.path.stem
         return self.path.parent.joinpath(folder_name)
 
     def iter_labels(self) -> Iterable[Path]:

frontend/CONTRIBUTING.md

@@ -1,27 +1,35 @@
 # Contribution guide
 
-This document contains notes on developing this package. Please read the [SheffieldMLTracking contributing guide](https://github.com/SheffieldMLtracking/.github/blob/main/CONTRIBUTING.md) first.
+This document contains notes on developing this JavaScript package. Please read the [SheffieldMLTracking contributing guide](https://github.com/SheffieldMLtracking/.github/blob/main/CONTRIBUTING.md) first.
 
 # Architecture
 
-This code uses the [React](https://react.dev/) JavaScript framework 
+This code uses the [React](https://react.dev/) JavaScript framework. Please see the architecture Miro board.
 
 # Development
 
 This section describes the development environment used to work on this software.
 
 ## Installation
 
-* npm
+Requirements:
 
-## Usage
+* Node Package Manager [npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)
 
-The development environment is defined by the `dev` configuration in `package.json`.
+To install the dependencies for this package:
 
-```
+```bash
 cd ./frontend/
 # Install package dependencies based on package.json
 npm install
+```
+
+## Usage
+
+The development environment is defined by the `dev` configuration in `package.json` and uses the [Vite](https://vitejs.dev/guide/#index-html-and-project-root) tool.
+
+```
+
 # Run the development environment
 npm run dev
 ```
@@ -30,9 +38,4 @@ npm run dev
 
 ## Vite
 
-[Vite](https://vitejs.dev/) with Hot Module Replacement (HMR) and some code analysis using ESLint rules.
-
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+[Vite](https://vitejs.dev/) provides Hot Module Replacement (HMR) and some code analysis using ESLint rules. It uses `index.html` as the [home page](https://vitejs.dev/guide/#index-html-and-project-root).

frontend/src/components/SaveMarkers.jsx

@@ -6,7 +6,11 @@ Send the labels to the backend
 function SaveMarkers(props) {
 
     function handleSubmit() {
-        const url = '/api/labels/create';
+
+        // eslint-disable-next-line no-unused-vars
+        const photo_path = '1970-01-01/set_A/device_1234/camera_1/20200101_094359.123456_000002.np';
+        const source = 'btviewer';
+        const url = `/api/labels/create?path=${photo_path}&source=${source}`;
 
         fetch(url, {
             method: 'post',