mirror of
https://github.com/gradio-app/gradio.git
synced 2025-03-31 12:20:26 +08:00
Latex support (#2696)
* initial use of dollarmath plugin * add frontend support * chnages * changes * changes * changes * changes * fix * added latex to kinematics blocks * changes * Update CHANGELOG.md Co-authored-by: Abubakar Abid <abubakar@huggingface.co> * added example to changelog * remove param * doc fix * fixes * latex noteboox fix * fix * changes Co-authored-by: Ali Abid <aabid94@gmail.com> Co-authored-by: Abubakar Abid <abubakar@huggingface.co>
This commit is contained in:
Kashif Rasul
GitHub
parent
182f79bfaa
commit
d79039beb1
13
CHANGELOG.md
13
CHANGELOG.md
@ -2,6 +2,18 @@
|
||||
|
||||
## New Features:
|
||||
|
||||
### Latex support
|
||||
Added mathtext (a subset of latex) support to gr.Markdown. Added by [@kashif](https://github.com/kashif) and [@aliabid94](https://github.com/aliabid94) in [PR 2696](https://github.com/gradio-app/gradio/pull/2696).
|
||||
|
||||
Example of how it can be used:
|
||||
|
||||
```python
|
||||
gr.Markdown(
|
||||
r"""
|
||||
# Hello World! $\frac{\sqrt{x + y}}{4}$ is today's lesson.
|
||||
""")
|
||||
```
|
||||
|
||||
### Update Accordion properties from the backend
|
||||
|
||||
You can now update the Accordion `label` and `open` status with `gr.Accordion.update` by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 2690](https://github.com/gradio-app/gradio/pull/2690)
|
||||
@ -29,7 +41,6 @@ demo.launch()
|
||||
|
||||
|
||||
|
||||
|
||||
## Bug Fixes:
|
||||
* Fixed bug where requests timeout is missing from utils.version_check() by [@yujiehecs](https://github.com/yujiehecs) in [PR 2729](https://github.com/gradio-app/gradio/pull/2729)
|
||||
* Fixed bug where so that the `File` component can properly preprocess files to "binary" byte-string format by [CoffeeVampir3](https://github.com/CoffeeVampir3) in [PR 2727](https://github.com/gradio-app/gradio/pull/2727)
|
||||
|
||||
@ -1 +1 @@
|
||||
{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: blocks_kinematics"]}, {"cell_type": "code", "execution_count": null, "id": 272996653310673477252411125948039410165, "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": 288918539441861185822528903084949547379, "metadata": {}, "outputs": [], "source": ["import matplotlib\n", "matplotlib.use('Agg')\n", "import matplotlib.pyplot as plt\n", "import numpy as np\n", "\n", "import gradio as gr\n", "\n", "\n", "def plot(v, a):\n", " g = 9.81\n", " theta = a / 180 * 3.14\n", " tmax = ((2 * v) * np.sin(theta)) / g\n", " timemat = tmax * np.linspace(0, 1, 40)[:, None]\n", "\n", " x = (v * timemat) * np.cos(theta)\n", " y = ((v * timemat) * np.sin(theta)) - ((0.5 * g) * (timemat**2))\n", "\n", " fig = plt.figure()\n", " plt.scatter(x=x, y=y, marker=\".\")\n", " plt.xlim(0, 100)\n", " plt.ylim(0, 60)\n", " return fig\n", "\n", "\n", "demo = gr.Blocks()\n", "\n", "with demo:\n", " gr.Markdown(\n", " \"Let's do some kinematics! Choose the speed and angle to see the trajectory.\"\n", " )\n", "\n", " with gr.Row():\n", " speed = gr.Slider(1, 30, 25, label=\"Speed\")\n", " angle = gr.Slider(0, 90, 45, label=\"Angle\")\n", " output = gr.Plot()\n", " btn = gr.Button(value=\"Run\")\n", " btn.click(plot, [speed, angle], output)\n", "\n", "if __name__ == \"__main__\":\n", " demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
|
||||
{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: blocks_kinematics"]}, {"cell_type": "code", "execution_count": null, "id": 272996653310673477252411125948039410165, "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": 288918539441861185822528903084949547379, "metadata": {}, "outputs": [], "source": ["import matplotlib\n", "matplotlib.use('Agg')\n", "import matplotlib.pyplot as plt\n", "import numpy as np\n", "\n", "import gradio as gr\n", "\n", "\n", "def plot(v, a):\n", " g = 9.81\n", " theta = a / 180 * 3.14\n", " tmax = ((2 * v) * np.sin(theta)) / g\n", " timemat = tmax * np.linspace(0, 1, 40)[:, None]\n", "\n", " x = (v * timemat) * np.cos(theta)\n", " y = ((v * timemat) * np.sin(theta)) - ((0.5 * g) * (timemat**2))\n", "\n", " fig = plt.figure()\n", " plt.scatter(x=x, y=y, marker=\".\")\n", " plt.xlim(0, 100)\n", " plt.ylim(0, 60)\n", " return fig\n", "\n", "\n", "demo = gr.Blocks()\n", "\n", "with demo:\n", " gr.Markdown(\n", " r\"Let's do some kinematics! Choose the speed and angle to see the trajectory. Remember that the range $R = v_0^2 \\cdot \\frac{\\sin(2\\theta)}{g}$\"\n", " )\n", "\n", " with gr.Row():\n", " speed = gr.Slider(1, 30, 25, label=\"Speed\")\n", " angle = gr.Slider(0, 90, 45, label=\"Angle\")\n", " output = gr.Plot()\n", " btn = gr.Button(value=\"Run\")\n", " btn.click(plot, [speed, angle], output)\n", "\n", "if __name__ == \"__main__\":\n", " demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
|
||||
@ -26,7 +26,7 @@ demo = gr.Blocks()
|
||||
|
||||
with demo:
|
||||
gr.Markdown(
|
||||
"Let's do some kinematics! Choose the speed and angle to see the trajectory."
|
||||
r"Let's do some kinematics! Choose the speed and angle to see the trajectory. Remember that the range $R = v_0^2 \cdot \frac{\sin(2\theta)}{g}$"
|
||||
)
|
||||
|
||||
with gr.Row():
|
||||
|
||||
1
demo/latex/run.ipynb
Normal file
1
demo/latex/run.ipynb
Normal file
@ -0,0 +1 @@
|
||||
{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: latex"]}, {"cell_type": "code", "execution_count": null, "id": 272996653310673477252411125948039410165, "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": 288918539441861185822528903084949547379, "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "\n", "with gr.Blocks() as demo:\n", " gr.Markdown(\n", " r\"\"\"\n", " # Hello World! $\\frac{\\sqrt{x + y}}{4}$ is today's lesson\n", "\n", " ## the $\\sqrt{x + y}$ is first\n", "\n", " Start with $\\frac{\\frac{x+1}{x+2}}{x+3}$ then we get $ 2+x $ and $3$.\n", " \n", " There are three formulas to know:\n", " \n", " the first is $\\gamma^2 + \\theta^2 = \\omega^2$\n", " \n", " $\\sqrt{x^2+1}\n", " $ is next\n", " \n", " Integral $\\int_{a}^{b} x^2 \\,dx$ is last\n", "\n", " Start typing below to see the output.\n", "\n", " I spent $5 at the grocery store. Then I bought a $2.50 ice cream cone.\n", " \"\"\")\n", "\n", "if __name__ == \"__main__\":\n", " demo.launch()"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
|
||||
27
demo/latex/run.py
Normal file
27
demo/latex/run.py
Normal file
@ -0,0 +1,27 @@
|
||||
import gradio as gr
|
||||
|
||||
with gr.Blocks() as demo:
|
||||
gr.Markdown(
|
||||
r"""
|
||||
# Hello World! $\frac{\sqrt{x + y}}{4}$ is today's lesson
|
||||
|
||||
## the $\sqrt{x + y}$ is first
|
||||
|
||||
Start with $\frac{\frac{x+1}{x+2}}{x+3}$ then we get $ 2+x $ and $3$.
|
||||
|
||||
There are three formulas to know:
|
||||
|
||||
the first is $\gamma^2 + \theta^2 = \omega^2$
|
||||
|
||||
$\sqrt{x^2+1}
|
||||
$ is next
|
||||
|
||||
Integral $\int_{a}^{b} x^2 \,dx$ is last
|
||||
|
||||
Start typing below to see the output.
|
||||
|
||||
I spent $5 at the grocery store. Then I bought a $2.50 ice cream cone.
|
||||
""")
|
||||
|
||||
if __name__ == "__main__":
|
||||
demo.launch()
|
||||
@ -27,6 +27,7 @@ import PIL
|
||||
import PIL.ImageOps
|
||||
from ffmpy import FFmpeg
|
||||
from markdown_it import MarkdownIt
|
||||
from mdit_py_plugins.dollarmath import dollarmath_plugin
|
||||
|
||||
from gradio import media_data, processing_utils, utils
|
||||
from gradio.blocks import Block
|
||||
@ -2510,7 +2511,11 @@ class Dataframe(Changeable, IOComponent, JSONSerializable):
|
||||
return data
|
||||
|
||||
if cls.markdown_parser is None:
|
||||
cls.markdown_parser = MarkdownIt().enable("table")
|
||||
cls.markdown_parser = (
|
||||
MarkdownIt()
|
||||
.use(dollarmath_plugin, renderer=utils.tex2svg, allow_digits=False)
|
||||
.enable("table")
|
||||
)
|
||||
|
||||
for i in range(len(data)):
|
||||
for j in range(len(data[i])):
|
||||
@ -3909,7 +3914,7 @@ class Plot(Changeable, Clearable, IOComponent, JSONSerializable):
|
||||
@document("change")
|
||||
class Markdown(IOComponent, Changeable, SimpleSerializable):
|
||||
"""
|
||||
Used to render arbitrary Markdown output.
|
||||
Used to render arbitrary Markdown output. Can also render latex enclosed by dollar signs.
|
||||
Preprocessing: this component does *not* accept input.
|
||||
Postprocessing: expects a valid {str} that can be rendered as Markdown.
|
||||
|
||||
@ -3931,7 +3936,11 @@ class Markdown(IOComponent, Changeable, SimpleSerializable):
|
||||
visible: If False, component will be hidden.
|
||||
elem_id: An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.
|
||||
"""
|
||||
self.md = MarkdownIt().enable("table")
|
||||
self.md = (
|
||||
MarkdownIt()
|
||||
.use(dollarmath_plugin, renderer=utils.tex2svg, allow_digits=False)
|
||||
.enable("table")
|
||||
)
|
||||
IOComponent.__init__(
|
||||
self, visible=visible, elem_id=elem_id, value=value, **kwargs
|
||||
)
|
||||
|
||||
@ -16,6 +16,7 @@ from enum import Enum, auto
|
||||
from typing import TYPE_CHECKING, Any, Callable, List, Optional
|
||||
|
||||
from markdown_it import MarkdownIt
|
||||
from mdit_py_plugins.dollarmath import dollarmath_plugin
|
||||
from mdit_py_plugins.footnote import footnote_plugin
|
||||
|
||||
from gradio import Examples, interpretation, utils
|
||||
@ -309,6 +310,7 @@ class Interface(Blocks):
|
||||
"html": True,
|
||||
},
|
||||
)
|
||||
.use(dollarmath_plugin)
|
||||
.use(footnote_plugin)
|
||||
.enable("table")
|
||||
)
|
||||
|
||||
@ -10,6 +10,7 @@ import json.decoder
|
||||
import os
|
||||
import pkgutil
|
||||
import random
|
||||
import re
|
||||
import sys
|
||||
import time
|
||||
import typing
|
||||
@ -17,6 +18,7 @@ import warnings
|
||||
from contextlib import contextmanager
|
||||
from distutils.version import StrictVersion
|
||||
from enum import Enum
|
||||
from io import BytesIO
|
||||
from numbers import Number
|
||||
from pathlib import Path
|
||||
from typing import (
|
||||
@ -34,6 +36,7 @@ from typing import (
|
||||
import aiohttp
|
||||
import fsspec.asyn
|
||||
import httpx
|
||||
import matplotlib.pyplot as plt
|
||||
import requests
|
||||
from pydantic import BaseModel, Json, parse_obj_as
|
||||
|
||||
@ -800,3 +803,28 @@ class TupleNoPrint(tuple):
|
||||
|
||||
def __str__(self):
|
||||
return ""
|
||||
|
||||
|
||||
def tex2svg(formula, *args):
|
||||
FONTSIZE = 20
|
||||
DPI = 300
|
||||
plt.rc("mathtext", fontset="cm")
|
||||
fig = plt.figure(figsize=(0.01, 0.01))
|
||||
fig.text(0, 0, r"${}$".format(formula), fontsize=FONTSIZE)
|
||||
output = BytesIO()
|
||||
fig.savefig(
|
||||
output,
|
||||
dpi=DPI,
|
||||
transparent=True,
|
||||
format="svg",
|
||||
bbox_inches="tight",
|
||||
pad_inches=0.0,
|
||||
)
|
||||
plt.close(fig)
|
||||
output.seek(0)
|
||||
xml_code = output.read().decode("utf-8")
|
||||
svg_start = xml_code.index("<svg ")
|
||||
svg_code = xml_code[svg_start:]
|
||||
svg_code = re.sub(r"<metadata>.*<\/metadata>", "", svg_code, flags=re.DOTALL)
|
||||
copy_code = f"<span style='font-size: 0px'>{formula}</span>"
|
||||
return f"{copy_code}{svg_code}"
|
||||
|
||||
@ -1564,6 +1564,25 @@ class TestHTML:
|
||||
assert iface("test") == "<strong>test</strong>"
|
||||
|
||||
|
||||
class TestMarkdown:
|
||||
def test_component_functions(self):
|
||||
markdown_component = gr.Markdown("# Let's learn about $x$", label="Markdown")
|
||||
assert markdown_component.get_config()["value"].startswith("""<h1>Let\'s learn about <span class="math inline"><span style=\'font-size: 0px\'>x</span><svg xmlns:xlink="http://www.w3.org/1999/xlink" width="11.6pt" height="19.35625pt" viewBox="0 0 11.6 19.35625" xmlns="http://www.w3.org/2000/svg" version="1.1">\n \n <defs>\n <style type="text/css">*{stroke-linejoin: round; stroke-linecap: butt}</style>\n </defs>\n <g id="figure_1">\n <g id="patch_1">\n <path d="M 0 19.35625""")
|
||||
|
||||
@pytest.mark.asyncio
|
||||
async def test_in_interface(self):
|
||||
"""
|
||||
Interface, process
|
||||
"""
|
||||
iface = gr.Interface(lambda x: x, "text", "markdown")
|
||||
input_data = "Here's an [image](https://gradio.app/images/gradio_logo.png)"
|
||||
output_data = iface(input_data)
|
||||
assert (
|
||||
output_data
|
||||
== """<p>Here's an <a href="https://gradio.app/images/gradio_logo.png">image</a></p>\n"""
|
||||
)
|
||||
|
||||
|
||||
class TestModel3D:
|
||||
def test_component_functions(self):
|
||||
"""
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<script lang="ts">
|
||||
import { createEventDispatcher } from "svelte";
|
||||
import "./typography.css";
|
||||
|
||||
import "./latex.css";
|
||||
export let elem_id: string = "";
|
||||
export let visible: boolean = true;
|
||||
export let value: string;
|
||||
@ -9,6 +9,8 @@
|
||||
|
||||
const dispatch = createEventDispatcher<{ change: undefined }>();
|
||||
|
||||
let target: HTMLElement;
|
||||
|
||||
$: value, dispatch("change");
|
||||
</script>
|
||||
|
||||
@ -18,6 +20,7 @@
|
||||
class="output-markdown gr-prose"
|
||||
class:hidden={!visible}
|
||||
style="max-width: 100%"
|
||||
bind:this={target}
|
||||
>
|
||||
{@html value}
|
||||
</div>
|
||||
|
||||
6
ui/packages/markdown/src/latex.css
Normal file
6
ui/packages/markdown/src/latex.css
Normal file
@ -0,0 +1,6 @@
|
||||
.output-markdown .math.inline {
|
||||
@apply inline-block dark:invert align-middle pb-1.5 px-1;
|
||||
}
|
||||
.output-markdown .math.inline svg {
|
||||
display: inline;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user