Skip to content

Instantly share code, notes, and snippets.

@sangelxyz

sangelxyz/gist:0bad19fe8bae53a3526310f78e0aa385

Created April 26, 2024 04:34
Show Gist options
  • Save sangelxyz/0bad19fe8bae53a3526310f78e0aa385 to your computer and use it in GitHub Desktop.
Save sangelxyz/0bad19fe8bae53a3526310f78e0aa385 to your computer and use it in GitHub Desktop.
Download ZIP
zed error html
Raw
gistfile1.txt
<!doctype html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Access-Control-Allow-Origin" content="*" />
<!-- Disable zooming: -->
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=no"
/>
<head>
<!-- change this to your project name -->
<title></title>
<!-- config for our rust wasm binary. go to https://trunkrs.dev/assets/#rust for more customization -->
<link data-trunk rel="rust" data-wasm-opt="2" />
<!-- this is the base url relative to which other urls will be constructed. trunk will insert this from the public-url option -->
<base data-trunk-public-url />
<link data-trunk rel="icon" href="assets/favicon.ico" />
<link data-trunk rel="copy-file" href="assets/manifest.json" />
<link data-trunk rel="copy-file" href="assets/icon-1024.png" />
<link data-trunk rel="copy-file" href="assets/icon-256.png" />
<link data-trunk rel="copy-file" href="assets/icon_ios_touch_192.png" />
<link data-trunk rel="copy-file" href="assets/maskable_icon_x512.png" />
<link rel="manifest" href="manifest.json" />
<link rel="apple-touch-icon" href="icon_ios_touch_192.png" />
<meta
name="theme-color"
media="(prefers-color-scheme: light)"
content="white"
/>
<meta
name="theme-color"
media="(prefers-color-scheme: dark)"
content="#404040"
/>
<style>
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap")
html {
/* Remove touch delay: */
/*touch-action: manipulation;*/
touch-action: cross-slide-y;
}
body {
/* Light mode background color for what is not covered by the egui canvas,
or where the egui canvas is translucent. */
background: #1f2937;
min-width: 650px;
max-width: 95%;
min-height: 2000px;
height: 2000px;
font-size: 0.8rem;
}
a {
color: white;
}
a:hover {
color: white;
}
a:active {
color: white;
}
/* Allow canvas to fill entire web page: */
html,
body {
overflow: visible;
margin: 0 !important;
padding: 0 !important;
/*height: 100%;*/
width: 100%;
}
/* Position canvas in center-top: */
canvas {
margin-right: auto;
margin-left: auto;
display: block;
position: absolute;
top: 0%;
left: 50%;
transform: translate(-50%, 0%);
}
.centered {
margin-right: auto;
margin-left: auto;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #f0f0f0;
font-size: 24px;
font-family: Ubuntu-Light, Helvetica, sans-serif;
text-align: center;
}
/* ---------------------------------------------- */
/* Loading animation from https://loading.io/css/ */
.lds-dual-ring {
display: inline-block;
width: 24px;
height: 24px;
}
.lds-dual-ring:after {
content: " ";
display: block;
width: 24px;
height: 24px;
margin: 0px;
border-radius: 50%;
border: 3px solid #fff;
border-color: #fff transparent #fff transparent;
animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#header {
position: relative;
top: 0px;
width: 100%;
height: 100px;
z-index: 10;
color: white;
margin-top: 20px;
margin-left: 20px;
font-family: Arial, Helvetica, sans-serif;
}
#header div div:last-child {
height: auto;
margin-left: 20px;
align-content: center;
margin-top: 10px;
padding: 5px;
border-bottom-color: #4b5563;
border-bottom-style: solid;
border-bottom-width: 2px;
border-top-color: #4b5563;
border-top-style: solid;
border-top-width: 2px;
border-radius: 6px;
letter-spacing: 0.03rem;
overflow-y: scroll;
height: 80px;
}
.sub-header {
margin-top: 10px;
font-weight: 400;
letter-spacing: 0.09rem;
}
#header .title {
font-weight: 600;
font-size: 1.5rem;
}
#footer {
position: absolute;
top: 1950px;
left: 60px;
/* display: flex;
justify-content: left; */
align-items: center;
text-align: left;
width: 100%;
height: 25px;
z-index: 100;
color: white;
/* margin-top: 20px;
margin-left: 20px; */
font-family: Arial, Helvetica, sans-serif;
font-weight: 600;
font-size: 0.7rem;
}
#footer div {
width: auto;
padding-right: 35px;
}
@media (max-height: 571px) {
#footer {
display: none;
}
}
</style>
</head>
<body>
<div id="header">
<div class="title">Crypto Price Predictor</div>
<div>
<div class="sub-header">
This site is a bit of an experiment to use AI or in this
case more correctly machine learning to try and predict the
up or down direction of major cryptocurrencies over the next
3 hours.
</div>
<div>
Built in
<a
href="https://www.rust-lang.org/"
target="_blank"
rel="noopener noreferrer"
>RUST</a
>
for pure speed, and pulls live pricing for the top 50 coins
from the
<a
href="https://www.gate.io/"
target="_blank"
rel="noopener noreferrer"
>Gate.io</a
>
API. Price and volume data is stored in a high performance
<a
href="https://pola.rs/"
target="_blank"
rel="noopener noreferrer"
>Pola.rs</a
>
dataframe then used as an input for our model
<a
href="https://xgboost.ai/"
target="_blank"
rel="noopener noreferrer"
>XGBoost</a
>
which excel at pattern recognition. The front end uses
<a
href="https://www.egui.rs/"
target="_blank"
rel="noopener noreferrer"
>eGUI</a
>
again for simplicity and speed. We use Open, High, Low,
Close & Volume our AI model goes through thousands of
historical candles and data points to look for any pattern
similarity in predicting the next 3 hourly candles.
<!-- Once the
next hour has closed we lock in that position and record our
accuracy over the last week, we only record positions with a
greater than 70% prediction. The next 2 hourly candles are
continuously reviewed until it is their turn to be locked
in. The time is set to your local time for ease of use. Our
goal is to try and continue to improve the model and get
close to a 70% accuracy level or higher. The nature of
crypto however is fickle and looking more and more like a
coin toss without factoring in more external influences such
as social media hype and general news. -->
</div>
</div>
</div>
<!-- I need a diffrent way to enable scroll -->
<!-- <div
style="
z-index: 200;
width: 100%;
height: 2000px;
position: absolute;
"
></div> -->
<!-- The WASM code will resize the canvas dynamically -->
<!-- the id is hardcoded in main.rs . so, make sure both match. -->
<canvas id="the_canvas_id" height="2000"></canvas>
<!-- <div id="footer">
<div>
<p>Harness the latest in predictive analytics with our advanced cryptocurrency forecasting platform. <br />
Powered by Rust for robust performance, EGUI for seamless user experience, <br />
and XGBoost for state-of-the-art prediction modeling, our platform delivers real-time pricing updates and accurate forecasts for over 50 assets.</p></div>
</div> -->
<div
id="tradingview_float"
class="tradingview-widget-container"
style="
height: 90%;
width: 90%;
transform: translate(-50, -50);
position: absolute;
right: 0;
top: 0;
z-index: 200;
"
>
<div
id="basic-area-chart-demo"
style="height: calc(100% - 32px)"
></div>
<script
type="text/javascript"
src="https://s3.tradingview.com/tv.js"
></script>
<script type="text/javascript" id="trading"></script>
</div>
<script>
// disable the canvas control of the mouse wheel
window.addEventListener(
"wheel",
function (event) {
event.stopImmediatePropagation();
},
true,
);
// let canvas = document.getElementById("the_canvas_id");
// canvas.addEventListener("wheel", function (e) {
// if (e.target === canvas) {
// e.stopImmediatePropagation();
// e.preventDefault(); // Prevent canvas from handling wheel event
// }
// });
// canvas.addEventListener("mousewheel", function (e) {
// if (e.target === canvas) {
// e.stopImmediatePropagation();
// e.preventDefault(); // Prevent canvas from handling wheel event
// }
// });
// open tradingview chart.
var symbol_trading = "BTC";
let timeoutId;
// let mouseX = 100;
// let mouseY = 0;
let tradeEl = document.getElementById("tradingview_float");
tradeEl.addEventListener("mouseenter", () => {
clearTimeout(timeoutId);
});
tradeEl.addEventListener("mouseleave", () => {
leaveEvent(tradeEl, 500);
});
function leaveEvent(tradeEl, ms = 5000) {
timeoutId = setTimeout(
(el) => {
el.style.display = "none";
},
ms,
tradeEl,
);
}
function hoveredOver() {
// over ride mouse pointer egui sets
}
function openChart(symbol, x, y) {
let upper_symbol = symbol.toUpperCase();
let tradingview = `
new TradingView.widget({
"container_id": "basic-area-chart-demo",
"width": "100%", /* Use 100% width to inherit parent's width */
"height": "100%",
"autosize": true,
"symbol": "GATEIO:${upper_symbol}USDT",
"interval": "D",
"timezone": "exchange",
"theme": "light",
"style": "3",
"hide_top_toolbar": true,
"save_image": false,
"locale": "en"
});
`;
// clear previous timeout.
clearTimeout(timeoutId);
// Cancel the scheduled execution (comment out this line to let the function execute)
const target = "trading";
const el = document.getElementById(target);
el.remove();
let script = document.createElement("script");
const inlineCode = document.createTextNode(tradingview);
script.appendChild(inlineCode);
script.setAttribute("id", target);
document.body.appendChild(script);
let tradeEl = document.getElementById("tradingview_float");
if (tradeEl) {
// tradeEl.style.top = y - 150 + "px";
// if (x > 900) {
// tradeEl.style.left = x - 500 + "px";
// } else {
// tradeEl.style.left = x + 50 + "px";
// }
tradeEl.style.display = "block";
leaveEvent(tradeEl);
}
}
</script>
</body>
</html>
<!-- Powered by egui: https://github.com/emilk/egui/ -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment