mirror/gradio
2
0
Fork 0
mirror of https://github.com/gradio-app/gradio.git synced 2024-11-21 01:01:05 +08:00
Code Issues Packages Projects Releases Wiki Activity

3229 styling (#3233)

Browse Source 
* ensure latex css is applied

* remove z-index on error status

* changelog

* formatting

* more styling fixes + adjust error message for non space

* simplify test

* simplify test

* update notebook

* pinning mdit-py-plugins

* missed a thing

---------

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>
This commit is contained in:
pngwn 2023-02-19 15:16:08 +00:00 committed by GitHub
parent 56245276e7
commit 4fd2ae081c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 22 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -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)

2
demo/calculator/run.ipynb
View File

@ -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}

2
demo/calculator/run.py
View File

@ -27,7 +27,7 @@ demo = gr.Interface(
[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()

2
gradio/interface.py
View File

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

3
requirements.txt
View File

@ -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

2
ui/packages/app/index.html
View File

@ -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

2
ui/packages/app/src/Embed.svelte
View File

@ -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%;

5
ui/packages/app/src/Index.svelte
View File

@ -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;

14
ui/packages/markdown/src/Markdown.svelte
View File

@ -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);
}

13
ui/packages/markdown/src/latex.css
View File

@ -1,13 +0,0 @@
.output-markdown .math.inline {
display: inline-block;
vertical-align: middle;
padding: var(--size-1-5) -var(--size-1);
}
.dark .output-markdown .math.inline {
filter: invert(100%);
}
.output-markdown .math.inline svg {
display: inline;
}