gradio app

app.py

@@ -1,34 +1,6 @@
-import streamlit as st
+import gradio as gr
 import requests
 
-# Set Streamlit theme to white
-st.set_page_config(
-    page_title="Job Search", 
-    page_icon="🧑‍💼", 
-    layout="centered",
-    initial_sidebar_state="expanded"
-)
-
-# Apply CSS to enforce a white theme
-st.markdown("""
-    <style>
-        body {
-            background-color: #ffffff;
-            color: #000000;
-        }
-        .stApp {
-            background-color: #ffffff;
-        }
-        .stTextInput, .stSelectbox, .stButton {
-            background-color: #ffffff;
-            color: #000000;
-        }
-    </style>
-""", unsafe_allow_html=True)
-
-st.title("🎯 Career Connect ")
-st.write("Find the latest job openings based on your preferences.")
-
 # API credentials
 API_KEY = "c1b9b6be0amsh11316ef9a922bdbp1789f5jsn18a0023eef11"
 API_HOST = "jsearch.p.rapidapi.com"
@@ -49,40 +21,49 @@ def get_job_openings(job_title, location, location_type, experience):
     }
 
     response = requests.get(url, headers=headers, params=querystring)
+    
     if response.status_code == 200:
-        return response.json()
-    else:
-        st.error(f"Error {response.status_code}: {response.text}")
-        return None
-
-# User inputs
-job_title = st.text_input("Enter Job Title:", placeholder="e.g., Node.js Developer")
-location = st.text_input("Enter Location:", placeholder="e.g., New York")
-location_type = st.selectbox("Location Type:", ["ANY", "ON_SITE", "REMOTE", "HYBRID"])
-experience = st.selectbox("Experience Level:", ["FULLTIME", "PARTTIME", "INTERN", "CONTRACTOR"])
+        data = response.json()
+        if data and 'data' in data:
+            jobs = data['data']
+            job_cards = ""
 
-# Button to fetch job openings
-if st.button("Search Jobs"):
-    if job_title and location:
-        with st.spinner("Fetching job openings..."):
-            data = get_job_openings(job_title, location, location_type, experience)
-            if data and 'data' in data:
-                st.success("Job Openings Retrieved!")
-                jobs = data['data']
-                
-                if jobs:
-                    for idx, job in enumerate(jobs, start=1):
-                        st.subheader(f"{idx}. {job.get('job_title', 'No Title')}")
-                        st.write(f"*Company:* {job.get('employer_name', 'Unknown')}")
-                        st.write(f"*Location:* {job.get('job_city', 'Unknown')}, {job.get('job_country', '')}")
-                        st.write(f"*Type:* {job.get('job_employment_type', 'N/A')}")
-                        st.write(f"*Posted On:* {job.get('job_posted_at_datetime_utc', 'N/A')}")
-                        st.write(f"*Deadline:* {job.get('job_offer_expiration_datetime_utc', 'N/A')}")
-                        st.write(f"[🔗 View Job Posting]({job.get('job_apply_link', '#')})")
-                        st.write("---")
-                else:
-                    st.warning("No job openings found. Please try different inputs.")
+            if jobs:
+                for job in jobs:
+                    job_cards += f"""
+                        <div style="border: 2px solid #ddd; padding: 15px; border-radius: 10px; margin-bottom: 15px; background-color: #f9f9f9;">
+                            <h3 style="color: #333;">{job.get('job_title', 'No Title')}</h3>
+                            <p style="color: #333;"><strong style="color: #333;">Company:</strong> {job.get('employer_name', 'Unknown')}</p>
+                            <p style="color: #333;"><strong style="color: #333;">Location:</strong> {job.get('job_city', 'Unknown')}, {job.get('job_country', '')}</p>
+                            <p style="color: #333;"><strong style="color: #333;">Type:</strong> {job.get('job_employment_type', 'N/A')}</p>
+                            <p style="color: #333;"><strong style="color: #333;">Posted On:</strong> {job.get('job_posted_at_datetime_utc', 'N/A')}</p>
+                            <p style="color: #333;"><strong style="color: #333;">Deadline:</strong> {job.get('job_offer_expiration_datetime_utc', 'N/A')}</p>
+                            <a href="{job.get('job_apply_link', '#')}" target="_blank" style="color: #007bff; text-decoration: none;">🔗 Apply Now</a>
+                        </div>
+                    """
+                return job_cards
             else:
-                st.warning("No job data found. Please try again.")
+                return "<p style='color: red;'>⚠️ No job openings found. Try different inputs.</p>"
+        else:
+            return "<p style='color: red;'>⚠️ No job data found. Try again.</p>"
     else:
-        st.error("Please enter both job title and location.")
+        return f"<p style='color: red;'>❌ Error {response.status_code}: {response.text}</p>"
+
+# Gradio UI
+with gr.Blocks(theme=gr.themes.Base()) as demo:
+    gr.Markdown("# 🎯 Career Connect")
+    gr.Markdown("Find the latest job openings based on your preferences.")
+
+    job_title = gr.Textbox(label="Enter Job Title", placeholder="e.g., Node.js Developer")
+    location = gr.Textbox(label="Enter Location", placeholder="e.g., New York")
+    location_type = gr.Dropdown(["ANY", "ON_SITE", "REMOTE", "HYBRID"], label="Location Type")
+    experience = gr.Dropdown(["FULLTIME", "PARTTIME", "INTERN", "CONTRACTOR"], label="Experience Level")
+    
+    submit = gr.Button("🔍 Search Jobs")
+    result = gr.HTML()
+
+    submit.click(get_job_openings, inputs=[job_title, location, location_type, experience], outputs=result)
+
+# Launch the Gradio app
+if __name__ == "__main__":
+    demo.launch()