Code refactoring, cancel buttons, multiple result views

annotation_editor.js

@@ -14,6 +14,8 @@
     window.TR = 1;
     window.BL = 2;
     window.BR = 3;
+    
+    window.frame_index = 0;
 
 
     window.init = () => {
@@ -25,7 +27,7 @@
 
         show_frame();
     }
-    
+
     window.prev_frame = () => {
         window.frame_index = Math.max(window.frame_index - 1, 0);
         show_frame();
@@ -106,8 +108,9 @@
         prettify_annotation();
     }
     color_from_id = (id) => {
-        c = Math.ceil(Math.log2(id)); 
-        hue = (2*id - Math.pow(2,c) - 1) / Math.pow(2,c);
+        //hue = Math.floor((number * 137.508 + 60) % 360)
+        power = Math.pow(2, Math.ceil(Math.log2(id))); 
+        hue = (2*id - power - 1) / power;
         return 'hsl(' + Math.floor(hue*359) + ', 100%, 50%)'
     }
 

annotation_handler.py

@@ -6,27 +6,28 @@ import base64
 
 VIDEO_HEIGHT = 700
 
-def load_frames(video_path, preds):
+def load_frames(video, preds):
     """Load frames for annotation editing
+
+    
+        Returns:
+            list({
+                frame: frame image as base64 string,
+                annotations: list(
+                    bbox: dict of int defining bounding box {left, right, top, bottom},
+                    id: id of fish as int,
+                    conf: confidence in bbox as float
+                )
+            })
     """
+    if type(video) == str:
 
-    dataloader, dataset = create_dataloader_aris(video_path, BEAM_WIDTH_DIR, None)
+        dataloader, dataset = create_dataloader_aris(video, BEAM_WIDTH_DIR, None)
+        frames = dataset.didson.load_frames(start_frame=0)
+    else:
+        frames = video
 
-    didson = dataset.didson
-    
-    frames = didson.load_frames(start_frame=0)
-    frame_info, h, w = get_frame_info(frames, preds)
-    
-    return frame_info
 
-def get_frame_info(frames, preds):
-    """Get visualized video frames ready for output, given raw ARIS/DIDSON frames.
-    Warning: all frames in frames will be stored in memory - careful of OOM errors. Consider processing large files
-    in batches, such as in generate_video_batches()
-    
-    Returns:
-        list(np.ndarray), height (int), width (int)
-    """
     color_map = { fish['id'] : fish['color'] for fish in preds['fish'] }
     
     frame_info = []
@@ -52,7 +53,6 @@ def get_frame_info(frames, preds):
             }
             for fish in preds['frames'][i]['fish']:
                 xmin, ymin, xmax, ymax = fish['bbox']
