手把手教你使用 OpenAI 和 Node.js 構(gòu)建 AI 圖像生成器

    12月7號(hào)，知名人工智能研究機(jī)構(gòu) Open AI 在Youtub上發(fā)布視頻介紹使用OpenAI 和 DALL-E 模型創(chuàng)建一個(gè)網(wǎng)絡(luò)應(yīng)用程序，該應(yīng)用程序?qū)⒏鶕?jù)輸入的文本從頭開始生成圖像。    視頻鏈接：https://www.youtube.com/watch?v=fU4o_BKaUZE

前言??

大家好，這里是opentiny-official小助手前沿技術(shù)文章分享，用最通俗易懂的話分享業(yè)界前沿WEB技術(shù)是我們的座右銘~

介紹??

OpenAI官網(wǎng)文檔：https://beta.openai.com/docs/introduction

12月7號(hào)視頻發(fā)布他們介紹了使用DALL·E 模型生成并處理圖像，并將作為API使用，這意味著開發(fā)者可以將該系統(tǒng)構(gòu)建到他們的應(yīng)用程序、網(wǎng)站和服務(wù)中。

 opentiny-official小助手也跟著他們一起體驗(yàn)了一些這款廣為熱捧的AI藝術(shù)生成的體驗(yàn)工具~ 大家也快來試試吧。
?? Youtube指導(dǎo)視頻 ：https://www.youtube.com/watch?v=fU4o_BKaUZE

看看效果??

這次他們使用了nodejs作為后端，并輸入文本描述“frog on a computer drinking coffee” (一只在電腦旁喝咖啡的青蛙)，選擇圖片大小“Medium”，點(diǎn)擊“Generate”，接下來靜待片刻，就出現(xiàn)了如下的圖片~ 是不是還挺 cool 的！下面咱們就可以跟著作者一步一步地實(shí)現(xiàn)下。

實(shí)現(xiàn)??

第一步 設(shè)置和安裝依賴

打開vscode編輯器，安裝node.js依賴
我們需要安裝Express 去創(chuàng)建路由，dotenv用于環(huán)境變量的設(shè)置

npm init -y
npm i express openai dotev
npm i -D nodemon

接著打開package.json文件，分別創(chuàng)建start和dev命令

第二步 引入Express服務(wù)端和ENV變量

創(chuàng)建index.js文件作為入口文件，分別引入express和detenv

const express = require('express');
const dotenv = require('dotenv').config();
const port = process.env.PORT || 5000;

const app = express();

app.listen(port, () => console.log(`Server started on port ${port}`));

新建.env文件,設(shè)置端口號(hào)為5000

PORT=5000
OPENAI_API_KEY=''

其中OPENAI_API_KEY需要從OPENAI網(wǎng)站上申請(qǐng)

第三步 新增 Route 和 Controller

接下來我們創(chuàng)建一個(gè)route文件 openaiRoutes.js, 并在index.js新增使用openai的路徑

const express = require('express');
const dotenv = require('dotenv').config();
const port = process.env.PORT || 5000;

const app = express();
// 新增路由
app.use('/openai', require('./routes/openaiRoutes'));

app.listen(port, () => console.log(`Server started on port ${port}`));

openaiRoutes.js文件中新增

const express = require('express');
const router = express.Router();

router.post('/generateimage', (req, res) => {
  res.status(200).json({
    success: true,
  });
});

module.exports = router;

可以使用Postman工具測(cè)試接口，發(fā)送POST請(qǐng)求

接下來我們新建一個(gè)controller, controller里新建文件openaiController.js,在這個(gè)文件里我們定義一個(gè)生成圖像的函數(shù)

const generateImage = async (req, res) => {
  res.status(200).json({
    success: true,
  });
});

module.exports = { generateImage };

并在openaiRoutes.js文件里引入

const express = require('express');
// 從controller中引入
const { generateImage } = require('../controllers/openaiController');
const router = express.Router();

router.post('/generateimage', generateImage);

module.exports = router;

