Update app.py and navigation.py for UI enhancements and image path correction. Changed primary color theme in app.py and updated image path in navigation.py to reflect new asset.

app.py

@@ -13,11 +13,9 @@ import spaces
 import gradio as gr
 import numpy as np
 import torch
-from torchvision.datasets.utils import download_and_extract_archive
-from einops import repeat
 from omegaconf import OmegaConf
 from modeling.pipeline import VMemPipeline
-from diffusers.utils import export_to_video, export_to_gif
+from diffusers.utils import export_to_video
 from scipy.spatial.transform import Rotation, Slerp
 from navigation import Navigator
 from PIL import Image
@@ -48,6 +46,7 @@ IMAGE_PATHS = ['test_samples/oxford.jpg',
                'test_samples/changi.jpg', 
                'test_samples/jesus.jpg',]
 
+
 # If no images found, create placeholders
 if not IMAGE_PATHS:
     def create_placeholder_images(num_samples=5, height=HEIGHT, width=WIDTH):
@@ -692,7 +691,7 @@ def render_demonstrate(
 
 
 # Create the Gradio Blocks
-with gr.Blocks(theme=gr.themes.Base(primary_hue="purple")) as demo:
+with gr.Blocks(theme=gr.themes.Base(primary_hue="blue")) as demo:
     gr.HTML(
         """
     <style>
@@ -701,10 +700,10 @@ with gr.Blocks(theme=gr.themes.Base(primary_hue="purple")) as demo:
         font-weight: bold;
     }
     #page-title h1 {
-        color: #9B6B9E !important;
+        color: #002147 !important;
     }
     .task-title h2 {
-        color: #B19CD9 !important;
+        color: #004080 !important;
     }
     .header-button-row {
         gap: 4px !important;
@@ -717,7 +716,7 @@ with gr.Blocks(theme=gr.themes.Base(primary_hue="purple")) as demo:
         gap: 5px !important;
     }
     .header-button a {
-        border: 1px solid #9B6B9E;
+        border: 1px solid #002147;
     }
     .header-button .button-icon {
         margin-right: 8px;
@@ -740,7 +739,7 @@ with gr.Blocks(theme=gr.themes.Base(primary_hue="purple")) as demo:
         margin-top: 8px;
     }
     #selected-demo-button {
-        color: #B19CD9;
+        color: #004080;
         text-decoration: underline;
     }
     .demo-button {
@@ -760,17 +759,17 @@ with gr.Blocks(theme=gr.themes.Base(primary_hue="purple")) as demo:
         box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     }
     #navigation-gallery .gallery-item.selected {
-        border: 3px solid #9B6B9E;
+        border: 3px solid #002147;
     }
     /* Upload image styling */
     #upload-image {
         border-radius: 8px;
-        border: 2px dashed #9B6B9E;
+        border: 2px dashed #002147;
         padding: 10px;
         transition: all 0.3s ease;
     }
     #upload-image:hover {
-        border-color: #9B6B9E;
+        border-color: #002147;
         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
     }
     /* Box styling */
@@ -778,28 +777,28 @@ with gr.Blocks(theme=gr.themes.Base(primary_hue="purple")) as demo:
         border-radius: 10px;
         margin-bottom: 20px;
         padding: 15px;
-        background-color: #9B6B9E;
-        border: 1px solid #9B6B9E;
+        background-color: #002147;
+        border: 1px solid #002147;
     }
     /* Start Navigation button styling */
     button[data-testid="Start Navigation"] {
-        background-color: #B19CD9 !important;
-        border-color: #B19CD9 !important;
+        background-color: #004080 !important;
+        border-color: #004080 !important;
         color: white !important;
     }
     button[data-testid="Start Navigation"]:hover {
-        background-color: #9B6B9E !important;
-        border-color: #9B6B9E !important;
+        background-color: #002147 !important;
+        border-color: #002147 !important;
     }
     /* Override Gradio's primary button color */
     .gradio-button.primary {
-        background-color: #B19CD9 !important;
-        border-color: #B19CD9 !important;
+        background-color: #004080 !important;
+        border-color: #004080 !important;
         color: white !important;
     }
     .gradio-button.primary:hover {
-        background-color: #9B6B9E !important;
-        border-color: #9B6B9E !important;
+        background-color: #002147 !important;
+        border-color: #002147 !important;
     }
     </style>
     """

navigation.py

@@ -451,7 +451,7 @@ def main():
     navigator = Navigator(pipeline, step_size=args.step_size, num_interpolation_frames=args.interpolation_frames)
     
     # Load episode data
-    frame_path = "test_samples/oxford.jpeg"
+    frame_path = "test_samples/arc_de_tromphe.jpeg"
     image, _ = load_img_and_K(frame_path, None, K=None, device=device)
     image, _ = transform_img_and_K(image, (config.model.height, config.model.width), mode="crop", K=None)
     ori_K = np.array(get_default_intrinsics()[0])