@crievo/omni 0.0.0-stage → 0.1.1

package/studio/web/components/CloneVoiceDialog/SaveStep.tsx

@@ -0,0 +1,91 @@
+import { PROVIDER_NAME } from "../../lib/providers";
+import type { Settings, VoiceProfile } from "../../types/api";
+import { ArrowLeft, Check } from "../icons";
+import { ProviderDetail } from "../ProviderDetail";
+import { ProviderChoice } from "./ProviderChoice";
+import { RedoSummary } from "./RedoSummary";
+import type { CloneVoiceState } from "./useCloneVoice";
+
+/* the left of the "Salvar voz" step: the providers (or one provider's view) and the create button */
+export function SaveStep({
+  c,
+  settings,
+  reload,
+  redo,
+}: {
+  c: CloneVoiceState;
+  settings: Settings;
+  reload: () => void;
+  redo?: VoiceProfile;
+}) {
+  const { detail, setDetail, back, creating, canSave, create } = c;
+  return (
+    <>
+      <header className="clone-top">
+        <button
+          type="button"
+          className="button small"
+          onClick={detail ? () => setDetail(null) : back}
+          disabled={creating}
+        >
+          <ArrowLeft weight="bold" className="ic" /> Voltar
+        </button>
+        <b>{detail ? PROVIDER_NAME[detail] : redo ? "Refazer voz" : "Salvar voz"}</b>
+      </header>
+      <div className="clone-save">
+        {redo ? (
+          <RedoSummary
+            redoOn={c.redoOn}
+            planError={c.plan.cartesia}
+            redoCartesia={redo.cartesia}
+            hasNew={c.hasNew}
+            consent={c.consent}
+            onConsentChange={c.setConsent}
+            creating={creating}
+          />
+        ) : detail ? (
+          <ProviderDetail
+            provider={detail}
+            settings={settings}
+            reload={reload}
+            noId
+            id=""
+            onIdChange={() => {}}
+            next={null}
+          />
+        ) : (
+          <ProviderChoice
+            hasFish={c.hasFish}
+            hasCartesia={c.hasCartesia}
+            fish={c.fish}
+            cartesia={c.cartesia}
+            onFishChange={c.setFish}
+            onCartesiaChange={c.setCartesia}
+            planError={c.plan.cartesia}
+            order={c.order}
+            onMove={c.moveProvider}
+            onConfigure={setDetail}
+            consent={c.consent}
+            onConsentChange={c.setConsent}
+            creating={creating}
+          />
+        )}
+      </div>
+      <footer className="clone-bar save">
+        <button type="button" className="button primary" disabled={!canSave} onClick={create}>
+          {creating ? (
+            redo ? (
+              "Refazendo…"
+            ) : (
+              "Criando…"
+            )
+          ) : (
+            <>
+              <Check weight="bold" className="ic" /> {redo ? "Refazer voz" : "Criar voz"}
+            </>
+          )}
+        </button>
+      </footer>
+    </>
+  );
+}

package/studio/web/components/CloneVoiceDialog/SourceBar.tsx

@@ -0,0 +1,30 @@
+import { Key, Microphone, UploadSimple } from "../icons";
+
+/* the list view's actions: upload files, record, or (new voice) "já tenho voz criada" */
+export function SourceBar({
+  onUpload,
+  onRecord,
+  onAlreadyHave,
+  creating,
+}: {
+  onUpload: () => void;
+  onRecord: () => void;
+  onAlreadyHave?: () => void;
+  creating: boolean;
+}) {
+  return (
+    <footer className="clone-bar three">
+      <button type="button" className="button pill" onClick={onUpload} disabled={creating}>
+        <UploadSimple className="ic" /> Enviar arquivos
+      </button>
+      <button type="button" className="button pill" onClick={onRecord} disabled={creating}>
+        <Microphone className="ic" /> Gravar áudio
+      </button>
+      {onAlreadyHave && (
+        <button type="button" className="button pill already-have" onClick={onAlreadyHave} disabled={creating}>
+          <Key className="ic" /> Já tenho voz criada nos provedores
+        </button>
+      )}
+    </footer>
+  );
+}

package/studio/web/components/CloneVoiceDialog/index.tsx

