Update app.py

app.py

@@ -1,5 +1,5 @@
 import os
-import streamlit as st
+import gradio as gr
 from groq import Groq
 from googletrans import Translator
 import asyncio
@@ -51,84 +51,79 @@ def get_chatbot_response(user_message):
     
     return response.choices[0].message.content
 
-# Streamlit App Interface
-st.set_page_config(page_title="AI-Powered Opportunity Finder", page_icon=":bulb:", layout="wide")
-st.title("AI-Powered Opportunity Finder for Youth")
-
-# Custom CSS for improving the UI
-st.markdown("""
-    <style>
-        .css-1v0mbdj {padding-top: 30px; font-size: 1.5rem;}
-        .css-1wa3m6h {padding: 10px; background-color: #f0f0f5;}
-        .css-1w4t6pm {border: 1px solid #ccc; padding: 10px; background-color: #fff;}
-        .css-1f4y1re {font-size: 1.2rem;}
-    </style>
-""", unsafe_allow_html=True)
-
-# Sidebar for input fields
-st.sidebar.header("Provide your details to find opportunities")
-
-# Collect user input for interests, skills, and location in the sidebar
-interests = st.sidebar.text_input("Your Interests (e.g., AI, Robotics, Software Engineering):")
-skills = st.sidebar.text_input("Your Skills (e.g., Python, Data Science, Web Development):")
-location = st.sidebar.text_input("Your Location (e.g., Gujrat, Pakistan):")
-
-# Language selection
-languages = {
-    "English": "English",
-    "Spanish": "Spanish",
-    "French": "French",
-    "German": "German",
-    "Italian": "Italian",
-    "Chinese": "Chinese",
-    "Japanese": "Japanese",
-    "Urdu": "Urdu"  # Full word for Urdu
-}
-
-selected_language = st.sidebar.selectbox("Select your preferred language:", list(languages.keys()))
-
-# Container to display results
-results_container = st.container()
+# Gradio interface
+with gr.Blocks(css="""
+    .gradio-container {
+        background-color: #f0f0f5;
+        color: #333;
+        font-family: 'Roboto', sans-serif;
+        padding: 20px;
+        border-radius: 10px;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    }
+    .gradio-container .button {
+        background-color: #007bff;
+        color: white;
+        padding: 12px;
+        font-size: 16px;
+        border-radius: 10px;
+        border: none;
+    }
+    .gradio-container .button:hover {
+        background-color: #0056b3;
+    }
+    .gradio-container .textbox {
+        font-size: 16px;
+        padding: 12px;
+        border-radius: 10px;
+        border: 1px solid #ccc;
+    }
+""") as demo:
+    gr.Markdown("""
+        <h1 style="text-align:center;">AI-Powered Opportunity Finder for Youth</h1>
+        <p style="text-align:center;">Find scholarships, internships, online courses, and career advice based on your interests, skills, and location.</p>
+    """)
+    
+    # Sidebar for input fields
+    with gr.Column():
+        gr.Markdown("### Provide your details to find opportunities")
 
-# Chatbot container
-chatbot_container = st.container()
+        interests = gr.Textbox(label="Your Interests (e.g., AI, Robotics, Software Engineering):")
+        skills = gr.Textbox(label="Your Skills (e.g., Python, Data Science, Web Development):")
+        location = gr.Textbox(label="Your Location (e.g., Gujrat, Pakistan):")
 
-# Button to fetch opportunities
-if st.sidebar.button("Find Opportunities"):
-    if interests and skills and location:
-        with st.spinner("Fetching opportunities..."):
-            # Fetch recommendations using the Groq API
-            opportunities = get_opportunities(interests, skills, location)
-            
-            # Run the async translate function and get the translated text
-            translated_opportunities = asyncio.run(translate_text(opportunities, languages[selected_language]))
+        languages = gr.Dropdown(
+            label="Select your preferred language:",
+            choices=["English", "Spanish", "French", "German", "Italian", "Chinese", "Japanese", "Urdu"],
+            value="English"
+        )
+        
+        find_button = gr.Button("Find Opportunities")
+    
+    # Chatbot Section
+    with gr.Column():
+        gr.Markdown("### AI Chatbot")
+        user_message = gr.Textbox(label="Ask anything to the chatbot:", lines=2)
+        chatbot_output = gr.Textbox(label="Chatbot Response:", interactive=False)
+    
+    # Function to handle finding opportunities
+    def find_opportunities_and_chat(interests, skills, location, language, user_message):
+        # Fetch opportunities
+        opportunities = get_opportunities(interests, skills, location)
+        translated_opportunities = asyncio.run(translate_text(opportunities, language))
+        
+        # Get chatbot response
+        chatbot_response = get_chatbot_response(user_message) if user_message else "Ask me anything!"
         
-        # Display the opportunities
-        results_container.subheader("Recommended Opportunities")
-        results_container.write(translated_opportunities)
-    else:
-        st.sidebar.error("Please fill all fields.")
+        return translated_opportunities, chatbot_response
 
-# Chatbot functionality
-with chatbot_container:
-    st.subheader("AI Chatbot")
-    user_message = st.text_area("Ask anything to the chatbot:", "")
-    if user_message:
-        with st.spinner("Getting response from AI..."):
-            chatbot_response = get_chatbot_response(user_message)
-            st.write(f"**Chatbot Response**: {chatbot_response}")
+    # Connect the button to the function
+    find_button.click(
+        find_opportunities_and_chat,
+        inputs=[interests, skills, location, languages, user_message],
+        outputs=[gr.Textbox(label="Recommended Opportunities"), chatbot_output]
+    )
 
-# Add a footer with contact info and clickable links
-st.markdown("""
-    <footer style="text-align:center; padding: 20px; font-size: 1rem; background-color: #f0f0f5;">
-        <p>Powered by Groq, Google Translate, and Streamlit</p>
-        <p>For more opportunities, visit:</p>
-        <ul style="list-style-type:none; padding: 0;">
-            <li><a href="https://www.groq.com" target="_blank">Groq - AI Solutions</a></li>
-            <li><a href="https://www.scholarships.com" target="_blank">Scholarships.com</a></li>
-            <li><a href="https://www.coursera.org" target="_blank">Coursera - Online Courses</a></li>
-            <li><a href="https://www.linkedin.com/jobs" target="_blank">LinkedIn Jobs</a></li>
-        </ul>
-        <p>Contact: [email protected]</p>
-    </footer>
-""", unsafe_allow_html=True)
+# Launch the Gradio app
+if __name__ == "__main__":
+    demo.launch()