Hugging Face's logo

Spaces:
LakshmiHarika
/
MachineLearning
Sleeping

App Files Community
1
LakshmiHarika commited on
Commit
3a30bd5
·
verified ·
1 Parent(s): 4171cc5

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 +25 -118
pages/3Life Cycle of Machine Learning Project.py CHANGED
@@ -1,51 +1,5 @@
1
- import streamlit as st
2
-
3
- st.set_page_config(
4
- page_title="HomePage",
5
- page_icon="🚀",
6
- layout="wide"
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 */
14
- background-color: #FFFFFF; /* Optional: Set a fixed background color */
15
- }
16
- h1, h2, h3, h4, h5, h6 {
17
- color: #BB3385; /* Replace with your heading color */
18
- }
19
- p {
20
- color: #4F4F4F; /* Replace with your paragraph text color */
21
- }
22
- ul li {
23
- color: #4F4F4F; /* List item color */
24
- }
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");
33
- background-size: cover;
34
- background-repeat: no-repeat;
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,7 +14,7 @@ html_code = """
60
  align-items: center;
61
  height: 100vh;
62
  margin: 0;
63
- background-color: #f4f4f9;
64
  }
65
  .container {
66
  text-align: center;
@@ -73,6 +27,7 @@ html_code = """
73
  height: 350px;
74
  margin: 20px auto;
75
  border-radius: 50%;
 
76
  display: flex;
77
  justify-content: center;
78
  align-items: center;
@@ -87,12 +42,12 @@ html_code = """
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;
95
- width: 150px;
96
  margin: 10px;
97
  text-align: center;
98
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
@@ -102,93 +57,51 @@ html_code = """
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: #ff5733;
110
- transform: rotate(0deg) translateX(140px) rotate(0deg);
111
  }
112
  #step2 {
113
- background-color: #33b5ff;
114
- transform: rotate(36deg) translateX(140px) rotate(-36deg);
115
  }
116
  #step3 {
117
- background-color: #33ff57;
118
- transform: rotate(72deg) translateX(140px) rotate(-72deg);
119
  }
120
  #step4 {
121
- background-color: #ff33cc;
122
- transform: rotate(108deg) translateX(140px) rotate(-108deg);
123
  }
124
  #step5 {
125
- background-color: #ffcc33;
126
- transform: rotate(144deg) translateX(140px) rotate(-144deg);
127
  }
128
  #step6 {
129
- background-color: #33ccff;
130
- transform: rotate(180deg) translateX(140px) rotate(-180deg);
131
  }
132
  #step7 {
133
- background-color: #ff33a1;
134
- transform: rotate(216deg) translateX(140px) rotate(-216deg);
135
  }
136
  #step8 {
137
- background-color: #66ff33;
138
- transform: rotate(252deg) translateX(140px) rotate(-252deg);
139
  }
140
  #step9 {
141
- background-color: #9933ff;
142
- transform: rotate(288deg) translateX(140px) rotate(-288deg);
143
  }
144
  #step10 {
145
- background-color: #f7a500;
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,11 +121,5 @@ html_code = """
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(' ')
 
1
+ # Updated HTML for professional and aesthetic appearance
2
+ html_code_updated = """
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
3
  <!DOCTYPE html>
4
  <html lang="en">
5
  <head>
 
14
  align-items: center;
15
  height: 100vh;
16
  margin: 0;
17
+ background-color: #f9f9f9;
18
  }
19
  .container {
20
  text-align: center;
 
27
  height: 350px;
28
  margin: 20px auto;
29
  border-radius: 50%;
30
+ background: url('https://via.placeholder.com/150') center/cover no-repeat; /* Replace with your desired image URL */
31
  display: flex;
32
  justify-content: center;
33
  align-items: center;
 
42
  flex-wrap: wrap;
43
  }
44
  .step {
45
+ background-color: rgba(173, 216, 230, 0.8); /* Light pastel blue */
46
+ color: #333;
47
+ padding: 10px 20px;
48
  border-radius: 8px;
49
  cursor: pointer;
50
+ width: 140px;
51
  margin: 10px;
52
  text-align: center;
53
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 
57
  transition: transform 0.5s ease-in-out;
58
  }
59
  .step:hover {
60
+ background-color: rgba(135, 206, 250, 0.9); /* Slightly darker pastel blue on hover */
61
  }
 
62
  #step1 {
63
+ transform: rotate(0deg) translateX(160px) rotate(0deg);
 
64
  }
65
  #step2 {
66
+ transform: rotate(36deg) translateX(160px) rotate(-36deg);
 
67
  }
68
  #step3 {
69
+ transform: rotate(72deg) translateX(160px) rotate(-72deg);
 
70
  }
71
  #step4 {
72
+ transform: rotate(108deg) translateX(160px) rotate(-108deg);
 
73
  }
74
  #step5 {
75
+ transform: rotate(144deg) translateX(160px) rotate(-144deg);
 
76
  }
77
  #step6 {
78
+ transform: rotate(180deg) translateX(160px) rotate(-180deg);
 
79
  }
80
  #step7 {
81
+ transform: rotate(216deg) translateX(160px) rotate(-216deg);
 
82
  }
83
  #step8 {
84
+ transform: rotate(252deg) translateX(160px) rotate(-252deg);
 
85
  }
86
  #step9 {
87
+ transform: rotate(288deg) translateX(160px) rotate(-288deg);
 
88
  }
89
  #step10 {
90
+ transform: rotate(324deg) translateX(160px) rotate(-324deg);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
91
  }
92
  a {
93
+ color: #333;
94
  text-decoration: none;
95
  }
96
  a:hover {
97
+ color: #000;
98
+ text-decoration: underline;
99
  }
100
  </style>
101
  </head>
102
  <body>
103
  <div class="container">
104
+ <h1>Machine Learning Project Life Cycle</h1>
105
  <div class="circle">
106
  <div class="steps">
107
  <div class="step" id="step1">1. Problem Statement</div>
 
121
  </html>
122
  """
123
 
124
+ # Streamlit: Display the updated HTML
125
+ st.markdown(html_code_updated, unsafe_allow_html=True)