Add additional features (#9)

- minor update (c0a434dd7fb9027574b29603827ab957efd5b2aa)

.gitattributes

@@ -39,3 +39,4 @@ twitter.asset filter=lfs diff=lfs merge=lfs -text
 *.jpg filter=lfs diff=lfs merge=lfs -text
 *.jpeg filter=lfs diff=lfs merge=lfs -text
 *.png filter=lfs diff=lfs merge=lfs -text
+*.svg filter=lfs diff=lfs merge=lfs -text

details.py

@@ -2,10 +2,20 @@ from pathlib import Path
 import streamlit as st
 import streamlit.components.v1 as components
 from PIL import Image
+import base64
 
 def read_markdown_file(markdown_file):
     return Path(markdown_file).read_text()
 
+def render_svg(svg_filename):
+    with open(svg_filename,"r") as f:
+        lines = f.readlines()
+        svg=''.join(lines)
+    """Renders the given svg string."""
+    b64 = base64.b64encode(svg.encode('utf-8')).decode("utf-8")
+    html = r'<img src="data:image/svg+xml;base64,%s"/>' % b64
+    st.write(html, unsafe_allow_html=True)
+
 
 def app():
     #intro_markdown = read_markdown_file("introduction.md")
@@ -14,8 +24,7 @@ def app():
 
     st.markdown("The lack of annotated publicly available medical images is a major barrier for innovations. At the same time, many de-identified images and much knowledge are shared by clinicians on public forums such as medical Twitter. Here we harness these crowd platforms to curate OpenPath, a large dataset of <b>208,414</b> pathology images paired with natural language descriptions. This is the largest public dataset for pathology images annotated with natural text. We demonstrate the value of this resource by developing PLIP, a multimodal AI with both image and text understanding, which is trained on OpenPath. PLIP achieves state-of-the-art zero-shot and few-short performance for classifying new pathology images across diverse tasks. Moreover, PLIP enables users to retrieve similar cases by either image or natural language search, greatly facilitating knowledge sharing. Our approach demonstrates that publicly shared medical data is a tremendous opportunity that can be harnessed to advance biomedical AI.", unsafe_allow_html=True)
 
-    fig1ab = Image.open('resources/4x/Fig1ab.png')
-    st.image(fig1ab, caption='OpenPath Dataset', output_format='png')
+    render_svg("resources/SVG/Asset 49.svg")
     st.caption('An example of tweet')
     components.html('''
         <blockquote class="twitter-tweet">
@@ -38,10 +47,8 @@ def app():
         st.markdown("- PathLAION: 32,041 additional image–text pairs from the Internet which are outside from the Twitter community extracted from the LAION dataset.", unsafe_allow_html=True)
         st.markdown("Leveraging the largest publicly available pathology dataset which contains image–text pairs across 32 different pathology subspecialty-specific hashtags, where each image has detailed text descriptions, we fine-tuned a pre-trained CLIP model and proposed a multimodal deep learning model for pathology, PLIP.", unsafe_allow_html=True)
     with col2:
-        fig1c = Image.open('resources/4x/Fig1c.png')
-        st.image(fig1c, caption='Pathology hashtags in Twitter', output_format='png')
-        fig1d = Image.open('resources/4x/Fig1d.png')
-        st.image(fig1d, caption='Number of words in sentence', output_format='png')
+        render_svg("resources/SVG/Asset 50.svg")
+        render_svg("resources/SVG/Asset 51.svg")
 
 
 
@@ -54,8 +61,7 @@ def app():
         st.image(fig1e, caption='PLIP training', output_format='png')
 
     with col2:
-        fig1f = Image.open('resources/4x/Fig1f.png')
-        st.image(fig1f, caption='Training illustration', output_format='png')
+        render_svg("resources/SVG/Asset 53.svg")
 
 
 

home.py

@@ -2,10 +2,20 @@ from pathlib import Path
 import streamlit as st
 import streamlit.components.v1 as components
 from PIL import Image
+import base64
 
 def read_markdown_file(markdown_file):
     return Path(markdown_file).read_text()
 
+def render_svg(svg_filename):
+    with open(svg_filename,"r") as f:
+        lines = f.readlines()
+        svg=''.join(lines)
+    """Renders the given svg string."""
+    b64 = base64.b64encode(svg.encode('utf-8')).decode("utf-8")
+    html = r'<img src="data:image/svg+xml;base64,%s"/>' % b64
+    st.write(html, unsafe_allow_html=True)
+
 
 def app():
 
@@ -18,8 +28,7 @@ def app():
 
     st.markdown("### OpenPath Dataset\nThe lack of annotated publicly available medical images is a major barrier for innovations. At the same time, many de-identified images and much knowledge are shared by clinicians on public forums such as medical Twitter. Here we harness these crowd platforms to curate OpenPath, a large dataset of **208,414** pathology images paired with natural language descriptions")
 
-    fig1ab = Image.open('resources/4x/Fig1ab.png')
-    st.image(fig1ab, caption='OpenPath Dataset', output_format='png')
+    render_svg("resources/SVG/Asset 49.svg")
 
 
     st.markdown("### Documentation\n"
@@ -35,8 +44,7 @@ def app():
                 "* Link to the [PLIP Model](https://huggingface.co/vinid/plip)\n"
                 "")
 
-    st.markdown("### Important Information\n")
-
+    st.markdown("""---""")
     st.markdown('Disclaimer')
     st.caption('Please be advised that this function has been developed in compliance with the Twitter policy of data usage and sharing. It is important to note that the results obtained from this function are not intended to constitute medical advice or replace consultation with a qualified medical professional. The use of this function is solely at your own risk and should be consistent with applicable laws, regulations, and ethical considerations. We do not warrant or guarantee the accuracy, completeness, suitability, or usefulness of this function for any particular purpose, and we hereby disclaim any liability arising from any reliance placed on this function or any results obtained from its use. If you wish to review the original Twitter post, you should access the source page directly on Twitter.')
 

image2image.py

@@ -185,7 +185,7 @@ def app():
                     <script async src="https://platform.twitter.com/widgets.js" charset="utf-8">
                     </script>
                     ''' % target_weblinks[topn_value],
-                height=800)
+                height=600)
 
         tab[3], tab[4], tab[5] = st.columns(3)
         for i in [3,4]:
