using html to embed video into demo

app.py

@@ -21,6 +21,8 @@ parser.add_argument("--save_loc", type=str, required=True)
 parser.add_argument("--n_top_segs", type=int, default=5)
 parser.add_argument("--n_gif_images", type=int, default=20)
 
+# app = flask.Flask(__name__, template_folder="./")
+
 IMAGE_NAME = "imagenet_diego"
 BLENHEIM_SPANIEL_CLASS = 156
 
@@ -76,18 +78,23 @@ def segmentation_generation(image_name, c_width, n_top, n_gif_imgs):
 
 def image_mod(image):
     return image.rotate(45)
-
-
+    
 if __name__ == "__main__":
+    
     inp = gr.inputs.Image(label="Input Image", type="pil")
-    out = gr.outputs.Video(label="Output Image")
+    out = gr.outputs.HTML(label="Output Video")
 
     iface = gr.Interface(
         segmentation_generation, 
         [
             inp,
-            gr.inputs.Slider(minimum=0.001, maximum=0.8, step=0.001, default=0.1, label="cred_width", optional=False),
+            gr.inputs.Slider(minimum=0.01, maximum=0.8, step=0.001, default=0.1, label="cred_width", optional=False),
             gr.inputs.Slider(minimum=1, maximum=10, step=1, default=5, label="n_top_segs", optional=False),
             gr.inputs.Slider(minimum=10, maximum=50, step=1, default=20, label="n_gif_images", optional=False), 
-        ], outputs=out, examples=[["./imagenet_diego.png", 0.1, 6, 20]])
-    iface.launch()
+        ], 
+        outputs=out, 
+        examples=[["./imagenet_diego.png", 0.05, 7, 50]]
+    )
+    iface.launch()
+
+    # app.run(host='0.0.0.0',  port=int(os.environ.get('PORT', 7860)))

image_posterior.py

@@ -68,6 +68,21 @@ def create_gif(explanation_blr, segments, image, n_images=20, n_max=5):
         # Save to gif
         # https://stackoverflow.com/questions/61716066/creating-an-animation-out-of-matplotlib-pngs
         # print(f"Saving gif to {save_loc}")
+
         ims = [imageio.imread(f) for f in paths]
-        return imageio.mimwrite(imageio.RETURN_BYTES, ims)
+        writer = imageio.get_writer('C:/Users/pineapples/Documents/research/Modeling-Uncertainty-Local-Explainability/Modeling-Uncertainty-in-Explainability-Demo/test.mp4', fps = n_images)
+        for im in ims: 
+            writer.append_data(im)
+        writer.close()
+        
+        
+        html =  '''   
+        <div style='max-width:100%; max-height:360px; overflow:auto'>
+            <video width="320" height="240" autoplay>
+                <source src="/build/videos/arcnet.io(7-sec).mp4" type=video/mp4>
+            </video>
+        </div>
+        )''' 
+        return html
+        # return imageio.mimwrite(imageio.RETURN_BYTES, ims)