Towhidul commited on
Commit
28e5a4a
1 Parent(s): 21781c8

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +82 -81
app.py CHANGED
@@ -1,6 +1,6 @@
1
  import streamlit as st
2
  import wizmap
3
-
4
  st.set_option('deprecation.showPyplotGlobalUse', False)
5
 
6
 
@@ -9,85 +9,85 @@ data_url = 'https://huggingface.co/datasets/xiaohk/embeddings/blob/main/imdb/dat
9
  grid_url = 'https://huggingface.co/datasets/xiaohk/embeddings/blob/main/imdb/grid.json'
10
 
11
 
12
- import streamlit as st
13
- import base64
14
- import random
15
-
16
- import numpy as np
17
- import random
18
- import html
19
- import base64
20
- import pkgutil
21
- import ndjson
22
-
23
- from glob import glob
24
- from os.path import exists, join, basename
25
- from tqdm import tqdm
26
- from collections import Counter
27
- from IPython.display import display_html
28
- from json import dump, load, dumps
29
- from sklearn.feature_extraction.text import CountVectorizer, TfidfTransformer
30
- from quadtreed3 import Quadtree, Node
31
- from scipy.sparse import csr_matrix
32
- from sklearn.neighbors import KernelDensity
33
- from scipy.stats import norm
34
- from typing import Tuple
35
-
36
-
37
- def _make_html(data_url, grid_url):
38
- # HTML template for WizMap widget
39
- 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>"""
40
- html_bottom = """</head><body><div id="app"></div></body></html>"""
41
-
42
- # Simulating JS and CSS content with base64 encoding for Streamlit
43
- js_string = "console.log('Hello from WizMap');"
44
- js_b = js_string.encode()
45
- js_base64 = base64.b64encode(js_b).decode("utf-8")
46
-
47
- # Simulating passing data into JS by using another script
48
- messenger_js = f"""
49
- (function() {{
50
- const event = new Event('wizmapData');
51
- event.dataURL = '{data_url}';
52
- event.gridURL = '{grid_url}';
53
- document.dispatchEvent(event);
54
- }}())
55
- """
56
- messenger_js = messenger_js.encode()
57
- messenger_js_base64 = base64.b64encode(messenger_js).decode("utf-8")
58
-
59
- # Injecting JS into the HTML template
60
- html_str = (
61
- html_top
62
- + """<script defer src='data:text/javascript;base64,{}'></script>""".format(
63
- js_base64
64
- )
65
- + """<script defer src='data:text/javascript;base64,{}'></script>""".format(
66
- messenger_js_base64
67
- )
68
- + html_bottom
69
- )
70
-
71
- return html_str
72
-
73
- def visualize(data_url, grid_url, height=700):
74
- html_str = _make_html(data_url, grid_url)
75
-
76
- # Randomly generate an ID for the iframe to avoid collision
77
- iframe_id = "wizmap-iframe-" + str(int(random.random() * 1e8))
78
-
79
- iframe = f"""
80
- <iframe
81
- srcdoc="{html_str}"
82
- frameBorder="0"
83
- width="100%"
84
- height="{height}px"
85
- id="{iframe_id}"
86
- style="border: 1px solid hsl(0, 0%, 90%); border-radius: 5px;">
87
- </iframe>
88
- """
89
-
90
- st.markdown(display_html(iframe, raw=True), unsafe_allow_html=True)
91
 
92
  # # # Example usage in Streamlit
93
  # # data_url = "https://example.com/data.json"
@@ -96,4 +96,5 @@ visualize(data_url, grid_url)
96
 
97
 
98
  st.write("# Display wizmap")
99
- st.pyplot(wizmap.visualize(data_url, grid_url, height=700))
 
 
1
  import streamlit as st
2
  import wizmap
3
+ from streamlit import components
4
  st.set_option('deprecation.showPyplotGlobalUse', False)
5
 
6
 
 
9
  grid_url = 'https://huggingface.co/datasets/xiaohk/embeddings/blob/main/imdb/grid.json'
10
 
11
 
12
+ # import streamlit as st
13
+ # import base64
14
+ # import random
15
+
16
+ # import numpy as np
17
+ # import random
18
+ # import html
19
+ # import base64
20
+ # import pkgutil
21
+ # import ndjson
22
+
23
+ # from glob import glob
24
+ # from os.path import exists, join, basename
25
+ # from tqdm import tqdm
26
+ # from collections import Counter
27
+ # from IPython.display import display_html
28
+ # from json import dump, load, dumps
29
+ # from sklearn.feature_extraction.text import CountVectorizer, TfidfTransformer
30
+ # from quadtreed3 import Quadtree, Node
31
+ # from scipy.sparse import csr_matrix
32
+ # from sklearn.neighbors import KernelDensity
33
+ # from scipy.stats import norm
34
+ # from typing import Tuple
35
+
36
+
37
+ # def _make_html(data_url, grid_url):
38
+ # # HTML template for WizMap widget
39
+ # 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>"""
40
+ # html_bottom = """</head><body><div id="app"></div></body></html>"""
41
+
42
+ # # Simulating JS and CSS content with base64 encoding for Streamlit
43
+ # js_string = "console.log('Hello from WizMap');"
44
+ # js_b = js_string.encode()
45
+ # js_base64 = base64.b64encode(js_b).decode("utf-8")
46
+
47
+ # # Simulating passing data into JS by using another script
48
+ # messenger_js = f"""
49
+ # (function() {{
50
+ # const event = new Event('wizmapData');
51
+ # event.dataURL = '{data_url}';
52
+ # event.gridURL = '{grid_url}';
53
+ # document.dispatchEvent(event);
54
+ # }}())
55
+ # """
56
+ # messenger_js = messenger_js.encode()
57
+ # messenger_js_base64 = base64.b64encode(messenger_js).decode("utf-8")
58
+
59
+ # # Injecting JS into the HTML template
60
+ # html_str = (
61
+ # html_top
62
+ # + """<script defer src='data:text/javascript;base64,{}'></script>""".format(
63
+ # js_base64
64
+ # )
65
+ # + """<script defer src='data:text/javascript;base64,{}'></script>""".format(
66
+ # messenger_js_base64
67
+ # )
68
+ # + html_bottom
69
+ # )
70
+
71
+ # return html_str
72
+
73
+ # def visualize(data_url, grid_url, height=700):
74
+ # html_str = _make_html(data_url, grid_url)
75
+
76
+ # # Randomly generate an ID for the iframe to avoid collision
77
+ # iframe_id = "wizmap-iframe-" + str(int(random.random() * 1e8))
78
+
79
+ # iframe = f"""
80
+ # <iframe
81
+ # srcdoc="{html_str}"
82
+ # frameBorder="0"
83
+ # width="100%"
84
+ # height="{height}px"
85
+ # id="{iframe_id}"
86
+ # style="border: 1px solid hsl(0, 0%, 90%); border-radius: 5px;">
87
+ # </iframe>
88
+ # """
89
+
90
+ # st.markdown(display_html(iframe, raw=True), unsafe_allow_html=True)
91
 
92
  # # # Example usage in Streamlit
93
  # # data_url = "https://example.com/data.json"
 
96
 
97
 
98
  st.write("# Display wizmap")
99
+
100
+ components.v1.html(wizmap.visualize(data_url, grid_url, height=700))