一、简介

最近，环绕ChatGPT和OpenAI的论题是层出不穷，国内外的技术工作者都掀起了一股学习OpenAI的技术浪潮，甚至有许多的媒体猜测OpenAI将会带来行业的革命，而国外一些大的企业也将OpenAI视为重要的竞争对手，比方Google和微软。

事实上，OpenAI 可以运用于任何触及理解或生成自然语言或代码的任务。他们提供一系列适用于不同的任务模型，并且还可以依据自己的需求微调自界说模型。这些模型可用于从内容生成到语义搜索和分类的所有领域，例如文本补充、代码编写、SQL翻译、JS助手聊天机器人等。

基于OpenAI API构建图片生成器

但是，关于OpenAI的运用，国内外都还处于起步阶段。关于OpenAI在商业方面的运用，资料也比较少，那假如利用OpenAI Api进行商业化开发，便是本文需求给咱们共享的。

二、构建图画生成器

在正式运用之前，咱们需求先恳求一个OpenAI账号，注册流程可以参阅：超详细的ChatGPT注册教程。

2.1 创立Node.js项目

首要，咱们创立一个Node.js项目，然后在项目中安装Express、nodemon、openai等插件。然后，翻开package.json文件，创立start和dev指令脚本，如下。

"devDependencies": {
  "body-parser": "^1.20.1",
  "dotenv": "^16.0.3",
  "express": "^4.18.2",
  "nodemon": "^2.0.20"
},
"dependencies": {
  "openai": "^3.1.0"
}

接着，创立index.js文件作为运用的进口文件，分别引进express和detenv。

const  express = require('express')
const dotenv=require('dotenv').config()
const port=process.env.PORT || 5000
const index = express()
index.listen(port, () => console.log(`启动服务器`))

然后，在package.json文件中添加启动脚本，如下。

"scripts": {
    "start": "node index.js",
    "dev": "nodemon index.js"
  },

2.2 恳求OpenAI Key

接下来，翻开OpenAI官网，点击右上角的头像按钮，获取OpenAI的Key，如下图。

基于OpenAI API构建图片生成器

2.3 创立Route和Controller

接下来，咱们创立业务路由，并添加业务代码。首要，创立一个openai_route.js路由，添加如下代码。

const express = require('express')
const router = express.Router()
router.post('/createImage',(req,res)=>{
    res.status(200).json({
        success:true
    })
})
module.exports=router;

接着，在index.js文件中引进openai_route.js，如下。

const openai=require('./routers/openai_route')
index.use('/openai',openai)
...//省掉其他代码

重新启动Node项目，然后运用Postman工具测验图画构建接口，测验地址为localhost:5000/openai/createImageVariation，恳求类型POST，如下图所示，恳求成功接口会回来成功的提示。

基于OpenAI API构建图片生成器

接下来，咱们新建openai_controller.js文件，将上文生成图画的函数界说到此文件，如下。

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

然后，在openai_routes.js文件中引进openai_controller.js，此时openai_controller.js文件中的内容改造后如下。

const express = require('express');
const {createImage}=require('../controller/openai_controller')
const router = express.Router();
router.post('/createImage',createImage)
module.exports=router;

最终，咱们重启Node项目，然后运用Postman工具测验上面的接口，假如可以正常回来数据，则说明没有任何问题。

基于OpenAI API构建图片生成器

2.4 OpenAI运用

2.4.1 基本运用

接下来，咱们在openai_controller.js文件中引进openai的API接口creatImage, 具体运用办法可以检查 OpenAI API 的Image generation。依据creatImage函数的入参要求，需求传入prompt、n和size三个参数，如下所示。

const response = await openai.createImage({
  prompt: "a white siamese cat",
  n: 1,
  size: "1024x1024",
});
image_url = response.data.data[0].url;

下面是咱们运用openai的createImage办法生成图片的办法，代码如下：

const {Configuration, OpenAIApi} = require('openai')
const configuration = new Configuration({
    apiKey: process.env.OPENAI_API_KEY
})
const openai = new OpenAIApi(configuration)
const createImage = async (req, res) => {
    try {
        const response = await openai.createImage({
            prompt: "a white siamese cat",
            n: 1,
            size: "1024x1024",
        })
        const imageUrl = response.data.data[0].url
        res.status(200).json({
            success: true,
            data: imageUrl
        })
    } catch (error) {
        console.log(error.response)
        res.status(400).json({
            success:false,
            error:'the image create failed'
        })
    }
}
module.exports={createImage}

接下来，咱们重启Node.js项目，并运用Postman测验接口，假如成功回来图片数据，则说明接口调用成功。

基于OpenAI API构建图片生成器

2.4.2 设置body

接下来，咱们看一下怎么在恳求过程中添加body部分。首要，咱们需求在index.js文件中敞开 body parser。

const express = require('express')
const index = express()
... //省掉其他代码
//敞开Body Parser
index.use(express.urlencoded({extended: false}))
index.use(express.json())

然后，在openai_controller.js中对获取到body解析里边的数据，如下：

const {Configuration, OpenAIApi} = require('openai')
const configuration = new Configuration({
    apiKey: process.env.OPENAI_API_KEY
})
const openai = new OpenAIApi(configuration)
const createImage = async (req, res) => {
    //获取Body数据
    const {prompt,size}=req.body
    const imageSize=size==='small'?'256x256':size==='medium'?'512x512':'1024x1024'
    try {
        const response = await openai.createImage({
            prompt: prompt,
            n: 1,
            size: imageSize,
        })
        const imageUrl = response.data.data[0].url
        res.status(200).json({
            success: true,
            data: imageUrl
        })
    } catch (error) {
        console.log(error.response)
        res.status(400).json({
            success:false,
            error:'the image create failed'
        })
    }
}
module.exports={createImage}

现在，咱们重启Node.js项目，然后运用Postman测验接口。这次测验咱们给body中添加了参数，咱们将prompt设置为“man on the moon”(月球上的人)，size挑选为“medium”，回来的s数据如下图。

基于OpenAI API构建图片生成器

2.4.3 设置静态文件

接下来，咱们新建一个public文件夹专门放置静态资源文件，然后在index.js文件中引进静态文件资源。首要，咱们新建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文件需求存放在public文件夹下 ，css款式的源码可检查github地址。然后，在index.js文件中设置静态文件。

const path = require('path')
...  //省掉其他代码
index.use(express.static(path.join(__dirname, 'public')));

2.4.4 表单事情监听

为了可以让项目看起来更完整，咱们还需求为上一步创立的表单添加事情监听。首要，在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);

2.4.5 新增获取图画函数

接下来，咱们在main.js文件中新增一个获取图画函数用于去调用前面界说的/openai/createImage接口，然后将获取到的图画设置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;
  }
  createImageRequest(prompt, size);
}
async function createImageRequest(prompt, size) {
  try {
    showSpinner();
    const response = await fetch('/openai/createImage', {
      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();
    const imageUrl = data.data;
    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);

最终，咱们启动项目，然后在浏览器中输入地址：http://localhost:5000/。启动成功后，咱们在页面中的输入框中输入【brad traversy person web development】，大小挑选【Medium】，点击提交按钮即可取得图片。

基于OpenAI API构建图片生成器

基于OpenAI API构建图片生成器

参阅：

项目源码：github.com/bradtravers…
openai官方文档：platform.openai.com/docs/introd…
更多示例：traversymedia.com