app.py

import gradio as gr

def add_text(history, text):
    history = history + [(text, None)]
    return history, ""

def add_file(history, file):
    # 判断file的类型，如果是str
    if isinstance(file, str):
        history = history + [((file,), None)]
    else:
        history = history + [((file.name,), None)]
    return history

def bot(history, state):
    response = "**That's cool!**"
    history[-1][1] = response
    state.append(123)
    return history, state

# my_theme = gr.Theme.from_hub("gradio/dracula_revampe")

with gr.Blocks() as demo:
    
    state = gr.State(value=[])

    with gr.Row():
    
        with gr.Column(scale=0.85):
            chatbot = gr.Chatbot([], elem_id="chatbot").style(height=900)
            with gr.Row():
                with gr.Column(scale=0.85):
                    txt = gr.Textbox(
                        show_label=False,
                        placeholder="Enter text and press enter, or upload an image",
                    ).style(container=False)
                    gr.Examples(examples=["输出图中所有K-V", "给出上图分类结果", "输出图中所有主体信息"], inputs=txt)
                with gr.Column(scale=0.15, min_width=0):
                    btn = gr.UploadButton("📁", file_types=["image", "video", "audio"])
            
        # 引入图片样例，点击按钮后，图片会被上传到聊天框中，图片被当作一个文件对象被传入到add_file函数中，然后add_file函数会将图片的路径传入到chatbot中
        
        with gr.Column(scale=0.15):
            with gr.Row(max_height=20):
                example1 = gr.Image("images/test.png", interactive=False).style(width=100, height=100)
                example1_path = gr.Text("images/test.png", interactive=False, visible=False)
                example1ImageButton = gr.Button("Try it!")
                example1ImageButton.click(add_file, [chatbot, example1_path], [chatbot, ]).then(bot, [chatbot, state],  [chatbot, state])
                
            with gr.Row(max_height=20):
                example2 = gr.Image("images/test.png", interactive=False).style(width=100, height=100)
                example2_path = gr.Text("images/test.png", interactive=False, visible=False)
                example2ImageButton = gr.Button("Try it!")
                example2ImageButton.click(add_file, [chatbot, example1_path], [chatbot, ]).then(bot, [chatbot, state],  [chatbot, state])
            
            with gr.Row(max_height=20):
                example2 = gr.Image("images/test.png", interactive=False).style(width=100, height=100)
                example2_path = gr.Text("images/test.png", interactive=False, visible=False)
                example2ImageButton = gr.Button("Try it!")
                example2ImageButton.click(add_file, [chatbot, example1_path], [chatbot, ]).then(bot, [chatbot, state],  [chatbot, state])
            
            with gr.Row(max_height=20):
                example2 = gr.Image("images/test.png", interactive=False).style(width=100, height=100)
                example2_path = gr.Text("images/test.png", interactive=False, visible=False)
                example2ImageButton = gr.Button("Try it!")
                example2ImageButton.click(add_file, [chatbot, example1_path], [chatbot, ]).then(bot, [chatbot, state],  [chatbot, state])
            
            with gr.Row(max_height=20):
                example2 = gr.Image("images/test.png", interactive=False).style(width=100, height=100)
                example2_path = gr.Text("images/test.png", interactive=False, visible=False)
                example2ImageButton = gr.Button("Try it!")
                example2ImageButton.click(add_file, [chatbot, example1_path], [chatbot, ]).then(bot, [chatbot, state],  [chatbot, state])
            
    
    
        

    txt.submit(add_text, [chatbot, txt], [chatbot, txt]).then(
        bot, [chatbot, state],  [chatbot, state]
    )
    btn.upload(add_file, [chatbot, btn], [chatbot]).then(
        bot, [chatbot, state],  [chatbot, state]
    )

demo.launch()