Update app.py

# Key Changes and Explanations:

## Image Handling in save_labeled_data():

The save_labeled_data function now correctly converts the PIL Image object to bytes using image.convert("RGB").tobytes() before storing it in the labeled_data list. The image might be None, so we account for that possibility.

## Event Handling (Clicking Buttons):

In labeling_ui(), the cool_button.click() and not_cool_button.click() are now correctly set up.

The fn argument is set to a lambda function that calls save_labeled_data with the appropriate arguments.

The inputs argument specifies the components that will provide input values to the function.

The outputs argument specifies the components that will be updated by the function's return values.

## Initializing the UI:

In labeling_ui(), after getting the first sample with get_next_sample(), we now use:

image_component.update(value=image)

metadata_text.update(value=str(metadata["bounds"]))

label_count_text.update(value=f"Labeled {count} samples.")
This ensures that the components are updated with the initial values.

# With these changes, your Gradio interface should now:

Correctly display a random image from the dataset when it loads.

Allow you to label images by clicking "Cool" or "Not Cool".

Properly save the labeled data to labeled_data.json.

app.py

@@ -10,8 +10,8 @@ import json
 DATASET_SUBSET = "satellogic"
 NUM_SAMPLES_TO_LABEL = 100  # You can adjust this
 LABELED_DATA_FILE = "labeled_data.json"
-DISPLAY_N_COOL = 5 # How many "cool" examples to display alongside each new image.
-SAMPLE_SEED = 10 # The seed to use when sampling the dataset for the demo.
+DISPLAY_N_COOL = 5  # How many "cool" examples to display alongside each new image.
+SAMPLE_SEED = 10  # The seed to use when sampling the dataset for the demo.
 # --- Load Dataset ---
 dataset = ev.load_dataset(DATASET_SUBSET, shards=[SAMPLE_SEED])
 data_iter = iter(dataset)
@@ -42,8 +42,15 @@ def get_next_sample():
 # --- Save Labeled Data ---
 def save_labeled_data(image, metadata, label):
     global labeled_data
+
+    # Convert PIL Image to bytes before saving
+    if image is not None:
+        image_bytes = image.convert("RGB").tobytes()
+    else:
+        image_bytes = None
+
     labeled_data.append({
-        "image": image.convert("RGB").tobytes(),  # Convert to RGB and then serialize
+        "image": image_bytes,
         "metadata": metadata,
         "label": label
     })
@@ -54,7 +61,7 @@ def save_labeled_data(image, metadata, label):
     image, metadata, count = get_next_sample()
 
     if image is None:
-      return "No more samples", gr.Image.update(value=None), "", f"Labeled {count} samples."
+        return "No more samples", gr.Image.update(value=None), "", f"Labeled {count} samples."
 
     return "", image, str(metadata["bounds"]), f"Labeled {count} samples."
 
@@ -62,26 +69,34 @@ def save_labeled_data(image, metadata, label):
 
 # --- Labeling UI ---
 def labeling_ui():
-  with gr.Row():
-      with gr.Column():
-          image_component = gr.Image(label="Satellite Image", type="pil")
-          metadata_text = gr.Textbox(label="Metadata (Bounds)")
-          label_count_text = gr.Textbox(label="Label Count")
-
-          with gr.Row():
-              cool_button = gr.Button("Cool")
-              not_cool_button = gr.Button("Not Cool")
-              
-          # Handle button clicks
-          cool_button.click(fn=lambda image, metadata: save_labeled_data(image, metadata, "cool"), inputs=[image_component, metadata_text], outputs=[gr.Textbox(label="Debug"), image_component, metadata_text, label_count_text])
-          not_cool_button.click(fn=lambda image, metadata: save_labeled_data(image, metadata, "not cool"), inputs=[image_component, metadata_text], outputs=[gr.Textbox(label="Debug"), image_component, metadata_text, label_count_text])
-
-  # Initialize with the first sample
-  image, metadata, count = get_next_sample()
-  if image is not None:
-      image_component.value = image
-      metadata_text.value = str(metadata["bounds"])
-      label_count_text.value = f"Labeled {count} samples."
+    with gr.Row():
+        with gr.Column():
+            image_component = gr.Image(label="Satellite Image", type="pil")
+            metadata_text = gr.Textbox(label="Metadata (Bounds)")
+            label_count_text = gr.Textbox(label="Label Count")
+
+            with gr.Row():
+                cool_button = gr.Button("Cool")
+                not_cool_button = gr.Button("Not Cool")
+
+            # Handle button clicks
+            cool_button.click(
+                fn=lambda image, metadata: save_labeled_data(image, metadata, "cool"),
+                inputs=[image_component, metadata_text],
+                outputs=[gr.Textbox(label="Debug"), image_component, metadata_text, label_count_text]
+            )
+            not_cool_button.click(
+                fn=lambda image, metadata: save_labeled_data(image, metadata, "not cool"),
+                inputs=[image_component, metadata_text],
+                outputs=[gr.Textbox(label="Debug"), image_component, metadata_text, label_count_text]
+            )
+
+    # Initialize with the first sample
+    image, metadata, count = get_next_sample()
+    if image is not None:
+        image_component.update(value=image)  # Use .update() to set the value
+        metadata_text.update(value=str(metadata["bounds"]))  # Use .update()
+        label_count_text.update(value=f"Labeled {count} samples.")  # Use .update()
 
 # --- Display UI ---
 def display_ui():
@@ -131,8 +146,8 @@ def display_ui():
 
     # Initialize
     debug, image, gallery = refresh_display()
-    new_image_component.value = image
-    cool_images_gallery.value = gallery
+    new_image_component.update(value=image)
+    cool_images_gallery.update(value=gallery)
 
 # --- Main Interface ---
 with gr.Blocks() as demo: