-
Notifications
You must be signed in to change notification settings - Fork 51
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add MDX support to the GUI API (#73)
* Create JSX component that processes markdown using MDX 2 * Add markdown to the GUI API and style it on the client * Update Example 14 to be scoped per-client * Move GUI Handles for Folders, Tabs, and Markdown to _gui_handles.py * Use regex literals to resolve 'Unsupported Escape Sequence' warnings * Update interface to intake a image_root Path and replace relative paths in mdx This gets around introducing custom syntax that isn't being processed by mdx * Remove custom placeholder from markdown image As far as I can tell it doesn't work for images without a predefined aspect ratio * Tweak markdown support - Remove <img src="" /> => data URL logic - Add .visible support * Prettier --------- Co-authored-by: Brent Yi <[email protected]>
- Loading branch information
1 parent
db72bca
commit 046b813
Showing
16 changed files
with
1,698 additions
and
156 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,34 @@ | ||
"""Markdown Demonstration | ||
Viser GUI has MDX 2 support. | ||
""" | ||
|
||
import time | ||
from pathlib import Path | ||
|
||
import viser | ||
|
||
server = viser.ViserServer() | ||
server.world_axes.visible = True | ||
|
||
|
||
@server.on_client_connect | ||
def _(client: viser.ClientHandle) -> None: | ||
here = Path(__file__).absolute().parent | ||
markdown_source = (here / "./assets/mdx_example.mdx").read_text() | ||
markdown = client.add_gui_markdown(markdown=markdown_source, image_root=here) | ||
|
||
button = client.add_gui_button("Remove Markdown") | ||
checkbox = client.add_gui_checkbox("Visibility", initial_value=True) | ||
|
||
@button.on_click | ||
def _(_): | ||
markdown.remove() | ||
|
||
@checkbox.on_update | ||
def _(_): | ||
markdown.visible = checkbox.value | ||
|
||
|
||
while True: | ||
time.sleep(10.0) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,95 @@ | ||
## Markdown in Viser | ||
|
||
--- | ||
|
||
Viser has full support for the GFM markdown spec, including **bold**, _italics_, | ||
~~strikethrough~~, and many other features. | ||
|
||
Here's a [masked link](https://github.com/nerfstudio-project/viser). Not a fan? | ||
Here's a normal one: https://pypi.org/project/viser/ | ||
|
||
Anywhere where you can insert GUI elements, you can also insert `images`, | ||
`blockquotes`, `lists`, `tables`, `task lists`, and `(unstyled) code blocks`. | ||
|
||
In inline code blocks, you can show off colors with color chips: `#FED363` | ||
`hsl(0, 0%, 82%)` `rgb(255, 255, 255)` | ||
|
||
Adding images from a remote origin is simple. | ||
|
||
![Viser Logo](http://nerfstudio-project.github.io/viser/_static/viser.svg) | ||
|
||
For local images with relative paths, you can either directly use a | ||
[data URL](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URLs) | ||
or set the `image_root` argument to the `Path` object that you'd like your paths | ||
relative to. If no such `image_root` is provided, the file system will be scoped | ||
to the directory that Viser is installed in. | ||
|
||
![Cal Logo](../examples/assets/Cal_logo.png) | ||
![Cal Logo](/Users/brentyi/Documents/code/viser/examples/assets/Cal_logo.png) | ||
|
||
Tables follow the standard markdown spec: | ||
|
||
| Application | Description | | ||
| ---------------------------------------------------- | -------------------------------------------------- | | ||
| [Nerfstudio](https://nerf.studio) | A collaboration friendly studio for NeRFs | | ||
| [Viser](https://nerfstudio-project.github.io/viser/) | An interactive 3D visualization toolbox for Python | | ||
|
||
Code blocks, while being not nearly as exciting as some of the things presented, | ||
work as expected. Currently, while you can specify a language and metadata in | ||
your blocks, they will remain unused by the Markdown renderer. | ||
|
||
```python | ||
"""Markdown Demonstration | ||
Viser GUI has MDX 2 support. | ||
""" | ||
|
||
import time | ||
from pathlib import Path | ||
|
||
import viser | ||
|
||
server = viser.ViserServer() | ||
server.world_axes.visible = True | ||
|
||
|
||
@server.on_client_connect | ||
def _(client: viser.ClientHandle) -> None: | ||
with open("./assets/mdx_example.mdx", "r") as mkdn: | ||
markdown = client.add_gui_markdown( | ||
markdown=mkdn.read(), image_root=Path(__file__).parent | ||
) | ||
|
||
button = client.add_gui_button("Remove Markdown") | ||
|
||
@button.on_click | ||
def _(_): | ||
markdown.remove() | ||
|
||
|
||
while True: | ||
time.sleep(10.0) | ||
``` | ||
|
||
As a bonus, MDX is extensible and JS capable. This means that you have the | ||
freedom to do things like: | ||
|
||
This page loaded on {(new Date()).toString()} | ||
|
||
Or: | ||
|
||
> Oh yes, mdx PR would be exciting | ||
> | ||
> <Cite> — Brent Yi </Cite> | ||
**Note**: Be careful when playing with JSX, it's very easy to break markdown. | ||
|
||
So that's MDX in Viser. It has support for: | ||
|
||
- [x] CommonMark and GFM standards | ||
- bold, italics, strikethrough, images, blockquotes, tables, task lists, code | ||
blocks, inline code | ||
- [x] Color chips | ||
- [x] JSX enhanced components | ||
- [ ] Prism highlighted code blocks and code block tabs | ||
- [ ] Exposed Mantine in markdown |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.