hypertrons / hypertrons-crx

A browser extension for insights into GitHub, Gitee projects and developers.
https://hypercrx.cn
Apache License 2.0
357 stars 102 forks source link

[Refactor] Beautify the OSS-GPT interface style #883

Open Xsy41 opened 2 months ago

Xsy41 commented 2 months ago

Description

At present, there are plans to beautify the interface of OSS-GPT, and the following specific beautification proposals are proposed. We also welcome your comments.

  1. The font size of the page at the beginning of GPT is different from that of the page after GPT. Just entered the page found that the font is a little large, and then the font becomes smaller.

  2. Make the distinction of the bubble box more obvious, such as the color of the bubble box is gray for the question, and the color of the answer is black.

  3. The Q&A interface feels that the questioner's profile picture can be removed. Because the profile picture is a little slow to load, there is no questioner profile picture, can make the page more information? image

  4. Change the background color of the answer output code to the same color as the page.

  5. The OSS-GPT on the top can be made smaller because there are too many black edges to show more information.

  6. Can the background be made transparent? You can let some light in, blur the background, but it may not be as beautiful as it is now, so try it first.

  7. This return to the bottom button is a little simple, or put a button directly, a downward icon appears more intuitive. image

  8. Put both model switching and clearing the current session on OSS-GPT.

  9. When there are words in the input field, make a small animation and turn this arrow up. image

  10. Make the OSS-GPT interface more flexible, freely drag, zoom in and out on the page.

wangyantong2000 commented 2 months ago

Previously, I uploaded a demo without detailed design for both font and page styles. My suggestion is that you first take a look at the current implementation code and the components used. Tracing back to the open-source components used, the functionality and callbacks of some components, and the difficulty level of your redevelopment. Draw an understanding and judgment.

Xsy41 commented 2 months ago

My suggestion is that you first take a look at the current implementation code and the components used. Tracing back to the open-source components used, the functionality and callbacks of some components, and the difficulty level of your redevelopment. Draw an understanding and judgment.

Thanks for the heads-up. Okay, I'll check it out.