Optimize Web UI for mobile: fix logo overlap and responsive layout
This commit is contained in:
ScrAIbe Admin
+63
-33
@@ -9,59 +9,89 @@
|
||||
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;700&display=swap" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
.header-container {{
|
||||
.header-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
padding-top: 30px;
|
||||
}}
|
||||
gap: 24px;
|
||||
padding: 24px 16px 16px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.logo-container {{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 20px;
|
||||
transform: translateY(-50%);
|
||||
width: 300px;
|
||||
}}
|
||||
.logo-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.logo {{
|
||||
width: 35%;
|
||||
.logo {
|
||||
max-width: 160px;
|
||||
height: auto;
|
||||
}}
|
||||
}
|
||||
|
||||
.header-title {{
|
||||
.header-title {
|
||||
font-family: 'Cormorant Garamond', serif;
|
||||
font-size: 50px !important;
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
color: {accent_color};
|
||||
margin: 0;
|
||||
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: "";
|
||||
position: absolute;
|
||||
height: 2px;
|
||||
width: 80%;
|
||||
background-color: {accent_color};
|
||||
left: 10%;
|
||||
}}
|
||||
}
|
||||
|
||||
.header-title::before {{
|
||||
top: 0.5em;
|
||||
}}
|
||||
.header-title::before {
|
||||
top: 0.4em;
|
||||
}
|
||||
|
||||
.header-title::after {{
|
||||
bottom: 0.5em;
|
||||
}}
|
||||
.header-title::after {
|
||||
bottom: 0.4em;
|
||||
}
|
||||
|
||||
p, h2 {{
|
||||
font-size: 16px;
|
||||
margin: 10px 0;
|
||||
line-height: 1.4;
|
||||
}}
|
||||
.header-description {
|
||||
text-align: center;
|
||||
padding: 16px 16px 0;
|
||||
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>
|
||||
</head>
|
||||
<body>
|
||||
@@ -73,11 +103,11 @@
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div style="text-align: center; padding: 20px 10%;">
|
||||
<div class="header-description">
|
||||
<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.
|
||||
</p>
|
||||
<h2 style="font-weight: bold; color: {accent_color};">Start your transcription below.</h2>
|
||||
<h2>Start your transcription below.</h2>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+40
-6
@@ -112,20 +112,35 @@ 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"),
|
||||
@@ -133,12 +148,13 @@ def create_app():
|
||||
],
|
||||
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(
|
||||
|
||||
Reference in New Issue
Block a user