Я считаю, что все очарованы мощью ChatGPT, и это волнение побудило меня написать эту статью. Собственно, я хочу задать вам вопрос. Вы также знаете, что можно использовать модели OpenAI в своих проектах с помощью API?
OpenAI API — это решение, которое можно применять ко многим задачам, включая понимание или создание естественного языка или кода. В этом руководстве мы узнаем, как использовать API изображений для создания изображений на основе текстовой подсказки, и мы реализуем его, разработав веб-приложение на основе Flask.
Предпосылки
- Если у вас не установлен Python, установите его отсюда.
- Должна быть IDE (например, VSCode)
Шаги, чтобы следовать
- Создайте виртуальную среду в каталоге проекта
$ python -m venv venv $ . venv/bin/activate
2. Создайте файлы и папки в соответствии со следующей иерархией:
openai/ ├── venv ├── templates/ │ └── main.html ├── static/ │ └── index.css ├── .env └── app.py
HTML-файл
Файл HTML содержит текстовый ввод для получения приглашения от пользователя и отправки ввода для отправки запроса на получение сгенерированного изображения. Сохраненное изображение в папке static/ также встраивается в html-страницу.
<!DOCTYPE html>
<head>
<title>OpenAI</title>
<link rel="stylesheet" href="{{ url_for('static', filename='main.css') }}" />
</head>
<body>
<h1>Get picture</h1>
<form action="/" method="post">
<input type="text" name="text" placeholder="Describe image" required />
<input type="submit" value="Get Image" />
</form>
<div class="image">
<img src="{{ url_for('static', filename='im.png') }}">
</div>
</body>
CSS-файл
input {
font-size: 16px;
line-height: 24px;
color: #353740;
font-family: "ColfaxAI", Helvetica, sans-serif;
}
body {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 20px;
}
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 32px;
line-height: 40px;
font-weight: bold;
color: #202123;
margin: 16px 0 20px;
}
form {
display: flex;
flex-direction: column;
width: 320px;
}
input[type="text"] {
padding: 12px 16px;
border: 1px solid #434bec;
border-radius: 5px;
margin-bottom: 24px;
}
::placeholder {
color: #8e8ea0;
opacity: 1;
}
input[type="submit"] {
padding: 12px 0;
color: #fff;
background-color: #434bec;
border: none;
border-radius: 5px;
text-align: center;
cursor: pointer;
}
.image {
margin-top: 40px;
}
.image img{
width: 280px;
height: 280px;
}
.env-файл
Чтобы использовать API изображений, нам нужен ключ API, который можно создать здесь и сохранить в файле .env, как показано ниже:
OPENAI_API_KEY= "your_api_key"
app.py
Наше веб-приложение на основе Flask должно иметь следующие функции:
- получить приглашение с html-страницы
- вызовите API, чтобы получить изображение в формате base64 в соответствии с подсказкой
- Расшифруйте и сохраните изображение
- Вставить сохраненное изображение на html-страницу
import os
from dotenv import load_dotenv
import openai
import base64
import numpy as np
import cv2
from flask import Flask, render_template, request, url_for, redirect
load_dotenv()
app= Flask(__name__)
openai.api_key = os.getenv("OPENAI_API_KEY")
@app.route("/", methods= ("GET", "POST"))
def index():
if request.method=="POST":
text= request.form["text"]
response = openai.Image.create(
prompt= text,
n=1,
size= "1024x1024",
response_format= "b64_json"
)
im_bytes= base64.b64decode(response['data'][0]['b64_json'])
im_arr = np.frombuffer(im_bytes, dtype=np.uint8)
img= cv2.imdecode(im_arr, cv2.IMREAD_COLOR)
cv2.imwrite(os.path.join("static/", "im.png"), img)
return redirect(url_for("index"))
return render_template("index.html")
Просмотреть код
Чтобы завершить наше приложение, нам нужно установить следующие библиотеки:
import os from dotenv import load_dotenv import openai import base64 import numpy as np import cv2 from flask import Flask, render_template, request, url_for, redirect
Как вы помните, мы сохранили наш ключ API в файле .env, загрузили и установили его как переменные среды с помощью функции load_dotenv(). После создания экземпляра Flask и присвоения ему имени с помощью app= Flask(__name__) мы устанавливаем ключ OpenAI с помощью openai.api_key = os.getenv("OPENAI_API_KEY").
Функция python index() предназначена для получения подсказки для API из текстового ввода, когда у нас есть запрос POST, который происходит при отправке ввода.
if request.method=="POST":
text= request.form["text"]
Чтобы получить ответ от конечной точки генерации изображений, нам нужно указать некоторые параметры: prompt — это описание изображения, n — количество изображений, которое может быть от 1 до 10, размер изображения и формат изображения, который является base64 в наш случай.
response = openai.Image.create(
prompt= text,
n=1,
size= "1024x1024",
response_format= "b64_json"
)
Поскольку мы получаем изображение в формате base64, нам нужно преобразовать его в формат изображения. Во-первых, мы используем функцию base64.b64decode() для декодирования изображения в двоичные данные, а затем преобразуем его в одномерный массив с помощью функции numpy.frombuffer() и, наконец, функция cv2.imdecode() декодирует в формат изображения. Полученное изображение сохраняется в папке «static/» как «im.png», который встраивается в html-страницу.
im_bytes= base64.b64decode(response['data'][0]['b64_json'])
im_arr = np.frombuffer(im_bytes, dtype=np.uint8)
img= cv2.imdecode(im_arr, cv2.IMREAD_COLOR)
cv2.imwrite(os.path.join("static/", "im.png"), img)
В конце функция перенаправляет на «индекс», а затем отображает html-страницу.
Последний шаг
Мы уже завершили большую часть и пришло время творить чудеса. Для запуска приложения введите flask run в каталоге проекта, и вы получите следующее:
Наше приложение работает по адресу http://127.0.0.1:5000, и вы можете проверить это в своем браузере.
Прямо сейчас мы не можем видеть изображение, как показано ниже:
Напечатаем «белый кот на столе» и проверим еще раз.
Поздравляем!!! Вы успешно создали приложение для создания изображений. Не забудьте подписаться на меня, чтобы вместе делать новые увлекательные проекты.
Вы можете получить исходный код из репозитория GitHub.
