Stwórz panel w stylu Sonara z organizacjami Clerk i przekazem tekstu mówionego.

Poprzedni rozdział dotyczył autoryzacji i przechowywania danych – elementów infrastruktury, którymi nikt się nie interesuje. Ten rozdział przedstawia pierwszy ekran, który widzą użytkownicy po zalogowaniu: panel sterowania. Celem jest sprawienie, by ten interfejs wyglądał jak produkt, a nie jak tymczasowe narzędzie.

Pasek boczny

Nawigacja znajduje się w składanym pasku bocznym. Może się zmniejszyć do postaci ikon, gdy brakuje miejsca, przedstawia główne destynacje (Panel sterowania, Odkrywanie głosów, Tekst do mowy, Klonowanie głosu) oraz umieszcza na górze przycisk do zmiany organizacji w Clerk.

Ten przycisk odgrywa tu kluczową rolę. Każdy konto należy do jakiejś organizacji – nie istnieją pojedyncze, osobiste przestrzenie robocze – więc przenoszenie się między zespołami odbywa się za pomocą tego przycisku, a nie przez ukrytą stronę ustawień. Powinien znajdować się w głównej nawigacji.

Na dole bocznej pasku znajduje się menu użytkownika, a nad nim mały blok „Inne” z opcjami Ustawienia i Pomoc. Funkcja Ustawienia nie otwiera specjalnej strony – zamiast tego uruchamia panel profilu organizacji Clerk. Ponowne tworzenie takiej struktury niewiele daje, skoro dostawca już oferuje solidną wersję.

Stan otwarty lub złożony jest przechowywany w pliku cookie, dzięki czemu po odświeżeniu pasek nie pokazuje się na chwilę w pełnej szerokości, by zaraz znów się zamknąć. Takie drobne szczegóły dotyczące przechowywania danych odróżniają dobrze przemyślaną strukturę od zwykłego zbioru komponentów.

Tło

Za głównym treścią powoli porusza się delikatna, animowana fala. Jest ona rysowana na płótnie przy użyciu efektu simplex noise zamiast powtarzającego się obrazka bitmapowego, dzięki czemu wzór nie tworzy oczywistych powtórzeń. Kolorystyka pozostaje w odcieniach zieleni i niebieskiego o niskiej przejrzystości. Wersja na komputerze zachowuje ten efekt, natomiast w wersji mobilnej jest on ukryty, ponieważ w telefonach ważniejsze są piksele niż atmosfera.

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

Ograniczenia są celowe. Ruch ten znajduje się za interfejsem o niskiej przejrzystości i wolnej prędkości – wyczuwa się go bardziej jako element dopracowania niż jako dekoracja, którą można analizować.

Pole wprowadzania tekstu

Panel sterowania skupia się na polu tekstowym, którego treść ma zostać przetłumaczona na mowę. Znajduje się ono w karcie z delikatnym gradientowym obramowaniem (różowy przechodzący w cyjan). Aby to obramowanie wyglądało jak jedna ciągła linia, konieczne było dodanie dodatkowych warstw; efekt powinien przypominać pojedynczą krawędź, a nie płaską ramkę.

Poniżej pola znajduje się aktualny licznik znaków oraz szacunek kosztu, które zmieniają się w miarę pisania przez użytkownika, przy użyciu stałej stawki za znak. Cena jest widoczna od razu, a nie pojawia się dopiero na ekranie potwierdzenia.

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

Osoba, która zamierza zsyntetyzować tysiące znaków, widzi przybliżony koszt przed naciśnięciem przycisku generowania, a nie później.

Na tym etapie mechanizm generowania jeszcze nie wywołuje modelu. Przekierowuje użytkownika na stronę tekst do mowy, przekazując tekst roboczy jako parametr zapytania. Rzeczywista synteza odbywa się dopiero wtedy, gdy dostępny jest głos i model. Zadaniem panelu sterowania jest tylko przechwytywanie danych i ich przekazywanie.

Szybkie działania

Poniżej pola znajduje się seria kart z przykładami zastosowań: opowiadanie historii, nagrywanie reklamy, reżyserowanie sceny filmowej, nadawanie głosu postaci w grze, wprowadzenie podcastu oraz prowadzenie medytacji. Każda karta zawiera krótki przykład dostosowany do konkretnego zastosowania. Po jej aktywacji uruchamia się funkcja tekst do mowy z tym przykładem już wpisanym.

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

Gotowe przykłady są lepsze niż pusta pola wraz z modalem z instrukcjami. Zainteresowani użytkownicy mogą usłyszeć przykład głosu postaci z gry bez konieczności najpierw tworzenia promptu – wystarczy jeden klik, by usłyszeć dźwięk.

Kombinowanie elementów

Treść nagłówka, tło, pole wprowadzania danych oraz szybkie funkcje składają się na stronę panelu sterowania. W wersji mobilnej używany jest prosty nagłówek (przycisk menu i tytuł). Na komputerze pokazuje się powitanie z imieniem użytkownika oraz kilka linków do opinii.

Żadna z tych elementów nie jest wyjątkowa: pasek boczny, tło, pole tekstowe oraz karty z przykładami. Razem tworzą one pierwsze wrażenie po zalogowaniu i decydują o tym, czy ktoś zostanie na tyle długo, by wygenerować dźwięk.

Następny rozdział dotyczy samej strony konwersji tekstu na mowę. Prace z tego rozdziału znajdują odzwierciedlenie w jednym komitecie funkcjonalnym dotyczącym paska bocznego panelu sterowania, układu oraz strony głównej.

Literatura pokrewna

• Procesy pracy nauczycieli instrumentów z autokaptem PostHoga i własnymi eventami — Połącz autokapt PostHoga, eventy wynikowe, odtwarzanie sesji oraz wykresy czasowe osób, aby produkty edukacyjne wspomagane przez sztuczną inteligencję mogły mierzyć ukończone zadania, a nie tylko liczby kliknięć.
• Zamiana ESLint i Prettiera na Biome: szybkość kontra reguła Hooks, której nadal potrzebujesz — Czas wykonywania zadań w Biome w porównaniu z ESLint i Prettier, różnice pomiędzy react-hooks a exhaustive-deps oraz kiedy przy jednoczesnym używaniu obu narzędzi najbardziej uczciwą opcją migracji jest jeden plugin ESLint.