Hugging Face's logo

Spaces:
LakshmiHarika
/
MachineLearning
Sleeping

App Files Community
1
LakshmiHarika commited on
Commit
3e18a1b
·
verified ·
1 Parent(s): e0c9e59

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 +100 -30
pages/3Life Cycle of Machine Learning Project.py CHANGED
@@ -1,6 +1,5 @@
1
  import streamlit as st
2
 
3
- # Set page configuration
4
  st.set_page_config(
5
  page_title="HomePage",
6
  page_icon="🚀",
@@ -8,7 +7,7 @@ st.set_page_config(
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 */
@@ -26,8 +25,8 @@ st.markdown("""
26
  </style>
27
  """, unsafe_allow_html=True)
28
 
29
- # Background image for the Streamlit app
30
- st.markdown("""
31
  <style>
32
  .stApp {
33
  background-image: url("https://huggingface.co/spaces/LakshmiHarika/MachineLearning/resolve/main/DALL%C2%B7E%202024-12-03%2023.34.47%20-%20A%20simple%20and%20elegant%20background%20image%20for%20an%20AI-themed%20web%20application.%20The%20background%20should%20feature%20a%20soft%20gradient%20transitioning%20from%20white%20to%20ligh.webp");
@@ -36,14 +35,17 @@ st.markdown("""
36
  background-attachment: fixed;
37
  }
38
  </style>
39
- """, unsafe_allow_html=True)
 
 
40
 
41
  # Title of the page
42
- st.markdown("""<div style="text-align: center; margin-top: 20px;">
43
- <h1 style="color: #BB3385;">Life Cycle of End to End ML Project</h1></div>""", unsafe_allow_html=True)
 
44
 
45
- # Updated HTML with light colors for a professional look
46
- html_code_updated = """
47
  <!DOCTYPE html>
48
  <html lang="en">
49
  <head>
@@ -58,7 +60,7 @@ html_code_updated = """
58
  align-items: center;
59
  height: 100vh;
60
  margin: 0;
61
- background-color: #f9f9f9;
62
  }
63
  .container {
64
  text-align: center;
@@ -85,8 +87,8 @@ html_code_updated = """
85
  flex-wrap: wrap;
86
  }
87
  .step {
88
- background-color: rgba(173, 216, 230, 0.8); /* Light pastel blue */
89
- color: #333;
90
  padding: 15px 30px;
91
  border-radius: 8px;
92
  cursor: pointer;
@@ -100,31 +102,93 @@ html_code_updated = """
100
  transition: transform 0.5s ease-in-out;
101
  }
102
  .step:hover {
103
- background-color: rgba(135, 206, 250, 0.9); /* Slightly darker pastel blue on hover */
104
- }
105
- #step1 { background-color: #FFCCCC; transform: rotate(0deg) translateX(140px) rotate(0deg); }
106
- #step2 { background-color: #FFDD99; transform: rotate(36deg) translateX(140px) rotate(-36deg); }
107
- #step3 { background-color: #FFFF99; transform: rotate(72deg) translateX(140px) rotate(-72deg); }
108
- #step4 { background-color: #CCFFCC; transform: rotate(108deg) translateX(140px) rotate(-108deg); }
109
- #step5 { background-color: #CCE5FF; transform: rotate(144deg) translateX(140px) rotate(-144deg); }
110
- #step6 { background-color: #E5CCFF; transform: rotate(180deg) translateX(140px) rotate(-180deg); }
111
- #step7 { background-color: #FFD9E6; transform: rotate(216deg) translateX(140px) rotate(-216deg); }
112
- #step8 { background-color: #FFF5CC; transform: rotate(252deg) translateX(140px) rotate(-252deg); }
113
- #step9 { background-color: #D9FFF5; transform: rotate(288deg) translateX(140px) rotate(-288deg); }
114
- #step10 { background-color: #D9CCFF; transform: rotate(324deg) translateX(140px) rotate(-324deg); }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
115
  a {
116
- color: #333; /* Link color */
117
  text-decoration: none;
118
  }
119
  a:hover {
120
- color: yellow; /* Color on hover */
121
- text-decoration: underline; /* Underline on hover */
122
  }
123
  </style>
124
  </head>
125
  <body>
126
  <div class="container">
127
- <h1>Machine Learning Project Life Cycle</h1>
128
  <div class="circle">
129
  <div class="steps">
130
  <div class="step" id="step1">1. Problem Statement</div>
@@ -144,5 +208,11 @@ html_code_updated = """
144
  </html>
145
  """
146
 
147
- # Streamlit: Display the updated HTML with lighter colors
148
- st.markdown(html_code_updated, unsafe_allow_html=True)
 
 
 
 
 
 
 
1
  import streamlit as st
2
 
 
3
  st.set_page_config(
4
  page_title="HomePage",
5
  page_icon="🚀",
 
7
  )
8
 
9
  # Global CSS for consistent styling across all pages
10
+ st.markdown("""
11
  <style>
12
  body, .stApp {
13
  color: #4F4F4F; /* Replace with your desired font color */
 
25
  </style>
26
  """, unsafe_allow_html=True)
27
 
28
+ st.markdown(
29
+ """
30
  <style>
31
  .stApp {
32
  background-image: url("https://huggingface.co/spaces/LakshmiHarika/MachineLearning/resolve/main/DALL%C2%B7E%202024-12-03%2023.34.47%20-%20A%20simple%20and%20elegant%20background%20image%20for%20an%20AI-themed%20web%20application.%20The%20background%20should%20feature%20a%20soft%20gradient%20transitioning%20from%20white%20to%20ligh.webp");
 
35
  background-attachment: fixed;
36
  }
37
  </style>
38
+ """,
39
+ unsafe_allow_html=True
40
+ )
41
 
42
  # Title of the page
43
+ 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)
44
+
45
+
46
 
47
+ # Circle Representation HTML and CSS (properly rendered)
48
+ html_code = """
49
  <!DOCTYPE html>
50
  <html lang="en">
51
  <head>
 
60
  align-items: center;
61
  height: 100vh;
62
  margin: 0;
63
+ background-color: #f4f4f9;
64
  }
65
  .container {
66
  text-align: center;
 
87
  flex-wrap: wrap;
88
  }
89
  .step {
90
+ background-color: #007bff;
91
+ color: white;
92
  padding: 15px 30px;
93
  border-radius: 8px;
94
  cursor: pointer;
 
102
  transition: transform 0.5s ease-in-out;
103
  }
104
  .step:hover {
105
+ background-color: #0056b3;
106
+ }
107
+ /* Different background colors for each step */
108
+ #step1 {
109
+ background-color: #FFCCCC;
110
+ transform: rotate(0deg) translateX(140px) rotate(0deg);
111
+ }
112
+ #step2 {
113
+ background-color: #FFDD99;
114
+ transform: rotate(36deg) translateX(140px) rotate(-36deg);
115
+ }
116
+ #step3 {
117
+ background-color: #FFFF99;
118
+ transform: rotate(72deg) translateX(140px) rotate(-72deg);
119
+ }
120
+ #step4 {
121
+ background-color: #CCFFCC;
122
+ transform: rotate(108deg) translateX(140px) rotate(-108deg);
123
+ }
124
+ #step5 {
125
+ background-color: #CCE5FF;
126
+ transform: rotate(144deg) translateX(140px) rotate(-144deg);
127
+ }
128
+ #step6 {
129
+ background-color: #E5CCFF;
130
+ transform: rotate(180deg) translateX(140px) rotate(-180deg);
131
+ }
132
+ #step7 {
133
+ background-color: #FFD9E6;
134
+ transform: rotate(216deg) translateX(140px) rotate(-216deg);
135
+ }
136
+ #step8 {
137
+ background-color: #FFF5CC;
138
+ transform: rotate(252deg) translateX(140px) rotate(-252deg);
139
+ }
140
+ #step9 {
141
+ background-color: #D9FFF5;
142
+ transform: rotate(288deg) translateX(140px) rotate(-288deg);
143
+ }
144
+ #step10 {
145
+ background-color: #D9CCFF;
146
+ transform: rotate(324deg) translateX(140px) rotate(-324deg);
147
+ }
148
+ /* Rotate steps to form a circular layout */
149
+ #step4 {
150
+ transform: rotate(0deg) translateX(250px) rotate(0deg);
151
+ }
152
+ #step5 {
153
+ transform: rotate(25deg) translateX(250px) rotate(-25deg);
154
+ }
155
+ #step6 {
156
+ transform: rotate(60deg) translateX(250px) rotate(-60deg);
157
+ }
158
+ #step7 {
159
+ transform: rotate(120deg) translateX(250px) rotate(-120deg);
160
+ }
161
+ #step8 {
162
+ transform: rotate(155deg) translateX(250px) rotate(-155deg);
163
+ }
164
+ #step9 {
165
+ transform: rotate(180deg) translateX(250px) rotate(-180deg);
166
+ }
167
+ #step10 {
168
+ transform: rotate(205deg) translateX(250px) rotate(-205deg);
169
+ }
170
+ #step1 {
171
+ transform: rotate(240deg) translateX(250px) rotate(-240deg);
172
+ }
173
+ #step2 {
174
+ transform: rotate(300deg) translateX(250px) rotate(-300deg);
175
+ }
176
+ #step3 {
177
+ transform: rotate(335deg) translateX(250px) rotate(-335deg);
178
+ }
179
  a {
180
+ color: white; /* Link color */
181
  text-decoration: none;
182
  }
183
  a:hover {
184
+ color: yellow; /* Color on hover */
185
+ text-decoration: underline; /* Underline on hover */
186
  }
187
  </style>
188
  </head>
189
  <body>
190
  <div class="container">
191
+ <h1></h1>
192
  <div class="circle">
193
  <div class="steps">
194
  <div class="step" id="step1">1. Problem Statement</div>
 
208
  </html>
209
  """
210
 
211
+ # Streamlit: Display the HTML circle with properly spaced steps
212
+ st.markdown(html_code, unsafe_allow_html=True)
213
+ st.write(' ')
214
+ st.write(' ')
215
+ st.write(' ')
216
+ st.write(' ')
217
+ st.write(' ')
218
+ st.write(' ')