Update app.py

app.py

@@ -1,4 +1,3 @@
-
 import gradio as gr
 import os
 import zipfile
@@ -10,6 +9,8 @@ import uuid
 import tempfile
 import numpy as np
 
+# Function to save dataset to zip
+
 def save_dataset_to_zip(dataset_name, dataset):
     temp_dir = tempfile.mkdtemp()
     dataset_path = os.path.join(temp_dir, dataset_name)
@@ -53,6 +54,8 @@ def save_dataset_to_zip(dataset_name, dataset):
     zip_buffer.seek(0)
     return zip_buffer
 
+# Function to load dataset from zip
+
 def load_dataset_from_zip(zip_file_path):
     temp_dir = tempfile.mkdtemp()
     try:
@@ -107,23 +110,24 @@ def load_dataset_from_zip(zip_file_path):
         print(f"Error loading dataset: {e}")
         return None, []
 
+# Function to display dataset as HTML
+
 def display_dataset_html(dataset, page_number=0, items_per_page=2):
     if dataset:
         start_idx = page_number * items_per_page
         end_idx = start_idx + items_per_page
         dataset_slice = dataset[start_idx:end_idx]
         html_content = '''
-        <div style="display: flex; overflow-x: auto; padding: 10px; border: 1px solid #ccc;">
-        '''
+        <div style="display: flex; overflow-x: auto; padding: 10px; border: 1px solid #ccc;">'''
         for idx_offset, entry in enumerate(dataset_slice):
             idx = start_idx + idx_offset
             image_data = entry['image']
             prompt = entry['prompt']
             html_content += f"""
-            <div style="display: flex; flex-direction: column; align-items: center; margin-right: 20px;">
-                <div style="margin-bottom: 5px;">{idx}</div>
-                <img src="{image_data}" alt="Image {idx}" style="max-height: 150px;"/>
-                <div style="max-width: 150px; word-wrap: break-word; text-align: center;">{prompt}</div>
+            <div style="display: flex; flex-direction: column; align-items: center; margin-right: 20px;">'''
+            <div style="margin-bottom: 5px;">{idx}</div>
+            <img src="{image_data}" alt="Image {idx}" style="max-height: 150px;"/>
+            <div style="max-width: 150px; word-wrap: break-word; text-align: center;">{prompt}</div>
             </div>
             """
         html_content += '</div>'
@@ -131,14 +135,14 @@ def display_dataset_html(dataset, page_number=0, items_per_page=2):
     else:
         return "<div>No entries in dataset.</div>"
 
-#Interface
+# Interface
 with gr.Blocks() as demo:
     gr.Markdown("<h1 style='text-align: center; margin-bottom: 1px;'>Dataset Creator</h1>")
     gr.Markdown("You must create/upload a dataset before selecting one")
     datasets = gr.State({})
     current_dataset_name = gr.State("")
     current_page_number = gr.State(0)
-    dataset_html = gr.HTML()
+    dataset_html = gr.HTML()  # Define dataset_html here
 
     # Top-level components
     with gr.Column():
@@ -351,10 +355,11 @@ with gr.Blocks() as demo:
     # Dataset Viewer and Pagination Controls at the Bottom
     with gr.Column():
         gr.Markdown("### Dataset Viewer")
+        dataset_viewer = gr.HTML()  # Use dataset_viewer instead of dataset_html
         with gr.Row():
             prev_button = gr.Button("Previous Page")
             next_button = gr.Button("Next Page")
-    
+
     def change_page(action, current_page_number, datasets, current_dataset_name):
         if not current_dataset_name:
             return current_page_number, gr.update(), "No dataset selected."
@@ -368,17 +373,17 @@ with gr.Blocks() as demo:
                 current_page_number -= 1
         html_content = display_dataset_html(dataset, page_number=current_page_number)
         return current_page_number, gr.update(value=html_content), ""
-    
+
     prev_button.click(
         fn=lambda current_page_number, datasets, current_dataset_name: change_page("prev", current_page_number, datasets, current_dataset_name),
         inputs=[current_page_number, datasets, current_dataset_name],
-        outputs=[current_page_number, dataset_html, message_box]
+        outputs=[current_page_number, dataset_viewer, message_box]
     )
 
     next_button.click(
         fn=lambda current_page_number, datasets, current_dataset_name: change_page("next", current_page_number, datasets, current_dataset_name),
         inputs=[current_page_number, datasets, current_dataset_name],
-        outputs=[current_page_number, dataset_html, message_box]
+        outputs=[current_page_number, dataset_viewer, message_box]
     )
 
     # Initialize dataset_selector