-                hexx = color_map[fish['fish_id']].lstrip('#')
                 frame['annotations'].append({
                     'bbox': {
                         'left': int(round(xmin * w)),
@@ -65,4 +65,4 @@ def get_frame_info(frames, preds):
                 })
             frame_info.append(frame)
             
-    return frame_info, h, w
+    return frame_info

app.py

@@ -1,5 +1,5 @@
 import gradio as gr
-from uploader import save_data, create_data_dir
+from uploader import save_data_to_dir, create_data_dir, save_data
 from main import predict_task
 from state_handler import load_example_result, reset_state
 from visualizer import is_fourcc_available
@@ -14,40 +14,9 @@ from annotation_handler import load_frames
 import json
 from zipfile import ZipFile
 import os
+from gradio_components.upload_ui import Upload_Gradio
+from gradio_components.result_ui import Result_Gradio, update_result, table_headers, info_headers, js_update_tab_labels
 
-max_tabs = 10
-table_headers = ["TOTAL" , "FRAME_NUM", "DIR", "R", "THETA", "L", "TIME", "DATE", "SPECIES"]
-info_headers = [
-    ["TOTAL_TIME", "DATE", "START", "END", "TOTAL_FRAMES", "FRAME_RATE"],
-    ["TOTAL_FISH", "UPSTREAM_FISH", "DOWNSTREAM_FISH", "NONDIRECTIONAL_FISH"],
-    ["UPSTREAM_MOTION", "INTENSITY", "THRESHOLD", "WATER_TEMP"]
-]
-css = """
-<style>
-#result_json {
-    height: 500px;
-    overflow: scroll !important;
-}
-#marking_json thead {
-    display: none !important;
-}
-#canvas {
-    align-self: center;
-}
-</style>
-"""
-js_update_tabs = """
-    async () => {
-        let el_list = document.getElementById("result_handler").getElementsByClassName("svelte-1kcgrqr")
-        let idx = (el_list[1].value === "LOADING") ? 1 : parseInt(el_list[1].value)
-        console.log(idx)
-        style_sheet = document.getElementById("tab_style")
-        style_sheet.innerHTML = ""
-        for (let i = 1; i <= idx; i++) {
-            style_sheet.innerHTML += "#result_tabs button.svelte-kqij2n:nth-child(" + i + "):before {content: 'Result " + i + "';}"
-        }
-    }
-"""
 
 #Initialize State & Result
 state = {
@@ -58,10 +27,8 @@ state = {
 result = {}
 
 
-
-
-# Start function, called on file upload
-def on_input(file_list):
+# Called when an Aris file is uploaded for inference
+def on_aris_input(file_list):
 
     # Reset Result
     reset_state(result, state)
@@ -70,11 +37,73 @@ def on_input(file_list):
 
     # Update loading_space to start inference on first file
     return {
-        inference_handler: gr.update(value = str(np.random.rand()), visible=True)
+        inference_handler: gr.update(value = str(np.random.rand()), visible=True),
+        components['cancelBtn']: gr.update(visible=True),
+        components['skipBtn']: gr.update(visible=True),
+        master_tabs: gr.update(selected=1)
     }
 
+# Called when a result zip file is uploaded for result review
+def on_result_upload(zip_list, aris_list):
+
+    reset_state(result, state)
+
+    component_updates = { 
+        master_tabs: gr.update(selected=1),
+        tab_labeler: gr.update(value = len(zip_list))
+    }
+
+    for i in range(len(zip_list)):
+            
+        # Create dir to unzip files
+        dir_name = create_data_dir(str(i))
+
+        # Check aris input 
+        if (aris_list):
+            aris_info = aris_list[i]
+            file_name = aris_info[0].split("/")[-1]
+            bytes = aris_info[1]
+            valid, input_path, dir_name = save_data_to_dir(bytes, file_name, dir_name)
+        else:
+            input_path = None
+
+        # Unzip result
+        zip_info = zip_list[i]
+        zip_name = zip_info[0]
+        print(zip_name)
+        with ZipFile(zip_name) as zip_file:
+            ZipFile.extractall(zip_file, path=dir_name)
+        unzipped = os.listdir(dir_name)
+        print(unzipped)
+
+        for file in unzipped:
+            if (file.endswith("_results.mp4")):
+                result["path_video"].append(os.path.join(dir_name, file))
+            elif (file.endswith("_results.json")):
+                result["path_json"].append(os.path.join(dir_name, file))
+            elif (file.endswith("_marking.txt")):
+                result["path_marking"].append(os.path.join(dir_name, file))
+        
+        result["aris_input"].append(input_path)
+        with open(result['path_json'][-1]) as f:
+            json_result = json.load(f)
+            result['json_result'].append(json_result)
+        fish_table, fish_info = create_metadata_table(json_result, table_headers, info_headers)
+        result["fish_table"].append(fish_table)
+        result["fish_info"].append(fish_info)
+
+        print(result['aris_input'])
+        update = update_result(i, state, result, inference_handler)
+
+        for key in update.keys():
+            component_updates[key] = update[key]
+    
+    component_updates.pop(inference_handler)
+    return component_updates
+
+
 # Iterative function that performs inference on the next file in line
-def handle_next(_, progress=gr.Progress()):
+def infer_next(_, progress=gr.Progress()):
 
     if state['index'] >= state['total']: 
         return {
@@ -126,33 +155,40 @@ def handle_next(_, progress=gr.Progress()):
     # Send of update to result_handler to show new result
     # Leave inference_handler update blank to avoid starting next inference until result is updated
     return {
-        result_handler: gr.update(value = str(state["index"])),
+        result_handler: gr.update(value = str(np.random.rand())),
+        tab_labeler: gr.update(value = str(state['index'])),
         inference_handler: gr.update()
     }
 
-# Show result UI based on example data
-def show_example_data():
-    load_example_result(result, table_headers, info_headers)
-    state["index"] = 1
-    return gr.update(value=str(state["index"])) 
-
-def show_data():
-    # Get last index
+# Show result
+def on_result_ready():
+    # Update result tab for last file
     i = state["index"] - 1
+    return update_result(i, state, result, inference_handler)
 
-    # If index is larger than max_tabs, only add file to zip list
-    if i >= max_tabs:
-        return {
-            zip_out: gr.update(value=result["path_zip"])
-        }
+def cancel_inference():
+    return {
+        master_tabs: gr.update(selected=0),
+        inference_handler: gr.update(visible=False),
+        components['cancelBtn']: gr.update(visible=False),
+        components['skipBtn']: gr.update(visible=False)
+    }
 
-    # Check if inference is done
-    not_done = state['index'] < state['total']
 
+# Request loading of animation editor
+def prepare_annotation():
+    return {
+        annotation_progress: gr.update(value="<p align='center' style='font-size: large;font-style: italic;'>Loading annotation...</p><!--" + str(np.random.rand()) + "-->", visible=True),
+        master_tabs: gr.update(selected=2)
+    }
+
+# Load frames and annotation information and show
+def open_annotation(index):
+    print(index)
 
     annotation_html = ""
-    if result["aris_input"][i]:
-        frame_info = load_frames(result["aris_input"][i], result['json_result'][i])
+    if result["aris_input"][index]:
+        frame_info = load_frames(result["aris_input"][index], result['json_result'][index])
 
         annotation_html = "<div style='display:flex'>"
         annotation_html += "<canvas id='canvas' style='width:50%' onmousedown='mouse_down(event)' onmousemove='mouse_move(event)' onmouseup='mouse_up()' onmouseleave='mouse_up()'></canvas>"
@@ -160,64 +196,12 @@ def show_data():
         annotation_html += "</div>"
         annotation_html += "<p id='annotation_info' style='display:none'>" + json.dumps(frame_info) + "</p>"
         annotation_html += "<img id='annotation_img' onload='draw()' style='display:none'></img>"
+        annotation_html += "<!--" + str(np.random.rand()) + "-->"
 
-
-    # Send update to UI, and to inference_handler to start next file inference
-    return {
-        zip_out: gr.update(value=result["path_zip"]),
-        tabs[i]['tab']: gr.update(),
-        tabs[i]['video']: gr.update(value=result["path_video"][i], visible=True),
-        tabs[i]['metadata']: gr.update(value=result["fish_info"][i], visible=True),
-        tabs[i]['table']: gr.update(value=result["fish_table"][i], visible=True),
-        tabs[i]['annotation']: gr.update(value=annotation_html, visible=True),
-        tab_parent: gr.update(selected=i),
-        inference_handler: gr.update(value = str(np.random.rand()), visible=not_done)
-    }
-
-
-    
-def preview_result(zip_info, aris_info):
-    zip_name = zip_info[0]
-    print(zip_name)
-    if (aris_info):
-        print(aris_info[0])
-        file_name = aris_info[0].split("/")[-1]
-        bytes = aris_info[1]
-        valid, file_path, dir_name = save_data(bytes, file_name)
-    else:
-        dir_name = create_data_dir()
-        file_path = None
-
-    with ZipFile(zip_name) as zip_file:
-        ZipFile.extractall(zip_file, path=dir_name)
-
-    unzipped = os.listdir(dir_name)
-    print(unzipped)
-
-    reset_state(result, state)
-    state["index"] = 1
-    for file in unzipped:
-        if (file.endswith("_results.mp4")):
-            result["path_video"].append(os.path.join(dir_name, file))
-        elif (file.endswith("_results.json")):
-            result["path_json"].append(os.path.join(dir_name, file))
-        elif (file.endswith("_marking.txt")):
-            result["path_marking"].append(os.path.join(dir_name, file))
-    
-    result["aris_input"].append(file_path)
-    with open(result['path_json'][0]) as f:
-        json_result = json.load(f)
-        result['json_result'].append(json_result)
-    fish_table, fish_info = create_metadata_table(json_result, table_headers, info_headers)
-    result["fish_table"].append(fish_table)
-    result["fish_info"].append(fish_info)
+    return gr.update(value=annotation_html, visible=True), gr.update(visible=False)
     
-    return {
-        result_handler: gr.update(value = str(state["index"])),
-        inference_handler: gr.update()
-    }
-
 
+components = {}
 
 demo = gr.Blocks()
 with demo:
@@ -227,68 +211,54 @@ with demo:
         gr.HTML(
             """
             <h1 align="center" style="font-size:xxx-large">Caltech Fisheye</h1>
-            """ + css + """
+            <style>
+                #marking_json thead {
+                    display: none !important;
+                }
+                .selected.svelte-kqij2n {
+                    background: linear-gradient(180deg, #66eecb47, white);
+                }
+            </style>
             <style id="tab_style"></style>
         """
         )
 
 
-    
-        with gr.Tabs():
-            with gr.Tab("Infer ARIS"):
-                gr.HTML("<p align='center' style='font-size: large;font-style: italic;'>Submit an .aris file to analyze result.</p>")
-                #Input field for aris submission
-                input = File(file_types=[".aris", ".ddf"], type="binary", label="ARIS Input", file_count="multiple")
-
-                # Dummy element to call inference events, this also displays the inference progress
-                inference_handler = gr.Text(value=str(np.random.rand()), visible=False)
-
-                # Zip file output
-                zip_out = gr.File(label="ZIP Output", interactive=False)
-
-            with gr.Tab("Review Results"):
-                # Title of page
-                gr.HTML("""
-                    <p align='center' style='font-size: large;font-style: italic;'>Submit an old zip file of results to visualize.</p>
-                    <p align='center' style='font-size: large;font-style: italic;'>If you want to edit annotations, also submit an aris file.</p>
-                """)
-                result_input = File(file_types=[".zip"], type="binary", label="Upload result file")
-                result_aris_input = File(file_types=[".aris", ".ddf"], type="binary", label="Upload aris file (optional)")
-                preview_result_btn = gr.Button("Preview Result")
-
-
-        # Dummy element to call UI events
-        result_handler = gr.Text(value="LOADING", visible=False, elem_id="result_handler")
-
-        # List of all UI components that will recieve outputs from the result_handler
-        UI_components = []
-        UI_components.append(zip_out)
-
-        # Create result tabs
-        tabs = []
-        with gr.Tabs(elem_id="result_tabs") as tab_parent:
-            UI_components.append(tab_parent)
-            for i in range(max_tabs):
-                with gr.Tab(label="", id=i, elem_id="result_tab"+str(i)) as tab:
-                    metadata_out = gr.Matrix(label="Info", interactive=False, headers=[""]*6, datatype="markdown", visible=False, elem_id="marking_json")
-                    table_out = gr.Matrix(label='Indentified Fish', headers=table_headers, interactive=False, visible=False)
-                    video_out = gr.Video(label='Annotated Video', interactive=False, visible=False)
-                    annotation_editor = gr.HTML("""""", visible=False)
-
-                    with open('annotation_editor.js', 'r') as f:
-                        js = f.read()
-                        annotation_editor.change(lambda x: gr.update(), None, annotation_editor, _js=js)
-                    tabs.append({
-                        'tab': tab,
-                        'metadata': metadata_out,
-                        'video': video_out,
-                        'table': table_out,
-                        'annotation': annotation_editor
-                    })
-                    UI_components.extend([tab, metadata_out, video_out, table_out, annotation_editor])
-
-    # Button to show example result
-    #gr.Button(value="Show Example Result").click(show_example_data, None, result_handler)
+        with gr.Tabs() as master_tabs:
+            components['master_tabs'] = master_tabs
+
+            # Master Tab for uploading aris or result files
+            with gr.Tab("Upload", id=0):
+                
+                # Draw Gradio components related to the upload ui
+                Upload_Gradio(components)
+
+            # Master Tab for result visualization
+            with gr.Tab("Result", id=1):
+
+
+                # Define annotation progress bar for event listeres, but unrender since it will be displayed later on
+                annotation_progress = gr.HTML("", visible=False).unrender()
+                components['annotation_progress'] = annotation_progress
+                
+                # Draw the gradio components related to visualzing result
+                vis_components = Result_Gradio(prepare_annotation, components)
+                
+            # Master Tab for annotation editing
+            with gr.Tab("Annotation Editor", id=2):
+
+                # Draw the annotation loading bar here
+                annotation_progress.render()
+
+                # Add annotation editor component
+                annotation_editor = gr.HTML("", visible=False)
+
+                # Event listener for opening annotation 
+                annotation_progress.change(open_annotation, annotation_progress, [annotation_editor, annotation_progress], _js="() => window.annotation_index")
+                
+                # Event listener for running javascript defined in 'annotation_editor.js'
+                with open('annotation_editor.js', 'r') as f:
+                    annotation_editor.change(lambda x: gr.update(), None, annotation_editor, _js=f.read())
 
     # Disclaimer at the bottom of page
     gr.HTML(
@@ -300,21 +270,38 @@ with demo:
         """
     )
 
+    # Extract important components for ease of code
+    input = components['input']
+    inference_handler = components['inference_handler']
+    result_handler = components['result_handler']
+    tab_labeler = components['tab_labeler']
+
+
+    inference_comps = [inference_handler, master_tabs, components['cancelBtn'], components['skipBtn']]
+
     # When a file is uploaded to the input, tell the inference_handler to start inference
-    input.upload(fn=on_input, inputs=input, outputs=[inference_handler])
+    input.upload(on_aris_input, input, inference_comps)
 
     # When inference handler updates, tell result_handler to show the new result
     # Also, add inference_handler as the output in order to have it display the progress
-    inference_handler.change(handle_next, None, [result_handler, inference_handler])
+    inference_event = inference_handler.change(infer_next, None, [inference_handler, result_handler, tab_labeler])
 
     # Send UI changes based on the new results to the UI_components, and tell the inference_handler to start next inference
-    result_handler.change(show_data, None, UI_components + [inference_handler], _js=js_update_tabs)
-    
+    result_handler.change(on_result_ready, None, vis_components + [inference_handler])
+
+    # Cancel and skip buttons
+    components['cancelBtn'].click(cancel_inference, None, inference_comps, cancels=[inference_event])
+    components['skipBtn'].click(cancel_inference, None, inference_comps, cancels=[inference_event])
+
     # Button to load a previous result and view visualization
-    preview_result_btn.click(preview_result, [result_input, result_aris_input], [result_handler, inference_handler, preview_result_btn])
+    components['preview_result_btn'].click(
+        on_result_upload, 
+        [components['result_input'], components['result_aris_input']], 
+        vis_components + [master_tabs, tab_labeler]
+    )
 
 demo.queue().launch()
 
-show_data()
+on_result_ready()
 
 

aris.py

@@ -450,29 +450,14 @@ def create_metadata_table(result, table_headers, info_headers):
         table.append(row)
 
     # Create info table
-    stacked_info = []
-    max_col = 0
-    for column in info_headers:
-        column_res = []
-        for field in column:
-            if field in metadata:
-                column_res.append([field, metadata[field]])
-        stacked_info.append(column_res)
-        if len(column_res) > max_col:
-            max_col = len(column_res)
-    
     info = []
-    for i in range(max_col):
-        row = []
-        for column in stacked_info:
-            if i < len(column):
-                entry = column[i]
-                row.append("**" + entry[0] + "**")
-                row.append(str(entry[1]))
-            else: 
-                row.append(" ")
-                row.append(" ")
-        info.append(row)
+    for field in info_headers:
+        field_name = "**" + field + "**"
+        if field in metadata:
+            info.append([field_name, str(metadata[field])])
+        else:
+            info.append([field_name, ""])
+    
     return table, info
 
 def create_manual_marking(results, out_path=None):
@@ -513,7 +498,7 @@ File  Total  Frame#  Dir   R (m)   Theta   L(cm)  dR(cm)    L/dR  Aspect    Time
     for fish in metadata["FISH"]:
         entry = {}
         for field in fish.keys():
-            if type(fish[field]) == str: 
+            if fish[field] == "nan": 
                 entry[field] = math.nan
             else:
                 entry[field] = fish[field]

gradio_components/result_ui.py

@@ -0,0 +1,117 @@
+import gradio as gr
+import numpy as np
+
+js_update_tab_labels = """
+    async () => {
+        let el_list = document.getElementById("tab_labeler").getElementsByClassName("svelte-1kcgrqr")
+        let idx = (el_list[1].value === "LOADING") ? 1 : parseInt(el_list[1].value)
+        console.log(idx)
+        style_sheet = document.getElementById("tab_style")
+        style_sheet.innerHTML = ""
+        for (let i = 1; i <= idx; i++) {
+            style_sheet.innerHTML += "#result_tabs button.svelte-kqij2n:nth-child(" + i + "):before {content: 'Result " + i + "';}"
+        }
+    }
+"""
+
+table_headers = ["TOTAL" , "FRAME_NUM", "DIR", "R", "THETA", "L", "TIME", "DATE", "SPECIES"]
+info_headers = [
+    "TOTAL_TIME", "DATE", "START", "END", "TOTAL_FRAMES", "FRAME_RATE",
+    "TOTAL_FISH", "UPSTREAM_FISH", "DOWNSTREAM_FISH", "NONDIRECTIONAL_FISH",
+    "UPSTREAM_MOTION", "INTENSITY", "THRESHOLD", "WATER_TEMP"
+]
+max_tabs = 10
+
+tabs = []
+tab_parent = None
+zip_out = None
+
+def update_result(i, state, result, inference_handler):
+    # If index is larger than max_tabs, only add file to zip list
+    if i >= max_tabs:
+        return {
+            zip_out: gr.update(value=result["path_zip"])
+        }
+
+    # Check if inference is done
+    not_done = state['index'] < state['total']
+
+    annotation_avaliable = not (result["aris_input"][i] == None)
+
+    # Send update to UI, and to inference_handler to start next file inference
+    return {
+        zip_out: gr.update(value=result["path_zip"]),
+        tabs[i]['tab']: gr.update(),
+        tabs[i]['video']: gr.update(value=result["path_video"][i], visible=True),
+        tabs[i]['metadata']: gr.update(value=result["fish_info"][i], visible=True),
+        tabs[i]['table']: gr.update(value=result["fish_table"][i], visible=True),
+        tabs[i]['annotation_btn']: gr.update(visible=annotation_avaliable),
+        tab_parent: gr.update(selected=i),
+        inference_handler: gr.update(value = str(np.random.rand()), visible=not_done)
+    }
+
+
+
+
+def Result_Gradio(prepare_annotation, components):
+    global tabs, tab_parent, zip_out
+
+    # Dummy element to call inference events, this also displays the inference progress
+    components['inference_handler'] = gr.Text(value=str(np.random.rand()), visible=False)
+
+    # Dummy element to call UI events
+    components['result_handler'] = gr.Text(value="LOADING", visible=False)
+
+    # Dummy element for updating tab titles
+    components['tab_labeler'] = gr.Text(value="", visible=False, elem_id="tab_labeler")
+    components['tab_labeler'].change(lambda x: x, None, None, _js=js_update_tab_labels)
+
+    with gr.Row():
+        components['cancelBtn'] = gr.Button("Cancel Inference", visible=False)
+        components['skipBtn'] = gr.Button("Skip this file", visible=False)
+
+    # List of all UI components that will recieve outputs from the result_handler
+    visual_components = []
+
+    # Zip file output
+    zip_out = gr.File(label="ZIP Output", interactive=False)
+    visual_components.append(zip_out)
+
+
+    # Create result tabs
+    tabs = []
+    with gr.Tabs(elem_id="result_tabs") as tab_parent:
+        visual_components.append(tab_parent)
+
+        # Create 'max_tab' tabs for showing result
+        for i in range(max_tabs):
+            with gr.Tab(label="", id=i, elem_id="result_tab"+str(i)) as tab:
+
+                with gr.Row():
+                    # List of clip info (date, time, number of fish, temperature, etc.) 
+                    metadata_out = gr.Matrix(label="Info", interactive=False, headers=["Field", "Value"], datatype="markdown", visible=False, elem_id="marking_json")
+                    
+                    # Annotated video
+                    video_out = gr.Video(label='Annotated Video', interactive=False, visible=False)
+
+
+                # Table of found fish
+                table_out = gr.Matrix(label='Indentified Fish', headers=table_headers, interactive=False, visible=False)
+
+                # Button for opening result in annotation editor
+                annotation_btn = gr.Button("Edit Annotation", visible=False)
+                annotation_btn.click(prepare_annotation, None, [components['annotation_progress'], components['master_tabs']], _js="() => window.annotation_index=" + str(i))
+                
+                # Add components to tab dict for easy access later on
+                tabs.append({
+                    'tab': tab,
+                    'metadata': metadata_out,
+                    'video': video_out,
+                    'table': table_out,
+                    'annotation_btn': annotation_btn
+                })
+
+                # Add all components to list of visualization outputs
+                visual_components.extend([tab, metadata_out, video_out, table_out, annotation_btn])
+
+    return visual_components

gradio_components/upload_ui.py

@@ -0,0 +1,30 @@
+import gradio as gr
+from file_reader import File
+
+
+def Upload_Gradio(gradio_components):
+    with gr.Tabs():
+
+        # Tab - uploading aris files for inference
+        with gr.Tab("Infer ARIS"):
+
+            gr.HTML("<p align='center' style='font-size: large;font-style: italic;'>Submit an .aris file to analyze result.</p>")
+            
+            #Input field for aris submission
+            gradio_components['input'] = File(file_types=[".aris", ".ddf"], type="binary", label="ARIS Input", file_count="multiple")
+
+        # Tab - uploading old result files to review
+        with gr.Tab("Open Result"):
+            gr.HTML("""
+                <p align='center' style='font-size: large;font-style: italic;'>Submit an old zip file of results to visualize.</p>
+                <p align='center' style='font-size: large;font-style: italic;'>If you want to edit annotations, also submit an aris file.</p>
+            """)
+
+            # Input for .zip result file
+            gradio_components['result_input'] = File(file_types=[".zip"], type="binary", label="Upload result file", file_count="multiple")
+            
+            # Optional input for aris file to help with annotation editing
+            gradio_components['result_aris_input'] = File(file_types=[".aris", ".ddf"], type="binary", label="Upload aris file (optional)", file_count="multiple")
+            
+            # Button for initializing review
+            gradio_components['preview_result_btn'] = gr.Button("View Result")

uploader.py

@@ -5,10 +5,15 @@ from datetime import datetime;
 USER_DATA_DIR = "user_data/"
 
 
-def save_data(bytes, filename):
+def save_data(bytes, filename, identifier=None):
     """Take a file and saved it to a new user_data folder"""
     
-    dirname = create_data_dir()
+    dirname = create_data_dir(identifier)
+    
+    return save_data_to_dir(bytes, filename, dirname)
+
+def save_data_to_dir(bytes, filename, dirname):
+
     filepath = os.path.join(dirname, filename) 
     
     assert bytes[0:3] == b'DDF'
@@ -32,9 +37,11 @@ def allowed_file(filename):
     return '.' in filename and \
            filename.rsplit('.', 1)[1].lower() in ['aris', 'ddf']
 
-def create_data_dir():
+def create_data_dir(identifier = None):
     """Create a (probably) unique directory for a task."""
     dirname = os.path.join(USER_DATA_DIR, str(int(datetime.now().timestamp())))
+    if identifier:
+        dirname = os.path.join(dirname, identifier)
     if os.path.exists(dirname):
         print("Warning,", dirname, "already exists.")
     os.makedirs(dirname, exist_ok=True)