gradio学习代码部分

复制代码
import gradio as gr
# 创建 Block 界面(更灵活的界面布局)
with gr.Blocks() as demo:
    # 标题(可选,让界面更好看)
    gr.Markdown("# 最简单的 Gradio 输入框")
    # 文本输入框
    gr.Textbox(label="输入框", placeholder="请输入内容")
# 启动 Web 界面
if __name__ == '__main__':
    demo.launch()
复制代码
#gr.Button => 创建一个按钮,可以用于绑定点击事件
import gradio as gr
# 创建Gradio Blocks应用
with gr.Blocks() as demo:
    # 创建一个按钮
    gr.Button("提交")
if __name__ == '__main__':
    demo.launch()
复制代码
# gr.slider => 创建一个滑块
# 属性:
# minimum => 最小值
# maximum => 最大值
# value => 默认值
# label => 选择数值
import gradio as gr
def update_output(value):
    return f"您选择的数值是:{value}"
# 创建Gradio Blocks应用
with gr.Blocks() as demo:
    # 创建一个滑块
    slider = gr.Slider(minimum=0, maximum=100, value=50, label="选择数值")
# 创建输出文本框
    output = gr.Textbox(label="结果")
    # 绑定滑块变化事件
    slider.change(update_output, inputs=slider, outputs=output)
if __name__ == '__main__':
    demo.launch()
复制代码
#下拉框
import gradio as gr

# 创建Gradio Blocks应用
with gr.Blocks() as demo:
    dropdown = gr.Dropdown(choices=["选项1", "选项2", "选项3"], label="选择选项")
    output = gr.Textbox(label="结果")
    dropdown.change(lambda x: f"您选择的选项是:{x}", inputs=dropdown, outputs=output)
if __name__ == '__main__':
    demo.launch()
复制代码
#文件上传
import gradio as gr

# 创建Gradio Blocks应用
with gr.Blocks() as demo:
    gr.File(label="上传文件",file_types=["image", "video", "audio", "text", "pdf"])
    
if __name__ == '__main__':
    demo.launch()
复制代码
#gradio聊天机器人
import gradio as gr

# 创建Gradio Blocks应用
with gr.Blocks() as demo:
    gr.Chatbot(label="聊天机器人")
    gr.Textbox(label="输入")
    gr.Button("提交")
    gr.Button("清空")

if __name__ == '__main__':
    demo.launch()
复制代码
#row column
import gradio as gr

# 创建Gradio Blocks应用
with gr.Blocks() as demo:
    with gr.Row():
        # 左边的列,占4成的比例
        with gr.Column(scale=4):
            gr.Textbox(label="左边的输入框")
        
        # 右边的列,占1成比例  
        with gr.Column(scale=1):
            gr.Slider(minimum=0, maximum=100, value=50, label='右边滑块')

if __name__ == '__main__':
    demo.launch()
复制代码
#click事件
import gradio as gr
def onbutton_output(value):
    return f"您点击的数值是:{value}"
with gr.Blocks() as demo:
    # 创建一个文本框,用于接受用户的输入
    input_text = gr.Textbox(label="输入")
    # 创建按钮
    submit_button = gr.Button("提交")
    # 创建一个文本框,用于显示结果
    output_text = gr.Textbox(label="输出")
    # 事件 => 点击事件 => click
    submit_button.click(fn=onbutton_output, inputs=input_text, outputs=output_text)
if __name__ == '__main__':
    demo.launch()
复制代码
#change事件
import gradio as gr
# 创建Gradio Blocks应用
with gr.Blocks() as demo:
    dropdown = gr.Dropdown(choices=["选项1", "选项2", "选项3"], label="选择选项")
    output = gr.Textbox(label="结果")
    dropdown.change(lambda x: f"您选择的选项是:{x}", inputs=dropdown, outputs=output)
if __name__ == '__main__':
    demo.launch()
复制代码
#练习1
def greet(name, age):
    return f"你好,{name},你今年{age}岁了"

