不得不說，這圖片有點讓人背后一涼的感覺…

接下來我們就從頭開始吧，以下所有的代碼均為在我的問題和引導下 ChatGPT 自動生成。

問題1：如何使用 Node.js 借助 OPEN API 的能力實現自動生成圖片？

ChatGPT 的回答：

使用 Node.js 和 OPEN API 可以通過以下步驟實現自動生成圖片：

首先，安裝 Node.js 和必要的依賴包，如 openapi 庫。可以使用以下命令完成安裝：

npm install openapi

然后，創建一個 JavaScript 文件，并通過 require 命令引入 openapi 庫。

接下來，可以使用?OPEN API?的圖像生成功能，編寫代碼來生成圖片。

最后，運行 JavaScript 文件，即可自動生成圖片。

如果需要了解詳細的步驟，可以查看 OPEN API 文檔或者示例代碼，以獲取更多信息。

好，下面我們知道了他為 Node.js 開發者提供了一個 openai 的 npm 包，接下來我們的項目里調用這個 npm 包就好了。

問題2：這個包大概怎么用？詳細說說？

ChatGPT 的回答：

1.在 OPEN AI 網站上注冊帳戶，并獲取 API 密鑰。

在項目中安裝必要的依賴包，如?openai?庫。可以使用以下命令完成安裝：

npm install openai

2.創建一個 JavaScript 文件，并通過 require 命令引入 openai 庫。

3.設置 OPEN AI 密鑰，可以通過以下方式完成：

const openai = require("openai");

openai.setApiKey("YOUR_API_KEY");

4.使用 OPEN AI 提供的方法調用 API，并傳入必要的參數。例如，如果要使用 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 的響應，例如將生成的文本保存到本地文件。

好，這里面有一個關鍵點是初始化 OPEN AI 時需要一個密鑰，下面我們來問問它怎么獲取這個密鑰。‘

問題3：詳細點說明在哪里獲取密鑰？

ChatGPT 的回答：

如果要在 OPEN AI 網站上注冊帳戶并獲取 API 密鑰，可以按照以下步驟操作：

好，我們下一步到 OPEN AI 注冊一個賬號，你可能會發現下面的提示：

這是因為 OPEN AI 暫時不在中國提供服務，所以國內的小伙伴想要使用還是有一定門檻的，你可能需要下面幾個條件：

好，注冊完成后我們就擁有了一個 OPEN AI 的密鑰:

下面開始實現項目了，我們選擇 koa 框架，向 ChatGPT 詢問項目細節。

問題4：使用 koa 框架 + OPEN AI 來實現自動生成圖片的項目

ChatGPT 的回答：

1.使用 koa 框架和 OPEN AI 實現自動生成圖片的項目，可以按照以下步驟進行：

2.首先，安裝?Node.js?和必要的依賴包，包括 koa 框架、openai 庫和其他必要的包。可以使用以下命令完成安裝：

npm install koa openai

3.然后，創建一個 JavaScript 文件，并通過 require 命令引入 koa 框架和 openai 庫。

4.接下來，可以使用 koa 框架的中間件和路由功能，編寫代碼來實現服務器端的邏輯。

5.在服務器端代碼中，設置 OPEN AI 的 API 密鑰，并使用 openai 庫提供的方法調用 API，生成圖片。

6.最后，啟動 Node.js 程序，即可通過瀏覽器或其他客戶端訪問服務器，實現自動生成圖片的功能。

ChatGPT 告訴我們需要這六個步驟，但是沒有告訴我們具體的代碼怎么寫，我們嘗試繼續追問：

問題5：列出第3步的詳細代碼

ChatGPT 的回答：

第三步，使用 koa 框架的中間件和路由功能，編寫服務器端的邏輯。下面是一個簡單的示例代碼，它可以處理來自客戶端的 POST 請求，并使用 openai 庫生成圖片：

const Koa = require("koa");

const openai = require("openai");



const app = new Koa();



// 設置 OPEN AI 的 API 密鑰

openai.apiKey = "your-api-key";



// 定義中間件，用于處理請求和響應

app.use(async (ctx, next) => {

  if (ctx.method === "POST") {

    // 獲取請求中的參數

    const { model, prompt } = ctx.request.body;



    // 使用 openai 庫調用 API，生成圖片

    const response = await openai.completions.create({

      model,

      prompt,

      max_tokens: 2048,

      temperature: 0.5,

    });



    // 將生成的圖片返回給客戶端

    ctx.body = response.data.complete;

  }

});



// 啟動服務器

app.listen(3000);

看過代碼后我發現他調用了 openai.completions.create 方法，里面傳入了四個參數，這些參數都是啥意思呢？再問問他吧：

問題6：completions.create 接收的四個參數的含義是什么

ChatGPT 的回答：

completions.create 是 openai 庫提供的方法，它用于調用 OPEN AI 的 API，生成圖片。該方法接收四個參數，分別是：

例如，下面是一個調用 completions.create 方法的例子，它使用了預訓練的 GPT-3 模型，生成了長度為 100 個字符，隨機性為 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,

})

