AI大模型技术——Gradio和提示工程（内含Dify API + Gradio的聊天小ai项目）

Adoretheall690

372人浏览 · 2026-05-19 00:07:18

Adoretheall690 · 2026-05-19 00:07:18 发布

一、Gradio是什么

1.介绍

Hugging Face 发布的开源 Python 包，可以为机器学习模型、API 或任意 Python 函数快速构建 demo 或web 应用，并且通过 Gradio 的内置共享功能可以快速生成对应的链接，而无需任何编程基础。
官方网站：https://www.gradio.app/ 官方文档
快速开始：https://www.gradio.app/guides/quickstart

2. 为什么要学习Gradio

直观演示你的模型、API、函数：需要图形化的界面，但又不太需要过多关心界面
快速部署和分享：只需要多添加一个参数 share=True，就会生成一个公共 URL（72 小时后过期），世界各地的人都可以访问
公共 URL 格式示例：https://a23dsf231adb.gradio.liveve（注：示例 URL 末尾多了一个e，正确格式应为 xxx.gradio.live）

例：

import gradio as gr

def chat(message, history):
    return "我收到了：" + message

demo = gr.ChatInterface(chat)
demo.launch()

二、提示工程

1. 什么是提示工程

提示工程（Prompt Engineering）是一项通过优化提示词（Prompt）和生成策略，从而获得更好的模型返回结果的工程技术。好的 Prompt 需要不断调优，说清楚自己到底想要什么，要具体！不要让机器去猜测太多。为了不让机器去猜测，我们就需要告诉细节。拥有一些技巧，灵活掌握，可以事半功倍。

2. 提示词的构成

指示（Instruction）：描述要让它做什么？
上下文（Context）：给出与任务相关的背景信息
例子（Examples）：给出一些例子，让模型知道怎么回复
输入（Input）：任务的输入信息
输出（Output Format）：输出的格式，想要什么形式的输出？

3. 常见的提示词方法

instruction = """根据下面的上下文回答问题。保持答案简短且准确"""
context = """Teplizumab起源于一个位于新泽西的药品公司"""
query = """OKT3最初是从什么来源提取的？"""
prompt = f"""{instruction} ### 上下文 {context} ### 问题: {query}"""

instruction（指令）：
告诉模型 “要做什么”：根据上下文回答问题，且答案要简短准确。
context（上下文）：
给模型提供参考信息：Teplizumab 起源于新泽西的一家药品公司。
query（问题 / 输入）：
用户的实际问题：OKT3 最初是从什么来源提取的？
prompt（最终拼接）：
用 Python 的 f-string 把三部分拼起来，形成一个完整的提示词

4. shot learning 样本学习

one-shot learning: 只给一个 example（示例）
few-shot learning: 多个examples（示例）
zero-shot learning: 不给任何 examples（示例）

5. Chain-of-Thought 思维链

定义：把一个复杂的任务，拆解成多个稍微简单的任务，让大语言模型分步来思考问题
提示词：小明有 20 个苹果，吃了两个，又买了 5
个，小明现在一共有多少苹果？
提示词：小明有 20 个苹果，吃了两个，又买了 5 个，小明现在一共有多少苹果，通过思维链 CoT
的方式来分析。
（类似于在提问ai时加上“请逐步思考”

三、Dify API + Gradio的聊天小ai项目

1.项目开发思路

1.1 明确原始需求

我想做一个AI聊天网页，
后端用Dify的免费AI，
前端用Python快速搭建

1.2 拆解需求 → 技术选型

需求拆解：                     技术选型：
┌──────────────────┐         ┌──────────────────┐
│ ① 网页聊天界面    │   →     │ Gradio            │
│                  │         │ (Python写网页,     │
│                  │         │  专为AI演示设计)    │
├──────────────────┤         ├──────────────────┤
│ ② 调用AI服务     │   →     │ Dify API          │
│                  │         │ (封装了智谱等模型,  │
│                  │         │  免费额度)          │
├──────────────────┤         ├──────────────────┤
│ ③ 前后端连接     │   →     │ requests库        │
│                  │         │ (Python发送HTTP)   │
└──────────────────┘         └──────────────────┘

