poloclub / wizmap Goto Github PK

View Code? Open in Web Editor NEW

369.0 4.0 26.0 76.32 MB

Explore and interpret large embeddings in your browser with interactive visualization! 📍

Home Page: https://poloclub.github.io/wizmap/

License: MIT License

JavaScript 0.55% Svelte 9.77% SCSS 16.78% HTML 0.12% CSS 3.74% TypeScript 58.62% GLSL 0.64% Python 9.77%

embeddings interactive-visualizations machine-learning visualization webgl

wizmap's Introduction

WizMap

Exploring and interpreting large embeddings in your browser!

wizmap.mp4
🚀 Live Demo	📺 Demo Video	📖 Research Paper

What is WizMap?

WizMap is a scalable interactive visualization tool to help you easily explore large machine learning embeddings. With a novel multi-resolution embedding summarization method and a familiar map-like interaction design, WizMap allows you to navigate and interpret embedding spaces with ease.

✅	Scalable to millions of embedding point
✅	Multi-resolution embedding summaries
✅	Fast embedding search
✅	Multimodal data (text and image)
✅	Animated embedding evolution
✅	Support computational notebooks (e.g., Jupyter, Colab, VS Code)
✅	Sharable URLs

WizMap Gallery


DiffusionDB Prompts + Images	ACL Paper Abstracts	IMDB Review Comments
1.8M text + 1.8M images	63k text	25k text
`CLIP` Embedding	`all-MiniLM-L6-v2` Embedding	`all-MiniLM-L6-v2` Embedding

Submit a PR to add your WizMap here! You can share your WizMap using a unique URL.

Web Demo

For a live web demo, visit: https://poloclub.github.io/wizmap.

Get Started

Clone or download this repository:

git clone [email protected]:poloclub/wizmap.git

Install the dependencies:

npm install

Then run WizMap:

npm run dev

Navigate to localhost:3000. You should see WizMap running in your browser :)

Use My Own Embeddings

To use WizMap with your embeddings, you first need to install the wizmap Python library.

pip install wizmap

Then take a look at this notebook for a detailed guide. Spoiler alert: You'll be up and running with just two function calls from the wizmap library. These two JSON files contain pre-computed embedding summaries, distributions, and the original embedding data.

After generating the JSON files, you have two options to use WizMap.

Browser: You can click the folder icon on the bottom right of the WizMap demo and enter the URLs to the JSON files in the pop-up window.
Notebook: If you are familiar with computational notebooks (e.g., Jupyter Notebook, VSCode Notebook, Colab), you can directly use WizMap in your favorite notebook platform with wizmap.visualize().

Share My WizMap

You can easily share your embedding maps with collaborators by copying the unique URL of WizMap from your browser. For example, the URL below points to an IMDB embedding in WizMap.

https://poloclub.github.io/wizmap/?dataURL=https%3A%2F%2Fhuggingface.co%2Fdatasets%2Fxiaohk%2Fembeddings%2Fresolve%2Fmain%2Fimdb%2Fdata.ndjson&gridURL=https%3A%2F%2Fhuggingface.co%2Fdatasets%2Fxiaohk%2Fembeddings%2Fresolve%2Fmain%2Fimdb%2Fgrid.json

Credits

WizMap is created by Jay Wang, Fred Hohman, and Polo Chau.

Citation

