Spaces:
Running
Running
File size: 3,129 Bytes
9689f33 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 | import gradio as gr
import modelscope_studio.components.antd as antd
import modelscope_studio.components.base as ms
def on_submit(_form):
print(_form) # the Form Component will automatically collect the form data
def bind_action_event(action):
def on_action():
return gr.update(form_action=action)
return on_action
with gr.Blocks() as demo:
with ms.Application():
with antd.ConfigProvider():
with antd.Card(title="Out of the Form"):
submit_btn = antd.Button("Submit", type="primary")
reset_btn = antd.Button("Reset")
validate_btn = antd.Button("Validate")
with antd.Form(label_col=dict(span=8),
wrapper_col=dict(span=16)) as form:
with antd.Form.Item(
form_name="username",
label="Username",
rules=[{
"required": True,
"message": 'Please input your username!'
}, {
"pattern":
"^[a-zA-Z0-9]+$",
"message":
"Username can only contain letters and numbers!"
}, {
"min":
6,
"message":
"Username must be at least 6 characters long!"
}, {
"max":
20,
"message":
"Username must be at most 20 characters long!"
}]):
antd.Input()
with antd.Form.Item(
form_name="password",
label="Password",
rules=[
{
"required": True,
"message": 'Please input your password!'
},
{
# custom validator with javascript function
"validator":
"""(rule, value, cb) => {
if (value !== '123') {
cb('Password must be "123"')
}
cb()
}"""
}
]):
antd.Input.Password()
with antd.Form.Item(wrapper_col=dict(offset=8, span=16)):
antd.Button("Submit", type="primary", html_type="submit")
form.finish(on_submit, inputs=[form])
submit_btn.click(bind_action_event("submit"), outputs=[form])
reset_btn.click(bind_action_event("reset"), outputs=[form])
validate_btn.click(bind_action_event("validate"), outputs=[form])
if __name__ == "__main__":
demo.queue().launch()
|