Google Summer of Code (GSoC) x Drupal: Week 2 - Mapping the Dashboards

WELCOMMMEEEE to another episode of Weekly Recap of my project

This week we have built two things: LLM Benchmarking Dashboard & LLM Arena to show you which ones are the best. Both of these will be super useful while building our final product.

The Offical Issue Tracker: Week 2 Issues Tackled
Let me give you a glipmse of what our output will look like.

https://www.youtube.com/watch?v=FWhz2f81urQ

Dashboard (Part 1)

Dashboard (Part 2)

The Benchmarking Dashboard

In order to capture the true essence of which model performs the best in the long run, had made a LLM benchmarking dashboard. Someone just by looking at charts can capture which model is most suitable for their usecase.

Metrics that provided the overall picture

1). The Top Banner: It had the total runs so far, along with the average response time and the average accuracy for the recipe generated.

2). The Visuals: Any dashboard is incomplete without a good visual. The first graph which shows the latency for the previous runs mapped across models is useful for finding the trend for model hits. The second graph is for using a bar graph for visualising the model avg. latency to compare which model is the faster as compared to others. Used the Chart module for the same.

3). Key Metric Table: This is the detailed table for per prompt summary. It covers: the provider, the model, the speed, whether the YAML is valid or not, whether the Schema proper or not as per Drupal Symfony, & finally tells us about the accuracy along with timestamps.

What is useful in this is that you can filter it along with sort the columns in ascending or descending order. Is if further colour coded so that you can quickly view the page at a glance.

Things I used to build this:

Chart.js / Drupal Chart Module: To render the responsive, interactive graphs.
Custom Database Schema (.install): To reliably save and query the historical benchmarking data.
Drupal AJAX API: To ensure the table filters and dynamic sorting update seamlessly.
Font Awesome Library: To have cool icons in the dashboard

LLM Arena

The LLM Arena

This was particularly fun to build as this was for comparing the different responses. You get to type the custom prompt and then fire it across all the different models and providers.

You can have all the different models & providers, there is NO LIMIT!!

Further these is also an option to store the responses in the database so that they reflected in the schema. There is also a delete button for the same. If you want to remove some model-provider. Further you will see a very familiar screen that, while firing the prompts, it will look like new module install screen, this is because of the Batch API Screen.

Sources I used:

AJAX API: Model - Provider dropdown
Batch API: For firing all the prompts together
Font Awesome Icons: For the icons there

Laying out the Structure

*System Diagram *

Just like a good Drupal Practice (have to mention), have used AI to generate the image above.

1. Client (User Browser) Layer

Handles the user interface and visual presentation.

User (Arena/Dashboard Interface): Renders the comparison forms, interactive data tables, and metrics dashboards.
Frontend Components:
JavaScript: Uses Chart.js to render interactive line and bar charts for model latency trends.
Icons: Integrates Font Awesome for immediate visual cues (success/failure statuses).
CSS: Uses css/arena.css and css/dashboard.css via .libraries.yml for custom, polished layouts.
Client-Server Communication:
AJAX API: Controls non-blocking form updates, dynamic filtering, and column sorting without page reloads.
Batch API (Client-Side): Drives the real-time progress bar (similar to the module installation screen) during execution.

2. Drupal Application Logic Layer

The PHP backend that processes requests and orchestrates module logic.

Form API (ArenaForm.php, BenchmarkDashboardForm.php): Handles form submissions and handles backend execution triggers.
Services Layer (ArenaService.php, BenchmarkDashboardService.php): Houses decoupled, reusable core logic registered via ai_recipe_generator.services.yml.
API Integration Engine:
Drupal Batch API: Splits concurrent LLM requests into isolated chunks to prevent gateway timeouts and server lockups.
Drupal AJAX API: Manages seamless, lightweight data passing between backend services and frontend components.

3. Data & External Integrations Layer

Manages persistent storage and outbound network requests.

Local Database (.install): Uses a custom schema defined in the install file to save historical run stats, latency, timestamps, and schema validation flags.
External LLM APIs: Handles outbound calls to external models (OpenAI, Anthropic, Gemini). Isolated by the Batch API so a timeout on one provider doesn't crash the session.