Update Webpage.py

Webpage.py

@@ -104,40 +104,51 @@ def attention(notes, download1, download2, whole_display_prompt,
                                     ad_embeddings=ad_topic, ctpg_embeddings=ctpg_topic,
                                     surface_sizes=surfaces, Product_Group=prod_group,
                                     obj_detection_model_pth=None, num_topic=20, Gaze_Time_Type=gaze_type)
-    return np.round(Gaze,2), Image.fromarray(np.flip(heatmap, axis=2))
+    return notes, notes, np.round(Gaze,2), notes, Image.fromarray(np.flip(heatmap, axis=2))
 
 def greet(name, intensity):
     return "Hello " * intensity + name + "!"
 
-demo = gr.Interface(
-    fn=attention,
-    inputs=[gr.Markdown("""
-                        Instruction: 
-                        1. Click to upload or drag the entire image that contains BOTH ad and its context;  
-                        2. Draw bounding boxes in the order of: (each element can have more than 1 boxes; remember the number of boxes for each element you draw)  
-                           (a) Brand element(s) (skip if N.A.)  
-                           (b) Pictorial element(s), e.g. Objects, Person etc (skip if N.A.)  
-                           (c) Text element(s) (skip if N.A.)  
-                           (d) The advertisement.  
-                            
-                        Two example ads are avialable for download: """),
-            gr.DownloadButton(label="Download Example Magazine Ad Image", value='Demo/Magazine_Ad_Example.jpg'),
-            gr.DownloadButton(label="Download Example Web Ad Image", value='Demo/Web_Ad_Example.jpg'),
-            ImagePrompter(label="Upload Entire (Ad+Context) Image, and Draw Bounding Boxes", sources=['upload'], type="pil"),
-            gr.Number(label="Number of brand bounding boxes drawn"),
-            gr.Number(label="Number of pictorial bounding boxes drawn"),
-            gr.Number(label="Number of text bounding boxes drawn"),
-            gr.Dropdown(CATEGORIES, label="Product Category"),
-            gr.Dropdown(LOCATIONS, label='Ad Location'),
-            gr.Dropdown(GAZE_TYPE, label='Gaze Type')
-            ],
-    outputs=[gr.Number(label="Predicted Gaze (sec)"), 
-             gr.Image(label="Heatmap by ResNet50 (Hotter/Redder regions show more contribution)")],
-    title="Ad Gaze Prediction",
-    description="""This app accompanies: "Contextual Advertising with Theory-Informed Machine Learning", manuscript submitted to the Journal of Marketing.  
-                   App Version: 1.0, Date: 10/24/2024.  
-                   Warning: Due to computational efficiency, current version has not activated LLM generated ad topics. In future version, LLM topics will be activated in GPU environment.""",
-    theme=gr.themes.Soft()
-)
+with gr.Blocks() as demo:
+    gr.Interface(
+        fn=attention,
+        inputs=[gr.Markdown("""
+                            Instruction: 
+                            1. Click to upload or drag the entire image that contains BOTH ad and its context;  
+                            2. Draw bounding boxes in the order of: (each element can have more than 1 boxes; remember the number of boxes for each element you draw)  
+                               (a) Brand element(s) (skip if N.A.)  
+                               (b) Pictorial element(s), e.g. Objects, Person etc (skip if N.A.)  
+                               (c) Text element(s) (skip if N.A.)  
+                               (d) The advertisement.  
+                                
+                            Two example ads are avialable for download: """),
+                gr.DownloadButton(label="Download Example Image 1 of Ad and Context", value='Demo/Ad_Example1.jpg'),
+                gr.DownloadButton(label="Download Example Image 2 of Ad and Context", value='Demo/Ad_Example2.jpg'),
+                ImagePrompter(label="Upload Entire (Ad+Context) Image, and Draw Bounding Boxes", sources=['upload'], type="pil"),
+                gr.Number(label="Number of brand bounding boxes drawn"),
+                gr.Number(label="Number of pictorial bounding boxes drawn"),
+                gr.Number(label="Number of text bounding boxes drawn"),
+                gr.Dropdown(CATEGORIES, label="Product Category"),
+                gr.Dropdown(LOCATIONS, label='Ad Location'),
+                gr.Dropdown(GAZE_TYPE, label='Gaze Type')
+                ],
+        outputs=[gr.Markdown("""Note: Outputs could take around 70-80 seconds under current CPU environment (due to ResNet model)."""),
+                 gr.Markdown("""### Predicted Gaze (sec) """),
+                 gr.Number(show_label=False), 
+                 gr.Markdown("""### Heatmap by ResNet50 (Hotter/Redder regions show more contribution)"""),
+                 gr.Image(show_label=False)],
+        title="Gazer 1.0: Ad Attention Prediction",
+        description="""This app accompanies: "Contextual Advertising with Theory-Informed Machine Learning", manuscript submitted to the Journal of Marketing.  
+                       App Version: 1.0, Date: 10/24/2024.  
+                       Note: Gazer 1.0 does not yet include LLM generated ad topics. Future updates will include this in a GPU environment.""",
+        theme=gr.themes.Soft()
+    )
+    gr.Markdown(
+            """
+            <div style='text-align: center; padding: 10px;'>
+                <p>Copyright © 2024 Manuscript Authors. All Rights Reserved.</p>
+            </div>
+            """
+        )
 
 demo.launch(share=True)