同樣也可以用Postman測(cè)試接口，可以看到同上圖一樣的json返回。

第四步 OpenAI 庫的請(qǐng)求和響應(yīng)

接下來我們?cè)趏penaiController.js文件中引入openai的API接口creatImage, 具體使用方法可以查看https://beta.openai.com/docs/guides/images

creatImage函數(shù)中定義prompt為Ploar bear on ice skates（一只溜冰的北極熊），n數(shù)量為1，大小size為 512x512。

const { Configuration, OpenAIApi } = require('openai');

const configuration = new Configuration({
  apiKey: process.env.OPENAI_API_KEY,
});
const openai = new OpenAIApi(configuration);

const generateImage = async (req, res) => {
  try {
    const response = await openai.createImage({
      prompt: 'Ploar bear on ice skates',
      n: 1,
      size: '512x512',
    });

    const imageUrl = response.data.data[0].url;

    res.status(200).json({
      success: true,
      data: imageUrl,
    });
  } catch (error) {
    if (error.response) {
      console.log(error.response.status);
      console.log(error.response.data);
    } else {
      console.log(error.message);
    }

    res.status(400).json({
      success: false,
      error: 'The image could not be generated',
    });
  }
};

module.exports = { generateImage };

同樣，我們使用Postman測(cè)試接口，返回結(jié)果為imageUrl

點(diǎn)開url地址，可以看到如下圖片~ 哈哈，真的有一只在滑冰的北極熊~

第五步 請(qǐng)求body數(shù)據(jù)

接下來我們啟用body解析，在index.js文件中添加Enable body parser部分內(nèi)容

const express = require('express');
const dotenv = require('dotenv').config();
const port = process.env.PORT || 5000;

const app = express();

// Enable body parser
app.use(express.json());
app.use(express.urlencoded({ extended: false }));

app.use('/openai', require('./routes/openaiRoutes'));

app.listen(port, () => console.log(`Server started on port ${port}`));

并在openaiController.js中獲取到body解析的數(shù)據(jù)

const { Configuration, OpenAIApi } = require('openai');

const configuration = new Configuration({
  apiKey: process.env.OPENAI_API_KEY,
});
const openai = new OpenAIApi(configuration);

const generateImage = async (req, res) => {
  // 獲取body中的數(shù)據(jù)
  const { prompt, size } = req.body;

  const imageSize =
    size === 'small' ? '256x256' : size === 'medium' ? '512x512' : '1024x1024';

  try {
    const response = await openai.createImage({
      prompt,
      n: 1,
      size: imageSize,
    });

    const imageUrl = response.data.data[0].url;

    res.status(200).json({
      success: true,
      data: imageUrl,
    });
  } catch (error) {
    if (error.response) {
      console.log(error.response.status);
      console.log(error.response.data);
    } else {
      console.log(error.message);
    }

    res.status(400).json({
      success: false,
      error: 'The image could not be generated',
    });
  }
};

module.exports = { generateImage };

同樣，我們用Postman測(cè)試接口，并在body中增加參數(shù)，這次我們?cè)O(shè)置的prompt為“man on the moon”(月球上的人)，size選擇為“mudium”

第六步 前端設(shè)置 Frontend Setup

接下來我們新建一個(gè)public文件夾去放置靜態(tài)資源文件，并在index.js文件中設(shè)置靜態(tài)文件。

const path = require('path');
const express = require('express');
const dotenv = require('dotenv').config();
const port = process.env.PORT || 5000;

const app = express();

app.use(express.json());
app.use(express.urlencoded({ extended: false }));

// Set static folder
app.use(express.static(path.join(__dirname, 'public')));

app.use('/openai', require('./routes/openaiRoutes'));

app.listen(port, () => console.log(`Server started on port ${port}`));

