图片理解：让 AI 看图并说明

8.1 今天你要完成什么

图片理解不是让 AI 随便编故事，而是先观察可见内容，再给出有根据的说明。

• 能上传或提供一张图片作为输入。
• 能让 AI 输出 3 个观察点。
• 能区分“看得到的事实”和“可能的推测”。
• 能把图片解释成学生能懂的语言。

8.2 核心理论

理论不是背概念，而是帮你判断项目为什么这样设计。下面这些规则会在代码里反复出现。

• 核心理论：图片输入让模型多了一种观察材料，但观察结果仍然需要检查，不能把推测当事实。
• 证据理论：看图时要先列“我确定看见什么”，再写“我猜可能是什么”。这能减少乱编。
• 置信度理论：confidence 表示模型有多确定，不代表一定正确。低置信度结果要提醒人工确认。
• 输入契约：先规定用户要给什么资料。本课的输入要围绕“AI图片讲解员”，不要让用户随便输入到程序无法处理。
• 输出契约：先规定 AI 必须交出什么结果。本课重点是“图片输入、观察点、解释质量”，所以输出要能被人读懂，也要方便程序检查。
• 验证思维：AI 的一次好结果不等于项目可靠。至少用正常输入、边界输入、异常输入各测一次。
• 安全边界：API Key 是密码，不能写进浏览器前端，不能发截图，不能提交到公开仓库。

8.3 课堂讲解

这一课的项目是“AI图片讲解员”，重点是“图片输入、观察点、解释质量”。你可以把它当成一个小实验：先给它一个清楚输入，再观察代码里哪些地方用到了 Multimodal Responses。课堂里我们不会一上来就追求复杂功能，而是先把最小版本做出来。最小版本跑通以后，你再改输入、改提示词、改输出格式，变化就会看得很清楚。

这几课把图片也放进输入里。看图很有趣，但也更容易出现“看起来像”的判断，所以事实和推测要分开。

本课有一条很实用的学习线索：先问“用户到底给了什么”，再问“程序希望拿到什么”。比如你可以试这些输入：一张教室图片，请列观察点；一张科学实验图片，请提出学习问题；一张风景图，请写故事开头。这些输入故意有简单的，也有容易出问题的。正常输入能帮你确认功能；短输入、空输入、奇怪输入能帮你发现系统边界。

写代码时建议你分三轮。第一轮只跑通官方调用，不加自己的想法；第二轮把输入换成自己的例子，看看结果是否还合理；第三轮才开始改结构，比如增加字段、加错误提示、做网页交互。这个顺序有点慢，但很稳。真正浪费时间的不是慢，而是一下子改太多，最后不知道错在哪里。

图片模糊时不要硬说确定。一个靠谱的助手会说“我不确定”，并提醒用户人工确认。

理论部分要和代码一起看。比如“输入契约”不是一个漂亮词，它在代码里就是长度检查、必填字段、表单校验；“输出契约”也不是空话，它在代码里就是 JSON Schema、固定字段或页面渲染规则。你每写一行检查代码，都是在告诉系统：什么结果可以接受，什么结果需要退回去重新处理。

课堂里可以把同桌当成第一个用户。你把项目跑给同桌看，让对方换一个输入，观察系统会不会乱。很多问题都是别人随手一试才出现的，比如输入太短、问题太模糊、连续点击按钮、图片看不清。能处理这些小麻烦，作品就会从“我电脑上能跑”变成“别人也能用”。

最后做复盘时，不要只写“我学会了调用 API”。可以写得更具体：我学会了怎样限制输入，怎样让输出固定，怎样判断结果不可靠，怎样把报错变成用户看得懂的提示。这样的复盘有用，因为下一课你真的会再次用到它。

课堂讨论题

• 如果把“AI图片讲解员”交给低年级学生使用，哪一步最容易让他们困惑？
• 这个项目里，哪些事情适合交给模型，哪些事情应该交给普通代码？
• 如果模型给出一个看起来不错但没有依据的答案，你打算怎样提醒用户？
• 你能不能把今天的项目换一个主题，但保持同样的输入、处理、输出结构？
• 如果只能保留一个测试用例，你会保留正常输入、边界输入还是异常输入？为什么？

