Hugging Face's logo

Spaces:
atsuga
/
multistep
Sleeping

App Files Community
atsuga commited on
Commit
a573be7
·
verified ·
1 Parent(s): 659628a

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +123 -177
templates/index.html CHANGED
@@ -1,177 +1,123 @@
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>Prediksi Harga Emas</title>
7
- <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
8
- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
9
- <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
10
- <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
11
- </head>
12
- <body>
13
- <div class="container mt-5">
14
- <h1>Grafik Harga Jual Emas 30 Hari Terakhir</h1>
15
-
16
- <!-- Grafik Harga Emas -->
17
- <canvas id="sell-chart" width="400" height="200"></canvas>
18
-
19
- <!-- Tab navigation -->
20
- <ul class="nav nav-tabs" id="myTab" role="tablist">
21
- <li class="nav-item" role="presentation">
22
- <a class="nav-link active" id="auto-tab" data-toggle="tab" href="#auto-predict" role="tab" aria-controls="auto-predict" aria-selected="true">Auto Predict</a>
23
- </li>
24
- <li class="nav-item" role="presentation">
25
- <a class="nav-link" id="input-tab" data-toggle="tab" href="#input-predict" role="tab" aria-controls="input-predict" aria-selected="false">Input Predict</a>
26
- </li>
27
- </ul>
28
-
29
- <div class="tab-content" id="myTabContent">
30
- <!-- Auto Predict Tab -->
31
- <div class="tab-pane fade show active" id="auto-predict" role="tabpanel" aria-labelledby="auto-tab">
32
- <h2>Prediksi Otomatis (Dari API):</h2>
33
- <button id="auto-predict-btn" class="btn btn-secondary">Dapatkan Prediksi Otomatis</button>
34
- <div id="auto-prediction-result" class="mt-3">
35
- <p id="auto-last-price"></p>
36
- <p id="auto-predicted-price"></p>
37
- <p id="auto-percentage-change"></p>
38
- </div>
39
- </div>
40
-
41
- <!-- Input Predict Tab -->
42
- <div class="tab-pane fade" id="input-predict" role="tabpanel" aria-labelledby="input-tab">
43
- <h2>Prediksi Berdasarkan Input:</h2>
44
- <form id="input-form">
45
- <div class="form-group">
46
- <label for="sell-1">Harga Sell H-1:</label>
47
- <input type="number" class="form-control" id="sell-1" required>
48
- </div>
49
- <div class="form-group">
50
- <label for="sell-2">Harga Sell H-2:</label>
51
- <input type="number" class="form-control" id="sell-2" required>
52
- </div>
53
- <div class="form-group">
54
- <label for="sell-3">Harga Sell H-3:</label>
55
- <input type="number" class="form-control" id="sell-3" required>
56
- </div>
57
- <button type="submit" class="btn btn-primary">Prediksi</button>
58
- </form>
59
- <div id="input-prediction-result" class="mt-3">
60
- <p id="input-predicted-price"></p>
61
- <p id="input-percentage-change"></p>
62
- </div>
63
- </div>
64
- </div>
65
- </div>
66
-
67
- <script>
68
-
69
- var sellPrices = [];
70
- // Grafik Harga Emas: Ambil data untuk grafik dari URL API berbeda
71
- $(document).ready(function() {
72
- $.ajax({
73
- url: 'https://api-pluang.pluang.com/api/v3/asset/gold/pricing?daysLimit=30', // Ganti dengan URL API yang sesuai
74
- type: 'GET',
75
- success: function(data) {
76
- var dates = data.data.history.map(function(item) {
77
- return item.updated_at.split('T')[0]; // Ambil hanya tanggal
78
- });
79
- sellPrices = data.data.history.map(function(item) {
80
- return item.sell;
81
- });
82
-
83
- // Balikkan urutan data (dari data pertama ke terakhir)
84
- dates.reverse();
85
- sellPrices.reverse();
86
-
87
- // Tampilkan grafik harga sell
88
- var ctx = document.getElementById('sell-chart').getContext('2d');
89
- var sellChart = new Chart(ctx, {
90
- type: 'line',
91
- data: {
92
- labels: dates, // Tanggal
93
- datasets: [{
94
- label: 'Harga Sell Emas',
95
- data: sellPrices, // Harga sell
96
- borderColor: 'rgba(75, 192, 192, 1)',
97
- borderWidth: 2,
98
- fill: false
99
- }]
100
- },
101
- options: {
102
- responsive: true,
103
- scales: {
104
- y: {
105
- beginAtZero: false
106
- }
107
- }
108
- }
109
- });
110
- },
111
- error: function(error) {
112
- alert('Terjadi kesalahan saat memanggil API untuk grafik: ' + error.responseJSON.error);
113
- }
114
- });
115
- });
116
-
117
- // Fungsi untuk mengambil data dari grafik dan mengirimkan ke Flask
118
- function getDataFromChart() {
119
- // Ambil 3 harga terakhir dari data grafik
120
- var lastThreeDays = sellPrices.slice(-3);
121
-
122
- return {
123
- features: lastThreeDays
124
- };
125
- }
126
-
127
- // Fungsi untuk memanggil endpoint Flask dengan data dari grafik
128
- $('#auto-predict-btn').click(function() {
129
- var inputData = getDataFromChart();
130
- console.log(inputData);
131
-
132
- $.ajax({
133
- url: '/auto-predict',
134
- type: 'POST',
135
- contentType: 'application/json',
136
- data: JSON.stringify(inputData),
137
- success: function(data) {
138
- $('#auto-last-price').text(`Harga Emas Terakhir: ${data.last_price}`);
139
- $('#auto-predicted-price').text(`Prediksi Harga Emas: ${data.predicted_value}`);
140
- $('#auto-percentage-change').text(`Perubahan: ${data.percentage_change}`);
141
- },
142
- error: function(error) {
143
- alert('Terjadi kesalahan: ' + error.responseJSON.error);
144
- }
145
- });
146
- });
147
-
148
- // Fungsi untuk menangani prediksi berdasarkan input pengguna
149
- $('#input-form').submit(function(event) {
150
- event.preventDefault();
151
-
152
- var sell_1 = parseFloat($('#sell-1').val()); // Mengonversi input menjadi angka
153
- var sell_2 = parseFloat($('#sell-2').val()); // Mengonversi input menjadi angka
154
- var sell_3 = parseFloat($('#sell-3').val()); // Mengonversi input menjadi angka
155
- var last_price = sell_1; // Anda bisa sesuaikan jika ingin mengambil nilai lainnya
156
-
157
- $.ajax({
158
- url: '/predict',
159
- type: 'POST',
160
- contentType: 'application/json',
161
- data: JSON.stringify({
162
- features: [sell_1, sell_2, sell_3],
163
- last_price: [last_price]
164
- }),
165
- success: function(data) {
166
- $('#input-predicted-price').text(`Prediksi Harga Emas: ${data.predicted_value}`);
167
- $('#input-percentage-change').text(`Perubahan: ${data.percentage_change}`);
168
- },
169
- error: function(error) {
170
- alert('Terjadi kesalahan: ' + error.responseJSON.error);
171
- }
172
- });
173
- });
174
-
175
- </script>
176
- </body>
177
- </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>Prediksi Harga Emas</title>
7
+ <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
8
+ <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
9
+ <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
11
+ </head>
12
+ <body>
13
+ <div class="container mt-5">
14
+ <h1>Grafik Harga Jual Emas 30 Hari Terakhir</h1>
15
+
16
+ <!-- Grafik Harga Emas -->
17
+ <canvas id="sell-chart" width="400" height="200"></canvas>
18
+
19
+ <!-- Tab navigation -->
20
+ <ul class="nav nav-tabs" id="myTab" role="tablist">
21
+ <li class="nav-item" role="presentation">
22
+ <a class="nav-link active" id="auto-tab" data-toggle="tab" href="#auto-predict" role="tab" aria-controls="auto-predict" aria-selected="true">Auto Predict</a>
23
+ </li>
24
+ </ul>
25
+
26
+ <div class="tab-content" id="myTabContent">
27
+ <!-- Auto Predict Tab -->
28
+ <div class="tab-pane fade show active" id="auto-predict" role="tabpanel" aria-labelledby="auto-tab">
29
+ <h2>Prediksi Otomatis (Dari API):</h2>
30
+ <button id="auto-predict-btn" class="btn btn-secondary">Dapatkan Prediksi Otomatis</button>
31
+ <div id="auto-prediction-result" class="mt-3">
32
+ <p id="auto-last-price"></p>
33
+ <p id="auto-predicted-price"></p>
34
+ <p id="auto-percentage-change"></p>
35
+ </div>
36
+ </div>
37
+ </div>
38
+ </div>
39
+
40
+ <script>
41
+ var sellPrices = [];
42
+ // Grafik Harga Emas: Ambil data untuk grafik dari URL API berbeda
43
+ $(document).ready(function() {
44
+ $.ajax({
45
+ url: 'https://api-pluang.pluang.com/api/v3/asset/gold/pricing?daysLimit=30', // Ganti dengan URL API yang sesuai
46
+ type: 'GET',
47
+ success: function(data) {
48
+ var dates = data.data.history.map(function(item) {
49
+ return item.updated_at.split('T')[0]; // Ambil hanya tanggal
50
+ });
51
+ sellPrices = data.data.history.map(function(item) {
52
+ return item.sell;
53
+ });
54
+
55
+ // Balikkan urutan data (dari data pertama ke terakhir)
56
+ dates.reverse();
57
+ sellPrices.reverse();
58
+
59
+ // Tampilkan grafik harga sell
60
+ var ctx = document.getElementById('sell-chart').getContext('2d');
61
+ var sellChart = new Chart(ctx, {
62
+ type: 'line',
63
+ data: {
64
+ labels: dates, // Tanggal
65
+ datasets: [{
66
+ label: 'Harga Sell Emas',
67
+ data: sellPrices, // Harga sell
68
+ borderColor: 'rgba(75, 192, 192, 1)',
69
+ borderWidth: 2,
70
+ fill: false
71
+ }]
72
+ },
73
+ options: {
74
+ responsive: true,
75
+ scales: {
76
+ y: {
77
+ beginAtZero: false
78
+ }
79
+ }
80
+ }
81
+ });
82
+ },
83
+ error: function(error) {
84
+ alert('Terjadi kesalahan saat memanggil API untuk grafik: ' + error.responseJSON.error);
85
+ }
86
+ });
87
+ });
88
+
89
+ // Fungsi untuk mengambil data dari grafik dan mengirimkan ke Flask
90
+ function getDataFromChart() {
91
+ // Ambil 3 harga terakhir dari data grafik
92
+ var lastThreeDays = sellPrices.slice(-3);
93
+
94
+ return {
95
+ features: lastThreeDays
96
+ };
97
+ }
98
+
99
+ // Fungsi untuk memanggil endpoint Flask dengan data dari grafik
100
+ $('#auto-predict-btn').click(function() {
101
+ var inputData = getDataFromChart();
102
+ console.log(inputData);
103
+
104
+ $.ajax({
105
+ url: '/predict', // Menggunakan endpoint Flask yang sesuai
106
+ type: 'POST',
107
+ contentType: 'application/json',
108
+ data: JSON.stringify({
109
+ features: inputData.features
110
+ }),
111
+ success: function(data) {
112
+ $('#auto-last-price').text(`Harga Emas Terakhir: ${data.last_price.sell}, ${data.last_price.buy}`);
113
+ $('#auto-predicted-price').text(`Prediksi Harga Emas: ${data.predictions[0].sell}, ${data.predictions[0].buy}`);
114
+ $('#auto-percentage-change').text(`Perubahan: Sell: ${data.total_changes.sell_change}%, Buy: ${data.total_changes.buy_change}%`);
115
+ },
116
+ error: function(error) {
117
+ alert('Terjadi kesalahan: ' + error.responseJSON.error);
118
+ }
119
+ });
120
+ });
121
+ </script>
122
+ </body>
123
+ </html>