Spaces:

aliabd
/

markdown-guide

Runtime error

App Files Files Community

aliabd HF staff commited on Mar 15, 2022

Commit

e8e2ad5

•

1 Parent(s): 8919d07

Update app.py

Browse files

Files changed (1) hide show

app.py +41 -92

app.py CHANGED Viewed

@@ -13,100 +13,49 @@ syntax = {
 def predict(choice):
   return syntax[choice]
-article = """
-<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()

 def predict(choice):
   return syntax[choice]
+description = """
+# Adding Markdown and Other Text
+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
+tags: MARKDOWN, DESCRIPTION, ARTICLE
+## Introduction
+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.
+For example, take a look at this fun chatbot interface below. It has a title, description, image as well as links in the bottom.
+<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>
+## The parameters in `Interface`
+There are three parameters in `Interface` where text can go:
+* `Title`: which accepts text and can displays it at the very top of interface
+* `Description`: which accepts text, markdown or HTML and places it right under the title.
+* `Article`: which is also accepts text, markdown or HTML but places it below the interface.
+![annotated](website/src/assets/img/guides/adding_markdown_and_other_text/annotated.png)
+## Code example
+Here's all the text-related code required to recreate the interface above.
+```python
+import gradio as gr
+title = \"Talk To Me Morty\"
+description = \"\"\"
+<p>
+<center>
 The bot was trained on Rick and Morty dialogues Kaggle Dataset using DialoGPT.
+<img src="https://huggingface.co/spaces/kingabzpro/Rick_and_Morty_Bot/resolve/main/img/rick.png" alt="rick" width="200"/>
+</center>
+</p>
+ \"\"\"
+article = \"\"\"
+<p style='text-align: center'>
+<a href='https://medium.com/geekculture/discord-bot-using-dailogpt-and-huggingface-api-c71983422701' target='_blank'>Complete Tutorial</a>
+</p>
+<p style='text-align: center'>
+<a href='https://dagshub.com/kingabzpro/DailoGPT-RickBot' target='_blank'>Project is Available at DAGsHub</a>
+</p>
+\"\"\"
 ...
 gr.Interface(fn=predict, ... , title=title, description=description, article=article).launch()
+```
+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.
+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)!
+### That's all! Happy building :)
 """
+gr.Interface(predict, gr.inputs.Radio(["header","link","image"], label="Syntax for.."), gr.outputs.Textbox(label="syntax"), description=description).launch()