Spaces:

Towhidul
/

wizmap_test

Sleeping

App Files Files Community

Towhidul commited on Jan 9, 2024

Commit

c79631b

1 Parent(s): eef9720

Update app.py

Browse files

Files changed (1) hide show

app.py +67 -67

app.py CHANGED Viewed

@@ -10,70 +10,70 @@ grid_url = 'https://huggingface.co/datasets/xiaohk/embeddings/blob/main/imdb/gri
 import streamlit as st
-import base64
-import random
-def _make_html(data_url, grid_url):
-    # HTML template for WizMap widget
-    html_top = """<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>WizMap</title><style>html {font-size: 16px;-moz-osx-font-smoothing: grayscale;-webkit-font-smoothing: antialiased;text-rendering: optimizeLegibility;-webkit-text-size-adjust: 100%;-moz-text-size-adjust: 100%;scroll-behavior: smooth;}html, body {position: relative;width: 100%;height: 100%;overscroll-behavior: none;}body {margin: 0px;padding: 0px;box-sizing: border-box;font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;color: hsl(0, 0%, 29%);font-size: 1em;font-weight: 400;line-height: 1.5;}*, ::after, ::before {box-sizing: inherit;}a {color: rgb(0, 100, 200);text-decoration: none;}a:hover {text-decoration: underline;}a:visited {color: rgb(0, 80, 160);}label {display: block;}input, select, textarea {font-family: inherit;font-size: inherit;-webkit-padding: 0 0;padding: 0;margin: 0 0 0 0;box-sizing: border-box;border: 1px solid #ccc;border-radius: 2px;}input:disabled {color: #ccc;}button {all: unset;outline: none;cursor: pointer;}</style>"""
-    html_bottom = """</head><body><div id="app"></div></body></html>"""
-    # Simulating JS and CSS content with base64 encoding for Streamlit
-    js_string = "console.log('Hello from WizMap');"
-    js_b = js_string.encode()
-    js_base64 = base64.b64encode(js_b).decode("utf-8")
-    # Simulating passing data into JS by using another script
-    messenger_js = f"""
-        (function() {{
-            const event = new Event('wizmapData');
-            event.dataURL = '{data_url}';
-            event.gridURL = '{grid_url}';
-            document.dispatchEvent(event);
-        }}())
-    """
-    messenger_js = messenger_js.encode()
-    messenger_js_base64 = base64.b64encode(messenger_js).decode("utf-8")
-    # Injecting JS into the HTML template
-    html_str = (
-        html_top
-        + """<script defer src='data:text/javascript;base64,{}'></script>""".format(
-            js_base64
-        )
-        + """<script defer src='data:text/javascript;base64,{}'></script>""".format(
-            messenger_js_base64
-        )
-        + html_bottom
-    )
-    return html_str
-def visualize(data_url, grid_url, height=700):
-    html_str = _make_html(data_url, grid_url)
-    # Randomly generate an ID for the iframe to avoid collision
-    iframe_id = "wizmap-iframe-" + str(int(random.random() * 1e8))
-    iframe = f"""
-        <iframe
-            srcdoc="{html_str}"
-            frameBorder="0"
-            width="100%"
-            height="{height}px"
-            id="{iframe_id}"
-            style="border: 1px solid hsl(0, 0%, 90%); border-radius: 5px;">
-        </iframe>
-    """
-    st.markdown(iframe, unsafe_allow_html=True)
-# # Example usage in Streamlit
-# data_url = "https://example.com/data.json"
-# grid_url = "https://example.com/grid.json"
-visualize(data_url, grid_url)
-# st.write("# Display wizmap")
-# wizmap.visualize(data_url, grid_url, height=700)

 import streamlit as st
+# import base64
+# import random
+# def _make_html(data_url, grid_url):
+#     # HTML template for WizMap widget
+#     html_top = """<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>WizMap</title><style>html {font-size: 16px;-moz-osx-font-smoothing: grayscale;-webkit-font-smoothing: antialiased;text-rendering: optimizeLegibility;-webkit-text-size-adjust: 100%;-moz-text-size-adjust: 100%;scroll-behavior: smooth;}html, body {position: relative;width: 100%;height: 100%;overscroll-behavior: none;}body {margin: 0px;padding: 0px;box-sizing: border-box;font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;color: hsl(0, 0%, 29%);font-size: 1em;font-weight: 400;line-height: 1.5;}*, ::after, ::before {box-sizing: inherit;}a {color: rgb(0, 100, 200);text-decoration: none;}a:hover {text-decoration: underline;}a:visited {color: rgb(0, 80, 160);}label {display: block;}input, select, textarea {font-family: inherit;font-size: inherit;-webkit-padding: 0 0;padding: 0;margin: 0 0 0 0;box-sizing: border-box;border: 1px solid #ccc;border-radius: 2px;}input:disabled {color: #ccc;}button {all: unset;outline: none;cursor: pointer;}</style>"""
+#     html_bottom = """</head><body><div id="app"></div></body></html>"""
+#     # Simulating JS and CSS content with base64 encoding for Streamlit
+#     js_string = "console.log('Hello from WizMap');"
+#     js_b = js_string.encode()
+#     js_base64 = base64.b64encode(js_b).decode("utf-8")
+#     # Simulating passing data into JS by using another script
+#     messenger_js = f"""
+#         (function() {{
+#             const event = new Event('wizmapData');
+#             event.dataURL = '{data_url}';
+#             event.gridURL = '{grid_url}';
+#             document.dispatchEvent(event);
+#         }}())
+#     """
+#     messenger_js = messenger_js.encode()
+#     messenger_js_base64 = base64.b64encode(messenger_js).decode("utf-8")
+#     # Injecting JS into the HTML template
+#     html_str = (
+#         html_top
+#         + """<script defer src='data:text/javascript;base64,{}'></script>""".format(
+#             js_base64
+#         )
+#         + """<script defer src='data:text/javascript;base64,{}'></script>""".format(
+#             messenger_js_base64
+#         )
+#         + html_bottom
+#     )
+#     return html_str
+# def visualize(data_url, grid_url, height=700):
+#     html_str = _make_html(data_url, grid_url)
+#     # Randomly generate an ID for the iframe to avoid collision
+#     iframe_id = "wizmap-iframe-" + str(int(random.random() * 1e8))
+#     iframe = f"""
+#         <iframe
+#             srcdoc="{html_str}"
+#             frameBorder="0"
+#             width="100%"
+#             height="{height}px"
+#             id="{iframe_id}"
+#             style="border: 1px solid hsl(0, 0%, 90%); border-radius: 5px;">
+#         </iframe>
+#     """
+#     st.markdown(iframe, unsafe_allow_html=True)
+# # # Example usage in Streamlit
+# # data_url = "https://example.com/data.json"
+# # grid_url = "https://example.com/grid.json"
+# visualize(data_url, grid_url)
+st.write("# Display wizmap")
+wizmap.visualize(data_url, grid_url, height=700)
+st.pyplot()