import gradio as gr with gr.Blocks() as demo: name = gr.Textbox(label="الاسم على البطاقة") number = gr.Textbox(label="رقم البطاقة") expiry = gr.Textbox(label="تاريخ الانتهاء (MM/YY)") def update_card(n, num, exp): html = f""" <div class="card"> <div class="chip"></div> <div class="card-number">{num or '#### #### #### ####'}</div> <div class="card-info"> <div><div class="label">الاسم</div><div class="value">{n or '----'}</div></div> <div><div class="label">انتهاء</div><div class="value">{exp or 'MM/YY'}</div></div> </div> <div class="visa-logo">VISA</div> </div> """ return html card_display = gr.HTML(value=update_card(None, None, None)) name.change(lambda n, num, exp: update_card(n, num, exp), inputs=[name, number, expiry], outputs=card_display) number.change(lambda n, num, exp: update_card(n, num, exp), inputs=[name, number, expiry], outputs=card_display) expiry.change(lambda n, num, exp: update_card(n, num, exp), inputs=[name, number, expiry], outputs=card_display) demo.launch() - Follow Up Deployment
verified