[Bug] 加载Huggingface模型列表时的性能问题

[NriotHrreion]

📦 部署环境

Vercel

📌 软件版本

1.49.13

💻 系统环境

Windows

🌐 浏览器

Chrome

🐛 问题描述

由于Huggingface所提供的语言模型过多，在加载时会导致整个页面卡死，使用体验下降，希望能优化一下

📷 复现步骤

按照如下步骤点击：

左上角用户头像->应用设置->语言模型->展开Huggingface->获取模型列表

🚦 期望结果

在点击“获取模型列表”后，不发生明显卡顿

📝 补充信息

No response

[lobehubbot]

👀 @NriotHrreion

Thank you for raising an issue. We will investigate into the matter and get back to you as soon as possible.
Please make sure you have given us as much context as possible.
非常感谢您提交 issue。我们会尽快调查此事，并尽快回复您。 请确保您已经提供了尽可能多的背景信息。

[lobehubbot]

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

---

📦 deployment environment

Vercel

📌 Software version

1.49.3

💻 System environment

Windows

🌐 browser

Chrome

🐛 Problem description

Due to the excessive language model provided by HuggingFace, the entire page will be stuck when loading.

📷 Reapped steps

Click the following steps:

User avatar in the upper left corner-> Application Settings-> Language Model-> Expand HuggingFace-> Get Model List

🚦 expectation result

After clicking "Get Model List", there is no obvious stuttering

📝 Supplement information

_NO Response

[dosubot]

Hey @NriotHrreion! 👋 I'm here to help you with bugs, questions, and becoming a contributor. I'll assist you while we wait for a human maintainer.

To address the performance issue when loading the Huggingface model list, consider implementing the following optimizations:

1. Pagination: Implement a pagination mechanism to load models in smaller batches rather than all at once. This can help reduce the initial load time and prevent the page from freezing. The application already uses VirtuosoGrid for efficient rendering of large datasets, which could be adapted for this purpose ^[1].

2. Asynchronous Loading: Ensure that the model list is fetched asynchronously using the fetch API with await, which is already in place. This allows the UI to remain responsive while the data is being loaded ^[2].

3. Limit Fetch Size: Consider limiting the number of models fetched from the Huggingface API at once, if possible, to reduce the data load.

4. Caching: Implement a caching mechanism to store the fetched model list temporarily, reducing the need to re-fetch the data on subsequent requests.

These strategies can help improve the user experience by minimizing load times and preventing the page from becoming unresponsive.

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Other}