Фото img: ImgBB — Загрузить Фото — Хостинг Картинок

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

«Все, что я сказал до сих пор, можно резюмировать следующим образом: создавайте адаптируемые страницы… Разработка адаптируемых страниц — это разработка доступных страниц. трудности, к информации».

— Джон Оллсопп, Дао веб-дизайна

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

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

Это скоро изменится.

Последняя спецификация элемента является результатом многолетних споров о том, как сделать так, чтобы изображения адаптировались. Это дает авторам семантические способы группировать несколько версий одного и того же изображения, причем каждая версия имеет технические характеристики, которые делают ее более или менее подходящей для конкретного пользователя. Новая спецификация достигла широкого консенсуса и внедряется в Chrome, Opera, Firefox и Edge (ссылка) по мере того, как я печатаю.

Самое время начать изучать этот материал сейчас !

Больше после прыжка! Продолжить чтение ниже ↓

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

1. Наши изображения должны быть в состоянии четко отображать различных устройств-пикселей с. Мы хотим, чтобы экраны с высоким разрешением получали изображения с высоким разрешением, но мы не хотим отправлять эти изображения пользователям, которые не увидят все эти лишние пиксели. Назовем это 9Вариант использования 0014 device-pixel-ratio .
2. Если наш макет гибкий (т. е. адаптивный), то наши изображения должны будут сжаться и растянуться, чтобы соответствовать ему. Мы назовем этот вариант использования плавного изображения.
3. Обратите внимание, что эти два варианта использования тесно связаны: для решения обоих нам нужно, чтобы наши изображения были доступны в нескольких разрешениях, чтобы они эффективно масштабировались. Мы будем называть решение обеих проблем одновременно вариантом использования изображения переменного размера
4. Иногда нам нужно адаптировать наши изображения способами, выходящим за рамки простого масштабирования. Мы можем захотеть обрезать изображения или даже слегка изменить их содержимое. Мы назовем это вариантом использования арт-директора.
5. Наконец, разные браузеры поддерживают разные форматы изображений. Мы могли бы захотеть отправить модный новый формат, такой как WebP, в браузеры, которые могут его отображать, и вернуться к проверенным старым JPEG в браузерах, которые этого не делают. Мы назовем это вариантом использования с переключением типов.

Новая спецификация включает функции для всех этих случаев. Давайте посмотрим на них один за другим.

Начнем просто с изображения фиксированной ширины, которое мы хотим адаптировать к различным отношениям устройств к пикселям с. Для этого воспользуемся первым инструментом, который дает нам новая спецификация для группировки и описания источников изображений: атрибутом srcset .

Допустим, у нас есть две версии изображения:

• small.jpg (320 × 240 пикселей)
• large.jpg (640 × 480 пикселей)

Мы хотим отправить large.jpg только пользователям с экранами высокого разрешения. Используя srcset , мы разметили бы наше изображение следующим образом:

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

src предназначен для браузеров, которые не понимают источник . alt , конечно же, включен для браузеров, которые вообще не отображают изображения. Один элемент и три атрибута дают нам изображение, которое выглядит четким на устройствах с высоким разрешением и эффективно ухудшается вплоть до текста. Не слишком потертый!

Примеры использования гибких изображений и изображений переменного размера

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

Предварительная загрузка изображений, по словам Стива Содерса, «самое большое улучшение производительности, которое когда-либо делали браузеры». Изображения часто являются самыми тяжелыми элементами на странице; загрузка их как можно скорее отвечает интересам каждого. Таким образом, первое, что браузер сделает со страницей, — просканирует HTML в поисках URL-адресов изображений и начнет их загрузку. Браузер делает это задолго до того, как сконструирует DOM, загрузит внешний CSS или нарисует макет. Таким образом, решить вариант использования плавного изображения сложно; нам нужно, чтобы браузер выбрал источник, прежде чем он узнает размер отображаемого изображения.

То, что браузер всегда знает, — это среда, которую он отображает в : размер области просмотра, разрешение экрана пользователя и тому подобное. Мы используем эту информацию, когда используем медиа-запросы, которые адаптируют наши макеты к конкретным средам просмотра.

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

Как оказалось, это плохая идея. Хотя это технически выполнимо, вычисление необходимых медиа-запросов утомительно и подвержено ошибкам. Лучше всего указать просто сообщить браузеру отображаемый размер изображения !