8.4 先看例子

先把例子看懂，再动手写代码。你不需要一次记住所有概念，先能说清楚“输入是什么、输出是什么、程序要检查什么”。

确定看见：1. 桌上有一本书。2. 旁边有铅笔。3. 背景是教室。
可能推测：这是学习场景，但需要更多信息确认。

你可以替换成这些输入

• 一张教室图片，请列观察点。
• 一张科学实验图片，请提出学习问题。
• 一张风景图，请写故事开头。
• 一张模糊图片，请说明不确定处。
• 一张流程图，请解释步骤。

8.5 完整代码实现

下面同时给出 Node.js 和 Python 两套完整最小实现。先任选一种原样跑通，再改输入、改提示词、改输出格式。

Node.js 运行方式

1. 新建文件 lesson-08.mjs，把下面完整代码放进去。
2. 在终端运行：npm init -y
3. 安装依赖：npm install openai
4. 设置环境变量 OPENAI_API_KEY。Windows PowerShell 示例：$env:OPENAI_API_KEY="你的密钥"
5. 运行：node lesson-08.mjs
6. 把最后一行的示例输入换成你自己的测试内容。

Node.js 完整代码

import OpenAI from "openai";

const client = new OpenAI();
const MODEL = process.env.OPENAI_MODEL || "gpt-5.5";

const imageUrl =
  "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Fronalpstock_big.jpg/640px-Fronalpstock_big.jpg";

const response = await client.responses.create({
  model: MODEL,
  input: [
    {
      role: "user",
      content: [
        {
          type: "input_text",
          text: `
请观察图片，给学生做讲解。
输出：
1. 我确定看见的 3 个内容
2. 我只能推测的 2 个内容
3. 一个适合课堂讨论的问题
注意：事实和推测必须分开。
`,
        },
        {
          type: "input_image",
          image_url: imageUrl,
        },
      ],
    },
  ],
});

console.log(response.output_text);

Python 运行方式

1. 新建文件 lesson-08.py，把下面完整代码放进去。
2. 建议新建虚拟环境后再安装依赖。
3. 安装依赖：pip install openai
4. 设置环境变量 OPENAI_API_KEY。Windows PowerShell 示例：$env:OPENAI_API_KEY="你的密钥"
5. 运行：python lesson-08.py
6. 把 main 里的示例输入换成你自己的测试内容。

Python 完整代码

from openai import OpenAI
import os

client = OpenAI()
MODEL = os.getenv("OPENAI_MODEL", "gpt-5.5")

image_url = "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Fronalpstock_big.jpg/640px-Fronalpstock_big.jpg"

response = client.responses.create(
    model=MODEL,
    input=[
        {
            "role": "user",
            "content": [
                {
                    "type": "input_text",
                    "text": (
                        "请观察图片，给学生做讲解。\n"
                        "输出：\n"
                        "1. 我确定看见的 3 个内容\n"
                        "2. 我只能推测的 2 个内容\n"
                        "3. 一个适合课堂讨论的问题\n"
                        "注意：事实和推测必须分开。"
                    ),
                },
                {
                    "type": "input_image",
                    "image_url": image_url,
                },
            ],
        }
    ],
)

print(response.output_text)

8.6 跟着做

1. 选择一张内容清楚的图片。
2. 先让 AI 只描述事实，不急着解释。
3. 再让 AI 把事实整理成 3 个重点。
4. 最后让 AI 生成一句适合学生的讲解。
5. 人工检查：图片里真的有这些内容吗？

8.7 常见错误

• 让 AI 直接下结论，没有先列事实。
• 把推测当成确定答案。
• 图片太模糊，结果不可靠。
• 没有让 AI 说明不确定的地方。

8.8 课后练习

1. 用一张学习相关图片做“图片讲解员”。
2. 输出事实、推测、学习问题三部分。
3. 人工标出 1 个需要确认的地方。

8.9 自测清单

• 我有没有区分事实和推测？
• 我的图片是否足够清楚？
• 输出是否适合学生理解？
• 我有没有人工检查结果？