1.3 数据流设计

浏览器                  Python                    Dify
┌──────┐             ┌──────────┐             ┌──────────┐
│ 用户  │  输入"你好"  │ Gradio   │  POST请求    │ Dify API │
│ 界面  │───────────→│ 界面组件  │───────────→│ 服务器   │
│      │             │          │             │          │
│      │             │ chat_    │             │ LLM模型  │
│      │             │ with_    │             │ (智谱等)  │
│      │             │ dify()   │             │          │
│      │             │          │             │          │
│      │  显示回复    │          │  JSON响应    │          │
│      │←───────────│          │←───────────——│          │
└──────┘             └──────────┘             └──────────┘

2. Dify平台操作详解

2.1 在Dify中新建应用

创建空白应用

2.2 配置AI模型

点击「模型提供商」下拉框
选择「智谱AI」（或其他免费提供商）
在「模型」下拉框选「GLM-4-Flash」
⚠️ 确保选的模型标注了"免费"
点击「保存」

2.3 编写提示词（Prompt）

告诉AI"你是谁"、“怎么回答”
相当于给AI的人设和规则

示例：
你是一个专业、友好的AI助手。
回答要简洁准确，使用中文。
如果不知道答案，诚实地告诉用户。

2.4 配置输入变量（可选）

什么时候需要输入变量？
想让用户选择回答风格
需要传入特定参数

1. 点击「开始节点」（工作流最前面的节点）
2. 点击「+ 添加变量」
3. 设置变量名、类型

例如：
┌────────────────────┐
│ 变量名: language   │
│ 类型: string       │
│ 默认值: "中文"     │
└────────────────────┘

如果定义了变量，Python代码中要传：

"inputs": {
    "language": "中文"  # 变量名必须和Dify中定义的一致
}

2.5 发布应用

配置完成后：

点击右上角「发布」按钮
确认发布
系统会生成 API 密钥

密钥的位置:(访问api)
拿到API密钥（app-XXXXXXXXXXXXXXXXXXXXXXXX）和API端点

3. 开发步骤(python)

3.1 确认Dify端可用

# 测试代码（先不写Gradio）
import requests

response = requests.post(
    "https://api.dify.ai/v1/chat-messages",
    headers={"Authorization": "Bearer 你的密钥"},
    json={"inputs": {}, "query": "测试", 
          "response_mode": "blocking", "user": "test"}
)
print(response.json())  # 看能不能拿到 answer

💡 关键思维：最小可行性测试
不要一上来就写完整代码，先用最简单的方式验证API能通，通了再加Gradio界面

3.2 设计函数签名

看Gradio文档，确认它需要什么样的函数

# Gradio的ChatInterface要求：
def 你的函数(message: str, chat_history: list) -> str:
    # message: 用户最新消息
    # chat_history: 对话历史
    # 返回值: 要显示的AI回复文本

💡 关键思维：先看框架要求
不要自己发明函数参数，去Gradio文档查ChatInterface的fn参数要求，按框架规定写函数签名

3.3 配置API地址

url = "https://api.dify.ai/v1/chat-messages"

3.4 配置请求头

headers = {
    "Authorization": "Bearer app-你的密钥",
    "Content-Type": "application/json"
}

📌 类比理解headers：

寄快递：
┌─────────────────────┐
│ 收件人：Dify服务器   │  ← url
│ 寄件人：app-xxx     │  ← Authorization
│ 内容类型：JSON文件   │  ← Content-Type
│                     │
│ 📦 包裹内容：        │  ← data
│ {query: "你好"}     │
└─────────────────────┘

你不贴寄件人信息（不传headers）
→ 快递拒收（401错误）

3.5 配置请求体

data = {
    "inputs": {},
    "query": message,
    "response_mode": "blocking",
    "user": "test_user"
}

