前端转AI · 第7周 | 对接过微信支付、钉钉、企微的API后,调LLM API竟然让我落泪了

API恐惧症

做前端这些年,我对接过的API堪称噩梦合集:

  • 微信支付:签名算法能把人逼疯

  • 钉钉开放平台:文档和实际接口经常对不上

  • 某甲方自研系统:接口返回格式每周变一次


  •  

所以当我要调LLM API时,我的第一反应是——又要掉多少头发?

结果...10行代码搞定

from openai import OpenAI

client = OpenAI(
    api_key="你的key",
    base_url="https://api.deepseek.com"  # 用DeepSeek便宜
)

response = client.chat.completions.create(
    model="deepseek-chat",
    messages=[
        {"role": "system", "content": "你是一个幽默的编程导师"},
        {"role": "user", "content": "用一句话解释什么是React"}
    ]
)

print(response.choices[0].message.content)

输出:

"React就是一个让你用JavaScript写HTML的框架,然后再用CSS-in-JS把CSS也写成JavaScript,最终实现Everything in JavaScript的伟大愿景。"

就这??就这!!

没有签名算法,没有OAuth流程,没有回调地址配置,没有沙箱环境切换——

就是POST一个JSON,返回一个JSON。

我当场落泪。

LLM API的核心概念(前端工程师版)

LLM概念 前端对照 大白话
Token 字符数 LLM按字数收费,像手机流量
Temperature Math.random() 值越高回答越随机,越低越确定
System Prompt defaultProps 预设角色和行为规则
Messages数组 聊天记录数组 就是一个对话历史列表
Streaming EventSource/SSE 一个字一个字蹦出来
Model npm包版本 不同模型=不同版本,能力不同

流式响应 = 我熟悉的SSE

前端工程师最熟悉的一个概念来了!ChatGPT那种打字机效果,其实就是Server-Sent Events(SSE)——前端做实时通知时经常用的技术:

# 流式响应
stream = client.chat.completions.create(
    model="deepseek-chat",
    messages=[{"role": "user", "content": "写一首关于前端转AI的诗"}],
    stream=True  # 开启流式!
)

for chunk in stream:
    content = chunk.choices[0].delta.content
    if content:
        print(content, end="", flush=True)

前端接收端就是你熟悉的EventSource:

const eventSource = new EventSource('/api/chat');
eventSource.onmessage = (event) => {
    // 一个字一个字追加到页面上
    appendToChat(event.data);
};

这不就是我之前做消息推送时用过的方案吗DeepSeek vs OpenAI 怎么选

DeepSeek OpenAI
价格 超便宜(约1/10)
中文能力
API兼容 兼容OpenAI格式 标准
免费额度 新用户送额度 有免费层
国内访问 不需要翻墙 需要


学习阶段果断选DeepSeek,便宜好用不翻墙。等项目上线了再考虑其他模型。

今日感悟

调了5年各种奇葩API的我,今天终于遇到了一个"正常"的API。

LLM API的设计哲学就是:简单、标准、一致。所有大模型的API几乎都长一个样——就是Messages In, Message Out。

如果你在前端对接过任何一个REST API,LLM API对你来说就是小菜一碟。

真正的挑战不在调用API,而在写好Prompt——这是下周的主题。

前端转AI系列持续更新中,关注不错过 ✨
Logo

欢迎加入DeepSeek 技术社区。在这里,你可以找到志同道合的朋友,共同探索AI技术的奥秘。

更多推荐