Spaces:
Runtime error
Runtime error
Create app.py
Browse files
app.py
ADDED
@@ -0,0 +1,78 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
import gradio as gr
|
2 |
+
|
3 |
+
syntax = {
|
4 |
+
"link": "[I'm an inline-style link](https://www.google.com)",
|
5 |
+
"image": "![alt text](image_path)",
|
6 |
+
"header": """## H2
|
7 |
+
### H3
|
8 |
+
#### H4
|
9 |
+
##### H5
|
10 |
+
###### H6"""
|
11 |
+
}
|
12 |
+
|
13 |
+
def predict(choice):
|
14 |
+
return syntax[choice]
|
15 |
+
|
16 |
+
article = """
|
17 |
+
# Adding Markdown and Other Text
|
18 |
+
|
19 |
+
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
|
20 |
+
tags: MARKDOWN, DESCRIPTION, ARTICLE
|
21 |
+
|
22 |
+
## Introduction
|
23 |
+
|
24 |
+
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.
|
25 |
+
|
26 |
+
For example, take a look at this fun chatbot interface below. It has a title, description, image as well as links in the bottom.
|
27 |
+
|
28 |
+
<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>
|
29 |
+
|
30 |
+
## The parameters in `Interface`
|
31 |
+
|
32 |
+
There are three parameters in `Interface` where text can go:
|
33 |
+
|
34 |
+
* `Title`: which accepts text and can displays it at the very top of interface
|
35 |
+
* `Description`: which accepts text, markdown or HTML and places it right under the title.
|
36 |
+
* `Article`: which is also accepts text, markdown or HTML but places it below the interface.
|
37 |
+
|
38 |
+
![annotated](website/src/assets/img/guides/adding_markdown_and_other_text/annotated.png)
|
39 |
+
|
40 |
+
## Code example
|
41 |
+
|
42 |
+
Here's all the text-related code required to recreate the interface above.
|
43 |
+
|
44 |
+
```python
|
45 |
+
import gradio as gr
|
46 |
+
|
47 |
+
title = "Talk To Me Morty"
|
48 |
+
description = """
|
49 |
+
<p>
|
50 |
+
<center>
|
51 |
+
The bot was trained on Rick and Morty dialogues Kaggle Dataset using DialoGPT.
|
52 |
+
<img src="https://huggingface.co/spaces/kingabzpro/Rick_and_Morty_Bot/resolve/main/img/rick.png" alt="rick" width="200"/>
|
53 |
+
</center>
|
54 |
+
</p>
|
55 |
+
"""
|
56 |
+
article = """
|
57 |
+
<p style='text-align: center'>
|
58 |
+
<a href='https://medium.com/geekculture/discord-bot-using-dailogpt-and-huggingface-api-c71983422701' target='_blank'>Complete Tutorial</a>
|
59 |
+
</p>
|
60 |
+
|
61 |
+
<p style='text-align: center'>
|
62 |
+
<a href='https://dagshub.com/kingabzpro/DailoGPT-RickBot' target='_blank'>Project is Available at DAGsHub</a>
|
63 |
+
</p>
|
64 |
+
"""
|
65 |
+
...
|
66 |
+
|
67 |
+
gr.Interface(fn=predict, ... , title=title, description=description, article=article).launch()
|
68 |
+
|
69 |
+
```
|
70 |
+
|
71 |
+
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.
|
72 |
+
|
73 |
+
In fact, since this guide itself was written in markdown, I went ahead and passed the whole thing into the article parameter of an interface, and you can read it yourself here:
|
74 |
+
|
75 |
+
### That's all! Happy building :)
|
76 |
+
"""
|
77 |
+
|
78 |
+
gr.Interface(predict, gradio.inputs.Radio(["header","link","image"], label="Syntax for..", article=article).launch()
|