studio-engine 0.120.0 → 0.122.0

data/app/views/studio/voice/_microphone_help.html.erb

@@ -0,0 +1,65 @@
+<%# "How to change your microphone in Chrome": a native modal <dialog> inside
+    the microphone chip (studio/voice/_microphone_chip). showModal() makes the
+    page behind it inert, so focus stays inside; Esc and Close shut it, and
+    focus goes back where it was (studio/microphone_chip). It opens after a
+    switch, on a refused microphone, on the second silent take in a row on one
+    microphone, and from the picker's help link. The lead line on top says
+    which; the browser decides between Chrome's steps and one generic line
+    (browserFamily, studio/microphone). The picture is a drawn, simplified
+    address bar, never a screenshot.
+
+    Locals: copy (the chip's merged copy), title_id. %>
+<% help = copy.fetch("help") %>
+<dialog class="studio-mic-help" data-microphone-dialog aria-labelledby="<%= title_id %>">
+  <div class="studio-mic-help-body">
+    <div class="studio-mic-help-lead" data-microphone-help-lead hidden>
+      <p class="studio-mic-help-headline" data-microphone-help-headline></p>
+      <p class="studio-mic-help-tip" data-microphone-help-tip></p>
+    </div>
+
+    <h2 id="<%= title_id %>" class="studio-mic-help-title" data-microphone-help-title><%= help.fetch("title_chrome") %></h2>
+
+    <div class="studio-mic-help-chrome" data-microphone-help-chrome>
+      <svg class="studio-mic-mock" viewBox="0 0 320 168" role="img" aria-label="A drawing of Chrome's address bar: the site settings icon left of the address is circled, and below it the Microphone setting is on with its list of microphones.">
+        <rect x="4" y="6" width="312" height="36" rx="18" class="mock-bar"/>
+        <circle cx="26" cy="24" r="14" class="mock-ring"/>
+        <g class="mock-ink" stroke-width="2" stroke-linecap="round">
+          <line x1="19" y1="20" x2="33" y2="20"/><circle cx="23" cy="20" r="2.5" class="mock-knob"/>
+          <line x1="19" y1="28" x2="33" y2="28"/><circle cx="29" cy="28" r="2.5" class="mock-knob"/>
+        </g>
+        <%# The address is a drawn bar, not this app's host: the drawing is the
+            same on every app, and renders without a request. %>
+        <rect x="48" y="19" width="132" height="10" rx="5" class="mock-address"/>
+        <rect x="12" y="54" width="232" height="106" rx="10" class="mock-panel"/>
+        <g class="mock-ink" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
+          <rect x="26" y="68" width="8" height="13" rx="4"/><path d="M23 77a7 7 0 0 0 14 0M30 84v4"/>
+        </g>
+        <text x="46" y="82" class="mock-text" font-size="13" font-weight="600">Microphone</text>
+        <rect x="196" y="70" width="34" height="18" rx="9" class="mock-on"/>
+        <circle cx="221" cy="79" r="6" class="mock-knob-on"/>
+        <rect x="26" y="102" width="204" height="44" rx="8" class="mock-ring"/>
+        <text x="38" y="129" class="mock-text" font-size="12">MacBook Pro Microphone</text>
+        <path d="M212 120l5 5 5-5" class="mock-ink" stroke-width="2" fill="none" stroke-linecap="round"/>
+        <g font-size="11" font-weight="700" text-anchor="middle">
+          <circle cx="50" cy="8" r="8" class="mock-badge"/><text x="50" y="12" class="mock-badge-text">1</text>
+          <circle cx="252" cy="70" r="8" class="mock-badge"/><text x="252" y="74" class="mock-badge-text">2</text>
+          <circle cx="252" cy="118" r="8" class="mock-badge"/><text x="252" y="122" class="mock-badge-text">3</text>
+        </g>
+      </svg>
+      <ol class="studio-mic-help-steps" data-microphone-help-steps>
+        <% help.fetch("steps_chrome").each_with_index do |step, i| %>
+          <li>
+            <span class="studio-mic-step" aria-hidden="true"><%= i + 1 %></span>
+            <span><%= step %></span>
+          </li>
+        <% end %>
+      </ol>
+    </div>
+
+    <p class="studio-mic-help-other" data-microphone-help-other hidden><%= help.fetch("other") %></p>
+
+    <form method="dialog" class="studio-mic-help-actions">
+      <button type="submit" class="btn btn-primary studio-mic-help-close" data-microphone-help-close><%= help.fetch("close") %></button>
+    </form>
+  </div>
+</dialog>

data/app/views/studio/voice/_recorder.html.erb

@@ -0,0 +1,34 @@
+<%# The record button (docs/VOICE_CAPTURE.md): studio/voice_recorder opens the
+    microphone through studio/microphone (so it records from what the chip
+    names), runs the engine's one level meter (studio/level_meter) as the ring
+    around the button, refuses a silent take, and hands a heard take to the page
+    as a studio:voice-recorder:take event with the blob. It uploads nothing:
+    the page that renders it decides where the audio goes.
+
+    Locals, all optional:
+      copy:   per-state words merged over studio/voice_recorder's COPY
+              (e.g. { "idle" => { "button" => "Talk" } })
+      mode:   "toggle" (tap to start, tap to stop; the default) or "hold"
+              (press and hold to talk)
+      max_ms: stop a take on its own after this long (default 60000)
+      id:     an id for the root, for a page's own listener
+
+    The controller is lazy (studio/stimulus); if it fails to load, the root
+    carries data-studio-controller-failed="voice-recorder" and says so. %>
+<% copy = Studio::VoiceCapture.recorder_copy(local_assigns[:copy]) %>
+<% mode = local_assigns.fetch(:mode, "toggle").to_s == "hold" ? "hold" : "toggle" %>
+<%= render "studio/voice/styles" %>
+<div class="studio-recorder"
+     <%= tag.attributes(id: local_assigns[:id]) %>
+     data-studio-controller="voice-recorder"
+     data-voice-recorder-state="idle"
+     data-voice-recorder-mode="<%= mode %>"
+     data-voice-recorder-max-ms="<%= local_assigns.fetch(:max_ms, 60_000).to_i %>"
+     data-voice-recorder-copy="<%= copy.except("unavailable").to_json %>">
+  <button type="button" class="studio-recorder-button" data-voice-recorder-button aria-pressed="false">
+    <span data-voice-recorder-label><%= copy.dig("idle", "button") %></span>
+  </button>
+  <span class="studio-recorder-timer" data-voice-recorder-timer aria-hidden="true">0:00</span>
+  <p class="studio-recorder-status" data-voice-recorder-status role="status" aria-live="polite"></p>
+  <p class="studio-recorder-failed"><%= copy["unavailable"] %></p>
+</div>

data/app/views/studio/voice/_styles.html.erb

@@ -0,0 +1,94 @@
+<%# The voice capture layer's scoped CSS (docs/VOICE_CAPTURE.md), rendered by
+    the chip and the recorder partials. Scoped classes rather than utilities, as
+    in studio/profiles/_voice_section: the chip, the dot, the ring and the help
+    drawing must render in an app whose Tailwind build never saw these files.
+    Every colour is a theme token (the primary through --color-primary-500-rgb
+    and the CTA fill under its label), so dark mode and each app's palette come
+    for free. Tap targets are 44px. A page rendering both partials carries this
+    block twice, which is harmless. %>
+<style>
+  .studio-mic { display: flex; width: 100%; flex-direction: column; align-items: center; gap: .5rem; }
+  .studio-mic-chip { display: inline-flex; min-height: 44px; max-width: 100%; align-items: center; gap: .5rem;
+    border-radius: 1.5rem; border: 1px solid var(--color-border, rgb(127 127 127 / .25));
+    background: var(--color-inset, rgb(127 127 127 / .12)); padding: .5rem 1rem; font-size: .875rem; font-weight: 600;
+    color: var(--color-text, inherit); cursor: pointer; text-align: left; }
+  .studio-mic-chip:focus-visible { outline: 3px solid rgb(var(--color-primary-500-rgb, 99 102 241) / .5); outline-offset: 2px; }
+  .studio-mic-icon { width: 1rem; height: 1rem; flex-shrink: 0; color: var(--color-text-secondary, currentColor); }
+  .studio-mic-name { min-width: 0; overflow-wrap: anywhere; }
+  .studio-mic-caret { width: .75rem; height: .75rem; flex-shrink: 0; color: var(--color-text-muted, currentColor); }
+  .studio-mic-chip[aria-expanded="true"] .studio-mic-caret { transform: rotate(180deg); }
+  [data-microphone-state="denied"] .studio-mic-chip { border-color: rgb(var(--color-primary-500-rgb, 99 102 241)); }
+  /* The live dot: hollow while nothing records; while a take records it fills
+     with the primary colour as loud as the voice (--studio-mic-level, 0..1). */
+  .studio-mic-dot { width: .625rem; height: .625rem; flex-shrink: 0; border-radius: 9999px; border: 2px solid currentColor; opacity: .35; }
+  [data-microphone-live="true"] .studio-mic-dot { opacity: 1; border-color: rgb(var(--color-primary-500-rgb, 99 102 241));
+    background-color: rgb(var(--color-primary-500-rgb, 99 102 241) / calc(.15 + var(--studio-mic-level, 0) * .85));
+    transform: scale(calc(1 + var(--studio-mic-level, 0) * .5)); transition: transform 80ms linear, background-color 80ms linear; }
+  .studio-mic-panel { width: 100%; max-width: 24rem; padding: .75rem; text-align: left; display: grid; gap: .5rem; }
+  .studio-mic-panel[hidden] { display: none; }
+  .studio-mic-note { font-size: .875rem; color: var(--color-text-muted, inherit); }
+  .studio-mic-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
+  .studio-mic-option { display: flex; min-height: 44px; width: 100%; align-items: center; gap: .5rem; border-radius: .75rem;
+    border: 1px solid transparent; background: transparent; padding: .5rem .75rem; text-align: left; font-size: .875rem;
+    color: var(--color-text, inherit); cursor: pointer; }
+  .studio-mic-option:hover { background-color: rgb(var(--color-primary-500-rgb, 99 102 241) / .08); }
+  /* The same 3px ring as the chip on every control in the picker. */
+  .studio-mic-option:focus-visible, .studio-mic-help-link:focus-visible {
+    outline: 3px solid rgb(var(--color-primary-500-rgb, 99 102 241) / .5); outline-offset: 2px; }
+  .studio-mic-option[aria-current="true"] { border-color: rgb(var(--color-primary-500-rgb, 99 102 241));
+    background-color: rgb(var(--color-primary-500-rgb, 99 102 241) / .12); font-weight: 600; }
+  .studio-mic-check { width: 1rem; flex-shrink: 0; font-weight: 700; color: rgb(var(--color-primary-500-rgb, 99 102 241)); }
+  .studio-mic-option-label { min-width: 0; flex: 1; overflow-wrap: anywhere; }
+  .studio-mic-in-use { flex-shrink: 0; border-radius: 9999px; padding: .125rem .5rem; font-size: .75rem; font-weight: 700;
+    background: var(--color-cta-fill, var(--color-cta, rgb(var(--color-primary-500-rgb, 99 102 241)))); color: var(--btn-primary-fg, #fff); }
+  .studio-mic-help-link { min-height: 44px; width: 100%; border-radius: .75rem; padding: 0 .75rem; text-align: left; font-size: .875rem;
+    font-weight: 600; color: var(--color-text-secondary, inherit); text-decoration: underline; background: transparent; border: 0; cursor: pointer; }
+  /* The help dialog: a native modal <dialog>, so the page behind it is inert. */
+  .studio-mic-help { border: 0; padding: 0; margin: auto; width: min(28rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem);
+    overflow-y: auto; text-align: left; color: var(--color-text-body, inherit); background: var(--color-surface, Canvas); border-radius: 1rem; }
+  .studio-mic-help::backdrop { background-color: rgb(0 0 0 / .55); }
+  .studio-mic-help-body { display: grid; gap: 1rem; padding: 1.25rem; }
+  .studio-mic-help-lead { display: grid; gap: .25rem; border-radius: .75rem; background: var(--color-inset, rgb(127 127 127 / .12)); padding: .75rem; }
+  .studio-mic-help-lead[hidden], .studio-mic-help-chrome[hidden], .studio-mic-help-other[hidden] { display: none; }
+  .studio-mic-help-headline { font-weight: 600; color: var(--color-text, inherit); margin: 0; }
+  .studio-mic-help-tip { font-size: .875rem; color: var(--color-text-secondary, inherit); margin: 0; }
+  .studio-mic-help-title { font-size: 1.25rem; font-weight: 700; color: var(--color-text, inherit); margin: 0; }
+  .studio-mic-help-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
+  .studio-mic-help-steps li { display: flex; align-items: flex-start; gap: .75rem; }
+  .studio-mic-step { display: flex; width: 1.5rem; height: 1.5rem; flex-shrink: 0; align-items: center; justify-content: center;
+    border-radius: 9999px; font-size: .75rem; font-weight: 700;
+    background: var(--color-cta-fill, var(--color-cta, rgb(var(--color-primary-500-rgb, 99 102 241)))); color: var(--btn-primary-fg, #fff); }
+  .studio-mic-help-actions { display: flex; justify-content: flex-end; margin: 0; }
+  .studio-mic-help-close { min-height: 44px; padding: 0 1.5rem; }
+  /* The drawn address bar: never a screenshot, every stroke a token. */
+  .studio-mic-mock { width: 100%; height: auto; color: var(--color-text, currentColor); }
+  .studio-mic-mock .mock-bar, .studio-mic-mock .mock-panel { fill: var(--color-inset, rgb(127 127 127 / .12)); stroke: currentColor; stroke-opacity: .25; }
+  .studio-mic-mock .mock-ring { fill: none; stroke: rgb(var(--color-primary-500-rgb, 99 102 241)); stroke-width: 3; }
+  .studio-mic-mock .mock-ink { stroke: currentColor; }
+  .studio-mic-mock .mock-knob { fill: currentColor; stroke: none; }
+  .studio-mic-mock .mock-text { fill: currentColor; font-family: inherit; }
+  .studio-mic-mock .mock-address { fill: currentColor; fill-opacity: .3; }
+  .studio-mic-mock .mock-on, .studio-mic-mock .mock-badge { fill: rgb(var(--color-primary-500-rgb, 99 102 241)); }
+  .studio-mic-mock .mock-knob-on, .studio-mic-mock .mock-badge-text { fill: var(--color-surface, Canvas); }
+
+  /* The record button: a ring as loud as the voice (--studio-recorder-level). */
+  .studio-recorder { display: flex; flex-direction: column; align-items: center; gap: .75rem; text-align: center; }
+  .studio-recorder-button { min-height: 44px; min-width: 12rem; max-width: 100%; border: 0; border-radius: 9999px; padding: .875rem 1.75rem;
+    font-weight: 700; cursor: pointer; touch-action: none; -webkit-user-select: none; user-select: none;
+    color: var(--btn-primary-fg, #fff); background: var(--color-cta-fill, var(--color-cta, rgb(var(--color-primary-500-rgb, 99 102 241))));
+    box-shadow: 0 0 0 calc(var(--studio-recorder-level, 0) * 14px) rgb(var(--color-primary-500-rgb, 99 102 241) / .3);
+    transition: box-shadow 80ms linear; }
+  .studio-recorder-button:focus-visible { outline: 3px solid rgb(var(--color-primary-500-rgb, 99 102 241) / .5); outline-offset: 3px; }
+  .studio-recorder-button:disabled { opacity: .5; cursor: not-allowed; }
+  [data-voice-recorder-state="recording"] .studio-recorder-button { background: var(--color-danger-fill, var(--color-danger, #dc2626)); }
+  .studio-recorder-timer { font-variant-numeric: tabular-nums; font-size: .875rem; color: var(--color-text-muted, inherit); }
+  .studio-recorder-status { min-height: 2.5rem; max-width: 24rem; margin: 0; color: var(--color-text-body, inherit); }
+  .studio-recorder-failed { display: none; font-size: .8125rem; color: var(--color-text-secondary, inherit); }
+  [data-studio-controller-failed~="voice-recorder"] .studio-recorder-failed { display: block; }
+  .studio-mic-failed { display: none; margin: 0; font-size: .8125rem; color: var(--color-text-secondary, inherit); }
+  [data-studio-controller-failed~="microphone-chip"] .studio-mic-failed { display: block; }
+  @media (prefers-reduced-motion: reduce) {
+    [data-microphone-live="true"] .studio-mic-dot { transform: none; transition: none; }
+    .studio-recorder-button { transition: none; }
+  }
+</style>

data/lib/studio/engine.rb

@@ -303,8 +303,10 @@ module Studio
     # User#inspect: POST /profile/voice carries voice[embeddings], and the user
     # holds voice_embedding (Voicebox logged vectors until it filtered them).
     # `(\A|\.)` also masks the JSON param wrapper's copy (profile.voice.embeddings).
+    # POST /voice/takes carries voice[embedding] (one take's vector) and
+    # voice[audio] (the take itself); both are masked the same way.
     initializer "studio.voice_profile.filter_parameters" do |app|
-      app.config.filter_parameters += [/(\A|\.)voice\.embeddings\z/, /\Avoice_embedding\z/]
+      app.config.filter_parameters += [/(\A|\.)voice\.(embeddings|embedding|audio)\z/, /\Avoice_embedding\z/]
     end
 
     initializer "studio.footer_only_eager_load" do

data/lib/studio/version.rb

@@ -1,3 +1,3 @@
 module Studio
-  VERSION = "0.120.0"
+  VERSION = "0.122.0"
 end

data/lib/studio/voice_capture.rb

@@ -0,0 +1,95 @@
+# frozen_string_literal: true
+
+# The words on the engine's voice capture layer: the microphone chip and its
+# help dialog (studio/voice/_microphone_chip, _microphone_help), and the record
+# button (studio/voice/_recorder). Ported from Voicebox's MicrophoneHelper and
+# RecordingsHelper; the contract is docs/VOICE_CAPTURE.md.
+#
+# The chip names the microphone the page records from, so a switched-off
+# headset Chrome picked on its own is plain to see, and lets the person pick
+# another. A host passes `copy:` to either partial to change any line; its
+# keys merge over these, one level deep per section.
+module Studio
+  module VoiceCapture
+    # Where the chip remembers the pick (localStorage), unless a partial is given
+    # storage_key:. Mirrors STORAGE_KEY in app/javascript/studio/microphone.js.
+    STORAGE_KEY = "studio.microphone"
+
+    MICROPHONE_COPY = {
+      # Before the person allows the microphone the browser gives no names.
+      "prompt" => { "chip" => "Microphone: tap Record to allow",
+                    "note" => "Tap Record once and allow the microphone. Then you can pick one here." },
+      # The microphone icon says what the name is, so the name gets the whole
+      # width at 390px; a screen reader hears "aria" in full.
+      "ready" => { "chip" => "%{microphone}", "aria" => "Microphone: %{microphone}. Tap to pick another.",
+                   "note" => "Pick the microphone to record with. Your next take uses it." },
+      "denied" => { "chip" => "Microphone not allowed",
+                    "note" => "This site isn't allowed to use the microphone. Tap the icon beside the web address, " \
+                              "set Microphone to Allow, then reload this page." },
+      "unsupported" => { "chip" => "No microphone here",
+                         "note" => "This browser can't list microphones. Try Safari or Chrome." },
+      "fell_back" => "That microphone isn't connected, so I'm using %{microphone}.",
+      "empty" => "No microphones found. Plug one in and it shows up here.",
+      "in_use" => "In use",
+      # Shown only when the chip's controller failed to load.
+      "unavailable" => "Picking a microphone didn't load. Reload to try again.",
+      # The help dialog. Switching happens on the page, by device id, so the
+      # dialog never sends anyone to Chrome to switch: Chrome's settings are
+      # where the microphone is ALLOWED, and where a person checks it when a
+      # take stays silent.
+      "help" => {
+        "link" => "Help with microphones",
+        "title_chrome" => "How to change your microphone in Chrome",
+        "title_other" => "How to change your microphone",
+        "steps_chrome" => [
+          "Click the icon left of the address.",
+          "Turn Microphone on.",
+          "Make sure your microphone is allowed.",
+          "Reload the page."
+        ],
+        "other" => "Allow the microphone when your browser asks, or in its settings for this site, " \
+                   "then pick your microphone here and reload.",
+        "unnamed" => "the microphone",
+        "switched" => "Switched to %{microphone} ✓",
+        "switched_tip_chrome" => "If Chrome asks or it stays silent, here's how to check Chrome's microphone.",
+        "switched_tip_other" => "If your browser asks or it stays silent, here's how to check its microphone.",
+        "silent" => "I couldn't hear anything from %{microphone}.",
+        "silent_tip" => "Pick another microphone in the list, or check that the browser may use it:",
+        "denied" => "This site isn't allowed to use the microphone yet.",
+        "denied_tip" => "Allow it, then reload:",
+        "close" => "Close"
+      }
+    }.freeze
+
+    # The record button's words per state. Mirrors COPY in
+    # app/javascript/studio/voice_recorder.js, which fills any state a page
+    # leaves out; the partial renders the idle words so the button reads right
+    # before the controller connects.
+    RECORDER_COPY = {
+      "idle" => { "button" => "Record", "status" => "" },
+      "recording" => { "button" => "Stop", "status" => "Listening..." },
+      "unavailable" => "Recording didn't load on this page. Reload to try again."
+    }.freeze
+
+    module_function
+
+    # The copy with a host's overrides merged in: a Hash section merges key by
+    # key, anything else replaces.
+    def microphone_copy(overrides = nil)
+      merge(MICROPHONE_COPY, overrides)
+    end
+
+    def recorder_copy(overrides = nil)
+      merge(RECORDER_COPY, overrides)
+    end
+
+    def merge(base, overrides)
+      return base if overrides.nil? || overrides.empty?
+
+      overrides.to_h.each_with_object(base.dup) do |(key, value), merged|
+        key = key.to_s
+        merged[key] = merged[key].is_a?(Hash) && value.is_a?(Hash) ? merged[key].merge(value.transform_keys(&:to_s)) : value
+      end
+    end
+  end
+end