with gr.Blocks() as demo:
    # 创建一行,用于放置输入的组件
    with gr.Row():
        # 姓名的文本框
        name_input = gr.Textbox(label="请输入您的名字")
        # 
        age_input = gr.Slider(minimum=0, maximum=100, label="请选择您的年龄", interactive=True)
        # 创建一个按钮,用于触发事件
        submit_button = gr.Button("提交")
        outputs=gr.Textbox(label="输出")
        submit_button.click(fn=greet, inputs=[name_input, age_input], outputs=outputs)

if  __name__ == '__main__':
    demo.launch()
复制代码
#练习2
import gradio as gr

# 定义一个水果的列表
fruit_choices = ["🍎", "🍊", "🍇", "🍌"]

# 编写函数
def display_choice(select_fruit):
    return f"您选择的水果是 => {select_fruit}"

with gr.Blocks() as demo:
    # 添加一个标题 => HTML标签
    gr.HTML("<h1 align='center'>请选择您的水果</h1>")
    
    # 创建一个行布局
    with gr.Row():
        # 创建一个下拉框,提供让用户进行选择
        fruit_dropdown = gr.Dropdown(
            choices = fruit_choices,
            label = "请选择一种水果",
            interactive = True,
            value = fruit_choices[2]
        )
    
    # 创建文本框,用于用户选择的水果的显示
    output = gr.Textbox(label = "您选择的水果是")
    
    # 编写函数的绑定
    fruit_dropdown.change(fn = display_choice, inputs = fruit_dropdown, outputs = output)

if __name__ == "__main__":
    demo.launch()
复制代码
import gradio as gr

def response(message, chat_history):
    if message.strip():
        bot_response = f"我已经收到您的消息:'{message}'"
        # 新版格式:添加两个字典,分别代表用户和助手的消息
        chat_history.append({"role": "u。ser", "content": message})
        chat_history.append({"role": "assistant", "content": bot_response})
    return chat_history, ""

with gr.Blocks() as demo:
    gr.HTML("<h1 align='center'>欢迎使用聊天机器人</h1>")
    
    chatbot = gr.Chatbot(
        show_label=False, 
        height=400,
        placeholder="聊天记录将显示在这里..."
    )
    
    with gr.Row():
        user_input = gr.Textbox(
            placeholder="请在这里输入您的消息...", 
            show_label=False,
            scale=4,
            lines=2
        )
        submit_button = gr.Button("提交", scale=1)
    
    submit_button.click(
        fn=response,
        inputs=[user_input, chatbot],
        outputs=[chatbot, user_input]
    )
    
    user_input.submit(
        fn=response,
        inputs=[user_input, chatbot],
        outputs=[chatbot, user_input]
    )

if __name__ == '__main__':
    demo.launch()
相关推荐
IT_陈寒4 分钟前
Redis内存暴涨,没想到是AOF重写捣的鬼
前端·人工智能·后端
ikoala5 分钟前
让 Codex 自己查账:一个省 token 的小技巧
前端·后端·ai编程
ikoala15 分钟前
AI 写页面像说明书,修 Bug 像贴膏药?把这两句话写进 AGENTS.md
前端·javascript·ai编程
Penge66631 分钟前
《Go 后端开发者学 TypeScript:ES Module了解》
javascript
Penge66635 分钟前
《Go 后端开发者学 TypeScript:从零搭建与运行》
javascript
这个昵称不容易1 小时前
SpringBoot「衣依」服装销售平台:144个Java文件180个接口,从挑衣服到收货评价整条链路都在
java·springboot·毕设
Penge6662 小时前
《Go 后端开发者学 TypeScript:keyof关键字》
javascript
计算机毕设定制辅导-无忧学长2 小时前
《基于微信小程序的居家医疗陪护预约系统设计与实现》
java·spring boot·微信小程序·uniapp·居家医疗陪护预约系统
Penge6662 小时前
《Go 后端开发者学 TypeScript:extends关键字》
javascript
张张123y2 小时前
DSH 插件调试避坑:client.js 设置面板、热重载与高频报错排查表
开发语言·javascript·人工智能·开源·ecmascript·后端开发·ai agent