|
|
|
|
|
import gradio as gr |
|
|
|
|
|
class MobileComponents: |
|
|
""" |
|
|
Mobile-specific UI components and utilities |
|
|
""" |
|
|
|
|
|
@staticmethod |
|
|
def create_touch_friendly_button(text, icon=None, variant="secondary", size="sm"): |
|
|
return gr.Button( |
|
|
value=f"{icon} {text}" if icon else text, |
|
|
variant=variant, |
|
|
size=size, |
|
|
min_width=44, |
|
|
min_height=44 |
|
|
) |
|
|
|
|
|
@staticmethod |
|
|
def create_mobile_textarea(placeholder, max_lines=3, **kwargs): |
|
|
return gr.Textbox( |
|
|
placeholder=placeholder, |
|
|
max_lines=max_lines, |
|
|
show_label=False, |
|
|
container=False, |
|
|
**kwargs |
|
|
) |
|
|
|
|
|
@staticmethod |
|
|
def mobile_loading_indicator(): |
|
|
return gr.HTML(""" |
|
|
<div class="loading-indicator"> |
|
|
<div style="display: flex; align-items: center; gap: 10px;"> |
|
|
<div class="spinner" style=" |
|
|
width: 20px; |
|
|
height: 20px; |
|
|
border: 2px solid #f3f3f3; |
|
|
border-top: 2px solid #3498db; |
|
|
border-radius: 50%; |
|
|
animation: spin 1s linear infinite; |
|
|
"></div> |
|
|
<span>Processing...</span> |
|
|
</div> |
|
|
<style> |
|
|
@keyframes spin { |
|
|
0% { transform: rotate(0deg); } |
|
|
100% { transform: rotate(360deg); } |
|
|
} |
|
|
</style> |
|
|
</div> |
|
|
""") |
|
|
|
|
|
|
