Фотошоп теперь в сети!

На основе WebAssembly + Emscripten, веб-компонентов + Lit, Service Workers + Workbox и новых веб-API. Chrome и Adobe с удовольствием сотрудничали.

Выпуск настольного приложения Photoshop в Интернете (photoshop.adobe.com) представляет собой огромную веху в переносе очень сложного и графически насыщенного программного обеспечения в браузер. Это стало возможным благодаря многолетним усилиям инженеров Adobe и сотрудничеству с поставщиками браузеров, такими как Chrome, для продвижения Интернета вперед.

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

Концепция: Photoshop в браузере

На протяжении десятилетий Photoshop был золотым стандартом в области редактирования изображений и графического дизайна, обеспечивая возможности для творчества в Windows и macOS. Но мир новых возможностей открывается, если отсоединить его от рабочего стола.

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

Возможность связывания позволяет совместно использовать рабочие процессы. Доступ к документам Photoshop можно получить по URL-адресу, а не спрятать в файловой системе. Авторы могут легко отправить ссылку соавторам.

Кросс-платформенная гибкость. Интернет как среда выполнения абстрагирует базовые операционные системы. Photoshop может работать с пользователями на нескольких платформах.

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

Новые веб-возможности раскрывают потенциал Photoshop

В последние годы появились новые возможности веб-платформы, которые, наконец, позволяют использовать приложения класса Photoshop посредством как стандартизации, так и реализации. Инженеры Adobe новаторски использовали несколько ключевых API нового поколения:

Высокопроизводительный доступ к локальным файлам с помощью частной файловой системы Origin

Операции Photoshop включают чтение и запись потенциально объемных PSD-файлов. Для этого требуется эффективный доступ к локальной файловой системе. Новый Origin Private File System API (OPFS) обеспечивает быструю, ориентированную на происхождение виртуальную файловую систему.

const opfsRoot = await navigator.storage.getDirectory();

OPFS позволяет быстро создавать, читать, записывать и удалять файлы. Например:

// Create file
const file = await opfsRoot.getFileHandle('image.psd', {create: true}); 

// Get read/write handle 
const handle = await file.createSyncAccessHandle();

// Write contents  
handle.write(buffer); 

// Read contents
handle.read(buffer);

// Delete file
await file.remove();

За самые быстрые синхронные операции веб-работники могут получить FileSystemSyncAccessHandle.

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

Раскрытие возможностей WebAssembly

WebAssembly был важным компонентом для воссоздания вычислительно интенсивной обработки графики Photoshop в JavaScript. Adobe использовала компилятор Emscripten для портирования существующей кодовой базы C/C++ в модули WebAssembly.

Некоторые возможности WebAssembly были критически важны:

  • Потоки — Photoshop использует рабочие потоки для параллельного выполнения таких задач, как обработка фрагментов изображений:
// Thread function
void* tileProcessor(void* data) {
  // Process image tile data 
  return NULL;
}

// Start worker threads 
pthread_t thread1, thread2;
pthread_create(&thread1, NULL, tileProcessor, NULL);
pthread_create(&thread2, NULL, tileProcessor, NULL);

// Wait for threads to finish
pthread_join(thread1, NULL);
pthread_join(thread2, NULL);
  • SIMD — векторные инструкции SIMD ускоряют манипуляции с пикселями и фильтрацию.
  • Обработка исключений. Исключения C++ широко используются в кодовой базе Photoshop.
  • Создание потоковой передачи. Модули WASM Photoshop размером более 80 МБ требуют потоковой компиляции.
  • Отладка. Поддержка отладки Chrome WebAssembly в DevTools оказалась неоценимой.

Использование широкой цветовой гаммы P3

Цветовой спектр sRGB бледнеет по сравнению с более широкой гаммой P3, но он уже давно является единственным вариантом в сети.

Photoshop использует новую функцию color() и Canvas API, чтобы раскрыть всю яркость P3 и обеспечить более точное представление цвета.

color: color(display-p3 1 0.5 0)

Гибкость пользовательского интерфейса с помощью веб-компонентов

Photoshop является частью более широкой экосистемы Adobe Creative Cloud. Использование стандартизированной стратегии Веб-компонентов, основанной на Lit, обеспечивает согласованность пользовательского интерфейса во всех приложениях.

Элементы пользовательского интерфейса Photoshop взяты из библиотеки Adobe Spectrum Web Components, которая реализует систему дизайна Adobe.

Веб-компоненты Spectrum:

  • Доступно по умолчанию – разработано с учетом существующих и новых спецификаций браузеров для поддержки вспомогательных технологий.
  • Легкий — реализован с помощью LitElement для минимальных накладных расходов.
  • На основе стандартов — создано на основе стандартов веб-компонентов, таких как пользовательские элементы и Shadow DOM.
  • Независимость от платформы. Работайте с любой платформой благодаря поддержке на уровне браузера.