public文件夾里我們新建index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="css/spinner.css" />

    <script src="js/main.js" defer></script>
    <title>OpenAI Image Genrator</title>
  </head>
  <body>
    <header>
      <div class="navbar">
        <div class="logo">
          <h2>OpenAI Image Genrator</h2>
        </div>
        <div class="nav-links">
          <ul>
            <li>
              <a href="https://beta.openai.com/docs" target="_blank"
                >OpenAI API Docs</a
              >
            </li>
          </ul>
        </div>
      </div>
    </header>

    <main>
      <section class="showcase">
        <form id="image-form">
          <h1>Describe An Image</h1>
          <div class="form-control">
            <input type="text" id="prompt" placeholder="Enter Text" />
          </div>
          <!-- size -->
          <div class="form-control">
            <select name="size" id="size">
              <option value="small">Small</option>
              <option value="medium" selected>Medium</option>
              <option value="large">Large</option>
            </select>
          </div>
          <button type="submit" class="btn">Generate</button>
        </form>
      </section>

      <section class="image">
        <div class="image-container">
          <h2 class="msg"></h2>
          <img style="max-width:100%" src="" alt="" id="image" />
        </div>
      </section>
    </main>

    <div class="spinner"></div>
  </body>
</html>

并新增css文件夾用于存放css樣式 ，css樣式可查看github地址 public文件夾下。

第七步 表單事件監(jiān)聽

接下來我們需要為第六步創(chuàng)建的表單增加事件監(jiān)聽，在public文件夾下新建js文件夾并新增main.js文件。

function onSubmit(e) {
  e.preventDefault();

  document.querySelector('.msg').textContent = '';
  document.querySelector('#image').src = '';

  const prompt = document.querySelector('#prompt').value;
  const size = document.querySelector('#size').value;

  if (prompt === '') {
    alert('Please add some text');
    return;
  }
  console.log(prompt, size);
}

document.querySelector('#image-form').addEventListener('submit', onSubmit);

此時(shí)我們點(diǎn)擊generate按鈕會(huì)在控制臺(tái)打印prompt, size的信息。

第八步 新增GenerateImageRequest()函數(shù)

同樣是main.js文件里，我們補(bǔ)充GenerateImageRequest()函數(shù)去調(diào)用/openai/generateimage接口，并設(shè)置DOM中顯示圖像。

function onSubmit(e) {
  e.preventDefault();

  document.querySelector('.msg').textContent = '';
  document.querySelector('#image').src = '';

  const prompt = document.querySelector('#prompt').value;
  const size = document.querySelector('#size').value;

  if (prompt === '') {
    alert('Please add some text');
    return;
  }

  generateImageRequest(prompt, size);
}

// 新增GenerateImageRequest()函數(shù)
async function generateImageRequest(prompt, size) {
  try {
    showSpinner();

    const response = await fetch('/openai/generateimage', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        prompt,
        size,
      }),
    });

    if (!response.ok) {
      removeSpinner();
      throw new Error('That image could not be generated');
    }

    const data = await response.json();
    // console.log(data);

    const imageUrl = data.data;

    // DOM中顯示圖像
    document.querySelector('#image').src = imageUrl;

    removeSpinner();
  } catch (error) {
    document.querySelector('.msg').textContent = error;
  }
}

function showSpinner() {
  document.querySelector('.spinner').classList.add('show');
}

function removeSpinner() {
  document.querySelector('.spinner').classList.remove('show');
}

document.querySelector('#image-form').addEventListener('submit', onSubmit);

以上步驟補(bǔ)充完成之后我們就可以看看最終效果啦。

演示??

輸入框中輸入“brad traversy person web development”，大小輸入“Medium”，顯示效果如下： 

輸入框中輸入“cow dancing on a rainbow while juggling”，大小輸入“Medium”，顯示效果如下： 

最后?

以上就是 opentiny-official小助手 本周的前沿WEB技術(shù)分享了，也歡迎各位愛好WEB的小伙伴一起互助交流~??歡迎關(guān)注我們接下來的開源項(xiàng)目—OpenTiny， 微信搜索我們的微信小助手: opentiny-official，拉你進(jìn)群，了解它最新的動(dòng)態(tài)。

?? Code: https://github.com/bradtraversy/nodejs-openai-image