Hugging Face's logo

Spaces:
LakshmiHarika
/
MachineLearning
Sleeping

App Files Community
1
LakshmiHarika commited on
Commit
e862b06
·
verified ·
1 Parent(s): 060f70e

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

Browse files
Files changed (1) hide show
  1. pages/3Life Cycle of Machine Learning Project.py +62 -50
pages/3Life Cycle of Machine Learning Project.py CHANGED
@@ -1,33 +1,39 @@
 
1
  import streamlit as st
2
 
3
- # Define the HTML code for the circular flowchart
4
- html_code = """
5
- <!DOCTYPE html>
6
- <html lang="en">
7
- <head>
8
- <meta charset="UTF-8">
9
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
10
- <title>Machine Learning Project Life Cycle</title>
11
  <style>
12
- body {
13
- font-family: Arial, sans-serif;
14
- display: flex;
15
- justify-content: center;
16
- align-items: center;
17
- height: 100vh;
18
- margin: 0;
19
- background-color: #f4f4f9;
20
- }
21
- .container {
22
- text-align: center;
23
- width: 80%;
24
- max-width: 800px;
25
- }
26
- .circle {
 
 
 
 
 
27
  position: relative;
28
- width: 450px; /* Increased size for better spacing */
29
- height: 450px; /* Increased size for better spacing */
30
- margin: 20px auto;
31
  border-radius: 50%;
32
  display: flex;
33
  justify-content: center;
@@ -48,7 +54,7 @@ html_code = """
48
  padding: 15px 30px;
49
  border-radius: 8px;
50
  cursor: pointer;
51
- width: 170px;
52
  margin: 10px;
53
  text-align: center;
54
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
@@ -60,53 +66,57 @@ html_code = """
60
  .step:hover {
61
  background-color: #0056b3;
62
  }
63
- /* Different background colors for each step */
64
  #step1 {
65
  background-color: #ff5733;
66
- transform: rotate(0deg) translateX(180px) rotate(0deg);
67
  }
68
  #step2 {
69
  background-color: #33b5ff;
70
- transform: rotate(36deg) translateX(180px) rotate(-36deg);
71
  }
72
  #step3 {
73
  background-color: #33ff57;
74
- transform: rotate(72deg) translateX(180px) rotate(-72deg);
75
  }
76
  #step4 {
77
  background-color: #ff33cc;
78
- transform: rotate(108deg) translateX(180px) rotate(-108deg);
79
  }
80
  #step5 {
81
  background-color: #ffcc33;
82
- transform: rotate(144deg) translateX(180px) rotate(-144deg);
83
  }
84
  #step6 {
85
  background-color: #33ccff;
86
- transform: rotate(180deg) translateX(180px) rotate(-180deg);
87
  }
88
  #step7 {
89
  background-color: #ff33a1;
90
- transform: rotate(216deg) translateX(180px) rotate(-216deg);
91
  }
92
  #step8 {
93
  background-color: #66ff33;
94
- transform: rotate(252deg) translateX(180px) rotate(-252deg);
95
  }
96
  #step9 {
97
  background-color: #9933ff;
98
- transform: rotate(288deg) translateX(180px) rotate(-288deg);
99
  }
100
  #step10 {
101
  background-color: #f7a500;
102
- transform: rotate(324deg) translateX(180px) rotate(-324deg);
103
  }
104
  </style>
105
- </head>
106
- <body>
107
- <div class="container">
108
- <h1>Machine Learning Project Life Cycle</h1>
109
- <div class="circle">
 
 
 
 
110
  <div class="steps">
111
  <div class="step" id="step1">1. Problem Statement</div>
112
  <div class="step" id="step2">2. Data Collection</div>
@@ -115,15 +125,17 @@ html_code = """
115
  <div class="step" id="step5">5. EDA</div>
116
  <div class="step" id="step6">6. Feature Engineering</div>
117
  <div class="step" id="step7">7. Training the Model</div>
118
- <div class="step" id="step8">8. Testing the Data</div>
119
  <div class="step" id="step9">9. Deployment</div>
120
  <div class="step" id="step10">10. Monitoring</div>
121
  </div>
122
  </div>
