In Term 3 Week 5, I was designing frontend layout for my project
Progress
- I have successfully wrote my webpage with html using bootstrap5, it looks alright.
- I implemented javascript functions in my website that requests my backend api.
- I used Chart.js to illustrate the results from my backend api.
Frontend layout design
I decided to use bootstrap5, and I decided to design my frontend as following:
- A header at the top indicate the name of the project (on the left), and a hacker style text box tells the current BTC (Bitcoin) price (on the right, refresh each 10 secs)
1
2
3
4
5
6
7<!--nav at the top-->
<nav class="navbar bg-light">
<div class="container">
<a class="navbar-brand" href="/">smartCrypto</a>
<small class="bg-dark text-green p-2 rounded shadow" id="btc_info">1BTC=$1000 AUD @ 2022.08.23 19:20:31</small>
</div>
</nav> - Another header below the one mentioned above, that ask user to input the coin they want to predict (on the left), and a text that tells the current price of this coin (in the middle, refresh each 30 secs). Last but not least, another text that tells how long the interval will be (on the right)
1
2
3
4
5
6
7
8
9
10
11
12<!-- another nav for custom coin-->
<div class="container mt-2 mb-2">
<nav class="nav navbar">
<form class="d-flex form-floating" role="search" action="javascript:updateCustomCoin()">
<input id="predictCoin" class="form-control me-2 shadow" type="text" placeholder="Enter a crypto" aria-label="Predict">
<label for="predictCoin">Enter any coin</label>
<button class="btn btn-outline-dark shadow me-2 ps-4 pe-4" type="button" onclick="updateCustomCoin()">Predict</button>
</form>
<small class="text-muted" id="coin_info">Will be tracking ETH each 30 seconds</small>
<small class="text-muted" id="coin_notice">Will be tracking ETH each 30 seconds</small>
</nav>
</div> - Finally, a chart will be rendered in the bottom of the webpage, which is the predicted price in the next 15 mins.
1
2
3
4
5<!-- chart -->
<div class="container">
<small class="text-muted">The price will have a slightly difference to the actual price, but the trending should be accurate.</small>
<canvas id="chart" width="70%"></canvas>
</div> - The chart has a default data, has no values and ask the user to specify a coin first.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23//chart context
const ctx = document.getElementById("chart").getContext('2d');
//labels
let labels = [];
let data = [];
for(let i = 1; i<16; i++){
labels.push(`${i} min`);
data.push(0)
}
//chart
const chart = new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [{
label: 'Please specify a coin to predict',
data: data,
fill: false,
borderColor: 'rgb(75, 192, 192)',
tension: 0.1
}]
}
});
The final frontend layout looks like this:
Responsive design
This is challenging but also important, because the only way to make a website interesting is to make it responsive.
I attempted a few different things to make it responsive
After specify a coin, and click the predict button, a pop up window will show up, telling the audience it needs to check the validity of the model.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29Swal.fire({
title: 'Verifying Model',
text: 'We need to see whether or not our Machine Learning Model works.',
icon: 'info',
showCloseButton: false,
showCancelButton: false,
showLoaderOnConfirm: true,
showConfirmButton: true,
focusConfirm: true,
confirmButtonText: "Continue",
allowOutsideClick: false,
allowEscapeKey: false,
preConfirm: () => {
return new Promise(function(resolve) {
console.log('logic begins');
//while not complete, do not close
function wait(){
//keep waiting til checked
if(!finished_model_checking){
setTimeout(wait,1000);
}
else {
resolve();
}
}
wait();
});
},
});the
finished_model_checkinghere is a variable that holds the promise, as there is an ajax request checking whether or not the model is valid
If a model is valid, it will pop up another window telling it is valid with loss, mae, mse, also with a green tick, otherwise it would be a pop up says invalid with a red cross (forgot to screenshot this…)
1
2
3
4
5
6
7
8
9
10
11
12
13
14//success
Swal.fire({
icon: 'success',
title: `${customCoin} works!`,
html: `loss: ${loss}<br> mae: ${mae}<br> mse: ${mse}`,
allowOutsideClick: false,
allowEscapeKey: false,
}).then((result) => {
//toast
Toast.fire({
icon: 'success',
title: `Start to track ${customCoin} successfully`
});
})
If the specify coin has a valid model, it will start predict the price in the next 15 mins and render the chart (there is an animation but I don’t want to screen record, but I will demonstrate this in the presentation), also when a model is valid, after the user click the ok button from the pop up mentioned above, a toast will appear on the top right corner. The prediction will update each 30 seconds.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24//next 15 min prediction
$.ajax({
url: `/predict_${customCoin}_15`,
success: function( result ) {
if(result.result === 200) {
// auds in next 15 mins (prediction)
let auds = result.aud_price;
auds.forEach((element, index) => {
auds[index] = Math.round(element * 100000) / 100000;
});
//update old data
chart.data.datasets[0].data = auds;
chart.update();
console.log(auds);
}
else{
//something went wrong
Toast.fire({
icon: 'error',
title: `Something went wrong!`
});
}
}
});
Challenges
- I haven’t wrote any html/css/javascript for a while, it takes a bit of time to memorise it.
- It is really hard to squeeze some time during these two weeks because of the upcoming exam week.
Reflection
- I successfully made my frontend website.
- I basically finished the implementation of my project.
- I used my time wisely.
Timeline
- As I finished what I planned to do, I am quite on track.
- Next week I will be starting testing my model, to see whether or not it is accurate.