mirror of
https://github.com/gradio-app/gradio.git
synced 2024-12-27 02:30:17 +08:00
a44f8f7780
* remove required tag from kwargs * placeholder for missing docstrings * fix alignment issues in reload guide * added documentation * added doc to column Co-authored-by: Abubakar Abid <abubakar@huggingface.co>
103 lines
4.8 KiB
Markdown
103 lines
4.8 KiB
Markdown
# Developing Faster with Auto-Reloading
|
|
|
|
**Prerequisite**: This Guide requires you to know about Blocks. Make sure to [read the Guide to Blocks first](/introduction_to_blocks).
|
|
|
|
<span id="advanced-features"></span>
|
|
|
|
## Why Auto-Reloading?
|
|
|
|
When you are building a Gradio demo, particularly out of Blocks, you may find it cumbersome to keep re-running your code to test your changes.
|
|
|
|
To make it faster and more convenient to write your code, we've made it easier to "reload" your Gradio apps instantly when you are developing in a **Python IDE** (like VS Code, Sublime Text, PyCharm, or so on) or generally running your Python code from the terminal. We've also developed an analogous "magic command" that allows you to re-run cells faster if you use **Jupyter Notebooks** (or any similar environment like Colab).
|
|
|
|
This short Guide will cover both of these methods, so no matter how you write Python, you'll leave knowing how to build Gradio apps faster.
|
|
|
|
## Python IDE Reload 🔥
|
|
|
|
If you are building Gradio Blocks using a Python IDE, your file of code (let's name it `app.py`) might looks something like this:
|
|
|
|
```python
|
|
import gradio as gr
|
|
|
|
with gr.Blocks() as demo:
|
|
gr.Markdown("# Greetings from Gradio!")
|
|
inp = gr.Textbox(placeholder="What is your name?")
|
|
out = gr.Textbox()
|
|
|
|
inp.change(fn=lambda x: f"Welcome, {x}!",
|
|
inputs=inp,
|
|
outputs=out)
|
|
|
|
if __name__ == "__main__":
|
|
demo.launch()
|
|
```
|
|
|
|
The problem is that anytime that you want to make a change to your layout, events, or components, you have to close and rerun your app by writing `python app.py`.
|
|
|
|
Instead of doing this, you can run your code in **reload mode** by changing 1 word: `python` to `gradio`:
|
|
|
|
In the terminal, run `gradio app.py`. That's it!
|
|
|
|
Now, you'll see that after you'll see something like this:
|
|
|
|
```bash
|
|
Launching in *reload mode* on: http://127.0.0.1:7860 (Press CTRL+C to quit)
|
|
|
|
Watching...
|
|
|
|
WARNING: The --reload flag should not be used in production on Windows.
|
|
```
|
|
|
|
The important part here is the line that says `Watching...` What's happening here is that Gradio will be observing the directory where `app.py` file lives, and if the file changes, it will automatically rerun the file for you. So you can focus on writing your code, and your Gradio demo will refresh automatically 🥳
|
|
|
|
⚠️ Now, there is one important thing to keep in mind when use the reload mode: Gradio specifically looks for a Gradio Blocks/Interface demo called `demo` in your code. If you have named your demo something else, you can pass that as the 2nd parameter in your code, like this: `gradio app.py my_demo`
|
|
|
|
As a small aside, this auto-reloading happens if you change your `app.py` source code or the Gradio source code. Meaning that this can be useful if you decide to [contribute to Gradio itself](https://github.com/gradio-app/gradio/blob/main/CONTRIBUTING.md) ✅
|
|
|
|
## Jupyter Notebook Magic 🔮
|
|
|
|
What about if you use Jupyter Notebooks (or Colab Notebooks, etc.) to develop code? We got something for you too!
|
|
|
|
We've developed a **magic command** that will create and run a Blocks demo for you. To use this, load the gradio extension at the top of your notebook:
|
|
|
|
`%load_ext gradio`
|
|
|
|
Then, in the cell that you are developing your Gradio demo, simply write the magic command **`%%blocks`** at the top, and then write the layout and components like you would normally:
|
|
|
|
```py
|
|
%%blocks
|
|
|
|
import gradio as gr
|
|
|
|
gr.Markdown("# Greetings from Gradio!")
|
|
inp = gr.Textbox(placeholder="What is your name?")
|
|
out = gr.Textbox()
|
|
|
|
inp.change(fn=lambda x: f"Welcome, {x}!",
|
|
inputs=inp,
|
|
outputs=out)
|
|
```
|
|
|
|
Notice that:
|
|
|
|
* You do not need to put the boiler plate `with gr.Blocks() as demo:` and `demo.launch()` code — Gradio does that for you automatically!
|
|
|
|
* Every time you rerun the cell, Gradio will re-launch your app on the same port and using the same underlying web server. This means you'll see your changes *much, much faster* than if you were rerunning the cell normally.
|
|
|
|
Here's what it looks like in a jupyter notebook:
|
|
|
|
|
|
|
|
🪄 This works in colab notebooks too! [Here's a colab notebook](https://colab.research.google.com/drive/1jUlX1w7JqckRHVE-nbDyMPyZ7fYD8488?authuser=1#scrollTo=zxHYjbCTTz_5) where you can see the Blocks magic in action. Try making some changes and re-running the cell with the Gradio code!
|
|
|
|
The Notebook Magic is now the author's preferred way of building Gradio demos. Regardless of how you write Python code, we hope either of these methods will give you a much better development experience using Gradio.
|
|
|
|
--------
|
|
|
|
## Next Steps
|
|
|
|
Now that you know how to develop quickly using Gradio, start building your own!
|
|
|
|
If you are looking for inspiration, try exploring demos other people have built with Gradio, [browse public Hugging Face Spaces](http://hf.space/) 🤗
|
|
|