回答中有名次解釋也有代碼示例，還是比較清晰的，第一個參數?model?代表模型，那么究竟有哪些模型，適合在什么場景使用呢？我們繼續追問：

問題7：介紹下 openai.completions.create 中常見 model 的特點和應用場景

ChatGPT 的回答：

OPEN AI 提供了多種預訓練的模型，用于滿足不同的應用場景。例如，下面是一些常見的模型及其特點和應用場景：

這些模型僅是 OPEN AI 提供的部分模型，實際應用中還有更多模型可供選擇。

好了，API 的基本概念都了解清楚了，下面我們來繼續實現，上面的代碼還是比較簡陋的，把核心邏輯直接掛載在 koa 上了，沒有加任何路由，我們來優化一下：

問題8：優化第三步的代碼，為服務端邏輯增加一個路由

ChatGPT 的回答：

const Koa = require("koa");

const openai = require("openai");

const Router = require("koa-router");



const app = new Koa();

const router = new Router();



// 設置 OPEN AI 的 API 密鑰

openai.apiKey = "your-api-key";



// 定義路由，處理 POST 請求

router.post("/", async (ctx, next) => {

  // 獲取請求中的參數

  const { model, prompt } = ctx.request.body;



  // 使用 openai 庫調用 API，生成圖片

  const response = await openai.completions.create({

    model,

    prompt,

    max_tokens: 2048,

    temperature: 0.5,

  });



  // 將生成的圖片返回給客戶端

  ctx.body = response.data.complete;

});



// 啟用路由

app.use(router.routes());



// 啟動服務器

app.listen(3000);

上述代碼中，我們首先引入了 koa-router 插件，并創建了一個 Router 實例。然后，定義了一個路由，處理來自客戶端的 POST 請求。最后，啟用了路由，并啟動服務器。

使用路由的優點是可以對不同的請求方法和路徑分別處理，使得代碼更加清晰和維護方便。實際應用中，可以根據需求和 API 文檔，添加更多路由處理不同的請求。

幫我們引入了  koa-router 插件，代碼看起來像點樣子了，接下來我們開始實現前端頁面，繼續提問：

問題9： 創建一個HTML頁面，用戶輸入 model、prompt 參數，然后調用上面的接口在頁面展示生成后的圖片

ChatGPT 的回答：

您可以創建一個前端頁面，用于給用戶輸入 model、prompt 參數，然后通過 AJAX 請求調用上面的接口生成圖片，并在頁面上展示生成的圖片。具體方法如下：

<!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>

      // 監聽表單提交事件

      document.querySelector("#form").addEventListener("submit", async (event) => {

        // 阻止表單提交的默認行為

        event.preventDefault();



        // 獲取表單中的參數

        const model = document.querySelector("#model").value;

        const prompt = document.querySelector("#prompt").value;



        // 發送 AJAX 請求，生成圖片

        const response = await fetch("http://localhost:3000", {

          method: "POST",

          headers: {

            "Content-Type": "application/json",

          },

          body: JSON.stringify({ model, prompt }),

        });

        const data = await response.json();



        // 在頁面上展示生成的圖片

        const image = document.querySelector("#image");

        image.innerHTML = <img src="data:image/jpeg;base64,${data}" />;
      });
    </script>
  </body>
</html>

好了，代碼生成出來了，我們要把他掛到服務器上，繼續提問：

問題10： 將這個 HTML 頁面綁定到 koa 的路由上

ChatGPT 的回答：

要將 HTML 頁面綁定到 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();



// 設置 OPEN AI 的 API 密鑰

openai.apiKey = "your-api-key";



// 定義路由，處理 POST 請求

router.post("/", async (ctx, next) => {

  // 獲取請求中的參數

  const { model, prompt } = ctx.request.body;



  // 使用 openai 庫調用 API，生成圖片

  const response = await openai.completions.create({

    model,

    prompt,

    max_tokens: 2048,

    temperature: 0.5,

  });



  // 將生成的圖片返回給客戶端

  ctx.body = response.data.complete;

});



// 使用 koa-static 插件，綁定靜態文件目錄

app.use(serve("./public"));



// 啟用路由

app.use(router.routes());



// 啟動服務器

app.listen(3000);

使用 koa-static 插件綁定靜態文件目錄時，指定的目錄就是靜態文件目錄，所有需要訪問的靜態文件，如 HTML、JavaScript 和 CSS 文件，都需要放到這個目錄下。

在上述代碼中，我們將靜態文件目錄設置為 public，因此需要把 HTML 文件放到 public 目錄下，才能被正確訪問。

例如，如果你的 HTML 文件名為 index.html，則需要把它放到 public 目錄下，訪問時的 URL 為 http://localhost:3000/index.html。這樣，當瀏覽器訪問該 URL 時，就會返回 index.html 文件內容。

代碼中幫我們引入了 koa-static 插件，并且指向了 public 文件夾，我們把 HTML 文件丟進去。

