Створыце панель керування у стылі Sonara з організацыямі Clerk і перадачай паведамленняў за дапамою TTS.

У пакетным выкладках была рассказана праця з аутэнтыкацыёю і зберагчыцьмом дадзейнаў — інфраструктурой, якую ніхто не бачыць. Шэты роздзел — гэта першы экран, які люди бачаюць пасля заходу: панель керавання. Мета — зробіць гэты экран схожым на продукт, а не на простую раму для керавання.

Бокавая панель

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

Гэты пераключач мае важлівую ролю. Кожны акаунт належыць да якой-небудзь організацыі — не існуе самастоятных персональных працоўных простораў — таму перыяджанне між командамі вядзецца через элемент у бокавай панелі, а не чераз схованую сторонку налашоўкаў. Яго трэба разместіць у основнай навігацыі.

У ніжнай частцы бокавой панелі размешчаны меню для пользователя, а вышэй за яго знаходзіцца маленькі блок «Іншае» для налашоўкаў і дапамогі. Налашоўкі не ачынаюць спецыяльнай сторонкі; замест таго адкрываецца панель прафіля організацыі Clerk. Перзначэнне гэтага інтерфейсу мало дапамагае, калі прадаўцы вже надаюць якісны варыянт.

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

Фон

За оснавным контэнтам паступова рухаецца мягкія анімаваныя хвалі. Яны намальованы на полотні з простым шумам у зменшанай яскравасці, а не з павтараючымся бітмапам, таму візерунак не стварае явнага патэрна. Выборы калерыта застаюцца у приглушаных тонах зеленага і сіньога кольороў. На десктопных прыстроях эфект застаецца; на мобільных ён хаваецца, таму што пікселі маюць большое значэнне, чым атмасфера.

<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...",
}

Готовыя прыклады кращыя, чым порожняя палатаця і модальное вікно з інструкцыямі. Цікавія корыстувальнікі можаць пачуць прыклад голасу персонажа гэмы без падготовкі запытку — проста адна кліка, і ўжо чуваць голас.

Аб’еднанне элементаў

Загалоўнак, фон, поле для вводу та швыдкія дзеяння складаюцься ў маршрут панелі керування. У версіі для мобайльных прыстроў выкорыстоўваецца просты загалоўнак (кантроллер меню та назва). На дэсктопных прыстроях паказываецца прывітанне з іменем аднароджэнняя, а таксама калькі лінкаў на вярнючыяся дапамогі.

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

Наступны роздзіл прысвечаны самай сторонцы перакладу тексту на голас. Работа, выконаная ў этам роздзіле, фіксуецца як адна змянена версія для бокавай панелі панелі керування, ўзоркавага лейяуту та галоўнай сторонкі.