```
<script>
import terminalCapacity from "../database/maxNumberOfPeople";
import people from "../database/getTotalNumberOfPeople";
import units from "../database/getTotalNumberOfUnits";
import maxOccupants from "../database/maxNumberOfOccupants";
import Carousel from "svelte-carousel";

let colorClass = "";
let ratio;

// Reactive assignments from stores
$: maximumOccupants = $maxOccupants;
$: totalNumberOfPeopleArray = $people;
$: totalNumberOfUnitsArray = $units;
$: maxTerminalCapacity = $terminalCapacity;

// Reactive calculations based on store values
$: up = totalNumberOfPeopleArray.filter(
(person) => person.Count === 1
).length;
$: down = totalNumberOfPeopleArray.filter(
(person) => person.Count === 0
).length;
$: numPeople = down - up;
$: numCars = totalNumberOfUnitsArray.filter(
(unit) => unit.status === "In Queue"
).length;
$: maximumOccupantsVal = maximumOccupants ?? 0;
$: maxTerminalCapacityVal = maxTerminalCapacity ?? 0;
$: remainingPeople = numPeople - numCars * maximumOccupantsVal;
$: ratio = remainingPeople / maxTerminalCapacityVal;

// Reactive conditional logic for setting colorClass
$: {
if (ratio >= 0.7) {
colorClass = "bg-red-500";
} else if (ratio >= 0.4) {
colorClass = "bg-yellow-500";
} else {
colorClass = "bg-green-500";
}
}

const images = [
{
src: "images/byday.png",
alt: "Average Passenger per Day",
description:
"According to the analysis of our current data trend, it has been observed that Monday records the highest average passenger count among all the days of the week. The visual representation of the data demonstrates that the average number of passengers on Monday amounts to approximately 350 per day.",
},
{
src: "images/byhour.png",
alt: "Average Passenger per Hour",
description:
"As per the analysis of our current data trend, it has been observed that the time slot of 7:00 to 7:59 AM on Mondays records the highest average passenger count by hour of the day. The visual representation of the data illustrates that during this time slot, the average number of passengers on Mondays amounts to approximately 60 plus per day. This information provides valuable insights into the peak hours of passenger traffic on Mondays, which can be useful for commuters to plan their travel accordingly.",
},
{
src: "images/byhourtues.png",
alt: "Average Passenger per Hour",
description:
"Based on the analysis of our current data trend, it can be observed that the time window of 8:00 to 8:59 AM on Tuesdays experiences the highest average passenger count per hour of the day. The accompanying visual representation of the data shows that the average number of passengers during this period on Tuesdays is approximately 40 plus per day. These insights into the peak hours of passenger traffic on Tuesdays can prove to be beneficial for commuters in planning their journeys and avoiding congestion during rush hour.",
},
{
src: "images/byhourwed.png",
alt: "Average Passenger per Hour",
description:
"On Wednesdays, the time slot of 8:00 to 8:59 AM records the highest average passenger count per hour of the day, with approximately 30 plus passengers on average during this period, as indicated by the accompanying visual representation based on our current data trend. These insights can assist commuters in avoiding peak congestion and planning their travel accordingly.",
},
{
src: "images/byhourthurs.png",
alt: "Average Passenger per Hour",
description:
"Similarly, on Thursdays and Fridays, the time frame of 8:00 to 8:59 AM experiences the highest average passenger count per hour of the day, with approximately 35 plus passengers on average during this period, as illustrated by the accompanying visual representation based on our current data trend. Commuters can use this information to plan their travel and avoid peak congestion during these days and hours.",
},
{
src: "images/byhourfri.png",
alt: "Average Passenger per Hour",
description:
"Similarly, on Thursdays and Fridays, the time frame of 8:00 to 8:59 AM experiences the highest average passenger count per hour of the day, with approximately 35 plus passengers on average during this period, as illustrated by the accompanying visual representation based on our current data trend. Commuters can use this information to plan their travel and avoid peak congestion during these days and hours.",
},
{
src: "images/l3.png",
alt: "Average Passenger per Hour",
description:
"The L300 Van is a reliable and efficient public utility vehicle used for public transportation. It has a spacious and comfortable interior, capable of accommodating up to 16 passengers. Equipped with a powerful and fuel-efficient engine, the L300 Van can handle various road conditions with ease. Its durable and sturdy build ensures safe and secure transportation for commuters. With its accessibility and affordability, the L300 Van is a popular choice for public transportation in urban and rural areas.",
},
{
src: "images/forecast.png",
alt: "Average Passenger per Hour",
description:
"This data visualization displays the results of a forecasting analysis performed on the current dataset using the fbprophet algorithm. The forecast extends to 100 days in the future and pertains to the average daily passenger count at a public utility terminal. The graphical representation of the forecasting results allows for easy comprehension and interpretation, enabling stakeholders to make informed decisions based on the anticipated passenger traffic.",
},
];

const byhour = [
{
src: "images/avebyhour.png",
alt: "Average Passenger per Hour",
description:
"As per the analysis of our current data trend, it has been observed that the time slot of 7:00 to 7:59 AM on Mondays records the highest average passenger count by hour of the day. The visual representation of the data illustrates that during this time slot, the average number of passengers on Mondays amounts to approximately 60 plus per day. This information provides valuable insights into the peak hours of passenger traffic on Mondays, which can be useful for commuters to plan their travel accordingly.",
},
{
src: "images/byhour.png",
alt: "Average Passenger per Hour",
description:
"As per the analysis of our current data trend, it has been observed that the time slot of 7:00 to 7:59 AM on Mondays records the highest average passenger count by hour of the day. The visual representation of the data illustrates that during this time slot, the average number of passengers on Mondays amounts to approximately 60 plus per day. This information provides valuable insights into the peak hours of passenger traffic on Mondays, which can be useful for commuters to plan their travel accordingly.",
},
{
src: "images/byhourtues.png",
alt: "Average Passenger per Hour",
description:
"Based on the analysis of our current data trend, it can be observed that the time window of 8:00 to 8:59 AM on Tuesdays experiences the highest average passenger count per hour of the day. The accompanying visual representation of the data shows that the average number of passengers during this period on Tuesdays is approximately 40 plus per day. These insights into the peak hours of passenger traffic on Tuesdays can prove to be beneficial for commuters in planning their journeys and avoiding congestion during rush hour.",
},
{
src: "images/byhourwed.png",
alt: "Average Passenger per Hour",
description:
"On Wednesdays, the time slot of 8:00 to 8:59 AM records the highest average passenger count per hour of the day, with approximately 30 plus passengers on average during this period, as indicated by the accompanying visual representation based on our current data trend. These insights can assist commuters in avoiding peak congestion and planning their travel accordingly.",
},
{
src: "images/byhourthurs.png",
alt: "Average Passenger per Hour",
description:
"Similarly, on Thursdays and Fridays, the time frame of 8:00 to 8:59 AM experiences the highest average passenger count per hour of the day, with approximately 35 plus passengers on average during this period, as illustrated by the accompanying visual representation based on our current data trend. Commuters can use this information to plan their travel and avoid peak congestion during these days and hours.",
},
{
src: "images/byhourfri.png",
alt: "Average Passenger per Hour",
description:
"Similarly, on Thursdays and Fridays, the time frame of 8:00 to 8:59 AM experiences the highest average passenger count per hour of the day, with approximately 35 plus passengers on average during this period, as illustrated by the accompanying visual representation based on our current data trend. Commuters can use this information to plan their travel and avoid peak congestion during these days and hours.",
},
];

const predbyhour = [
{
src: "images/avepredbyhour.png",
alt: "Average Passenger per Hour",
description:
"As per the analysis of our current data trend, it has been observed that the time slot of 7:00 to 7:59 AM on Mondays records the highest average passenger count by hour of the day. The visual representation of the data illustrates that during this time slot, the average number of passengers on Mondays amounts to approximately 60 plus per day. This information provides valuable insights into the peak hours of passenger traffic on Mondays, which can be useful for commuters to plan their travel accordingly.",
},
{
src: "images/predbyhourmon.png",
alt: "Average Passenger per Hour",
description:
"As per the analysis of our current data trend, it has been observed that the time slot of 7:00 to 7:59 AM on Mondays records the highest average passenger count by hour of the day. The visual representation of the data illustrates that during this time slot, the average number of passengers on Mondays amounts to approximately 60 plus per day. This information provides valuable insights into the peak hours of passenger traffic on Mondays, which can be useful for commuters to plan their travel accordingly.",
},
{
src: "images/predbyhourtues.png",
alt: "Average Passenger per Hour",
description:
"Based on the analysis of our current data trend, it can be observed that the time window of 8:00 to 8:59 AM on Tuesdays experiences the highest average passenger count per hour of the day. The accompanying visual representation of the data shows that the average number of passengers during this period on Tuesdays is approximately 40 plus per day. These insights into the peak hours of passenger traffic on Tuesdays can prove to be beneficial for commuters in planning their journeys and avoiding congestion during rush hour.",
},
{
src: "images/predbyhourwed.png",
alt: "Average Passenger per Hour",
description:
"On Wednesdays, the time slot of 8:00 to 8:59 AM records the highest average passenger count per hour of the day, with approximately 30 plus passengers on average during this period, as indicated by the accompanying visual representation based on our current data trend. These insights can assist commuters in avoiding peak congestion and planning their travel accordingly.",
},
{
src: "images/predbyhourthur.png",
alt: "Average Passenger per Hour",
description:
"Similarly, on Thursdays and Fridays, the time frame of 8:00 to 8:59 AM experiences the highest average passenger count per hour of the day, with approximately 35 plus passengers on average during this period, as illustrated by the accompanying visual representation based on our current data trend. Commuters can use this information to plan their travel and avoid peak congestion during these days and hours.",
},
{
src: "images/predbyhourfri.png",
alt: "Average Passenger per Hour",
description:
"Similarly, on Thursdays and Fridays, the time frame of 8:00 to 8:59 AM experiences the highest average passenger count per hour of the day, with approximately 35 plus passengers on average during this period, as illustrated by the accompanying visual representation based on our current data trend. Commuters can use this information to plan their travel and avoid peak congestion during these days and hours.",
},
];

const aveandpredbyday = [
{
src: "images/byday.png",
alt: "Average Passenger per Day",
description:
"According to the analysis of our current data trend, it has been observed that Monday records the highest average passenger count among all the days of the week. The visual representation of the data demonstrates that the average number of passengers on Monday amounts to approximately 350 per day.",
},
{
src: "images/avepredday.png",
alt: "Average Passenger per Day",
description:
"According to the analysis of our current data trend, it has been observed that Monday records the highest average passenger count among all the days of the week. The visual representation of the data demonstrates that the average number of passengers on Monday amounts to approximately 350 per day.",
},
];
</script>

<br />
<br />
<br />
<br />
<div class="heading">
<h2 class="text-2xl font-bold mb-4">Home</h2>
</div>
<div
class="flex flex-col items-center justify-center h-28 px-4 bg-gray-200 text-gray-800"
>
<div class="flex items-center">
<span class="mr-2 font-bold">Current people:</span>
<span class="font-medium">{$people}</span>
</div>
```

