Update app.py

app.py

@@ -1,40 +1,53 @@
 import gradio as gr
 from transformers import pipeline
 
-# Load Question Answering Pipelines
-qa_models = {
-    "🤖 DistilBERT (SQuAD)": pipeline("question-answering", model="distilbert-base-uncased-distilled-squad"),
-    "🌱 TinyRoBERTa (SQuAD2)": pipeline("question-answering", model="deepset/tinyroberta-squad2"),
-    "📘 BERT Base (SQuAD)": pipeline("question-answering", model="bert-base-uncased", tokenizer="bert-base-uncased")
-}
-
-# Inference Function
-def answer_question(question, context, model_name):
-    model = qa_models[model_name]
-    result = model(question=question, context=context)
-    return result["answer"]
-
-# Gradio UI
+# Load QA pipelines (lightweight, free models)
+qa_model_1 = pipeline("question-answering", model="distilbert-base-cased-distilled-squad")
+qa_model_2 = pipeline("question-answering", model="deepset/tinyroberta-squad2")
+qa_model_3 = pipeline("question-answering", model="bert-base-uncased")
+
+def answer_question(question, context, model_choice):
+    if model_choice == "🤖 DistilBERT":
+        return qa_model_1(question=question, context=context)["answer"]
+    elif model_choice == "🧠 TinyRoBERTa":
+        return qa_model_2(question=question, context=context)["answer"]
+    elif model_choice == "📚 BERT Base":
+        return qa_model_3(question=question, context=context)["answer"]
+
 with gr.Blocks() as demo:
-    gr.Markdown("<h1 style='text-align: center; color: darkorange; font-weight: bold;'>Question Answering with Lightweight LLMs</h1>")
-    gr.Markdown("<div style='text-align: center;'>Ask questions based on the provided context using free LLMs.</div>")
-    
+    # Inject light orange background and dark orange bold heading via HTML
+    gr.HTML("""
+        <style>
+            body {
+                background-color: #FFF3E0; /* light orange */
+            }
+            h1 {
+                color: #E65100;  /* dark orange */
+                font-weight: bold;
+                text-align: center;
+            }
+            footer {
+                text-align: center;
+                margin-top: 20px;
+                font-weight: bold;
+                color: #5D4037;
+            }
+        </style>
+        <h1>Question Answering with Lightweight LLMs</h1>
+    """)
+
     with gr.Row():
         with gr.Column():
-            context = gr.Textbox(label="📄 Context", lines=6, placeholder="Paste your paragraph here...")
-            question = gr.Textbox(label="❓ Question", placeholder="Type your question here...")
-            model_choice = gr.Radio(
-                ["🤖 DistilBERT (SQuAD)", "🌱 TinyRoBERTa (SQuAD2)", "📘 BERT Base (SQuAD)"],
-                label="Select a Model"
-            )
-            submit = gr.Button("Get Answer")
+            question = gr.Textbox(label="Enter your question")
+            context = gr.Textbox(label="Enter context or passage", lines=6)
+            model_choice = gr.Radio(["🤖 DistilBERT", "🧠 TinyRoBERTa", "📚 BERT Base"], label="Choose a model")
+            button = gr.Button("Get Answer")
 
         with gr.Column():
-            answer = gr.Textbox(label="✅ Answer", lines=2)
+            output = gr.Textbox(label="Answer", lines=3)
+
+    button.click(fn=answer_question, inputs=[question, context, model_choice], outputs=output)
 
-    submit.click(fn=answer_question, inputs=[question, context, model_choice], outputs=answer)
-    
-    gr.Markdown("<div style='text-align: center; color: darkorange;'>Designed by Mehak Mazhar</div>")
+    gr.HTML("<footer>Designed by Mehak Mazhar</footer>")
 
-# Set background color via CSS
-demo.launch(css="body { background-color: #FFF3E0; }")
+demo.launch()