From 8ecae8f648255264c9ab9b7301806c722be995ea Mon Sep 17 00:00:00 2001 From: ScrAIbe Admin Date: Sun, 14 Jun 2026 19:00:40 +0000 Subject: [PATCH] Optimize Web UI for mobile: fix logo overlap and responsive layout --- misc/header.html | 102 ++++++++++++++++++++++++++++++----------------- scraibe/webui.py | 62 +++++++++++++++++++++------- 2 files changed, 114 insertions(+), 50 deletions(-) diff --git a/misc/header.html b/misc/header.html index 0a63197..d690be2 100644 --- a/misc/header.html +++ b/misc/header.html @@ -9,59 +9,89 @@ @@ -73,11 +103,11 @@ -
+

Upload, record, or provide a video with audio for transcription. Our toolkit is designed to transcribe content from multiple languages accurately. The integrated speaker diarisation feature identifies different speakers, ensuring a smooth transcription experience. For optimal results, indicate the number of speakers and the original language of the content.

-

Start your transcription below.

+

Start your transcription below.

diff --git a/scraibe/webui.py b/scraibe/webui.py index b9dad14..abdb983 100644 --- a/scraibe/webui.py +++ b/scraibe/webui.py @@ -112,33 +112,49 @@ def create_app(): # Build Gradio interface with gr.Blocks( title=webui_title, + css=""" + /* Responsive layout: stack columns on smaller screens */ + @media (max-width: 850px) { + .gradio-container { + max-width: 100% !important; + } + #main-row .gr-row { + flex-direction: column !important; + } + #main-row .gr-col { + width: 100% !important; + max-width: 100% !important; + flex: none !important; + } + } + """, ) as app: # Header if header_html: gr.HTML(header_html) - with gr.Row(): - with gr.Column(scale=2): + with gr.Row(elem_id="main-row"): + with gr.Column(): audio_input = gr.Audio( label="Upload or record audio", type="filepath", ) - with gr.Row(): - task_choice = gr.Radio( - choices=[ - ("Transcribe", "transcribe"), - ("Transcript & Summarize", "transcript_and_summarize"), - ], - value="transcribe", - label="Task", - ) + task_choice = gr.Radio( + choices=[ + ("Transcribe", "transcribe"), + ("Transcript & Summarize", "transcript_and_summarize"), + ], + value="transcribe", + label="Task", + container=True, + ) identify_speakers = gr.Checkbox( label="Identify speakers (best effort using AI)", value=False, - info="If enabled, AI will attempt to infer real names for speakers and replace Speaker 1/2/etc. in the transcript." + info="If enabled, AI will attempt to infer real names for speakers and replace Speaker 1/2/etc. in the transcript.", ) with gr.Row(): @@ -151,7 +167,6 @@ def create_app(): precision=0, ) - # Email is required in async mode email_to = gr.Textbox( label="Your email address (required)", placeholder="e.g. your.name@example.com", @@ -164,7 +179,7 @@ def create_app(): submit_btn = gr.Button("Submit for transcription", variant="primary") - with gr.Column(scale=3): + with gr.Column(): status_text = gr.Textbox( label="Status", lines=6, @@ -292,6 +307,25 @@ def create_app(): body {{ font-family: Arial, sans-serif; }} + /* Mobile-friendly adjustments */ + @media (max-width: 700px) {{ + .gradio-container {{ + padding: 0 4px !important; + }} + .gradio-container .gr-row {{ + flex-direction: column !important; + gap: 8px !important; + }} + .gradio-container .gr-col {{ + width: 100% !important; + max-width: 100% !important; + flex: none !important; + }} + .gradio-container button.primary {{ + width: 100% !important; + box-sizing: border-box; + }} + }} """ app.launch(