Move markdown & latex processing to the frontend for the gr.Markdown and gr.DataFrame components

[abidlabs]

Moves markdown and latex processing to the frontend for the gr.Markdown and gr.DataFrame components. This has several advantages:

1. Removes 2 dependencies from the gradio python package 🥳
2. Katex.js renders LaTeX much more nicely and without the alignment issue that we were seeing with markdown_it (see screenshots below)
3. Moves some of the work client side making gradio apps faster (we've seen this before with gr.Chatbot)

It should be noted that this increases the javascript bundle size for these two components.

Screenshots (before):

Screenshots (after):

Closes: #4523

Also added:

• the latex_delimiters parameter to gr.Markdown() and gr.DataFrame for control over whether to parse LaTeX
• stories for these two components as a visual test.

Thanks @dawoodkhan82 for the pointers!

[gradio-pr-bot]

🪼 branch checks and previews

•	Name	Status	URL
	Spaces	ready!	Spaces preview
	Website	ready!	Website preview
	Storybook	ready!	Storybook preview
	Visual tests	all good!	Build review
🦄	Changes	detected!	Details

---

Install Gradio from this PR

pip install https://gradio-builds.s3.amazonaws.com/3ae854f789f5d2075b447cb6d59e22975058a292/gradio-3.40.1-py3-none-any.whl

Install Gradio Python Client from this PR

pip install "gradio-client @ git+https://github.com/gradio-app/gradio@3ae854f789f5d2075b447cb6d59e22975058a292#subdirectory=client/python"

[gradio-pr-bot]

🦄 change detected

This Pull Request includes changes to the following packages.

Package	Version
@gradio/dataframe	minor
@gradio/markdown	minor
gradio	minor

• Maintainers can select this checkbox to manually select packages to update.

With the following changelog entry.

Move markdown & latex processing to the frontend for the gr.Markdown and gr.DataFrame components

Maintainers or the PR author can modify the PR title to modify this entry.

Something isn't right?

• Maintainers can change the version label to modify the version bump.
• If the bot has failed to detect any changes, or if this pull request needs to update multiple packages to different versions or requires a more comprehensive changelog entry, maintainers can update the changelog file directly.

[abidlabs]

Fighting an issue with the frontend build step, which was working until just recently (seems flaky?)

[dawoodkhan82]

We use $$ as the default latex_delimiters for chatbot. We should be consistent across components.

[dawoodkhan82]

Tested both markdown and dataframe. Both look good to me!

[abidlabs]

We use $$ as the default latex_delimiters for chatbot. We should be consistent across components.

That is true -- however, the previous behavior of gr.Markdown and gr.Dataframe was to render LaTeX enclosed in $ so I kept it that way for backwards compatibility. Maybe we make the change in 4.0?

[abidlabs]

Fixed up the backend tests -- also I've recently had to make a lot of changes manually to the XRAY_CONFIG e.g. every time I add a new parameter to a component. I wrote a script scripts/overwrite_xray_config.py that overwrites the test XRAY_CONFIG based on the config that is generated from a blocks app.

Of course, it should be used with caution since we should only override the test config if we're sure that there aren't any accidental changes to the config generation. But it can help avoid tedious manual work particularly for the component cleanup. cc @dawoodkhan82 @hannahblair for visibility

[abidlabs]

Thanks for the review @dawoodkhan82! Merging