Desarrollo y Prototipado de la Aplicación Empresarialparte 2

Creating graphical interfaces for artificial intelligence products may seem like a complex task that requires advanced frontend development skills. However, with tools such as Gradio, it is possible to transform AI functionalities into interactive visual applications with just a few lines of code. This library allows us to focus on what is really important: the logic of our models, while the visual components are generated automatically.

What is Gradio and how does it facilitate the creation of interfaces?

Gradio is a library that allows us to create graphical interfaces for artificial intelligence applications quickly and easily. Its main advantage is that it provides us with pre-designed components such as buttons, text fields and viewers, without the need to worry about design details such as colors, borders or styles.

To start using Gradio, we must first install it:

# Installing Gradiopip install gradio.

Once installed, we can import it into our code:

import gradio as gr

Gradio main components

Gradio offers several components that we can use to build our interface:

• Markdown: To add titles, subtitles and formatted text.
• Textbox: For text input and output
• Button: To execute actions
• File: To load files as CSVs
• Image: For displaying images as graphics or word clouds
• JSON: For displaying structured data

These components are organized by blocks, which allow us to structure our application in a logical and visually appealing way.

How to structure an application with Gradio?

The basic structure of a Gradio application is based on blocks containing different components. Let's see how we can create an application for analyzing Mercado Libre reviews:

# interface creationwith gr.Blocks(theme="citrus") as demo: gr.Markdown("## Analysis application")    
 with gr.Tabs(): with gr.TabItem("Text analysis"): gr.Markdown("### Enter a text review") input_text = gr.Textbox(label="Review text",  placeholder="Write the review here") sentiment_output = gr.JSON(label="Sentiment") entities_output = gr.JSON(label="Entities") analyze_button = gr.Button("Analyze text")            
 analyze_button.click(  fn=analyze_text,  inputs=input_text,  outputs=[sentiment_output, entities_output] )            
 with gr.TabItem("CSV parse"): file_input = gr.File(label="Load CSV") sentiment_csv_output = gr.JSON(label="Sentiment parse") entities_csv_output = gr.JSON(label="Entity parse") wordcloud_output = gr.Image(label="Word cloud") analyze_csv_button = gr.Button("Analyze CSV")            
 analyze_csv_button.click(  fn=analyze_csv,  inputs=file_input,  outputs=[sentiment_csv_output, entities_csv_output, wordcloud_output] )

In this example, we have created an application with two tabs:

1. Text Analysis: allows the user to enter a review and get sentiment and entity analysis.
2. CSV Analysis: Allows the user to upload a CSV file with multiple reviews and get aggregated analysis, including a word cloud.

Customization with themes

Gradio offers different themes to customize the look and feel of our application. In the example, we use the "citrus" theme that provides yellow colors that match Mercado Libre's visual identity:

with gr.Blocks(theme="citrus") as demo: # Application content.

Other available themes include variants with pink, light blue and green colors, allowing us to adapt the interface to different aesthetic needs.

How to connect the interface with our functionalities?

The real magic of Gradio is in how it connects the visual components with our processing functions. This is achieved through the click() method of the buttons:

analyze_button.click(  fn=analyze_text,  inputs=input_text,  outputs=[sentiment_output, entities_output])

This code indicates that when the analyze_button is clicked, the analyze_text function will be executed, taking as input the value of input_text and displaying the results in sentiment_output and entities_output.

It is important to note that a single function can generate multiple outputs, as we see in the example where analyze_text returns both sentiment and entities analysis.

Launching the application

Once our interface is configured, we can launch it with:

demo.launch(debug=True).

The debug=True parameter is especially useful during development, as it allows us to see additional errors and messages in the console.

When we execute this code, Gradio provides us with a temporary URL that will be available for 72 hours, allowing us to access our application from any device, as long as our program is still running.

If clicking on the URL does not bring up the graphical interface, a common solution is to stop the process and relaunch the application with demo.launch().

The application can be used directly from the development environment (such as Google Colab) or in full screen by accessing the link provided. However, it is important to remember that if we close the notebook or stop the execution, the URL will stop working.

Gradio allows us to quickly transform our AI functionalities into interactive visual products, facilitating the demonstration and use of our models. Have you used Gradio for any project? Share your experience in the comments and tell us what kind of interfaces you have created with this tool.