update detail (#12)

- Add demo twitter (6bcfb537a37e472a625880cc65701c9e93c310c2)

details.py

@@ -23,21 +23,23 @@ def app():
     st.markdown("# Leveraging medical Twitter to build a visual-language foundation model for pathology")
 
 
-    col1, col2 = st.columns([4, 1])
+    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)
+    render_svg("resources/SVG/Asset 49.svg")
 
+    st.markdown('#### Watch our successful image-to-image retrieval via PLIP:')
+    col1, col2, col3, _, _ = st.columns([1, 1, 1, 1, 1])
     with col1:
-        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)
-        render_svg("resources/SVG/Asset 49.svg")
+        st.markdown("[Similar cells](https://twitter.com/ZhiHuangPhD/status/1641906064823312384)")
+        example1 = Image.open('resources/example/1.png')
+        st.image(example1, caption='Example 1', output_format='png')
     with col2:
-        st.markdown('<b>Watch our success image-to-image retrieval via PLIP:</b>', unsafe_allow_html=True)
-        components.html('''
-            <blockquote class="twitter-tweet">
-                <a href="https://twitter.com/ZhiHuangPhD/status/1641899092195565569"></a>
-            </blockquote>
-            <script async src="https://platform.twitter.com/widgets.js" charset="utf-8">
-            </script>
-            ''',
-        height=900)
+        st.markdown("[Salient object](https://twitter.com/ZhiHuangPhD/status/1641899092195565569)")
+        example2 = Image.open('resources/example/2.png')
+        st.image(example2, caption='Example 2', output_format='png')
+    with col3:
+        st.markdown("[Similar region](https://twitter.com/ZhiHuangPhD/status/1641911235288645632)")
+        example3 = Image.open('resources/example/3.png')
+        st.image(example3, caption='Example 3', output_format='png')
 
 
     st.markdown("#### PLIP is trained on the largest public vision–language pathology dataset: OpenPath")