admin/scribe
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

Optimize Web UI for mobile: fix logo overlap and responsive layout
Mirror and run GitLab CI / build (push) Has been cancelled
Details
Ruff / ruff (push) Has been cancelled
Details

Browse Source
This commit is contained in:
ScrAIbe Admin
2026-06-14 19:00:40 +00:00
parent 49e999f0ee
commit 8ecae8f648
2 changed files with 114 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
misc/header.html
+63 -33
View File
@@ -9,59 +9,89 @@
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;700&display=swap" rel="stylesheet">
<style> <style>
.header-container {{ .header-container {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
position: relative; gap: 24px;
padding-top: 30px; padding: 24px 16px 16px;
}} box-sizing: border-box;
}
.logo-container {{ .logo-container {
position: absolute; display: flex;
top: 50%; align-items: center;
right: 20px; flex-shrink: 0;
transform: translateY(-50%); }
width: 300px;
}}
.logo {{ .logo {
width: 35%; max-width: 160px;
height: auto; height: auto;
}} }
.header-title {{ .header-title {
font-family: 'Cormorant Garamond', serif; font-family: 'Cormorant Garamond', serif;
font-size: 50px !important; font-size: 32px;
font-weight: bold; font-weight: bold;
color: {accent_color}; color: {accent_color};
margin: 0; margin: 0;
position: relative; position: relative;
padding: 0.5em 0; padding: 0.4em 0;
}} line-height: 1.2;
}
.header-title::before, .header-title::after {{ .header-title::before,
.header-title::after {
content: ""; content: "";
position: absolute; position: absolute;
height: 2px; height: 2px;
width: 80%; width: 80%;
background-color: {accent_color}; background-color: {accent_color};
left: 10%; left: 10%;
}} }
.header-title::before {{ .header-title::before {
top: 0.5em; top: 0.4em;
}} }
.header-title::after {{ .header-title::after {
bottom: 0.5em; bottom: 0.4em;
}} }
p, h2 {{ .header-description {
font-size: 16px; text-align: center;
margin: 10px 0; padding: 16px 16px 0;
line-height: 1.4; max-width: 700px;
}} margin: 0 auto;
}
.header-description p,
.header-description h2 {
font-size: 14px;
margin: 8px 0;
line-height: 1.5;
}
.header-description h2 {
font-weight: bold;
color: {accent_color};
}
@media (max-width: 700px) {
.header-container {
flex-direction: column;
align-items: center;
gap: 12px;
}
.logo {
max-width: 120px;
}
.header-title {
font-size: 26px;
}
}
</style> </style>
</head> </head>
<body> <body>
@@ -73,11 +103,11 @@
</a> </a>
</div> </div>
</div> </div>
<div style="text-align: center; padding: 20px 10%;"> <div class="header-description">
<p> <p>
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. 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.
</p> </p>
<h2 style="font-weight: bold; color: {accent_color};">Start your transcription below.</h2> <h2>Start your transcription below.</h2>
</div> </div>
</body> </body>
</html> </html>
scraibe/webui.py
+40 -6
View File
@@ -112,20 +112,35 @@ def create_app():
# Build Gradio interface # Build Gradio interface
with gr.Blocks( with gr.Blocks(
title=webui_title, 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: ) as app:
# Header # Header
if header_html: if header_html:
gr.HTML(header_html) gr.HTML(header_html)
with gr.Row(): with gr.Row(elem_id="main-row"):
with gr.Column(scale=2): with gr.Column():
audio_input = gr.Audio( audio_input = gr.Audio(
label="Upload or record audio", label="Upload or record audio",
type="filepath", type="filepath",
) )
with gr.Row():
task_choice = gr.Radio( task_choice = gr.Radio(
choices=[ choices=[
("Transcribe", "transcribe"), ("Transcribe", "transcribe"),
@@ -133,12 +148,13 @@ def create_app():
], ],
value="transcribe", value="transcribe",
label="Task", label="Task",
container=True,
) )
identify_speakers = gr.Checkbox( identify_speakers = gr.Checkbox(
label="Identify speakers (best effort using AI)", label="Identify speakers (best effort using AI)",
value=False, 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(): with gr.Row():
@@ -151,7 +167,6 @@ def create_app():
precision=0, precision=0,
) )
# Email is required in async mode
email_to = gr.Textbox( email_to = gr.Textbox(
label="Your email address (required)", label="Your email address (required)",
placeholder="e.g. your.name@example.com", placeholder="e.g. your.name@example.com",
@@ -164,7 +179,7 @@ def create_app():
submit_btn = gr.Button("Submit for transcription", variant="primary") submit_btn = gr.Button("Submit for transcription", variant="primary")
with gr.Column(scale=3): with gr.Column():
status_text = gr.Textbox( status_text = gr.Textbox(
label="Status", label="Status",
lines=6, lines=6,
@@ -292,6 +307,25 @@ def create_app():
body {{ body {{
font-family: Arial, sans-serif; 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( app.launch(