Как составить подсказку

Midjourney AI — это очень сложная генеративная модель искусственного интеллекта, которая обладает огромным потенциалом превращения вашего текстового описания в потрясающее произведение искусства.

Midjourney AI — это продукт исследовательской лаборатории Midjourney, которая состоит из небольшой группы специалистов по искусственному интеллекту. ИИ Midjourney был запущен в Discord как бот, поэтому вам нужно использовать несколько команд Midjourney для взаимодействия с ним.

Все генеративные модели ИИ, включая Midjourney, требуют ввода от пользователей в виде текстовых описаний, технически известных как подсказки. Без подсказок генераторы текста в изображение / генеративные модели искусственного интеллекта никуда вас не приведут.

Следовательно, в этой статье вы узнаете, что такое подсказки, несколько подсказок, веса подсказок и, в конечном итоге, как написать подсказки Ultimate Midjourney.

Особенность Midjourney в том, что он превосходит своих основных конкурентов, таких как DALL.E 2 и Stable Diffusion, благодаря даже легким подсказкам. Итак, давайте начнем с простых подсказок Midjourney.

Что такое подсказки Midjourney?

Подсказки — это текстовые описания на естественном человеческом языке, которые передают идеологию пользователя Midjourney и другим моделям искусственного интеллекта.

Подсказки могут быть очень простыми и однострочными, или они могут быть расплывчатыми. Midjourney даже принимает и интерпретирует смайлики как подсказки!

Запросом для этого изображения были:🍉🍴😋

Для одной подсказки Midjourney генерирует четыре изображения. Вы можете увеличить масштаб или создать больше вариантов любого из этих изображений. Нажмите “U” для увеличения масштаба и “V” для внесения изменений при использовании бота Midjourney Discord.

Примеры простых подсказок Midjourney

Moon 8K

A beautiful woman in saree

Sailboat in the dusk

A fantasy landscape, using watercolors, include details like trees

Советы по написанию подсказок Ultimate Midjourney, преобразующих текст в изображение

Теперь давайте перейдем к тому, как должны выглядеть правильные подсказки. Чтобы получить выдающиеся результаты от Midjourney, важно структурировать свои подсказки. Структурирование подсказки — это не что иное, как размещение определенных ключевых слов стиля и качества, а также художественного жаргона так, чтобы Midjourney нас понимал.

Чтобы написать подсказки Ultimate Midjourney, просто добавьте в запрос элементы, описанные ниже. Вам не нужно включать все элементы, обсуждаемые здесь, вы можете добавить их в соответствии с вашими требованиями.

Хорошая подсказка должна включать:

Качество: high-quality, 4k, and 8k Укажите параметр — quality [значение]

Например:–quality 0.25

В данном случае 0.25 указывает на значение 25%

–quality 5 соответственно 500%

Художественная среда: Еще одно простое в использовании ключевое слово чтобы получить разнообразные изображения, добавьте названия художественных средств, таких как карандашное искусство, рисование тушью, масляная пастель, акварель, скульптура из дерева / мрамора, линии силуэта, и т. д.

Расширенные подсказки для промежуточной генерации

Теперь, когда вы знаете, что такое простая подсказка и элементы хорошей подсказки, давайте перейдем к продвинутым методам подсказок в середине генерации.

Более продвинутая подсказка позволит получить результат значительно быстрее и качественнее.

В разделе Расширенные подсказки Midjourney вы узнаете об использовании нескольких подсказок, текстовых весов и отрицательных весов.

Несколько подсказок

В большинстве случаев пользователи Midjourney используют несколько подсказок, если хотят сложные результаты, такие как хот-дог, медуза, сахарная вата, арахисовое масло, уличный фонарь, пожарная машина, полная луна и т. д.

Чтобы использовать несколько подсказок в Midjourney, вам необходимо добавить “двойное двоеточие (::)” в ваших подсказках, рядом со словом, которое вы хотите выделить.

Фактический результат для открытого составного слова “цветочная клумба”:

Результат для нескольких подсказок:

Быстрое взвешивание

Взвешивание подсказок или взвешивание текста это концепция, которая указывает на важность слова, которому вы добавили вес.

Если вы хотите, чтобы Midjourney сосредоточился на определенном элементе, вы можете добавить вес только этой части. Давайте посмотрим, как это сделать.

Отрицательные подсказки

Теперь давайте поговорим о том, как исключить определенные атрибуты из произведений искусства, созданных искусственным интеллектом. Для этого вам нужно использовать параметр “–no” или отрицательный вес.