@@ -211,10 +211,10 @@ def app():
 
 
 
+    st.markdown("""---""")
     st.markdown('Disclaimer')
     st.caption('Please be advised that this function has been developed in compliance with the Twitter policy of data usage and sharing. It is important to note that the results obtained from this function are not intended to constitute medical advice or replace consultation with a qualified medical professional. The use of this function is solely at your own risk and should be consistent with applicable laws, regulations, and ethical considerations. We do not warrant or guarantee the accuracy, completeness, suitability, or usefulness of this function for any particular purpose, and we hereby disclaim any liability arising from any reliance placed on this function or any results obtained from its use. If you wish to review the original Twitter post, you should access the source page directly on Twitter.')
 
-
     st.markdown('Privacy statement')
     st.caption('In accordance with the privacy and control policy of Twitter, we hereby declared that the data redistributed by us shall only comprise of Tweet IDs. The Tweet IDs will be employed to establish a linkage with the original Twitter post, as long as the original post is still accessible. The hyperlink will cease to function if the user deletes the original post. It is important to note that all tweets displayed on our service have already been classified as non-sensitive by Twitter. It is strictly prohibited to redistribute any content apart from the Tweet IDs. Any distribution carried out must adhere to the laws and regulations applicable in your jurisdiction, including export control laws and embargoes.')
 

requirements.txt

@@ -8,3 +8,4 @@ streamlit==1.19.0
 st_clickable_images
 plotly
 datetime
+base64

text2image.py

@@ -12,7 +12,16 @@ from transformers import (
     AutoProcessor
 )
 import streamlit.components.v1 as components
+import base64
 
+def render_svg(svg_filename):
+    with open(svg_filename,"r") as f:
+        lines = f.readlines()
+        svg=''.join(lines)
+    """Renders the given svg string."""
+    b64 = base64.b64encode(svg.encode('utf-8')).decode("utf-8")
+    html = r'<img src="data:image/svg+xml;base64,%s"/>' % b64
+    st.write(html, unsafe_allow_html=True)
 
 @st.cache(
     hash_funcs={
@@ -67,8 +76,7 @@ def app():
         st.markdown("The text-to-image retrieval system can serve as an image search engine, enabling users to match images from multiple queries and retrieve the most relevant image based on a sentence description. This generic system can comprehend semantic and interrelated knowledge, such as “Breast tumor surrounded by fat”.")
         st.markdown("Unlike searching keywords and sentences from Google and indirectly matching the images from the target text, our proposed pathology image retrieval allows direct comparison between input sentences and images.")
     with col2:
-        fig1 = Image.open('resources/4x/image_retrieval.png')
-        st.image(fig1, caption='Image retrieval from text', width=400, output_format='png')
+        render_svg("resources/SVG/Asset 54.svg")
 
     meta, image_embedding, text_embedding, validation_subset_index = init()
     model, processor = load_path_clip()
@@ -158,7 +166,10 @@ def app():
     # Display results
     ############################################################
 
-    st.markdown('Your input query: %s' % query)
+    text = 'Your input query: <span style="background-color: rgb(230,230,230);"><b>%s</b></span>' % query + \
+        ' (Try search it directly on [Twitter](https://twitter.com/search?q=%s&src=typed_query) or [Google](https://www.google.com/search?q=%s))' % (query.replace(' ', '%20'), query.replace(' ', '+'))
+    st.markdown(text, unsafe_allow_html=True)
+
     st.markdown('#### Top 5 results:')
     topk_options = ['1st', '2nd', '3rd', '4th', '5th']
     tab = {}
@@ -175,7 +186,7 @@ def app():
                 <script async src="https://platform.twitter.com/widgets.js" charset="utf-8">
                 </script>
                 ''' % target_weblinks[topn_value],
-            height=800)
+            height=600)
 
     tab[3], tab[4], tab[5] = st.columns(3)
     for i in [3,4]:
@@ -194,6 +205,7 @@ def app():
 
 
 
+    st.markdown("""---""")
     st.markdown('Disclaimer')
     st.caption('Please be advised that this function has been developed in compliance with the Twitter policy of data usage and sharing. It is important to note that the results obtained from this function are not intended to constitute medical advice or replace consultation with a qualified medical professional. The use of this function is solely at your own risk and should be consistent with applicable laws, regulations, and ethical considerations. We do not warrant or guarantee the accuracy, completeness, suitability, or usefulness of this function for any particular purpose, and we hereby disclaim any liability arising from any reliance placed on this function or any results obtained from its use. If you wish to review the original Twitter post, you should access the source page directly on Twitter.')