aliabd HF staff commited on
Commit
ec075ec
1 Parent(s): 61edbdc

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +89 -55
app.py CHANGED
@@ -14,65 +14,99 @@ 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, gr.inputs.Radio(["header","link","image"], label="Syntax for.."), gr.outputs.Textbox(label="syntax"), article=article).launch()
 
14
  return syntax[choice]
15
 
16
  article = """
17
+ <!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta property="og:title" content="Adding Markdown And Other Text"><meta property="og:type" content="article"><meta property="og:url" content="https://gradio.app/adding_markdown_and_other_text/"><meta property="og:image" content="/assets/img/guides/adding_markdown_and_other_text.png"><meta name="twitter:title" content="Adding Markdown And Other Text"><meta name="twitter:image" content="https://gradio.app/assets/img/guides/adding_markdown_and_other_text.png"><meta name="twitter:card" content="summary_large_image"><link rel="icon" type="image/png" href="/assets/img/logo.png"><link href="/gradio_static/assets/index.04bd2262.css" rel="stylesheet"><link href="/gradio_static/assets/vendor.c31bc17e.css" rel="stylesheet"><link rel="stylesheet" href="/style.d5ae6f5a4877bcedd7be.css"><link rel="stylesheet" href="/assets/prism.css"><style>html {
18
+ font-size: 16px !important;
19
+ }
20
+
21
+ .prose {
22
+ max-width: none !important;
23
+ }
24
+
25
+ .prose p>img {
26
+ margin: 0 auto;
27
+ width: 600px;
28
+ max-width: 100%;
29
+ }
30
+
31
+ .gradio-page .content {
32
+ padding: 0px !important;
33
+ }
34
+
35
+ .gradio-page .footer {
36
+ display: none !important;
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 = &quot;Talk To Me Morty&quot;
89
+ description = &quot;&quot;&quot;
90
+ &lt;p&gt;
91
+ &lt;center&gt;
92
  The bot was trained on Rick and Morty dialogues Kaggle Dataset using DialoGPT.
93
+ &lt;img src=&quot;https://huggingface.co/spaces/kingabzpro/Rick_and_Morty_Bot/resolve/main/img/rick.png&quot; alt=&quot;rick&quot; width=&quot;200&quot;/&gt;
94
+ &lt;/center&gt;
95
+ &lt;/p&gt;
96
+ &quot;&quot;&quot;
97
+ article = &quot;&quot;&quot;
98
+ &lt;p style=&#x27;text-align: center&#x27;&gt;
99
+ &lt;a href=&#x27;https://medium.com/geekculture/discord-bot-using-dailogpt-and-huggingface-api-c71983422701&#x27; target=&#x27;_blank&#x27;&gt;Complete Tutorial&lt;/a&gt;
100
+ &lt;/p&gt;
101
+
102
+ &lt;p style=&#x27;text-align: center&#x27;&gt;
103
+ &lt;a href=&#x27;https://dagshub.com/kingabzpro/DailoGPT-RickBot&#x27; target=&#x27;_blank&#x27;&gt;Project is Available at DAGsHub&lt;/a&gt;
104
+ &lt;/p&gt;
105
+ &quot;&quot;&quot;
106
  ...
107
 
108
  gr.Interface(fn=predict, ... , title=title, description=description, article=article).launch()
109
+ </code></pre><button class="copy flex float-right cursor-pointer rounded-l-none rounded-r mx-0 my-2" onclick="copyCode(this)"><img class="copy-svg m0 w-7 flex-initial" src="/assets/img/copy-grey.svg"><div class="flex-auto"></div></button></div><p>Of course, you don't have to use HTML and can instead rely on markdown. Here's a neat <a rel="noopener" target="_blank" href="https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet">cheatsheet</a> with the most common markdown commands.</p><p>In fact, since this guide itself is basically just HTML, I went ahead and passed the whole thing into the article parameter of an interface, and you can read it yourself here:</p><h3 id="thats-all-happy-building">That's all! Happy building :)</h3></div></div><footer class="container mx-auto p-4 flex justify-between items-center"><img src="/assets/img/logo.svg" class="h-10"><div class="flex gap-4"><a class="hover:opacity-75 transition" href="https://twitter.com/Gradio"><img src="/assets/img/twitter.svg" class="h-8"> </a><a class="hover:opacity-75 transition" href="https://github.com/gradio-app/gradio"><img src="/assets/img/github.svg" class="h-8"></a></div></footer><script src="/assets/prism.js"></script><script>window.gradio_mode="website"</script><script defer="defer" id="gradio-library" type="module" crossorigin src="/gradio_static/assets/index.50bde2ee.js"></script><link rel="modulepreload" href="/gradio_static/assets/vendor.d6c533c8.js"><script>var demo_endpoint="/demo",demo_names=[];function createAnchorTag(e){let r=document.createElement("a");r.href=e,r.classList.add("anchor");let a=document.createElement("img");return a.classList.add("anchor-img","w-7","max-w-full","inline-block","mr-0","ml-1"),a.src="/assets/img/anchor.svg",r.appendChild(a),r}document.querySelector("#gradio-library").addEventListener("load",function(){demo_names.forEach((r,e)=>{fetch("/demo/"+r+"/config").then(e=>e.json()).then(e=>{e.root=demo_endpoint+"/"+r+"/",launchGradio(e,"#interface_"+r)})})});var headers=document.querySelectorAll("h1, h2, h3, h4, h5, h6");for(let r=0;r<headers.length;r++){headers[r].classList.add("header");let e="#"+headers[r].id;headers[r].appendChild(createAnchorTag(e))}function copyCode(e){var r=e.parentElement.innerText;navigator.clipboard.writeText(r),e.firstChild.src="/assets/img/copy-orange.svg",setTimeout(function(){e.firstChild.src="/assets/img/copy-grey.svg"},600)}var spacesHolder,spaces=(spacesHolder=document.getElementById("spaces-holder")).getElementsByTagName("div"),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(r){for(let e=r.length-1;0<e;e--){var a=Math.floor(Math.random()*(e+1));[r[e],r[a]]=[r[a],r[e]]}}shuffleBackgrounds(backgrounds);for(let e=color_counter=0;e<spaces.length;e++)spaces[e].style.background=backgrounds[color_counter],color_counter+=1,color_counter==backgrounds.length&&(color_counter=0)</script></body></html>
 
 
 
 
 
 
 
110
  """
111
 
112
  gr.Interface(predict, gr.inputs.Radio(["header","link","image"], label="Syntax for.."), gr.outputs.Textbox(label="syntax"), article=article).launch()