|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Kronos API Prediction Visualizer</title> |
|
|
<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js"></script> |
|
|
<style> |
|
|
body { font-family: sans-serif; margin: 2em; } |
|
|
.container { max-width: 1200px; margin: auto; } |
|
|
.form-group { margin-bottom: 1em; } |
|
|
label { display: block; margin-bottom: 0.5em; } |
|
|
input, textarea, select { width: 100%; padding: 0.5em; box-sizing: border-box; } |
|
|
textarea { min-height: 150px; } |
|
|
button { padding: 0.7em 1.5em; cursor: pointer; } |
|
|
#chart { width: 100%; height: 600px; margin-top: 2em; border: 1px solid #ccc; } |
|
|
.error { color: red; } |
|
|
.success { color: green; } |
|
|
.status { margin-top: 1em; font-weight: bold; } |
|
|
.info { background-color: #f0f0f0; border-left: 4px solid #007bff; padding: 1em; margin-bottom: 1em; } |
|
|
hr { margin: 2em 0; } |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="container"> |
|
|
<h1>Kronos API Control Panel</h1> |
|
|
|
|
|
<div class="info"> |
|
|
<p> |
|
|
For local testing, first run <code>app.py</code> in VS Code (press F5). The API endpoints will be available at <code>http://localhost:7860</code>. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<section id="model-loader"> |
|
|
<h2>1. Load Model</h2> |
|
|
<div class="form-group"> |
|
|
<label for="model-select">Available Models:</label> |
|
|
<select id="model-select"></select> |
|
|
</div> |
|
|
<button id="load-model-btn">Load Selected Model</button> |
|
|
<div id="model-status" class="status"></div> |
|
|
</section> |
|
|
|
|
|
<hr> |
|
|
|
|
|
|
|
|
<section id="predictor"> |
|
|
<h2>2. Get Prediction</h2> |
|
|
<div class="form-group"> |
|
|
<label for="api-key">API Key (Bearer Token, if required):</label> |
|
|
<input type="password" id="api-key" placeholder="Enter your API Key"> |
|
|
</div> |
|
|
<div class="form-group"> |
|
|
<label for="k-lines">K-line Data (JSON Array of Arrays):</label> |
|
|
<textarea id="k-lines" placeholder="Paste your k-line data here..."></textarea> |
|
|
</div> |
|
|
<div class="form-group"> |
|
|
<label for="pred-len">Prediction Length:</label> |
|
|
<input type="number" id="pred-len" value="120"> |
|
|
</div> |
|
|
<button id="predict-btn">Get Prediction & Visualize</button> |
|
|
</section> |
|
|
|
|
|
<div id="chart"></div> |
|
|
<div id="error-message" class="status error"></div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
const modelSelect = document.getElementById('model-select'); |
|
|
const loadModelBtn = document.getElementById('load-model-btn'); |
|
|
const modelStatusDiv = document.getElementById('model-status'); |
|
|
const predictBtn = document.getElementById('predict-btn'); |
|
|
const apiKeyInput = document.getElementById('api-key'); |
|
|
const kLinesTextarea = document.getElementById('k-lines'); |
|
|
const predLenInput = document.getElementById('pred-len'); |
|
|
const chartDom = document.getElementById('chart'); |
|
|
const errorDiv = document.getElementById('error-message'); |
|
|
|
|
|
|
|
|
|
|
|
const isLocal = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1'; |
|
|
const apiBaseUrl = isLocal ? 'http://localhost:7860' : ''; |
|
|
|
|
|
|
|
|
async function apiFetch(endpoint, options) { |
|
|
const apiKey = apiKeyInput.value; |
|
|
const headers = { |
|
|
'Content-Type': 'application/json', |
|
|
...options.headers, |
|
|
}; |
|
|
if (apiKey) { |
|
|
headers['Authorization'] = `Bearer ${apiKey}`; |
|
|
} |
|
|
|
|
|
const response = await fetch(apiBaseUrl + endpoint, { ...options, headers }); |
|
|
|
|
|
if (!response.ok) { |
|
|
const errorData = await response.json(); |
|
|
throw new Error(`API Error (${response.status}): ${errorData.error || 'Unknown error'}`); |
|
|
} |
|
|
return response.json(); |
|
|
} |
|
|
|
|
|
|
|
|
async function populateModels() { |
|
|
try { |
|
|
const models = await apiFetch('/api/available-models', { method: 'GET' }); |
|
|
modelSelect.innerHTML = ''; |
|
|
for (const key in models) { |
|
|
const option = document.createElement('option'); |
|
|
option.value = key; |
|
|
option.textContent = `${models[key].name} (${models[key].params}) - ${models[key].description}`; |
|
|
modelSelect.appendChild(option); |
|
|
} |
|
|
} catch (error) { |
|
|
modelStatusDiv.className = 'status error'; |
|
|
modelStatusDiv.textContent = `Failed to fetch models: ${error.message}`; |
|
|
} |
|
|
} |
|
|
|
|
|
loadModelBtn.addEventListener('click', async () => { |
|
|
const modelKey = modelSelect.value; |
|
|
modelStatusDiv.className = 'status'; |
|
|
modelStatusDiv.textContent = `Loading model '${modelKey}'...`; |
|
|
try { |
|
|
const result = await apiFetch('/api/load-model', { |
|
|
method: 'POST', |
|
|
body: JSON.stringify({ model_key: modelKey }) |
|
|
}); |
|
|
modelStatusDiv.className = 'status success'; |
|
|
modelStatusDiv.textContent = result.status; |
|
|
} catch (error) { |
|
|
modelStatusDiv.className = 'status error'; |
|
|
modelStatusDiv.textContent = error.message; |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
predictBtn.addEventListener('click', async () => { |
|
|
const kLinesText = kLinesTextarea.value; |
|
|
const predLen = parseInt(predLenInput.value, 10); |
|
|
|
|
|
errorDiv.textContent = ''; |
|
|
const myChart = echarts.init(chartDom); |
|
|
myChart.showLoading(); |
|
|
|
|
|
if (!kLinesText) { |
|
|
errorDiv.textContent = 'K-line data cannot be empty.'; |
|
|
myChart.hideLoading(); |
|
|
return; |
|
|
} |
|
|
|
|
|
let kLines; |
|
|
try { |
|
|
kLines = JSON.parse(kLinesText); |
|
|
} catch (e) { |
|
|
errorDiv.textContent = 'Invalid JSON in K-line data. Please check the format.'; |
|
|
myChart.hideLoading(); |
|
|
return; |
|
|
} |
|
|
|
|
|
const payload = { |
|
|
k_lines: kLines, |
|
|
prediction_params: { pred_len: predLen } |
|
|
}; |
|
|
|
|
|
try { |
|
|
const result = await apiFetch('/api/predict', { |
|
|
method: 'POST', |
|
|
body: JSON.stringify(payload) |
|
|
}); |
|
|
|
|
|
const historicalData = kLines.map(item => [ |
|
|
item[0], parseFloat(item[1]), parseFloat(item[4]), parseFloat(item[3]), parseFloat(item[2]) |
|
|
]); |
|
|
|
|
|
const predictionData = result.prediction_results.map(item => [ |
|
|
item[0], parseFloat(item[1]), parseFloat(item[4]), parseFloat(item[3]), parseFloat(item[2]) |
|
|
]); |
|
|
|
|
|
const allTimestamps = [...historicalData.map(d => d[0]), ...predictionData.map(d => d[0])]; |
|
|
|
|
|
const option = { |
|
|
tooltip: { trigger: 'axis', axisPointer: { type: 'cross' } }, |
|
|
legend: { data: ['Historical', 'Prediction'] }, |
|
|
grid: { left: '10%', right: '10%', bottom: '15%' }, |
|
|
xAxis: { type: 'time', min: allTimestamps[0], max: allTimestamps[allTimestamps.length - 1] }, |
|
|
yAxis: { scale: true, splitArea: { show: true } }, |
|
|
dataZoom: [ |
|
|
{ type: 'inside', start: 50, end: 100 }, |
|
|
{ show: true, type: 'slider', top: '90%', start: 50, end: 100 } |
|
|
], |
|
|
series: [ |
|
|
{ name: 'Historical', type: 'candlestick', data: historicalData, itemStyle: { color: '#00da3c', color0: '#ec0000', borderColor: '#008F28', borderColor0: '#8A0000' } }, |
|
|
{ name: 'Prediction', type: 'candlestick', data: predictionData, itemStyle: { color: '#4287f5', color0: '#f54242', borderColor: '#285199', borderColor0: '#992828' } } |
|
|
] |
|
|
}; |
|
|
|
|
|
myChart.hideLoading(); |
|
|
myChart.setOption(option); |
|
|
|
|
|
} catch (error) { |
|
|
myChart.hideLoading(); |
|
|
errorDiv.textContent = error.message; |
|
|
console.error('Fetch error:', error); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', populateModels); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
