Привет всем, я ConardLi。

недавно ChatGPT Очень популярен, его производит OpenAI Разработана крупномасштабная языковая модель, которая может понимать человеческий язык и генерировать текст, изучая большой объем текста. Программисты вокруг меня чувствуют, что после ее использования останутся безработными. . .

за этим OpenAI да Исследовательский институт искусственного интеллекта,существуют Область искусственного интеллекта всегда была на лидирующих позициях,Его цель – помочь человечеству посредством исследований в области искусственного интеллекта.,сейчассуществоватьбольшой пожариз Илон·Мускус（Elon Musk）толькодаэта компанияиз Один из основателей。

Неужели это так удивительно? Чтобы убедиться в этом, давайте ChatGPT Приходите, помогите нам реализовать OPEN AI Что касается проекта автоматического создания изображений, давайте сначала посмотрим на эффект после его завершения. AI Создайте изображение для себя:

Должен сказать, от этой фотографии у людей мурашки по спине...

Далее давайте начнем с самого начала. Все следующие коды основаны на моих вопросах и указаниях. ChatGPT Создается автоматически.

Вопрос 1. Как использовать Node.js для автоматического создания изображений с помощью OPEN API?

ChatGPT Отвечать:

использовать Node.js и OPEN API Вы можете автоматически создавать изображения, выполнив следующие действия:

Сначала установите Node.js и Необходимы пакеты зависимостей, такие как openapi Вы можете завершить установку с помощью следующей команды:

npm install openapi

Затем создайте JavaScript подать и передать require Введение в команду openapi библиотека.

Далее вы можете использовать OPEN API Функция генерации изображений, написание кода для генерации изображений.

наконец,бегать JavaScript файл для автоматического создания изображений.

Если вам нужны подробные шаги, вы можете просмотреть OPEN API документацию или пример кода для получения дополнительной информации.

Хорошо, теперь мы знаем, для чего он нужен Node.js Разработчик предоставляет openai из npm пакет, далее мы вызовем его в проекте npm Просто упакуйте это.

Вопрос 2: Как использовать этот пакет? Расскажи подробно?

ChatGPT Отвечать:

1. в OPEN AI Зарегистрируйте аккаунт на сайте и получите API ключ.

Установите необходимые пакеты зависимостей, существующие в проекте, такие как openai Вы можете завершить установку с помощью следующей команды:

npm install openai

2. Создайте JavaScript подать и передать require Введение в команду openai библиотека.

3. Настройки OPEN AI ключ, который можно сделать:

const openai = require("openai");
openai.setApiKey("YOUR_API_KEY");

4.использовать OPEN AI Обеспечивает вызовы методов API,И передаем необходимые параметры. Например,Если ты хочешьиспользовать GPT-3 Модель генерирует текст и может использовать следующий код:

openai.completions.create({
  model: "text-davinci-002",
  prompt: "Once upon a time",
  temperature: 0.5
}).then((response) => {
  // do something with the response
});

5. Обработка API в ответ, например, будет генерироваться текст для сохранения локального файла.

Хорошо, один из ключевых моментов здесь — инициализация. OPEN AI Когда тебе нужен ключ,Теперь давайте спросим, ​​как он получает этот ключ.

Вопрос 3: Объясните пожалуйста подробно, где взять ключ?

ChatGPT Отвечать:

Если вы хотите быть в OPEN AI Зарегистрируйте аккаунт на сайте и получите API ключ, вы можете выполнить следующие шаги:

• Открыть OPEN AI Сайт, нажмите «Подписать» вверху главной страницы существования. Кнопка «Вход».
• В появившемся всплывающем окне на странице входа нажмите «Создать ссылку «Аккаунт».
• существовать На новой странице,Заполните соответствующую информацию,Полная регистрация.
• После завершения регистрации,Войдите в свой аккаунт проживания,Затем нажмите“API Ключи» ссылка для получения API ключ.

