Spaces:

LakshmiHarika
/

MachineLearning

Sleeping

App Files Files Community

LakshmiHarika commited on Dec 8, 2024

Commit

4f1d7c9

verified ·

1 Parent(s): 0a5bc86

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

Browse files

Files changed (1) hide show

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

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

@@ -1,6 +1,5 @@
 import streamlit as st
-# Set up the page config
 st.set_page_config(
     page_title="HomePage",
     page_icon="🚀",
@@ -26,7 +25,6 @@ st.markdown("""
     </style>
 """, unsafe_allow_html=True)
-# Set background and page title
 st.markdown(
     """
     <style>
@@ -44,7 +42,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 with buttons for redirection
 html_code = """
 <!DOCTYPE html>
 <html lang="en">
@@ -103,18 +101,87 @@ html_code = """
         }
         .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>
@@ -122,16 +189,16 @@ html_code = """
     <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>
@@ -139,14 +206,11 @@ html_code = """
 </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!")

 import streamlit as st
 st.set_page_config(
     page_title="HomePage",
     page_icon="🚀",
     </style>
 """, unsafe_allow_html=True)
 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 (properly rendered)
 html_code = """
 <!DOCTYPE html>
 <html lang="en">
         }
         .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>
     <h1></h1>
     <div class="circle">
         <div class="steps">
+            <div class="step" id="step2"><a href="/?page=ProblemStatement">1. Problem Statement</a></div>
+            <div class="step" id="step3"><a href="/?page=DataCollection">2. Data Collection</a></div>
+            <div class="step" id="step4"><a href="/?page=SimpleEDA">3. Simple EDA</a></div>
+            <div class="step" id="step5"><a href="/?page=DataPreprocessing">4. Data Pre-Processing</a></div>
+            <div class="step" id="step6"><a href="/?page=EDA">5. EDA</a></div>
+            <div class="step" id="step7"><a href="/?page=FeatureEngineering">6. Feature Engineering</a></div>
+            <div class="step" id="step8"><a href="/?page=ModelTraining">7. Training the Model</a></div>
+            <div class="step" id="step9"><a href="/?page=ModelTesting">8. Testing the Model</a></div>
+            <div class="step" id="step10"><a href="/?page=ModelDeployment">9. Model Deployment</a></div>
+            <div class="step" id="step1"><a href="/?page=Monitoring">10. Monitoring</a></div>
         </div>
     </div>
 </div>
 </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(' ')