一、简介

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

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

但是，关于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，如下图。

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_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工具测验上面的接口，假如可以正常回来数据，则说明没有任何问题。

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测验接口，假如成功回来图片数据，则说明接口调用成功。

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数据如下图。

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】，点击提交按钮即可取得图片。

参阅：

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

基于OpenAI API构建图片生成器

一、简介

二、构建图画生成器

2.1 创立Node.js项目

2.2 恳求OpenAI Key

2.3 创立Route和Controller

2.4 OpenAI运用

2.4.1 基本运用

2.4.2 设置body

2.4.3 设置静态文件

2.4.4 表单事情监听

2.4.5 新增获取图画函数

作者信息

基于OpenAI API构建图片生成器

一、简介

二、构建图画生成器

2.1 创立Node.js项目

2.2 恳求OpenAI Key

2.3 创立Route和Controller

2.4 OpenAI运用

2.4.1 基本运用

2.4.2 设置body

2.4.3 设置静态文件

2.4.4 表单事情监听

2.4.5 新增获取图画函数

相关文章

原生应用要亡了!

面霸养成记；50万字2022最新Android11位大厂面试专题（五）

[js深入理解] 作用域一系列问题 🏍🛩 🚗

【译】PostgreSQL

作者信息