Как только мы сообщаем браузеру, сколько пикселей требуется (с помощью нового атрибута, размеров ) и сколько пикселей имеет каждый из источников (через дескрипторы w в srcset ), выбор источника становится тривиальным. Браузер выбирает наименьший источник, который все еще будет выглядеть достаточно четким в своем контейнере.

Давайте сделаем это конкретным, развивая наш предыдущий пример. Предположим, теперь у нас есть три версии нашего изображения:

• large.jpg (1024 × 768 пикселей)
• medium.jpg (640 × 480 пикселей)
• small.jpg (320 × 240 пикселей)

И мы хотим поместить их в гибкую сетку — сетку, которая начинается как один столбец, но переключается до трех столбцов в больших окнах просмотра, например:

Вот как мы его разметим:

Мы снова используем srcset , но вместо дескрипторов x мы присоединяем к нашим источникам дескрипторы w . Они описывают фактическую ширину в пикселях файла, на который делается ссылка. Итак, если вы «Сохранить для Интернета…» с разрешением 1024 × 768 пикселей, то разметьте этот источник в srcset как 1024w .

Обратите внимание, что мы указываем только ширину изображения . А почему не высоты? Изображения в нашем макете ограничены по ширине; их ширина явно задается CSS, а высота — нет. Подавляющее большинство адаптивных изображений в дикой природе также ограничены по ширине, поэтому спецификация упрощает работу, имея дело только с шириной. Есть несколько веских причин для включения высоты, но не сейчас.

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

Мы делаем это, передавая браузеру длину CSS, которая описывает визуализируемую ширину изображения. Длина CSS может быть абсолютной (например, 99px или 16em ) или относительно области просмотра ( 33.3vw , как в нашем примере). Эта часть «относительно области просмотра» позволяет изображениям изгибаться.

Если наше изображение занимает треть области просмотра, то наш атрибут размеров должен выглядеть так:

 размеры="33.3vw"
 

Наш пример не так прост. Наш макет имеет точку останова на 36 ems. Когда окно просмотра уже, чем 36 ems, макет меняется. Ниже этой точки останова изображение будет занимать 100% ширины области просмотра. Как мы закодируем эту информацию в нашем размеры атрибут?

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

 размеры="(мин-ширина: 36em) 33.3vw,
   100vw"
 

Это его формат:

 размеры="[медиа-запрос] [длина],
   [медиа-запрос] [длина],
   и т. д…
   [длина по умолчанию]"
 

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

Имея на выбор размеров длины и набор источников с w дескрипторами в srcset , у браузера есть все необходимое для эффективной загрузки изображения в гибком, отзывчивом макете.

Замечательно, размеров и w в srcset также дают браузеру достаточно информации, чтобы адаптировать изображение к различным соотношениям пикселей устройства s. Преобразовав длину CSS, мы даем размеров в пиксели CSS; и, умножив это на 9 пользователей0014 device-pixel-ratio , браузер знает количество пикселей устройства, которое ему необходимо заполнить — независимо от того, какое у пользователя значение device-pixel-ratio .

Таким образом, в то время как пример в нашем сценарии использования device-pixel-ratio работает только для изображений с фиксированной шириной и охватывает только экраны 1x и 2x, этот пример srcset и размеров охватывает не только использование гибких изображений. случае, но и адаптируется к произвольной плотности экрана.

Мы решили обе проблемы сразу. Говоря языком, изложенным в начале этой статьи, w в srcset и размеры охватывают вариант использования изображения переменного размера.

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

Еще кое-что. В нашем примере размер изображения всегда представляет собой простой процент от ширины области просмотра. Что, если бы наш макет объединил как абсолютную, так и относительную длину, скажем, добавив фиксированную боковую панель размером 12 em к макету из трех столбцов, как здесь?

Мы использовали бы удивительно хорошо поддерживаемую функцию calc() в нашем атрибуте размеров .

 размеры = "(минимальная ширина: 36em) calc (.333 * (100vw - 12em)),
   100vw"
 

А… сделанный!

Пример использования Art-Direction

Теперь мы готовим на газу! Мы научились размечать изображения переменного размера, которые эффективно увеличиваются и уменьшаются, обеспечивая четкое отображение на любых макетах, окнах просмотра и экранах.

Но что, если мы хотим пойти дальше? Что, если бы мы хотели адаптироваться больше?

Когда в прошлом году Apple представила iPad Air, на ее веб-сайте было размещено огромное изображение устройства. Это может показаться довольно непримечательным, если только вы — как обычно делают гики веб-дизайна — навязчиво не изменили размер окна браузера. Когда область просмотра была достаточно короткой, iPad делал замечательную вещь: он поворачивался, чтобы лучше соответствовать области просмотра!

