Simple Face Annotation with Streamlit, FastAPI and OpenCV

This is a boilerplate for any projects that involve sending an image from a web UI to an API, performing some manipulation on the image, and sending it back. The example taken here is a simple face recognition app using OpenCVs built-in Haar Cascade object detection algorithm.

What's here:

• Streamlit on the frontend
• FastAPI on the backend
• PIL/pillow and opencv-python for working with images
• Backend and frontend can be deployed with Docker

Using this template

From inside the backend folder:

You can serve the API with uvicorn fast_api.api:app --reload (default port is 8000)

From inside the frontend folder:

You can serve the frontend with streamlit run app.py (default port is 8501)

Using this template with Docker

Both the frontend and backend have corresponding Dockerfiles for the web UI and API.

1. To create a Docker image, inside the corresponding folders run docker built -t NAME_FOR_THE_IMAGE .
2. Run a container for either API or UI with docker run -p MACHINE_PORT:CONTAINER_PORT NAME_FOR_THE_IMAGE;

Here, MACHINE_PORT is the localhost port you want to link to the container, while CONTAINER_PORT is the port which will be used by the running app in the container.

3. ❗ You won't be able to reach the API container through localhost; You'll need to link the containers:

• API: docker run -p 8000:8000 NAME_FOR_THE_API_IMAGE --name api
• UI: docker run -p 8501:8501 --link api:api NAME_FOR_THE_UI_IMAGE

This way you can use api instead of localhost to reach the API container from the frontend

❗ Note that Docker docs mention that --link might be removed in the future (as of 2022.06). Alternatives can be user-defined bridges or Docker Compose

Have fun!