🌟 Day 4：大模型 API 调用（OpenAI / DeepSeek / Claude）+ 流式输出 + 温度参数

---

一、Day4 核心知识点讲解

1. 大模型 API 调用的本质是什么？

一句话总结：

应用端通过 API 调用大模型，让模型参与业务逻辑，生成答案、执行任务或调用工具。

企业真正落地 AI，绝大部分靠 API 调用（不是训练模型）。

典型调用方式：

• 前端调用大模型接口
• 后端（Node.js / Next.js / Python）转发或代理请求
• 配合流式输出，实现像 ChatGPT 一样的实时反馈
• 结合温度 / top-p / 工具调用，实现定制化能力

---

2. OpenAI / DeepSeek / Claude API 的通用结构

所有厂商 API 都遵循同一结构，参数名字略有不同：

{
  "model": "gpt-4o-mini or deepseek-chat",
  "messages": [
    {"role": "system", "content": "你是AI助手"},
    {"role": "user", "content": "你好"}
  ],
  "temperature": 0.7,
  "stream": true
}

只要你学会一种，其他厂商基本都是一样的。

---

3. 前端 + Node.js / Next.js 调用模型的典型架构

前端页面（用户输入）
       ↓
Next.js API 路由 （/api/chat）
       ↓
  调用 OpenAI/DeepSeek/Claude API
       ↓
   流式输出 Stream 返回前端
       ↓
前端实时渲染（打字机效果）

目前企业 90% 都用这个方案。

---

4. 流式输出（Streaming）原理

流式输出 = 大模型一句话没生成完，也能提前把部分内容传给前端。

✔ 实现打字机效果
✔ 提升响应速度（体验提升巨大）
✔ 更适合长回答（PRD、总结、代码生成）

Node.js 中一般用：

• ReadableStream
• fetch 的 response.body
• Next.js 的 Server-Sent Events（SSE）

流式输出的本质：返回一个持续产生 Token 的数据流，而不是一次性返回完整 JSON。

---

5. 温度参数（temperature）是什么？

大模型的 创造力控制开关。

温度数值	模型表现
0.0	严谨、稳定、事实性强、代码/数据分析最常用
0.3–0.7	有创造性但不离谱（产品策划、营销文案）
1.0–1.5	更有想象力（故事创作、头脑风暴）

一句话总结：

温度越低 → 越稳定； 温度越高 → 越有创造力。

企业业务通常使用：0 ~ 0.3

---

二、Day 4 强化问题（含参考答案）

---

1. 流式输出如何实现？请用自己的话回答。（重点题）

参考答案：

流式输出就是服务器把模型生成的 Token 一段段实时推送给前端，而不是一次性返回完整内容。
在 Node.js/Next.js 中通常利用 SSE（Server-Sent Events）或 ReadableStream，让前端能够边接收边渲染，实现像 ChatGPT 的打字机效果。

---

2. 温度参数代表什么？

参考答案：

温度表示模型输出的随机性。

• 温度低 → 输出更确定、更稳定、适合企业应用
• 温度高 → 更有创造性、更发散，适合写故事、营销文案

---

3. 为什么企业一定要掌握大模型 API 调用？写出 2 点。

参考答案：

1. **企业落地基本都依赖 API，而不是前端 ChatGPT 网页。**业务系统必须内嵌调用模型。
2. API 才能实现权限、RAG、工具调用、数据库操作、流式输出等企业功能。

---

4. 为什么渲染长内容必须用流式输出？

参考答案：

因为流式输出可以在内容完全生成之前就返回前端，避免网页等待时间过长，极大提升体验，尤其适合长文本如：

• PRD 文档
• 长报告
• 总结类内容

---

三、Day4 实战练习（最重要）

以下是真正可用于生产的 Next.js + OpenAI / DeepSeek 流式输出 API 示例。

---

✅ 实战练习 Task：请写一个流式输出的 API Route（Next.js）

✔ 标准答案（生产级）

📌 文件：app/api/chat/route.ts（Next.js 14）

import { NextResponse } from "next/server";
import OpenAI from "openai";

const client = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY
});

export async function POST(req: Request) {
  const { messages } = await req.json();

  const stream = await client.chat.completions.create({
    model: "gpt-4o-mini",
    messages,
    stream: true,
    temperature: 0.3
  });

  return new NextResponse(stream.toReadableStream(), {
    headers: {
      "Content-Type": "text/event-stream"
    }
  });
}

这是最干净的流式输出实现。

---

四、作业

📌 作业：请写一个生产可用的前端调用 + 流式渲染代码（React / Next.js）

要求：

1. 使用 fetch 调用刚才的 /api/chat
2. 使用 ReadableStream 读取返回数据
3. 实现“逐字渲染”效果（打字机）
4. 写成可直接放进 Next.js 页面的代码

示例结构（你需要补全内容）：

export default function Page() {
  const [text, setText] = useState("");

  async function send() {
    const res = await fetch("/api/chat", {
      method: "POST",
      body: JSON.stringify({
        messages: [{ role: "user", content: "你好" }]
      })
    });

    const reader = res.body.getReader();
    const decoder = new TextDecoder();

    // TODO: 在这里实现流式读取与累加渲染
    
  }

  return (
    <>
      <button onClick={send}>Send</button>
      <div>{text}</div>
    </>
  );
}