feat: Support additional filters #6213

kamal · 2025-08-18T03:15:28Z

Describe Your Changes

Add a filter modal in Hub to house additional filters.

Fixes Issues

Closes #
Closes #

Self Checklist

Added relevant comments, esp in complex areas
Updated docs (for bug fixes / features)
Created issues for follow-up changes or refactoring needed

Important

Add ModelFilters component to support filtering models by download status and tool calling capability, with tests and localization updates.

Components:
- Add ModelFilters component in ModelFilters.tsx to manage filters for showOnlyDownloaded and toolCallingOnly.
- Integrate ModelFilters in index.tsx to apply filters to model list.
Tests:
- Add tests in ModelFilters.test.tsx to verify filter toggling and clearing functionality.
Localization:
- Update hub.json in multiple locales to include new filter-related strings: filters, filterBy, toolCalling, clearFilters.

^{This description was created by}^{for 2ee4fa2. You can customize this summary. It will automatically update as commits are pushed.}

ellipsis-dev

Caution

Changes requested ❌

Reviewed everything up to 2ee4fa2 in 2 minutes and 19 seconds. Click for details.

Reviewed 431 lines of code in 9 files
Skipped 0 files when reviewing.
Skipped posting 3 draft comments. View those below.
Modify your settings and rules to customize what types of comments Ellipsis leaves. And don't forget to react with 👍 or 👎 to teach Ellipsis.

1. web-app/src/components/filters/__tests__/ModelFilters.test.tsx:15

Draft comment:
The 'rerender' variable is used inside the onFiltersChange callback before its declaration. Consider reorganizing the setup to avoid potential temporal dead zone issues.
Reason this comment was not posted:
Confidence changes required: 33% <= threshold 50% None

2. web-app/src/components/filters/__tests__/ModelFilters.test.tsx:67

Draft comment:
Using a selector based on a data-slot attribute can be brittle. Consider assigning a dedicated test id for a more stable query in tests.
Reason this comment was not posted:
Confidence changes required: 33% <= threshold 50% None

3. web-app/src/routes/hub/index.tsx:165

Draft comment:
In the useMemo for filtering models, the tool calling filter applies supportsToolCalling on each model. For large datasets, consider caching these results for better performance.
Reason this comment was not posted:
Confidence changes required: 33% <= threshold 50% None

Workflow ID: wflow_bvRHydnr9ZE7Ww9C

^{You can customize}^{by changing your verbosity settings, reacting with 👍 or 👎, replying to comments, or adding code review rules.}

web-app/src/components/filters/ModelFilters.tsx

web-app/src/routes/hub/index.tsx

0rzech · 2025-08-23T12:44:15Z

If these translations were generated automatically, would it be possible to rebase onto dev and add Polish ones, so that they won't be missing after merging this PR? I'm asking because the Polish translation has been merged in the meantime. 😉

0rzech · 2025-08-23T13:13:07Z

On the second thought, here are the translations:

  "filters": "Filtry",
  "filterBy": "Filtruj po:",
  "toolCalling": "Obsługujący Narzędzia",
  "clearFilters": "Wyczyść wszystkie filtry",

kamal · 2025-08-23T23:07:07Z

@0rzech i've rebased and added the polish translations

0rzech · 2025-08-23T23:22:31Z

Thanks!

kamal · 2025-08-29T22:25:29Z

Is there anything else you'd like to see?

urmauur · 2025-09-09T08:03:26Z

Hi @kamal , can you help me rebase and update the screenshots? We now have the vision model as an eye icon, and we’ve updated a couple of logic points, for example, searching the Hugging Face repo only works if the downloaded filter is set to false

kamal · 2025-09-09T23:28:31Z

@urmauur I've added vision to the list of filters and updated the screenshot.

searching the Hugging Face repo only works if the downloaded filter is set to false

Can you explain this a bit more? I don't see any change of behavior against the dev branch. I can type in the search bar even if the downloaded filter is true/false.

urmauur · 2025-09-17T02:58:02Z

Hi @kamal, i gave approval, this is differences make sure when u paste hgf url and toggle on Download, it should like screenshot

kamal · 2025-09-18T16:24:19Z

@urmauur thanks for the explanation. someone on the team will have to merge it.

urmauur · 2025-09-30T12:12:33Z

e explanation. someone on the team will have to merge

help me, fix conflict then will merge this. sorry

kamal · 2025-09-30T23:21:35Z

@urmauur rebased

Copilot

Pull Request Overview

This PR introduces a comprehensive filtering system for the Hub model list by adding a new ModelFilters component that replaces the existing simple downloaded-only filter with a more feature-rich modal-style filter interface.

Replaces the simple switch-based downloaded filter with a dropdown menu supporting multiple filter types
Adds new filter options for tool calling and vision capabilities beyond the existing downloaded filter
Updates localization strings across multiple languages to support the new filtering interface

Reviewed Changes

Copilot reviewed 10 out of 10 changed files in this pull request and generated 4 comments.

