Architecture

Architecture Documentation

This document outlines the architecture of the Programming Task Generator application.

Overview

The Programming Task Generator is built using a Node.js Express backend with a simple HTML/CSS/JavaScript frontend. It uses OpenAI's GPT-4 API for generating programming tasks and Mermaid.js for creating visualizations.

System Architecture

+------------------+        +------------------+        +------------------+
|                  |        |                  |        |                  |
|  Web Interface   |<------>|  Express Server  |<------>|   OpenAI API     |
|                  |        |                  |        |                  |
+------------------+        +------------------+        +------------------+
                                    |
                                    |
                                    v
                            +------------------+
                            |                  |
                            |   Puppeteer      |
                            |   (PDF Gen)      |
                            |                  |
                            +------------------+

Components

Frontend

The frontend consists of HTML, CSS, and JavaScript files:

• index.html: Main interface with form elements
• styles.css: Styling for the UI
• script.js: Client-side logic for handling user interactions and form submissions

Backend

The backend is built with Express.js:

• app.js: Main server file that handles routing, middleware, and API calls
• uploads/: Directory for temporarily storing uploaded PDF files

External Services

• OpenAI API: Used for generating task content and visualizations
• Mermaid.js: Library for rendering diagrams in the PDF
• Puppeteer: Headless browser for converting HTML to PDF

Data Flow

1. User Input: User selects task types, languages, and other options via the web interface
2. Form Submission: The form data is sent to the server via a POST request
3. Task Generation: The server calls the OpenAI API to generate task content
4. Visualization Generation: The server calls the OpenAI API again to generate visualization code
5. HTML Generation: The server generates an HTML file with the task content and Mermaid.js code
6. PDF Creation: Puppeteer renders the HTML and converts it to a PDF
7. File Delivery: The PDF is sent back to the client for download

File Structure

programming-task-generator/
├── app.js                   # Main server file
├── package.json             # Node.js dependencies
├── .env                     # Environment variables
├── uploads/                 # Temporary storage for uploaded files
├── public/                  # Static files
│   ├── index.html           # Main HTML file
│   ├── styles.css           # CSS styles
│   └── script.js            # Client-side JavaScript
└── docs/                    # Documentation
    ├── API.md               # API documentation
    ├── ARCHITECTURE.md      # This file
    └── CONTRIBUTING.md      # Contribution guidelines

Technologies Used

• Backend: Node.js, Express.js
• Frontend: HTML5, CSS3, JavaScript
• APIs: OpenAI API
• Libraries: Puppeteer, Mermaid.js, pdf-parse, multer
• Development: dotenv for environment variables

Sequence Diagrams

Task Generation Sequence

sequenceDiagram
    participant User
    participant Frontend
    participant Server
    participant OpenAI
    participant Puppeteer

    User->>Frontend: Select options and submit form
    Frontend->>Server: POST /generate
    Server->>OpenAI: Request task generation
    OpenAI->>Server: Return generated task
    Server->>OpenAI: Request visualizations
    OpenAI->>Server: Return visualization code
    Server->>Server: Generate HTML file
    Server->>Puppeteer: Render HTML to PDF
    Puppeteer->>Server: Return PDF file
    Server->>Frontend: Send PDF file
    Frontend->>User: Download PDF

Loading