@@ -0,0 +1,141 @@
+/* Clone the voice in the app (Configurações → Voz), in the shape of ElevenLabs' "Instant Voice
+   Cloning": two panels. On the left, upload audio or record reading a continuous script; on the
+   right, the meter of how much speech there is (minimum to best quality) and the "Criar voz"
+   button. It opens the "Salvar voz" step in the same frame, without another modal: on the left the
+   providers as cards (multi-select, with the link to create an account for those without a key)
+   and the consent; on the right the carousel of ten shuffled avatars, the name (3 to 20
+   characters) and the create button. The studio creates the clone on Fish Audio and Cartesia at
+   once and saves the profile. The context (Portuguese only, English only, or Portuguese with
+   English in between) picks the script: the clone learns the kind of speech it hears. The server
+   creates it (api/services/clone.ts).
+
+   `redo` (Editar voz → Refazer voz) opens this same frame with an existing voice: its stored
+   recording comes attached in the list, the name and avatar are the voice's, and more audio can be
+   recorded on top or the recording deleted to start again. For the user it is editing the voice;
+   behind it the server creates the clone again on each of its providers and deletes the old one
+   (api/services/clone.ts: redo).
+
+   The state machine lives in useCloneVoice; this file lays out the two panels. */
+
+import { shuffleAvatars } from "../../lib/avatars";
+import { AvatarNameField } from "../AvatarNameField";
+import { SampleList } from "../SampleList";
+import { Skeleton } from "../ui/skeleton";
+import { VoiceModal } from "../VoiceModal";
+import { QualityPanel } from "./QualityPanel";
+import { RecordStep } from "./RecordStep";
+import { SaveStep } from "./SaveStep";
+import { SourceBar } from "./SourceBar";
+import type { CloneVoiceDialogProps } from "./types";
+import { useCloneVoice } from "./useCloneVoice";
+
+export function CloneVoiceDialog(props: CloneVoiceDialogProps) {
+  const { settings, reload, onAlreadyHave, redo } = props;
+  const c = useCloneVoice(props);
+  const { view, samples, creating, recording, playing, close } = c;
+
+  if (c.listError) return <p className="response error">{c.listError}</p>;
+  if (!c.ctx) {
+    /* the modal already in place, with both columns: audio on the left and clone quality on the right */
+    return (
+      <VoiceModal title={redo ? "Refazer voz" : "Clonar a minha voz"} onClose={close}>
+        <section className="clone-left" aria-busy="true" aria-label="Carregando">
+          <Skeleton style={{ height: 40, width: "100%" }} />
+          {Array.from({ length: 4 }, (_, i) => (
+            <Skeleton key={i} style={{ height: 52, width: "100%", marginTop: 8 }} />
+          ))}
+        </section>
+        <section className="clone-right" aria-hidden="true">
+          <Skeleton className="round" style={{ width: 96, height: 96 }} />
+          <Skeleton className="row" style={{ width: 140 }} />
+        </section>
+      </VoiceModal>
+    );
+  }
+
+  const upload = () => c.fileInput.current?.click();
+  return (
+    <VoiceModal title={redo ? "Refazer voz" : "Clonar a minha voz"} onClose={close} locked={recording || creating}>
+      {/* --- left: audio --- */}
+      <section className="clone-left" aria-label="Áudios da sua voz">
+        {view === "save" ? (
+          <SaveStep c={c} settings={settings} reload={reload} redo={redo} />
+        ) : view === "record" ? (
+          <RecordStep c={c} />
+        ) : samples.length === 0 ? (
+          <>
+            <div className="clone-empty">
+              <b>Envie áudios ou grave a sua voz</b>
+              <small>Máx. 10 MB por arquivo</small>
+            </div>
+            <SourceBar onUpload={upload} onRecord={c.openRecorder} onAlreadyHave={onAlreadyHave} creating={creating} />
+          </>
+        ) : (
+          <>
+            <SampleList items={samples} playing={playing} onListen={c.listen} onDelete={c.remove} disabled={creating} />
+            <SourceBar onUpload={upload} onRecord={c.openRecorder} onAlreadyHave={onAlreadyHave} creating={creating} />
+          </>
+        )}
+        <input
+          ref={c.fileInput}
+          type="file"
+          accept="audio/*,video/webm"
+          multiple
+          hidden
+          onChange={e => {
+            c.onPickFiles(e.target.files);
+            e.target.value = "";
+          }}
+        />
+      </section>
+
+      {/* --- right: meter and create --- */}
+      <section className="clone-right" aria-label="Qualidade do clone">
+        {view === "save" ? (
+          <AvatarNameField
+            avatars={c.avatars}
+            avatar={c.avatar}
+            onAvatarChange={c.setAvatar}
+            locked={creating}
+            onShuffle={() => {
+              c.setAvatars(shuffleAvatars());
+              c.setAvatar(0);
+            }}
+            name={c.name}
+            onNameChange={c.setName}
+            nameValid={c.nameValid}
+            max={c.maxName}
+            rootRef={c.avatarRoot}
+            listening={playing === "all" ? "playing" : null}
+            onListen={c.listenAll}
+            noAudio={samples.length === 0}
+            onEnter={() => {
+              if (c.canSave) c.create();
+            }}
+          />
+        ) : (
+          <QualityPanel
+            measured={c.measured}
+            total={c.total}
+            samples={samples.length}
+            recording={recording}
+            enough={c.enough}
+            filesWithoutDuration={c.filesWithoutDuration}
+            warning={c.warning}
+            redo={!!redo}
+            creating={creating}
+            onContinue={c.openSave}
+          />
+        )}
+        {c.result && (
+          <p className={`response ${c.result.ok ? "ok" : "error"}`}>{c.result.ok ? c.result.output : c.result.error}</p>
+        )}
+        {c.result?.warnings?.map((x, i) => (
+          <p key={i} className="hint warning">
+            {x}
+          </p>
+        ))}
+      </section>
+    </VoiceModal>
+  );
+}

package/studio/web/components/CloneVoiceDialog/types.ts

@@ -0,0 +1,28 @@
+/* CloneVoiceDialog's local types. */
+
+import type { Settings, VoiceProfile } from "../../types/api";
+
+export type Phrase = { id: string; text: string };
+export type CloneContext = { id: string; name: string; description: string; language: string; phrases: Phrase[] };
+/* "stored": the recording the voice already has in the app (redo); comes from the server, no blob, not re-sent */
+export type Sample = {
+  id: string;
+  name: string;
+  origin: "recording" | "file" | "stored";
+  blob: Blob | null;
+  url: string;
+  s: number;
+};
+export type Result = { ok: boolean; output?: string; error?: string; warnings?: string[]; failed?: string[] } | null;
+
+/* `onCreate` gets the warnings when some checked provider did not create the clone: the voice opens
+   in edit with them, to create again only there */
+export type CloneVoiceDialogProps = {
+  settings: Settings;
+  reload: () => void;
+  onCreate?: (warnings: string[]) => void;
+  onClose: () => void;
+  onAlreadyHave?: () => void;
+  redo?: VoiceProfile;
+  onRedone?: (output: string) => void;
+};