@corti/dictation-web 0.7.0-ambient.16 → 0.7.0-ambient.17
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +110 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
# @corti/dictation-web
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/package/@corti/dictation-web)
|
|
4
|
+
[](https://opensource.org/licenses/MIT)
|
|
5
|
+
[](https://discord.com/invite/zXeXHgnZXX)
|
|
6
|
+
[](https://codepen.io/hccullen/pen/OPJmxQR)
|
|
7
|
+
|
|
8
|
+
Web components for real-time, single-speaker dictation on the Corti Transcribe API.
|
|
9
|
+
|
|
10
|
+
- **All-in-one:** `<corti-dictation>` — recording button, settings, keyboard shortcuts, and theming
|
|
11
|
+
- **Modular:** `<dictation-root>` plus `<dictation-recording-button>`, `<dictation-settings-menu>`, and selectors for custom layouts
|
|
12
|
+
|
|
13
|
+
> **Note:** OAuth 2.0 authentication is not handled by this library. The client must provide an authorization token or token refresh function while using the component.
|
|
14
|
+
|
|
15
|
+
For multi-speaker ambient streaming, use [@corti/ambient-web](https://www.npmjs.com/package/@corti/ambient-web) instead.
|
|
16
|
+
|
|
17
|
+
## Installation
|
|
18
|
+
|
|
19
|
+
```bash
|
|
20
|
+
npm i @corti/dictation-web
|
|
21
|
+
# yarn add @corti/dictation-web
|
|
22
|
+
# pnpm add @corti/dictation-web
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
```js
|
|
26
|
+
import "@corti/dictation-web";
|
|
27
|
+
// or: import { CortiDictation } from "@corti/dictation-web";
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
CDN (quick try only):
|
|
31
|
+
|
|
32
|
+
```html
|
|
33
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/@corti/dictation-web/dist/bundle.js"></script>
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
## Quick start
|
|
37
|
+
|
|
38
|
+
```html
|
|
39
|
+
<corti-dictation id="dictation"></corti-dictation>
|
|
40
|
+
<textarea id="transcript" placeholder="Transcript will appear here..."></textarea>
|
|
41
|
+
|
|
42
|
+
<script type="module">
|
|
43
|
+
import "@corti/dictation-web";
|
|
44
|
+
|
|
45
|
+
const dictationEl = document.getElementById("dictation");
|
|
46
|
+
const transcriptEl = document.getElementById("transcript");
|
|
47
|
+
|
|
48
|
+
dictationEl.addEventListener("ready", () => {
|
|
49
|
+
dictationEl.accessToken = "<your-access-token>";
|
|
50
|
+
});
|
|
51
|
+
|
|
52
|
+
dictationEl.addEventListener("transcript", (e) => {
|
|
53
|
+
if (e.detail.data.isFinal) {
|
|
54
|
+
transcriptEl.value += `${e.detail.data.text} `;
|
|
55
|
+
}
|
|
56
|
+
});
|
|
57
|
+
</script>
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
## Modular layout
|
|
61
|
+
|
|
62
|
+
```html
|
|
63
|
+
<dictation-root id="dictationRoot">
|
|
64
|
+
<dictation-recording-button></dictation-recording-button>
|
|
65
|
+
<dictation-settings-menu settingsEnabled="device,language,keybinding"></dictation-settings-menu>
|
|
66
|
+
</dictation-root>
|
|
67
|
+
|
|
68
|
+
<script type="module">
|
|
69
|
+
import "@corti/dictation-web";
|
|
70
|
+
|
|
71
|
+
const root = document.getElementById("dictationRoot");
|
|
72
|
+
root.addEventListener("ready", () => {
|
|
73
|
+
root.accessToken = "<your-access-token>";
|
|
74
|
+
});
|
|
75
|
+
</script>
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
Modular components require `<dictation-root>` as a parent. They share state through Lit context.
|
|
79
|
+
|
|
80
|
+
| Component | Role |
|
|
81
|
+
| --- | --- |
|
|
82
|
+
| `<dictation-root>` | Context provider (auth, config, devices, keybindings) |
|
|
83
|
+
| `<dictation-recording-button>` | Start/stop with audio visualization |
|
|
84
|
+
| `<dictation-settings-menu>` | Device, language, and keybinding UI |
|
|
85
|
+
| `<dictation-device-selector>` | Device dropdown |
|
|
86
|
+
| `<dictation-language-selector>` | Language dropdown |
|
|
87
|
+
| `<dictation-keybinding-selector>` | Push-to-talk / toggle-to-talk keys |
|
|
88
|
+
|
|
89
|
+
## Keybindings
|
|
90
|
+
|
|
91
|
+
Defaults: **Enter** (toggle-to-talk), **Space** (push-to-talk). Key names (`event.key`) and codes (`event.code`) are supported. Shortcuts are ignored while focus is in inputs. If both modes use the same key, toggle-to-talk wins.
|
|
92
|
+
|
|
93
|
+
Configure on `<corti-dictation>` or `<dictation-root>`:
|
|
94
|
+
|
|
95
|
+
```html
|
|
96
|
+
<corti-dictation toggleToTalkKeybinding="`" pushToTalkKeybinding="Space"></corti-dictation>
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
## Documentation
|
|
100
|
+
|
|
101
|
+
- [Dictation Web Component (full guide)](https://docs.corti.ai/sdk/dictation/overview)
|
|
102
|
+
- [API reference](https://docs.corti.ai/sdk/dictation/reference)
|
|
103
|
+
- [Authentication](https://docs.corti.ai/sdk/dictation/authentication)
|
|
104
|
+
- [Styling](https://docs.corti.ai/sdk/dictation/styling)
|
|
105
|
+
- [Proxy setup](https://docs.corti.ai/sdk/dictation/proxy)
|
|
106
|
+
- [Examples](https://github.com/corticph/corti-examples/tree/main/dictation)
|
|
107
|
+
|
|
108
|
+
## Repository
|
|
109
|
+
|
|
110
|
+
Source and issue tracking: [github.com/corticph/dictation-web](https://github.com/corticph/dictation-web)
|
package/package.json
CHANGED