Кроме того, все приложение Photoshop создано с использованием веб-компонентов на основе Lit. Шаблоны Lit и виртуальные различия DOM позволяют эффективно обновлять пользовательский интерфейс. Инкапсуляция веб-компонентов также упростила интеграцию кода React других команд, когда это необходимо.

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

Оптимизация производительности Photoshop в браузере

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

Кэширование ресурсов и кода с помощью Service Workers

Service Workers позволяют веб-приложениям кэшировать свои ресурсы, код и другие ресурсы локально, что значительно ускоряет загрузку после первого посещения. Хотя Photoshop еще не является полностью автономным приложением, он уже использует Service Workers для кэширования своих модулей WebAssembly, сценариев и других ресурсов.

Такое кэширование существенно влияет на производительность нагрузки. После первого посещения последующие загрузки обычно происходят очень быстро (M1 Macbook):

Adobe использовала библиотеки Workbox, чтобы упростить интеграцию кэширования Service Worker в процесс сборки.

Оптимизация кэшированных ресурсов V8

В V8 реализованы некоторые оптимизации при возврате ресурсов из кэшей Service Worker:

  • Ресурсы, кэшированные во время install, быстро компилируются, а код немедленно кэшируется для обеспечения стабильной и высокой производительности.
  • Ресурсы, кэшированные через Cache API во время fetch, получают оптимизированное кэширование при второй загрузке, быстрее, чем обычное кэширование.
  • V8 определяет важность ресурсов на основе их кэширования и более агрессивно компилирует.

Это позволяет оптимизировать массивные кэшированные модули Wasm Photoshop.

Потоковая передача и кэширование больших модулей WebAssembly

Кодовая база Photoshop требует нескольких больших модулей WebAssembly, размер некоторых из которых превышает 80 МБ. Поддержка потоковой компиляции в V8 и Chrome позволяет эффективно обрабатывать эти массивные модули.

Кроме того, при первом запросе модуля WebAssembly от Service Worker V8 генерирует и сохраняет оптимизированную версию для кэширования, что критически важно для большого размера кода Photoshop.

Многопоточность для параллельных графических операций

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

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

Отладка WebAssembly для оптимизации

Надежная поддержка отладки WebAssembly имела решающее значение для диагностики и устранения узких мест производительности во время разработки.

Способность Chrome DevTool профилировать код WASM, устанавливать точки останова и проверять расширенные переменные отражает возможности отладки JavaScript:

Интеграция машинного обучения на устройстве с TensorFlow.js

Последние версии Photoshop в Интернете включают возможности искусственного интеллекта с использованием TensorFlow.js. Запуск моделей на устройстве, а не в облаке, повышает конфиденциальность, снижает задержку и снижает затраты.

«TensorFlow.js — это библиотека машинного обучения с открытым исходным кодом от Google, предназначенная для разработчиков JavaScript, которая может запускать клиентскую часть в браузере. Это наиболее зрелый вариант веб-ML с комплексной поддержкой серверных операторов WebGL и WebAssembly, а в будущем также появится возможность использовать серверную часть WebGPU в браузере для повышения производительности по мере развития новых веб-стандартов».

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

Модель была преобразована из TensorFlow в TensorFlow.js, чтобы обеспечить локальное выполнение:

// Load Select Subject model
const model = await tf.loadGraphModel('select_subject.json');

// Run inference on image tensor  
const {mask, background} = model.execute(imgTensor);

// Refine selection from mask

Adobe и Google совместно решили проблемы синхронизации между кодом Photoshop WebAssembly и TensorFlow.js, разработав API-интерфейс прокси для Emscripten. Это обеспечивает плавную интеграцию между платформами.

«Поскольку команда Google улучшила производительность аппаратного исполнения TensorFlow.js с помощью различных поддерживаемых серверных частей (WebGL, WASM, Web GPU), это привело к тому, что модели увидели повышение производительности от 30% до 200%( особенно для более крупных моделей, которые, как правило, демонстрируют наибольший выигрыш), обеспечивая производительность, близкую к реальному времени, прямо в браузере».

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

Более подробную информацию можно найти в статье TensorFlow.js Photoshop.

Будущее Photoshop в Интернете

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

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

Сотрудничество между Adobe и разработчиками браузеров будет продолжать способствовать развитию Интернета как платформы для все более амбициозных приложений за счет совершенствования стандартов и повышения производительности. Впереди нас ждут захватывающие времена!

Пробуем Photoshop в Интернете

Веб-версия Photoshop в настоящее время доступна в настольных версиях:

  • Хром 102+
  • Край 102+
  • Фаерфокс 111+

и работа над устранением пробела в поддержке Safari продолжается.

Вы можете попробовать это сегодня на photoshop.adobe.com. Будущее творчества и дизайна в Интернете у вас под рукой!