LaTeX height fix (#3258)

* latex height fix

* changelog

* formatting

* em

* em

CHANGELOG.md

@@ -8,6 +8,8 @@
 ## Bug Fixes:
 - Ensure `mirror_webcam` is always respected by [@pngwn](https://github.com/pngwn) in [PR 3245](https://github.com/gradio-app/gradio/pull/3245)
 - Fix issue where updated markdown links were not being opened in a new tab by [@gante](https://github.com/gante) in [PR 3236](https://github.com/gradio-app/gradio/pull/3236)
+- Fixes the height of rendered LaTeX images so that they match the height of surrounding text by [@abidlabs](https://github.com/abidlabs) in [PR 3258](https://github.com/gradio-app/gradio/pull/3258)
+
 
 ## Documentation Changes:
 No changes to highlight.

gradio/utils.py

@@ -886,6 +886,8 @@ def tex2svg(formula, *args):
     svg_start = xml_code.index("<svg ")
     svg_code = xml_code[svg_start:]
     svg_code = re.sub(r"<metadata>.*<\/metadata>", "", svg_code, flags=re.DOTALL)
+    svg_code = re.sub(r' width="[^"]+"', '', svg_code)
+    svg_code = re.sub(r' height="[^"]+"', '', svg_code)
     copy_code = f"<span style='font-size: 0px'>{formula}</span>"
     return f"{copy_code}{svg_code}"
 

scripts/benchmark_queue.py

@@ -0,0 +1,93 @@
+import gradio as gr
+from gradio import media_data
+import asyncio
+import websockets
+import json
+import time
+import random
+import pandas as pd
+import argparse
+
+
+def identity_with_sleep(x):
+    time.sleep(0.5)
+    return x
+
+
+with gr.Blocks() as demo:
+    with gr.Row():
+        with gr.Column():
+            input_txt = gr.Text()
+            output_text = gr.Text()
+            submit_text = gr.Button()
+            submit_text.click(identity_with_sleep, input_txt, output_text, api_name="text")
+        with gr.Column():
+            input_img = gr.Image()
+            output_img = gr.Image()
+            submit_img = gr.Button()
+            submit_img.click(identity_with_sleep, input_img, output_img, api_name="img")
+        with gr.Column():
+            input_audio = gr.Audio()
+            output_audio = gr.Audio()
+            submit_audio = gr.Button()
+            submit_audio.click(identity_with_sleep, input_audio, output_audio, api_name="audio")
+        with gr.Column():
+            input_video = gr.Video()
+            output_video = gr.Video()
+            submit_video = gr.Button()
+            submit_video.click(identity_with_sleep, input_video, output_video, api_name="video")
+demo.queue(max_size=50, concurrency_count=20).launch(prevent_thread_lock=True)
+
+
+FN_INDEX_TO_DATA = {
+    "text": (0, "A longish text " * 15),
+    "image": (1, media_data.BASE64_IMAGE),
+    "audio": (2, media_data.BASE64_AUDIO),
+    "video": (3, media_data.BASE64_VIDEO)
+}
+
+
+async def get_prediction(host):
+    async with websockets.connect(host) as ws:
+        completed = False
+        name = random.choice(["image", "text", "audio", "video"])
+        fn_to_hit, data = FN_INDEX_TO_DATA[name]
+        start = time.time()
+
+        while not completed:
+            msg = json.loads(await ws.recv())
+            if msg["msg"] == "send_data":
+                await ws.send(json.dumps({"data": [data], "fn_index": fn_to_hit}))
+            if msg["msg"] == "send_hash":
+                await ws.send(json.dumps({"fn_index": fn_to_hit, "session_hash": "shdce"}))
+            if msg["msg"] == "process_completed":
+                completed = True
+                end = time.time()
+                return {"fn_to_hit": name, "duration": end - start}
+
+
+async def main(host, n_results=20):
+    results = []
+    while len(results) < n_results:
+        batch_results = await asyncio.gather(*[get_prediction(host) for _ in range(20)])
+        for result in batch_results:
+            if result:
+                results.append(result)    
+
+    data = pd.DataFrame(results).groupby("fn_to_hit").agg({"mean"})
+    data.columns = data.columns.get_level_values(0)
+    data = data.reset_index()
+    data = {"fn_to_hit": data["fn_to_hit"].to_list(), "duration": data["duration"].to_list()}                
+    return data
+
+
+if __name__ == "__main__":
+    host = f"{demo.local_url.replace('http', 'ws')}queue/join"
+    data = asyncio.run(main(host))
+
+    parser = argparse.ArgumentParser(description="Upload a demo to a space")
+    parser.add_argument("output", type=str, help="path to write output to")     
+    args = parser.parse_args()
+
+    print(data)
+    json.dump(data, open(args.output, "w"))

test/test_components.py

@@ -1784,7 +1784,7 @@ 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"""
+            """<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" 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"""
         )
 
     def test_in_interface(self):

ui/packages/markdown/src/Markdown.svelte

@@ -34,6 +34,8 @@
 
 	div :global(.math.inline svg) {
 		display: inline;
+		margin-bottom: 0.22em;
+		height: 1em;
 	}
 
 	div {