Hugging Face's logo

Spaces:
MagicDash
/
analysis_fastapi
Sleeping

App Files Community
MagicDash commited on
Commit
1bcef2c
·
verified ·
1 Parent(s): b20413b

Update templates/upload.html

Browse files
Files changed (1) hide show
  1. templates/upload.html +226 -226
templates/upload.html CHANGED
@@ -1,226 +1,226 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Upload File</title>
7
- <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
8
- <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
9
- <style>
10
- body {
11
- background-color: #f8f9fa;
12
- }
13
- .container {
14
- margin-top: 50px;
15
- margin-bottom: 50px;
16
- border-radius: 10px;
17
- background: white;
18
- padding: 30px;
19
- box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
20
- }
21
- h1, h2 {
22
- color: #343a40;
23
- }
24
- .btn-primary {
25
- background-color: #b64848;
26
- border: none;
27
- }
28
- .btn-primary:hover {
29
- background-color: #ca1717;
30
- }
31
- .img-fluid {
32
- border-radius: 10px;
33
- margin-top: 10px;
34
- }
35
- .form-label {
36
- font-weight: bold;
37
- }
38
- .chat-container {
39
- max-height: 300px;
40
- overflow-y: auto;
41
- border: 1px solid #dee2e6;
42
- border-radius: 10px;
43
- padding: 10px;
44
- background-color: #f9f9f9;
45
- }
46
-
47
- .chat-message {
48
- margin: 5px 0;
49
- padding: 10px;
50
- border-radius: 20px;
51
- position: relative;
52
- }
53
-
54
- .user-message {
55
- background-color: #ca1717;
56
- color: white;
57
- text-align: left;
58
- margin-right: 50px;
59
- }
60
-
61
- .bot-message {
62
- background-color: #e2e3e5;
63
- color: black;
64
- text-align: left;
65
- margin-left: 50px;
66
- }
67
-
68
- .user-message strong,
69
- .bot-message strong {
70
- display: block;
71
- margin-bottom: 5px;
72
- }
73
- </style>
74
- </head>
75
-
76
- <body>
77
- <div class="text-center mb-4">
78
- <img src="/static/galvatron.png" alt="Galvatron Logo" class="img-fluid" style="max-width: 200px;"> <!-- Adjust the max-width as needed -->
79
- </div>
80
-
81
- <div class="container">
82
- <h1 class="text-center mb-4">Upload CSV or Excel File</h1>
83
- <form action="/process" method="post" enctype="multipart/form-data" class="mb-5">
84
- <div class="mb-3">
85
- <input type="file" name="file" accept=".csv,.xlsx" required class="form-control">
86
- </div>
87
-
88
- <button type="submit" class="btn btn-primary btn-lg btn-block">Upload <i class="fas fa-upload"></i></button>
89
- </form>
90
-
91
- {% if columns %}
92
- <form action="/result" method="post" enctype="multipart/form-data" class="mb-5">
93
- <div class="mb-3">
94
- <label for="target" class="form-label">Select target variable:</label>
95
- <select id="target" name="target" class="form-select">
96
- {% for column in columns %}
97
- <option value="{{ column }}">{{ column }}</option>
98
- {% endfor %}
99
- </select>
100
-
101
- <label for="target" class="form-label">Select Algorithm to do Prediction:</label>
102
- <select name="algorithm" class="form-select">
103
- <option value="Decision Tree">Decision Tree</option>
104
- <option value="Random Forest">Random Forest</option>
105
- </select>
106
- </div>
107
-
108
- <button type="submit" class="btn btn-primary btn-lg btn-block">Upload <i class="fas fa-upload"></i></button>
109
- </form>
110
- {% endif %}
111
-
112
- {% if response1 and response2 %}
113
- <h2>Analysis Result</h2>
114
- <div class="mb-4">
115
- <h3>Countplot Barchart</h3>
116
- <img src="{{ url_for('static', path=plot1_path.split('/')[-1]) }}" alt="Plot 1" class="img-fluid">
117
- <p>{{ response1|safe }}</p>
118
- </div>
119
- <div class="mb-4">
120
- <h3>Histogram Plot</h3>
121
- <img src="{{ url_for('static', path=plot2_path.split('/')[-1]) }}" alt="Plot 2" class="img-fluid">
122
- <p>{{ response2|safe }}</p>
123
- </div>
124
- {% endif %}
125
-
126
- {% if response5 %}
127
- <div class="mb-4">
128
- <h3>Pairplot</h3>
129
- <img src="{{ url_for('static', path=plot5_path.split('/')[-1]) }}" alt="Plot 4" class="img-fluid">
130
- <p>{{ response5|safe }}</p>
131
- </div>
132
- {% endif %}
133
-
134
- {% if response3 %}
135
- <div class="mb-4">
136
- <h3>Multiclass Barplot</h3>
137
- <img src="{{ url_for('static', path=plot3_path.split('/')[-1]) }}" alt="Plot 3" class="img-fluid">
138
- <p>{{ response3|safe }}</p>
139
- </div>
140
- {% endif %}
141
-
142
- {% if response4 %}
143
- <div class="mb-4">
144
- <h3>Multiclass Histogram Plot</h3>
145
- <img src="{{ url_for('static', path=plot4_path.split('/')[-1]) }}" alt="Plot 4" class="img-fluid">
146
- <p>{{ response4|safe }}</p>
147
- </div>
148
- {% endif %}
149
-
150
- {% if response6 %}
151
- <div class="mb-4">
152
- <h3>Multiclass Pairplot</h3>
153
- <img src="{{ url_for('static', path=plot6_path.split('/')[-1]) }}" alt="Plot 4" class="img-fluid">
154
- <p>{{ response6|safe }}</p>
155
- </div>
156
- {% endif %}
157
-
158
- {% if response7 %}
159
- <div class="mb-4">
160
- <h3>Multiclass Pairplot</h3>
161
- <img src="{{ url_for('static', path=plot7_path.split('/')[-1]) }}" alt="Plot 4" class="img-fluid">
162
- <p>{{ response7|safe }}</p>
163
- </div>
164
- {% endif %}
165
-
166
- {% if response8 %}
167
- <div class="mb-4">
168
- <h3>Decision Tree Regressor</h3>
169
- <img src="{{ url_for('static', path=plot8_path.split('/')[-1]) }}" alt="Plot 4" class="img-fluid">
170
- <p>{{ response8|safe }}</p>
171
- </div>
172
- {% endif %}
173
-
174
- {% if response9 %}
175
- <div class="mb-4">
176
- <h3>Decision Tree Classifier</h3>
177
- <img src="{{ url_for('static', path=plot9_path.split('/')[-1]) }}" alt="Plot 4" class="img-fluid">
178
- <p>{{ response9|safe }}</p>
179
- </div>
180
- {% endif %}
181
-
182
- {% if response10 %}
183
- <div class="mb-4">
184
- <h3>Random Forest Regressor</h3>
185
- <img src="{{ url_for('static', path=plot10_path.split('/')[-1]) }}" alt="Plot 4" class="img-fluid">
186
- <p>{{ response10|safe }}</p>
187
- </div>
188
- {% endif %}
189
-
190
- {% if response11 %}
191
- <div class="mb-4">
192
- <h3>Random Forest Classifier</h3>
193
- <img src="{{ url_for('static', path=plot11_path.split('/')[-1]) }}" alt="Plot 4" class="img-fluid">
194
- <p>{{ response11|safe }}</p>
195
- </div>
196
- {% endif %}
197
-
198
- {% if show_conversation %}
199
- <h3>Conversation</h3>
200
- <form action="/ask" method="post" class="mb-5">
201
- <div class="input-group">
202
- <input type="text" name="question" class="form-control" placeholder="Ask your question..." required>
203
- <button type="submit" class="btn btn-outline-secondary">Ask <i class="fas fa-question-circle"></i></button>
204
- </div>
205
- </form>
206
- {% endif %}
207
-
208
- {% if question_responses %}
209
- <h3>Conversation History:</h3>
210
- <div class="chat-container mb-4">
211
- {% for question, response in question_responses %}
212
- <div class="chat-message user-message">
213
- <strong>You:</strong> {{ question }}
214
- </div>
215
- <div class="chat-message bot-message">
216
- <strong>Response:</strong> {{ response|safe }}
217
- </div>
218
- {% endfor %}
219
- </div>
220
- {% endif %}
221
-
222
- </div>
223
-
224
- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
225
- </body>
226
- </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Upload File</title>
7
+ <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
8
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
9
+ <style>
10
+ body {
11
+ background-color: #f8f9fa;
12
+ }
13
+ .container {
14
+ margin-top: 50px;
15
+ margin-bottom: 50px;
16
+ border-radius: 10px;
17
+ background: white;
18
+ padding: 30px;
19
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
20
+ }
21
+ h1, h2 {
22
+ color: #343a40;
23
+ }
24
+ .btn-primary {
25
+ background-color: #b64848;
26
+ border: none;
27
+ }
28
+ .btn-primary:hover {
29
+ background-color: #ca1717;
30
+ }
31
+ .img-fluid {
32
+ border-radius: 10px;
33
+ margin-top: 10px;
34
+ }
35
+ .form-label {
36
+ font-weight: bold;
37
+ }
38
+ .chat-container {
39
+ max-height: 300px;
40
+ overflow-y: auto;
41
+ border: 1px solid #dee2e6;
42
+ border-radius: 10px;
43
+ padding: 10px;
44
+ background-color: #f9f9f9;
45
+ }
46
+
47
+ .chat-message {
48
+ margin: 5px 0;
49
+ padding: 10px;
50
+ border-radius: 20px;
51
+ position: relative;
52
+ }
53
+
54
+ .user-message {
55
+ background-color: #ca1717;
56
+ color: white;
57
+ text-align: left;
58
+ margin-right: 50px;
59
+ }
60
+
61
+ .bot-message {
62
+ background-color: #e2e3e5;
63
+ color: black;
64
+ text-align: left;
65
+ margin-left: 50px;
66
+ }
67
+
68
+ .user-message strong,
69
+ .bot-message strong {
70
+ display: block;
71
+ margin-bottom: 5px;
72
+ }
73
+ </style>
74
+ </head>
75
+
76
+ <body>
77
+ <div class="text-center mb-4">
78
+ <img src="/static/Arif.png" alt="Galvatron Logo" class="img-fluid" style="max-width: 200px;"> <!-- Adjust the max-width as needed -->
79
+ </div>
80
+
81
+ <div class="container">
82
+ <h1 class="text-center mb-4">Upload CSV or Excel File</h1>
83
+ <form action="/process" method="post" enctype="multipart/form-data" class="mb-5">
84
+ <div class="mb-3">
85
+ <input type="file" name="file" accept=".csv,.xlsx" required class="form-control">
86
+ </div>
87
+
88
+ <button type="submit" class="btn btn-primary btn-lg btn-block">Upload <i class="fas fa-upload"></i></button>
89
+ </form>
90
+
91
+ {% if columns %}
92
+ <form action="/result" method="post" enctype="multipart/form-data" class="mb-5">
93
+ <div class="mb-3">
94
+ <label for="target" class="form-label">Select target variable:</label>
95
+ <select id="target" name="target" class="form-select">
96
+ {% for column in columns %}
97
+ <option value="{{ column }}">{{ column }}</option>
98
+ {% endfor %}
99
+ </select>
100
+
101
+ <label for="target" class="form-label">Select Algorithm to do Prediction:</label>
102
+ <select name="algorithm" class="form-select">
103
+ <option value="Decision Tree">Decision Tree</option>
104
+ <option value="Random Forest">Random Forest</option>
105
+ </select>
106
+ </div>
107
+
108
+ <button type="submit" class="btn btn-primary btn-lg btn-block">Upload <i class="fas fa-upload"></i></button>
109
+ </form>
110
+ {% endif %}
111
+
112
+ {% if response1 and response2 %}
113
+ <h2>Analysis Result</h2>
114
+ <div class="mb-4">
115
+ <h3>Countplot Barchart</h3>
116
+ <img src="{{ url_for('static', path=plot1_path.split('/')[-1]) }}" alt="Plot 1" class="img-fluid">
117
+ <p>{{ response1|safe }}</p>
118
+ </div>
119
+ <div class="mb-4">
120
+ <h3>Histogram Plot</h3>
121
+ <img src="{{ url_for('static', path=plot2_path.split('/')[-1]) }}" alt="Plot 2" class="img-fluid">
122
+ <p>{{ response2|safe }}</p>
123
+ </div>
124
+ {% endif %}
125
+
126
+ {% if response5 %}
127
+ <div class="mb-4">
128
+ <h3>Pairplot</h3>
129
+ <img src="{{ url_for('static', path=plot5_path.split('/')[-1]) }}" alt="Plot 4" class="img-fluid">
130
+ <p>{{ response5|safe }}</p>
131
+ </div>
132
+ {% endif %}
133
+
134
+ {% if response3 %}
135
+ <div class="mb-4">
136
+ <h3>Multiclass Barplot</h3>
137
+ <img src="{{ url_for('static', path=plot3_path.split('/')[-1]) }}" alt="Plot 3" class="img-fluid">
138
+ <p>{{ response3|safe }}</p>
139
+ </div>
140
+ {% endif %}
141
+
142
+ {% if response4 %}
143
+ <div class="mb-4">
144
+ <h3>Multiclass Histogram Plot</h3>
145
+ <img src="{{ url_for('static', path=plot4_path.split('/')[-1]) }}" alt="Plot 4" class="img-fluid">
146
+ <p>{{ response4|safe }}</p>
147
+ </div>
148
+ {% endif %}
149
+
150
+ {% if response6 %}
151
+ <div class="mb-4">
152
+ <h3>Multiclass Pairplot</h3>
153
+ <img src="{{ url_for('static', path=plot6_path.split('/')[-1]) }}" alt="Plot 4" class="img-fluid">
154
+ <p>{{ response6|safe }}</p>
155
+ </div>
156
+ {% endif %}
157
+
158
+ {% if response7 %}
159
+ <div class="mb-4">
160
+ <h3>Multiclass Pairplot</h3>
161
+ <img src="{{ url_for('static', path=plot7_path.split('/')[-1]) }}" alt="Plot 4" class="img-fluid">
162
+ <p>{{ response7|safe }}</p>
163
+ </div>
164
+ {% endif %}
165
+
166
+ {% if response8 %}
167
+ <div class="mb-4">
168
+ <h3>Decision Tree Regressor</h3>
169
+ <img src="{{ url_for('static', path=plot8_path.split('/')[-1]) }}" alt="Plot 4" class="img-fluid">
170
+ <p>{{ response8|safe }}</p>
171
+ </div>
172
+ {% endif %}
173
+
174
+ {% if response9 %}
175
+ <div class="mb-4">
176
+ <h3>Decision Tree Classifier</h3>
177
+ <img src="{{ url_for('static', path=plot9_path.split('/')[-1]) }}" alt="Plot 4" class="img-fluid">
178
+ <p>{{ response9|safe }}</p>
179
+ </div>
180
+ {% endif %}
181
+
182
+ {% if response10 %}
183
+ <div class="mb-4">
184
+ <h3>Random Forest Regressor</h3>
185
+ <img src="{{ url_for('static', path=plot10_path.split('/')[-1]) }}" alt="Plot 4" class="img-fluid">
186
+ <p>{{ response10|safe }}</p>
187
+ </div>
188
+ {% endif %}
189
+
190
+ {% if response11 %}
191
+ <div class="mb-4">
192
+ <h3>Random Forest Classifier</h3>
193
+ <img src="{{ url_for('static', path=plot11_path.split('/')[-1]) }}" alt="Plot 4" class="img-fluid">
194
+ <p>{{ response11|safe }}</p>
195
+ </div>
196
+ {% endif %}
197
+
198
+ {% if show_conversation %}
199
+ <h3>Conversation</h3>
200
+ <form action="/ask" method="post" class="mb-5">
201
+ <div class="input-group">
202
+ <input type="text" name="question" class="form-control" placeholder="Ask your question..." required>
203
+ <button type="submit" class="btn btn-outline-secondary">Ask <i class="fas fa-question-circle"></i></button>
204
+ </div>
205
+ </form>
206
+ {% endif %}
207
+
208
+ {% if question_responses %}
209
+ <h3>Conversation History:</h3>
210
+ <div class="chat-container mb-4">
211
+ {% for question, response in question_responses %}
212
+ <div class="chat-message user-message">
213
+ <strong>You:</strong> {{ question }}
214
+ </div>
215
+ <div class="chat-message bot-message">
216
+ <strong>Response:</strong> {{ response|safe }}
217
+ </div>
218
+ {% endfor %}
219
+ </div>
220
+ {% endif %}
221
+
222
+ </div>
223
+
224
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
225
+ </body>
226
+ </html>