C4-diagrammen

Om de technische structuur van de applicatie uit te leggen, hebben we een tweetal C4-diagrammen gemaakt. Het Context-model toont onze applicatie als enkel blok en laat enkel de verhoudingen tussen de gehele systemen zien. Het Container-diagram laat ook zien uit welke onderdelen de H-AI-applicatie bestaat.

Andere typen C4-diagrammen zijn weggelaten omdat deze worden afgeraden1 2, bijvoorbeeld omdat ze:

  • Automatisch gegenereerd zouden kunnen worden, of
  • Weinig tot niets bijdragen voor het begrijpen van de structuur van de applicatie.

Info

De blauwe componenten zijn componenten die door ons gebouwd zijn en/of gehost worden. De grijze componenten zijn componenten waar we mee te maken hebben, maar geen zeggenschap over hebben.

Context diagram

C4Context
    UpdateLayoutConfig($c4ShapeInRow="2")

    Enterprise_Boundary(b0, "De Haagse Hogeschool") {
        Person(teacher, "Docent", "Een docent van de Haagse Hogeschool.")

        System_Ext(Brightspace, "Brightspace", "LMS waar onder meer quizzes mee afgenomen kunnen worden.")

        Rel(teacher, Brightspace, "Importeert geëxporteerde quizvragen in")

        System(H-AI, "H-AI", "Staat docenten toe om geautomatiseerd quizvragen te genereren en naar Brightspace te exporteren.")

        Rel(teacher, H-AI, "Genereert quizvragen met")
    }

Container diagram

Warning

Hoewel we ook werken met Docker-containers, moet het begrip 'Container' in de context van C4-diagrammen hier niet mee verward worden.

C4Container
    UpdateLayoutConfig($c4ShapeInRow="2")

    Enterprise_Boundary(b0, "De Haagse Hogeschool") {
        Person(teacher, "Docent", "Een docent van de Haagse Hogeschool.")

        Rel(teacher, frontend, "Gebruikt om quizzes te genereren")

        System_Ext(Brightspace, "Brightspace", "LMS waar onder meer quizzes mee afgenomen kunnen worden.")

        System_Boundary(hai, "H-AI") {
            Container(frontend, "Frontend", "Javascript (React)", "Provides all the internet banking functionality to customers via their web browser.")

            Container(backend, "Backend", "Python (FastAPI, Celery, LangChain)", "Verzorgt het genereren van quizzes middels een wachtrij en maakt quizzes beschikbaar voor het frontend.")

            Rel(frontend, backend, "Maakt API-calls naar")

            ContainerDb(redis, "Redis", "", "Slaat gegenereerde quizzes op en document vectoren.")

            Rel(backend, redis, "Slaat gegenereerde vragen en document vectoren op in")

            Container(ollama, "Ollama", "", "Biedt API om met LLM's te werken")

            Rel(backend, ollama, "Laat vragen genereren door")
        }

        Rel(teacher, Brightspace, "Importeert geëxporteerde quizvragen in")
    }