Skip to main content
Gradio makes it easy to share your app with others, whether through temporary public URLs or permanent hosting solutions. Gradio demos can be easily shared publicly by setting share=True in the launch() method:
import gradio as gr

def greet(name):
    return "Hello " + name + "!"

demo = gr.Interface(fn=greet, inputs="textbox", outputs="textbox")
demo.launch(share=True)  # Share your demo with just 1 extra parameter
This generates a public, shareable link that you can send to anybody! When you send this link, the user on the other side can try out the model in their browser. Because the processing happens on your device (as long as your device stays on), you don’t have to worry about packaging any dependencies.
A share link usually looks something like this: https://07ff8706ab.gradio.live. The link is served through Gradio Share Servers, which are only a proxy for your local server and do not store any data sent through your app.
  • Share links expire after 72 hours
  • Share links are publicly accessible, meaning anyone can use your model for prediction
  • By default, share=False (except in Google Colab notebooks, where share links are automatically created)
Keep in mind that share links are publicly accessible. Make sure not to expose any sensitive information through the functions you write, or allow any critical changes to occur on your device. Consider adding authentication to your app.
You can set up your own Share Server on your own cloud server to overcome the 72-hour restriction.

Permanent hosting on Hugging Face Spaces

If you’d like to have a permanent link to your Gradio demo on the internet, use Hugging Face Spaces. Hugging Face Spaces provides the infrastructure to permanently host your machine learning model for free! After you have created a free Hugging Face account, you have two methods to deploy your Gradio app:

Method 1: Deploy from terminal

Run gradio deploy in your app directory. The CLI will:
  1. Gather basic metadata about your app
  2. Upload all files in the current directory (respecting .gitignore)
  3. Launch your app on Spaces
To update your Space, you can:
  • Re-run the gradio deploy command, or
  • Enable GitHub Actions in the CLI to automatically update the Space on git push

Method 2: Deploy from browser

Drag and drop a folder containing your Gradio model and all related files to Hugging Face Spaces.
See the Hugging Face Spaces guide for more information on hosting your Gradio app.

SSH port forwarding alternative

As an alternative to using share links, you can use SSH port-forwarding to share your local server with specific users. This approach:
  • Doesn’t expose your app publicly
  • Gives you control over who can access your app
  • Doesn’t have time limitations
  • Requires users to have SSH access to your machine
You can add a button to your Gradio app that creates a unique URL you can use to share your app and all components as they currently are with others. This is useful for sharing unique and interesting generations from your application, or for saving a snapshot of your app at a particular point in time. To add a deep link button to your app, place the gr.DeepLinkButton component anywhere in your app:
import gradio as gr

def chat(message, history):
    history.append((message, f"Echo: {message}"))
    return history, ""

with gr.Blocks() as demo:
    chatbot = gr.Chatbot()
    msg = gr.Textbox()
    gr.DeepLinkButton("Share this conversation")
    
    msg.submit(chat, [msg, chatbot], [chatbot, msg])

demo.launch(share=True)
For the deep link URL to be accessible to others, your app must be available at a public URL. Be sure to host your app on Hugging Face Spaces or use the share=True parameter when launching your app.
After clicking the deep link button, you can paste the URL into a new browser tab to see the app as it is at that point in time.

Embedding your Gradio app

Once you have hosted your app on Hugging Face Spaces (or on your own server), you may want to embed the demo on a different website, such as your blog or portfolio. You can embed interactive demos even in static websites, such as GitHub pages. There are two ways to embed your Gradio demos, with quick links available in the “Embed this Space” dropdown on your Space page. Web components typically offer a better experience than iframes:
  • Load lazily (won’t slow down your website)
  • Automatically adjust height based on content
  • More customizable
To embed with web components:
  1. Import the Gradio JS library (replace {GRADIO_VERSION} with your version):
<script
  type="module"
  src="https://gradio.s3-us-west-2.amazonaws.com/{GRADIO_VERSION}/gradio.js"
></script>
  1. Add the <gradio-app> element where you want the app:
<gradio-app src="https://abidlabs-pytorch-image-classifier.hf.space"></gradio-app>

Web component attributes

You can customize the appearance and behavior with these attributes:
  • src: The URL of the hosted Gradio demo
  • space: Shorthand for Hugging Face Spaces (e.g., "gradio/Echocardiogram-Segmentation")
  • control_page_title: Whether to set the HTML title to the app title (default: "false")
  • initial_height: Initial height while loading (default: "300px")
  • container: Whether to show the border frame and hosting info (default: "true")
  • info: Whether to show hosting info below the app (default: "true")
  • autoscroll: Whether to scroll to output after prediction (default: "false")
  • eager: Whether to load immediately on page load (default: "false")
  • theme_mode: Use "dark", "light", or "system" theme (default: "system")
Example with custom attributes:
<gradio-app
  space="gradio/Echocardiogram-Segmentation"
  eager="true"
  initial_height="0px"
></gradio-app>

iFrames

If you cannot add JavaScript to your website, use an iframe instead:
<iframe src="https://your-space-host.hf.space"></iframe>
If using iframes, you’ll probably want to add a fixed height attribute and set style="border:0;" to remove the border. If your app requires permissions (webcam, microphone), provide them using the allow attribute.
Make sure your website’s CSS isn’t so general that it affects the embedded Gradio app. Element selectors like header { ... } and footer { ... } are most likely to cause styling issues.