3229 styling

CHANGELOG.md

@@ -74,6 +74,7 @@ By [@dawoodkhan82](https://github.com/dawoodkhan82) in [PR 3165](https://github.
 * Support Chinese pinyin in Dataframe by [@aliabid94](https://github.com/aliabid94) in [PR 3206](https://github.com/gradio-app/gradio/pull/3206)
 * The `clear` event is now triggered when images are cleared by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 3218](https://github.com/gradio-app/gradio/pull/3218)
 * Fix bug where auth cookies where not sent when connecting to an app via http by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 3223](https://github.com/gradio-app/gradio/pull/3223)
+* Ensure latext CSS is always applied in light and dark mode by [@pngwn](https://github.com/pngwn) in [PR 3233](https://github.com/gradio-app/gradio/pull/3233)
 
 ## Documentation Changes:
 * Sort components in docs by alphabetic order by [@aliabd](https://github.com/aliabd) in [PR 3152](https://github.com/gradio-app/gradio/pull/3152)

demo/calculator/run.ipynb

@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: calculator"]}, {"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": ["# Downloading files from the demo repo\n", "import os\n", "os.mkdir('examples')\n", "!wget -q -O examples/log.csv https://github.com/gradio-app/gradio/raw/main/demo/calculator/examples/log.csv"]}, {"cell_type": "code", "execution_count": null, "id": 44380577570523278879349135829904343037, "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "\n", "def calculator(num1, operation, num2):\n", "    if operation == \"add\":\n", "        return num1 + num2\n", "    elif operation == \"subtract\":\n", "        return num1 - num2\n", "    elif operation == \"multiply\":\n", "        return num1 * num2\n", "    elif operation == \"divide\":\n", "        if num2 == 0:\n", "            raise gr.Error(\"Cannot divide by zero!\")\n", "        return num1 / num2\n", "\n", "demo = gr.Interface(\n", "    calculator,\n", "    [\n", "        \"number\", \n", "        gr.Radio([\"add\", \"subtract\", \"multiply\", \"divide\"]),\n", "        \"number\"\n", "    ],\n", "    \"number\",\n", "    examples=[\n", "        [5, \"add\", 3],\n", "        [4, \"divide\", 2],\n", "        [-4, \"multiply\", 2.5],\n", "        [0, \"subtract\", 1.2],\n", "    ],\n", "    title=\"Toy Calculator\",\n", "    description=\"Here's a sample toy calculator. Enjoy!\",\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: calculator"]}, {"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": ["# Downloading files from the demo repo\n", "import os\n", "os.mkdir('examples')\n", "!wget -q -O examples/log.csv https://github.com/gradio-app/gradio/raw/main/demo/calculator/examples/log.csv"]}, {"cell_type": "code", "execution_count": null, "id": 44380577570523278879349135829904343037, "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "\n", "def calculator(num1, operation, num2):\n", "    if operation == \"add\":\n", "        return num1 + num2\n", "    elif operation == \"subtract\":\n", "        return num1 - num2\n", "    elif operation == \"multiply\":\n", "        return num1 * num2\n", "    elif operation == \"divide\":\n", "        if num2 == 0:\n", "            raise gr.Error(\"Cannot divide by zero!\")\n", "        return num1 / num2\n", "\n", "demo = gr.Interface(\n", "    calculator,\n", "    [\n", "        \"number\", \n", "        gr.Radio([\"add\", \"subtract\", \"multiply\", \"divide\"]),\n", "        \"number\"\n", "    ],\n", "    \"number\",\n", "    examples=[\n", "        [5, \"add\", 3],\n", "        [4, \"divide\", 2],\n", "        [-4, \"multiply\", 2.5],\n", "        [0, \"subtract\", 1.2],\n", "    ],\n", "    title=\"Toy Calculator\",\n", "    description=\"Here's a sample toy calculator. Allows you to calculate things like $2+2=4$\",\n", ")\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demo/calculator/run.py

@@ -27,7 +27,7 @@ def calculator(num1, operation, num2):
         [0, "subtract", 1.2],
     ],
     title="Toy Calculator",
-    description="Here's a sample toy calculator. Enjoy!",
+    description="Here's a sample toy calculator. Allows you to calculate things like $2+2=4$",
 )
 if __name__ == "__main__":
     demo.launch()

gradio/interface.py

@@ -307,7 +307,7 @@ def clean_html(raw_html):
                     "html": True,
                 },
             )
-            .use(dollarmath_plugin)
+            .use(dollarmath_plugin, renderer=utils.tex2svg, allow_digits=False)
             .use(footnote_plugin)
             .enable("table")
         )

requirements.txt

@@ -2,7 +2,8 @@ aiohttp
 altair>=4.2.0
 fastapi
 ffmpy
-markdown-it-py[linkify,plugins]>=2.0.0
+markdown-it-py[linkify]>=2.0.0
+mdit-py-plugins<=0.3.3
 markupsafe
 matplotlib
 numpy

ui/packages/app/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" style="margin: 0; padding: 0; min-height: 100%; height: 100%">
+<html lang="en" style="margin: 0; padding: 0; min-height: 100%">
 	<head>
 		<meta charset="utf-8" />
 		<meta

ui/packages/app/src/Embed.svelte

@@ -44,7 +44,6 @@
 <style>
 	.gradio-container {
 		position: relative;
-
 		background: var(--button-secondary-background-base);
 		background: var(--color-background-primary);
 		padding: 0;
@@ -110,7 +109,6 @@
 		position: absolute;
 		bottom: 0;
 		justify-content: flex-start;
-		z-index: var(--layer-top);
 		border-top: 1px solid var(--button-secondary-border-color-base);
 		padding: var(--size-1) var(--size-5);
 		width: 100%;

ui/packages/app/src/Index.svelte

@@ -357,7 +357,7 @@
 			error_detail = {
 				type: "not_found",
 				detail: {
-					description: "This space is experiencing an issue."
+					description: "This gradio app is experiencing an issue."
 				}
 			};
 		}
@@ -450,7 +450,7 @@
 						> to let them know.
 					</p>
 				{:else}
-					<p>Please contact the author of the page to let them know</p>
+					<p>Please contact the author of the page to let them know.</p>
 				{/if}
 			</div>
 		</Loader>
@@ -480,7 +480,6 @@
 <style>
 	.error {
 		position: relative;
-		z-index: var(--layer-top);
 		padding: var(--size-4);
 		color: var(--color-text-body);
 		text-align: center;

ui/packages/markdown/src/Markdown.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { createEventDispatcher } from "svelte";
-	import "./latex.css";
 	export let elem_id: string = "";
 	export let visible: boolean = true;
 	export let value: string;
@@ -25,9 +24,22 @@
 </div>
 
 <style>
+	div :global(.math.inline) {
+		fill: var(--color-text-body);
+		display: inline-block;
+		vertical-align: middle;
+		padding: var(--size-1-5) -var(--size-1);
+		color: var(--color-text-body);
+	}
+
+	div :global(.math.inline svg) {
+		display: inline;
+	}
+
 	div {
 		max-width: 100%;
 	}
+
 	.min {
 		min-height: var(--size-24);
 	}