Spaces:

LakshmiHarika
/

MachineLearning

Sleeping

App Files Files Community

LakshmiHarika commited on Dec 8, 2024

Commit

0a5bc86

verified ·

1 Parent(s): deea9b3

Update pages/3Life Cycle of Machine Learning Project.py

Browse files

Files changed (1) hide show

pages/3Life Cycle of Machine Learning Project.py +33 -98

pages/3Life Cycle of Machine Learning Project.py CHANGED Viewed

@@ -1,5 +1,6 @@
 import streamlit as st
 st.set_page_config(
     page_title="HomePage",
     page_icon="🚀",
@@ -25,6 +26,7 @@ st.markdown("""
     </style>
 """, unsafe_allow_html=True)
 st.markdown(
     """
     <style>
@@ -42,7 +44,7 @@ st.markdown(
 # Title of the page
 st.markdown("""<div style="text-align: left; margin-top: 20px;"><h1 style="color: #BB3385;">Life Cycle of End to End ML Project</h1></div>""", unsafe_allow_html=True)
-# Circle Representation HTML and CSS (properly rendered)
 html_code = """
 <!DOCTYPE html>
 <html lang="en">
@@ -99,90 +101,20 @@ html_code = """
             transform-origin: 50% 50%;
             transition: transform 0.5s ease-in-out;
         }
         .step:hover {
             background-color: #0056b3;
-        }
-         /* Different background colors for each step */
-        #step1 {
-            background-color: #FFCCCC;
-            transform: rotate(0deg) translateX(140px) rotate(0deg);
-        }
-        #step2 {
-            background-color: #FFDD99;
-            transform: rotate(36deg) translateX(140px) rotate(-36deg);
-        }
-        #step3 {
-            background-color: #FFFF99;
-            transform: rotate(72deg) translateX(140px) rotate(-72deg);
-        }
-        #step4 {
-            background-color: #CCFFCC;
-            transform: rotate(108deg) translateX(140px) rotate(-108deg);
-        }
-        #step5 {
-            background-color: #CCE5FF;
-            transform: rotate(144deg) translateX(140px) rotate(-144deg);
-        }
-        #step6 {
-            background-color: #E5CCFF;
-            transform: rotate(180deg) translateX(140px) rotate(-180deg);
-        }
-        #step7 {
-            background-color: #FFD9E6;
-            transform: rotate(216deg) translateX(140px) rotate(-216deg);
-        }
-        #step8 {
-            background-color: #FFF5CC;
-            transform: rotate(252deg) translateX(140px) rotate(-252deg);
-        }
-        #step9 {
-            background-color: #D9FFF5;
-            transform: rotate(288deg) translateX(140px) rotate(-288deg);
-        }
-        #step10 {
-            background-color: #D9CCFF;
-            transform: rotate(324deg) translateX(140px) rotate(-324deg);
         }
         /* Rotate steps to form a circular layout */
-        #step4 {
-            transform: rotate(0deg) translateX(250px) rotate(0deg);
-        }
-        #step5 {
-            transform: rotate(25deg) translateX(250px) rotate(-25deg);
-        }
-        #step6 {
-            transform: rotate(60deg) translateX(250px) rotate(-60deg);
-        }
-        #step7 {
-            transform: rotate(120deg) translateX(250px) rotate(-120deg);
-        }
-        #step8 {
-            transform: rotate(155deg) translateX(250px) rotate(-155deg);
-        }
-        #step9 {
-            transform: rotate(180deg) translateX(250px) rotate(-180deg);
-        }
-        #step10 {
-            transform: rotate(205deg) translateX(250px) rotate(-205deg);
-        }
-        #step1 {
-            transform: rotate(240deg) translateX(250px) rotate(-240deg);
-        }
-        #step2 {
-            transform: rotate(300deg) translateX(250px) rotate(-300deg);
-        }
-        #step3 {
-            transform: rotate(335deg) translateX(250px) rotate(-335deg);
-        }
-        a {
-            color: white;  /* Link color */
-            text-decoration: none;
-        }
-        a:hover {
-            color: yellow;  /* Color on hover */
-            text-decoration: underline;  /* Underline on hover */
-        }
     </style>
 </head>
 <body>
@@ -190,16 +122,16 @@ html_code = """
     <h1></h1>
     <div class="circle">
         <div class="steps">
-            <div class="step" id="step2">1. Problem Statement</div>
-            <div class="step" id="step3">2. Data Collection</div>
-            <div class="step" id="step4">3. Simple EDA</div>
-            <div class="step" id="step5">4. Data Pre-Processing</div>
-            <div class="step" id="step6">5. EDA</div>
-            <div class="step" id="step7">6. Feature Engineering</div>
-            <div class="step" id="step8">7. Training the Model</div>
-            <div class="step" id="step9">8. Testing the Model</div>
-            <div class="step" id="step10">9. Model Deployment</div>
-            <div class="step" id="step1">10. Monitoring</div>
         </div>
     </div>
 </div>
@@ -207,11 +139,14 @@ html_code = """
 </html>
 """
-# Streamlit: Display the HTML circle with properly spaced steps
 st.markdown(html_code, unsafe_allow_html=True)
-st.write(' ')
-st.write(' ')
-st.write(' ')
-st.write(' ')
-st.write(' ')
-st.write(' ')

 import streamlit as st
+# Set up the page config
 st.set_page_config(
     page_title="HomePage",
     page_icon="🚀",
     </style>
 """, unsafe_allow_html=True)
+# Set background and page title
 st.markdown(
     """
     <style>
 # Title of the page
 st.markdown("""<div style="text-align: left; margin-top: 20px;"><h1 style="color: #BB3385;">Life Cycle of End to End ML Project</h1></div>""", unsafe_allow_html=True)
+# Circle Representation HTML and CSS with buttons for redirection
 html_code = """
 <!DOCTYPE html>
 <html lang="en">
             transform-origin: 50% 50%;
             transition: transform 0.5s ease-in-out;
         }
         .step:hover {
             background-color: #0056b3;
         }
         /* Rotate steps to form a circular layout */
+        #step1 { transform: rotate(0deg) translateX(140px) rotate(0deg); }
+        #step2 { transform: rotate(36deg) translateX(140px) rotate(-36deg); }
+        #step3 { transform: rotate(72deg) translateX(140px) rotate(-72deg); }
+        #step4 { transform: rotate(108deg) translateX(140px) rotate(-108deg); }
+        #step5 { transform: rotate(144deg) translateX(140px) rotate(-144deg); }
+        #step6 { transform: rotate(180deg) translateX(140px) rotate(-180deg); }
+        #step7 { transform: rotate(216deg) translateX(140px) rotate(-216deg); }
+        #step8 { transform: rotate(252deg) translateX(140px) rotate(-252deg); }
+        #step9 { transform: rotate(288deg) translateX(140px) rotate(-288deg); }
+        #step10 { transform: rotate(324deg) translateX(140px) rotate(-324deg); }
     </style>
 </head>
 <body>
     <h1></h1>
     <div class="circle">
         <div class="steps">
+            <div class="step" id="step2" onclick="window.location.href='/?page=ProblemStatement'">1. Problem Statement</div>
+            <div class="step" id="step3" onclick="window.location.href='/?page=DataCollection'">2. Data Collection</div>
+            <div class="step" id="step4" onclick="window.location.href='/?page=SimpleEDA'">3. Simple EDA</div>
+            <div class="step" id="step5" onclick="window.location.href='/?page=DataPreprocessing'">4. Data Pre-Processing</div>
+            <div class="step" id="step6" onclick="window.location.href='/?page=EDA'">5. EDA</div>
+            <div class="step" id="step7" onclick="window.location.href='/?page=FeatureEngineering'">6. Feature Engineering</div>
+            <div class="step" id="step8" onclick="window.location.href='/?page=ModelTraining'">7. Training the Model</div>
+            <div class="step" id="step9" onclick="window.location.href='/?page=ModelTesting'">8. Testing the Model</div>
+            <div class="step" id="step10" onclick="window.location.href='/?page=ModelDeployment'">9. Model Deployment</div>
+            <div class="step" id="step1" onclick="window.location.href='/?page=Monitoring'">10. Monitoring</div>
         </div>
     </div>
 </div>
 </html>
 """
+# Display the circle
 st.markdown(html_code, unsafe_allow_html=True)
+# Simulate page content change based on the query parameter
+query_params = st.experimental_get_query_params()
+if 'page' in query_params:
+    page = query_params['page'][0]
+    st.write(f"Redirecting to {page} page...")
+else:
+    st.write("Welcome to the Home page!")