Onepager – AI Rating Scanner

Op de opendeurdag kregen bezoekers de kans om studierichting 6ICW een beoordeling te geven via een slimme AI-scanner. Ze hielden een blad met sterren voor een webcam, en het zelfgetrainde AI-model herkende automatisch het aantal sterren (1 tot 4). De resultaten werden live opgeslagen en getoond in een grafiek op de website.

Probleemstelling

Op de opendeurdag wilde men bezoekers hun mening laten geven over richting 6ICW. Het oorspronkelijke plan was om met je duim naar boven en beneden voor de camera te staan maar dat was te ingewikkeld voor de AI, daarom was ik overgeschakeld naar sterren.

Doel

Een volledig werkende AI-scanner bouwen die via een webcam herkent hoeveel sterren een bezoeker toont (1 tot 4), de score automatisch opslaat en de resultaten live weergeeft in een grafiek.

Werking

Hoe werkt de scanner?

Blad met sterren Een bezoeker neemt een blad papier waarop staat hoeveel sterren hij of zij de richting geeft (1 tot 4 sterren).

Camera herkent de sterren Het blad wordt voor de webcam gehouden. Het AI-model analyseert het beeld en herkent het aantal sterren met een zekerheidsdrempel van 75%.

Score wordt opgeslagen Bij een geldige detectie stuurt JavaScript via een fetch()-aanroep de data als JSON naar de back-end (save.php), die de score opslaat in een bestand.

Live grafiek De statistieken worden weergegeven in een staafgrafiek die elke 10 seconden automatisch ververst vanuit de server.

Technische uitwerking

Hoe is het gebouwd?

AI-model

Het model is getraind met Google Teachable Machine. Er zijn vijf klassen aangemaakt: “1 Ster”, “2 Sterren”, “3 Sterren”, “4 Sterren” en “niks” (geen blad voor de camera). Het model wordt in de browser geladen via TensorFlow.js.

Front-end

De webpagina is gebouwd met HTML en CSS. De webcam wordt aangesproken via de JavaScript-functie getUserMedia(). Beeldframes worden elke animatieronde doorgegeven aan het AI-model voor een vlotte, real-time voorspelling.

Back-end

De back-end is geschreven in PHP. Het bestand save.php valideert de invoer, controleert of er een cooldown actief is en slaat de score op in een tekstbestand. Een apart bestand (get_ratings.php) levert de data voor de grafiek.

Visualisatie

De resultaten worden getoond als een staafgrafiek (Chart.js). De grafiek laadt de beginwaarden via PHP en ververst automatisch elke 10 seconden met verse server-data, zodat de stand live zichtbaar blijft.

Gebruikte technologieën

Google Teachable Machine TensorFlow.js JavaScript HTML & CSS PHP Chart.js

Tijdlijn

Planning

Fase 1

Concept uitwerken en idee bespreken met leerkrachten. Onderzoek naar Teachable Machine en TensorFlow.js.

Fase 2

Trainingsdata verzamelen: honderden foto's nemen van sterrenbladen in verschillende lichtomstandigheden en hoeken.

Fase 3

AI-model trainen via Google Teachable Machine en exporteren naar TensorFlow.js. Eerste tests uitvoeren.

Fase 4

Front-end bouwen: webcamintegratie, live voorspelling en visuele feedback voor de gebruiker.

Fase 5

Back-end uitwerken in PHP: opslaan van scores, cooldown-systeem en het aanleveren van data voor de grafiek.

Fase 6

Eindtest en de afwerking. Systeem getest op de opendeurdag en alles werkte correct.

Bekijk de website Bekijk de code

Besluit

Het resultaat

De AI Rating Scanner was op de opendeurdag een werkend en opvallend project. Bezoekers konden op een eenvoudige manier hun mening geven over richting 6ICW door een blad met sterren voor de camera te houden. Het systeem herkende de sterren automatisch, sloeg de scores op en toonde de resultaten live in een grafiek. Het project is volledig functioneel en werd met succes afgerond.