Speelotheek

Als developer volg ik natuurlijk de opkomst van AI met grote interesse. Naast het volgen van het laatste nieuws, experimenteer ik ook regelmatig met AI-mogelijkheden. Een van mijn recente projecten is het maken van een doorzoekbare catalogus voor de speelotheek op basis van de foto’s die de speelotheek heeft gemaakt van het speelgoed.

De reden dat ik een doorzoekbare catalogus wilde maken is eigenlijk de eerste keer dat ik bij de speelotheek kwam. Ik wist niet goed wat ik moest meenemen voor mijn zoontje, die toen 8 maanden was. Er staat erg veel speelgoed in een redelijk kleine ruimte en voor mij was niet goed duidelijk wat hij nou leuk zou kunnen vinden, ook zijn kleine kinderen niet altijd even geduldig…

Hoewel ik probeer het verhaal toegankelijk te houden, kan het zijn dat sommige technische details lastig te volgen zijn voor niet-technische lezers. Mijn excuses daarvoor!

Hieronder een versimpeld stroomschema van het proces wat ik in gedachten had;

Afbeeldingen

De speelotheek zelf had gelukkig al wel een online overzicht van wat ze hadden. Namelijk een online map op Google Drive (https://drive.google.com/drive/folders/16wXY0Pue3pQJk2BgGae5bPKLxBQOs_Nk )  met daarin foto’s van al het speelgoed. Probleem hiervan was dat het naar mijn idee niet goed doorzoekbaar was voor klanten.

Metadata genereren

Een van de dingen die AI goed kan doen, is het interpreteren van afbeeldingen. Een van de problemen is wel dat het redelijk kostbaar is om ~ 900 foto’s te laten analyseren. Gelukkig kreeg ik een gratis 2 maanden trial van Google Gemini, hier kon ik dus mee aan de slag.

Ik heb hiervoor met Chat GPT een simpel Python script gemaakt wat mijn API key gebruikt die grofweg het volgende deed;

• Doorloop elke folder
• Schaal de afbeelding naar een lagere resolutie ( dit verlaagt doorlooptijd en had geen gevolgen voor analyse )
• Upload de afbeelding naar Gemini
• Simpele prompt voor Gemini of hij de afbeelding wil analyseren op basis van een aantal kenmerken (beschrijving/leeftijd/type etc)
• Foutafhandeling als er iets misgaat
• Data opslaan toevoegen in JSON formaat

De reden dat ik hiervoor Chat GPT gebruikte is dat deze, naar mijn mening, toentertijd het beste was in het maken van (Python) scripts.

Hieronder een voorbeeld van de afbeelding en response;

{
        "Titel": "SET! Kaartspel",
        "Beschrijving": "SET! is een kaartspel waarbij spelers snel moeten zoeken naar sets van drie kaarten die alle drie hetzelfde of allemaal verschillend zijn in kleur, vorm, aantal en vulling. Het spel vereist observatie, logisch denken en snelheid.",
        "Leeftijdsgroep": "8+",
        "Soort speelgoed": "Kaartspel",
        "Ontwikkelingsdoelen": {
            "Motoriek": [
                "Fijne motoriek"
            ],
            "Cognitief": [
                "Probleemoplossend vermogen",
                "Ruimtelijk inzicht",
                "Logisch denken",
                "Snelheid"
            ],
            "Sociaal-emotioneel": [
                "Competitie",
                "Snelle denkvaardigheid",
                "Snelle actie"
            ],
            "Overige": []
        },
        "Thema's": [
            "Logica",
            "Strategie"
        ],
        "Merk": "SET Enterprises",
        "Aantal spelers": "1+",
        "Extra informatie": "SET! is een bekroond kaartspel dat is ontworpen om spelers van alle leeftijden uit te dagen. Het spel kan gespeeld worden met 1 of meer spelers.",
        "Bestandsnaam": "G345 SET!.jpg"
    },

Zoals je ziet krijg je een behoorlijke response vanuit Gemini, dit werkt ook behoorlijk goed bij minder duidelijke of bekende spellen.

Data tonen aan gebruiker

Toen ik eenmaal alle metadata had, hoefde ik het alleen nog maar zichtbaar te maken via een grafische interface. Ik heb hiervoor een subset gebruikt van de data om mee te beginnen en de context window van de AI niet te snel vol te laten lopen. Ik heb gekozen om hiervoor met Claude aan de slag gegaan. Ik had nog niet veel hiermee gewerkt maar ik was erg enthousiast over de Artifact functie van Claude, hiermee krijg je snel een voorbeeld te zien van wat er gemaakt is. Hieronder zie je een screenshot van de eerste versie.

Dit is een linkje naar de artifiact; https://claude.site/artifacts/7ab8062d-3938-43e2-b103-e8c03acb662c

Zoals je ziet geeft Claude al snel een aardig resultaat maar helaas liep ik na een paar iteraties tegen meerdere limiet aan. Ik heb toen een betaald abonnement genomen. Ook hiermee liep ik weer snel tegen de limieten van aanvragen aan. Dit houdt in dat je even moet wachten tot Claude weer tijd voor je heeft. Dit zorgde helaas ervoor dat de doorlooptijd wel wat hoger was dan ik eigenlijk van tevoren had verwacht.

Claude koos ervoor om voor de applicatie React te gebruiken, ik had hier zelf niet bewust over nagedacht met de gedachte dat Claude de meest geschikte taal/framework zou kiezen. Groot voordeel is dat je hiermee ook een progressive web app krijgt die je kan downloaden op tablet/smartphone (https://www.d-tt.nl/artikelen/pwa-progressive-web-apps-voordelen-nadelen).  Na vele iteraties en vaak wachten had ik iets waar ik tevreden mee was.

Applicatie op het internet

Nu was het zaak om de data en de applicatie op het internet krijgen. Ik wil hier niet voor betalen omdat het een simpel project is en het voor mij vooral een prototype is. Al eerder had ik Github pages gebruikt voor statische html/css/js pagina’s, dit leek me nu dus ook een goede mogelijkheid.

Helaas kan deze niet direct overweg met de React code die Claude voor mij had gemaakt. Dus had ik maar weer aan ChatGPT gevraagd hoe ik dit moet aanpakken, in korte tijd was er een Github Workflow aangemaakt https://github.com/maartenn/speelotheek-search/blob/main/.github/workflows/deploy.yml die ervoor zorgt dat bij elke commit automatisch geprobeerd wordt de applicatie te deployen.

Bekijk het resultaat eens op : https://maartenn.github.io/speelotheek-search/

Bijzonderheden

• Ondanks dat ik vroeg om data in een bepaald formaat met mijn prompt kreeg ik soms toch een “ongeldig” antwoord. Eerst heb ik geprobeerd dit met de hand recht te zetten. Later heb ik ervoor gekozen om met wat simpele  zoek/vervang opdrachten de data recht te zetten en als het echt hopeloos was heb ik de afbeeldingen opnieuw opgestuurd.
• Niet alle afbeeldingen konden geparsed worden. Gemini wilde bijvoorbeeld niet een spel met informatie over voortplanting analyseren…
• Voor sommige software producten zie je dat er opties zijn dat je gratis gebruik ervan mag maken als het voor open source projecten is. Het zou mooi zijn als dit ook zou gebeuren bij API diensten.
• Nee, je zult niet de beste code krijgen met Claude, maar je hebt wel een heel bruikbaar resultaat en dat is toch voor de eindgebruiker vaak belangrijker dan hoe het er aan de achterkant uitziet.
• Nee, de metadata is niet perfect, het ging me er vooral om de bestaande situatie te verbeteren, kijken naar mogelijkheden etc.
• UX / UI kan natuurlijk altijd beter, maar op zich heeft Claude hier best wat moois van gemaakt.
• Ik heb het product aangeboden aan de speelotheek en ze gaan kijken hoe ze het kunnen integreren.
• De (python) code voor de Gemini API koppeling vond ik zo triviaal (en rommelig) dat ik deze niet heb gedeeld.

Source code op github van de gemaakte website: https://github.com/maartenn/speelotheek-search/

🌎 speelotheek site: https://maartenn.github.io/speelotheek-search/