Giới thiệu về Gradio Python - Cơ bản

Python là một ngôn ngữ rất mạnh mẽ, hỗ trợ nhiều thư viện và framework phổ biến cho việc phát triển các dự án AI, machine learning. Trong số đó, Gradio là một thư viện Python cho phép bạn nhanh chóng tạo ra UI cho app của mình.

Trong bài viết này, chúng ta sẽ tìm hiểu về Gradio, cách sử dụng cơ bản và cách chia sẻ dự án đã hoàn thành với người khác nha.

Gradio có gì hay ho?

Trong các dự án AI, phần khó nhất... đương nhiên là huấn luyện model, đảm bảo kết quả đưa ra là chuẩn xác. Tuy nhiên, có một phần không kém phần quan trọng, đó là xây dựng UI để người dùng có thể tương tác, thử nghiệm với mô hình của bạn.

Ví dụ, bạn làm app nhận diện hình ảnh, thì phải code giao diện để người dùng có thể upload hình ảnh, sau đó hiển thị kết quả nhận diện. Hoặc bạn code chatbot thì phải có giao diện để người dùng nhập câu hỏi và hiển thị câu trả lời. Điều này không phải là việc dễ dàng, đặc biệt nếu bạn không rành về web, hoặc không phải front-end dev.

Gradio là một thư viện Open Source rất kì diệu, giúp bạn giải quyết những khó khăn này.

• Tạo giao diện nhanh chóng và dễ dàng: Chỉ với vài dòng code, bạn có thể tạo ra một giao diện web cho mô hình AI của mình. Bạn không cần viết dòng code HTML, CSS hay JavaScript nào, cũng không cần viết front-end/back-end luôn, chỉ cần viết code Python là đủ.
• Hỗ trợ nhiều loại input và output: Gradio hỗ trợ nhiều loại đầu vào và đầu ra khác nhau. Từ những thứ cơ bản như button/textbox/khung upload file... cho tới đầu ra phức tạp như video, audio, hình ảnh đều code được bằng Gradio cả
• Chia sẻ dễ dàng: Bạn có thể chia sẻ giao diện của mình với người khác thông qua một URL. Người dùng chỉ cần bấm vào và chạy luôn, không cần phải cài gì trong máy cả. Demo rất nhanh và tiện.

Map và các component khác	Chatbot UI

Optional (Học Python cơ bản và cài đặt VSCode)

Các bạn nào chưa dùng Python và chưa cài VSCode thì xem lại 2 video này nhé!

1. Tự học lập trình Python trong 10 phút

2. Hướng dẫn cài đặt VSCode

Cùng viết ứng dụng Gradio Hello World

Để hiểu rõ hơn về Gradio, chúng ta sẽ viết một ứng dụng Hello World đơn giản với Gradio.

Như thường lệ, các bạn có thể viết code local hoặc sử dụng Colab để chạy code một cách nhanh chóng nha!

Đầu tiên, chúng ta sẽ cài Gradio.

pip install gradio

import gradio as gr

def greet(name, intensity):
    return "Hello, " + name + "!" * int(intensity)

demo = gr.Interface(
    fn=greet,
    inputs=["text", "slider"],
    outputs=["text"],
)

demo.launch()

Ta sẽ được giao diện như trong hình. Đầu vào sẽ là một ô text để nhập tên, và một slider để chọn độ "intensity". Đầu ra sẽ là một ô text hiển thị kết quả.

Luồng của chương trình chạy như thế nào?

1. Khi bạn bấm vào nút Submit, gradio sẽ gọi hàm greet với tham số là name và intensity mà bạn chọn slider.
2. name và slider chính là giá trị bạn nhập vào ô text và slider.
3. Hàm greet trả về kết quả là 1 string Hello, hoang cute!!!!!!!!!!
4. string này sẽ được hiển thị ở khu output.

Giải thích thêm về class Interface

Chúng ta đã viết 1 cái web siêu đơn giản chỉ sau... 10 dòng code. Đó chính là sức mạnh của Gradio.

Một trong những class mạnh mẽ của gradio là Interface. Khi khởi tạo, Interface sẽ nhận vào các tham số như:

• def: Hàm mà bạn muốn chạy khi người dùng bấm vào nút Submit
• inputs: Một list chứa các loại input, đầu vào mà bạn người dùng nhập vào.
  • Ví dụ: text, slider, image, audio, video...
  • Thay vì dùng string, bạn cũng có thể dùng Gradio components như gr.Textbox(), gr.Image()
  • Các bạn có thể xem toàn bộ danh sách các components ở đây: https://www.gradio.app/docs/gradio/introduction
• outputs: Một list chứa các loại output mà bạn muốn hiển thị. Có thể là text, image, audio, video, tương tự như inputs.

Để hiểu rõ hơn và dễ customize, ta có thể sửa lại dự án vừa rồi như sau:

import gradio as gr

def greet(name, intensity):
    return "Hello, " + name + "!" * int(intensity)

demo = gr.Interface(
    fn=greet,
    inputs=[
        gr.Textbox(label="Tên của bạn"),
        gr.Slider(minimum=1, step=1, maximum=10, label="Số lần lập lại"),
    ],
    outputs=[
        gr.Textbox(label="Output của hàm greet")
    ],
)

demo.launch()

Cách chia sẻ dự án Gradio đã hoàn thành

Sau khi bạn đã tạo xong giao diện Gradio cho dự án của mình, bạn có thể chia sẻ nó với người khác thông qua một URL. Chỉ cần sửa dòng code cuối là được.

demo.launch(share=True)

Bạn có thể share URL này cho bạn bè, người thân cùng vào test thử app nha.

Gradio cung cấp một cách dễ dàng để triển khai giao diện của bạn lên một máy chủ và tạo ra một URL có thể truy cập từ bất kỳ đâu.

Tạm kết

Ở bài này, mình đã giới thiệu với các bạn về Gradio, một thư viện Python giúp tạo giao diện cho ứng dụng AI một cách nhanh chóng và dễ dàng.

Nếu chưa hiểu, bạn nhớ đọc lại code, sửa và chạy nhé. Vì bọn mình sẽ còn sử dụng nó nhiều trong những bài sau nữa.

Ở bài sau, mình sẽ hướng dẫn các bạn cách sử dụng Gradio trong dự án AI, làm một ứng dụng mô tả hình ảnh đơn giản nhé!

Tài nguyên học thêm về Gradio

• Trang chính thức của Gradio: https://gradio.app
• Tài liệu hướng dẫn sử dụng Gradio: https://gradio.app/docs
• Các ví dụ về ứng dụng Gradio: https://github.com/gradio-app/gradio
• Interface https://www.gradio.app/docs/gradio/interface

⭐ Source code (cho khoá Engineer): 01-python-gradio/01-gradio-basic.py