Хорошо, давайте перейдем к следующему шагу OPEN AI Зарегистрируйте учетную запись, вы можете найти следующую подсказку:

Это потому, что OPEN AI Еще нетсуществовать Китай предоставляет услуги,Таким образом, существует определенный порог для домашних друзей, которые хотят использовать или да.,Вам могут понадобиться следующие условия:

• Посетите зарубежные сайты (обязательно выберите зарубежные узлы)
• Откройте браузер в режиме инкогнито при регистрации (потому что для OPEN AI Ваша страна может быть определена на основе информации о вашем локальном кэше)
• для регистрации используйте зарубежную учетную запись электронной почты (рекомендуется outlook,Подтверждение номера мобильного телефона за рубежом не требуется.,Смело подавайте заявку)
• использовать зарубежный номер мобильного телефона или номер виртуального телефона с платформы для проверки (рекомендуется sms-activate,Аренда индийского номера мобильного телефона стоит всего 1 юань)

Хорошо, после завершения регистрации у нас есть OPEN AI изключ:

Приступим к реализации проекта. Мы выбираем. koa рамка, навстречу ChatGPT Запросите детали проекта.

Вопрос 4. Используйте koa framework + OPEN AI для реализации проекта, который автоматически генерирует изображения.

ChatGPT Отвечать:

1.использовать koa рамкаи OPEN AI Чтобы автоматически генерировать проекты изображений, вы можете выполнить следующие шаги:

2.Сначала установите Node.js и Необходимы пакеты зависимостей, включая koa фреймворк, опенай Библиотека и другие необходимые пакеты. Завершить установку можно следующей командой:

npm install koa openai

3.Затем создайте JavaScript подать и передать require Введение в команду koa рамкаи openai библиотека.

4.Следующий,Можно использовать промежуточное программное обеспечение Koa Frameiz и функцию маршрутизации.,Напишите код для реализации логики на стороне сервера.

5. В серверном коде установите OPEN AI из API ключ,ииспользовать openai Библиотека Обеспечивает вызовы методов API,Генерируйте картинки.

6.наконец,запускать Node.js программа,Вы можете получить доступ к серверу через браузер или другой клиент.,Реализовать функцию автоматического создания картинок.

ChatGPT Скажите нам, что нам нужны эти шесть шагов,Но да не сказал нам, как писать конкретный код.,Мы пытаемся продолжить спрашивать:

Вопрос 5. Перечислите подробный код для шага 3.

ChatGPT Отвечать:

Шаг 3,использовать koa кадриз промежуточного программного обеспечения и функции маршрутизации, написание серверной логики. Ниже приведен простой пример кода, который может обрабатывать запросы от клиента. POST просить,ииспользовать openai Изображение, созданное библиотекой:

const Koa = require("koa");
const openai = require("openai");

const app = new Koa();

// настраивать OPEN AI из API ключ
openai.apiKey = "your-api-key";

// Определите промежуточное программное обеспечение для обработки запросов и ответов.
app.use(async (ctx, next) => {
  if (ctx.method === "POST") {
    // Получить параметры в запросе
    const { model, prompt } = ctx.request.body;

    // использовать openai звонки в библиотеку API, генерировать изображения
    const response = await openai.completions.create({
      model,
      prompt,
      max_tokens: 2048,
      temperature: 0.5,
    });

    // Вернуть сгенерированное изображение клиенту
    ctx.body = response.data.complete;
  }
});

// Запустить сервер
app.listen(3000);

Посмотрев код, я обнаружил, что он звонил openai.completions.create Методу передаются четыре параметра. Что означают эти параметры? Спроси его еще раз:

Вопрос 6: Каковы значения четырех параметров, полученных завершением.create

ChatGPT Отвечать:

completions.create да openai Библиотека предоставляет метод из, который используется для вызова OPEN AI из API для генерации images Этот метод получает четыре параметра соответственно:

