Update app.py

app.py

@@ -2,6 +2,7 @@ import pandas as pd
 import numpy as np
 import plotly.express as px
 import gradio as gr
+import json
 
 def plot_usage_volume(system1, users1, timeline1, system2, users2, timeline2, system3, users3, timeline3):
     # Create empty dataframe to hold usage data
@@ -11,9 +12,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, 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))
+            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))
         ])
 
         # Add the usage data to the dataframe
@@ -21,11 +22,14 @@ 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 line plot with multiple lines
+    # Create a line plot of the usage volume for each system
     fig = px.line(data, x="Month", y="Usage", color="System", title="System Rollout Usage Volume Plot")
 
+    # Convert the plot to a JSON string
+    plot_json = json.dumps(fig, cls=plotly.utils.PlotlyJSONEncoder)
+
     # Return the plot as a Gradio output
-    return gr.outputs.Json(plotly_figure=fig)
+    return plot_json
 
 # Define the input components
 inputs = [
@@ -41,9 +45,10 @@ inputs = [
 ]
 
 # Define the output component
-output = gr.outputs.Json()
+output = gr.outputs.Textbox(label="Usage Volume Plot", type="json")
 
 # Create the interface
-iface = gr.Interface(fn=plot_usage_volume, inputs=inputs, outputs=output, title="System Rollout Usage Volume Plot", layout="vertical")
-iface.launch()
+iface = gr.Interface(fn=plot_usage_volume, inputs=inputs, outputs=output, title="System Rollout Usage Volume Plot")
 
+# Launch the interface
+iface.launch()