[GH-ISSUE #13070] feat: Enhance Multi-Model Comparison View with Expandable Output Cards and Horizontal Model Selection #103796

New Issue

GiteaMirror · 2026-05-18T01:20:47-05:00

GiteaMirror commented

2026-05-18 01:20:47 -05:00

Originally created by @JasonWenTheFox on GitHub (Apr 20, 2025).
Original GitHub issue: https://github.com/open-webui/open-webui/issues/13070

Check Existing Issues

I have searched the existing issues and discussions.

Problem Description

When using the multi-model comparison feature in OpenWebUI, especially on desktop screens, the columns allocated to each model's output are quite narrow. This results in very little content being visible per line for each model, forcing users to scroll extensively vertically to read a single model's complete response. This significantly hinders the reading experience when trying to understand a specific model's output in detail.

Additionally, the current layout of the model selection/switching elements at the top of the comparison view occupies considerable vertical screen real estate, further reducing the space available for viewing the actual model outputs.

Here is a screenshot illustrating the current narrow column layout:

Desired Solution you'd like

I propose two UI improvements to address these issues:

Expandable Model Output Cards ("Focus View"):
- Add an "Expand" or "Maximize" icon (e.g., in the top-right corner) to each individual model's output card within the comparison view.
- Clicking this icon would transition the selected model's output into a "Focus View" mode.
- In Focus View, the selected model's output card would expand horizontally to occupy the majority of the page width, allowing for comfortable reading without excessive scrolling.
- The expanded card should feature:
  - The model's name (e.g., top-left).
  - A "Minimize" or "Shrink" icon (e.g., top-right) to return to the standard multi-column comparison view.
  - Navigation arrows (left "<" and right ">") on the sides of the card. Clicking these arrows would allow the user to seamlessly switch to viewing the previous or next model's output while remaining in the Focus View.
- This allows users to easily read through individual model outputs in detail when needed, while still being able to quickly return to the side-by-side comparison view.
Here is a sketch illustrating the proposed expanded card view:

Horizontal Layout for Top Model Indicators:
- Modify the layout of the elements at the top of the page that indicate or allow switching between the models currently being compared.
- Arrange these elements horizontally instead of their current (presumably more vertical or space-consuming) layout. This would save valuable vertical screen space, allowing more room for the chat/output area.

Alternatives Considered

Simply widening the columns: While slightly wider columns might help a little, they wouldn't provide the focused reading experience desired when analyzing a single long response. It also might not be feasible on all screen sizes without introducing horizontal scrolling for the entire page.
A separate "reading mode": This could work, but integrating the focus view directly into the comparison interface with easy expand/minimize and navigation offers a more seamless user experience, allowing quick switching between detailed reading and side-by-side comparison.

The proposed solution aims to maintain the utility of the side-by-side comparison while significantly improving the usability for reading individual model outputs within that context and optimizing screen space usage.

Additional Context

No response

Originally created by @JasonWenTheFox on GitHub (Apr 20, 2025). Original GitHub issue: https://github.com/open-webui/open-webui/issues/13070 ### Check Existing Issues - [x] I have searched the existing issues and discussions. ### Problem Description When using the multi-model comparison feature in OpenWebUI, especially on desktop screens, the columns allocated to each model's output are quite narrow. This results in very little content being visible per line for each model, forcing users to scroll extensively vertically to read a single model's complete response. This significantly hinders the reading experience when trying to understand a specific model's output in detail. Additionally, the current layout of the model selection/switching elements at the top of the comparison view occupies considerable vertical screen real estate, further reducing the space available for viewing the actual model outputs. Here is a screenshot illustrating the current narrow column layout: ![Image](https://github.com/user-attachments/assets/749c70e6-8614-40bd-bc59-149346ac4cbc) ### Desired Solution you'd like I propose two UI improvements to address these issues: 1. **Expandable Model Output Cards ("Focus View"):** * Add an "Expand" or "Maximize" icon (e.g., in the top-right corner) to each individual model's output card within the comparison view. * Clicking this icon would transition the selected model's output into a "Focus View" mode. * In Focus View, the selected model's output card would expand horizontally to occupy the majority of the page width, allowing for comfortable reading without excessive scrolling. * The expanded card should feature: * The model's name (e.g., top-left). * A "Minimize" or "Shrink" icon (e.g., top-right) to return to the standard multi-column comparison view. * Navigation arrows (left "<" and right ">") on the sides of the card. Clicking these arrows would allow the user to seamlessly switch to viewing the *previous* or *next* model's output *while remaining in the Focus View*. * This allows users to easily read through individual model outputs in detail when needed, while still being able to quickly return to the side-by-side comparison view. Here is a sketch illustrating the proposed expanded card view: ![Image](https://github.com/user-attachments/assets/48301b44-8af5-4069-816b-13e648dde6b4) 2. **Horizontal Layout for Top Model Indicators:** * Modify the layout of the elements at the top of the page that indicate or allow switching between the models currently being compared. * Arrange these elements horizontally instead of their current (presumably more vertical or space-consuming) layout. This would save valuable vertical screen space, allowing more room for the chat/output area. ### Alternatives Considered * **Simply widening the columns:** While slightly wider columns might help a little, they wouldn't provide the focused reading experience desired when analyzing a single long response. It also might not be feasible on all screen sizes without introducing horizontal scrolling for the entire page. * **A separate "reading mode":** This could work, but integrating the focus view directly into the comparison interface with easy expand/minimize and navigation offers a more seamless user experience, allowing quick switching between detailed reading and side-by-side comparison. The proposed solution aims to maintain the utility of the side-by-side comparison while significantly improving the usability for reading individual model outputs within that context and optimizing screen space usage. ### Additional Context _No response_

GiteaMirror closed this issue

2026-05-18 01:20:48 -05:00

GiteaMirror commented

2026-05-18 01:20:50 -05:00

@colinmollenhour commented on GitHub (May 10, 2025):

Running on a massive 4k display and Open WebUI only uses about half of my screen space.. Just removing the arbitrary max width would be a great start but I love the expanded cards idea.

@colinmollenhour commented on GitHub (May 10, 2025): Running on a massive 4k display and Open WebUI only uses about half of my screen space.. Just removing the arbitrary max width would be a great start but I love the expanded cards idea. ![Image](https://github.com/user-attachments/assets/61aa625c-0a56-4a95-9979-313e3538e6f4)

GiteaMirror commented

2026-05-18 01:20:50 -05:00

@unfailingsalvage1448 commented on GitHub (May 13, 2025):

Yes please, this is driving me mad. The fixed column width and inability to select which of them you want to respond to, makes it really hard to use.

Also this is a seperate issue, but the Overview view always resets on each streamed chunk, which means you can't use it while a model is streaming its output.

This multi-model feature is really cool in principle, but as it stands the UX is pretty bad.

@unfailingsalvage1448 commented on GitHub (May 13, 2025): Yes please, this is driving me mad. The fixed column width and inability to select which of them you want to respond to, makes it really hard to use. Also this is a seperate issue, but the Overview view always resets on each streamed chunk, which means you can't use it while a model is streaming its output. This multi-model feature is really cool in principle, but as it stands the UX is pretty bad.

GiteaMirror commented

2026-05-18 01:20:51 -05:00

@97tkddnjs commented on GitHub (May 25, 2025):

The expandable card approach is really elegant.

I'd like to suggest a complementary approach that could work alongside your Focus View:

Tab-based Interface Option

Alternative to the horizontal model indicators at the top
Each model gets its own tab (similar to browser tabs)
Could include metrics like tokens/s in tab headers
Clean switching between individual model outputs

Accordion Mode for Multi-Comparison

When you need to compare specific sections across all models
Expandable sections showing key parts of each response
Useful for side-by-side content analysis

Your Focus View would be perfect for deep reading of individual responses, while these modes could handle different comparison scenarios. The tab approach might also save even more vertical space than the horizontal layout you mentioned.

What do you think about having multiple view modes to cover different use cases - your Focus View for detailed reading, tabs for quick switching, and accordion for multi-model comparison?

@97tkddnjs commented on GitHub (May 25, 2025): The expandable card approach is really elegant. I'd like to suggest a complementary approach that could work alongside your Focus View: **Tab-based Interface Option** - Alternative to the horizontal model indicators at the top - Each model gets its own tab (similar to browser tabs) - Could include metrics like tokens/s in tab headers - Clean switching between individual model outputs **Accordion Mode for Multi-Comparison** - When you need to compare specific sections across all models - Expandable sections showing key parts of each response - Useful for side-by-side content analysis Your Focus View would be perfect for deep reading of individual responses, while these modes could handle different comparison scenarios. The tab approach might also save even more vertical space than the horizontal layout you mentioned. What do you think about having multiple view modes to cover different use cases - your Focus View for detailed reading, tabs for quick switching, and accordion for multi-model comparison?

GiteaMirror commented

2026-05-18 01:20:52 -05:00

@vcazacuAmber commented on GitHub (Aug 10, 2025):

This is such an elegant solution to the problem.

@vcazacuAmber commented on GitHub (Aug 10, 2025): This is such an elegant solution to the problem.

GiteaMirror commented

2026-05-18 01:20:52 -05:00

@eddieai commented on GitHub (Aug 11, 2025):

Hi Open-WebUI community, any update on this?
This would be an awesome feature. Many, like us, run multiple models to get the best out of them.
Thank you for your great work!

@eddieai commented on GitHub (Aug 11, 2025): Hi Open-WebUI community, any update on this? This would be an awesome feature. Many, like us, run multiple models to get the best out of them. Thank you for your great work!

GiteaMirror commented

2026-05-18 01:20:52 -05:00

@silentoplayz commented on GitHub (Aug 25, 2025):

Good news! I'm here to state that as of v0.6.19 of Open WebUI, "Tabbed View for Multi-Model Responses" is now a toggleable user setting (see attached screenshots)!

📑 Tabbed View for Multi-Model Responses: You can now enable a new tabbed interface to view responses from multiple models. Instead of side-scrolling cards, this compact view organizes each model's response into its own tab, making it easier to compare outputs and saving vertical space. This feature can be toggled on or off in Interface settings.

@silentoplayz commented on GitHub (Aug 25, 2025): Good news! I'm here to state that as of [v0.6.19](https://github.com/open-webui/open-webui/releases/tag/v0.6.19) of Open WebUI, "`Tabbed View for Multi-Model Responses`" is now a toggleable user setting (see attached screenshots)! <img width="904" height="594" alt="Image" src="https://github.com/user-attachments/assets/009dcf5e-0b08-481b-a2ac-2dad0914f84b" /> <img width="2306" height="633" alt="Image" src="https://github.com/user-attachments/assets/db4a207b-8216-450b-8535-2de06f8f9fa7" /> > 📑 Tabbed View for Multi-Model Responses: You can now enable a new tabbed interface to view responses from multiple models. Instead of side-scrolling cards, this compact view organizes each model's response into its own tab, making it easier to compare outputs and saving vertical space. This feature can be toggled on or off in Interface settings.

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github-starred/open-webui#103796