aliabd/markdown-guide
0
1import gradio as gr2 3syntax = {4 "link": "[I'm an inline-style link](https://www.google.com)",5 "image": "",6 "header": """## H27 ### H38 #### H49 ##### H510 ###### H6"""11}12 13def predict(choice): 14 return syntax[choice]15 16description = """17# Adding Markdown and Other Text18related_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-generator19tags: MARKDOWN, DESCRIPTION, ARTICLE20## Introduction21When 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. 22For example, take a look at this fun chatbot interface below. It has a title, description, image as well as links in the bottom. 23<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>24## The parameters in `Interface`25There are three parameters in `Interface` where text can go:26* `Title`: which accepts text and can displays it at the very top of interface27* `Description`: which accepts text, markdown or HTML and places it right under the title.28* `Article`: which is also accepts text, markdown or HTML but places it below the interface.2930## Code example31Here's all the text-related code required to recreate the interface above. 32```python33import gradio as gr34title = \"Talk To Me Morty\"35description = \"\"\"36<p>37<center>38The bot was trained on Rick and Morty dialogues Kaggle Dataset using DialoGPT.39<img src="https://huggingface.co/spaces/kingabzpro/Rick_and_Morty_Bot/resolve/main/img/rick.png" alt="rick" width="200"/>40</center>41</p>42 \"\"\"43article = \"\"\"44<p style='text-align: center'>45<a href='https://medium.com/geekculture/discord-bot-using-dailogpt-and-huggingface-api-c71983422701' target='_blank'>Complete Tutorial</a>46</p>47<p style='text-align: center'>48<a href='https://dagshub.com/kingabzpro/DailoGPT-RickBot' target='_blank'>Project is Available at DAGsHub</a>49</p>50\"\"\"51...52gr.Interface(fn=predict, ... , title=title, description=description, article=article).launch() 53```54Of 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.55In 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)!56 57### That's all! Happy building :)58"""59 60 61gr.Interface(predict, gr.inputs.Radio(["header","link","image"], label="Syntax for.."), gr.outputs.Textbox(label="syntax"), description=description).launch()