File	Description
web-app/src/routes/hub/index.tsx	Integrates ModelFilters component and refactors filtering logic to support multiple filter types
web-app/src/components/filters/ModelFilters.tsx	New dropdown-based filter component with support for downloaded, tool calling, and vision filters
web-app/src/components/filters/tests/ModelFilters.test.tsx	Comprehensive test suite for the ModelFilters component functionality
web-app/src/locales/*/hub.json	Adds localization strings for filter-related UI elements across 8 language locales

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

Copilot · 2025-09-30T23:21:55Z

web-app/src/routes/hub/index.tsx

+      filtered = filtered?.filter((model) =>
+        model.quants.some((variant) =>
+          useModelProvider
+            .getState()
+            .getProviderByName('llamacpp')
+            ?.models.some((m: { id: string }) => m.id === variant.model_id)
+        )
+      )


The logic for the showOnlyDownloaded filter has changed from the original implementation. Previously, it filtered out variants that weren't downloaded and only kept models with at least one downloaded variant. Now it filters out entire models if no variants are downloaded, which could be correct, but the change in behavior should be verified.

Copilot · 2025-09-30T23:21:55Z

web-app/src/routes/hub/index.tsx

+            } else if (!newFilters.showOnlyDownloaded && filterOptions.showOnlyDownloaded) {
+              // Re-trigger HuggingFace search when switching back to "All models"
+              fetchHuggingFaceModel(searchValue)
+            }
+          }}


[nitpick] The condition !newFilters.showOnlyDownloaded && filterOptions.showOnlyDownloaded is checking if the downloaded filter was turned off. This logic could be clearer by extracting it to a variable like const wasDownloadedFilterTurnedOff = !newFilters.showOnlyDownloaded && filterOptions.showOnlyDownloaded.

Suggested change

} else if (!newFilters.showOnlyDownloaded && filterOptions.showOnlyDownloaded) {

// Re-trigger HuggingFace search when switching back to "All models"

fetchHuggingFaceModel(searchValue)

}

}}

} else {

const wasDownloadedFilterTurnedOff = !newFilters.showOnlyDownloaded && filterOptions.showOnlyDownloaded

if (wasDownloadedFilterTurnedOff) {

// Re-trigger HuggingFace search when switching back to "All models"

fetchHuggingFaceModel(searchValue)

}

}

Copilot · 2025-09-30T23:21:55Z

web-app/src/components/filters/ModelFilters.tsx

+          <div className="flex flex-col">
+            <span className="text-sm">{t('hub:toolCalling')}</span>
+          </div>


The div wrapper with flex flex-col is unnecessary since it only contains a single span element. The wrapper can be removed and the span can be used directly.

Copilot · 2025-09-30T23:21:56Z

web-app/src/components/filters/ModelFilters.tsx

+          <div className="flex flex-col">
+            <span className="text-sm">{t('hub:vision')}</span>
+          </div>


Similar to the tool calling filter, this div wrapper with flex flex-col is unnecessary since it only contains a single span element. The wrapper can be removed for consistency and cleaner code.

urmauur · 2025-11-05T02:56:30Z

Thanks a lot for your contribution and the effort you’ve put into this PR @kamal 🙏
After reviewing our current roadmap, we’ve decided to revamp the Hub scree, including its overall UI, layout, UX, and flow. Because of this broader redesign, the changes in this PR will be replaced as part of that upcoming update.

We really appreciate your time and initiative here. Your contributions are always welcome, and we’d love to have your input once the new Hub structure is ready. Thanks again for understanding 💪

github-project-automation bot added this to Jan Aug 18, 2025

ellipsis-dev bot reviewed Aug 18, 2025

View reviewed changes

web-app/src/components/filters/ModelFilters.tsx Outdated Show resolved Hide resolved

louis-jan requested a review from urmauur August 19, 2025 16:46

louis-jan assigned urmauur Aug 19, 2025

louis-jan reviewed Aug 20, 2025

View reviewed changes

web-app/src/routes/hub/index.tsx Outdated Show resolved Hide resolved

kamal force-pushed the additional-filters branch from 2ee4fa2 to 311b43c Compare August 20, 2025 17:07

kamal force-pushed the additional-filters branch from 311b43c to 54bcfc5 Compare August 23, 2025 23:06

kamal changed the title ~~Support additional filters~~ feat: Support additional filters Aug 23, 2025

kamal force-pushed the additional-filters branch 2 times, most recently from cc12eec to 774f48f Compare August 29, 2025 16:11

kamal force-pushed the additional-filters branch from 774f48f to 9a55f8e Compare September 9, 2025 23:02

urmauur approved these changes Sep 17, 2025

View reviewed changes

kamal added 4 commits September 30, 2025 15:50

Support additional filters

a080c57

Add Vision as a filter

fa3ec80

Don't hide the filter dropdown when search term is present

ee2ee34

Update tests

2598f97

kamal force-pushed the additional-filters branch from c14fae1 to 2598f97 Compare September 30, 2025 23:21

Copilot AI review requested due to automatic review settings September 30, 2025 23:21

Copilot AI reviewed Sep 30, 2025

View reviewed changes

urmauur closed this Nov 5, 2025

github-project-automation bot moved this to Done in Jan Nov 5, 2025

feat: Support additional filters #6213

feat: Support additional filters #6213

Uh oh!

Conversation

kamal commented Aug 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Describe Your Changes

Fixes Issues

Self Checklist

Uh oh!

ellipsis-dev bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

0rzech commented Aug 23, 2025

Uh oh!

0rzech commented Aug 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

kamal commented Aug 23, 2025

Uh oh!

0rzech commented Aug 23, 2025

Uh oh!

kamal commented Aug 29, 2025

Uh oh!

urmauur commented Sep 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

kamal commented Sep 9, 2025

Uh oh!

urmauur commented Sep 17, 2025

Uh oh!

kamal commented Sep 18, 2025

Uh oh!

urmauur commented Sep 30, 2025

Uh oh!

kamal commented Sep 30, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Sep 30, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 30, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 30, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 30, 2025

Choose a reason for hiding this comment

Uh oh!

urmauur commented Nov 5, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

kamal commented Aug 18, 2025 •

edited

Loading

0rzech commented Aug 23, 2025 •

edited

Loading

urmauur commented Sep 9, 2025 •

edited

Loading