Update app.py

app.py

@@ -1,7 +1,155 @@
 import gradio as gr
+import pandas as pd
+import numpy as np
+from fetch_plot_data import get_plot_data
 
-def greet(name):
-    return "Hello " + name + "!!"
 
-demo = gr.Interface(fn=greet, inputs="text", outputs="text")
-demo.launch()
+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()