Gradio快速入门_gradio教学

PS：Gradio需要Python 3.8或更高版本，pip install gradio

• 一、Gradio提供了两种构建web app的方法：
  • Interface和ChatInterface，提供了高级抽象。
    • 1. demo，使用gr核心类--Interface，可以用用户界面包装任何Python函数

    • import gradio as gr
       
      def greet(name):
          return "Hello " + name + "!"
       
      demo = gr.Interface(fn=greet, inputs="text", outputs="text")
          
      demo.launch()   
      

    • ​

    • 2. gr.Interface类，主要有三个参数
      • fn：包装UI的函数
      • inputs：输入component(s)(e.g. "text", "image" or "audio")
      • output：输出component(s)(e.g. "text", "image" or "label")
    • 3. 通过gr组件类的属性自定义组件

      • import gradio as gr
         
        def greet(name):
            return "Hello " + name + "!"
         
        demo = gr.Interface(
            fn=greet,
            inputs=gr.Textbox(lines=2, placeholder="Name Here..."),
            outputs="text",
        )
        demo.launch()
        

        ​

    • 4. 多输入输出：
      • 用列表传递输入输出组件，输入列表中的每个组件依次对应函数的一个参数。输出列表中的每个组件依次对应于函数返回的一个值。

        import gradio as gr
         
        def greet(name, is_morning, temperature):
            salutation = "Good morning" if is_morning else "Good evening"
            greeting = f"{salutation} {name}. It is {temperature} degrees today"
            celsius = (temperature - 32) * 5 / 9
            return greeting, round(celsius, 2)
         
        demo = gr.Interface(
            fn=greet,
            inputs=["text", "checkbox", gr.Slider(0, 100)],
            outputs=["text", "number"],
        )
        demo.launch()
        

        ​

    • 5. 其他组件：Gradio支持多种类型的组件，如Image、DataFrame、Video或Label
      • Image：当使用Image组件作为输入，函数将接收形状为(height, width, 3)的NumPy数组，3表示RGB值。图像作为输出也是NumPy数组。

        import numpy as np
        import gradio as gr
         
        def sepia(input_img):
            sepia_filter = np.array([
                [0.393, 0.769, 0.189], 
                [0.349, 0.686, 0.168], 
                [0.272, 0.534, 0.131]
            ])
            sepia_img = input_img.dot(sepia_filter.T)
            sepia_img /= sepia_img.max()
            return sepia_img
         
        demo = gr.Interface(sepia, gr.Image(shape=(200, 200)), "image")
        demo.launch()
        

        ​

      • 可以使用type=关键字参数设置组件使用的数据类型。例如，如果想让函数接受一个图像文件路径，而不是NumPy数组，则输入的image组件：gr.Image(type="filepath", shape=...)
    • 6. 高级类gr.ChatInterface，类似于gr.Interface，专为聊天机器人ui设计。
      • 该类包装的函数应接受两个参数：message和history(参数命名任意，但必须按照这个顺序)
        • message：用户输入的STR
        • history：列表的列表，对话记录。每个列表由两个str组成，[ 用户输入，bot响应 ]。
        • 函数应返回单个字符串响应，是bot对用户输入消息的响应。

          import random
          import gradio as gr
           
          def random_response(message, history):
              return random.choice(["Yes", "No"])
           
          demo = gr.ChatInterface(random_response)
           
          demo.launch()
          

          ​

  • Blocks
    • 1. 是一个低级API，设计具有更灵活布局（自定义）和复杂数据流的web应用程序。
      • 用with子句创建block，在子句中创建的任何组件都会自动添加到app中。
      • 组件默认按照创建的顺序垂直显示在app中。(可自定义布局)
      • event-listener API ( 例如click ) 与Interface一样，接受一个Python函数和输入输出组件。

        import gradio as gr
         
        def greet(name):
            return "Hello " + name + "!"
         
        with gr.Blocks() as demo:
            name = gr.Textbox(label="Name")
            output = gr.Textbox(label="Output Box")
            greet_btn = gr.Button("Greet")
            greet_btn.click(fn=greet, inputs=name, outputs=output, api_name="greet")
           
         
        demo.launch()
        

        ​

    • 2. 自定义布局
      • with gr.Tab分页， with gr.Accordion可折叠框，with gr.Row()行内显示

      • import numpy as np
        import gradio as gr
         
         
        def flip_text(x):
            return x[::-1]
         
         
        def flip_image(x):
            return np.fliplr(x)
         
         
        with gr.Blocks() as demo:
            gr.Markdown("Flip text or image files using this demo.")
            with gr.Tab("Flip Text"):
                text_input = gr.Textbox()
                text_output = gr.Textbox()
                text_button = gr.Button("Flip")
            with gr.Tab("Flip Image"):
                with gr.Row():
                    image_input = gr.Image()
                    image_output = gr.Image()
                image_button = gr.Button("Flip")
         
            with gr.Accordion("Open for More!"):
                gr.Markdown("Look at me...")
         
            text_button.click(flip_text, inputs=text_input, outputs=text_output)
            image_button.click(flip_image, inputs=image_input, outputs=image_output)
         
        demo.launch()