Arafath10 commited on
Commit
66b950f
·
verified ·
1 Parent(s): 58d4ba4

Upload index.html

Browse files
Files changed (1) hide show
  1. index.html +222 -0
index.html ADDED
@@ -0,0 +1,222 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Stock Prediction and Graph</title>
7
+ <style>
8
+ body {
9
+ font-family: Arial, sans-serif;
10
+ margin: 0;
11
+ padding: 0;
12
+ background: #f4f4f4;
13
+ display: flex;
14
+ justify-content: center;
15
+ align-items: center;
16
+ height: 100vh;
17
+ }
18
+
19
+ .container {
20
+ background: white;
21
+ padding: 20px;
22
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
23
+ border-radius: 8px;
24
+ text-align: center;
25
+ width: 80%;
26
+ max-width: 600px;
27
+ }
28
+
29
+ h1 {
30
+ color: #333;
31
+ }
32
+
33
+ img {
34
+ max-width: 100%;
35
+ height: auto;
36
+ border: 1px solid #ddd;
37
+ border-radius: 4px;
38
+ padding: 5px;
39
+ margin-top: 20px;
40
+ display: none; /* Hide the image initially */
41
+ }
42
+
43
+ .form-group {
44
+ margin-bottom: 15px;
45
+ }
46
+
47
+ .form-group label {
48
+ display: block;
49
+ margin-bottom: 5px;
50
+ text-align: left;
51
+ }
52
+
53
+ .form-group input, .form-group select {
54
+ width: 100%;
55
+ padding: 8px;
56
+ box-sizing: border-box;
57
+ }
58
+
59
+ .form-group button {
60
+ background-color: #007BFF;
61
+ color: white;
62
+ border: none;
63
+ padding: 10px 20px;
64
+ margin-top: 10px;
65
+ border-radius: 5px;
66
+ cursor: pointer;
67
+ transition: background-color 0.3s;
68
+ }
69
+
70
+ .form-group button:hover {
71
+ background-color: #0056b3;
72
+ }
73
+
74
+ .result {
75
+ margin-top: 20px;
76
+ }
77
+
78
+ .result pre {
79
+ text-align: left;
80
+ background: #f9f9f9;
81
+ padding: 10px;
82
+ border-radius: 5px;
83
+ border: 1px solid #ddd;
84
+ max-height: 300px;
85
+ overflow-y: auto;
86
+ }
87
+
88
+ .loader {
89
+ border: 16px solid #f3f3f3;
90
+ border-radius: 50%;
91
+ border-top: 16px solid #3498db;
92
+ width: 60px;
93
+ height: 60px;
94
+ animation: spin 2s linear infinite;
95
+ display: none;
96
+ margin: 20px auto;
97
+ }
98
+
99
+ @keyframes spin {
100
+ 0% { transform: rotate(0deg); }
101
+ 100% { transform: rotate(360deg); }
102
+ }
103
+
104
+ .warning {
105
+ color: red;
106
+ margin-top: 10px;
107
+ }
108
+ </style>
109
+ </head>
110
+ <body>
111
+ <div class="container">
112
+ <h1>Stock Prediction and Graph</h1>
113
+ <div class="form-group">
114
+ <label for="symbol">Stock Symbol:</label>
115
+ <input type="text" id="symbol" placeholder="Enter stock symbol (e.g., AAPL)">
116
+ </div>
117
+ <div class="form-group">
118
+ <label for="interval">Interval (in days):</label>
119
+ <input type="number" id="interval" placeholder="Enter prediction interval in days">
120
+ </div>
121
+ <div class="form-group">
122
+ <button onclick="getPrediction()">Get Prediction</button>
123
+ </div>
124
+ <div class="loader" id="loader"></div>
125
+ <div class="warning" id="warning"></div>
126
+ <div class="result" id="result">
127
+ <h2>Prediction Result</h2>
128
+ <pre id="predictionOutput"></pre>
129
+ </div>
130
+ <div class="form-group">
131
+ <label for="graphType">Graph Type:</label>
132
+ <select id="graphType">
133
+ <option value="line">Line</option>
134
+ <option value="bar">Bar</option>
135
+ <option value="scatter">Scatter</option>
136
+ <option value="buy_sell">Buy/Sell</option>
137
+ </select>
138
+ </div>
139
+ <div class="form-group">
140
+ <button onclick="getGraph()">Get Graph</button>
141
+ </div>
142
+ <div class="loader" id="graphLoader"></div>
143
+ <div class="warning" id="graphWarning"></div>
144
+ <div class="result" id="graphResult">
145
+ <h2>Stock Graph</h2>
146
+ <img id="stockGraph" src="" alt="Stock graph">
147
+ </div>
148
+ </div>
149
+
150
+ <script>
151
+ const baseUrl = 'http://127.0.0.1:8000';
152
+
153
+ function showLoader(loaderId) {
154
+ document.getElementById(loaderId).style.display = 'block';
155
+ }
156
+
157
+ function hideLoader(loaderId) {
158
+ document.getElementById(loaderId).style.display = 'none';
159
+ }
160
+
161
+ function showWarning(warningId, message) {
162
+ document.getElementById(warningId).textContent = message;
163
+ }
164
+
165
+ function clearWarning(warningId) {
166
+ document.getElementById(warningId).textContent = '';
167
+ }
168
+
169
+ async function getPrediction() {
170
+ const symbol = document.getElementById('symbol').value;
171
+ const interval = document.getElementById('interval').value;
172
+
173
+ if (!symbol || !interval) {
174
+ showWarning('warning', 'Please enter both stock symbol and interval.');
175
+ return;
176
+ }
177
+
178
+ clearWarning('warning');
179
+ showLoader('loader');
180
+
181
+ try {
182
+ const response = await fetch(`${baseUrl}/predict?symbol=${symbol}&interval=${interval}`);
183
+ const data = await response.json();
184
+ document.getElementById('predictionOutput').textContent = JSON.stringify(data, null, 2);
185
+ } catch (error) {
186
+ showWarning('warning', 'Error fetching prediction data.');
187
+ } finally {
188
+ hideLoader('loader');
189
+ }
190
+ }
191
+
192
+ async function getGraph() {
193
+ const symbol = document.getElementById('symbol').value;
194
+ const graphType = document.getElementById('graphType').value;
195
+
196
+ if (!symbol || !graphType) {
197
+ showWarning('graphWarning', 'Please enter the stock symbol and select a graph type.');
198
+ return;
199
+ }
200
+
201
+ clearWarning('graphWarning');
202
+ showLoader('graphLoader');
203
+
204
+ const graphUrl = `${baseUrl}/graph?symbol=${symbol}&graph_type=${graphType}`;
205
+ const imgElement = document.getElementById('stockGraph');
206
+ const newSrc = graphUrl + '&time=' + new Date().getTime(); // Prevent caching
207
+
208
+ imgElement.onload = () => {
209
+ hideLoader('graphLoader');
210
+ imgElement.style.display = 'block'; // Show the image when it is loaded
211
+ };
212
+
213
+ imgElement.onerror = () => {
214
+ hideLoader('graphLoader');
215
+ showWarning('graphWarning', 'Error loading graph image.');
216
+ };
217
+
218
+ imgElement.src = newSrc;
219
+ }
220
+ </script>
221
+ </body>
222
+ </html>