Update app.py

app.py

@@ -17,295 +17,46 @@ st.set_page_config(
     layout="wide"
 )
 
-# ---- CUSTOM CSS STYLING ----
-st.markdown("""
-<style>
-    /* Import Google Fonts */
-    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');
-    
-    /* Global Styles */
-    .stApp {
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        font-family: 'Poppins', sans-serif;
-    }
-    
-    /* Main container */
-    .main-container {
-        background: rgba(255, 255, 255, 0.95);
-        backdrop-filter: blur(10px);
-        border-radius: 20px;
-        padding: 2rem;
-        margin: 1rem;
-        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
-        border: 1px solid rgba(255, 255, 255, 0.2);
-    }
-    
-    /* Header styling */
-    .app-header {
-        text-align: center;
-        background: linear-gradient(135deg, #667eea, #764ba2);
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-        background-clip: text;
-        font-size: 3rem;
-        font-weight: 700;
-        margin-bottom: 1rem;
-        text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
-    }
-    
-    .app-subtitle {
-        text-align: center;
-        color: #666;
-        font-size: 1.1rem;
-        font-weight: 400;
-        margin-bottom: 2rem;
-    }
-    
-    /* Sidebar styling */
-    .css-1d391kg {
-        background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
-    }
-    
-    .sidebar-content {
-        background: rgba(255, 255, 255, 0.1);
-        backdrop-filter: blur(10px);
-        border-radius: 15px;
-        padding: 1.5rem;
-        margin: 1rem 0;
-        border: 1px solid rgba(255, 255, 255, 0.2);
-    }
-    
-    .sidebar-header {
-        color: white;
-        font-size: 1.3rem;
-        font-weight: 600;
-        margin-bottom: 1rem;
-        text-align: center;
-    }
-    
-    .sidebar-text {
-        color: rgba(255, 255, 255, 0.9);
-        font-size: 0.95rem;
-        line-height: 1.6;
-    }
-    
-    /* Upload section */
-    .upload-section {
-        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
-        padding: 2rem;
-        border-radius: 20px;
-        margin: 2rem 0;
-        text-align: center;
-        box-shadow: 0 15px 30px rgba(240, 147, 251, 0.3);
-    }
-    
-    .upload-title {
-        color: white;
-        font-size: 1.5rem;
-        font-weight: 600;
-        margin-bottom: 1rem;
-    }
-    
-    /* Results section */
-    .results-container {
-        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
-        padding: 2rem;
-        border-radius: 20px;
-        margin: 1rem 0;
-        box-shadow: 0 15px 30px rgba(79, 172, 254, 0.3);
-    }
-    
-    .prediction-result {
-        background: white;
-        color: #333;
-        font-size: 2.5rem;
-        font-weight: 700;
-        text-align: center;
-        padding: 1rem;
-        border-radius: 15px;
-        margin: 1rem 0;
-        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
-        border-left: 5px solid #4facfe;
-    }
-    
-    /* Image container */
-    .image-container {
-        background: white;
-        padding: 1.5rem;
-        border-radius: 20px;
-        box-shadow: 0 10px 25px rgba(0,0,0,0.1);
-        text-align: center;
-        margin: 1rem 0;
-        border: 3px solid #667eea;
-    }
-    
-    /* Chart styling */
-    .chart-container {
-        background: white;
-        padding: 1.5rem;
-        border-radius: 20px;
-        margin-top: 1rem;
-        box-shadow: 0 10px 25px rgba(0,0,0,0.1);
-        border-left: 5px solid #f093fb;
-    }
-    
-    .chart-title {
-        color: #333;
-        font-size: 1.3rem;
-        font-weight: 600;
-        margin-bottom: 1rem;
-        text-align: center;
-    }
-    
-    /* Footer */
-    .app-footer {
-        text-align: center;
-        color: #666;
-        font-size: 1rem;
-        margin-top: 3rem;
-        padding: 2rem;
-        background: rgba(255, 255, 255, 0.1);
-        backdrop-filter: blur(10px);
-        border-radius: 15px;
-        border: 1px solid rgba(255, 255, 255, 0.2);
-    }
-    
-    /* Divider */
-    .custom-divider {
-        height: 3px;
-        background: linear-gradient(90deg, #667eea, #764ba2, #f093fb);
-        border: none;
-        border-radius: 2px;
-        margin: 2rem 0;
-    }
-    
-    /* Animation for elements */
-    .fade-in {
-        animation: fadeIn 0.6s ease-in;
-    }
-    
-    @keyframes fadeIn {
-        from { opacity: 0; transform: translateY(20px); }
-        to { opacity: 1; transform: translateY(0); }
-    }
-    
-    /* Button styling */
-    .stButton > button {
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        color: white;
-        border: none;
-        border-radius: 25px;
-        padding: 0.75rem 2rem;
-        font-weight: 600;
-        font-size: 1rem;
-        transition: all 0.3s ease;
-        box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
-    }
-    
-    .stButton > button:hover {
-        transform: translateY(-2px);
-        box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
-    }
-    
-    /* Hide Streamlit elements */
-    #MainMenu {visibility: hidden;}
-    footer {visibility: hidden;}
-    header {visibility: hidden;}
-    
-    /* File uploader styling */
-    .uploadedFile {
-        border-radius: 15px;
-        overflow: hidden;
-    }
-</style>
-""", unsafe_allow_html=True)
-
 # ---- HEADER ----
