i have a computer vision system tied to google’s firestore firebase and we have developed an app to also display the number of people detected by the cv to the web app and the database for this is google’s firebase firestore. assume that on my CV the uuid for firestore that we placed is “Detections” so in the firestore firebase every person detected is stored on the Detections collection.

this is my svelte web app
<script>
import terminalCapacity from ‘…/database/maxNumberOfPeople’;
import people from “…/database/getTotalNumberOfPeople”
import units from “…/database/getTotalNumberOfUnits”;
import maxOccupants from “…/database/maxNumberOfOccupants”
import { onDestroy } from “svelte”;
import Carousel from “svelte-carousel”;

let up = 0
let down = 0
let colorClass = “”;
let ratio
let maximumOccupants = maxOccupants
let totalNumberOfPeopleArray =people
let totalNumberOfUnitsArray = units
let maxTerminalCapacity =terminalCapacity

function getCrowdnessIndicator(){
const numPeople = down - up;
const numCars = totalNumberOfUnitsArray.filter((unit) => unit.status === “In Queue”).length

//Check if variable exists. If not, set default value
const maximumOccupantsVal = maximumOccupants.MaxOccupants ?? 0
const maxTerminalCapacityVal = maxTerminalCapacity.MaxNumberOfPeople ?? 0

const remainingPeople = numPeople - (numCars * maximumOccupantsVal)
ratio = remainingPeople / maxTerminalCapacityVal

if (ratio >= 0.7) {
colorClass = “bg-red-500”;
} else if (ratio >= 0.4) {
colorClass = “bg-yellow-500”;
} else {
colorClass = “bg-green-500”;
}
}

// Subscribe to the num store and update the component when the value changes
const unsubscribeOccupants = maxOccupants.subscribe((value) => {
maximumOccupants = value;
getCrowdnessIndicator()
});

// Subscribe to the num store and update the component when the value changes
const unsubscribeCapacity = terminalCapacity.subscribe((value) => {
maxTerminalCapacity = value;
getCrowdnessIndicator()
});

// Subscribe to the num store and update the component when the value changes
const unsubscribeUnits = units.subscribe((value) => {
totalNumberOfUnitsArray = value;
getCrowdnessIndicator()
});

// Subscribe to the num store and update the component when the value changes
const unsubscribePeople = people.subscribe((value) => {
totalNumberOfPeopleArray = value;
up = 0
down = 0

for(const person of totalNumberOfPeopleArray){
if(person.Direction === “up”){
up++
}

if(person.Direction === “down”){
down++
}
}

getCrowdnessIndicator()
});

// Don’t forget to unsubscribe when the component is destroyed
onDestroy(() => {
unsubscribeOccupants()
unsubscribeUnits()
unsubscribePeople()
unsubscribeCapacity()
});

let 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.” },
];

let 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.” },
];

let 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.” },
];

let 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>
<div class=“flex items-center mt-1”>
<span class=“mr-2 font-bold”>Terminal Status:</span>
<span>
<div class=“flex items-center”>
<span class=“h-3 w-3 rounded-full mr-2 {colorClass}”></span>
<div class=“text-gray-800 font-medium”>
{#if ratio >= 0.7}
Crowded
{:else if ratio >= 0.4}
Slightly Crowded
{:else}
Not crowded
{/if}
</div>
</div>
</span>
</div>
</div>


this is my .js file for firebase database
import { collection, getDocs, onSnapshot } from “firebase/firestore”;
import db from “…/auth/firestore”
import { writable } from “svelte/store”;

export let people = writable(0)

async function getTotalNumberOfPeople() {
let totalCount = []
const querySnapshot = await getDocs(collection(db, “Detections”));
if(querySnapshot){
querySnapshot.forEach((doc) => {
totalCount.push(JSON.parse(JSON.stringify(doc.data())))
})
}

return totalCount
}


// Set up a realtime listener to update the reactive store whenever there is new data
onSnapshot(collection(db, “Detections”), (snapshot) => {
people.set(snapshot.size); // updates the people count, snapshot.size gives the current number of documents
}, error => {
console.error(error);
});

getTotalNumberOfPeople().then((out) => {
if(out){
people.set(out)
}
});
setPeople()

export default people


so will my website app display the number of people detected and be reactive for changes as well in real time?