Мы называем такие вещи «художественным направлением».

Apple управляла своим изображением, злоупотребляя HTML и CSS: размечая свое изображение — которое явно содержало — как пустую div и переключение его background-image с помощью CSS. Новая спецификация позволяет авторам делать такое художественное направление на основе точек останова полностью в HTML.

Спецификация облегчает это, накладывая другой метод группировки источников поверх srcset : и source .

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

Для этого нам потребуется несколько дополнительных источников изображений:

• croped-small.jpg (96 × 96 пикселей)
• croped-large.jpg (192 × 192) пикселей)
• small.jpg (320 × 240 пикселей)
• medium.jpg (640 × 480 пикселей)
• large.jpg (1024 × 768 пикселей) 910094 9000 ? Вот так:

   <картинка>
     
     
     
  
   

  Этот пример настолько сложен, насколько это возможно, в нем используются все функции, которые мы рассмотрели до сих пор. Давайте сломаем это.

  Элемент содержит два источник s и img . Исходники представляют собой две отдельные художественные версии изображения (квадратная обрезка и полная обрезка). (Обязательно) img служит нашим запасным вариантом. Как мы скоро обнаружим, большую часть фактической работы он выполняет за кулисами.

  Во-первых, давайте внимательно посмотрим на этот первый источник :

  Этот источник представляет полную необрезанную версию нашего изображения. Мы хотим показывать полное изображение только в трехколоночной раскладке — то есть, когда окно просмотра шире 36 ems. Первый атрибут здесь, media=“(min-width: 36em)” , делает это возможным. Если запрос в атрибуте media оценивается как true , тогда браузер должен использовать этот источник ; в противном случае оно пропускается.

  Два других атрибута источника — srcset и размеры — в основном скопированы из нашего предыдущего примера с изображением переменного размера. Одно отличие: поскольку этот источник будет выбран только для макета с тремя столбцами, нашему атрибуту размеров нужна только одна длина, 33.3vw .

  Когда область просмотра уже 36 ems, медиа-запрос первого источника будет оцениваться как false , и мы перейдем ко второму:

  Представляет наш небольшой квадратный урожай. Эта версия отображается с фиксированной шириной, но мы по-прежнему хотим, чтобы она отображалась четко на экранах с высоким разрешением. Таким образом, мы предоставили версии 1x и 2x и разметили их простыми дескрипторами x .

  Наконец, мы подошли к удивительно важному ( действительно требуется! ) img .

  Любой дочерний элемент audio или video , который не является источником , рассматривается как запасной контент и скрывается в поддерживающих браузерах. Следовательно, вы могли бы предположить то же самое о изображение здесь. Неправильный! Пользователи на самом деле видят элемент img , когда мы используем . Без img изображения нет; и все его source просто существуют, чтобы кормить его источником.

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

  Таким образом, повторное использование новой спецификации img . Сам невидим, немного похож на волшебный span . Его исходные s предназначены только для того, чтобы браузер мог рисовать альтернативные версии изображения. Как только исходный URL-адрес выбран, этот URL-адрес передается в изображение . На практике это означает, что любые стили, которые вы хотите применить к визуализированному изображению (например, max-width: 100% ), должны применяться к img , а не к .

  Итак, переходим к нашей последней функции.

  Вариант использования с переключением типов

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

   <картинка>
     
      png" />
     
  
   

  Если браузер не понимает тип мультимедиа image/svg , он пропускает первый источник ; если он не может сделать орёл или решка image/png , то он возвращается к img и GIF.

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

  Вот и все!

  Вот и все: каждая функция в новой спецификации и ее обоснование. Всего srcset , x , w , размеры , , source , media и type дают нам богатый набор инструментов, с помощью которых можно сделать изображения действительно адаптируемыми — изображения, которые могут ( наконец! ) эффективно перемещаться в гибких макетах и широкий выбор устройств.

  Спецификация еще не окончательная . Первые реализации находятся в стадии разработки и проводятся под экспериментальными флагами; его разработчики и авторы ежедневно работают вместе над уточнением деталей спецификации. Все это происходит под эгидой группы сообщества Responsive Images. Если вы хотите продолжить, присоединяйтесь к группе, загляните на канал IRC, оцените проблему GitHub или отправьте новую, подпишитесь на информационный бюллетень или подпишитесь на RICG в Twitter.

  Дополнительная литература на SmashingMag:

  • Выбор решения для адаптивных изображений
  • Одно решение для адаптивных изображений
  • Адаптивные изображения в WordPress с художественным оформлением
  • Модели распространения в изображение Imagen: Модели распространения текста в изображение

    беспрецедентный фотореализм × глубокий уровень понимания языка

    беспрецедентный фотореализм

    глубокий уровень понимания языка

    Исследование Google, команда Brain Team

    Мы представляем Imagen, модель распространения текста в изображение с беспрецедентной степенью фотореализма и глубоким уровнем понимания языка. Imagen опирается на мощь больших языковых моделей преобразования в понимании текста и опирается на силу моделей диффузии в высокоточном создании изображений. Наше ключевое открытие состоит в том, что универсальные большие языковые модели (например, T5), предварительно обученные на текстовых корпусах, удивительно эффективны. эффективен при кодировании текста для синтеза изображений: увеличение размера языковой модели в Imagen повышает как точность выборки, так и текст изображения выравнивание гораздо больше, чем увеличение размера модели рассеяния изображения. Imagen достигает нового современного балла FID 7,27 в наборе данных COCO, даже не обучаясь на COCO, и люди-оценщики считают, что образцы Imagen находятся на одном уровне с самими данными COCO в выравнивании изображения и текста. Для более глубокой оценки моделей преобразования текста в изображение мы представляем DrawBench, всеобъемлющий и сложный эталонный тест для моделей преобразования текста в изображение. С помощью DrawBench мы сравниваем Imagen с последними методами, включая VQ-GAN+CLIP, модели скрытой диффузии и DALL-E 2, и обнаруживаем, что оценщики-люди предпочитают Imagen другим моделям в параллельных сравнениях, как с точки зрения качества выборки и выравнивание изображения и текста.

    Еще от семьи Imagen:

    Мозг едет на ракетном корабле, направляющемся к Луне. Мозг едет на ракетном корабле, направляющемся к Луне. Драконий фрукт в поясе для карате в снегу. Драконий фрукт в поясе для карате в снегу. Маленький кактус в соломенной шляпе и неоновых солнцезащитных очках в пустыне Сахара. Маленький кактус в соломенной шляпе и неоновых солнцезащитных очках в пустыне Сахара. Фотография собаки корги на велосипеде на Таймс-сквер. На нем солнцезащитные очки и пляжная шляпа. Фотография собаки корги, едущей на велосипеде на Таймс-сквер. На нем солнцезащитные очки и пляжная шляпа. Плюшевые мишки плавают на Олимпийских играх в беге баттерфляем на 400 м. Плюшевые мишки плавают на Олимпийских играх в беге на 400 м баттерфляем. текст «Imagen», выходящий из книги сказок. Прозрачная скульптура утки из стекла. Скульптура находится перед картиной пейзажа. Прозрачная скульптура утки из стекла. Скульптура стоит перед картиной с пейзажем. Единственный луч света входит в комнату с потолка. Луч света освещает мольберт. На мольберте картина Рембрандта с изображением енота. Единственный луч света входит в комнату с потолка. Луч света освещает мольберт. На мольберте картина Рембрандта с изображением енота.

    Визуализация Imagen. Imagen использует большой замороженный кодировщик T5-XXL для кодирования входного текста во встраивание. Модель условной диффузии отображает встраивание текста в изображение размером 64×64. Imagen также использует текстовые модели диффузии сверхвысокого разрешения для увеличения разрешения изображения до 64×64→256×256 и 256×256→1024×1024.

    • Мы показываем, что большие предварительно обученные кодировщики замороженного текста очень эффективны для задачи преобразования текста в изображение.
    • Мы показываем, что масштабирование размера предварительно обученного кодировщика текста более важно, чем масштабирование размера диффузионной модели.
    • Мы представляем новый пороговый диффузионный пробоотборник, который позволяет использовать очень большие направляющие веса без классификатора.
    • Мы представляем новую эффективную архитектуру U-Net, которая более эффективна с точки зрения вычислений, памяти и быстрее сходится.
    • На COCO мы достигаем нового современного COCO FID 7,27; и оценщики-люди считают, что образцы Imagen не уступают эталонным изображениям с точки зрения выравнивания изображения и текста.

    Imagen представляет новый современный COCO FID.

    Модель	COCO FID ↓ ​​
    Обучение на COCO
    AttnGAN (Xu et al., 2017)	35,49
    DM-GAN (Zhu et al. , 2019)	32,64
    DF-GAN (Тао и др., 2020)	21,42
    DM-GAN + CL (Ye et al., 2021)	20,79
    XMC-GAN (Zhang et al., 2021)	9,33
    ЛАФИТ (Чжоу и др., 2021)	8,12
    Make-A-Scene (Gafni et al., 2022)	7,55
    Не обучался работе с COCO
    DALL-E (Рамеш и др., 2021)	17,89
    GLIDE (Nichol et al., 2021)	12,24
    ДАЛЛ-Э 2 (Рамеш и др., 2022)	10,39
    Imagen (наша работа)	7,27

    • Параллельная оценка человека.
    • Систематически проверяйте: композиционность, кардинальность, пространственные отношения, объемный текст, редкие слова и сложные подсказки.
    • Оценщики-люди категорически предпочитают Imagen другим методам как с точки зрения выравнивания изображения и текста, так и с точки зрения точности изображения.

    Нажмите на слово ниже и Imagen!

    Фотография картины маслом с изображением

    пушистая панда британская короткошерстная кошка персидская кошка сиба-ину собака енот

    в ковбойской шляпе и солнцезащитных очках и

    красная рубашка черная кожаная куртка

    игра на гитаре езда на велосипеде скейтбординг

    в саду. на пляже. на вершине горы.

    Диффузионные модели добились большого успеха в генерации изображений [1, 2, 3, 4]. Модели авторегрессии [5], GAN [6, 7] Методы на основе VQ-VAE Transformer [8, 9] добились значительного прогресса в исследованиях преобразования текста в изображение. Совсем недавно модели Diffusion были исследованы для генерации текста в изображение [10, 11], включая параллельную работу DALL-E 2 [12]. DALL-E 2 использует предварительную диффузию для скрытых CLIP и модели каскадной диффузии для создания изображений с высоким разрешением 1024×1024. Мы считаем, что Imagen намного проще, так как Imagen не требует изучения латентного априорного анализа, но при этом достигает лучших результатов как в MS-COCO FID, так и в параллельной оценке человеком на DrawBench. GLIDE [10] также использует каскадные модели диффузии для преобразования текста в изображение, но Imagen использует более крупные предварительно обученные замороженные языковые модели, которые, как мы обнаружили, играют важную роль как для точности изображения, так и для выравнивания изображения и текста. XMC-GAN [7] также использует BERT в качестве текстового кодировщика, но мы масштабируем текстовые кодировщики гораздо большего размера и демонстрируем их эффективность. Использование каскадных моделей диффузии также популярно в литературе [13, 14] и успешно используется в моделях диффузии для создания изображений с высоким разрешением [2, 3]. Наконец, Imagen является частью серии работ по преобразованию текста в изображение в Google Research, включая родственную модель Parti.

    Существует несколько этических проблем, с которыми сталкиваются исследования преобразования текста в изображение в целом. Мы предлагаем более подробное исследование этих проблем в нашей статье и предлагаем краткую версию здесь. Во-первых, последующие приложения моделей преобразования текста в изображение разнообразны и могут сложным образом влиять на общество. Потенциальные риски неправильного использования вызывают опасения в отношении ответственного открытого исходного кода кода и демонстраций. В настоящее время мы решили не выпускать код или публичную демонстрацию. В будущей работе мы изучим структуру ответственной экстернализации, которая уравновешивает ценность внешнего аудита с рисками неограниченного открытого доступа. Во-вторых, требования к данным для моделей преобразования текста в изображение вынуждают исследователей в значительной степени полагаться на большие, в основном некурируемые наборы данных, извлеченные из Интернета. Хотя этот подход позволил в последние годы добиться быстрого прогресса в алгоритмах, наборы данных такого рода часто отражают социальные стереотипы, репрессивные точки зрения и уничижительные или иным образом вредные ассоциации с маргинализованными группами идентичности. Хотя подмножество наших обучающих данных было отфильтровано для удаления шума и нежелательного контента, такого как порнографические изображения и оскорбительные выражения, мы также использовали набор данных LAION-400M, который, как известно, содержит широкий спектр неприемлемого контента, включая порнографические изображения, расистские оскорбления и вредные социальные стереотипы. Imagen полагается на текстовые кодировщики, обученные на некурируемых данных веб-масштаба, и, таким образом, наследует социальные предубеждения и ограничения больших языковых моделей. Таким образом, существует риск того, что Imagen закодировал вредные стереотипы и представления, что определяет наше решение не выпускать Imagen для публичного использования без дополнительных мер безопасности.

    Наконец, в то время как была проведена обширная работа по аудиту моделей преобразования изображения в текст и маркировки изображений для форм социальной предвзятости, было сравнительно меньше работы над методами оценки социальной предвзятости для моделей преобразования текста в изображение. Концептуальный словарь потенциального вреда моделей преобразования текста в изображение и установленные метрики оценки являются важным компонентом разработки ответственных практик выпуска моделей. Хотя мы оставляем углубленный эмпирический анализ социальных и культурных предубеждений на будущее, наши небольшие внутренние оценки выявили несколько ограничений, которые определяют наше решение не выпускать нашу модель в настоящее время. Imagen может столкнуться с опасностью отказа от режимов распределения данных, что может еще больше усугубить социальные последствия предвзятости набора данных. Imagen имеет серьезные ограничения при создании изображений, изображающих людей. Наши человеческие оценки показали, что Imagen получает значительно более высокие показатели предпочтения при оценке изображений, на которых не изображены люди, что указывает на ухудшение качества изображения. Предварительная оценка также предполагает, что Imagen кодирует несколько социальных предубеждений и стереотипов, в том числе общую предвзятость в отношении создания изображений людей с более светлым оттенком кожи и тенденцию к тому, чтобы изображения, изображающие разные профессии, соответствовали западным гендерным стереотипам. Наконец, даже когда мы фокусируем внимание поколений на людях, наш предварительный анализ показывает, что Imagen кодирует ряд социальных и культурных предубеждений при создании изображений действий, событий и объектов. Мы стремимся добиться прогресса в решении некоторых из этих открытых проблем и ограничений в будущей работе.

    Художественная галерея с картинами Моне. Художественная галерея затоплена. Роботы ходят по художественной галерее, используя весла. Художественная галерея, где выставлены картины Моне. Художественная галерея затоплена. Роботы ходят по художественной галерее, используя доски для весла. Величественная картина маслом королевы енотов в красном французском королевском платье. Картина висит на богато украшенной стене, украшенной обоями. Величественная картина маслом королевы енотов в красном французском королевском платье. Картина висит на богато украшенной стене, украшенной обоями. Голубая сойка стоит на большой корзине с радужными макаронами. Голубая сойка стоит на большой корзине с радужными макаронами. Гигантская змея-кобра на ферме. Змея сделана из кукурузы. Гигантская змея-кобра на ферме. Змея сделана из кукурузы.

    Chitwan Saharia ^* , William Chan ^* , Saurabh Saxena ^† , Lala Li ^† , Jay Whang ^† , Emily Denton, Seyed Kamyar Seyed Ghasemipour, Burcu Karagol Ayan, S. Sara Mahdavi, Rapha Gontijo Лопес, Тим Салиманс, Джонатан Хо ^† , Дэвид Флит ^† , Мохаммад Норузи ^*

    ^* Равный вклад. ^† Основной вклад.

    Мы благодарим Бена Пула за рецензирование нашей рукописи, ранние обсуждения и многочисленные полезные комментарии и предложения на протяжении всего проекта. Особая благодарность Кэти Мейер-Хеллстерн, Остину Таранго и Саре Ласло за помощь в внедрении важных ответственных методов искусственного интеллекта в этот проект. Мы ценим ценные отзывы и поддержку от Элизабет Адкисон, Зубина Гахрамани, Джеффа Дина, Йонгхуи Ву и Эли Коллинза. Мы благодарны Тому Смоллу за разработку водяного знака Imagen. Мы благодарим Джейсона Болдриджа, Хана Чжана и Кевина Мерфи за первоначальные обсуждения и отзывы. Мы признательны Фреду Алкоберу, Хибаку Али, Мариан Кроук, Аарону Донсбаху, Талси Доши, Тоджу Дьюку, Дугласу Эку, Джейсону Фрейденфельдсу, Брайану Габриэлю, Молли ФитцМоррис, Дэвиду Ха, Филипу Пархэму, Лоре Пирс, Эвану Рапопорту, Лорен за их усердную работу и поддержку. Скелли, Джонни Соракеру, Негару Ростамзаде, Виджаю Васудевану, Трис Варкентин, Джереми Вайнштейну и Хью Уильямсу за советы по проекту и помощь в процессе публикации. Мы благодарим Виктора Гомеса и Эрику Морейру за их постоянную и важную помощь в распределении ресурсов ТПУ. Мы также благодарим Шекуфеха Азизи, Харриса Чана, Криса А.

    Фото img: ImgBB — Загрузить Фото — Хостинг Картинок