We are not frontend experts nor are we UI experts. To work around this and to get things up and running faster, we decided that the first pass at the frontend would be a "dev screen". This dev screen will have all the functionality of the customer-facing screen but it doesn't have to look nice and it gets to have extra features that aren't useful for a customer but are useful for us developers. One of these features, which I recently got working, is the ability to take a picture and display it. This is the first step towards displaying predictions.
What this entails is the frontend written in Vue (web technologies), running on my laptop and a backend, written with Python and Flask, running on a Raspberry Pi talking to each other. Both devices are connected to my local network and communicate over HTTP. The frontend sends a POST request to take a picture. The Flask server receives this request and calls the detection module to capture a new picture. The picture is saved to a file and the URL to that image is returned in the json return object for the post request. Finally, the frontend can see that the request succeeded, read in the URL to the new image, and send a GET request to get the image and display it on the screen. The next step will be sending prediction data along with the image URL.
Since we only have one Raspberry Pi with a camera, I've added a second path for the backend to take if it's running locally instead of on a Pi. Instead of taking a picture, it will return a fun placeholder image.
Comments