Update app.py

app.py

@@ -3,93 +3,136 @@ import pickle
 import re
 import numpy as np
 
-# ✅ Load model and vectorizer
-with open("models/vectorizer.pkl", "rb") as f:
-    vectorizer = pickle.load(f)
+# ✅ Page Config
+st.set_page_config(page_title="Stack Overflow Tags Predictor", layout="wide")
 
-with open("models/tag_predictor.pkl", "rb") as f:
-    model = pickle.load(f)
-
-# ✅ Streamlit page configuration
-st.set_page_config(page_title="Stack Overflow Tags Predictor", layout="centered")
-
-# ✅ Custom CSS for better UI
+# ✅ Enhanced CSS for a modern UI
 st.markdown("""
     <style>
-    .main {
-        background-color: #f0f2f6;
+    body {
+        background: linear-gradient(to right, #e3f2fd, #ffffff);
+    }
+
+    .main-container {
+        max-width: 850px;
+        margin: auto;
         padding: 2rem;
-        border-radius: 10px;
+        border-radius: 16px;
+        background: rgba(255, 255, 255, 0.9);
+        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
+    }
+
+    .title-text {
+        font-size: 2.4rem;
+        font-weight: bold;
+        text-align: center;
+        color: #1e3a8a;
+        margin-bottom: 0.5rem;
     }
-    .title {
-        color: #1f2937;
-        font-size: 2rem;
+
+    .description-text {
+        font-size: 1.1rem;
         text-align: center;
+        color: #333;
+        margin-bottom: 2rem;
+    }
+
+    .stTextInput input, .stTextArea textarea {
+        border-radius: 8px;
+        padding: 12px;
+        border: 1px solid #ccc;
+        background-color: #fafafa;
     }
-    .tag-title {
-        color: #111827;
+
+    .stButton button {
+        background: linear-gradient(to right, #1e88e5, #1976d2);
+        color: white;
+        border-radius: 8px;
+        padding: 0.6rem 1.4rem;
         font-weight: 600;
+        transition: 0.3s ease;
+        border: none;
     }
-    .predicted-tag {
-        background-color: #d1fae5;
-        color: #065f46;
-        padding: 0.25rem 0.75rem;
-        border-radius: 1rem;
-        margin: 0.25rem;
+
+    .stButton button:hover {
+        background: linear-gradient(to right, #1565c0, #0d47a1);
+    }
+
+    .tag {
         display: inline-block;
+        margin: 5px 6px 0 0;
+        background-color: #0ea5e9;
+        padding: 6px 14px;
+        border-radius: 20px;
+        font-size: 0.85rem;
+        color: white;
+        font-weight: 500;
+    }
+
+    .result-container {
+        text-align: center;
+        margin-top: 2rem;
     }
     </style>
 """, unsafe_allow_html=True)
 
-st.markdown('<div class="main">', unsafe_allow_html=True)
-st.markdown('<h1 class="title">Stack Overflow Tags Predictor</h1>', unsafe_allow_html=True)
-
-# ✅ Input text
-user_input = st.text_area("Enter your Stack Overflow question:", height=180)
-
-# ✅ Preprocess function
+# ✅ Text Preprocessing
 def clean_text(text):
-    text = text.lower()
-    text = re.sub(r"<[^>]+>", "", text)
-    text = re.sub(r"[^\w\s]", "", text)
+    text = re.sub(r"<.*?>", " ", text)
+    text = re.sub(r"\W", " ", text)
+    text = re.sub(r"\s+", " ", text.lower()).strip()
     return text
 
-# ✅ Threshold buttons (flow style)
-st.subheader("Select Tag Threshold Value:")
-threshold = 0.50  # default
-
-cols = st.columns(9)
-thresholds = [0.10, 0.20, 0.30, 0.40, 0.50, 0.60, 0.70, 0.80, 0.90]
-
-for i, val in enumerate(thresholds):
-    if cols[i].button(f"{val:.2f}"):
-        threshold = val
-        st.session_state["selected_threshold"] = val
-
-# Use selected threshold from session state (persistent)
-threshold = st.session_state.get("selected_threshold", 0.50)
-st.success(f"Selected Threshold: {threshold:.2f}")
-
-# ✅ Predict Tags
-def predict_tags(text, threshold):
-    cleaned = clean_text(text)
-    X = vectorizer.transform([cleaned])
-    probs = model.predict_proba(X)[0]
-    tags = np.array(model.classes_)
-    selected_tags = tags[probs >= threshold]
-    return selected_tags
-
-# ✅ Prediction output
-if st.button("Predict Tags"):
-    if user_input.strip() == "":
-        st.warning("Please enter a question to predict tags.")
-    else:
-        tags = predict_tags(user_input, threshold)
-        if len(tags) > 0:
-            st.markdown('<h3 class="tag-title">Predicted Tags:</h3>', unsafe_allow_html=True)
-            for tag in tags:
-                st.markdown(f'<span class="predicted-tag">{tag}</span>', unsafe_allow_html=True)
+# ✅ Load Pickled Artifacts
+@st.cache_resource
+def load_artifacts():
+    with open("model12.pkl", "rb") as f:
+        model = pickle.load(f)
+    with open("tfidf12.pkl", "rb") as f:
+        vectorizer = pickle.load(f)
+    with open("mlb12.pkl", "rb") as f:
+        mlb = pickle.load(f)
+    return model, vectorizer, mlb
+
+model, vectorizer, mlb = load_artifacts()
+
+# ✅ UI Container
+with st.container():
+    st.markdown("<div class='main-container'>", unsafe_allow_html=True)
+
+    st.markdown("<div class='title-text'>🔖 Stack Overflow Tags Predictor</div>", unsafe_allow_html=True)
+    st.markdown("<div class='description-text'>Enter your question title and description to generate the most relevant tags using Machine Learning.</div>", unsafe_allow_html=True)
+
+    with st.form(key="tag_prediction_form"):
+        title = st.text_input("📝 Enter Question Title")
+        body = st.text_area("📄 Enter Question Description", height=180)
+        threshold = st.slider("🔧 Tag Confidence Threshold", min_value=0.1, max_value=0.9, value=0.3, step=0.05)
+        submitted = st.form_submit_button("🔍 Predict Tags")
+
+    if submitted:
+        if not title.strip() or not body.strip():
+            st.warning("⚠️ Please fill in both the title and description.")
         else:
-            st.info("No tags matched the selected threshold.")
+            with st.spinner("🔍 Predicting the most relevant tags..."):
+                input_text = clean_text(title + " " + body)
+                X_input = vectorizer.transform([input_text])
+
+                try:
+                    y_prob = model.predict_proba(X_input)
+                    y_pred = (y_prob >= threshold).astype(int)
+                except AttributeError:
+                    y_pred = model.predict(X_input)
+
+                predicted_tags = mlb.inverse_transform(y_pred)
+
+            with st.container():
+                st.markdown("<div class='result-container'>", unsafe_allow_html=True)
+                if predicted_tags and predicted_tags[0]:
+                    st.success("✅ Tags Predicted Successfully!")
+                    tag_html = "".join([f"<span class='tag'>{tag}</span>" for tag in predicted_tags[0]])
+                    st.markdown(tag_html, unsafe_allow_html=True)
+                else:
+                    st.info("🤔 No tags predicted. Try refining your input or lowering the threshold.")
+                st.markdown("</div>", unsafe_allow_html=True)
 
-st.markdown('</div>', unsafe_allow_html=True)
+    st.markdown("</div>", unsafe_allow_html=True)