Cách xây dựng Trình tạo hình ảnh trong React bằng API DALL-E

Tạo một thành phần tạo hình ảnh

bên trong /src thư mục, tạo một thư mục mới, đặt tên cho nó các thành phầnvà tạo một tệp mới bên trong nó có tên ImageGenerator.js. Thêm mã dưới đây vào tập tin này.

Bắt đầu bằng cách nhập các mô-đun cần thiết:

 import '../App.css'; 
import { useState } from "react"; 
import { Configuration, OpenAIApi } from "openai"; 

Mô-đun Cấu hình định cấu hình ứng dụng khách API của OpenAI để sử dụng, trong khi mô-đun OpenAIApi cung cấp các phương thức để tương tác với API của OpenAI. Hai mô-đun này giúp truy cập và sử dụng các tính năng của DALL-E từ ứng dụng React.

Tiếp theo, xác định một thành phần chức năng và thêm đoạn mã sau vào nó:

 function ImageGenerator() {
    const [prompt, setPrompt] = useState("");
    const [result, setResult] = useState("");
    const [loading, setLoading] = useState(false);
    const [placeholder, setPlaceholder] = useState(
      "Search for a lion with Paint Brushes painting the mona lisa painting..."
    );
    const configuration = new Configuration({
      apiKey: process.env.REACT_APP_OPENAI_API_KEY,
    });
  
    const openai = new OpenAIApi(configuration);
  
    const generateImage = async () => {
      setPlaceholder(`Search ${prompt}..`);
      setLoading(true);
      try {
        const res = await openai.createImage({
          prompt: prompt,
          n: 1,
          size: "512x512",
        });
        setLoading(false);
        setResult(res.data.data[0].url);
      } catch (error) {
        setLoading(false);
        console.error(`Error generating image: ${error.response.data.error.message}`);
      }
    }; 

Mã này định nghĩa một thành phần chức năng React được gọi là ImageGenerator. Thành phần này sử dụng một số biến trạng thái để quản lý dấu nhắc đầu vào, kết quả đầu ra, trạng thái tải và văn bản giữ chỗ.

Thành phần này cũng tạo ra một cấu hình đối tượng cho ứng dụng khách API OpenAI, bao gồm khóa API được truy xuất từ ​​biến môi trường.

không đồng bộ tạo hình ảnh chức năng sẽ chạy khi người dùng nhấp vào nút, chuyển qua lời nhắc của người dùng.

Sau đó, nó gọi các openai.createImage phương pháp để tạo một hình ảnh dựa trên dấu nhắc đã cho. Phương thức này trả về một đối tượng phản hồi bao gồm URL hình ảnh được tạo.

Nếu lệnh gọi API thành công, mã sẽ cập nhật kết quả biến trạng thái với URL và đặt trạng thái tải thành SAI. Nếu lệnh gọi API không thành công, nó vẫn đặt trạng thái tải thành SAImà còn ghi thông báo lỗi vào bảng điều khiển.

Cuối cùng, kết xuất các phần tử React JSX tạo nên thành phần Trình tạo hình ảnh.

     return (
      <div className="container">
        { loading ? (
        <>
          <h3>Generating image... Please Wait...</h3>
        </>
        ) : (
        <>
          <h2>Generate an Image using Open AI API</h2>
          <textarea
            className="app-input"
            placeholder={placeholder}
            onChange={(e) => setPrompt(e.target.value)}
            rows="10"
            cols="100"
          />
          <button onClick={generateImage}>Generate an Image</button>
          { result.length > 0 ? (
            <img className="result-image" src={result} alt="result" />
          ) : (
            <>
            </>
          )}
        </>
        )}
      </div>
    )
}
export default ImageGenerator 

Mã của thành phần này hiển thị có điều kiện các phần tử khác nhau dựa trên giá trị của đang tải biến số đưa ra.

Nếu như đang tải là đúng, nó hiển thị thông báo đang tải. Ngược lại, Nếu đang tải là sai, nó hiển thị giao diện chính để tạo hình ảnh bằng API OpenAI bao gồm vùng văn bản ghi lại lời nhắc của người dùng và nút gửi.

Các kết quả biến trạng thái giữ URL hình ảnh được tạo mà sau này được hiển thị trên trình duyệt.

Cập nhật Thành phần App.js

Thêm mã này vào tệp App.js của bạn:

 import './App.css';
import ImageGenerator from './component/ImageGenerator';
function App() {
  return (
    <div className="App">
      <header className="App-header">
       <ImageGenerator />
      </header>
    </div>
  );
}
export default App; 

Bây giờ bạn có thể tiếp tục và khởi động máy chủ phát triển để cập nhật các thay đổi và điều hướng đến http://localhost:3000 bằng trình duyệt của mình để kiểm tra chức năng tạo hình ảnh.

Để có được kết quả tốt nhất có thể khi sử dụng công cụ AI để tạo hình ảnh, hãy đảm bảo cung cấp lời nhắc chi tiết trong vùng văn bản. Điều này có nghĩa là mô tả hình ảnh càng kỹ lưỡng càng tốt, không bỏ sót chi tiết nào.

Quá trình này được gọi là Kỹ thuật nhanh chóng và nó bao gồm việc cung cấp các lời nhắc chi tiết để mô hình ngôn ngữ có thể tạo ra kết quả tốt nhất dựa trên thông tin đầu vào do người dùng cung cấp.

Với sự gia tăng gần đây của phần mềm AI có sẵn trên thị trường, theo đuổi sự nghiệp trong Kỹ thuật nhanh chóng có thể là một cơ hội sinh lợi.

Tối đa hóa sức mạnh của các mô hình ngôn ngữ trong phát triển phần mềm

Các công cụ AI được hỗ trợ bởi các mô hình ngôn ngữ lớn đã gây bão trong lĩnh vực Phát triển phần mềm vì các tính năng và khả năng đáng kinh ngạc của chúng.

Những công cụ này có tiềm năng cải thiện hệ sinh thái phần mềm hiện tại bằng cách cho phép các nhà phát triển tích hợp các tính năng AI thú vị giúp nâng cao việc sử dụng các sản phẩm khác nhau—việc sử dụng công nghệ AI mang đến cơ hội duy nhất để xây dựng phần mềm theo những cách sáng tạo.