Spaces:
Runtime error
Runtime error
File size: 5,255 Bytes
0c7a866 2d1e9e0 0c7a866 2d1e9e0 4d05b8a 9e9e748 4d05b8a 9e9e748 4d05b8a 2d1e9e0 4d05b8a 2d1e9e0 9e9e748 a8306f7 3f6c3d9 2d1e9e0 9e9e748 |
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 157 158 159 160 161 162 163 164 165 166 167 168 169 170 |
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)
def update_plot():
"""Function to update plot data and timestamp"""
data, y_min, y_max = get_time_series_data()
timestamp = pd.Timestamp.now().strftime("%Y-%m-%d %H:%M:%S")
footer_html = f"""
<div class="footer-content">
<div class="footer-left">
Last updated: {timestamp}
<br>
<a href="https://nafis-neehal.github.io/" target="_blank" class="developer-info">Developed by Nafis Neehal</a>
</div>
</div>
"""
# Return values directly instead of using .update()
return data, footer_html
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
footer = 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>
""")
# Set up timer for half-hourly updates (1800 seconds)
timer = gr.Timer(3600)
timer.tick(update_plot, inputs=None, outputs=[line_plot, footer])
# Launch the app
app.launch()
|