Skip to content

Commit 2d3c5ab

Browse files
lucasferreiralimaxlucasferreiralimax
committed
create logic for voicecapture
1 parent 3ed3c00 commit 2d3c5ab

File tree

2 files changed

+533
-20
lines changed

2 files changed

+533
-20
lines changed

‎src/App.vue

Lines changed: 147 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,165 @@
11
<script setup>
2+
import { ref } from 'vue';
23
import Nucleus from 'nucleus-vue';
34
import VoiceCaptureVue from './components/VoiceCapture.vue';
45
import { configApp } from './App.config';
6+
7+
const langSelect = ref('en');
8+
const modeSelect = ref('fullscreen');
9+
const isVoiceCaptureExample = ref(false);
10+
const voiceTextTranscript = ref('');
11+
12+
function openVoiceCapture(mode) {
13+
modeSelect.value = mode;
14+
isVoiceCaptureExample.value = true;
15+
}
16+
17+
function returnVoiceTranscript(transcript) {
18+
voiceTextTranscript.value = transcript;
19+
}
520
</script>
621

722
<template>
823
<Nucleus :config="configApp">
9-
<div class="content example">
10-
<h2>Voice Capture Example</h2>
11-
<VoiceCaptureVue />
24+
<div class="content">
25+
<h2>VoiceCapture Example</h2>
26+
<div class="content-actions">
27+
<div class="example-actions">
28+
<button
29+
class="button-voicecapture-example"
30+
type="button"
31+
@click="openVoiceCapture('fullscreen')"
32+
>
33+
<span class="material-symbols-outlined"> &#xe029; </span>
34+
<span class="material-symbols-outlined"> &#xe5d0; </span> FullScreen
35+
</button>
36+
<button
37+
class="button-voicecapture-example"
38+
type="button"
39+
@click="openVoiceCapture('float')"
40+
>
41+
<span class="material-symbols-outlined"> &#xe029; </span>
42+
<span class="material-symbols-outlined"> &#xe62e; </span> Float
43+
</button>
44+
</div>
45+
<div class="language">
46+
<label for="langSelect" class="lang-label">Choose the language:</label>
47+
<select id="langSelect" v-model="langSelect" class="lang-select">
48+
<option value="en">English</option>
49+
<option value="pt">Portuguese</option>
50+
<option value="es">Spanish</option>
51+
<option value="fr">French</option>
52+
<option value="de">German</option>
53+
<option value="it">Italian</option>
54+
<option value="ja">Japanese</option>
55+
<option value="zh">Chinese</option>
56+
<option value="ru">Russian</option>
57+
<option value="ar">Arabic</option>
58+
<option value="ko">Korean</option>
59+
<option value="nl">Dutch</option>
60+
<option value="sv">Swedish</option>
61+
</select>
62+
</div>
63+
</div>
64+
65+
<VoiceCaptureVue
66+
:start="isVoiceCaptureExample"
67+
@voiceTranscript="returnVoiceTranscript"
68+
:lang="langSelect"
69+
:mode="modeSelect"
70+
/>
71+
72+
<div v-if="voiceTextTranscript" class="content">
73+
<div class="input-group">
74+
<label for="voiceTextArea" class="input-label">
75+
<h2>Transcript Results</h2>
76+
</label>
77+
<textarea
78+
id="voiceTextArea"
79+
class="input-field textarea"
80+
v-model="voiceTextTranscript"
81+
placeholder="Texto do Voice Transcript"
82+
></textarea>
83+
</div>
84+
</div>
1285
</div>
1386
</Nucleus>
1487
</template>
1588

1689
<style>
17-
.example {
90+
.example-actions {
91+
width: 50%;
92+
display: flex;
93+
gap: 20px;
94+
@media (max-width: 800px) {
95+
width: 100%;
96+
}
97+
}
98+
99+
.button-voicecapture-example {
100+
background: var(--primary);
101+
color: #fff;
102+
display: inline-flex;
103+
justify-content: center;
104+
align-items: center;
105+
border-radius: 10px;
106+
border: 1px solid var(--vtl-background);
107+
padding: 0.5rem 1rem;
108+
cursor: pointer;
109+
min-height: 70px;
110+
white-space: nowrap;
111+
112+
svg {
113+
margin-right: 1rem;
114+
}
115+
116+
.material-symbols-outlined {
117+
margin-right: 0.5rem;
118+
}
119+
.material-symbols-outlined.plus {
120+
margin: 0 0.5rem;
121+
}
122+
}
123+
124+
.lang-label {
125+
display: block;
126+
margin-bottom: 10px;
127+
font-weight: bold;
128+
}
129+
130+
.lang-select {
131+
width: 100%;
132+
padding: 10px;
133+
border: 1px solid rgba(255, 255, 255, 0.2);
134+
border-radius: 5px;
135+
font-size: 16px;
136+
color: var(--color-text);
137+
background-color: var(--vtl-background);
138+
}
139+
140+
.input-group {
18141
display: flex;
19142
flex-direction: column;
20-
flex-wrap: wrap;
21-
align-items: flex-start;
143+
gap: 0.5rem;
22144
}
23-
.example button {
24-
margin: 1rem 0;
145+
146+
.input-label {
147+
font-size: 16px;
148+
color: var(--color-text);
149+
}
150+
151+
.input-field {
152+
padding: 10px;
153+
border: 1px solid rgba(255, 255, 255, 0.2);
154+
border-radius: 5px;
155+
font-size: 16px;
156+
width: 100%;
157+
background-color: var(--vtl-background);
158+
color: var(--color-text);
159+
}
160+
161+
.textarea {
162+
resize: vertical;
163+
height: 100px;
25164
}
26165
</style>

0 commit comments

Comments
 (0)