Создать панель управления в стиле Sonara с организациями Clerk и передачей данных через TTS

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

Панель сбоку

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

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

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

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

Фон

За основным содержимым медленно движется мягкая анимированная волна. Она рисуется на холсте с использованием шума типа simplex вместо циклического битмапа, поэтому узор не создает явного эффекта повторения. Цветовая палитра состоит из приглушенных оттенков темно-зеленого и синего с низкой прозрачностью. На настольных устройствах эффект сохраняется; на мобильных устройствах он скрывается, так как здесь важнее пиксели, чем атмосфера.

<WavyBackground
  colors={["#2DD4BF", "#22D3EE", "#38BDF8", "#818CF8"]}
  blur={3}
  speed="slow"
  waveOpacity={0.1}
/>

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

Поле ввода текста

В центре панели управления находится поле для ввода текста, который должен быть преобразован в речь. Оно расположено в карточке с мягким градиентным контуром (от розового до цианового). Чтобы контур выглядел как единая непрерывная линия, потребовалось использование дополнительных слоев; в результате он должен казаться единой кромкой, а не плоским прямоугольником.

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

${(text.length * COST_PER_UNIT).toFixed(4)} estimated

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

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

Быстрые действия

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

{
  title: "Voice a Game Character",
  description: "Build immersive worlds with dynamic character voices",
  href: "/text-to-speech?text=Listen up, adventurer. The realm of Ashenvale is crumbling...",
}

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

Собирание всего вместе

Заголовок, фон, поле ввода и быстрые действия вместе составляют интерфейс панели управления. В версии для мобильных устройств используется минималистичный заголовок (кнопка меню и название). На ПК отображается приветствие с именем пользователя плюс несколько ссылок на отзывы.

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

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