• model：Укажитеиспользоватьиз Модель。OPEN AI На выбор представлено множество моделей, каждая из которых имеет разные характеристики и функции. использовать при необходимости по требованию API Выбор документа, соответствующего модели.
• prompt：Укажите生成изкартинаизтекстовый контент。Этот параметр определяетизтекстовый контент会作для Модельизвходить,Модель будет основана на текстовом контенте. Генерируйте картинки.
• max_tokens：指定生成картинаизмаксимальная длина。Этот параметр определяет生成картинаизмаксимальная длина,Юнит для персонажа. Если он превышает указанную длину,Модель усекается до указанной длины.
• temperature：指定生成картинаизслучайность。Этот параметр определяет生成картинаизслучайность,Диапазон значенийдля 0 приезжать 1. Если предположить, что для 0, модель будет генерировать изображения в соответствии с исходным контентом без случайности;

Например, следующий вызов da completions.create Метод из примера, он использует предварительно обученный GPT-3 модель, генерирующая длину 100 символы, случайность 0.5,штраф за частоту словдля 0.0 из Изображения:

openai.completions.create({
  model: "text-davinci-002",
  prompt: "The quick brown fox jumps over the lazy dog.",
  max_tokens: 100,
  temperature: 0.5,
  frequency_penalty: 0.0,
})

Ответ включает пояснения по ранжированию и примеры кода, которые относительно понятны. Первый параметр. model 代表Модель,Итак, какие модели существуют?,Какая сцена подходит для существованияиспользовать? Мы продолжаем спрашивать:

Вопрос 7. Опишите характеристики и сценарии применения распространенных моделей в openai.completions.create.

ChatGPT Отвечать:

OPEN AI предоставляет множество предварительно обученных моделей.,Используется для удовлетворения различных сценариев применения. Например,Ниже приведены некоторые распространенные модели, их характеристики и сценарии применения:

• text-davinci-002：этотда一种大型Модель,Может выполнять различные задачи по обработке естественного языка. Он обладает очень мощными возможностями понимания языка.,Может использоваться для генерации текста.、Вопросы и ответы、Такие приложения, как машинный перевод.
• image-alpha-001：этотда一种图像生成Модель,Соответствующие изображения могут быть созданы на основе текстового содержимого. Имеет очень высокое качество сборки,Может использоваться для генерации изображений、Восстановление изображения、Такие приложения, как классификация изображений.
• dialogue-babi-001：этотда一种верно话生成Модель,Соответствующие диалоги могут быть созданы на основе контекста. Обладает высоким уровнем владения языком и логикой.,Может использоваться для генерации диалогов, чат-ботов, вопросов. и ответы Системные и другие приложения。

Эти модели — лишь некоторые из моделей, предоставляемых OPEN AI, и в реальных приложениях есть из чего выбирать.

хорошо,API Теперь, когда у нас есть четкое понимание основных концепций, давайте продолжим реализацию. Приведенный выше код относительно прост. Основная логика монтируется непосредственно в существование. koa Вверх, не добавляя никакой маршрутизации, давайте оптимизируем ее:

Вопрос 8. Оптимизируйте код на третьем этапе и добавьте маршрут в логику сервера

ChatGPT Отвечать:

const Koa = require("koa");
const openai = require("openai");
const Router = require("koa-router");

const app = new Koa();
const router = new Router();

// настраивать OPEN AI из API ключ
openai.apiKey = "your-api-key";

// Определить маршрутизацию, обработку POST просить
router.post("/", async (ctx, next) => {
  // Получить параметры в запросе
  const { model, prompt } = ctx.request.body;

  // использовать openai звонки в библиотеку API, генерировать изображения
  const response = await openai.completions.create({
    model,
    prompt,
    max_tokens: 2048,
    temperature: 0.5,
  });

  // Вернуть сгенерированное изображение клиенту
  ctx.body = response.data.complete;
});

// Включить маршрутизацию
app.use(router.routes());