Изображение в виде подсказок Midjourney

В Midjourney вы даже можете вводить изображения в виде подсказок вместе с текстовым описанием. Для этого вам необходимо загрузить любое из ваших изображений в Midjourney Discord.

Затем откройте URL-адрес на новой вкладке, чтобы скопировать URL-адрес.

Наконец, вставьте этот URL-адрес, а затем введите запрос, как показано на рисунке ниже.

Вы также можете загрузить существующий URL-адрес из Интернета. Unsplash, Pixabay, Pexels и других. В любом случае, вам нужно открыть изображение на отдельной вкладке, чтобы получить прямой URL-адрес изображения.

Чтобы достичь желаемых результатов, важно помочь чату помочь вам. Придерживаясь каждой из последующих команд и улучшая свой запрос, вы сможете успешно достичь своих целей.

Контекст предложения

Как и люди, ИИ работает более эффективно при наличии дополнительного контекста. Очень важно точно определить предполагаемый результат работы ИИ и предоставить подсказку, соответствующую этой цели.

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

Простая подсказка: «Напишите про обслуживание клиентов».

Улучшенная подсказка: «Составьте письмо, подчеркивающее важность быстрого реагирования службы поддержки клиентов в индустрии электронной коммерции».

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

Вот еще один пример, на этот раз с различными деталями:

Простая подсказка: «Объясните, как приготовить макароны».

Улучшенная подсказка:

Указав роль пишущего, а также тип блюда из пасты и его ингредиенты, чат сможет дать более точное и ценное руководство.

Чтобы обеспечить оптимальные результаты работы ИИ, важно предоставить соответствующий контекст, подходящий для вашего случая использования. Это включает в себя указание желаемого формата вывода и, если необходимо, стиля написания.

Например, исходная подсказка звучит так: «Создайте отчет о возобновляемых источниках энергии».

Более эффективным было бы следующее задание: «Напишите подробный отчет в стиле научной статьи о жизнеспособности солнечной энергии как возобновляемого источника энергии для сельской общины в Африке».

Аналогичным образом, в бизнес-заданиях можно указать требуемый тон или стиль результата, например, «Составьте дружелюбное, но профессиональное электронное письмо новому клиенту, представляющее наши услуги» или «Составьте официальную биографию, подходящую для руководящей должности».

Включите полезную информацию заранее

Когда вы просите ИИ написать для вас вступительное слово, очень важно предоставить необходимую информацию напрямую, чтобы ИИ мог на нее сослаться. Это включает в себя вставку вашего резюме или профиля из социальной сети, в начало подсказки следующим образом:

Резюме Ивана: [вставьте здесь полное резюме].

Используя полученную информацию, составьте остроумную биографию для Ивана.

Другой распространенный вариант использования — попросить ИИ сделать резюме статьи. Чтобы сделать это с максимальной пользой, просто вставьте полный текст статьи и запросите краткое изложение ее содержания с 5 ключевыми моментами.

Важно отметить, что GPT-3 и GPT-4 имеют доступ только к информации, опубликованной до 2021 года, и не имеют доступа в Интернет. Поэтому невозможно предоставить URL-адрес для чтения ИИ, а полученные результаты могут быть неактуальными или неточными. Хотя иногда может показаться, что это работает, ИИ, по сути, использует текст в самом URL-адресе и свою память о том, что обычно можно найти на этом домене, чтобы выдать ответ.

Приведите примеры

Включение примеров в подсказку может обеспечить ИИ дополнительным контекстом и помочь ему понять тип ответа, который вы ищете. Например, если вы хотите, чтобы ИИ ответил на вопрос пользователя в формате чата, вы можете включить предыдущий пример разговора между пользователем и агентом. Чтобы указать, где ИИ должен начать печатать, закончите подсказку словами «Агент:».

Вот пример:

Вы — опытный пекарь, отвечающий пользователям. Отвечайте как агент.

Пример разговора:

Пользователь: Эй, вы можете мне чем-нибудь помочь?

Агент: Конечно! Чем я могу вам помочь?

Пользователь: Я хочу испечь торт, но не знаю, на какую температуру установить духовку.

Агент: Для большинства тортов духовку следует предварительно разогреть до 350°F (177°C).

Продолжение разговора:

Пользователь: [Вставьте вопрос пользователя].

Агент:

Сообщите ему длину ответа, который вы хотите