To learn more about WizMap, please read our research paper (published at ACL'23 System Demonstration).

@article{wangWizMapScalableInteractive2023,
  title = {{{WizMap}}: {{Scalable Interactive Visualization}} for {{Exploring Large Machine Learning Embeddings}}},
  shorttitle = {{{WizMap}}},
  author = {Wang, Zijie J. and Hohman, Fred and Chau, Duen Horng},
  year = {2023},
  url = {http://arxiv.org/abs/2306.09328},
  urldate = {2023-06-16},
  archiveprefix = {arxiv},
  journal = {arXiv 2306.09328}
}

License

The software is available under the MIT License.

Contact

If you have any questions, feel free to open an issue or contact Jay Wang.

wizmap's People

Contributors

Stargazers

Watchers

wizmap's Issues

怎么配置本地服务器才能将数据传给wizmap

What should be used to start local services in order to pass data into wizmap.

No points are displayed

I am running locally WizMap but only contours are visible, see below showing the DiffusionDB example. I am running WizMap in the command line:

❯ npm run dev


> [email protected] dev
> vite --port 3000


  VITE v3.2.7  ready in 182 ms

  ➜  Local:   http://localhost:3000/
  ➜  Network: use --host to expose
10:50:36 AM [vite-plugin-svelte] /src/components/mapview/MapView.svelte:70:0 Unused CSS selector ".main-app-container.hidden"
10:50:36 AM [vite-plugin-svelte] /src/components/footer/Footer.svelte:250:0 Unused CSS selector "dialog[open] .row-block .row-name"

Embeddings not showing

When I load the embeddings provided in the demo, it shows empty no matter what I do.

High density region labels are calculated only for one of the two groups

High density region labels are calculated only for one of the two groups:

Where to find wizmap.js?

Hello! Thank you for a useful tool!

I have a problem while running the example notebook "imdb.ipynb". When I run the last cell with "wizmap.visualize", I receive this error:

FileNotFoundError: [Errno 2] No such file or directory: '../notebook-widget/wizmap/wizmap.js'

Indeed, there is no such file. What actions should I perform in order to obtain it?

Embeddings now showing

When I load the embeddings provided in the demo, it shows empty no matter what I do.

please check the link, why the blue contour cover all the point?

https://poloclub.github.io/wizmap/?dataURL=https%3A%2F%2Fhuggingface.co%2Fdatasets%2Fbobdingli%2FTESTWIZMAP%2Fresolve%2Fmain%2Fdata.ndjson&gridURL=https%3A%2F%2Fhuggingface.co%2Fdatasets%2Fbobdingli%2FTESTWIZMAP%2Fresolve%2Fmain%2Fgrid.json

point can switch "true" and "gene" points respectively
however, the blue contour cover all the points region

使用什么启动本地服务才能将数据传入wizmap。

Different colors for different points?

Hello!

Is there an opportunity to mark different points with different colors?

Example with localhost URLs

Hello!

I have a small request: could you please give an example of accessing files via localhost-URLs? I have a notebook running on localhost:8888, from within the "wizmap" folder. I have tried to use the following URLs for my data:

http://localhost:8888/view/example/smaller_data.ndjson
file:///Users/alexsend57/Documents/wizmap/example/smaller_data.ndjson

However, in both cases the visualisation does not work (points are not appearing). I have checked that there is no problem with the data itself by uploading it on GitHub and running the visualisation with public URLs -- it worked perfectly.

How can I display images?

I would like to display an image for each data point, can you please provide an example code how to do that? Thank you!

How to load the visualisation in an iframe on our website?

We created a visualisation and have a link. We want to showcase the visualisation in our website and tried to use iframe for the same but the visualisation is not loading.

Is there a way we can load the visualisations on our own website?

0 Data points

I am trying to use my own embeddings with texts, but i keep getting empty graph. I tried wizmap.visualize() and online visualization - no use.
What can cause such behavior?

Local package build: wizmap.js not found

I am trying to add an option for customized stopwords (#6), but struggling to install a local version of the Python widget.

Here is how I try (after changing wizmap.py):

$ python -m pip install -U -e ../wizmap/notebook-widget
[...]
Successfully built wizmap
Installing collected packages: wizmap
  Attempting uninstall: wizmap
    Found existing installation: wizmap 0.1.2
    Uninstalling wizmap-0.1.2:
      Successfully uninstalled wizmap-0.1.2
Successfully installed wizmap-0.1.2

However, when I try to import wizmap in Python, I get this error:

import wizmap

wizmap.visualize(data_url, grid_url)

File [.../wizmap/notebook-widget/wizmap/wizmap.py:847](.../wizmap/notebook-widget/wizmap/wizmap.py:847), in visualize(data_url, grid_url, height)
    834 def visualize(data_url, grid_url, height=700):
    835     """
    836     Render WizMap in the output cell.
    837 
   (...)
    845         HTML code with deferred JS code in base64 format
    846     """
--> 847     html_str = _make_html(data_url, grid_url)
    849     # Randomly generate an ID for the iframe to avoid collision
    850     iframe_id = "wizmap-iframe-" + str(int(random.random() * 1e8))

File [.../wizmap/notebook-widget/wizmap/wizmap.py:797](.../wizmap/notebook-widget/wizmap/wizmap.py:797), in _make_html(data_url, grid_url)
    794 html_bottom = """</head><body><div id="app"></div></body></html>"""
    796 # Read the bundled JS file
--> 797 js_b = pkgutil.get_data(__name__, "wizmap.js")
    799 # Read local JS file (for development only)
    800 # with open("./wizmap.js", "r") as fp:
    801 #     js_string = fp.read()
    802 # js_b = bytes(js_string, encoding="utf-8")
    803 
    804 # Encode the JS & CSS with base 64
    805 js_base64 = base64.b64encode(js_b).decode("utf-8")

File [/Library/Frameworks/Python.framework/Versions/3.11/lib/python3.11/pkgutil.py:640](https://file+.vscode-resource.vscode-cdn.net/Library/Frameworks/Python.framework/Versions/3.11/lib/python3.11/pkgutil.py:640), in get_data(package, resource)
    638 parts.insert(0, os.path.dirname(mod.__file__))
    639 resource_name = os.path.join(*parts)
--> 640 return loader.get_data(resource_name)

File :1130, in get_data(self, path)

FileNotFoundError: [Errno 2] No such file or directory: '.../wizmap/notebook-widget/wizmap/wizmap.js'

Note: I have replaced the full path to my local wizmap repository by ... in the output above for brevity.

This works fine with the wizmap version 0.1.2 installed with pip install wizmap.
Is there anything else I need to run for building the Python package locally?

Language Support

Does this tool support Chinese

Cannot use spaces in `groupNames`

For future fixing 🙂

Workaround: remove spaces from group string names on Python side when generating Wizmap files.