Spaces:
Runtime error
Runtime error
| import gradio as gr | |
| syntax = { | |
| "link": "[I'm an inline-style link](https://www.google.com)", | |
| "image": "", | |
| "header": """## H2 | |
| ### H3 | |
| #### H4 | |
| ##### H5 | |
| ###### H6""" | |
| } | |
| 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 = "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() | |
| </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() |