AI Flow: Video

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AI Flow Video: narrate</title>
<link rel="icon" type="image/svg+xml" href="favicon.svg">
<link rel="stylesheet" href="static/base.css">
<link rel="stylesheet" href="static/narrate.css">
</head>
<body>
<header class="app-header">
  <div class="brand" id="brand" tabindex="0" aria-label="About AI Flow Video">
    <span class="brand-icon" id="brand-icon"></span><span class="app-name">AI Flow Video</span><span class="app-sub">narrate your film</span>
  </div>
  <div class="vsep"></div>
  <div class="subject"><span class="subject-name" id="title">Loading</span><span class="subject-meta mono" id="meta"></span></div>
  <div class="actions">
    <span class="target-chip mono" id="target" data-tooltip="This page is served from your workspace. Your microphone is read by this browser, on this computer."><i class="led" id="led"></i>target: <b>this machine</b></span>
    <button class="icon-btn" id="help-btn" aria-label="How this works" data-icon="info"></button>
    <button class="icon-btn" id="settings-btn" aria-label="Settings" data-tooltip="Settings: countdown length, wrap-up warning, caption size. Stored in your workspace."><img src="static/settings-cog-outline.svg" width="18" height="18" alt=""></button>
  </div>
</header>
<div class="popover" id="brand-pop"></div>
<div class="popover help-pop" id="help-pop">
  <div class="pop-title">How narrating works</div>
  <ol>
    <li><b>Check your microphone.</b> Calibrate sets the level for your voice in about 15 seconds. Pick a camera too if you want your face in the corner of the film.</li>
    <li><b>Rehearse</b> if you like: the film plays with its captions and nothing is recorded.</li>
    <li><b>Record.</b> The film plays, muted, with a line to read under it. Say it your own way. The bar shows how much is left and warns you before the end.</li>
    <li><b>Review.</b> Play the film with your voice on it. Record again if you want.</li>
    <li><b>Use this take.</b> Your AI puts your voice on the film, writes new captions and shows you the result.</li>
  </ol>
</div>

