NaanhAI / app.py
Roseco-crs
Make the app responsive by injecting a mobile friendly CSS
ec58da7
from ailab_crs import NLP_tasks_crs, Prompt_engineering_crs
import gradio as gr
from googletrans import LANGUAGES
# CSS to hide the entire footer, including "Made with Gradio", settings, and API info
hide_footer_css = """
<style>
footer, footer * {
display: none !important;
}
</style>
"""
# Mobile-friendly CSS
mobile_css = """
<style>
/* Make all inputs, textboxes, and buttons full width on small screens */
@media (max-width: 768px) {
input, textarea, button, .gr-textbox, .gr-button {
width: 100% !important;
margin: 5px 0 !important;
}
}
</style>
"""
nlp_tasks = NLP_tasks_crs()
supported_langs = list(LANGUAGES.values())
with gr.Blocks() as demo:
# Inject the mobile CSS
gr.HTML(mobile_css)
# App title
gr.Markdown("# 🧠 NaanhAI 💡")
# Inject the CSS at the top
gr.HTML(hide_footer_css)
with gr.Row():
with gr.Column():
text = gr.Textbox(label="Your Query", lines=8)
with gr.Column():
with gr.Accordion("Translation & Summarization Parameters ", open= True):
language = gr.Dropdown(choices=supported_langs, label="Select Target Language", value="french")
style = gr.Textbox(label="Choose Your Style", value="polite")
with gr.Row(scale=5):
# with gr.Column(scale=1, min_width=1):
btn = gr.Button("Q&A")
# with gr.Column(scale=2, min_width=1):
btn1 = gr.Button("Translator")
# with gr.Column(scale=2, min_width=1):
btn2 = gr.Button("Summarizer")
# with gr.Column(scale=2, min_width=1):
btn3 = gr.Button("Translator_Summarizer")
answer = gr.Textbox(label="AI Answer", lines=2)
btn.click(
fn= nlp_tasks.question_answer,
inputs= text,
outputs=answer
)
btn1.click(
fn= nlp_tasks.translator,
inputs= [text, language, style],
outputs=answer
)
btn2.click(
fn= nlp_tasks.summarization,
inputs= text,
outputs=answer
)
btn3.click(
fn= nlp_tasks.translator_summarization,
inputs= [text, language, style],
outputs=answer
)
if __name__ == "__main__":
demo.launch()