Spaces:
Runtime error
Runtime error
Update app.py
Browse files
app.py
CHANGED
@@ -13,100 +13,49 @@ syntax = {
|
|
13 |
def predict(choice):
|
14 |
return syntax[choice]
|
15 |
|
16 |
-
|
17 |
-
|
18 |
-
|
19 |
-
|
20 |
-
|
21 |
-
|
22 |
-
|
23 |
-
|
24 |
-
|
25 |
-
|
26 |
-
|
27 |
-
|
28 |
-
|
29 |
-
|
30 |
-
|
31 |
-
|
32 |
-
|
33 |
-
|
34 |
-
|
35 |
-
|
36 |
-
|
37 |
-
|
38 |
-
|
39 |
-
.prose .code,
|
40 |
-
.prose pre {
|
41 |
-
width: 95%;
|
42 |
-
border-radius: 4px 0 0 4px;
|
43 |
-
color: black;
|
44 |
-
background: rgb(249, 250, 251);
|
45 |
-
}
|
46 |
-
|
47 |
-
h3 a {
|
48 |
-
display: inline-block;
|
49 |
-
}
|
50 |
-
|
51 |
-
.prose h1 {
|
52 |
-
font-weight: 600;
|
53 |
-
}
|
54 |
-
|
55 |
-
.anchor-img {
|
56 |
-
margin: 0 0 0 5px !important;
|
57 |
-
}
|
58 |
-
|
59 |
-
.anchor {
|
60 |
-
visibility: hidden;
|
61 |
-
}
|
62 |
-
|
63 |
-
.header:hover .anchor {
|
64 |
-
visibility: visible;
|
65 |
-
}
|
66 |
-
|
67 |
-
.copy {
|
68 |
-
padding-right: 1em;
|
69 |
-
background: #f9fafb;
|
70 |
-
}
|
71 |
-
|
72 |
-
.copy-svg {
|
73 |
-
visibility: hidden;
|
74 |
-
margin: 1em 0 0 0 !important;
|
75 |
-
width: 20px;
|
76 |
-
}
|
77 |
-
|
78 |
-
.code-block:hover .copy-svg {
|
79 |
-
visibility: visible;
|
80 |
-
}
|
81 |
-
|
82 |
-
ol {
|
83 |
-
list-style: auto;
|
84 |
-
padding-inline-start: 40px;
|
85 |
-
list-style-type: none;
|
86 |
-
}</style><script async src="https://www.googletagmanager.com/gtag/js?id=UA-156449732-1"></script><script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","UA-156449732-1")</script></head><body class="bg-white text-gray-900 text-md sm:text-lg"><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><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"><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 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" href="https://discuss.huggingface.co/c/gradio/26" target="_blank">Discuss</a> <a class="link px-4 py-2 inline-block hover:bg-gray-100" target="_blank" href="https://discord.gg/feTf9x3ZSB">Discord</a> <a class="link px-4 py-2 inline-block hover:bg-gray-100" target="_blank" href="https://gradio.curated.co/">Newsletter</a></div></div></nav></header><div class="container mx-auto max-w-4xl px-4 mb-12 mt-6" id="guide-template"><div class="prose mt-6 mb-6"><h1 id="adding_markdown_and_other_text" class="header">Adding Markdown And Other Text</h1></div><div id="spaces-holder"><a href="https://hf.co/spaces" target="_blank"><img class="inline-block my-0 mx-auto w-5 max-w-full pb-1" src="/assets/img/spaces-logo.svg"></a><p class="m-0 inline text-lg font-normal">Related Spaces:</p><div class="space-link inline-block m-1 px-1 rounded-md"><a href="https://huggingface.co/spaces/ThomasSimonini/Chat-with-Gandalf-GPT-J6B" target="_blank" class="no-underline">ThomasSimonini/Chat-with-Gandalf-GPT-J6B</a></div><div class="space-link inline-block m-1 px-1 rounded-md"><a href="https://huggingface.co/spaces/kingabzpro/Rick_and_Morty_Bot" target="_blank" class="no-underline">kingabzpro/Rick_and_Morty_Bot</a></div><div class="space-link inline-block m-1 px-1 rounded-md"><a href="https://huggingface.co/spaces/nateraw/cryptopunks-generator" target="_blank" class="no-underline">nateraw/cryptopunks-generator</a></div></div><div class="prose mt-6 mb-6"><h2 id="introduction">Introduction</h2><p>When an interface is shared, it is usually accompanied with some form of explanatory text, links or images. This guide will go over how to easily add these on gradio.</p><p>For example, take a look at this fun chatbot interface below. It has a title, description, image as well as links in the bottom.</p><iframe src="https://hf.space/gradioiframe/kingabzpro/Rick_and_Morty_Bot/+" frameborder="0" height="725" title="Gradio app" class="container p-0 flex-grow space-iframe" allow="accelerometer; ambient-light-sensor; autoplay; battery; camera; document-domain; encrypted-media; fullscreen; geolocation; gyroscope; layout-animations; legacy-image-formats; magnetometer; microphone; midi; oversized-images; payment; picture-in-picture; publickey-credentials-get; sync-xhr; usb; vr ; wake-lock; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"></iframe><h2 id="the-parameters-in-interface">The parameters in <code>Interface</code></h2><p>There are three parameters in <code>Interface</code> where text can go:</p><ul><li><code>Title</code>: which accepts text and can displays it at the very top of interface</li><li><code>Description</code>: which accepts text, markdown or HTML and places it right under the title.</li><li><code>Article</code>: which is also accepts text, markdown or HTML but places it below the interface.</li></ul><p><img src="/assets/img/guides/adding_markdown_and_other_text/annotated.png" alt="annotated"></p><h2 id="code-example">Code example</h2><p>Here's all the text-related code required to recreate the interface above.</p><div class="code-block" style="display: flex"><pre><code class="lang-python">import gradio as gr
|
87 |
-
|
88 |
-
title = "Talk To Me Morty"
|
89 |
-
description = """
|
90 |
-
<p>
|
91 |
-
<center>
|
92 |
The bot was trained on Rick and Morty dialogues Kaggle Dataset using DialoGPT.
|
93 |
-
|
94 |
-
|
95 |
-
|
96 |
-
|
97 |
-
article =
|
98 |
-
|
99 |
-
|
100 |
-
|
101 |
-
|
102 |
-
|
103 |
-
|
104 |
-
|
105 |
-
"""
|
106 |
...
|
107 |
-
|
108 |
gr.Interface(fn=predict, ... , title=title, description=description, article=article).launch()
|
109 |
-
|
|
|
|
|
|
|
|
|
110 |
"""
|
111 |
|
112 |
-
|
|
|
|
13 |
def predict(choice):
|
14 |
return syntax[choice]
|
15 |
|
16 |
+
description = """
|
17 |
+
# Adding Markdown and Other Text
|
18 |
+
related_spaces: https://huggingface.co/spaces/ThomasSimonini/Chat-with-Gandalf-GPT-J6B, https://huggingface.co/spaces/kingabzpro/Rick_and_Morty_Bot, https://huggingface.co/spaces/nateraw/cryptopunks-generator
|
19 |
+
tags: MARKDOWN, DESCRIPTION, ARTICLE
|
20 |
+
## Introduction
|
21 |
+
When an interface is shared, it is usually accompanied with some form of explanatory text, links or images. This guide will go over how to easily add these on gradio.
|
22 |
+
For example, take a look at this fun chatbot interface below. It has a title, description, image as well as links in the bottom.
|
23 |
+
<iframe src="https://hf.space/gradioiframe/kingabzpro/Rick_and_Morty_Bot/+" frameBorder="0" height="725" title="Gradio app" class="container p-0 flex-grow space-iframe" allow="accelerometer; ambient-light-sensor; autoplay; battery; camera; document-domain; encrypted-media; fullscreen; geolocation; gyroscope; layout-animations; legacy-image-formats; magnetometer; microphone; midi; oversized-images; payment; picture-in-picture; publickey-credentials-get; sync-xhr; usb; vr ; wake-lock; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"></iframe>
|
24 |
+
## The parameters in `Interface`
|
25 |
+
There are three parameters in `Interface` where text can go:
|
26 |
+
* `Title`: which accepts text and can displays it at the very top of interface
|
27 |
+
* `Description`: which accepts text, markdown or HTML and places it right under the title.
|
28 |
+
* `Article`: which is also accepts text, markdown or HTML but places it below the interface.
|
29 |
+
![annotated](website/src/assets/img/guides/adding_markdown_and_other_text/annotated.png)
|
30 |
+
## Code example
|
31 |
+
Here's all the text-related code required to recreate the interface above.
|
32 |
+
```python
|
33 |
+
import gradio as gr
|
34 |
+
title = \"Talk To Me Morty\"
|
35 |
+
description = \"\"\"
|
36 |
+
<p>
|
37 |
+
<center>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
38 |
The bot was trained on Rick and Morty dialogues Kaggle Dataset using DialoGPT.
|
39 |
+
<img src="https://huggingface.co/spaces/kingabzpro/Rick_and_Morty_Bot/resolve/main/img/rick.png" alt="rick" width="200"/>
|
40 |
+
</center>
|
41 |
+
</p>
|
42 |
+
\"\"\"
|
43 |
+
article = \"\"\"
|
44 |
+
<p style='text-align: center'>
|
45 |
+
<a href='https://medium.com/geekculture/discord-bot-using-dailogpt-and-huggingface-api-c71983422701' target='_blank'>Complete Tutorial</a>
|
46 |
+
</p>
|
47 |
+
<p style='text-align: center'>
|
48 |
+
<a href='https://dagshub.com/kingabzpro/DailoGPT-RickBot' target='_blank'>Project is Available at DAGsHub</a>
|
49 |
+
</p>
|
50 |
+
\"\"\"
|
|
|
51 |
...
|
|
|
52 |
gr.Interface(fn=predict, ... , title=title, description=description, article=article).launch()
|
53 |
+
```
|
54 |
+
Of course, you don't have to use HTML and can instead rely on markdown. Here's a neat [cheatsheet](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet) with the most common markdown commands.
|
55 |
+
In fact, since this guide itself was written in markdown, I went ahead and passed the whole thing into the descriptioon parameter of an interface, and you can read it yourself [here](https://huggingface.co/spaces/aliabd/markdown-guide)!
|
56 |
+
|
57 |
+
### That's all! Happy building :)
|
58 |
"""
|
59 |
|
60 |
+
|
61 |
+
gr.Interface(predict, gr.inputs.Radio(["header","link","image"], label="Syntax for.."), gr.outputs.Textbox(label="syntax"), description=description).launch()
|