wehub-resource-sync
205 lines
5.3 KiB
HTML
205 lines
5.3 KiB
HTML
<head>
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap"
|
|
rel="stylesheet"
|
|
/>
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0"
|
|
/>
|
|
<script type="importmap">
|
|
{
|
|
"imports": {
|
|
"@material/web/": "https://esm.run/@material/web/"
|
|
}
|
|
}
|
|
</script>
|
|
<script type="module">
|
|
import "@material/web/all.js";
|
|
import { styles as typescaleStyles } from "@material/web/typography/md-typescale-styles.js";
|
|
|
|
document.adoptedStyleSheets.push(typescaleStyles.styleSheet);
|
|
</script>
|
|
|
|
<script src="gemini-live-api.js"></script>
|
|
<script src="live-media-manager.js"></script>
|
|
<script src="cookieJar.js"></script>
|
|
|
|
<link rel="stylesheet" href="styles.css" />
|
|
<script defer src="script.js"></script>
|
|
</head>
|
|
<body>
|
|
<h1 class="md-typescale-display-medium">Multimodal Live API</h1>
|
|
<p class="md-typescale-body-medium">
|
|
The Multimodal Live API enables low-latency, two-way interactions that use
|
|
text, audio, and video input, with audio and text output.
|
|
</p>
|
|
<br />
|
|
|
|
<div id="model-config-container">
|
|
<div>
|
|
<md-outlined-text-field
|
|
id="token"
|
|
label="Access Token"
|
|
value=""
|
|
type="password"
|
|
></md-outlined-text-field>
|
|
<br />
|
|
<br />
|
|
<md-outlined-text-field
|
|
id="project"
|
|
label="Project ID"
|
|
value=""
|
|
></md-outlined-text-field>
|
|
</div>
|
|
|
|
<div class="modality-container">
|
|
<p class="md-typescale-body-medium" style="margin-top: 0">
|
|
Model response type
|
|
</p>
|
|
|
|
<form>
|
|
<md-radio
|
|
id="audio-radio"
|
|
name="responseModality"
|
|
value="AUDIO"
|
|
checked="checked"
|
|
></md-radio>
|
|
<label for="audio-radio">
|
|
<span class="material-symbols-outlined"> volume_up </span>
|
|
<span class="icon-text">Audio</span>
|
|
</label>
|
|
|
|
<br /><br />
|
|
|
|
<md-radio
|
|
id="text-radio"
|
|
name="responseModality"
|
|
value="TEXT"
|
|
></md-radio>
|
|
<label for="text-radio">
|
|
<span class="material-symbols-outlined"> text_fields </span>
|
|
<span class="icon-text">Text</span>
|
|
</label>
|
|
</form>
|
|
</div>
|
|
|
|
<md-outlined-text-field
|
|
id="systemInstructions"
|
|
type="textarea"
|
|
label="System Instructions"
|
|
rows="3"
|
|
>
|
|
</md-outlined-text-field>
|
|
|
|
<div>
|
|
<br />
|
|
<md-outlined-button onclick="connectBtnClick()"
|
|
>Connect</md-outlined-button
|
|
>
|
|
<br /><br />
|
|
<md-outlined-button onclick="disconnectBtnClick()"
|
|
>Disconnect</md-outlined-button
|
|
>
|
|
</div>
|
|
</div>
|
|
<br />
|
|
|
|
<div id="model-state">
|
|
<div id="disconnected" class="state">
|
|
<span class="material-symbols-outlined"> cloud_off </span>
|
|
<span class="icon-text">disconnected</span>
|
|
</div>
|
|
<div id="connecting" class="state" hidden>
|
|
<span class="material-symbols-outlined"> hourglass_empty </span>
|
|
<span class="icon-text">connecting...</span>
|
|
</div>
|
|
<div id="connected" class="state" hidden>
|
|
<span class="material-symbols-outlined"> cloud_done </span>
|
|
<span class="icon-text">connected</span>
|
|
</div>
|
|
<div id="speaking" class="state" hidden>
|
|
<span class="material-symbols-outlined"> graphic_eq </span>
|
|
<span class="icon-text">model speaking</span>
|
|
</div>
|
|
</div>
|
|
|
|
<br />
|
|
|
|
<div id="user-input-container">
|
|
<div>
|
|
<div>
|
|
<md-outlined-select
|
|
id="cameraSource"
|
|
label="Camera Input"
|
|
onchange="newCameraSelected()"
|
|
>
|
|
</md-outlined-select>
|
|
</div>
|
|
|
|
<br />
|
|
|
|
<div>
|
|
<md-outlined-select
|
|
id="audioSource"
|
|
label="Microphone Input"
|
|
onchange="newMicSelected()"
|
|
>
|
|
</md-outlined-select>
|
|
</div>
|
|
|
|
<br />
|
|
<div class="spread">
|
|
<span id="micBtn">
|
|
<md-filled-icon-button onclick="micBtnClick()">
|
|
<md-icon>mic</md-icon>
|
|
</md-filled-icon-button>
|
|
</span>
|
|
|
|
<span id="micOffBtn" hidden>
|
|
<md-filled-icon-button onclick="micOffBtnClick()">
|
|
<md-icon>mic_off</md-icon>
|
|
</md-filled-icon-button>
|
|
</span>
|
|
|
|
<span id="cameraBtn">
|
|
<md-filled-icon-button onclick="cameraBtnClick()">
|
|
<md-icon>videocam</md-icon>
|
|
</md-filled-icon-button>
|
|
</span>
|
|
|
|
<span id="screenBtn">
|
|
<md-filled-icon-button onclick="screenShareBtnClick()">
|
|
<md-icon>present_to_all</md-icon>
|
|
</md-filled-icon-button>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div id="video-preview">
|
|
<video id="video" autoplay playsinline muted></video>
|
|
<canvas id="canvas"></canvas>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<md-outlined-text-field
|
|
id="text-message"
|
|
label="Text Message"
|
|
value=""
|
|
></md-outlined-text-field>
|
|
<md-icon-button onclick="newUserMessage()">
|
|
<md-icon>send</md-icon>
|
|
</md-icon-button>
|
|
<br />
|
|
<div id="text-chat"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<md-dialog id="dialog" close>
|
|
<div slot="content">
|
|
<span id="dialogMessage">A dialog that is opened by default.</span>
|
|
</div>
|
|
</md-dialog>
|
|
</body>
|