6 - Creating a Simple UI with Gradio
Kriti walks through installing Gradio, connecting it to an n8n webhook for real-time brand analysis, and deploying the finished app to Hugging Face Spaces.
Once an AI agent's logic works behind the scenes, someone still has to look at it and use it, which means it needs an actual interface. This walkthrough covers building that interface with Gradio, as an alternative to Streamlit, for a brand intelligence agent called Madison, and pushing the finished app live on Hugging Face Spaces so anyone can reach it through a URL.
Why Gradio for an AI-driven demo
Gradio and Streamlit will both work for a project like this, but Gradio has some specific advantages for AI applications: a simpler API for common AI interfaces, a design built specifically around AI and ML models, and easy integration with Hugging Face Spaces for deployment and hosting. Which one to use comes down to what the tool actually does. A tool focused on text analysis, image processing, or classification tends to be particularly well suited to Gradio.
Installing Gradio and getting a first interface running
Getting started is a single terminal command: pip install gradio. From there, creating a Python file and writing a basic interface definition, then launching it, is enough to produce a working local URL and a very basic interface visible in the browser. That bare-bones version confirms the setup works before any real functionality gets added.
Building the full interface and wiring it to n8n
The more complete version follows the same steps used in a Streamlit build: identify the project's main functionality, then create the appropriate inputs and outputs, and connect the underlying logic to the n8n workflow driving it. In practice, that means adding the webhook URL from the n8n webhook node into the Python file, which is the step that actually links the interface to the automation running behind it. From there, the UI displays the relevant metrics, in this example brand analysis for OpenAI pulled from Reddit, laid out with rows and columns to form a simple dashboard. With the n8n workflow executed and the Gradio app refreshed, entering a brand name and running the analysis produces the live output, in this case the top 50 trending posts about the brand.
Deploying to Hugging Face Spaces
Getting the app off a local machine and onto a public URL means deploying to Hugging Face Spaces. The code needs to live in a GitHub repository first, including the Python file, the n8n workflow JSON file, and a requirements.txt file listing every dependency the project needs. From Hugging Face, creating a new Space means naming it, adding a short description, confirming it's a Gradio space, and setting it public. Files can be uploaded directly from the repository, and the Space then builds automatically, with logs visible while it does, typically taking a couple of minutes to finish. Once deployed, the resulting URL is reachable by anyone on the internet, and running the analysis through that live version works the same way it did locally.
What actually causes deployment errors
Two things account for most of the errors encountered during deployment. First, Hugging Face treats a file named app.py as the entry point, so any Python file with a different name needs to be renamed before it will run correctly. Second, the connected n8n workflow needs to be set to active; if it isn't running, the Gradio interface has nothing live to call.
Key takeaways
- Gradio is well suited to AI-driven demos because of its simple API and native integration with Hugging Face Spaces.
- A first working interface takes just a
pip install gradioand a short Python script with an interface definition. - Connecting the interface to real functionality means pasting the n8n webhook URL into the Python file.
- Deployment to Hugging Face Spaces requires the code in a GitHub repository, including a requirements.txt file, then uploading the files into a new Space.
- Hugging Face requires the entry-point file to be named app.py, regardless of what it was called locally.
- The connected n8n workflow has to be active for the deployed interface to return live results.
Who this is for
This is for anyone building a Madison brand intelligence agent who needs a working front end, and for developers deciding between Gradio and Streamlit for an AI project more generally. It's part of the INFO7375 Branding & AI course series.
Full transcript(auto-generated, with timestamps)
[0:00]Hello everyone, welcome to our final Madison framework tutorial. I'm Kriti and today we are exploring an alternative way to create a user interface for your Madison agent using Gradio. This is another excellent option for your project, especially well-suited for AI applications. While Streamlit is an excellent option, Gradio has some unique advantages for AI applications. It has very simpler API for common AI interfaces and it is specifically designed for AI and ML models. It also has very easy integration with Hugging Face Spaces for easy deployment and hosting. So, for your project, you can either work with Streamlit or Gradio. Both will work well. Choose the one that best fits your
[0:43]Specific Madison tool. If your tool focuses on text analysis, image processing, or classification, Gradio might be particularly suitable. Let's get Gradio installed and set up. These are the steps to do it. Let's do it one by one. First, open your terminal or command prompt and type this command. pip install Gradio This should install Gradio within minutes. And next step is creating a Python file. So, go to our code editor and uh yeah, this is where I have my project. Basically, I have the JSON file from N8N, the same project. I'm building on top of my previous project. And this is the Python file that I have
[1:24]Created, Madison Gradio app. I have added a basic starter code. So, it's trying to create a interface a demo interface and launching this demo interface. And I can run this Python file with a command python and my file name Madison Gradio app. Running it and this should provide me a URL. Yes, I have it and let me open it in my browser. Yes, now you can see a very basic interface in your browser. Now, let's build a more complete interface for your Madison agent. The steps here are very similar to what I demonstrated in the Streamlit tutorial. First, you need to identify your project's main functionality and create
[2:04]Some appropriate inputs and outputs. Later, you also need to connect your medicine logic from the main N8N. So, here is an example of my project. Back to my code editor, and I have updated my Python file now. So, first I have added the webhook URL from my N8N's webhook node. This is very important step. And next, I have a basic UI where I'm displaying some of the metrics from my project. So, I'm doing brand analysis for OpenAI for the brand OpenAI from Reddit, right? So, I'm trying to display these outputs, and I'm also trying to create a simple dashboard. So, I have all the appropriate rows and columns
[2:44]Created for this. So, this is the code for that UI. Okay, I'm running this code now with the same command, Python and file name. It's up, and back to N8N, and let's execute this workflow. Now, back to Gradio, and let me refresh. Yes. Now, you can see a bit more complex interface with all the inputs and visualizing the output. Let me also run this. Oh, yeah. Input, I'm giving my brand name, which is OpenAI, and run analysis. It's processing all the data, and yes, there is a top 50 trending posts from Reddit about the brand OpenAI. Okay, so now we have your project up and
[3:30]Running in your local. Next, you need a public URL. Let's use Hugging Face Spaces to deploy your project. Create a GitHub repository with the code. So, I have pushed all my code on my project code with a JSON file and Python file, along with the requirements.txt file. So, this file basically contains all the dependencies required for my project. Next, go to huggingface.co. So, I'm already logged in. If you're new, create a new account and then log in. So, and this is how it looks once you're logged in. Click on new, create a new space. And let's fill out some details here. The space name I'm uh giving my project
[4:15]Name, which is uh brand analysis. A short description, and yes, it's a Gradio space, so I'm keeping it the same. And yes, public. Click on create space. Okay, so a new space has been created, and now you can either connect your GitHub or upload files. So, click on files. I am going to be uploading my files. Uh yes, this is from my repository and Python file, txt file, and also the JSON. Yes, go ahead and add these files. Okay, now Now you can see that it is building, and um yeah, you can also see the logs while it is building. It's going to take like
[5:08]A couple of minutes. Let's wait till then. Okay, so the deployment is now complete, and this is how the UI looks. And this is the URL. Anybody on the internet can see your project with the help of this URL. And let me also run this by clicking on run analysis. It's processing, and yes, you can see the top 50 results along with the dashboard and a chart. The key considerations here are you need to change the file name to app.py, because Hugging Face considers this as the entry point. So, if you have your file named as anything else, please change it to app.py. And also
[5:51]Uh set your N8N workflow to active, so it's up and running. And that should fix some of the errors. So, these are the errors that I encountered while deploying. And uh yeah, I hope this was helpful. You have now learned how to create a simple user interface with Gradio as an alternative to Streamlit. Both options are excellent for your project. Choose the one that best fits your specific medicine agent's functionality. Remember, the goal is to make your medicine tool accessible to non-technical users. Focus on clarity and usability over complex features. Good luck with your project. Thank you so much for watching this video. I hope this was helpful.
More from INFO7375 Branding & AI
11:01What Do Madison Fellows Do? | Building AI-Powered Marketing Intelligence Systems | Professor Bear
6:495 - Building a Web UI for Your Madison Agent with Streamlit
4:00Madison: Open Source AI Marketing Framework | Join the Project
6:124 - Scaling & Testing Your n8n Workflow
4:513 - Datacleaning n8n
2:58