Чтобы убедиться, что ИИ выдает ответ в нужном диапазоне длины, полезно указать требуемое количество слов. Например, вместо расплывчатого запроса типа «Резюмируйте эту статью» вы можете дать более конкретный запрос типа «Напишите резюме этой статьи в 500 слов». Это позволит ИИ сгенерировать ответ, соответствующий вашим потребностям. Вы также можете использовать такие термины, как «короткий» или «длинный», если вы предпочитаете меньшую точность.

Определите ожидаемые форматы

Чтобы получить от GPT точный результат, важно указать формат ввода и желаемый формат вывода. GPT может генерировать языки кода, такие как Python и HTML, а также визуальные стили, такие как диаграммы и файлы CSV.

Например, рассмотрим следующие данные CSV:

Название продукта, количество.
Яблоко, 1
Апельсин, 2
Банан, 1
киви, 1
ананас, 2
Кокос, 1
Яблоко, 2
Апельсин, 1
банан, 1

Чтобы построить график частоты встречаемости каждого продукта в приведенном выше CSV-файле, необходимо указать входной формат как CSV и желаемый выходной формат как график.

Используйте некоторые из этих удобных выражений

Вот несколько полезных фраз, которые вы можете использовать для получения лучших результатов от OpenAI:

Помните, что эти фразы — всего лишь рекомендации и не всегда работают идеально. Важно экспериментировать с различными подсказками и подходами, чтобы найти то, что лучше всего подходит для вашего конкретного случая.

Всплывающая подсказка — это небольшой блок, его также называют тултип, который появляется при наведении или нажатии на элемент. Цель такого блока — дать более подробную информацию о содержимом элемента. Часто тултипы используются вместе с формами, чтобы добавлять пояснения к полям.

Подсказку можно сделать, создав отдельный элемент в HTML-разметке и прописав ему нужные стили в CSS. В статье подробно рассмотрим процесс создания тултипа.

Как сделать тултип

Создадим всплывающую подсказку для формы, в которой несколько полей для заполнения. Нам нужно разместить подсказку-уточнение к полю «Дети».

Для размещения тултипа создаём в HTML-файле <span> с классом tooltip, который располагается в разметке формы:

<!-- Форма поиска гостиницы -->
<section class="hotelsearch">
    <!-- элементы формы... -->
  <span class="tooltip">
  </span>
</section>

Чтобы подсказка всплывала, курсор необходимо наводить на какую-либо область или кнопку. Добавим внутрь <span> небольшую кнопку для наведения:

<span class="tooltip">
  <button class="tooltip-toggle" type="button">
    <svg class="tooltip-icon" width="1" height="9" viewBox="0 0 1 9" fill="currentColor" 
    xmlns="http://www.w3.org/2000/svg">
      <g clip-path="url(#a)">
       <path d="M0 9h1V3H0v6ZM1 0H0v1h1V0Z" />
      </g>
    </svg>
  </button>
</span>

Иконка для кнопки добавлена в формате SVG, так как это небольшой графический элемент.

Какой формат выбрать

Для размещения текста подсказки, создадим ещё один <span>:

<span class="tooltip">
  <button class="tooltip-toggle" type="button">
    <svg class="tooltip-icon" width="1" height="9" viewBox="0 0 1 9" fill="currentColor" 
    xmlns="http://www.w3.org/2000/svg">
      <g clip-path="url(#a)">
       <path d="M0 9h1V3H0v6ZM1 0H0v1h1V0Z" />
      </g>
    </svg>
  </button>
  <span class="tooltip-text">Укажите количество детей, которые будут с вами, возраст 
   которых от 6 до 18 лет. Дети до 6 лет размещаются бесплатно.</span>
</span>

Теперь переходим к стилизации тултипа, открываем CSS-файл.

Для начала напишем оформление для кнопки:

.tooltip-toggle {
  border: none;
  background-color: #83b3d3;
  padding: 0;
  margin: 0;
  display: block;
}

Также не забываем стилизовать саму иконку и добавить ей оформление при наведении курсора:

.tooltip-icon {
  width: 1px;
  height: 9px;
  color: #83b3d3;
  display: block;
}

.tooltip-toggle:hover .tooltip-icon {
  color:#68a2ca;
}

С помощью псевдоэлемента :hover мы меняем цвет иконки — в активном состоянии голубой оттенок становится немного темнее.

Затем задаём стиль текстовому блоку, описываем тип и размер шрифта, цвет фона и расположение текста:

.tooltip-text {
  font-family: "PT Sans", sans-serif;
  background-color: #333333;
  color: #FFFFFF;
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
  text-transform: none;
  padding: 20px 18px 18px 22px;
  border-radius: 10px;
  display: block;
  width: 256px;
}

Свойство border-radius делает уголки блока плавными, скругляет их.

Теперь нужно добавить стили всему контейнеру тултипа. Важно указать ширину и высоту с помощью свойств width и height, учесть отступы, добавить позиционирование:

.tooltip {
  position: absolute;
  margin-top: 24px;
  margin-left: 22px;
  width: 25px;
  height: 25px;
}

После этого ставим текстовый блок на необходимое место по макету, чтобы он располагался по центру относительно кнопки. Добавляем позиционирование и свойство z-index, чтобы расположить текст выше других элементов.

.tooltip-text {
  font-family: "PT Sans", sans-serif; / Шрифт текста /
  background-color: #333333; / Цвет фона /
  color: #FFFFFF; / Цвет текста /
  font-size: 16px; / Размер текста /
  line-height: 20px; / Высота строки /
  font-weight: 400; / Жирность текста /
  text-transform: none; / Преобразование текста /
  padding: 20px 18px 18px 22px; / Отступы внутри элемента /
  border-radius: 10px; / Скругление углов /
  width: 256px; / Ширина элемента /
  position: absolute; / Позиционирование элемента /
  bottom: 100%; / Расположение элемента относительно нижнего края /
  left: 50%; / Расположение элемента относительно левого края /
  z-index: 1; / Настройка наложения элемента /
  transform: translateX(-50%); / Сдвиг элемента по горизонтали /
  display: none; / Скрываем элемент по умолчанию /
}

Указываем свойство transform: translateX(-50%) для центрирования подсказки по горизонтали. С помощью свойства display со значением none скрываем блок, чтобы его не было видно постоянно.

И завершающим шагом добавляем появление текстового блока при наведении и фокусе на кнопку:

.tooltip-toggle:hover + .tooltip-text,
.tooltip-toggle:focus + .tooltip-text {
  display: block;
}

Тултип готов:

Несколько важных моментов

• После того как вы сверстали тултип, не забудьте сделать тест на переполнение текстом: попробуйте добавить больше текста в подсказку или в другие элементы формы. Важно, чтобы при изменениях вся форма оставалась удобной для восприятия и чтения.
• Убедитесь, что тултип отображается корректно в разных браузерах, обязательно протестируйте его на разных устройствах.
• Помните о доступности: проверьте, что подсказка легко доступна с помощью клавиатуры и что она может быть прочитана программами чтения с экрана.

Чтобы скринридер смог прочитать текст тултипа, ему нужно подсказать назначение блока. Для этого мы связываем кнопку и текст в тултипе с помощью aria-labelledby.

Задаём плашке с текстом role="tooltip":

<span class="tooltip">
  <button class="tooltip-toggle" type="button">
    <svg class="tooltip-icon" width="1" height="9" viewBox="0 0 1 9" fill="currentColor" 
    xmlns="http://www.w3.org/2000/svg">
      <g clip-path="url(#a)">
       <path d="M0 9h1V3H0v6ZM1 0H0v1h1V0Z" />
      </g>
    </svg>
  </button>
  <span class="tooltip-text" role="tooltip">Укажите количество детей, которые будут с вами, возраст 
   которых от 6 до 18 лет. Дети до 6 лет размещаются бесплатно.</span>
</span>

Затем добавляем кнопке атрибут aria-labelledby="tooltip-label-date", чтобы указать скринридеру какой контент зачитывать. И ставим id="tooltip-label-date" на плашку, которая будет зачитываться:

<span class="tooltip">
  <button class="tooltip-toggle" type="button" aria-labelledby="tooltip-label-date">
    <svg class="tooltip-icon" width="1" height="9" viewBox="0 0 1 9" fill="currentColor" 
    xmlns="http://www.w3.org/2000/svg">
      <g clip-path="url(#a)">
       <path d="M0 9h1V3H0v6ZM1 0H0v1h1V0Z" />
      </g>
    </svg>
  </button>
  <span class="tooltip-text" role="tooltip" id="tooltip-label-date">Укажите количество детей, которые 
  будут с вами, возраст которых от 6 до 18 лет. Дети до 6 лет размещаются бесплатно.</span>
</span>

Тултип доступен для чтения скринридером.

Материалы по теме

• Шаблон HTML-формы
• Как сделать кнопку в HTML
• Как сделать картинку ссылкой
• 3 способа валидации форм

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники