Instructie: Bouw je eigen Markov Tekstgenerator

Leeruitkomsten

• Software
• Persoonlijk leiderschap

Doel van deze opdracht

Je hebt veel code geschreven om je projecten te laten werken maar vaak is het niet nodig geweest om precies te weten hoe de je de onderdelen van je code benoemd. In deze opdracht ga je een tekstgenerator bouwen en daarbij gebruik maken van de juiste terminologie.

Je gaat een programma schrijven dat willekeurige tekst kan genereren op basis van een voorbeeldtekst. Dit doe je door een Markov-model te maken. Je leert hoe je tekst opslaat in een datastructuur en hoe je er nieuwe tekst uit genereert.

Je gebruikt de volgende programmeerelementen:

• ✅ Functies om herbruikbare stukken code te maken
• ✅ Arrays en objecten om gegevens op te slaan
• ✅ Loops om over tekstdata heen te lopen
• ✅ Randomness om variatie in de output te krijgen

Zelf doen

• Schrijf zelf de code in textgenerator.js zonder te copy-pasten.
• Je mag een LLM gebruiken om concepten uit te leggen, maar niet om code direct te genereren.

Stap 1: Begrijp de opdracht

Clone de volgende gitlab repository:

git clone git@uva-hva.gitlab.host:hbo-ict-startprojecten/markov-text-generator.git

De webpagina die je krijgt bevat:

• Een tekstvak waar je een lange tekst in kunt plakken.
• Een knop om de tekst te analyseren en om te zetten naar een Markov-model.
• Een knop om een nieuwe willekeurige tekst te genereren.

Jij gaat de JavaScript-logica zelf schrijven in de file textgenerator.js. De HTML en CSS zijn al voor je gemaakt dus daar hoef je niets aan te veranderen.

Stap 2: Schrijf de functie om de tekst te analyseren

Je begint met een functie die een tekst omzet in een Markov-model. Dit model is een object waarin voor elk woord wordt opgeslagen welke woorden erna kunnen komen. Het object zal er zo uitzien:

{
  "woord1": ["volgend1", "volgend2", "volgend3"],
  "woord2": ["volgend4", "volgend5"],
  "woord3": ["volgend6"]
}

• Maak de functie analyzeText
  • deze krijgt één argument: een string met tekst.
• Maak een lege variabele voor het resultaat, dit wordt een object.
  • Kies een goede variabelenaam.
• Splits de tekst op in woorden.
  • Gebruik hiervoor de split-functie.
  • Geef aan dat je alle whitespace wilt gebruiken als scheidingsteken. (text.split(/\s+/))
  • De split-functie retourneert een array met woorden.

Wat doet /\s+/?

Dit is een reguliere expressie die aangeeft dat je alle whitespace wilt gebruiken als scheidingsteken.

• Loop met een for-loop over alle woorden, behalve het laatste.

  • Voor elk woord:
    • Controleer of het al in het object zit.
    • Zo niet, maak een nieuwe, lege array als waarde.
    • Voeg het volgende woord toe aan de array. (gebruik de push functie)

• Retourneer gemaakte object als resultaat.

✅ Test de analyse-functie:

• Open de browserconsole (F12 → Console).
• Plak een korte tekst in het invoerveld.
• Klik op “Analyseer Tekst”.
• Bekijk of het object correct wordt aangemaakt.

Stap 3: Schrijf de functie om tekst te genereren

Nu ga je een functie schrijven die op basis van het Markov-model nieuwe tekst maakt.

• Maak een functie generateText die twee argumenten krijgt:
  • een object met de Markov-data
  • een getal dat aangeeft hoeveel woorden de gegenereerde tekst moet hebben

In deze functie:

• Maak een lege array generatedText waarin de gegenereerde tekst wordt opgeslagen.
• Kies een willekeurig startwoord uit de lijst met woorden in het Markov-model.
  • Gebruik de Object.keys functie om een array te krijgen van alle woorden in het model.
  • Gebruik een random getal om een willekeurig woord uit deze array te kiezen.
• Voeg dit woord toe aan de generatedText array. (gebruik de push functie)
• Herhaal de volgende stappen tot de gewenste lengte is bereikt:
  • Zoek in het Markov-model welke woorden erna kunnen komen.
  • Kies willekeurig een woord uit deze lijst.
  • Voeg het woord toe aan de generatedText array.
• Als er geen vervolgwoorden zijn, stop de generatie.
• Zet de generatedText array om in een string en retourneer deze. (gebruik de join functie)

✅ Test de generatie-functie:

• Klik op “Genereer Tekst”.
• Controleer of er willekeurige tekst verschijnt.
• Probeer verschillende invoerteksten en kijk wat er verandert.

Grote teksten

Gebruik vooral grote teksten als input. Hoe groter de tekst, hoe beter het model werkt.

• de bijbel
• de grondwet
• een boek

Extra uitdagingen

💡 Bouw een variatie op je model:

• Pas het model aan zodat het bigrams (twee-woord-combinaties) gebruikt.
• Houd rekening met leestekens en hoofdletters.
• Maak een optie waarmee de gebruiker kan kiezen hoeveel woorden de tekst moet bevatten.

Stap 5: Reflectie

In deze opdracht heb je een tekstgenerator gebouwd met behulp van een Markov-model. Dit is op zichzelf geen nuttige toepassing die te vergelijken is met een LLM die je in de praktijk zou gebruiken. Toch is het een leuke manier om te leren hoe taalmodellen werken.

Wat je vooral hebt geleerd is:

• Hoe je tekstdata kunt opslaan in een datastructuur.
• Code schrijven vanuit de programmeer-termen die je hebt geleerd.

Het is belangrijk om de juiste terminologie te gebruiken als je met anderen samenwerkt. Dit zorgt ervoor dat je duidelijk kunt communiceren over wat je hebt gemaakt en hoe het werkt. Was dit een makkelijke of moeilijke opdracht? Wat was er moeilijk aan? Wat ga je doen om te verbeteren?

Schrijf een reflectie op deze oefening met de volgende template:

# Reflectie op de Markov Tekstgenerator

## Context: Wat heb je gemaakt?
<!-- Beschrijf kort wat je hebt gemaakt -->

## Wat heb je geleerd?
<!-- Wat heb je geleerd van deze opdracht? -->

## Waar was je trots op?

## Wat vond je moelijk?
<!-- Waar liep je tegenaan? Beschrijf zo concreet mogelijk bij welke stappen je lang bleef hangen. Welke begrippen kende je nog niet? -->

## Wat ga je doen om te verbeteren?
<!-- Ga je tutorials volgen? Welke? Ga je onderdelen in je project toepassen?-->

Commit deze reflectie naar je learning journey repository en koppel deze aan een bewijsstuk in portflow.