12月7號視頻發布他們介紹了使用DALL·E 模型生成并處理圖像，并將作為API使用，這意味著開發者可以將該系統構建到他們的應用程序、網站和服務中。

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

看看效果??

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

實現??

第一步 設置和安裝依賴

打開vscode編輯器，安裝node.js依賴
我們需要安裝Express 去創建路由，dotenv用于環境變量的設置

npm init -y

npm i express openai dotev

npm i -D nodemon

接著打開package.json文件，分別創建start和dev命令

第二步 引入Express服務端和ENV變量

創建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文件,設置端口號為5000

PORT=5000

OPENAI_API_KEY=''

其中OPENAI_API_KEY需要從OPENAI網站上申請

第三步 新增 Route 和 Controller

接下來我們創建一個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工具測試接口，發送POST請求

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

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測試接口，可以看到同上圖一樣的json返回。

第四步 OpenAI 庫的請求和響應

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

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

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測試接口，返回結果為imageUrl

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

第五步 請求body數據

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

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解析的數據

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中的數據

  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測試接口，并在body中增加參數，這次我們設置的prompt為“man on the moon”(月球上的人)，size選擇為“mudium”

打開imageUrl查看結果, 有沒有一種奇幻的感覺~

第六步 前端設置 Frontend Setup

接下來我們新建一個public文件夾去放置靜態資源文件，并在index.js文件中設置靜態文件。

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  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文件夾下。

第七步 表單事件監聽

接下來我們需要為第六步創建的表單增加事件監聽，在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);

此時我們點擊generate按鈕會在控制臺打印prompt, size的信息。

第八步 新增GenerateImageRequest()函數

同樣是main.js文件里，我們補充GenerateImageRequest()函數去調用/openai/generateimage接口，并設置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()函數

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

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

演示??

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

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

本文章轉載微信公眾號@OpenTiny

上一篇：

自主AI Agent 的構建｜Function Calling 技術實例探索

下一篇：

神經網絡算法 - 一文搞懂RNN（循環神經網絡）
#你可能也喜歡這些API文章!

我們有何不同？

API服務商零注冊

多API并行試用

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

查看全部API→
??

熱門場景實測，選對API

#AI文本生成大模型API

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

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

#AI深度推理大模型API

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

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