Spaces:

yangyang158
/

kronos

Running

App Files Files Community

yangyang158 commited on Sep 12

Commit

8334f8b

1 Parent(s): 1dd235a

feat: Integrate UI control panel and fix CORS issue

Browse files

Files changed (4) hide show

__pycache__/app.cpython-312.pyc +0 -0
app.py +23 -2
index.html +215 -0
requirements.txt +1 -0

__pycache__/app.cpython-312.pyc CHANGED Viewed

Binary files a/__pycache__/app.cpython-312.pyc and b/__pycache__/app.cpython-312.pyc differ

app.py CHANGED Viewed

@@ -2,7 +2,8 @@ import os
 import sys
 import logging
 from functools import wraps
-from flask import Flask, request, jsonify
 import torch
 import pandas as pd
 from huggingface_hub import hf_hub_download
@@ -19,6 +20,7 @@ except ImportError as e:
 # --- Globals ---
 app = Flask(__name__)
 predictor = None
 model_name_global = "kronos-base" # Use key now
 API_KEY = os.environ.get("KRONOS_API_KEY")
@@ -87,6 +89,11 @@ def require_api_key(f):
 # --- API Endpoints ---
 @app.route('/api/load-model', methods=['POST'])
 @require_api_key
 def load_model_endpoint():
@@ -238,7 +245,15 @@ def predict():
         )
         # Format results for JSON response
-        prediction_results = pred_df.to_dict(orient='records')
         return jsonify({
             'success': True,
@@ -249,3 +264,9 @@ def predict():
     except Exception as e:
         logging.error(f"Prediction failed: {e}")
         return jsonify({'error': f'An error occurred during prediction: {str(e)}'}), 500

 import sys
 import logging
 from functools import wraps
+from flask import Flask, request, jsonify, send_from_directory
+from flask_cors import CORS
 import torch
 import pandas as pd
 from huggingface_hub import hf_hub_download
 # --- Globals ---
 app = Flask(__name__)
+CORS(app) # Enable CORS for all routes
 predictor = None
 model_name_global = "kronos-base" # Use key now
 API_KEY = os.environ.get("KRONOS_API_KEY")
 # --- API Endpoints ---
+@app.route('/')
+def index():
+    """Serves the index.html file for the visualizer."""
+    return send_from_directory('.', 'index.html')
 @app.route('/api/load-model', methods=['POST'])
 @require_api_key
 def load_model_endpoint():
         )
         # Format results for JSON response
+        # --- Format results to match input format ---
+        pred_df_reset = pred_df.reset_index()
+        # Convert timestamp to Unix milliseconds integer
+        pred_df_reset['timestamp'] = (pred_df_reset['timestamp'].astype('int64') / 10**6).astype('int64')
+        # Reorder columns to match the desired output format: [timestamp, open, high, low, close, volume]
+        output_columns = ['timestamp', 'open', 'high', 'low', 'close', 'volume']
+        pred_df_formatted = pred_df_reset[output_columns]
+        # Convert to list of lists
+        prediction_results = pred_df_formatted.values.tolist()
         return jsonify({
             'success': True,
     except Exception as e:
         logging.error(f"Prediction failed: {e}")
         return jsonify({'error': f'An error occurred during prediction: {str(e)}'}), 500
+if __name__ == '__main__':
+    # This block is for local debugging purposes.
+    # The production server will use a WSGI server like Gunicorn.
+    app.run(host='0.0.0.0', port=7860, debug=True)

index.html ADDED Viewed

	@@ -0,0 +1,215 @@

+<!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/[email protected]/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 for Model Loading -->
+        <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 for Prediction -->
+        <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>
+        // --- Global DOM Elements ---
+        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');
+        // --- API Base URLs ---
+        // Use relative paths for deployed environment, detect local for testing.
+        const isLocal = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
+        const apiBaseUrl = isLocal ? 'http://localhost:7860' : '';
+        // --- Helper Functions ---
+        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();
+        }
+        // --- Model Loading Logic ---
+        async function populateModels() {
+            try {
+                const models = await apiFetch('/api/available-models', { method: 'GET' });
+                modelSelect.innerHTML = ''; // Clear existing options
+                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;
+            }
+        });
+        // --- Prediction Logic ---
+        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);
+            }
+        });
+        // --- Initial Load ---
+        document.addEventListener('DOMContentLoaded', populateModels);
+    </script>
+</body>
+</html>

requirements.txt CHANGED Viewed

@@ -1,4 +1,5 @@
 flask
 pandas
 huggingface_hub
 transformers

 flask
+flask-cors
 pandas
 huggingface_hub
 transformers