Update app.py

app.py

@@ -1,6 +1,5 @@
-import json
 import plotly.io as pio
-from google.colab import files
+import gradio as gr
 
 # List of plot names
 plot_list = [
@@ -10,19 +9,39 @@ plot_list = [
     "Gemma2_9b"
 ]
 
-# Function to save Plotly figure to JSON file
-def save_plotly_figures():
-    for plot_name in plot_list:
-        # Load the figure (assuming you have these figures in the current environment)
-        fig = pio.read_json(f'{plot_name}.json')
-        
-        # Save the figure to a JSON file
-        json_filename = f'{plot_name}.json'
-        with open(json_filename, 'w') as f:
-            json.dump(fig.to_dict(), f)
-        
-        # Download the file
-        files.download(json_filename)
+# Create a function for each plot
+def load_plotly_figure(index):
+    return pio.read_json(f'{plot_list[index]}.json')
 
-# Call the function to save and download figures
-save_plotly_figures()
+# Define custom CSS for rectangular blocks
+custom_css = """
+<style>
+    .gradio-container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        height: 100vh;  /* Full viewport height */
+    }
+    .gradio-row {
+        display: flex;
+        justify-content: center;
+        margin-bottom: 20px;
+        width: 100%;
+    }
+    .gradio-output {
+        width: 600px;  /* Set the width of the block */
+        height: 400px; /* Set the height of the block */
+        border: 2px solid #ccc; /* Border to visualize the block */
+        border-radius: 10px; /* Rounded corners for a more rectangular appearance */
+    }
+</style>
+"""
+
+# Create a Gradio interface with custom layout and CSS
+with gr.Blocks(css=custom_css) as demo:
+    for i in range(len(plot_list)):
+        with gr.Row():
+            gr.Plot(lambda index=i: load_plotly_figure(index), label=plot_list[i])
+
+# Launch the Gradio interface
+demo.launch()