inputs ✅ 必须字段名固定 Dify应用定义的输入变量
query ✅ 必须字段名固定用户的问题
response_mode ✅ 必须字段名固定 blocking或streaming
user ✅ 必须字段名固定用户标识

3.6 发送请求

response = requests.post(url, headers=headers, json=data, timeout=20)
#          ↑            ↑     ↑              ↑        ↑
#       库名.方法   地址  请求头(认证)   请求体(数据)  超时

3.7 解析响应

res_json = response.json()
"""
	# 服务器的响应是字符串（JSON格式）
response.text = '{"answer": "你好！", "event": "message"}'

# response.json() 把它变成Python字典
res_json = {"answer": "你好！", "event": "message"}

# 这样就能用字典的方式取值
res_json["answer"]  # "你好！"

"""
return res_json.get("answer", "出错")
#             ↑           ↑
#         要取的key    key不存在时的默认值
# 如果answer不存在 → 返回"出错"，程序正常运行

3.8 创建Gradio界面

demo = gr.ChatInterface(
    fn=chat_with_dify,                    # 处理函数
		# ✅ 正确：只传函数名，不加括号
    title="Dify+智谱免费AI",              # 网页标题
    description="纯国产、永久免费"         # 描述文字
)

3.9 启动服务

if __name__ == "__main__":
    demo.launch()
    # ① 启动本地Web服务器
	  # ② 默认地址：http://127.0.0.1:7860
    # ③ 自动在浏览器打开这个地址

3.10 完整函数

import gradio as gr
import requests

def chat_with_dify(message, chat_history):
    url = "https://api.dify.ai/v1/chat-messages"
    headers = {
        "Authorization": "Bearer app-AbgmfTKdiuA31XWkp5dya2vy",
        "Content-Type": "application/json"
    }
    data = {
        "inputs": {},
        "query": message,
        "response_mode": "blocking",
        "user": "test_user"
    }
    response = requests.post(url, headers=headers, json=data, timeout=20)  # ← 加上 headers
    res_json = response.json()
    return res_json.get("answer", "出错")

demo = gr.ChatInterface(
    fn=chat_with_dify,
    title="Dify+智谱免费AI",
    description="纯国产、永久免费"
)

if __name__ == "__main__":
    demo.launch()

4. 完整数据流

① 用户运行: python dify_chat.py
   ↓
② demo.launch() 启动网页服务器
   ↓
③ 浏览器打开 http://127.0.0.1:7860
   ↓
④ 用户输入"你好"，点击发送
   ↓
⑤ Gradio自动调用: chat_with_dify("你好", [])
   ↓
⑥ 函数内部构造HTTP请求:
   POST https://api.dify.ai/v1/chat-messages
   headers: {"Authorization": "Bearer app-xxx"}
   body: {"query": "你好", ...}
   ↓
⑦ requests.post() 发送到Dify服务器
   ↓
⑧ Dify服务器:
   - 验证密钥 ✓
   - 读取 query
   - 调用LLM模型
   - 生成回答
   ↓
⑨ Dify返回JSON: {"answer": "你好！我是AI..."}
   ↓
⑩ response.json() 解析
   ↓
⑪ 返回 "你好！我是AI..."
   ↓
⑫ Gradio显示在网页上

5. 扩展函数——回调函数

5.1 直白定义

你写好交给别人，别人在合适时机帮你调用的函数。

# 你就是"你"
# Gradio就是"别人"

你写：def chat_with_dify(message, chat_history):
         return "AI的回复"

交给：demo = gr.ChatInterface(fn=chat_with_dify)
      #                        ↑ 把函数交给Gradio

Gradio：好的，用户发消息时我来调用它

5.2 为什么叫"回调"

“回调” = “回过头来调用”

普通函数调用（你主动）：
  你 → 直接调用函数 → 得到结果
  chat_with_dify("你好", [])  # 你主动调

回调函数（别人回头调）：
  你 → 把函数给Gradio → 继续做别的事
  ...过了一会...
  Gradio → 回头调用你的函数 → 得到结果
  chat_with_dify("你好", [])  # Gradio帮你调