Update app.py

app.py

@@ -1,7 +1,7 @@
 import pandas as pd
 import numpy as np
-import gradio as gr
 import plotly.express as px
+import gradio as gr
 
 def plot_usage_volume(system1, users1, timeline1, system2, users2, timeline2, system3, users3, timeline3):
     # Create empty dataframe to hold usage data
@@ -11,9 +11,9 @@ def plot_usage_volume(system1, users1, timeline1, system2, users2, timeline2, sy
     for i, system in enumerate([system1, system2, system3]):
         # Calculate the monthly usage volume based on the estimated number of users and timeline
         usage = np.concatenate([
-            np.linspace(0, [users1, users2, users3][i], int([timeline1, timeline2, timeline3][i] * 0.25)),
-            np.linspace([users1, users2, users3][i] * 0.5, [users1, users2, users3][i], int([timeline1, timeline2, timeline3][i] * 0.5)),
-            np.linspace([users1, users2, users3][i], [users1, users2, users3][i] * 0.75, int([timeline1, timeline2, timeline3][i] * 0.25))
+            np.linspace(0, users[i], int(timelines[i] * 0.25)),
+            np.linspace(users[i] * 0.5, users[i], int(timelines[i] * 0.5)),
+            np.linspace(users[i], users[i] * 0.75, int(timelines[i] * 0.25))
         ])
 
         # Add the usage data to the dataframe
@@ -21,11 +21,11 @@ def plot_usage_volume(system1, users1, timeline1, system2, users2, timeline2, sy
         system_data = pd.DataFrame({"System": [system] * len(usage), "Month": months, "Usage": usage})
         data = pd.concat([data, system_data], axis=0)
 
-    # Create a larger plot with multiple subplots
+    # Create a line plot with multiple lines
     fig = px.line(data, x="Month", y="Usage", color="System", title="System Rollout Usage Volume Plot")
 
     # Return the plot as a Gradio output
-    return gr.outputs.plotly_figure(fig)
+    return gr.outputs.Json(plotly_figure=fig)
 
 # Define the input components
 inputs = [
@@ -40,14 +40,10 @@ inputs = [
     gr.inputs.Number(label="System 3 Timeline (months)", default=24)
 ]
 
-# Define the interface
-iface = gr.Interface(
-    fn=plot_usage_volume,
-    inputs=inputs,
-    outputs="plot",
-    title="System Rollout Usage Volume Plot",
-    layout="horizontal"
-)
+# Define the output component
+output = gr.outputs.Json()
 
-# Launch the interface
+# Create the interface
+iface = gr.Interface(fn=plot_usage_volume, inputs=inputs, outputs=output, title="System Rollout Usage Volume Plot", layout="vertical")
 iface.launch()
+