Real-time Pedestrian Cell Phone Usage Detection - Frontend

Alias: You Focus Your Walk

Personnel

• Group Members: Huang Yanzhen DC126732, Mai Jiajun DC127853

• Supervisor: Prof. Bob Zhang

This is the frontend of the project Smart Device Usage Detection, i.e. YOU FOCUS YOUR WALK. This repository contains the NextJS + React webpage with a simple Node server for WebSocket communication.

To support the throughput of WebSocket, the frontend is run LOCALLY where the inference backend run. It does not run on the server of storage backend that stores faces.

Option 1. Build with npm

To build with npm, make sure you have Node Environment installed. Make sure to add npm script to your environment variable (windows, zsh, bash, etc.).

1. Run npm i to install node_modules dependencies.
2. Run npm run build to build the project.
3. Run npm run start to start the project. The nodejs WebSocket server is automatically started using Concurrently, a terminal concurrent ccommand tool.
   • Alternatively, you can run node public/ws-server.js to only start the WebSocket server.

Option 2. Build with Docker

You can also build this project with docker.

1. Build Docker Mirror

docker build -t smart-device-usage-detection .

• -t smart-device-usage-detection: Name the Docker image as smart-device-usage-detection.
• .: Build context is current directory, which contains Dockerfile and all codes.

2. Run the docker container

docker run -p 3000:3000 -p 8976:8976 smart-device-usage-detection

• -p 3000:3000: Map main port 3000 to container port 3000, for Next.js app.
• -p 8976:8976: Map main port v to container port 8976, for WebSocket server.

After running this command, the container will run:

• the next app at http://localhost:3000, and
• the websocket at ws://localhost:8976.

3. Access and Test the Miror

3.1 Find running containers

docker ps

You will receive:

CONTAINER ID   IMAGE                          COMMAND                   CREATED          STATUS         PORTS                                            NAMES
d4238047209a   smart-device-usage-detection   "docker-entrypoint.s…"    3 minutes ago    Up 3 minutes   0.0.0.0:3000->3000/tcp, 0.0.00:8080->8080/tcp   eloquent_swirles

You will be mainly using the CONTAINER ID.

3.2 Stop a container

Using the CONTAINER ID get from docker ps, run

docker stop <CONTAINER_ID>

3.3 Remove a container

Using the CONTAINER ID get from docker ps, run

docker rm <CONTGAINER_ID>

4. Upload to DockerHub

4.1 Upload/Push

4.1.1 Login to Docker Hub

docker login

4.1.2 Tag the Image

Docker images need to be tagged properly to match the naming conventions of Docker Hub.

docker tag <local_image_name>:<tag> <dockerhub_username>/<repository_name>:<tag>

For this project, on user Huang Yanzhen, the command would be:

docker tag smart-device-usage-detection:latest yanzhenhuang/smart-device-usage-detection:latest

4.1.3 Push Image to Docker Hub

docker push <dockerhub_username>/<repository_name>:<tag>

For this project, on user Huang Yanzhen, the command would be:

docker push yanzhenhuang/smart-device-usage-detection:latest

4.2 Download/Pull

4.2.1 Pull Image

Pull the image from Docker Hub on your mirror server.

docker pull <dockerhub_username>/<repository_name>:<tag>

4.2.2 Re-Tag it for new registry

docker tag <local_image_name>:<tag> <dockerhub_username>/<repository_name>:<tag>

4.2.3 Push it to the new registry

docker push <dockerhub_username>/<repository_name>:<tag>