parLLMent

A dependency-free dashboard for pasting and comparing LLM responses side by side. Built with vanilla HTML, CSS, and JavaScript — no frameworks, no CDNs, no build steps.

Live demo: damoscodehub.github.io/parLLMent

---

Features

• 4-column grid of model cards that collapses to 2 columns on tablets and 1 column on mobile.
• 8 preloaded models: Gemini, Claude, ChatGPT, DeepSeek, Meta, Qwen, Grok, Perplexity.
• Per-card actions:
  • Copy — exports that model's response as Markdown.
  • Clear — wipes the response text (keeps the model name).
  • Visibility — eye toggle to include/exclude a card from the global copy.
  • Delete — removes the card (at least one must remain).
• Global toolbar:
  • Copy all visible responses as Markdown.
  • Add new model cards.
  • Clear every response (keeps model names).
• ES / EN language switch — all UI strings, placeholders, and the exported Markdown follow the selected language.
• Formal / Casual output mode — the export ends with a detailed critical-analysis paragraph (formal) or a simple question ("What do you think?" / "¿Qué opinas tú?") (casual).
• Smart scrolling — textareas have a fixed viewport-relative height and only show a scrollbar when content overflows.
• Full persistence — cards, responses, visibility state, and mode are saved to localStorage and restored between sessions.

Export format

Copying produces clean, professional Markdown:

# LLM Response Comparison

---
## Gemini

Your response here.

(End of Gemini)

---
## Claude

Another response here.

(End of Claude)

---
**Critical analysis:** Analyze all the responses above in detail, compare
their approaches, identify similarities, contradictions, depth, validity of
arguments, truthfulness of claims, and the quantity and quality of the
evidence presented. Write a final consolidated conclusion.

---

In casual mode the final section becomes **What do you think?**. All labels and the analysis text are translated when the ES language switch is active.

Getting started

No installation or build step required.

1. Clone the repository:

   git clone https://github.com/damoscodehub/parLLMent.git

2. Open index.html in any modern browser (Chrome, Edge, Firefox, Safari).

Note: the Clipboard API requires a secure context (https://) or localhost. If the page is opened via the file:// protocol and copy fails, the app automatically falls back to document.execCommand('copy').

Usage

1. Paste each model's response into its corresponding textarea.
2. Edit the model name field if needed.
3. Optionally close the eye on cards you want to exclude from the global copy.
4. Toggle ES/EN for language and Formal/Casual for the export tone.
5. Click the copy icon in the toolbar to export all visible responses, or use each card's copy button to export a single model.

Everything you type is saved automatically in your browser's localStorage, so refreshing the page or reopening it later restores your work.

Project structure

parLLMent/
└── index.html      # The entire application (styles, markup, and logic)

The whole app lives in a single self-contained index.html file, making it trivial to deploy anywhere — static hosts, email attachments, or even a local file.

How it works

• Layout — CSS Grid provides a responsive 4 → 2 → 1 column layout. Cards use viewport-relative heights (calc(...vh ...)) so fields stay fixed and never grow with their content.
• Event delegation — a single click listener on the grid handles all dynamically created card buttons, avoiding listener leaks and rebinding issues.
• Clipboard — exports use navigator.clipboard.writeText() with a document.execCommand('copy') fallback.
• Persistence — state is serialized to localStorage under the llmDashboardData key and restored on boot, with graceful handling of corrupt or unavailable storage.

Browser support

All modern evergreen browsers that support ES6, CSS Grid, and the Clipboard API.

Contributing

Contributions, issues, and feature requests are welcome. Feel free to open a pull request or an issue on GitHub.

License

MIT