Spaces:
Runtime error
Runtime error
File size: 4,511 Bytes
73ac9f6 |
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 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 |
import gradio as gr
import pandas as pd
import numpy as np
from fetch_plot_data import get_plot_data
def get_time_series_data():
# Fetch and process data
plot_data = get_plot_data(hours=24)
plot_data["datetime"] = pd.to_datetime(plot_data["datetime"])
time_series_data = pd.DataFrame({
"Datetime": plot_data["datetime"],
"Actual BTC/USD": plot_data["labels"],
"Predicted BTC/USD": plot_data["prediction"]
})
time_series_data = time_series_data.sort_values(by="Datetime")
time_series_data["Datetime"] = time_series_data["Datetime"].dt.strftime(
"%Y-%m-%d %H:%M")
all_values = np.concatenate([time_series_data["Actual BTC/USD"],
time_series_data["Predicted BTC/USD"]])
y_min = np.min(all_values)
y_max = np.max(all_values)
y_range = y_max - y_min
padding = y_range * 0.0005
y_min = y_min - padding
y_max = y_max + padding
long_data = time_series_data.melt(
id_vars="Datetime",
var_name="Series",
value_name="BTC/USD Value"
)
return (long_data, y_min, y_max)
custom_css = """
body {
background-color: #f8fafc !important;
}
.gradio-container {
max-width: 1200px !important;
margin: 2rem auto !important;
padding: 2rem !important;
background-color: white !important;
border-radius: 1rem !important;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}
.main-title {
color: #1e293b !important;
font-size: 2.5rem !important;
font-weight: 700 !important;
text-align: center !important;
margin-bottom: 0.5rem !important;
line-height: 1.2 !important;
}
.subtitle {
color: #64748b !important;
font-size: 1.125rem !important;
text-align: center !important;
margin-bottom: 1.5rem !important;
font-weight: 500 !important;
}
.chart-container {
margin-bottom: 1rem !important;
}
.footer-content {
margin-top: 1rem !important;
padding-top: 1rem !important;
border-top: 1px solid #e2e8f0 !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
color: #64748b !important;
font-size: 0.875rem !important;
}
.footer-left {
text-align: left !important;
}
.footer-right {
text-align: right !important;
}
.developer-info {
color: #3b82f6 !important;
font-weight: 500 !important;
text-decoration: none !important;
transition: color 0.2s !important;
}
.developer-info:hover {
color: #2563eb !important;
}
"""
# Initialize the Gradio app
with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as app:
with gr.Column():
# Title and subtitle
gr.Markdown("""
<div class="main-title">Live BTC/USD Time Series Info</div>
<div class="subtitle">Predictions served via Hopsworks API</div>
""")
initial_data, initial_y_min, initial_y_max = get_time_series_data()
# Chart with reduced bottom margin
with gr.Column(elem_classes=["chart-container"]):
line_plot = gr.LinePlot(
value=initial_data,
x="Datetime",
y="BTC/USD Value",
color="Series",
title="",
y_title="BTC/USD Value",
x_title="Time",
x_label_angle=45,
width=1000,
height=450, # Slightly reduced height
colors={
"Actual BTC/USD": "#3b82f6",
"Predicted BTC/USD": "#ef4444"
},
tooltip=["Datetime", "BTC/USD Value", "Series"],
overlay_point=True,
zoom=False,
pan=False,
show_label=True,
stroke_width=2,
y_min=initial_y_min,
y_max=initial_y_max,
y_lim=[initial_y_min, initial_y_max],
show_grid=True,
)
# Footer with timestamp and developer info
gr.Markdown(f"""
<div class="footer-content">
<div class="footer-left">
Last updated: {pd.Timestamp.now().strftime("%Y-%m-%d %H:%M:%S")}
<br>
<a href="https://nafis-neehal.github.io/" target="_blank" class="developer-info">Developed by Nafis Neehal</a>
</div>
</div>
""")
# Launch the app
app.launch()
|