Hugging Face's logo

Spaces:
iamironman4279
/
BloodCancerdetention
Runtime error

App Files Community
iamironman4279 commited on
Commit
9c15940
•
1 Parent(s): 091349e

Upload 3 files

Browse files
Files changed (4) hide show
  1. templates +0 -0
  2. templates/index.html +216 -0
  3. templates/result.html +76 -0
  4. templates/upload.html +117 -0
templates DELETED
File without changes
templates/index.html ADDED
@@ -0,0 +1,216 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <title>Cancer Detection</title>
5
+ <meta charset="utf-8">
6
+ <meta name="description" content="">
7
+ <meta name="viewport" content="width=device-width, initial-scale=1">
8
+
9
+ <link rel="shortcut icon" type="image/x-icon" href="static/img/letter.png">
10
+ <link rel="stylesheet" href="static/css/bootstrap.min.css">
11
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css" rel="stylesheet" type="text/css" />
12
+ <link rel="stylesheet" href="static/css/animate.css">
13
+ <link rel="stylesheet" href="static/css/all.min.css">
14
+ <link rel="stylesheet" href="static/css/default.css">
15
+ <link rel="stylesheet" href="static/css/style.css">
16
+ <link rel="stylesheet" class="color-changing" href="static/css/color.css">
17
+ <link rel="stylesheet" href="static/css/responsive.css">
18
+ </head>
19
+
20
+ <body class="animated bounceInDown" style="animation-duration: 2s;">
21
+
22
+ <!-- start header -->
23
+ <nav class="navbar fixed-top navbar-dark bg-dark justify-content-center" style="opacity: 0.6;">
24
+ <a class="navbar-brand justify-content-center animated infinite pulse delay-3s" href="#">
25
+ <h1 class="fs-42 slab mb-20 wow fadeInDown">Velth Care Blood Cancer Detection </h1>
26
+ </a>
27
+ </nav>
28
+ <!-- End Header -->
29
+
30
+ <!-- Banner start -->
31
+ <section class="#slider-3 #relative">
32
+ <div class="#owl-carousel #owl-theme #main-slider">
33
+ <div class="#item">
34
+
35
+ <div class="each-slider flex_center" style="background-image: url(static/img/10.jpg);" data-overlay="3">
36
+ <div class="container">
37
+ <div class="row">
38
+ <div class="col-lg-6 text-left">
39
+ <div class="banner-text-left white z-5">
40
+ <h1 class="black slab mb-15" style="color: white;">
41
+ "Breaking Barriers: Enhancing Blood Cancer Detection Methods"
42
+ </h1>
43
+
44
+
45
+ </div>
46
+ </div>
47
+ </div>
48
+ </div>
49
+ </div>
50
+
51
+ </div>
52
+
53
+ </div>
54
+ </section>
55
+ <!-- Banner ends here -->
56
+
57
+ <!-- donate form starts here -->
58
+ <section class="donate-form">
59
+ <div class="container">
60
+ <div class="row">
61
+ <div class="col-lg-12">
62
+ <div class="donate-form-main bg-lines" data-overlay="9">
63
+ <div class="z-5">
64
+ <h1 class="fs-42 slab mb-20 wow fadeInDown">Help Us Overcome Cancer</h1>
65
+
66
+ </div>
67
+ </div>
68
+ </div>
69
+ </div>
70
+ </div>
71
+ </section>
72
+
73
+ <!-- donate form ends here -->
74
+
75
+ <!-- Things you can do section starts here-->
76
+
77
+ <section class="find-cases bg-light-white pt-90 pb-60 relative ">
78
+ <div class="container">
79
+ <div class="row align-items-end mb-30">
80
+ <div class="col-lg-8 text-center text-lg-left">
81
+ <img src="static/img/icons/line.png" alt="" class="line mb-15">
82
+ <h1 class="fs-42 slab f-800 mb-md-20">Blood Cancer Detection</h1>
83
+ </div>
84
+ </div>
85
+
86
+ <div class="each-case bg-lines" data-overlay="9">
87
+ <div class="z-5">
88
+ <img src="static/img/icons/case2.png" alt="">
89
+ <h3><a href="{{ url_for('upload') }}" class="slab">Blood Cancer Detection</a></h3>
90
+ <a href="{{ url_for('upload') }}" class="btn btn-shade-yellow ml-30 ml-xs-10">
91
+ <span class="z-5 relative">Continue</span>
92
+ </a>
93
+ </div>
94
+ </div>
95
+
96
+ </div>
97
+
98
+
99
+ </div>
100
+ </div>
101
+ </div>
102
+ <img src="static/img/other/dot-circle.png" class="find-c-bg" alt="">
103
+ </section>
104
+ <!-- Things you can do section ends here -->
105
+
106
+
107
+ <!-- The Process section starts here -->
108
+
109
+
110
+
111
+ <!-- location png file here with padding -->
112
+
113
+ <section class="location bg-light-white pt-90 pb-90 pb-md-50">
114
+ <div class="container">
115
+ <div class="row">
116
+ <div class="col-lg-12 text-center">
117
+ <img src="img/icons/line.png" alt="" class="line mb-15">
118
+ <h1 class="fs-42 slab f-800">Understanding Blood Cancer</h1>
119
+ <p class="location-mp">Blood cancer, also known as hematologic cancer, encompasses a group of malignancies that affect the blood, bone marrow, and lymphatic system. These cancers originate from abnormal growth and proliferation of blood cells, disrupting the body's normal processes of hematopoiesis and immune function.Among the various types of blood cancer, leukemia, lymphoma, and multiple myeloma are the most prevalent.</p>
120
+ </div>
121
+ </div>
122
+
123
+ </div>
124
+ </div>
125
+ </section>
126
+ <!-- locations and pinned tops ends here -->
127
+
128
+ <!-- bootstrap_modal starts here -->
129
+
130
+
131
+
132
+
133
+ <!-- Section Ends Here-->
134
+
135
+ <!-- footer starts here -->
136
+ <footer class="bg-black footer-a pb-30" data-overlay="1" style="background-image: url('img/bg/ftr.jpg');">
137
+ <div class="container z-5">
138
+ <div class="row">
139
+ <div class="col-lg-12">
140
+ <div class="footer-newsletter bg-yellow">
141
+ <div class="row align-items-center">
142
+ <div class="col-lg-6 text-center text-lg-left">
143
+ <h2 class="fs-35 f-600 slab">Post Your Feedback</h2>
144
+ </div>
145
+ <div class="col-lg-6 text-center text-lg-right">
146
+ <form action="/submit" method="POST">
147
+ <div class="callback-footer-2 d-flex flex-column flex-sm-row">
148
+ <input type="text" name="feedback" class="form-control input-white shadow-2" placeholder="Enter Your Feedback...">
149
+ <button type="submit" class="btn btn-black ml-20 ml-xs-00 mt-xs-15">Submit</button>
150
+ </div>
151
+ </form>
152
+ </div>
153
+
154
+ </div>
155
+ </div>
156
+ </div>
157
+ </div>
158
+ </div>
159
+ <div class="container z-5">
160
+ <div class="row mt-15">
161
+ <div class="col-lg-4 col-sm-6 mb-md-30">
162
+ <div class="abot-ftr">
163
+ <img src="static/img/icons/case4.png" alt="" height="60px" width="65px">
164
+ <p>In conclusion, blood cancer is a complex and diverse group of diseases that requires comprehensive medical care and support. By understanding the nature of these cancers and advocating for better research and treatment options, we can work towards improving the lives of individuals affected by blood cancer.</p>
165
+
166
+ </div>
167
+ </div>
168
+ <div class="col-lg-4 col-sm-6 pl-50 pl-md-15">
169
+ <h5 class="fs-18 f-700 slab opacity-8 yellow"></h5>
170
+ <img src="img/other/map-f.png" class="mt-25" alt="">
171
+ </div>
172
+ <div class="col-12">
173
+ <div class="hr-2 bg-light-white mt-60 mb-30 opacity-1"></div>
174
+ </div>
175
+ </div>
176
+ <div class="row copy-footer">
177
+ <div class="col-sm-6 text-center text-sm-left">
178
+ <p class="mb-0 mb-xs-15">© 2024 G.hemanth kumar reddy,U.Pavani bai,P.Vinela All Rights Reserved</p>
179
+ </div>
180
+ <div class="col-sm-6 text-center text-sm-right">
181
+ <ul class="social-icons team-social footer-social">
182
+ <li> <a href="www.facebook.com"><i class="fab fa-facebook-f"></i></a>
183
+ </li>
184
+ <li> <a href="wwww.twitter.com"><i class="fab fa-twitter"></i></a>
185
+ </li>
186
+ <li> <a href="www.linkedin.com"><i class="fab fa-linkedin-in"></i></a>
187
+ </li>
188
+ <li><a href="www.instagram.com"><i class="fab fa-instagram"></i></a></li>
189
+ </ul>
190
+ </div>
191
+ </div>
192
+ </div>
193
+ <a href="#" class="scroll-btn bg-blue opacity-0"><i class="fas fa-arrow-up"></i></a>
194
+ </footer>
195
+ <!-- footer end -->
196
+ <!-- JS Files/Scripts -->
197
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
198
+ <script src="static/js/modernizr-3.5.0.min.js"></script>
199
+ <script src="static/js/jquery-1.12.4.min.js"></script>
200
+ <script src="static/js/bootstrap.bundle.min.js"></script>
201
+ <script src="static/js/owl.carousel.min.js"></script>
202
+ <script src="static/js/jquery.magnific-popup.min.js"></script>
203
+ <script src="static/js/jquery.nice-select.min.js"></script>
204
+ <script src="static/js/jquery.waypoints.min.js"></script>
205
+ <script src="static/js/jquery.counterup.min.js"></script>
206
+ <script src="static/js/jquery.countdown.min.js"></script>
207
+ <script src="static/js/isotope.pkgd.min.js"></script>
208
+ <script src="static/js/jquery.meanmenu.min.js"></script>
209
+ <script src="static/js/jquery.event.move.js"></script>
210
+ <script src="static/js/main.js"></script>
211
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
212
+ <script type="text/javascript" src="static/js/style.js" ></script>
213
+ <script src="https://kit.fontawesome.com/81b4ce2477.js" crossorigin="anonymous"></script>
214
+ </body>
215
+
216
+ </html>
templates/result.html ADDED
@@ -0,0 +1,76 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <title>Result</title>
5
+ <style>
6
+ body {
7
+ font-family: Arial, sans-serif;
8
+ text-align: center;
9
+ }
10
+ .prediction {
11
+ font-size: 24px;
12
+ margin-bottom: 20px;
13
+ }
14
+ .swapped-img {
15
+ width: 400px;
16
+ margin: 0 auto;
17
+ }
18
+ .back-button {
19
+ background-color: #3cb371; /* Green color */
20
+ color: white; /* White text color */
21
+ border: none; /* Remove border */
22
+ padding: 10px 15px; /* Padding for better appearance */
23
+ cursor: pointer; /* Change cursor to pointer */
24
+ display: inline-block; /* Display as inline block */
25
+ border-radius: 5px; /* Add some border radius */
26
+ margin-top: 20px; /* Add margin to separate from image */
27
+ }
28
+ .back-button:hover {
29
+ background-color: #32a052; /* Darker shade of green on hover */
30
+ }
31
+ .treatment-info {
32
+ text-align: left; /* Align text to the left */
33
+ margin: 20px auto; /* Add margin for better spacing */
34
+ max-width: 600px; /* Limit maximum width for better readability */
35
+ }
36
+ .treatment-info p {
37
+ margin-bottom: 10px; /* Add some bottom margin to separate paragraphs */
38
+ }
39
+ .treatment-info ul {
40
+ margin-bottom: 20px; /* Add some bottom margin to separate from next element */
41
+ }
42
+ </style>
43
+ </head>
44
+ <body>
45
+ <h1>Result</h1>
46
+ <div class="prediction">
47
+ <strong>Cancer detection:</strong> {{ prediction }}
48
+ </div>
49
+ <img src="data:image/png;base64,{{ swapped_img_base64 }}" alt="Swapped Image" class="swapped-img">
50
+ <br>
51
+ <button class="back-button" onclick="goBack()">Back</button>
52
+
53
+ <div class="treatment-info">
54
+ <h2>Treatment Information:</h2>
55
+ {% if prediction == "Cancer" %}
56
+ <p>If the prediction is cancer, it's important to approach treatment carefully. Here are some steps you can take:</p>
57
+ <ul>
58
+ <li>Consult with a qualified oncologist for diagnosis and treatment options.</li>
59
+ <li>Consider various treatment modalities such as surgery, chemotherapy, radiation therapy, immunotherapy, or targeted therapy.</li>
60
+ <li>Follow a personalized treatment plan tailored to your specific type and stage of cancer.</li>
61
+ <li>Seek emotional support from loved ones, support groups, or counseling services.</li>
62
+ <li>Maintain a healthy lifestyle with a balanced diet, regular exercise, and stress management techniques.</li>
63
+ </ul>
64
+ {% else %}
65
+ <p>Congratulations! You don't have cancer. It's always good to receive a normal result.</p>
66
+
67
+ {% endif %}
68
+ </div>
69
+
70
+ <script>
71
+ function goBack() {
72
+ window.history.back();
73
+ }
74
+ </script>
75
+ </body>
76
+ </html>
templates/upload.html ADDED
@@ -0,0 +1,117 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <title>Upload Image</title>
5
+ <style>
6
+ body {
7
+ font-family: Arial, sans-serif;
8
+ }
9
+ .container {
10
+ margin: 20px auto;
11
+ width: 400px; /* Increased width to accommodate larger image */
12
+ text-align: center;
13
+ }
14
+ .container h1 {
15
+ text-align: center;
16
+ }
17
+ .container form {
18
+ margin-top: 20px;
19
+ text-align: center;
20
+ }
21
+ /* Style for input file */
22
+ input[type="file"] {
23
+ display: none; /* Hide the default file input */
24
+ }
25
+ .custom-file-upload {
26
+ border: 1px solid #3cb371; /* Green border */
27
+ background-color: #3cb371; /* Green background color */
28
+ color: white; /* White text color */
29
+ padding: 10px 15px; /* Padding for better appearance */
30
+ cursor: pointer; /* Change cursor to pointer */
31
+ display: inline-block; /* Display as inline block */
32
+ border-radius: 5px; /* Add some border radius */
33
+ margin-top: 20px; /* Add margin to separate from image */
34
+ }
35
+ .custom-file-upload:hover {
36
+ background-color: #32a052; /* Darker shade of green on hover */
37
+ }
38
+ /* Style for upload button */
39
+ button[type="submit"] {
40
+ background-color: #3cb371; /* Green background color */
41
+ color: white; /* White text color */
42
+ border: none; /* Remove border */
43
+ padding: 10px 15px; /* Padding for better appearance */
44
+ cursor: pointer; /* Change cursor to pointer */
45
+ display: inline-block; /* Display as inline block */
46
+ border-radius: 5px; /* Add some border radius */
47
+ margin-top: 10px; /* Add margin to separate from file input */
48
+ }
49
+ button[type="submit"]:hover {
50
+ background-color: #32a052; /* Darker shade of green on hover */
51
+ }
52
+ /* Style for uploaded image */
53
+ .uploaded-image {
54
+ max-width: 100%; /* Limit the width of the image */
55
+ margin-top: 20px; /* Add margin to separate from file input */
56
+ }
57
+ /* Style for awareness content */
58
+ .awareness-content {
59
+ text-align: left;
60
+ margin-top: 50px; /* Add space between image and awareness content */
61
+ }
62
+ .awareness-content p {
63
+ font-size: 16px; /* Normal font size */
64
+ }
65
+ .awareness-content ul {
66
+ margin-top: 10px;
67
+ margin-left: 20px; /* Indent bullet points */
68
+ font-size: 16px; /* Normal font size for bullet points */
69
+ }
70
+ </style>
71
+ </head>
72
+ <body>
73
+ <div class="container">
74
+ <h1>Upload Image</h1>
75
+ <div id="image-container">
76
+ <!-- This div will contain the uploaded image -->
77
+ </div>
78
+ <form method="POST" enctype="multipart/form-data">
79
+ <label for="file-upload" class="custom-file-upload">Choose File</label>
80
+ <input id="file-upload" type="file" name="file" accept="image/*" required><br><br>
81
+ <button type="submit">Upload</button>
82
+ </form>
83
+ </div>
84
+
85
+ <!-- Awareness Content -->
86
+ <div class="awareness-content">
87
+ <p>March is Blood Cancer Awareness Month, a time dedicated to raising awareness about blood cancers, including leukemia, lymphoma, and myeloma. Blood cancers occur when abnormal blood cells start growing uncontrollably, interfering with the normal function of the blood, bone marrow, and lymphatic system.</p>
88
+ <p>Here are some key points to be aware of:</p>
89
+ <ul>
90
+ <li>Blood cancer affects people of all ages, including children and adults.</li>
91
+ <li>Early detection is crucial for improving outcomes, so it's important to recognize the signs and symptoms, such as persistent fatigue, unexplained weight loss, easy bruising or bleeding, and frequent infections.</li>
92
+ <li>Treatment options for blood cancer may include chemotherapy, radiation therapy, immunotherapy, targeted therapy, and stem cell transplantation.</li>
93
+ <li>Supportive care, such as blood transfusions, medications to manage symptoms, and psychological support, plays a vital role in improving quality of life for patients undergoing treatment.</li>
94
+ <li>Advances in research have led to significant progress in understanding the biology of blood cancers and developing new treatment approaches, offering hope to patients and their families.</li>
95
+ <li>During Blood Cancer Awareness Month, various organizations and communities host events, fundraisers, and educational campaigns to raise awareness, support patients and families, and fund research initiatives.</li>
96
+ <li>By increasing awareness, supporting research, and advocating for improved access to care, we can make a difference in the lives of those affected by blood cancer.</li>
97
+ </ul>
98
+ </div>
99
+
100
+ <script>
101
+ document.querySelector('#file-upload').addEventListener('change', function(event) {
102
+ var file = event.target.files[0];
103
+ var reader = new FileReader();
104
+
105
+ reader.onload = function(event) {
106
+ var img = document.createElement('img');
107
+ img.src = event.target.result;
108
+ img.classList.add('uploaded-image');
109
+ document.getElementById('image-container').innerHTML = '';
110
+ document.getElementById('image-container').appendChild(img);
111
+ };
112
+
113
+ reader.readAsDataURL(file);
114
+ });
115
+ </script>
116
+ </body>
117
+ </html>