// Запустить сервер
app.listen(3000);

В приведенном выше коде мы впервые представили koa-router плагин и создал Router Пример. Затем определяется маршрут для обработки запросов от клиента. POST просить。наконец,маршрутизация включена,и Запустить сервер。

использоватьмаршрутизацияизпреимуществодаможет быть разнымизпроситьметоди Пути обрабатываются отдельно,Делает код более понятным и простым в обслуживании. В практическом применении,Может быть основано на спросеи API документ,添加更多маршрутизация处理不同изпросить。

Помогли нам представить koa-router Плагин, код выглядит немного лучше. Далее приступаем к реализации фронтенд-страницы и продолжаем задавать вопросы:

Вопрос 9. Создайте HTML-страницу, пользователь вводит модель и параметры приглашения, а затем вызывает указанный выше интерфейс для отображения сгенерированного изображения на странице.

ChatGPT Отвечать:

Вы можете создать интерфейсную страницу, на которой будет вводиться пользовательский ввод. model、prompt параметры, а затем передать AJAX проситьпозвони вышеиз接口生成картина,и Отображение сгенерированных изображений на странице существования。具体метод如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Generate Image</title>
  </head>
  <body>
    <h1>Generate Image</h1>
    <form id="form">
      <label for="model">Model:</label>
      <input type="text" id="model" name="model" value="text-davinci-002" />
      <br />
      <label for="prompt">Prompt:</label>
      <input type="text" id="prompt" name="prompt" value="The quick brown fox jumps over the lazy dog." />
      <br />
      <button type="submit">Generate</button>
    </form>
    <div id="image"></div>
    <script>
      // Прослушивание событий отправки формы
      document.querySelector("#form").addEventListener("submit", async (event) => {
        // Запретить отправку формы из строки по умолчанию для
        event.preventDefault();

        // Получить параметры в форме
        const model = document.querySelector("#model").value;
        const prompt = document.querySelector("#prompt").value;

        // отправлять AJAX просить,生成картина
        const response = await fetch("http://localhost:3000", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({ model, prompt }),
        });
        const data = await response.json();

        // Отображение сгенерированных изображений на странице существования
        const image = document.querySelector("#image");
        image.innerHTML = `<img src="data:image/jpeg;base64,${data}" />`;
      });
    </script>
  </body>
</html>

Окей, код сгенерирован, нам нужно повесить его на сервер и продолжать задавать вопросы:

Вопрос 10. Привяжите эту HTML-страницу к маршруту Коа.

ChatGPT Отвечать:

к HTML страница привязана к koa измаршрутизация上,нуждатьсясуществовать koa серединаиспользовать koa-static Плагин, конкретный метод заключается в следующем:

const Koa = require("koa");
const openai = require("openai");
const Router = require("koa-router");
const serve = require("koa-static");

const app = new Koa();
const router = new Router();

// настраивать OPEN AI из API ключ
openai.apiKey = "your-api-key";

// Определить маршрутизацию, обработку POST просить
router.post("/", async (ctx, next) => {
  // Получить параметры в запросе
  const { model, prompt } = ctx.request.body;

  // использовать openai звонки в библиотеку API, генерировать изображения
  const response = await openai.completions.create({
    model,
    prompt,
    max_tokens: 2048,
    temperature: 0.5,
  });

  // Вернуть сгенерированное изображение клиенту
  ctx.body = response.data.complete;
});

// использовать koa-static Плагин, привязывающий каталог статических файлов
app.use(serve("./public"));

// Включить маршрутизацию
app.use(router.routes());

// Запустить сервер
app.listen(3000);

использовать koa-static Когда плагин связывает каталог статических файлов, указанный каталог является каталогом статических файлов. Требуется доступ ко всем статическим файлам, например: HTML、JavaScript и CSS Все файлы необходимо разместить в этом каталоге.