-st.markdown('<div class="main-container fade-in">', unsafe_allow_html=True)
-st.markdown("<h1 class='app-header'>🖊️ Handwritten Digit Recognizer</h1>", unsafe_allow_html=True)
-st.markdown("<p class='app-subtitle'>Upload an image of a digit (0–9) and watch our AI model predict it with stunning accuracy!</p>", unsafe_allow_html=True)
-st.markdown('<hr class="custom-divider">', unsafe_allow_html=True)
+st.markdown("<h1 style='text-align: center; color: #4CAF50;'>🖊️ Handwritten Digit Recognizer</h1>", unsafe_allow_html=True)
+st.write("Upload an image of a digit (0–9) and the model will predict it.")
+st.markdown("---")
 
 # ---- SIDEBAR ----
-with st.sidebar:
-    st.markdown('<div class="sidebar-content">', unsafe_allow_html=True)
-    st.markdown("<h2 class='sidebar-header'>📌 How to Use</h2>", unsafe_allow_html=True)
-    st.markdown("""
-    <div class='sidebar-text'>
-    <strong>Step 1:</strong> Upload a clear image of a single digit (PNG/JPG)<br><br>
-    <strong>Step 2:</strong> Wait for our AI model to process your image<br><br>
-    <strong>Step 3:</strong> View the predicted digit and confidence scores<br><br>
-    <em>💡 Tip: Use images with good contrast for best results!</em>
-    </div>
-    """, unsafe_allow_html=True)
-    st.markdown('</div>', unsafe_allow_html=True)
-    
-    st.markdown('<hr class="custom-divider">', unsafe_allow_html=True)
-    
-    st.markdown('<div class="sidebar-content">', unsafe_allow_html=True)
-    st.markdown("<h3 class='sidebar-header'>🚀 About This App</h3>", unsafe_allow_html=True)
-    st.markdown("""
-    <div class='sidebar-text'>
-    This application uses a deep learning neural network trained on the MNIST dataset to recognize handwritten digits with high accuracy.
-    <br><br>
-    <strong>Technologies:</strong><br>
-    • Streamlit for the interface<br>
-    • TensorFlow for AI predictions<br>
-    • Computer Vision processing<br>
-    <br>
-    Built with ❤️ for digit recognition
-    </div>
-    """, unsafe_allow_html=True)
-    st.markdown('</div>', unsafe_allow_html=True)
+st.sidebar.header("📌 Instructions")
+st.sidebar.info(
+    "1. Upload a clear image of a single digit (PNG/JPG).\n"
+    "2. Wait for the model to process.\n"
+    "3. See the predicted digit and probabilities."
+)
+
+st.sidebar.markdown("---")
+st.sidebar.write("👩‍💻 **About**: Built with ❤️ using Streamlit & TensorFlow")
 
 # ---- FILE UPLOAD ----