above is our svelte homepage web app where we can display the current people detected on our computer vision.
and the below is our javascript for firestore firebase 

```
import { collection, getDocs, onSnapshot } from "firebase/firestore";
import db from "../auth/firestore"
import { writable } from "svelte/store";


export let people = writable([])

async function getTotalNumberOfPeople() {
let totalCount = []
const querySnapshot = await getDocs(collection(db, "Total"));
if(querySnapshot){
querySnapshot.forEach((doc) => {
totalCount.push(JSON.parse(JSON.stringify(doc.data())))
})
}
return totalCount
}
function setPeople() {
getTotalNumberOfPeople().then((out) => {
if(out){

people.set(out.setPeople)
}
})
}
// Set up a realtime listener to update the reactive store whenever there is new data
onSnapshot(collection(db, "Total"), (snapshot) => {
if(snapshot){
snapshot.docChanges().forEach((change) => {
if (change.type === "modified") setPeople()
}
)}
});

setPeople()

export default people
```

and this is our comvis code

```
import cv2
import torch
import numpy as np
import datetime
import pytz
import uuid

# Firebase
import firebase_admin
from firebase_admin import credentials
from firebase_admin import firestore

cred = credentials.Certificate("ucotsc-firebase-adminsdk-sddmm-ea7b600b25.json")
firebase_admin.initialize_app(cred)
db = firestore.client()

# Check if CUDA is available and set the default to GPU if possible
#device = 'cuda' if torch.cuda.is_available() else 'cpu'
#print(f'Using device: {device}')

# Load YOLOv5 model
model = torch.hub.load('ultralytics/yolov5', 'yolov5l6')

model.cuda()
# Your supervision library would be used here
import supervision as sv


# Initialize the camera (0 for default camera, 1 for external cameras, and so on)
camera = cv2.VideoCapture(0)
camera.set(cv2.CAP_PROP_FRAME_WIDTH, 1400)
camera.set(cv2.CAP_PROP_FRAME_HEIGHT, 900)


# Define the BoxAnnotator from the supervision library
box_annotator = sv.BoxAnnotator(thickness=4, text_thickness=4, text_scale=2)

# Define the ROI polygon points (clockwise or counter-clockwise)
roi_polygon = np.array([
[150, 150], # Point 1 (x1, y1)
[1050, 150], # Point 2 (x2, y2)
[1050, 650], # Point 3 (x3, y3)
[150, 650] # Point 4 (x4, y4)
], dtype=np.int32)

def create_mask(frame, roi_polygon):
# Create a black mask with the same dimensions as the frame
mask = np.zeros_like(frame, dtype=np.uint8)

# Fill the ROI polygon with white color
cv2.fillPoly(mask, [roi_polygon], (255, 255, 255))

# Mask the frame to only keep ROI and set everything else to black
frame_roi = cv2.bitwise_and(frame, mask)
return frame_roi

def live_inference(camera):
while True:
# Capture frame-by-frame from camera
ret, frame = camera.read()
if not ret:
print("Failed to grab frame")
break

# Convert the image from BGR to RGB
frame_rgb = cv2.cvtColor(frame, cv2.COLOR_BGR2RGB)

# Apply the ROI mask to the frame
frame_roi = create_mask(frame_rgb, roi_polygon)

# Perform inference on the masked frame
results = model(frame_roi)
detections = sv.Detections.from_yolov5(results)

# Set threshold and class filtering as before
detections = detections[(detections.class_id == 0) & (detections.confidence > 0.5)]

# Annotate detections on the original frame (not the masked one)
frame_annotated = box_annotator.annotate(scene=frame_rgb, detections=detections)

# Draw the ROI polygon on the annotated frame
cv2.polylines(frame_annotated, [roi_polygon], isClosed=True, color=(0, 255, 0), thickness=3)

# Get the number of detections within the ROI
num_detections = len(detections)

# Display the number of detected objects on the frame
text = f"Detections in ROI: {num_detections}"
cv2.putText(frame_annotated, text, (10, 30), cv2.FONT_HERSHEY_SIMPLEX, 1, (0, 255, 0), 2, cv2.LINE_AA)


# Convert the image from RGB to BGR for OpenCV display
frame_annotated_bgr = cv2.cvtColor(frame_annotated, cv2.COLOR_RGB2BGR)

# Display the resulting frame
cv2.imshow('OLOv5 Live Detection', frame_annotated_bgr)

# Send the total number of detections to Firestore
# Get the current UTC date and time
utc_datetime = datetime.datetime.now(tz=pytz.UTC)

# Convert the UTC date and time to your local timezone, e.g., GMT+8
local_timezone = pytz.timezone('Asia/Singapore') # Replace 'Your/Timezone' with your timezone
local_datetime = utc_datetime.astimezone(local_timezone)

# Generate a unique string identifier for the Firestore document
uuid_val = str(uuid.uuid4())

# Create a new document in the Firestore collection
doc_ref = db.collection(u'Detections').document(uuid_val)
doc_ref.set({
u'DateTime': local_datetime,
u'Count': num_detections
})

# Break the loop if ‘q’ is pressed
if cv2.waitKey(1) & 0xFF == ord('q'):
break

# When everything done, release the capture
camera.release()
cv2.destroyAllWindows()

# Run the live inference function
live_inference(camera)

````

my problem is, whenever there is detections on our comvis its not showing on our web app reactively in this part
<span class="mr-2 font-bold">Current people:</span>
<span class="font-medium">{$people}</span>