add example

app.py

@@ -1,8 +1,6 @@
 import sys
-import gradio as gr
 import random
-import pandas as pd
-import numpy as np
+import gradio as gr
 import matplotlib.pyplot as plt
 
 import os
@@ -454,10 +452,10 @@ def demo_update_h(mode):
         h_positions.append(gr.Slider(value=0.9))
     elif mode == 'left->right->left->right':
         num = 4
-        h_positions.append(gr.Slider(value=0.1))
-        h_positions.append(gr.Slider(value=0.9))
-        h_positions.append(gr.Slider(value=0.1))
-        h_positions.append(gr.Slider(value=0.9))
+        h_positions.append(gr.Slider(value=0.5))
+        h_positions.append(gr.Slider(value=0.5))
+        h_positions.append(gr.Slider(value=0.5))
+        h_positions.append(gr.Slider(value=0.5))
     elif mode == 'triangle':
         num = 4
         h_positions.append(gr.Slider(value=0.1))
@@ -505,10 +503,10 @@ def demo_update_w(mode):
         w_positions.append(gr.Slider(value=0.1))
     elif mode == 'left->right->left->right':
         num = 4
-        w_positions.append(gr.Slider(value=0.5))
-        w_positions.append(gr.Slider(value=0.5))
-        w_positions.append(gr.Slider(value=0.5))
-        w_positions.append(gr.Slider(value=0.5))
+        w_positions.append(gr.Slider(value=0.1))
+        w_positions.append(gr.Slider(value=0.9))
+        w_positions.append(gr.Slider(value=0.1))
+        w_positions.append(gr.Slider(value=0.9))
     elif mode == 'triangle':
         num = 4
         w_positions.append(gr.Slider(value=0.5))
@@ -523,13 +521,13 @@ def demo_update_w(mode):
     return w_positions
 
 def plot_update(*positions):
-    if type(positions[-1]) != int:
+    key_length = positions[-1]
+    frame_indices = positions[:key_length]
+    if type(key_length) != int or len(frame_indices) < 2:
         traj_plot = gr.Plot(
             label="Trajectory"
         )
         return traj_plot
-    key_length = positions[-1]
-    frame_indices = positions[:key_length]
     frame_indices = [int(i) for i in frame_indices]
     h_positions = positions[MAX_KEYS:MAX_KEYS+key_length]
     w_positions = positions[2*MAX_KEYS:2*MAX_KEYS+key_length]
@@ -606,25 +604,29 @@ with gr.Blocks(css=css) as demo:
                 
             for i in range(MAX_KEYS):
                 with gr.Row(visible=False) as row:
-                    text = f"Keyframe #{i}"
-                    text = gr.HTML(text, visible=True)
+                    text = gr.Textbox(
+                        value=f"Keyframe #{i}",
+                        interactive=False,
+                        container = False,
+                        lines = 3,
+                        scale=1
+                    )
                     frame_ids = gr.Textbox(
                         None,
                         label=f"Frame Indices #{i}",
-                        visible=True,
                         interactive=True,
-                        scale=1
+                        scale=2
                     )
                     h_position = gr.Slider(label='Position in Height',
                         minimum=0.0,
                         maximum=1.0,
                         step=0.01,
-                        scale=1)
+                        scale=2)
                     w_position = gr.Slider(label='Position in Width',
                         minimum=0.0,
                         maximum=1.0,
                         step=0.01,
-                        scale=1)
+                        scale=2)
                     
                 frame_indices.append(frame_ids)
                 h_positions.append(h_position)