mirror of
https://github.com/gradio-app/gradio.git
synced 2025-01-30 11:00:11 +08:00
Merge branch 'master' into upgrade-black
This commit is contained in:
Abubakar Abid
GitHub
commit
67d8328fd4
@ -7,7 +7,7 @@
|
||||
<link rel='stylesheet' href='build/bundle.css'>
|
||||
<link rel='stylesheet' href='build/themes.css'>
|
||||
|
||||
<link rel="stylesheet" href="global.css">
|
||||
<link rel="stylesheet" href="build/global.css">
|
||||
|
||||
<title>{{ config['title'] or 'Gradio' }}</title>
|
||||
<meta property="og:url" content="https://gradio.app/" />
|
||||
|
||||
@ -52,6 +52,7 @@ export default {
|
||||
copy({
|
||||
targets: [
|
||||
{ src: 'public/*', dest: '../gradio/templates/frontend' },
|
||||
{ src: 'public/global.css', dest: '../gradio/templates/frontend/build' },
|
||||
{ src: 'public/static', dest: '../gradio/templates/frontend' }
|
||||
]
|
||||
}),
|
||||
|
||||
@ -29,6 +29,7 @@
|
||||
<ModifySketch
|
||||
on:undo={() => sketch.undo()}
|
||||
on:clear={() => sketch.clear()}
|
||||
{static_src}
|
||||
/>
|
||||
<Sketch
|
||||
{value}
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
<script>
|
||||
import { createEventDispatcher } from "svelte";
|
||||
|
||||
export let static_src;
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
</script>
|
||||
|
||||
@ -9,12 +11,12 @@
|
||||
class="bg-opacity-30 hover:bg-opacity-100 transition p-1.5 bg-yellow-500 dark:bg-red-600 rounded shadow w-8 h-8"
|
||||
on:click={() => dispatch("undo")}
|
||||
>
|
||||
<img alt="undo sketch" src="/static/img/undo-solid.svg" />
|
||||
<img alt="undo sketch" src="{static_src}/static/img/undo-solid.svg" />
|
||||
</button>
|
||||
<button
|
||||
class="clear bg-opacity-30 hover:bg-opacity-100 transition p-1 bg-gray-50 dark:bg-gray-500 rounded shadow w-8 h-8"
|
||||
on:click={() => dispatch("clear")}
|
||||
>
|
||||
<img alt="clear sketch" src="static/img/clear.svg" />
|
||||
<img alt="clear sketch" src="{static_src}/static/img/clear.svg" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -1,12 +1,14 @@
|
||||
Metadata-Version: 1.0
|
||||
Metadata-Version: 2.1
|
||||
Name: gradio
|
||||
Version: 2.8.0b0
|
||||
Version: 2.8.0b3
|
||||
Summary: Python library for easily interacting with trained machine learning models
|
||||
Home-page: https://github.com/gradio-app/gradio-UI
|
||||
Author: Abubakar Abid, Ali Abid, Ali Abdalla, Dawood Khan, Ahsen Khaliq
|
||||
Author-email: team@gradio.app
|
||||
License: Apache License 2.0
|
||||
Description: UNKNOWN
|
||||
Keywords: machine learning,visualization,reproducibility
|
||||
Platform: UNKNOWN
|
||||
License-File: LICENSE
|
||||
|
||||
UNKNOWN
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
aiohttp
|
||||
analytics-python
|
||||
aiohttp
|
||||
fastapi
|
||||
ffmpy
|
||||
markdown-it-py[linkify,plugins]
|
||||
@ -9,7 +9,7 @@ pandas
|
||||
paramiko
|
||||
pillow
|
||||
pycryptodome
|
||||
pydub
|
||||
python-multipart
|
||||
pydub
|
||||
requests
|
||||
uvicorn
|
||||
|
||||
@ -645,8 +645,8 @@ class Interface:
|
||||
server_name (str): to make app accessible on local network, set this to "0.0.0.0". Can be set by environment variable GRADIO_SERVER_NAME.
|
||||
show_tips (bool): if True, will occasionally show tips about new Gradio features
|
||||
enable_queue (bool): if True, inference requests will be served through a queue instead of with parallel threads. Required for longer inference times (> 1min) to prevent timeout.
|
||||
width (int): The width in pixels of the <iframe> element containing the interface (used if inline=True)
|
||||
height (int): The height in pixels of the <iframe> element containing the interface (used if inline=True)
|
||||
width (int): The width in pixels of the iframe element containing the interface (used if inline=True)
|
||||
height (int): The height in pixels of the iframe element containing the interface (used if inline=True)
|
||||
encrypt (bool): If True, flagged data will be encrypted by key provided by creator at launch
|
||||
cache_examples (bool): If True, examples outputs will be processed and cached in a folder, and will be used if a user uses an example input.
|
||||
favicon_path (str): If a path to an file (.png, .gif, or .ico) is provided, it will be used as the favicon for the web page.
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
<link rel='stylesheet' href='build/bundle.css'>
|
||||
<link rel='stylesheet' href='build/themes.css'>
|
||||
|
||||
<link rel="stylesheet" href="global.css">
|
||||
<link rel="stylesheet" href="build/global.css">
|
||||
|
||||
<title>{{ config['title'] or 'Gradio' }}</title>
|
||||
<meta property="og:url" content="https://gradio.app/" />
|
||||
|
||||
@ -1 +1 @@
|
||||
2.8.0b
|
||||
2.8.0b3
|
||||
2
setup.py
2
setup.py
@ -5,7 +5,7 @@ except ImportError:
|
||||
|
||||
setup(
|
||||
name="gradio",
|
||||
version="2.8.0b",
|
||||
version="2.8.0b3",
|
||||
include_package_data=True,
|
||||
description="Python library for easily interacting with trained machine learning models",
|
||||
author="Abubakar Abid, Ali Abid, Ali Abdalla, Dawood Khan, Ahsen Khaliq",
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
FROM python:3.8
|
||||
|
||||
RUN apt-get update
|
||||
RUN apt-get --assume-yes install npm nginx
|
||||
RUN apt-get update --fix-missing
|
||||
RUN apt-get --assume-yes install npm nginx libcairo2-dev pkg-config python3-dev
|
||||
RUN pip install pandas matplotlib
|
||||
RUN mkdir gradio
|
||||
WORKDIR /gradio
|
||||
|
||||
@ -12,38 +12,12 @@ from gradio.inputs import InputComponent
|
||||
from gradio.interface import Interface
|
||||
from gradio.outputs import OutputComponent
|
||||
|
||||
import cairo
|
||||
from render_html_helpers import generate_meta_image
|
||||
|
||||
GRADIO_DIR = "../../"
|
||||
GRADIO_GUIDES_DIR = os.path.join(GRADIO_DIR, "guides")
|
||||
GRADIO_DEMO_DIR = os.path.join(GRADIO_DIR, "demo")
|
||||
|
||||
|
||||
guides = []
|
||||
for guide in sorted(os.listdir(GRADIO_GUIDES_DIR)):
|
||||
if "template" in guide or "getting_started" in guide:
|
||||
continue
|
||||
guide_name = guide[:-3]
|
||||
pretty_guide_name = " ".join(
|
||||
[word.capitalize().replace("Ml", "ML") for word in guide_name.split("_")]
|
||||
)
|
||||
with open(os.path.join(GRADIO_GUIDES_DIR, guide), "r") as f:
|
||||
guide_content = f.read()
|
||||
|
||||
tags = []
|
||||
if "tags: " in guide_content:
|
||||
tags = guide_content.split("tags: ")[1].split("\n")[0].split(", ")
|
||||
tags = tags[:3]
|
||||
tags = " • ".join(tags)
|
||||
|
||||
guide_dict = {
|
||||
"guide_name": guide_name,
|
||||
"pretty_guide_name": pretty_guide_name,
|
||||
"guide_content": guide_content,
|
||||
"tags": tags,
|
||||
}
|
||||
guides.append(guide_dict)
|
||||
|
||||
with open("src/navbar.html", encoding="utf-8") as navbar_file:
|
||||
navbar_html = navbar_file.read()
|
||||
|
||||
@ -52,10 +26,9 @@ def render_index():
|
||||
os.makedirs("generated", exist_ok=True)
|
||||
with open("src/tweets.json", encoding="utf-8") as tweets_file:
|
||||
tweets = json.load(tweets_file)
|
||||
star_count = "{:,}".format(
|
||||
requests.get("https://api.github.com/repos/gradio-app/gradio").json()[
|
||||
"stargazers_count"
|
||||
]
|
||||
star_request = requests.get("https://api.github.com/repos/gradio-app/gradio").json()
|
||||
star_count = (
|
||||
"{:,}".format(star_request["stargazers_count"]) if "stargazers_count" in star_request else ""
|
||||
)
|
||||
with open("src/index_template.html", encoding="utf-8") as template_file:
|
||||
template = Template(template_file.read())
|
||||
@ -68,10 +41,48 @@ def render_index():
|
||||
generated_template.write(output_html)
|
||||
|
||||
|
||||
guides = []
|
||||
for guide in sorted(os.listdir(GRADIO_GUIDES_DIR)):
|
||||
if "template" in guide:
|
||||
continue
|
||||
guide_name = guide[:-3]
|
||||
pretty_guide_name = " ".join(
|
||||
[
|
||||
word.capitalize().replace("Ml", "ML").replace("Gan", "GAN")
|
||||
for word in guide_name.split("_")
|
||||
]
|
||||
)
|
||||
with open(os.path.join(GRADIO_GUIDES_DIR, guide), "r") as f:
|
||||
guide_content = f.read()
|
||||
|
||||
tags = None
|
||||
if "tags: " in guide_content:
|
||||
tags = guide_content.split("tags: ")[1].split("\n")[0].split(", ")
|
||||
|
||||
spaces = None
|
||||
if "related_spaces: " in guide_content:
|
||||
spaces = guide_content.split("related_spaces: ")[1].split("\n")[0].split(", ")
|
||||
url = f"https://gradio.app/{guide_name}/"
|
||||
|
||||
guide_content = "\n".join([line for line in guide_content.split("\n") if not (line.startswith("tags: ") or line.startswith("related_spaces: "))])
|
||||
|
||||
guides.append(
|
||||
{
|
||||
"name": guide_name,
|
||||
"pretty_name": pretty_guide_name,
|
||||
"content": guide_content,
|
||||
"tags": tags,
|
||||
"spaces": spaces,
|
||||
"url": url,
|
||||
}
|
||||
)
|
||||
|
||||
|
||||
def render_guides_main():
|
||||
filtered_guides = [guide for guide in guides if guide["name"] != "getting_started"]
|
||||
with open("src/guides_main_template.html", encoding="utf-8") as template_file:
|
||||
template = Template(template_file.read())
|
||||
output_html = template.render(guides=guides, navbar_html=navbar_html)
|
||||
output_html = template.render(guides=filtered_guides, navbar_html=navbar_html)
|
||||
os.makedirs(os.path.join("generated", "guides"), exist_ok=True)
|
||||
with open(
|
||||
os.path.join("generated", "guides", "index.html"), "w", encoding="utf-8"
|
||||
@ -83,114 +94,16 @@ def render_guides_main():
|
||||
generated_template.write(output_html)
|
||||
|
||||
|
||||
def add_line_breaks(text, num_char):
|
||||
if len(text) > num_char:
|
||||
text_list = text.split()
|
||||
text = ""
|
||||
total_count = 0
|
||||
count = 0
|
||||
for word in text_list:
|
||||
if total_count > num_char * 5:
|
||||
text = text[:-1]
|
||||
text += "..."
|
||||
break
|
||||
count += len(word)
|
||||
if count > num_char:
|
||||
text += word + "\n"
|
||||
total_count += count
|
||||
count = 0
|
||||
else:
|
||||
text += word + " "
|
||||
total_count += len(word + " ")
|
||||
return text
|
||||
return text
|
||||
|
||||
|
||||
def generate_guide_meta_tags(title, tags, url, guide_path_name):
|
||||
surface = cairo.ImageSurface.create_from_png("src/assets/img/guides/base-image.png")
|
||||
ctx = cairo.Context(surface)
|
||||
ctx.scale(500, 500)
|
||||
ctx.set_source_rgba(0.611764706, 0.639215686, 0.6862745098, 1)
|
||||
ctx.select_font_face("Arial", cairo.FONT_SLANT_NORMAL, cairo.FONT_WEIGHT_NORMAL)
|
||||
ctx.set_font_size(0.15)
|
||||
ctx.move_to(0.3, 0.55)
|
||||
ctx.show_text("gradio.app/guides")
|
||||
if len(tags) > 5:
|
||||
tags = tags[:5]
|
||||
tags = " | ".join(tags)
|
||||
ctx.move_to(0.3, 2.2)
|
||||
ctx.show_text(tags)
|
||||
ctx.set_source_rgba(0.352941176, 0.352941176, 0.352941176, 1)
|
||||
ctx.set_font_size(0.28)
|
||||
title_breaked = add_line_breaks(title, 10)
|
||||
|
||||
if "\n" in title_breaked:
|
||||
for i, t in enumerate(title_breaked.split("\n")):
|
||||
ctx.move_to(0.3, 0.9 + i * 0.4)
|
||||
ctx.show_text(t)
|
||||
else:
|
||||
ctx.move_to(0.3, 1.0)
|
||||
ctx.show_text(title_breaked)
|
||||
image_path = f"src/assets/img/guides/{guide_path_name}.png"
|
||||
surface.write_to_png(image_path)
|
||||
load_path = f"/assets/img/guides/{guide_path_name}.png"
|
||||
meta_tags = f"""
|
||||
<title>{title}</title>
|
||||
<meta property="og:title" content="{title}" />
|
||||
<meta property="og:type" content="article" />
|
||||
<meta property="og:url" content="{url}" />
|
||||
<meta property="og:image" content="{load_path}" />
|
||||
<meta name="twitter:title" content="{title}">
|
||||
<meta name="twitter:image" content="{load_path}">
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
"""
|
||||
return meta_tags
|
||||
|
||||
|
||||
def render_guides():
|
||||
for guide in os.listdir(GRADIO_GUIDES_DIR):
|
||||
if "template" in guide:
|
||||
continue
|
||||
with open(
|
||||
os.path.join(GRADIO_GUIDES_DIR, guide), encoding="utf-8"
|
||||
) as guide_file:
|
||||
guide_text = guide_file.read()
|
||||
for guide in guides:
|
||||
generate_meta_image(guide)
|
||||
|
||||
if "related_spaces: " in guide_text:
|
||||
spaces = guide_text.split("related_spaces: ")[1].split("\n")[0].split(", ")
|
||||
spaces_html = "<div id='spaces-holder'><a href='https://hf.co/spaces' target='_blank'><img src='/assets/img/spaces-logo.svg'></a><p style='margin: 0;display: inline;font-size: large;font-weight: 400;'>Related Spaces: </p>"
|
||||
for space in spaces:
|
||||
spaces_html += f"<div class='space-link'><a href='{space}' target='_blank'>{space[30:]}</a></div>"
|
||||
spaces_html += "</div>"
|
||||
guide_text = (
|
||||
guide_text.split("related_spaces: ")[0]
|
||||
+ spaces_html
|
||||
+ "\n".join(guide_text.split("related_spaces: ")[1].split("\n")[1:])
|
||||
)
|
||||
|
||||
tags = ""
|
||||
if "tags: " in guide_text:
|
||||
tags = guide_text.split("tags: ")[1].split("\n")[0].split(", ")
|
||||
guide_text = (
|
||||
guide_text.split("tags: ")[0]
|
||||
+ "\n"
|
||||
+ "\n".join(guide_text.split("tags: ")[1].split("\n")[1:])
|
||||
)
|
||||
|
||||
title = " ".join(
|
||||
[
|
||||
word.capitalize().replace("Ml", "ML").replace("Gan", "GAN")
|
||||
for word in guide[:-3].split("_")
|
||||
]
|
||||
)
|
||||
url = f"https://gradio.app/{guide[:-3]}/"
|
||||
meta_tags = generate_guide_meta_tags(title, tags, url, guide[:-3])
|
||||
|
||||
code_tags = re.findall(r'\{\{ code\["([^\s]*)"\] \}\}', guide_text)
|
||||
demo_names = re.findall(r'\{\{ demos\["([^\s]*)"\] \}\}', guide_text)
|
||||
code_tags = re.findall(r'\{\{ code\["([^\s]*)"\] \}\}', guide["content"])
|
||||
demo_names = re.findall(r'\{\{ demos\["([^\s]*)"\] \}\}', guide["content"])
|
||||
code, demos = {}, {}
|
||||
guide_text = (
|
||||
guide_text.replace("website/src/assets", "/assets")
|
||||
guide["content"] = (
|
||||
guide["content"]
|
||||
.replace("website/src/assets", "/assets")
|
||||
.replace("```python\n", "<pre><code class='lang-python'>")
|
||||
.replace("```bash\n", "<pre><code class='lang-bash'>")
|
||||
.replace("```directory\n", "<pre><code class='lang-bash'>")
|
||||
@ -208,8 +121,10 @@ def render_guides():
|
||||
)
|
||||
|
||||
for demo_name in demo_names:
|
||||
demos[demo_name] = "<div id='interface_" + demo_name + "'></div>"
|
||||
guide_template = Template(guide_text)
|
||||
demos[demo_name] = (
|
||||
"</div><div id='interface_" + demo_name + "'></div><div class='prose'>"
|
||||
)
|
||||
guide_template = Template(guide["content"])
|
||||
guide_output = guide_template.render(code=code, demos=demos)
|
||||
|
||||
# Escape HTML tags inside python code blocks so they show up properly
|
||||
@ -222,8 +137,7 @@ def render_guides():
|
||||
guide_output,
|
||||
)
|
||||
|
||||
output_html = markdown2.markdown(guide_output)
|
||||
output_html = output_html.replace("<a ", "<a target='blank' ")
|
||||
output_html = markdown2.markdown(guide_output, extras=["target-blank-links"])
|
||||
|
||||
for match in re.findall(r"<h3>([A-Za-z0-9 ]*)<\/h3>", output_html):
|
||||
output_html = output_html.replace(
|
||||
@ -232,20 +146,25 @@ def render_guides():
|
||||
)
|
||||
|
||||
os.makedirs("generated", exist_ok=True)
|
||||
guide = guide[:-3]
|
||||
os.makedirs(os.path.join("generated", guide), exist_ok=True)
|
||||
os.makedirs(os.path.join("generated", guide["name"]), exist_ok=True)
|
||||
with open(
|
||||
"src/guides_template.html", encoding="utf-8"
|
||||
) as general_template_file:
|
||||
general_template = Template(general_template_file.read())
|
||||
with open(
|
||||
os.path.join("generated", guide, "index.html"), "w", encoding="utf-8"
|
||||
os.path.join("generated", guide["name"], "index.html"),
|
||||
"w",
|
||||
encoding="utf-8",
|
||||
) as generated_template:
|
||||
output_html = general_template.render(
|
||||
template_html=output_html,
|
||||
demo_names=demo_names,
|
||||
meta_tags=meta_tags,
|
||||
navbar_html=navbar_html,
|
||||
title=guide["pretty_name"],
|
||||
url=guide["url"],
|
||||
guide_name=guide["name"],
|
||||
spaces=guide["spaces"],
|
||||
tags=guide["tags"],
|
||||
)
|
||||
generated_template.write(output_html)
|
||||
|
||||
|
||||
59
website/homepage/render_html_helpers.py
Normal file
59
website/homepage/render_html_helpers.py
Normal file
@ -0,0 +1,59 @@
|
||||
import cairo
|
||||
import os
|
||||
|
||||
def add_line_breaks(text, num_char):
|
||||
if len(text) > num_char:
|
||||
text_list = text.split()
|
||||
text = ""
|
||||
total_count = 0
|
||||
count = 0
|
||||
for word in text_list:
|
||||
if total_count > num_char*5:
|
||||
text = text[:-1]
|
||||
text += "..."
|
||||
break
|
||||
count += len(word)
|
||||
if count > num_char:
|
||||
text += word + "\n"
|
||||
total_count += count
|
||||
count = 0
|
||||
else:
|
||||
text += word + " "
|
||||
total_count += len(word+" ")
|
||||
return text
|
||||
return text
|
||||
|
||||
def generate_meta_image(guide):
|
||||
IMG_GUIDE_LOCATION = "dist/assets/img/guides"
|
||||
title, tags, guide_name = guide["pretty_name"], guide["tags"], guide["name"]
|
||||
surface = cairo.ImageSurface.create_from_png("src/assets/img/guides/base-image.png")
|
||||
ctx = cairo.Context(surface)
|
||||
ctx.scale(500, 500)
|
||||
ctx.set_source_rgba(0.611764706,0.639215686,0.6862745098,1)
|
||||
ctx.select_font_face("Arial", cairo.FONT_SLANT_NORMAL,
|
||||
cairo.FONT_WEIGHT_NORMAL)
|
||||
ctx.set_font_size(0.15)
|
||||
ctx.move_to(0.3, 0.55)
|
||||
ctx.show_text("gradio.app/guides")
|
||||
if tags:
|
||||
if len(tags) > 5:
|
||||
tags = tags[:5]
|
||||
tags = " | ".join(tags)
|
||||
ctx.move_to(0.3, 2.2)
|
||||
ctx.show_text(tags)
|
||||
ctx.set_source_rgba(0.352941176,0.352941176,0.352941176,1)
|
||||
ctx.set_font_size(0.28)
|
||||
title_breaked = add_line_breaks(title, 10)
|
||||
|
||||
if "\n" in title_breaked:
|
||||
for i, t in enumerate(title_breaked.split("\n")):
|
||||
ctx.move_to(0.3, 0.9+i*0.4)
|
||||
ctx.show_text(t)
|
||||
else:
|
||||
ctx.move_to(0.3, 1.0)
|
||||
ctx.show_text(title_breaked)
|
||||
|
||||
|
||||
os.makedirs(IMG_GUIDE_LOCATION, exist_ok=True )
|
||||
image_path = f"{IMG_GUIDE_LOCATION}/{guide_name}.png"
|
||||
surface.write_to_png(image_path)
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 89 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 75 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 68 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 67 KiB |
@ -28,45 +28,11 @@
|
||||
html {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
header {
|
||||
flex
|
||||
}
|
||||
.prose p > img {
|
||||
margin: 0 auto;
|
||||
width: 600px;
|
||||
max-width: 100%;
|
||||
}
|
||||
.prose {
|
||||
max-width: none !important;
|
||||
}
|
||||
.gradio_page .footer {
|
||||
display: none !important;
|
||||
}
|
||||
.prose .code, .prose pre {
|
||||
background-color: whitesmoke;
|
||||
color: black;
|
||||
}
|
||||
.prose table {
|
||||
width: auto;
|
||||
}
|
||||
h3 a {
|
||||
display: inline-block;
|
||||
}
|
||||
h3 a img {
|
||||
height: 14px;
|
||||
margin: 0 4px !important;
|
||||
}
|
||||
|
||||
ul {
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
.search-for-tags {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.searchTerm {
|
||||
width: 100%;
|
||||
border: 1px solid #bebfc3;
|
||||
@ -157,14 +123,17 @@
|
||||
|
||||
<div id="guide-list" class="grid grid-cols-1 lg:grid-cols-3 gap-12 pt-12">
|
||||
{% for guide in guides %}
|
||||
<a class="flex lg:col-span-1 flex-col group overflow-hidden relative rounded-xl shadow-sm hover:shadow-alternate transition-shadow" href="/{{ guide.guide_name }}">
|
||||
<a class="flex lg:col-span-1 flex-col group overflow-hidden relative rounded-xl shadow-sm hover:shadow-alternate transition-shadow" href="/{{ guide.name }}">
|
||||
<div class="flex flex-col p-4" style="
|
||||
height: min-content;">
|
||||
<h2 class="font-semibold group-hover:underline text-xl" style="color: #5a5a5a;">{{ guide.pretty_guide_name }}
|
||||
<h2 class="font-semibold group-hover:underline text-xl">{{ guide.pretty_name }}
|
||||
</h2>
|
||||
<div class="tags-holder">
|
||||
<p>
|
||||
{{ guide.tags }}
|
||||
{% for tag in guide.tags %}
|
||||
{{ tag }}<!--
|
||||
-->{% if not loop.last %}, {% endif %}
|
||||
{% endfor %}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -247,7 +216,7 @@
|
||||
var counter = 0
|
||||
{% for guide in guides %}
|
||||
txtValue = a[{{ loop.index - 1 }}].innerText;
|
||||
guideContent = {{ guide.guide_content|tojson|safe }}
|
||||
guideContent = {{ guide.content|tojson|safe }}
|
||||
if (txtValue.toUpperCase().indexOf(filter) > -1 || guideContent.toUpperCase().indexOf(filter) > -1) {
|
||||
a[{{ loop.index - 1}}].style.display = "";
|
||||
} else {
|
||||
|
||||
@ -5,92 +5,90 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
{{ meta_tags|safe }}
|
||||
<meta property="og:title" content="{{ title }}" />
|
||||
<meta property="og:type" content="article" />
|
||||
<meta property="og:url" content="{{ url }}" />
|
||||
<meta property="og:image" content="/assets/img/guides/{{ guide_name }}.png" />
|
||||
<meta name="twitter:title" content="{{ title }}">
|
||||
<meta name="twitter:image" content="/assets/img/guides/{{ guide_name }}.png">
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<link rel="icon" type="image/png" href="/assets/img/logo.png">
|
||||
<link href="/gradio_static/build/themes.css" rel="stylesheet">
|
||||
<link href="/gradio_static/build/global.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/style.css">
|
||||
<link rel="stylesheet" href="/assets/prism.css">
|
||||
<style>
|
||||
html {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
header {
|
||||
flex
|
||||
}
|
||||
.prose p > img {
|
||||
margin: 0 auto;
|
||||
width: 600px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.prose {
|
||||
max-width: none !important;
|
||||
}
|
||||
|
||||
.prose p>img {
|
||||
margin: 0 auto;
|
||||
width: 600px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.gradio-page .content {
|
||||
padding: 0px !important;
|
||||
}
|
||||
|
||||
.gradio-page .footer {
|
||||
display: none !important;
|
||||
}
|
||||
.prose .code, .prose pre {
|
||||
|
||||
.prose .code,
|
||||
.prose pre {
|
||||
color: black;
|
||||
background: rgb(249, 250, 251);
|
||||
}
|
||||
.prose table {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
h3 a {
|
||||
display: inline-block;
|
||||
}
|
||||
h3 a img {
|
||||
height: 14px;
|
||||
margin: 0 4px !important;
|
||||
}
|
||||
#guide-template{
|
||||
margin-top:30px;
|
||||
}
|
||||
.prose p > img {
|
||||
margin: 0;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.prose h1 {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
||||
.space-link {
|
||||
display: inline-block;
|
||||
margin: 4px;
|
||||
padding-left: 6px;
|
||||
padding-right: 6px;
|
||||
border-radius: 7px;
|
||||
}
|
||||
|
||||
.space-link a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#spaces-holder img {
|
||||
display: inherit;
|
||||
width: 2.5%;
|
||||
margin: 0;
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
|
||||
</style>
|
||||
<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');
|
||||
</script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag() {
|
||||
dataLayer.push(arguments);
|
||||
}
|
||||
gtag('js', new Date());
|
||||
gtag('config', 'UA-156449732-1');
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body class="bg-white text-gray-900 text-md sm:text-lg">
|
||||
{{navbar_html|safe}}
|
||||
<div class="container mx-auto max-w-4xl px-4 mb-12" id="guide-template">
|
||||
<div class="prose max-w-none">
|
||||
<div class="container mx-auto max-w-4xl px-4 mb-12 mt-6" id="guide-template">
|
||||
{% if spaces is not none %}
|
||||
<p class='mb-2 text-sm text-gray-500'>
|
||||
<span class="italic">Related Spaces:</span>
|
||||
{% for space in spaces %}
|
||||
<a href='{{ space }}' target='_blank' class="hover:text-blue-500 transition">{{ space[30:] }}</a>
|
||||
{% if not loop.last %}, {% endif %}
|
||||
{% endfor %}
|
||||
</p>
|
||||
{% endif %}
|
||||
|
||||
{% if tags is not none %}
|
||||
<p class='mb-2 text-sm text-gray-500'>
|
||||
<span class="italic">Tags:</span>
|
||||
{% for tag in tags %}
|
||||
<span>{{ tag }}</span><!--
|
||||
-->{% if not loop.last %}, {% endif %}
|
||||
{% endfor %}
|
||||
</p>
|
||||
{% endif %}
|
||||
|
||||
<div class="prose mt-6">
|
||||
{{ template_html|safe }}
|
||||
</div>
|
||||
</div>
|
||||
@ -112,49 +110,19 @@
|
||||
<script defer id='gradio-library' src="/gradio_static/build/bundle.js"></script>
|
||||
<script>
|
||||
var demo_endpoint = "/demo";
|
||||
var demo_names = {{ demo_names|tojson }};
|
||||
var demo_names = {{ demo_names| tojson }};
|
||||
document.querySelector("#gradio-library").addEventListener('load', function () {
|
||||
demo_names.forEach((demo_name, i) => {
|
||||
fetch('/demo/' + demo_name + '/config')
|
||||
.then(response => response.json())
|
||||
.then(demo => {
|
||||
demo.root = demo_endpoint + "/" + demo_name + "/";
|
||||
launchGradio(demo, "#interface_" + demo_name);
|
||||
});
|
||||
fetch('/demo/' + demo_name + '/config')
|
||||
.then(response => response.json())
|
||||
.then(demo => {
|
||||
demo.root = demo_endpoint + "/" + demo_name + "/";
|
||||
launchGradio(demo, "#interface_" + demo_name);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
var spacesHolder, spaces;
|
||||
spacesHolder = document.getElementById("spaces-holder");
|
||||
spaces = spacesHolder.getElementsByTagName('div');
|
||||
|
||||
var backgrounds = ['rgba(255,254,188,0.3)',
|
||||
'rgba(255,205,188,0.3)',
|
||||
'rgba(255,188,188,0.3)',
|
||||
'rgba(194,255,169,0.3)',
|
||||
'rgba(169,255,237,0.3)',
|
||||
'rgba(182,169,255,0.3)',
|
||||
'rgba(255,183,245,0.3)']
|
||||
|
||||
function shuffleBackgrounds(array) {
|
||||
for (let i = array.length - 1; i > 0; i--) {
|
||||
const j = Math.floor(Math.random() * (i + 1));
|
||||
[array[i], array[j]] = [array[j], array[i]];
|
||||
}
|
||||
}
|
||||
|
||||
shuffleBackgrounds(backgrounds);
|
||||
|
||||
color_counter = 0
|
||||
for (let i = 0; i < spaces.length; i++) {
|
||||
spaces[i].style.background = backgrounds[color_counter];
|
||||
color_counter += 1
|
||||
if (color_counter == backgrounds.length) {
|
||||
color_counter = 0;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
@ -21,6 +21,7 @@
|
||||
|
||||
<link rel="icon" type="image/png" href="/assets/img/logo.png">
|
||||
<link href="/gradio_static/build/themes.css" rel="stylesheet">
|
||||
<link href="/gradio_static/build/global.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="stylesheet" href="/assets/prism.css">
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-156449732-1"></script>
|
||||
@ -35,10 +36,6 @@
|
||||
</head>
|
||||
|
||||
<body class="bg-white text-gray-900 text-md sm:text-lg">
|
||||
<!-- <div class="w-full bg-yellow-200 text-center p-3">
|
||||
🎉 We are joining Hugging Face!
|
||||
<a class="font-semibold underline" href="/joining-huggingface/">Read our announcement here.</a> 🤗
|
||||
</div> -->
|
||||
{{navbar_html|safe}}
|
||||
<section
|
||||
class="flex flex-col gap-8 items-center justify-center p-4 bg-opacity-20 bg-cover bg-center"
|
||||
|
||||
@ -1,17 +1,33 @@
|
||||
<header class="container mx-auto p-4 flex justify-between items-center gap-4 flex-col sm:flex-row">
|
||||
<header class="container mx-auto p-4 flex flex-wrap justify-between items-center gap-6 flex-row sm:flex-col lg:flex-row">
|
||||
<a href="/">
|
||||
<img src="/assets/img/logo.svg" class="h-10">
|
||||
</a>
|
||||
<nav class="flex gap-12 sm:gap-16">
|
||||
<a class="link" href="/getting_started">⚡ Getting Started</a>
|
||||
<a class="link" href="/docs">✍️ Docs</a>
|
||||
<a class="link" href="/guides">💡 Guides</a>
|
||||
<div class="group relative cursor-pointer font-semibold flex items-center gap-1" onClick="document.querySelector('.help-menu').classList.toggle('flex'); document.querySelector('.help-menu').classList.toggle('hidden');">
|
||||
🖐 Community
|
||||
<svg class="h-8 w-8 sm:hidden" viewBox="-10 -10 20 20"
|
||||
onclick="document.querySelector('nav').classList.toggle('hidden'); document.querySelector('nav').classList.toggle('flex');">
|
||||
<rect x="-7" y="-6" width="14" height="2" />
|
||||
<rect x="-7" y="-1" width="14" height="2" />
|
||||
<rect x="-7" y="4" width="14" height="2" />
|
||||
</svg>
|
||||
<nav class="sm:flex sm:flex-row sm:w-auto w-full flex-col gap-3 sm:gap-12 hidden">
|
||||
<a class="link flex gap-3 items-center" href="/getting_started">
|
||||
<span>⚡</span>
|
||||
<span>Getting Started</span>
|
||||
</a>
|
||||
<a class="link flex gap-3 items-center" href="/docs">
|
||||
<span>✍️</span>
|
||||
<span>Docs</span>
|
||||
</a>
|
||||
<a class="link flex gap-3 items-center" href="/guides.html">
|
||||
<span>💡</span>
|
||||
<span>Guides</span>
|
||||
</a>
|
||||
<div class="group relative cursor-pointer font-semibold flex gap-3 items-center" onClick="document.querySelector('.help-menu').classList.toggle('flex'); document.querySelector('.help-menu').classList.toggle('hidden');">
|
||||
<span>🖐</span>
|
||||
<span>Community</span>
|
||||
<svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
|
||||
<path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
|
||||
</svg>
|
||||
<div class="help-menu hidden group-hover:flex flex-col absolute top-6 right-0 bg-white shadow w-52">
|
||||
<div class="help-menu hidden group-hover:flex flex-col absolute top-6 sm:right-0 bg-white shadow w-52">
|
||||
<a class="link px-4 py-2 inline-block hover:bg-gray-100"
|
||||
href="https://github.com/gradio-app/gradio/issues/new/choose" target="_blank">File an Issue</a>
|
||||
<a class="link px-4 py-2 inline-block hover:bg-gray-100"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user