<main>
  <section class="stage" id="stage">
    <adom-video id="player" video="video" chapters="chapters.json" captions="captions.vtt" muted></adom-video>
    <div class="overlay" id="preroll"><div class="pre-num" id="pre-num">5</div><div class="pre-text" id="pre-text">Get ready</div></div>
    <div class="wrapup" id="wrapup"><b id="wrap-num">10</b><span id="wrap-text">seconds left: wrap up</span></div>
    <div class="pipbox" id="pipbox" data-tooltip="You, as you will appear in the film. Drag to move it, drag a corner to resize it, or scroll over it."><div class="pipclip"><video class="campip" id="campip" muted playsinline></video></div><div class="pipbar" id="pipbar"><button id="pipb-shape" data-tooltip="Change the shape: landscape, portrait, square, circle">Shape</button><button id="pipb-off" data-tooltip="Turn your picture off. Your voice is still recorded. Turn it back on under Camera.">Hide me</button></div><i class="piph tl" data-c="tl"></i><i class="piph tr" data-c="tr"></i><i class="piph bl" data-c="bl"></i><i class="piph br" data-c="br"></i></div>
    <div class="recbadge" id="recbadge"><i></i><span id="recbadge-text">Recording</span></div>
  </section>

  <aside>
    <div class="pitchbox" id="pitchbox" role="button" tabindex="0" data-tooltip="The title and thumbnail for YouTube. Pick them before you record: what they promise is what your narration should deliver.">
      <img id="pitch-img" alt=""><div><b id="pitch-title">Title and thumbnail</b><small id="pitch-sub">Your AI has ideas for you to pick from</small></div>
    </div>
    <h2>Steps</h2>
    <ol class="steps-list" id="steps">
      <li id="st-mic" role="button" tabindex="0" data-tooltip="Calibrate your microphone: about 15 seconds. You can do this again at any time."><span class="n">1</span><div><b>Check your microphone</b><small id="st-mic-s">Not checked yet</small></div></li>
      <li id="st-rec" role="button" tabindex="0" data-tooltip="Start a new take from the top. A countdown gives you time to get ready, and earlier takes are kept."><span class="n">2</span><div><b>Record your narration</b><small id="st-rec-s">No takes yet</small></div></li>
      <li id="st-rev" role="button" tabindex="0" data-tooltip="Play the film with your latest take on it. You can send it to your AI from there."><span class="n">3</span><div><b>Review and send to your AI</b><small id="st-rev-s">Nothing to review yet</small></div></li>
    </ol>

    <h2>Microphone</h2>
    <select class="select wide" id="mic" aria-label="Microphone" data-tooltip="Which microphone to record. Any microphone your computer sees is listed here."></select>
    <select class="select wide" id="plan" aria-label="Where the final sound comes from" data-tooltip="Tell your AI how you are set up. With a separate recorder (a wireless mic that records on the device, a phone), this microphone is only a guide: afterwards plug the recorder in and ask your AI to fetch the clip, and it lines the better sound up with this one.">
      <option value="page">This microphone is my final sound</option>
      <option value="external">I am also recording on a separate recorder</option>
    </select>
    <div class="meter" data-tooltip="Your level after the boost. Aim for the dashed line when you speak. Red means too loud."><i id="lvl"></i><em></em></div>
    <div class="heard" id="heard">Microphone not opened yet</div>
    <div class="boost-row" data-tooltip="Mic boost. Calibrate sets it for your voice; drag to set it yourself.">
      <span>Boost</span><input id="boost" type="range" min="1" max="16" step="0.1" value="1" aria-label="Microphone boost"><b class="mono" id="boostv">1.0x</b>
    </div>
    <div class="btn-row">
      <button class="btn ghost" id="cal" data-tooltip="About 15 seconds: a moment of quiet, then one line from your film to read. Sets the boost for your voice and tells you what changed.">Calibrate</button>
      <button class="btn ghost" id="test" data-tooltip="Open the microphone and watch the level. Nothing is recorded.">Test mic</button>
    </div>

    <h2>Camera</h2>
    <button class="btn ghost piptoggle" id="pip-toggle" aria-pressed="false" data-tooltip="Show your face in a corner of the film, or record your voice only. Your choice; nothing is recorded from the camera when this is off.">Show my face in the film: <b>Off</b></button>
    <select class="select wide" id="cam" aria-label="Camera" data-tooltip="Record your face while you narrate. It becomes a small picture in the corner of the film. Pick No camera for voice only."><option value="">No camera: voice only, my face is not shown</option></select>
    <div class="heard" id="camstat">Off. Pick a camera to appear in the corner of the film.</div>
    <div class="pipctl" id="pipctl">
      <div class="boost-row" data-tooltip="The shape of your picture. Portrait and Circle keep your face and drop the room to your left and right, so the picture covers less of the film.">
        <span>Shape</span><select class="select" id="pip-shape" aria-label="Picture shape"><option value="landscape">Landscape</option><option value="portrait">Portrait</option><option value="square">Square</option><option value="circle">Circle</option></select>
        <button class="btn ghost small" id="pip-corner" data-tooltip="Move the picture to the next corner. You can also drag it anywhere on the film.">Next corner</button>
      </div>
      <div class="pipgrid">
        <label data-tooltip="How big your picture is in the film."><span>Size <b class="mono" id="pip-size-v"></b></span><input id="pip-size" type="range" min="0.1" max="0.6" step="0.01" aria-label="Picture size"></label>
        <label data-tooltip="Zoom in on your face. Everything outside the picture is cropped away in the film."><span>Zoom <b class="mono" id="pip-zoom-v"></b></span><input id="pip-zoom" type="range" min="1" max="2.5" step="0.05" aria-label="Zoom"></label>
        <label data-tooltip="Slide the crop left or right to centre your face."><span>Left / right</span><input id="pip-ox" type="range" min="-1" max="1" step="0.02" aria-label="Crop left or right"></label>
        <label data-tooltip="Slide the crop up or down to centre your face."><span>Up / down</span><input id="pip-oy" type="range" min="-1" max="1" step="0.02" aria-label="Crop up or down"></label>
      </div>
    </div>

    <h2>Takes</h2>
    <ul class="takes" id="takes"><li class="empty">Your recordings will be listed here.</li></ul>
    <button class="btn ghost startover" id="startover" data-tooltip="Go back to step 1 with a clean page. Nothing is deleted: your takes are moved into a dated folder in your project, and you can undo this.">Start over</button>

    <h2>From your AI</h2>
    <div class="ainote" id="ainote">Nothing yet. Your AI can see this page and will tell you here what it is doing with your recording.</div>
  </aside>
</main>

<footer class="recbar">
  <button class="btn rec" id="rec" data-tooltip="Start a take from the top. A short countdown, then the film plays muted and your voice is recorded with it.">Record</button>
  <button class="btn ghost" id="rehearse" data-tooltip="Play the film with its captions to practise. Nothing is recorded.">Rehearse</button>
  <button class="btn ghost" id="stop" disabled data-tooltip="Stop now. If you are recording, the take is saved.">Stop</button>
  <div class="clock mono" data-tooltip="Time into the film, and how long it is"><b id="t-now">0:00</b><span> / </span><span id="t-dur">0:00</span></div>
  <div class="progress" id="progress" data-tooltip="Where you are in the film. Each segment is a chapter."><div class="segs" id="segs"></div><i id="prog-fill"></i></div>
  <div class="left mono" data-tooltip="Time left in the film"><span id="t-left">0:00</span> left</div>
  <div class="chap" id="chap" data-tooltip="The chapter on screen now, and the one coming next"><b id="chap-now">Ready</b><small id="chap-next"></small></div>
  <div class="mode" id="mode">Ready</div>
</footer>

<div class="modal" id="modal"><div class="card" id="card"></div></div>

<dialog id="settings" aria-label="Settings">
  <div class="dlg-head"><h3>Settings</h3><button class="icon-btn" id="settings-close" aria-label="Close settings" data-tooltip="Close settings (Esc)" data-icon="close"></button></div>
  <div class="dlg-body" id="settings-body"></div>
  <footer class="settings-footer">
    <p class="footer-note">Settings are stored in your workspace and apply to every film you narrate. Restoring returns every option above to its default.</p>
    <button class="restore-btn" id="restore" data-tooltip="Return every setting to its default. Your takes are kept." data-icon="restore" data-icon-size="16"> Restore defaults</button>
  </footer>
</dialog>

<script src="static/adom-video.js"></script>
<script src="static/icons.js"></script>
<script src="static/ui.js"></script>
<script src="static/narrate.js"></script>
</body>
</html>