search

gradio-app / gradio

Build and share delightful machine learning apps, all in Python. 🌟 Star to support our work!
http://www.gradio.app
Apache License 2.0
34.05k stars 2.59k forks source link

Adding `max_length` parameter to `gr.TextBox()` #9145

Closed WH-Yoshi closed 2 months ago

WH-Yoshi commented 3 months ago

Is your feature request related to a problem? Please describe.
No problem related, just a useful feature in my opinion.

Describe the solution you'd like
The "solution" could be useful for some people, such as me :) My request is a parameter that applies a maximum of characters we can put into an interactive textbox. I tried with event listeners but the component refreshes at every character we put so it becomes quite a mess. I know that HTML as a built-in maxlenght attribute, maybe add this one to the textarea if we ask for the parameter?

Additional context
Can't type 10 here thanks to maxlenght="20" in <textarea> image

abidlabs commented 3 months ago

Hi @WH-Yoshi makes sense. We could add this to our roadmap, though it'll likely take time as we are focused on other things at the moment. Would like to open a PR for this? If so, we are happy to review and provide feedback

WH-Yoshi commented 3 months ago

I'm happy to help

WH-Yoshi commented 3 months ago

HI @abidlabs, I'm reading the source code and I'm trying to figure out how everything works. I found the svelte file and modified it to try it, but I might need a "first steps" guide to test it locally. Thanks !

abidlabs commented 3 months ago

To test it locally, you can run pnpm dev to run the frontend server in reload mode. See here: https://github.com/gradio-app/gradio/blob/main/CONTRIBUTING.md#-run-a-gradio-app -- lmk if you have any questions!

WH-Yoshi commented 2 months ago

Sorry to come again, I found how to change the web page thanks to a svelte parameter, if I put a default value on Textbox.svelte it works. Now, I was searching to understand how the python textbox component would communicate its values with the svelte component, I couldn't find anything besides a certain api_info in the many Typescripts, that seems to work as an intermediary between the two languages. Do you have any clues to give?

abidlabs commented 2 months ago

Great question @WH-Yoshi -- if you add a parameter in the component's Python gr.Textbox constructor (and save it as an attribute of the class: self.max_length = max_length, then it will automatically be passed into the Svelte component as a prop)