Add UML image layout rendering

[LeonWehrhahn]

Motivation and Context

This PR introduces the Helios renderer, a server-side rendering solution for generating layout-focused UML diagram images from Apollon JSON. This is crucial for providing visual context to Multimodal LLMs, which complements the semantic information provided by the ApollonUML textual representation. Using a dedicated server-side renderer avoids the complexities and inconsistencies associated with client-side rendering solutions like relying on browser environments or capturing screenshots. Furthermore, it ensures that the generated images consistently reflect the layout and naming conventions established by the Apollon editor and ApollonUML.

Description

The Helios renderer is implemented in Python and is designed to produce PNG images of UML diagrams. The core functionalities include:

• Parsing and Model Construction: Takes the Apollon JSON and ApollonUML diagram representation as input and constructs an internal model representing the diagram's elements, their bounds, and relationships.
• Layout and Path Computation: Implements the path calculation logic adapted from the original Apollon TypeScript codebase to ensure consistency with the client-side editor. This involves determining the precise paths for relationships based on element boundaries, connection points, and direction hints.
• SVG Generation: Utilizes Jinja2 templates and CSS styling to render the diagram into an SVG format. This includes rendering elements with their names and types, and drawing relationship paths with labels.
• Text Wrapping and Scaling: Implements text wrapping logic to ensure element names and types fit within their allocated bounds and dynamically scaling the diagram when text still exceed the elements limits.
• Rasterization: Converts the generated SVG into a PNG image using CairoSVG.
• Diagram Bounds Computation: Calculates the minimal bounding box for the entire diagram, ensuring no content is clipped and unnecessary padding is minimized.

Steps for Testing

• Verify that the feedback generation process for modeling exercises functions correctly and that the accurate image layout representations are being passed to the LLM generation.

Testserver States

Note

These badges show the state of the test servers.
Green = Currently available, Red = Currently locked
Click on the badges to get to the test servers.

Screenshots