Update Home.py

Home.py

@@ -2,68 +2,83 @@ import streamlit as st
 import pandas as pd
 import numpy as np
 
+# Page configuration
+st.set_page_config(page_title="Electronics Sales Analysis", layout="wide")
 
+# Title with updated color
+st.markdown(
+    """
+    <img src="https://cdn-uploads.huggingface.co/production/uploads/67441c51a784a9d15cb12871/dV0WXaXfOUrNjQmNQkspQ.jpeg" width="150%" height="150%" />
+    """, 
+    unsafe_allow_html=True
+)
 
-st.markdown("""
-    <h1 style="text-align:center; color:red;">Electronics Sales Analysis & Machine Learning Model</h1>
-""", unsafe_allow_html=True)
+
+# Banner image
 st.markdown(
     """
     <img src="https://cdn-uploads.huggingface.co/production/uploads/67441c51a784a9d15cb12871/dV0WXaXfOUrNjQmNQkspQ.jpeg" width="100%" />
     """, 
     unsafe_allow_html=True
 )
-st.markdown("""
-## Project Title: 📱Consumer Electronics Sales | EDA + Model 💻:
-##### 📊 Data Exploration and Preprocessing:
-- <span style="font-size:20px;">Preparing data by encoding categorical features like "ProductCategory" and "ProductBrand" and scaling numerical data such as "price" and "rating", as the dataset has minimal outliers or missing values.</span>
-- <span style="font-size:20px;">Analyzing trends in **Product Categories**, **Brands**, **Prices**, **CustomerAge** etc., to identify influential factors.
-##### 🤖 Predictive Modeling:
-- <span style="font-size:20px;">**Target Variable**: Predicting key metrics like *PurchaseIntent*</span>
-- <span style="font-size:20px;">**Model Selection**: Building ML models such as **KNN**, "Logistic Regression" and "Support Vector Machine"** for classification task</span>
-- <span style="font-size:20px;">**Feature Engineering**: Extracting insights from **ProductCategory**, **ProductBrand** and label encoding.</span>
-##### 📈 Model Evaluation:
-- <span style="font-size:20px;">Comparing model performance using metrics like **accuracy**, **F1 score**, or **Log-loss score**, depending on the task.</span>
-- <span style="font-size:20px;">Employing techniques like **hyperparameter tuning** and **cross-validation** for optimization.</span>
-##### By integrating **machine learning** with **data analysis**, this project empowers Electronics market to enhance customer satisfaction, optimize pricing strategies according to purchase intent, and maximize profitability.
-""", unsafe_allow_html=True)
-
-# # Display an image from a file
-st.subheader("Hotel Data Analysis Model Creation Flow")
-st.markdown("![classification=project-flowchart.gif](https://cdn-uploads.huggingface.co/production/uploads/67441c51a784a9d15cb12871/BNnk1RdpWhdjTnW9Wm5gA.gif)")
 
+# Project description
+st.markdown(
+    """
+    <div style="text-align:justify; font-size:20px; color:white;">
+        ## Project Title: 📱Consumer Electronics Sales | EDA + Model 💻:
+        ##### 📊 Data Exploration and Preprocessing:
+        - Preparing data by encoding categorical features like "ProductCategory" and "ProductBrand" and scaling numerical data such as "price" and "rating", as the dataset has minimal outliers or missing values.
+        - Analyzing trends in **Product Categories**, **Brands**, **Prices**, **CustomerAge**, etc., to identify influential factors.
+        ##### 🤖 Predictive Modeling:
+        - **Target Variable**: Predicting key metrics like *PurchaseIntent*.
+        - **Model Selection**: Building ML models such as **KNN**, **Logistic Regression**, and **Support Vector Machine** for classification tasks.
+        - **Feature Engineering**: Extracting insights from **ProductCategory**, **ProductBrand**, and label encoding.
+        ##### 📈 Model Evaluation:
+        - Comparing model performance using metrics like **accuracy**, **F1 score**, or **Log-loss score**, depending on the task.
+        - Employing techniques like **hyperparameter tuning** and **cross-validation** for optimization.
+        ##### By integrating **machine learning** with **data analysis**, this project empowers the Electronics market to enhance customer satisfaction, optimize pricing strategies according to purchase intent, and maximize profitability.
+    </div>
+    """, 
+    unsafe_allow_html=True
+)
 
-# Define the URL of the background image (use your own image URL)
-# background_image_url = "https://cdn-uploads.huggingface.co/production/uploads/675fab3a2d0851e23d23cad3/FlisTFfpU7flDCWj_KttH.jpeg"
+# Subheader and flowchart image
+st.subheader("Hotel Data Analysis Model Creation Flow")
+st.markdown(
+    "![classification=project-flowchart.gif](https://cdn-uploads.huggingface.co/production/uploads/67441c51a784a9d15cb12871/BNnk1RdpWhdjTnW9Wm5gA.gif)"
+)
 
-# Apply custom CSS for the background image and overlay
+# Custom background with overlay
 st.markdown(
-    f"""
+    """
     <style>
-        .stApp {{
+        .stApp {
             background-image: url("https://cdn-uploads.huggingface.co/production/uploads/67441c51a784a9d15cb12871/cQN7GOIFQytVGZ-UzJYcR.jpeg");
             background-size: cover;
             background-position: center;
             height: 100vh;
-        }}
+        }
         
         /* Semi-transparent overlay */
-        .stApp::before {{
+        .stApp::before {
             content: "";
             position: absolute;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
-            background: rgba(0, 0, 0, 0.4);  /* Adjust transparency here (0.4 for 40% transparency) */
+            background: rgba(0, 0, 0, 0.4);  /* 40% transparency */
             z-index: -1;
-        }}
-        /* Styling the content to ensure text visibility */
-        .stMarkdown {{
-            color: white;  /* White text to ensure visibility */
-            font-size: 30px;  /* Adjust font size for better readability */
-        }}
+        }
+        
+        /* Styling the markdown text for better readability */
+        .stMarkdown {
+            text-align: justify;  /* Spread content across width */
+            font-size: 20px;  /* Better font size for readability */
+            color: white;  /* Contrast color on dark background */
+        }
     </style>
     """, 
-    unsafe_allow_html=True 
-)
+    unsafe_allow_html=True
+)