安全的關(guān)鍵.png)
使用這些基本 REST API 最佳實(shí)踐構(gòu)建出色的 API
不得不說(shuō)，這圖片有點(diǎn)讓人背后一涼的感覺(jué)…
接下來(lái)我們就從頭開始吧，以下所有的代碼均為在我的問(wèn)題和引導(dǎo)下 ChatGPT 自動(dòng)生成。
ChatGPT 的回答：
使用 Node.js 和 OPEN API 可以通過(guò)以下步驟實(shí)現(xiàn)自動(dòng)生成圖片：
首先，安裝 Node.js 和必要的依賴包，如 openapi 庫(kù)。可以使用以下命令完成安裝：
npm install openapi然后，創(chuàng)建一個(gè) JavaScript 文件，并通過(guò) require 命令引入 openapi 庫(kù)。
接下來(lái)，可以使用?OPEN API?的圖像生成功能，編寫代碼來(lái)生成圖片。
最后，運(yùn)行 JavaScript 文件，即可自動(dòng)生成圖片。
如果需要了解詳細(xì)的步驟，可以查看 OPEN API 文檔或者示例代碼，以獲取更多信息。
好，下面我們知道了他為 Node.js 開發(fā)者提供了一個(gè) openai 的 npm 包，接下來(lái)我們的項(xiàng)目里調(diào)用這個(gè) npm 包就好了。
ChatGPT 的回答：
1.在 OPEN AI 網(wǎng)站上注冊(cè)帳戶，并獲取 API 密鑰。
在項(xiàng)目中安裝必要的依賴包，如?openai?庫(kù)。可以使用以下命令完成安裝：
npm install openai2.創(chuàng)建一個(gè) JavaScript 文件，并通過(guò) require 命令引入 openai 庫(kù)。
3.設(shè)置 OPEN AI 密鑰，可以通過(guò)以下方式完成：
const openai = require("openai");
openai.setApiKey("YOUR_API_KEY");4.使用 OPEN AI 提供的方法調(diào)用 API，并傳入必要的參數(shù)。例如，如果要使用 GPT-3 模型生成文本，可以使用以下代碼：
openai.completions.create({
model: "text-davinci-002",
prompt: "Once upon a time",
temperature: 0.5
}).then((response) => {
// do something with the response
});5.處理 API 的響應(yīng)，例如將生成的文本保存到本地文件。
好，這里面有一個(gè)關(guān)鍵點(diǎn)是初始化 OPEN AI 時(shí)需要一個(gè)密鑰，下面我們來(lái)問(wèn)問(wèn)它怎么獲取這個(gè)密鑰。‘
ChatGPT 的回答：
如果要在 OPEN AI 網(wǎng)站上注冊(cè)帳戶并獲取 API 密鑰，可以按照以下步驟操作：
OPEN AI 網(wǎng)站，在首頁(yè)上方點(diǎn)擊“Sign In”按鈕。好，我們下一步到 OPEN AI 注冊(cè)一個(gè)賬號(hào)，你可能會(huì)發(fā)現(xiàn)下面的提示：
這是因?yàn)?nbsp;OPEN AI 暫時(shí)不在中國(guó)提供服務(wù)，所以國(guó)內(nèi)的小伙伴想要使用還是有一定門檻的，你可能需要下面幾個(gè)條件：
OPEN AI 可能會(huì)根據(jù)你本地緩存的信息判斷你的國(guó)家）outlook，無(wú)需海外手機(jī)號(hào)驗(yàn)證，隨便申請(qǐng)）sms-activate，租個(gè)印度手機(jī)號(hào)只需要1塊錢）好，注冊(cè)完成后我們就擁有了一個(gè) OPEN AI 的密鑰:
下面開始實(shí)現(xiàn)項(xiàng)目了，我們選擇 koa 框架，向 ChatGPT 詢問(wèn)項(xiàng)目細(xì)節(jié)。
ChatGPT 的回答：
1.使用 koa 框架和 OPEN AI 實(shí)現(xiàn)自動(dòng)生成圖片的項(xiàng)目，可以按照以下步驟進(jìn)行：
2.首先，安裝?Node.js?和必要的依賴包，包括 koa 框架、openai 庫(kù)和其他必要的包。可以使用以下命令完成安裝：
npm install koa openai3.然后，創(chuàng)建一個(gè) JavaScript 文件，并通過(guò) require 命令引入 koa 框架和 openai 庫(kù)。
4.接下來(lái)，可以使用 koa 框架的中間件和路由功能，編寫代碼來(lái)實(shí)現(xiàn)服務(wù)器端的邏輯。
5.在服務(wù)器端代碼中，設(shè)置 OPEN AI 的 API 密鑰，并使用 openai 庫(kù)提供的方法調(diào)用 API，生成圖片。
6.最后，啟動(dòng) Node.js 程序，即可通過(guò)瀏覽器或其他客戶端訪問(wèn)服務(wù)器，實(shí)現(xiàn)自動(dòng)生成圖片的功能。
ChatGPT 告訴我們需要這六個(gè)步驟，但是沒(méi)有告訴我們具體的代碼怎么寫，我們嘗試?yán)^續(xù)追問(wèn)：
ChatGPT 的回答：
第三步，使用 koa 框架的中間件和路由功能，編寫服務(wù)器端的邏輯。下面是一個(gè)簡(jiǎn)單的示例代碼，它可以處理來(lái)自客戶端的 POST 請(qǐng)求，并使用 openai 庫(kù)生成圖片：
const Koa = require("koa");
const openai = require("openai");
const app = new Koa();
// 設(shè)置 OPEN AI 的 API 密鑰
openai.apiKey = "your-api-key";
// 定義中間件，用于處理請(qǐng)求和響應(yīng)
app.use(async (ctx, next) => {
if (ctx.method === "POST") {
// 獲取請(qǐng)求中的參數(shù)
const { model, prompt } = ctx.request.body;
// 使用 openai 庫(kù)調(diào)用 API，生成圖片
const response = await openai.completions.create({
model,
prompt,
max_tokens: 2048,
temperature: 0.5,
});
// 將生成的圖片返回給客戶端
ctx.body = response.data.complete;
}
});
// 啟動(dòng)服務(wù)器
app.listen(3000);看過(guò)代碼后我發(fā)現(xiàn)他調(diào)用了 openai.completions.create 方法，里面?zhèn)魅肓怂膫€(gè)參數(shù)，這些參數(shù)都是啥意思呢？再問(wèn)問(wèn)他吧：
ChatGPT 的回答：
completions.create 是 openai 庫(kù)提供的方法，它用于調(diào)用 OPEN AI 的 API，生成圖片。該方法接收四個(gè)參數(shù)，分別是：
model：指定要使用的模型。OPEN AI 有多種模型可供選擇，每種模型都具有不同的特點(diǎn)和功能。使用時(shí)需要根據(jù)需求和 API 文檔選擇適當(dāng)?shù)哪Ｐ汀?/li>
prompt：指定要生成的圖片的文本內(nèi)容。此參數(shù)指定的文本內(nèi)容會(huì)作為模型的輸入，模型會(huì)根據(jù)文本內(nèi)容生成圖片。max_tokens：指定生成圖片的最大長(zhǎng)度。此參數(shù)指定生成圖片的最大長(zhǎng)度，單位為字符。如果超過(guò)指定長(zhǎng)度，模型會(huì)按照指定長(zhǎng)度截?cái)唷?/li>
temperature：指定生成圖片的隨機(jī)性。此參數(shù)指定生成圖片的隨機(jī)性，取值范圍為 0 到 1。如果設(shè)為 0，則模型會(huì)按照原文內(nèi)容生成圖片，不會(huì)有隨機(jī)性；例如，下面是一個(gè)調(diào)用 completions.create 方法的例子，它使用了預(yù)訓(xùn)練的 GPT-3 模型，生成了長(zhǎng)度為 100 個(gè)字符，隨機(jī)性為 0.5，詞頻懲罰為 0.0 的圖片：
openai.completions.create({
model: "text-davinci-002",
prompt: "The quick brown fox jumps over the lazy dog.",
max_tokens: 100,
temperature: 0.5,
frequency_penalty: 0.0,
})回答中有名次解釋也有代碼示例，還是比較清晰的，第一個(gè)參數(shù)?model?代表模型，那么究竟有哪些模型，適合在什么場(chǎng)景使用呢？我們繼續(xù)追問(wèn)：
ChatGPT 的回答：
OPEN AI 提供了多種預(yù)訓(xùn)練的模型，用于滿足不同的應(yīng)用場(chǎng)景。例如，下面是一些常見(jiàn)的模型及其特點(diǎn)和應(yīng)用場(chǎng)景：
text-davinci-002：這是一種大型模型，可以完成各種自然語(yǔ)言處理任務(wù)。它具有非常強(qiáng)大的語(yǔ)言理解能力，可以用于文本生成、問(wèn)答、機(jī)器翻譯等應(yīng)用。image-alpha-001：這是一種圖像生成模型，可以根據(jù)文本內(nèi)容生成對(duì)應(yīng)的圖像。它具有非常高的生成質(zhì)量，可以用于圖像生成、圖像修復(fù)、圖像分類等應(yīng)用。dialogue-babi-001：這是一種對(duì)話生成模型，可以根據(jù)上下文生成相應(yīng)的對(duì)話。它具有較高的語(yǔ)言流暢性和邏輯性，可以用于對(duì)話生成、聊天機(jī)器人、問(wèn)答系統(tǒng)等應(yīng)用。這些模型僅是 OPEN AI 提供的部分模型，實(shí)際應(yīng)用中還有更多模型可供選擇。
好了，API 的基本概念都了解清楚了，下面我們來(lái)繼續(xù)實(shí)現(xiàn)，上面的代碼還是比較簡(jiǎn)陋的，把核心邏輯直接掛載在 koa 上了，沒(méi)有加任何路由，我們來(lái)優(yōu)化一下：
ChatGPT 的回答：
const Koa = require("koa");
const openai = require("openai");
const Router = require("koa-router");
const app = new Koa();
const router = new Router();
// 設(shè)置 OPEN AI 的 API 密鑰
openai.apiKey = "your-api-key";
// 定義路由，處理 POST 請(qǐng)求
router.post("/", async (ctx, next) => {
// 獲取請(qǐng)求中的參數(shù)
const { model, prompt } = ctx.request.body;
// 使用 openai 庫(kù)調(diào)用 API，生成圖片
const response = await openai.completions.create({
model,
prompt,
max_tokens: 2048,
temperature: 0.5,
});
// 將生成的圖片返回給客戶端
ctx.body = response.data.complete;
});
// 啟用路由
app.use(router.routes());
// 啟動(dòng)服務(wù)器
app.listen(3000);上述代碼中，我們首先引入了 koa-router 插件，并創(chuàng)建了一個(gè) Router 實(shí)例。然后，定義了一個(gè)路由，處理來(lái)自客戶端的 POST 請(qǐng)求。最后，啟用了路由，并啟動(dòng)服務(wù)器。
使用路由的優(yōu)點(diǎn)是可以對(duì)不同的請(qǐng)求方法和路徑分別處理，使得代碼更加清晰和維護(hù)方便。實(shí)際應(yīng)用中，可以根據(jù)需求和 API 文檔，添加更多路由處理不同的請(qǐng)求。
幫我們引入了 koa-router 插件，代碼看起來(lái)像點(diǎn)樣子了，接下來(lái)我們開始實(shí)現(xiàn)前端頁(yè)面，繼續(xù)提問(wèn)：
ChatGPT 的回答：
您可以創(chuàng)建一個(gè)前端頁(yè)面，用于給用戶輸入 model、prompt 參數(shù)，然后通過(guò) AJAX 請(qǐng)求調(diào)用上面的接口生成圖片，并在頁(yè)面上展示生成的圖片。具體方法如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Generate Image</title>
</head>
<body>
<h1>Generate Image</h1>
<form id="form">
<label for="model">Model:</label>
<input type="text" id="model" name="model" value="text-davinci-002" />
<br />
<label for="prompt">Prompt:</label>
<input type="text" id="prompt" name="prompt" value="The quick brown fox jumps over the lazy dog." />
<br />
<button type="submit">Generate</button>
</form>
<div id="image"></div>
<script>
// 監(jiān)聽表單提交事件
document.querySelector("#form").addEventListener("submit", async (event) => {
// 阻止表單提交的默認(rèn)行為
event.preventDefault();
// 獲取表單中的參數(shù)
const model = document.querySelector("#model").value;
const prompt = document.querySelector("#prompt").value;
// 發(fā)送 AJAX 請(qǐng)求，生成圖片
const response = await fetch("http://localhost:3000", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ model, prompt }),
});
const data = await response.json();
// 在頁(yè)面上展示生成的圖片
const image = document.querySelector("#image");
image.innerHTML = <img src="data:image/jpeg;base64,${data}" />;
});
</script>
</body>
</html>好了，代碼生成出來(lái)了，我們要把他掛到服務(wù)器上，繼續(xù)提問(wèn)：
ChatGPT 的回答：
要將 HTML 頁(yè)面綁定到 koa 的路由上，需要在 koa 中使用 koa-static 插件，具體方法如下：
const Koa = require("koa");
const openai = require("openai");
const Router = require("koa-router");
const serve = require("koa-static");
const app = new Koa();
const router = new Router();
// 設(shè)置 OPEN AI 的 API 密鑰
openai.apiKey = "your-api-key";
// 定義路由，處理 POST 請(qǐng)求
router.post("/", async (ctx, next) => {
// 獲取請(qǐng)求中的參數(shù)
const { model, prompt } = ctx.request.body;
// 使用 openai 庫(kù)調(diào)用 API，生成圖片
const response = await openai.completions.create({
model,
prompt,
max_tokens: 2048,
temperature: 0.5,
});
// 將生成的圖片返回給客戶端
ctx.body = response.data.complete;
});
// 使用 koa-static 插件，綁定靜態(tài)文件目錄
app.use(serve("./public"));
// 啟用路由
app.use(router.routes());
// 啟動(dòng)服務(wù)器
app.listen(3000);使用 koa-static 插件綁定靜態(tài)文件目錄時(shí)，指定的目錄就是靜態(tài)文件目錄，所有需要訪問(wèn)的靜態(tài)文件，如 HTML、JavaScript 和 CSS 文件，都需要放到這個(gè)目錄下。
在上述代碼中，我們將靜態(tài)文件目錄設(shè)置為 public，因此需要把 HTML 文件放到 public 目錄下，才能被正確訪問(wèn)。
例如，如果你的 HTML 文件名為 index.html，則需要把它放到 public 目錄下，訪問(wèn)時(shí)的 URL 為 http://localhost:3000/index.html。這樣，當(dāng)瀏覽器訪問(wèn)該 URL 時(shí)，就會(huì)返回 index.html 文件內(nèi)容。
代碼中幫我們引入了 koa-static 插件，并且指向了 public 文件夾，我們把 HTML 文件丟進(jìn)去。
然后點(diǎn)擊 Generate 后發(fā)現(xiàn)服務(wù)報(bào)錯(cuò)了：
這個(gè)報(bào)錯(cuò)是為啥，我們繼續(xù)問(wèn)問(wèn) ChatGPT
ChatGPT 的回答：
在 koa 中，要獲取請(qǐng)求中的參數(shù)，可以在中間件函數(shù)中使用 ctx.request.body 對(duì)象，但需要注意，默認(rèn)情況下，koa 不會(huì)對(duì)請(qǐng)求的數(shù)據(jù)進(jìn)行解析，因此 ctx.request.body 中是沒(méi)有參數(shù)的。
如果你想要獲取請(qǐng)求中的參數(shù)，則需要在 koa 中使用 koa-bodyparser 插件，該插件能夠自動(dòng)對(duì)請(qǐng)求的數(shù)據(jù)進(jìn)行解析，并將解析后的結(jié)果放入 ctx.request.body 對(duì)象中。
const Koa = require("koa");
const openai = require("openai");
const Router = require("koa-router");
const serve = require("koa-static");
const bodyParser = require("koa-bodyparser");
const app = new Koa();
const router = new Router();
// 設(shè)置 OPEN AI 的 API 密鑰
openai.apiKey = "your-api-key";
// 使用 koa-bodyparser 插件，對(duì)請(qǐng)求數(shù)據(jù)進(jìn)行解析
app.use(bodyParser());
// 定義路由，處理 POST 請(qǐng)求
router.post("/", async (ctx, next) => {
// 獲取請(qǐng)求中的參數(shù)
const { model, prompt } = ctx.request.body;
// 使用 openai 庫(kù)調(diào)用 API，生成圖片
const response = await openai.completions.create({
model,
prompt,
max_tokens: 2048,
temperature: 0.5,
});
// 將生成的圖片返回給客戶端
ctx.body = response.data.complete;
});
// 使用 koa-static 插件，綁定靜態(tài)文件目錄
app.use(serve("./public"));
// 啟用路由
app.use(router.routes());
// 啟動(dòng)服務(wù)器
app.listen(3000);上述代碼中，我們?cè)?nbsp;koa 應(yīng)用中使用了 koa-bodyparser 插件，對(duì)請(qǐng)求的數(shù)據(jù)進(jìn)行了解析。在路由處理函數(shù)中，通過(guò) ctx.request.body 獲取請(qǐng)求中的參數(shù)，并調(diào)用 openai API 生成圖片。
在實(shí)際應(yīng)用中，可以根據(jù)需要，調(diào)整 koa-bodyparser 插件的配置，以滿足個(gè)性化的需求。
然后我們繼續(xù)運(yùn)行代碼，發(fā)現(xiàn)代碼又報(bào)錯(cuò)了：
這個(gè)報(bào)錯(cuò)繼續(xù)讓 ChatGPT 自己解決吧，于是我按照官方示例進(jìn)行引導(dǎo)：
ChatGPT 的回答：
const Koa = require("koa");
const Router = require("koa-router");
const bodyParser = require("koa-bodyparser");
const serve = require("koa-static");
const { Configuration, OpenAIApi } = require("openai");
const app = new Koa();
const router = new Router();
const configuration = new Configuration({
apiKey: process.env.OPENAI_API_KEY,
});
const openai = new OpenAIApi(configuration);
app.use(bodyParser());
app.use(serve("public"));
router.post("/api/generate-image", async (ctx, next) => {
const { model, prompt } = ctx.request.body;
const response = await openai.createImage({
model: "image-alpha-001",
prompt,
});
const data = await response.json();
ctx.body = {
url: data.url,
};
});
app.use(router.routes()).use(router.allowedMethods());
app.listen(3000, () => {
console.log("Server is listening on port 3000");
});這時(shí)候服務(wù)端代碼的基本邏輯已經(jīng)差不多了，我們?cè)僮?nbsp;ChatGPT 把我們的前端代碼美化一下：
ChatGPT 的回答：
<style>
/* 居中布局 */
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
font-family: sans-serif;
}
/* 表單樣式 */
form {
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
min-width: 300px;
padding: 1em;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
background-color: white;
}
form > div {
margin-bottom: 0.5em;
display: flex;
align-items: center;
}
label {
font-weight: bold;
margin-right: 0.5em;
}
input[type="text"] {
width: 100%;
padding: 0.5em;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
margin-top: 1em;
padding: 0.5em 1em;
border: none;
border-radius: 5px;
background-color: #0070f3;
color: white;
font-size: 1em;
font-weight: bold;
cursor: pointer;
transition: all 0.3s;
}
button:hover {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
/* 圖片展示區(qū)域樣式 */
#image-container {
margin-top: 1em;
display: none;
width: 100%;
max-width: 500px;
height: auto;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
animation: fadeIn 0.5s;
}
#image {
width: 100%;
height: auto;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
</style>好家伙，分分鐘就寫完了，下面我們來(lái)看看效果：
我們只問(wèn)了 ChatGPT 13 個(gè)問(wèn)題，他就幫我們寫出了一個(gè)簡(jiǎn)單的圖片生成程序，我在用的過(guò)程中就一直在感嘆實(shí)在是再?gòu)?qiáng)大了，后續(xù)其實(shí)還可以問(wèn)更多的問(wèn)題來(lái)不斷完善這個(gè)程序，比如：生成圖片的過(guò)程中生成 loading 效果、為網(wǎng)站添加一些背景動(dòng)畫效果 … 你可以在極短的時(shí)間里構(gòu)建出一個(gè)出色的網(wǎng)站。
當(dāng)然，它現(xiàn)階段還有一些不太完善的地方，比如他并不能直接給你一段非常完美的代碼，而是需要你持續(xù)引導(dǎo)。另外寫出的代碼也有一些 Bug，但是他也可以靠你的引導(dǎo)來(lái)找到這些 Bug，這個(gè)表現(xiàn)其實(shí)真的很像是一個(gè)真的程序員，而不是一個(gè)冷血的機(jī)器。
或許你會(huì)覺(jué)得，以上代碼不就是啟動(dòng)了一個(gè) Node.js 服務(wù)、調(diào)用了一些 API ，然后在前端把結(jié)果展示出來(lái)么，但是這可能是因?yàn)槟銓?duì)開發(fā)已經(jīng)有一定經(jīng)驗(yàn)了，覺(jué)得這些代碼沒(méi)什么難度。但是如果是作為一個(gè)剛步入職場(chǎng)的新同學(xué)，或者開發(fā)經(jīng)驗(yàn)為零的人，讓他去自己寫出這些代碼并且成功運(yùn)行可能要花上一天的時(shí)間。但是現(xiàn)在有了 ChatGPT 的輔助或許只需要花上一個(gè)小時(shí)，這是一個(gè)質(zhì)的飛躍，未來(lái)可能徹底改變軟件開發(fā)這個(gè)行業(yè)。
根據(jù)我們的實(shí)驗(yàn)結(jié)果來(lái)看，他或許現(xiàn)在并不能完全替代一個(gè)完整的程序員，但卻能讓一個(gè)人程序員 1.5 個(gè)人的活，也可以幫助低級(jí)工程師快速成長(zhǎng)，讓排查 Bug、重構(gòu)代碼變得更簡(jiǎn)單。這不可避免的會(huì)影響到未來(lái)市場(chǎng)上對(duì)程序員數(shù)量的需求…
本項(xiàng)目的源碼在下面，感興趣的可以玩一玩，另外你也可以按照我的問(wèn)題去引導(dǎo) ChatGPT 幫你實(shí)現(xiàn)這個(gè)程序。
https://github.com/ConardLi/openai-nodejs-demo
我讓他幫我列了一下本文的大綱，另外項(xiàng)目的 readme.md 文件也是 ChatGPT 自動(dòng)生成的 ～
本文章轉(zhuǎn)載微信公眾號(hào)@code秘密花園
對(duì)比大模型API的內(nèi)容創(chuàng)意新穎性、情感共鳴力、商業(yè)轉(zhuǎn)化潛力
一鍵對(duì)比試用API 限時(shí)免費(fèi)