Merge pull request #533 from gradio-app/markdown-description

added support for markdown in description
This commit is contained in:
Abubakar Abid 2022-02-03 11:19:45 -05:00 committed by GitHub
commit d905be0589
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 71 additions and 62 deletions

View File

@ -14,11 +14,11 @@
<meta property="og:type" content="website" />
<meta property="og:image" content="{{ config['thumbnail'] or '' }}" />
<meta property="og:title" content="{{ config['title'] or '' }}" />
<meta property="og:description" content="{{ config['description'] or '' }}" />
<meta property="og:description" content="{{ config['simple_description'] or '' }}" />
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:creator" content="@teamGradio">
<meta name="twitter:title" content="{{ config['title'] or '' }}">
<meta name="twitter:description" content="{{ config['description'] or '' }}">
<meta name="twitter:description" content="{{ config['simple_description'] or '' }}">
<meta name="twitter:image" content="{{ config['thumbnail'] or '' }}">
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-156449732-1"></script>
<script>

View File

@ -37,7 +37,7 @@
<h1 class="title text-center p-4 text-4xl">{title}</h1>
{/if}
{#if description}
<p class="description pb-4">{description}</p>
<p class="description pb-4">{@html description}</p>
{/if}
<Interface
{input_components}

View File

@ -2,7 +2,7 @@ analytics-python
aiohttp
fastapi
ffmpy
markdown2
markdown-it-py[linkify,plugins]
matplotlib
numpy
pandas

View File

@ -9,6 +9,7 @@ import copy
import getpass
import os
import random
import re
import sys
import time
import warnings
@ -17,7 +18,8 @@ import webbrowser
from logging import warning
from typing import TYPE_CHECKING, Any, Callable, List, Optional, Tuple
import markdown2
from markdown_it import MarkdownIt
from mdit_py_plugins.footnote import footnote_plugin
from gradio import (encryptor, interpretation, networking, # type: ignore
queueing, strings, utils)
@ -241,14 +243,29 @@ class Interface:
self.session = None
self.title = title
CLEANER = re.compile('<.*?>')
def clean_html(raw_html):
cleantext = re.sub(CLEANER, '', raw_html)
return cleantext
md = MarkdownIt("js-default", {
"linkify": True,
"typographer": True,
"html": True,
}).use(footnote_plugin)
simple_description = None
if description is not None:
description = md.render(description)
simple_description = clean_html(description)
self.simple_description = simple_description
self.description = description
if article is not None:
article = utils.readme_to_html(article)
article = markdown2.markdown(
article, extras=["fenced-code-blocks"])
article = md.render(article)
self.article = article
self.thumbnail = thumbnail
theme = theme if theme is not None else os.getenv("GRADIO_THEME", "default")
DEPRECATED_THEME_MAP = {
"darkdefault": "default",

View File

@ -1,55 +1,46 @@
<!DOCTYPE html>
<html lang="en" style="min-height: 100%; margin: 0; padding: 0">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<html lang="en" style="height: 100%; margin: 0; padding: 0;">
<title>{{ config['title'] or 'Gradio' }}</title>
<meta property="og:url" content="https://gradio.app/" />
<meta property="og:type" content="website" />
<meta property="og:image" content="{{ config['thumbnail'] or '' }}" />
<meta property="og:title" content="{{ config['title'] or '' }}" />
<meta
property="og:description"
content="{{ config['description'] or '' }}"
/>
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:creator" content="@teamGradio" />
<meta name="twitter:title" content="{{ config['title'] or '' }}" />
<meta
name="twitter:description"
content="{{ config['description'] or '' }}"
/>
<meta name="twitter:image" content="{{ config['thumbnail'] or '' }}" />
<script
async
src="https://www.googletagmanager.com/gtag/js?id=UA-156449732-1"
></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag("js", new Date());
gtag("config", "UA-156449732-1");
window.gradio_mode = "app";
</script>
<script>
window.gradio_config = {{ config|tojson }};
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.1/iframeResizer.contentWindow.min.js"></script>
<title>Gradio</title>
<script type="module" crossorigin src="/assets/index.f0e5ef9f.js"></script>
<link rel="modulepreload" href="/assets/vendor.b2926c28.js">
<link rel="stylesheet" href="/assets/vendor.169535ab.css">
<link rel="stylesheet" href="/assets/index.c16552b7.css">
</head>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel='stylesheet' href='/build/bundle.css'>
<link rel='stylesheet' href='/build/themes.css'>
<link rel="stylesheet" href="./global.css">
<title>{{ config['title'] or 'Gradio' }}</title>
<meta property="og:url" content="https://gradio.app/" />
<meta property="og:type" content="website" />
<meta property="og:image" content="{{ config['thumbnail'] or '' }}" />
<meta property="og:title" content="{{ config['title'] or '' }}" />
<meta property="og:description" content="{{ config['simple_description'] or '' }}" />
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:creator" content="@teamGradio">
<meta name="twitter:title" content="{{ config['title'] or '' }}">
<meta name="twitter:description" content="{{ config['simple_description'] or '' }}">
<meta name="twitter:image" content="{{ config['thumbnail'] or '' }}">
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-156449732-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'UA-156449732-1');
window.gradio_mode = "app";
</script>
<script>
window.gradio_config = {{ config|tojson }};
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.1/iframeResizer.contentWindow.min.js"></script>
<title>Gradio</title>
</head>
<body style="height: 100%; margin: 0; padding: 0;">
<div id="root" style="height: 100%"></div>
</body>
<script defer src='/build/bundle.js'></script>
<body style="height: 100%; margin: 0; padding: 0">
<div id="root" style="height: 100%"></div>
</body>
</html>

View File

@ -196,6 +196,7 @@ def get_config_file(interface: Interface) -> Dict[str, Any]:
"show_output": interface.show_output,
"title": interface.title,
"description": interface.description,
"simple_description": interface.simple_description,
"article": interface.article,
"theme": interface.theme,
"css": interface.css,

View File

@ -19,7 +19,7 @@ setup(
"aiohttp",
"fastapi",
"ffmpy",
"markdown2",
"markdown-it-py[linkify,plugins]",
"matplotlib",
"numpy",
"pandas",

View File

@ -15,14 +15,14 @@
<meta property="og:title" content="{{ config['title'] or '' }}" />
<meta
property="og:description"
content="{{ config['description'] or '' }}"
content="{{ config['simple_description'] or '' }}"
/>
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:creator" content="@teamGradio" />
<meta name="twitter:title" content="{{ config['title'] or '' }}" />
<meta
name="twitter:description"
content="{{ config['description'] or '' }}"
content="{{ config['simple_description'] or '' }}"
/>
<meta name="twitter:image" content="{{ config['thumbnail'] or '' }}" />
<script