Hugging Face's logo

Spaces:
aliabd
/
markdown-guide
Runtime error

App Files Community
markdown-guide
File size: 11,638 Bytes 
1ab397d
 
 
 
 
 
 
 
 
 
 
 
 
 
 
9995a10
ec075ec
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1ab397d
ec075ec
 
 
 
 
 
 
 
 
 
 
 
 
1ab397d
 
 
ec075ec
1ab397d
 
61edbdc
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
 
import gradio as gr

syntax = {
  "link": "[I'm an inline-style link](https://www.google.com)",
  "image": "![alt text](image_path)",
  "header": """## H2
  ### H3
  #### H4
  ##### H5
  ###### H6"""
}

def predict(choice): 
  return syntax[choice]
  
article = """
<!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 {
      font-size: 16px !important;
    }

    .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 {
      width: 95%;
      border-radius: 4px 0 0 4px;
      color: black;
      background: rgb(249, 250, 251);
    }

    h3 a {
      display: inline-block;
    }

    .prose h1 {
      font-weight: 600;
    }

    .anchor-img {
      margin: 0 0 0 5px !important;
    }

    .anchor {
      visibility: hidden;
    }

    .header:hover .anchor {
      visibility: visible;
    }

    .copy {
      padding-right: 1em;
      background: #f9fafb;
    }

    .copy-svg {
      visibility: hidden;
      margin: 1em 0 0 0 !important;
      width: 20px;
    }

    .code-block:hover .copy-svg {
       visibility: visible;
    }

    ol {
      list-style: auto;
      padding-inline-start: 40px;
      list-style-type: none;
    }</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

title = &quot;Talk To Me Morty&quot;
description = &quot;&quot;&quot;
&lt;p&gt;
&lt;center&gt;
The bot was trained on Rick and Morty dialogues Kaggle Dataset using DialoGPT.
&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;
&lt;/center&gt;
&lt;/p&gt;
&quot;&quot;&quot;
article = &quot;&quot;&quot;
&lt;p style=&#x27;text-align: center&#x27;&gt;
&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;
&lt;/p&gt;

&lt;p style=&#x27;text-align: center&#x27;&gt;
&lt;a href=&#x27;https://dagshub.com/kingabzpro/DailoGPT-RickBot&#x27; target=&#x27;_blank&#x27;&gt;Project is Available at DAGsHub&lt;/a&gt;
&lt;/p&gt;
&quot;&quot;&quot;
...

gr.Interface(fn=predict, ... , title=title, description=description, article=article).launch()  
</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>
"""

gr.Interface(predict, gr.inputs.Radio(["header","link","image"], label="Syntax for.."), gr.outputs.Textbox(label="syntax"), article=article).launch()