В приведенном выше коде мы устанавливаем каталог статических файлов на public,поэтомунуждаться把 HTML файл в public каталог, прежде чем к нему можно будет получить правильный доступ.

Например,если тыиз HTML Имя файла index.html,则нуждаться把它放приезжать public каталог, при доступе URL для http://localhost:3000/index.html。этот样,Когда браузер обращается к URL когда оно вернется index.html Содержимое файла.

Помогли в коде нам представить koa-static плагин и указал на public папку, мы помещаем HTML Закиньте файл.

Далее пытаемся запустить проект:

Затем нажмите Generate Позже я обнаружил, что сервис сообщил об ошибке:

Что это за ошибка дадля, продолжим спрашивать. ChatGPT

Вопрос 11. Код сообщил об ошибке: невозможно деструктурировать свойство model объекта ctx.request.body, поскольку оно не определено.

ChatGPT Отвечать:

существовать koa середина,хотеть Получить параметры в запросе,Можетсуществоватьсередина间件函数серединаиспользовать ctx.request.body объект,Но нужно обратить внимание,По умолчанию,koa данные проситьиз не будут анализироваться,поэтому ctx.request.body В да нет параметра из.

если ты想хотеть Получить параметры в запросе,则нуждатьсясуществовать koa серединаиспользовать koa-bodyparser плагин,该плагин能够自动вернопроситьиз Анализ данных,и将解析后из结果放入 ctx.request.body в объекте.

const Koa = require("koa");
const openai = require("openai");
const Router = require("koa-router");
const serve = require("koa-static");
const bodyParser = require("koa-bodyparser");

const app = new Koa();
const router = new Router();

// настраивать OPEN AI из API ключ
openai.apiKey = "your-api-key";

// использовать koa-bodyparser плагин,вернопросить Анализ данных
app.use(bodyParser());

// Определить маршрутизацию, обработку POST просить
router.post("/", async (ctx, next) => {
  // Получить параметры в запросе
  const { model, prompt } = ctx.request.body;

  // использовать openai звонки в библиотеку API, генерировать изображения
  const response = await openai.completions.create({
    model,
    prompt,
    max_tokens: 2048,
    temperature: 0.5,
  });

  // Вернуть сгенерированное изображение клиенту
  ctx.body = response.data.complete;
});

// использовать koa-static Плагин, привязывающий каталог статических файлов
app.use(serve("./public"));

// Включить маршрутизацию
app.use(router.routes());

// Запустить сервер
app.listen(3000);

В приведенном выше коде мы существуем koa использовать в приложении koa-bodyparser плагин,вернопроситьиз Данные были проанализированы。существоватьмаршрутизация处理函数середина,проходить ctx.request.body Получить параметры в запросе,и调用 openai API Генерируйте картинки.

существуют в практическом применении,Может использоваться по мере необходимости,Корректирование koa-bodyparser Плагины настраиваются для удовлетворения индивидуальных потребностей.

Затем мы продолжили выполнение кода и обнаружили, что код снова сообщает об ошибке:

Это сообщение об ошибке продолжается ChatGPT Вы можете решить эту проблему самостоятельно. Я воспользуюсь официальным примером, чтобы помочь вам:

Вопрос 12. Используйте openai.createImage, чтобы переписать приведенный выше код.

ChatGPT Отвечать:

const Koa = require("koa");
const Router = require("koa-router");
const bodyParser = require("koa-bodyparser");
const serve = require("koa-static");
const { Configuration, OpenAIApi } = require("openai");

const app = new Koa();
const router = new Router();

const configuration = new Configuration({
  apiKey: process.env.OPENAI_API_KEY,
});
const openai = new OpenAIApi(configuration);

app.use(bodyParser());

app.use(serve("public"));

router.post("/api/generate-image", async (ctx, next) => {
  const { model, prompt } = ctx.request.body;

  const response = await openai.createImage({
    model: "image-alpha-001",
    prompt,
  });

  const data = await response.json();

  ctx.body = {
    url: data.url,
  };
});