下面我們嘗試啟動項目：

然后點擊 Generate 后發現服務報錯了：

這個報錯是為啥，我們繼續問問 ChatGPT

問題11： 代碼報錯了：Cannot destructure property ‘model’ of ‘ctx.request.body’ as it is undefined

ChatGPT 的回答：

在 koa 中，要獲取請求中的參數，可以在中間件函數中使用 ctx.request.body 對象，但需要注意，默認情況下，koa 不會對請求的數據進行解析，因此 ctx.request.body 中是沒有參數的。

如果你想要獲取請求中的參數，則需要在 koa 中使用 koa-bodyparser 插件，該插件能夠自動對請求的數據進行解析，并將解析后的結果放入 ctx.request.body 對象中。

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();



// 設置 OPEN AI 的 API 密鑰

openai.apiKey = "your-api-key";



// 使用 koa-bodyparser 插件，對請求數據進行解析

app.use(bodyParser());



// 定義路由，處理 POST 請求

router.post("/", async (ctx, next) => {

  // 獲取請求中的參數

  const { model, prompt } = ctx.request.body;



  // 使用 openai 庫調用 API，生成圖片

  const response = await openai.completions.create({

    model,

    prompt,

    max_tokens: 2048,

    temperature: 0.5,

  });



  // 將生成的圖片返回給客戶端

  ctx.body = response.data.complete;

});



// 使用 koa-static 插件，綁定靜態文件目錄

app.use(serve("./public"));



// 啟用路由

app.use(router.routes());



// 啟動服務器

app.listen(3000);

上述代碼中，我們在 koa 應用中使用了 koa-bodyparser 插件，對請求的數據進行了解析。在路由處理函數中，通過 ctx.request.body 獲取請求中的參數，并調用 openai API 生成圖片。

在實際應用中，可以根據需要，調整 koa-bodyparser 插件的配置，以滿足個性化的需求。

然后我們繼續運行代碼，發現代碼又報錯了：

這個報錯繼續讓 ChatGPT 自己解決吧，于是我按照官方示例進行引導：

問題12：使用 openai.createImage 改寫以上代碼

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");

});

這時候服務端代碼的基本邏輯已經差不多了，我們再讓 ChatGPT 把我們的前端代碼美化一下：

問題13：頁面太丑了，用 CSS 美化一下，加點動畫效果

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);

  }



  /* 圖片展示區域樣式 */

  #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>

好家伙，分分鐘就寫完了，下面我們來看看效果：

我們只問了 ChatGPT  13 個問題，他就幫我們寫出了一個簡單的圖片生成程序，我在用的過程中就一直在感嘆實在是再強大了，后續其實還可以問更多的問題來不斷完善這個程序，比如：生成圖片的過程中生成 loading 效果、為網站添加一些背景動畫效果 … 你可以在極短的時間里構建出一個出色的網站。

當然，它現階段還有一些不太完善的地方，比如他并不能直接給你一段非常完美的代碼，而是需要你持續引導。另外寫出的代碼也有一些 Bug，但是他也可以靠你的引導來找到這些 Bug，這個表現其實真的很像是一個真的程序員，而不是一個冷血的機器。

或許你會覺得，以上代碼不就是啟動了一個 Node.js 服務、調用了一些 API ，然后在前端把結果展示出來么，但是這可能是因為你對開發已經有一定經驗了，覺得這些代碼沒什么難度。但是如果是作為一個剛步入職場的新同學，或者開發經驗為零的人，讓他去自己寫出這些代碼并且成功運行可能要花上一天的時間。但是現在有了 ChatGPT 的輔助或許只需要花上一個小時，這是一個質的飛躍，未來可能徹底改變軟件開發這個行業。

根據我們的實驗結果來看，他或許現在并不能完全替代一個完整的程序員，但卻能讓一個人程序員 1.5 個人的活，也可以幫助低級工程師快速成長，讓排查 Bug、重構代碼變得更簡單。這不可避免的會影響到未來市場上對程序員數量的需求…

本項目的源碼在下面，感興趣的可以玩一玩，另外你也可以按照我的問題去引導 ChatGPT 幫你實現這個程序。

https://github.com/ConardLi/openai-nodejs-demo

最后

我讓他幫我列了一下本文的大綱，另外項目的 readme.md 文件也是 ChatGPT 自動生成的 ～

本文章轉載微信公眾號@code秘密花園

上一篇：

一文徹底搞懂機器學習 - 端到端機器學習

下一篇：

圖神經網絡(GNN)的數學原理
#你可能也喜歡這些API文章!

我們有何不同？

API服務商零注冊

多API并行試用

數據驅動選型，提升決策效率

查看全部API→
??

熱門場景實測，選對API

#AI文本生成大模型API

對比大模型API的內容創意新穎性、情感共鳴力、商業轉化潛力

25個渠道
一鍵對比試用API 限時免費

#AI深度推理大模型API

對比大模型API的邏輯推理準確性、分析深度、可視化建議合理性

10個渠道
一鍵對比試用API 限時免費