pages/Prediction.py

import streamlit as st
import pickle
import numpy as np

# Set Page Configuration
st.set_page_config(page_title="What to Plant? Let the Soil Decide!", layout="centered")

# Function to set background image and styles
def set_bg():
    bg_style = """
    <style>
    .stApp {
        background-image: url("https://huggingface.co/spaces/varshitha22/Crop_Recommendation/resolve/main/sunrise1.jpg");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-attachment: fixed;
    }
    /* Label Styling */
    .stNumberInput label {
        font-size: 20px;
        color: white !important;
        font-weight: bold;
    }
    /* Input Box Styling */
    .stNumberInput>div>div>input {
        width: 80%;
        height: 40px;
        background-color: rgba(255, 255, 255, 0.95);
        border-radius: 5px;
        border: none;
        padding-left: 10px;
        font-size: 16px;
    }
    /* Submit Button Styling */
    .stButton>button {
        background-color: #006400;
        color: white;
        font-size: 22px;
        padding: 12px;
        border-radius: 8px;
        border: none;
        cursor: pointer;
        width: 60%;
        margin-top: 15px;
    }
    .stButton>button:hover {
        background-color: #004d00;
    }
    /* Output Message Styling */
    .success-message {
        text-align: center;
        font-size: 45px;
        color: yellow;
        font-weight: bold;
        text-shadow: 3px 3px 5px black;
    }
    /* Error Message Styling */
    .error-message {
        text-align: center;
        font-size: 45px;
        color: light blue;
        font-weight: bold;
        text-shadow: 2px 2px 3px black;
    }
    </style>
    """
    st.markdown(bg_style, unsafe_allow_html=True)

# Apply the background styling
set_bg()

# Load Model
with open("model.pkl", "rb") as file:
    model = pickle.load(file)

# **Fixing Title Color**
st.markdown(
    """
    <h1 style='text-align: center; font-size: 45px; 
               font-weight: bold; color: #32CD32; 
               text-shadow: 4px 4px 8px black;'>
    What to Plant? Let the Soil Decide!
    </h1>
    """, 
    unsafe_allow_html=True
)

# Display range details for input fields
st.markdown(
    """
    <div style="border: 2px solid #32CD32; border-radius: 10px; padding: 10px; background-color: rgba(50, 205, 50, 0.2);">
        <h3 style='text-align: center; color: #FFFFFF;'>🌿 Input Guidelines 🌿</h3>
        <ul style="font-size: 18px; color:white;">
            <li><b>NITROGEN:</b> 0 - 300</li>
            <li><b>PHOSPHOROUS:</b> 0 - 200</li>
            <li><b>POTASSIUM:</b> 0 - 200</li>
            <li><b>TEMPERATURE:</b> 0.0 - 100.0 °C</li>
            <li><b>HUMIDITY:</b> 0.0 - 100.0 %</li>
            <li><b>PH:</b> 0.0 - 14.0</li>
            <li><b>RAINFALL:</b> 0.0 - 500.0 mm</li>
        </ul>
    </div>
    """,
    unsafe_allow_html=True
)







# Input Fields
with st.container():
    nitrogen = st.number_input("NITROGEN", min_value=0, max_value=300, value=104, step=1)
    phosphorus = st.number_input("PHOSPHOROUS", min_value=0, max_value=200, value=18, step=1)
    potassium = st.number_input("POTASSIUM", min_value=0, max_value=200, value=30, step=1)
    temperature = st.number_input("TEMPERATURE", min_value=0.0, max_value=100.0, value=23.6, step=0.1)
    humidity = st.number_input("HUMIDITY", min_value=0.0, max_value=100.0, value=60.3, step=0.1)
    ph = st.number_input("PH", min_value=0.0, max_value=14.0, value=6.7, step=0.1)
    rainfall = st.number_input("RAINFALL", min_value=0.0, max_value=500.0, value=140.91, step=0.1)

# Predict and Display Output
if st.button("Submit"):
    try:
        # Prepare input data for prediction
        input_data = np.array([[nitrogen, phosphorus, potassium, temperature, humidity, ph, rainfall]])
        predicted_crop = model.predict(input_data)[0]

        # Display result in larger, bold text
        st.markdown(
            f"""
            <p style='text-align: center; font-size: 55px; 
                      font-weight: bold; color: Gold; 
                      text-shadow: 5px 5px 8px black;'>
            🌾 Recommended Crop: {predicted_crop} 🌱
            </p>
            """,
            unsafe_allow_html=True
        )
    except ValueError:
        st.markdown(
            "<p class='error-message'>⚠️ Error: Please enter valid numerical values.</p>",
            unsafe_allow_html=True
        )