app.use(router.routes()).use(router.allowedMethods());

app.listen(3000, () => {
  console.log("Server is listening on port 3000");
});

На данный момент основная логика серверного кода почти завершена, давайте ChatGPT Украсьте наш интерфейсный код:

Вопрос 13. Страница слишком уродлива. Украсьте ее с помощью CSS и добавьте несколько эффектов анимации.

ChatGPT Отвечать:

<style>
  /* Центрированный макет */
  body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    font-family: sans-serif;
  }

  /* стиль формы */
  form {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50%;
    min-width: 300px;
    padding: 1em;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    background-color: white;
  }

  form > div {
    margin-bottom: 0.5em;
    display: flex;
    align-items: center;
  }

  label {
    font-weight: bold;
    margin-right: 0.5em;
  }

  input[type="text"] {
    width: 100%;
    padding: 0.5em;
    border: 1px solid #ccc;
    border-radius: 5px;
  }

  button {
    margin-top: 1em;
    padding: 0.5em 1em;
    border: none;
    border-radius: 5px;
    background-color: #0070f3;
    color: white;
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
  }

  button:hover {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  }

  /* Стиль области отображения изображения */
  #image-container {
    margin-top: 1em;
    display: none;
    width: 100%;
    max-width: 500px;
    height: auto;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    animation: fadeIn 0.5s;
  }

  #image {
    width: 100%;
    height: auto;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
</style>

Молодцы, я закончил писать за считанные минуты. Давайте посмотрим на эффект:

мы просто спросили ChatGPT 13 Задав вопрос, он помог нам написать простую программу создания изображений. Когда я использовал ее, я продолжал вздыхать, что существование настолько мощное. В будущем я действительно смогу задавать больше вопросов, чтобы постоянно улучшать эту программу, например: Генерируется в процессе генерации изображений из loading Эффекты, для веб-сайта добавлены некоторые эффекты фоновой анимации. ... Вы можете создать отличный сайт за очень короткое время.

конечно,На этом этапе все еще есть некоторые недостатки.,Например, он не может напрямую дать вам идеальный фрагмент кода.,идануждаться你持续引导。Также напишитеиз Еще есть коды Bug,нода他也Может靠你из Найти руководствоприезжатьэтот些 Bug,Эта производительность на самом деле очень похожа на работу настоящего программиста.,А не хладнокровная машина.

Возможно, вы подумаете, что приведенный выше код просто запускает Node.js Услуги, называемые некоторыми API , и тогда внешний интерфейс будет отображать результаты, но это может быть потому, что у вас уже есть некоторый опыт разработки и вы думаете, что эти коды не сложны. Но если вы новый одноклассник, только что пришедший на рабочее место, или человек с нулевым опытом разработки, ему может потребоваться целый день, чтобы написать эти коды самостоятельно и успешно их запустить. Но сейчас существует ChatGPT из辅助或许只нуждаться花上一个小时,Это качественный скачок,Будущее может полностью изменить индустрию разработки программного обеспечения.

По результатам наших экспериментов,,Он может осознать, что существование не может полностью заменить полноценного программиста.,но却能让一个人программа员 1.5 Личная деятельность также может помочь младшим инженерам быстро расти, позволяя устранять неполадки. Bug、Рефакторинг кода становится проще. Это неизбежно отразится на будущем спросе на программистов на рынке...

Исходный код этого проекта приведен ниже,Если вам интересно, вы можете поиграть,另外你也Может按照我из Вопросы для руководства ChatGPT Помогите реализовать эту программу.

https://github.com/ConardLi/openai-nodejs-demo

наконец,Я попросил его помочь мне составить план этой статьи.,Другие проекты readme.md Файлы также ChatGPT Автоматически генерировать из ～

Думаешь, эта штука тебе угрожает?

наконец

Если эта статья вам помогла, поставьте лайк.