Spaces:
Sleeping
Sleeping
Update app.py
Browse files
app.py
CHANGED
|
@@ -10,70 +10,70 @@ grid_url = 'https://huggingface.co/datasets/xiaohk/embeddings/blob/main/imdb/gri
|
|
| 10 |
|
| 11 |
|
| 12 |
import streamlit as st
|
| 13 |
-
import base64
|
| 14 |
-
import random
|
| 15 |
-
|
| 16 |
-
def _make_html(data_url, grid_url):
|
| 17 |
-
|
| 18 |
-
|
| 19 |
-
|
| 20 |
-
|
| 21 |
-
|
| 22 |
-
|
| 23 |
-
|
| 24 |
-
|
| 25 |
-
|
| 26 |
-
|
| 27 |
-
|
| 28 |
-
|
| 29 |
-
|
| 30 |
-
|
| 31 |
-
|
| 32 |
-
|
| 33 |
-
|
| 34 |
-
|
| 35 |
-
|
| 36 |
-
|
| 37 |
-
|
| 38 |
-
|
| 39 |
-
|
| 40 |
-
|
| 41 |
-
|
| 42 |
-
|
| 43 |
-
|
| 44 |
-
|
| 45 |
-
|
| 46 |
-
|
| 47 |
-
|
| 48 |
-
|
| 49 |
-
|
| 50 |
-
|
| 51 |
-
|
| 52 |
-
def visualize(data_url, grid_url, height=700):
|
| 53 |
-
|
| 54 |
-
|
| 55 |
-
|
| 56 |
-
|
| 57 |
-
|
| 58 |
-
|
| 59 |
-
|
| 60 |
-
|
| 61 |
-
|
| 62 |
-
|
| 63 |
-
|
| 64 |
-
|
| 65 |
-
|
| 66 |
-
|
| 67 |
-
|
| 68 |
-
|
| 69 |
-
|
| 70 |
-
|
| 71 |
-
# # Example usage in Streamlit
|
| 72 |
-
# data_url = "https://example.com/data.json"
|
| 73 |
-
# grid_url = "https://example.com/grid.json"
|
| 74 |
-
visualize(data_url, grid_url)
|
| 75 |
-
|
| 76 |
-
|
| 77 |
-
|
| 78 |
-
|
| 79 |
-
|
|
|
|
| 10 |
|
| 11 |
|
| 12 |
import streamlit as st
|
| 13 |
+
# import base64
|
| 14 |
+
# import random
|
| 15 |
+
|
| 16 |
+
# def _make_html(data_url, grid_url):
|
| 17 |
+
# # HTML template for WizMap widget
|
| 18 |
+
# 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>"""
|
| 19 |
+
# html_bottom = """</head><body><div id="app"></div></body></html>"""
|
| 20 |
+
|
| 21 |
+
# # Simulating JS and CSS content with base64 encoding for Streamlit
|
| 22 |
+
# js_string = "console.log('Hello from WizMap');"
|
| 23 |
+
# js_b = js_string.encode()
|
| 24 |
+
# js_base64 = base64.b64encode(js_b).decode("utf-8")
|
| 25 |
+
|
| 26 |
+
# # Simulating passing data into JS by using another script
|
| 27 |
+
# messenger_js = f"""
|
| 28 |
+
# (function() {{
|
| 29 |
+
# const event = new Event('wizmapData');
|
| 30 |
+
# event.dataURL = '{data_url}';
|
| 31 |
+
# event.gridURL = '{grid_url}';
|
| 32 |
+
# document.dispatchEvent(event);
|
| 33 |
+
# }}())
|
| 34 |
+
# """
|
| 35 |
+
# messenger_js = messenger_js.encode()
|
| 36 |
+
# messenger_js_base64 = base64.b64encode(messenger_js).decode("utf-8")
|
| 37 |
+
|
| 38 |
+
# # Injecting JS into the HTML template
|
| 39 |
+
# html_str = (
|
| 40 |
+
# html_top
|
| 41 |
+
# + """<script defer src='data:text/javascript;base64,{}'></script>""".format(
|
| 42 |
+
# js_base64
|
| 43 |
+
# )
|
| 44 |
+
# + """<script defer src='data:text/javascript;base64,{}'></script>""".format(
|
| 45 |
+
# messenger_js_base64
|
| 46 |
+
# )
|
| 47 |
+
# + html_bottom
|
| 48 |
+
# )
|
| 49 |
+
|
| 50 |
+
# return html_str
|
| 51 |
+
|
| 52 |
+
# def visualize(data_url, grid_url, height=700):
|
| 53 |
+
# html_str = _make_html(data_url, grid_url)
|
| 54 |
+
|
| 55 |
+
# # Randomly generate an ID for the iframe to avoid collision
|
| 56 |
+
# iframe_id = "wizmap-iframe-" + str(int(random.random() * 1e8))
|
| 57 |
+
|
| 58 |
+
# iframe = f"""
|
| 59 |
+
# <iframe
|
| 60 |
+
# srcdoc="{html_str}"
|
| 61 |
+
# frameBorder="0"
|
| 62 |
+
# width="100%"
|
| 63 |
+
# height="{height}px"
|
| 64 |
+
# id="{iframe_id}"
|
| 65 |
+
# style="border: 1px solid hsl(0, 0%, 90%); border-radius: 5px;">
|
| 66 |
+
# </iframe>
|
| 67 |
+
# """
|
| 68 |
+
|
| 69 |
+
# st.markdown(iframe, unsafe_allow_html=True)
|
| 70 |
+
|
| 71 |
+
# # # Example usage in Streamlit
|
| 72 |
+
# # data_url = "https://example.com/data.json"
|
| 73 |
+
# # grid_url = "https://example.com/grid.json"
|
| 74 |
+
# visualize(data_url, grid_url)
|
| 75 |
+
|
| 76 |
+
|
| 77 |
+
st.write("# Display wizmap")
|
| 78 |
+
wizmap.visualize(data_url, grid_url, height=700)
|
| 79 |
+
st.pyplot()
|