123
- </div>
124
- </body>
125
- </html>
126
- """
127
 
128
- # Streamlit: Display the HTML circle with properly spaced steps
129
- st.markdown(html_code, unsafe_allow_html=True)
 
 
 
 
 
 
1
+
2
  import streamlit as st
3
 
4
+ st.set_page_config(
5
+ page_title="HomePage",
6
+ page_icon="🚀",
7
+ layout="wide"
8
+ )
9
+
10
+ # Global CSS for consistent styling across all pages
11
+ st.markdown("""
12
  <style>
13
+ body, .stApp {
14
+ color: #4F4F4F; /* Replace with your desired font color */
15
+ background-color: #FFFFFF; /* Optional: Set a fixed background color */
16
+ }
17
+ h1, h2, h3, h4, h5, h6 {
18
+ color: #BB3385; /* Replace with your heading color */
19
+ }
20
+ p {
21
+ color: #4F4F4F; /* Replace with your paragraph text color */
22
+ }
23
+ ul li {
24
+ color: #4F4F4F; /* List item color */
25
+ }
26
+ </style>
27
+ """, unsafe_allow_html=True)
28
+
29
+ st.markdown(
30
+ """
31
+ <style>
32
+ .circle-container {
33
  position: relative;
34
+ width: 400px;
35
+ height: 400px;
36
+ margin: 0 auto;
37
  border-radius: 50%;
38
  display: flex;
39
  justify-content: center;
 
54
  padding: 15px 30px;
55
  border-radius: 8px;
56
  cursor: pointer;
57
+ width: 150px;
58
  margin: 10px;
59
  text-align: center;
60
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 
66
  .step:hover {
67
  background-color: #0056b3;
68
  }
69
+
70
  #step1 {
71
  background-color: #ff5733;
72
+ transform: rotate(0deg) translateX(170px) rotate(0deg);
73
  }
74
  #step2 {
75
  background-color: #33b5ff;
76
+ transform: rotate(36deg) translateX(170px) rotate(-36deg);
77
  }
78
  #step3 {
79
  background-color: #33ff57;
80
+ transform: rotate(72deg) translateX(170px) rotate(-72deg);
81
  }
82
  #step4 {
83
  background-color: #ff33cc;
84
+ transform: rotate(108deg) translateX(170px) rotate(-108deg);
85
  }
86
  #step5 {
87
  background-color: #ffcc33;
88
+ transform: rotate(144deg) translateX(170px) rotate(-144deg);
89
  }
90
  #step6 {
91
  background-color: #33ccff;
92
+ transform: rotate(180deg) translateX(170px) rotate(-180deg);
93
  }
94
  #step7 {
95
  background-color: #ff33a1;
96
+ transform: rotate(216deg) translateX(170px) rotate(-216deg);
97
  }
98
  #step8 {
99
  background-color: #66ff33;
100
+ transform: rotate(252deg) translateX(170px) rotate(-252deg);
101
  }
102
  #step9 {
103
  background-color: #9933ff;
104
+ transform: rotate(288deg) translateX(170px) rotate(-288deg);
105
  }
106
  #step10 {
107
  background-color: #f7a500;
108
+ transform: rotate(324deg) translateX(170px) rotate(-324deg);
109
  }
110
  </style>
111
+ """, unsafe_allow_html=True)
112
+
113
+ # Title of the page
114
+ st.markdown("""<div style="text-align: center; margin-top: 20px;"><h1 style="color: #BB3385;">Life Cycle of End to End ML Project</h1></div>""", unsafe_allow_html=True)
115
+
116
+ # HTML structure for the circular flowchart
117
+ st.markdown(
118
+ """
119
+ <div class="circle-container">
120
  <div class="steps">
121
  <div class="step" id="step1">1. Problem Statement</div>
122
  <div class="step" id="step2">2. Data Collection</div>
 
125
  <div class="step" id="step5">5. EDA</div>
126
  <div class="step" id="step6">6. Feature Engineering</div>
127
  <div class="step" id="step7">7. Training the Model</div>
128
+ <div class="step" id="step8">8. Testing the Model</div>
129
  <div class="step" id="step9">9. Deployment</div>
130
  <div class="step" id="step10">10. Monitoring</div>
131
  </div>
132
  </div>
133
+ """, unsafe_allow_html=True)
 
 
 
134
 
135
+ # Additional spacing
136
+ st.write(' ')
137
+ st.write(' ')
138
+ st.write(' ')
139
+ st.write(' ')
140
+ st.write(' ')
141
+ st.write(' ')