-st.markdown('<div class="upload-section fade-in">', unsafe_allow_html=True)
-st.markdown("<h2 class='upload-title'>📂 Upload Your Digit Image</h2>", unsafe_allow_html=True)
-uploaded_file = st.file_uploader("Choose an image file", type=["png", "jpg", "jpeg"], label_visibility="collapsed")
-st.markdown('</div>', unsafe_allow_html=True)
+uploaded_file = st.file_uploader("📂 Upload your digit image", type=["png", "jpg", "jpeg"])
 
 if uploaded_file is not None:
     col1, col2 = st.columns([1,2])  # image left, results right
-    
+
     with col1:
-        st.markdown('<div class="image-container fade-in">', unsafe_allow_html=True)
-        st.image(uploaded_file, caption="📸 Your Uploaded Image", width=150)
-        st.markdown('</div>', unsafe_allow_html=True)
-    
+        st.image(uploaded_file, caption="Uploaded Image", width=150)
+
     with col2:
-        # Preprocess (keeping original logic intact)
+        # Preprocess
         img = Image.open(uploaded_file).convert('L')
         img = img.resize((28,28))
         img_array = np.array(img) / 255.0
         img_array = img_array.reshape(1,28,28,1)
-        
-        # Predict (keeping original logic intact)
+
+        # Predict
         pred = model.predict(img_array)
         pred_label = np.argmax(pred)
-        confidence = np.max(pred) * 100
-        
+
         # ---- SHOW RESULT ----
-        st.markdown('<div class="results-container fade-in">', unsafe_allow_html=True)
-        st.markdown(f"<div class='prediction-result'>🎯 Predicted Digit: {pred_label}</div>", unsafe_allow_html=True)
-        st.markdown(f"<p style='text-align: center; color: white; font-size: 1.2rem; margin-top: 1rem;'>Confidence: {confidence:.1f}%</p>", unsafe_allow_html=True)
-        st.markdown('</div>', unsafe_allow_html=True)
-        
-        # Chart with custom styling
-        st.markdown('<div class="chart-container fade-in">', unsafe_allow_html=True)
-        st.markdown("<h3 class='chart-title'>📊 Prediction Probabilities</h3>", unsafe_allow_html=True)
-        st.bar_chart(pred[0])  # visualize probabilities (keeping original logic)
-        st.markdown('</div>', unsafe_allow_html=True)
+        st.markdown(f"<h2 style='color: #FF5733;'>Predicted Digit: {pred_label}</h2>", unsafe_allow_html=True)
+        st.bar_chart(pred[0])  # visualize probabilities
 
 # ---- FOOTER ----
-st.markdown('<hr class="custom-divider">', unsafe_allow_html=True)
-st.markdown("""
-<div class='app-footer fade-in'>
-    <h3 style='color: #667eea; margin-bottom: 1rem;'>✨ Thank you for using our Digit Recognition App!</h3>
-    <p>Powered by cutting-edge AI technology • Built with ❤️ using Streamlit & TensorFlow</p>
-    <p style='font-size: 0.9rem; opacity: 0.8; margin-top: 1rem;'>
-        🔬 Continuously learning and improving • 🌟 Accuracy rates above 95%
-    </p>
-</div>
-""", unsafe_allow_html=True)
-
-st.markdown('</div>', unsafe_allow_html=True)
+st.markdown("---")
+st.markdown("<p style='text-align: center;'>Built with ❤️ using Streamlit & TensorFlow</p>", unsafe_allow_html=True)