render images from base64 str instead of local

app.py

@@ -216,7 +216,7 @@ if submit:
         )
 
     st.markdown(f"##### YOLOX Standard vs SAHI Prediction:")
-    static_component, image_1_path, image_2_path, htmlcode = imagecompare(
+    static_component = imagecompare(
         output_1,
         output_2,
         label1="YOLOX",
@@ -226,8 +226,3 @@ if submit:
         show_labels=True,
         make_responsive=True,
     )
-
-    st.write(htmlcode)
-    st.write(pathlib.Path(image_1_path).exists())
-    st.write(image_1_path)
-    st.image(Image.open(image_1_path))

utils.py

@@ -1,14 +1,10 @@
 import streamlit.components.v1 as components
-import streamlit as st
 import numpy
 import sahi.predict
 import sahi.utils
 from PIL import Image
-import pathlib
-import os
-import uuid
-
-STREAMLIT_STATIC_PATH = pathlib.Path(st.__path__[0]) / "static"
+import base64
+import io
 
 
 def sahi_mmdet_inference(
@@ -59,6 +55,15 @@ def sahi_mmdet_inference(
     return output_1, output_2
 
 
+def pillow_to_base64(image: Image.Image):
+    in_mem_file = io.BytesIO()
+    image.save(in_mem_file, format="PNG")
+    img_bytes = in_mem_file.getvalue()  # bytes
+    image_str = base64.b64encode(img_bytes).decode("utf-8")
+    base64_src = f"data:image/png;base64,{image_str}"
+    return base64_src
+
+
 def imagecompare(
     img1: str,
     img2: str,
@@ -94,27 +99,13 @@ def imagecompare(
         Returns a static component with a timeline
     """
     # prepare images
-    for file_ in os.listdir(STREAMLIT_STATIC_PATH):
-        if file_.endswith(".png") and "favicon" not in file_:
-            os.remove(str(STREAMLIT_STATIC_PATH / file_))
-
-    image_1_name = str(uuid.uuid4()) + ".png"
-    image_1_path = STREAMLIT_STATIC_PATH / image_1_name
-    image_1_path = str(image_1_path.resolve())
-    sahi.utils.cv.read_image_as_pil(img1).save(image_1_path)
-
-    image_2_name = str(uuid.uuid4()) + ".png"
-    image_2_path = STREAMLIT_STATIC_PATH / image_2_name
-    image_2_path = str(image_2_path.resolve())
-    sahi.utils.cv.read_image_as_pil(img2).save(image_2_path)
-
-    # image_1_name = "https://juxtapose.knightlab.com/static/img/Sochi_11April2005.jpg"
-    # image_2_name = "https://juxtapose.knightlab.com/static/img/Sochi_22Nov2013.jpg"
-
     img_width, img_height = img1.size
     h_to_w = img_height / img_width
     height = (width * h_to_w) * 0.95
 
+    img1 = pillow_to_base64(sahi.utils.cv.read_image_as_pil(img1))
+    img2 = pillow_to_base64(sahi.utils.cv.read_image_as_pil(img2))
+
     # load css + js
     cdn_path = "https://cdn.knightlab.com/libs/juxtapose/latest"
     css_block = f'<link rel="stylesheet" href="{cdn_path}/css/juxtapose.css">'
@@ -129,11 +120,11 @@ def imagecompare(
         slider = new juxtapose.JXSlider('#foo',
             [
                 {{
-                    src: '{image_1_name}',
+                    src: '{img1}',
                     label: '{label1}',
                 }},
                 {{
-                    src: '{image_2_name}',
+                    src: '{img2}',
                     label: '{label2}',
                 }}
             ],
@@ -148,4 +139,4 @@ def imagecompare(
         """
     static_component = components.html(htmlcode, height=height, width=width)
 
-    return static_component, image_1_path, image_2_path, htmlcode
+    return static_component