adrien/ChatBeta
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ascenseur

Browse Source
This commit is contained in:
Adrien MALINGREY
2026-01-19 16:52:54 +01:00
parent 4821285a00
commit 8dc22a80ba
1 changed files with 177 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

189
index.html
View File

@@ -63,7 +63,14 @@ body > main {
}
#bouton_reconnaissance_vocale {
padding: 0.7rem;
padding: 0;
width: 3rem;
margin-left: -3rem;
border: none;
}
#bouton_envoyer {
padding: 1.5rem;
}
@media print {
@@ -82,7 +89,7 @@ body > main {
<button id="bouton_synthese_vocale" type="button" class="secondary" style="display: none;" disabled>🔈</button>
</nav>
</header>
<main class="container overflow-auto" id="conversation">
<main class="container" id="conversation">
<p class="reponse">Posez-moi toutes vos questions !</p>
</main>
<footer class="container">
@@ -102,7 +109,7 @@ body > main {
</header>
<form>
<fieldset>
<label>Voix disponibles :</label>
<label for="select_voix">Voix disponibles :</label>
<select id="select_voix">
<option value="">Pas de synthèse vocale</option>
</select>
@@ -129,86 +136,6 @@ body > main {
const footer = document.querySelector('footer');
const langue = document.documentElement.lang;
let voix = null;
function charger_voix() {
let liste_voix = speechSynthesis.getVoices().filter(voice => voice.lang.startsWith(langue));
select_voix.innerHTML = aphone;
if (!liste_voix.length) {
bouton_synthese_vocale.disabled = true;
speechSynthesis.addEventListener('voiceschanged', charger_voix);
return;
}
speechSynthesis.removeEventListener('voiceschanged', charger_voix);
liste_voix.forEach((v, i) => {
const option = document.createElement('option');
option.value = i;
option.innerText = v.name;
select_voix.appendChild(option);
if (v.voiceURI === window.localStorage.getItem('voix')) {
select_voix.value = i;
voix = v;
option.selected = true;
bouton_synthese_vocale.innerHTML = "🔊";
}
})
bouton_synthese_vocale.disabled = false;
bouton_synthese_vocale.addEventListener('click', () => {
boite_synthese_vocale.showModal();
});
bouton_fermer.addEventListener('click', () => {
boite_synthese_vocale.close();
});
bouton_annuler.addEventListener('click', () => {
boite_synthese_vocale.close();
});
bouton_ok.addEventListener('click', () => {
boite_synthese_vocale.close();
if (select_voix.value) {
voix = liste_voix[select_voix.value];
window.localStorage.setItem('voix', voix.voiceURI);
bouton_synthese_vocale.innerHTML = "🔊";
} else {
voix = null;
window.localStorage.removeItem('voix');
bouton_synthese_vocale.innerHTML = "🔈";
}
});
}
if ('speechSynthesis' in window) {
bouton_synthese_vocale.style.display = 'block';
charger_voix();
}
var SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
if (SpeechRecognition) {
bouton_reconnaissance_vocale.addEventListener('click', () => {
const reconnaissance= new SpeechRecognition();
reconnaissance.lang = langue;
bouton_reconnaissance_vocale_inner_HTML = bouton_reconnaissance_vocale.innerHTML
bouton_reconnaissance_vocale.innerHTML = ""
bouton_reconnaissance_vocale.setAttribute("aria-busy", true)
reconnaissance.addEventListener('result', (event) => {
const transcript = event.results[0][0].transcript;
question.value = transcript;
formulaire.requestSubmit()
});
reconnaissance.addEventListener('speechend', () => {
reconnaissance.stop();
bouton_reconnaissance_vocale.setAttribute("aria-busy", false)
bouton_reconnaissance_vocale.innerHTML = bouton_reconnaissance_vocale_inner_HTML
});
reconnaissance.addEventListener('error', (event) => {
bouton_reconnaissance_vocale.setAttribute("aria-busy", false)
bouton_reconnaissance_vocale.innerHTML = bouton_reconnaissance_vocale_inner_HTML
});
reconnaissance.start();
});
bouton_reconnaissance_vocale.style.display = 'block';
}
question.addEventListener('keydown', e => {
if (e.key === 'Enter' && !e.ctrlKey && !e.shiftKey) {
e.preventDefault();
@@ -262,12 +189,15 @@ body > main {
} else {
paragraphe.innerHTML += lettre;
}
conversation.scrollTop = conversation.scrollHeight;
paragraphe.scrollIntoView({ block: 'start', behavior: 'auto' });
}, t += 100 * Math.random());
});
setTimeout(() => {
conversation.innerHTML += '<p class="reponse">Voulez-vous que je réponde à une autre question ?</p>';
conversation.scrollTop = conversation.scrollHeight;
const paragraphe = document.createElement('p');
paragraphe.classList.add('reponse');
paragraphe.innerHTML = 'Voulez-vous que je réponde à une autre question ?';
conversation.appendChild(paragraphe);
paragraphe.scrollIntoView({ block: 'start', behavior: 'auto' });
bouton_envoyer.disabled = false;
bouton_envoyer.setAttribute("aria-busy", false);
bouton_envoyer.innerHTML = bouton_envoyer_innerHTML;
@@ -275,6 +205,92 @@ body > main {
}, t);
})
// Synthèse vocale
let voix = null;
function charger_voix() {
let liste_voix = speechSynthesis.getVoices(); // .filter(voice => voice.lang.startsWith(langue));
select_voix.innerHTML = aphone;
if (!liste_voix.length) {
bouton_synthese_vocale.disabled = true;
speechSynthesis.addEventListener('voiceschanged', charger_voix);
return;
}
speechSynthesis.removeEventListener('voiceschanged', charger_voix);
liste_voix.forEach((v, i) => {
const option = document.createElement('option');
option.value = i;
option.innerText = v.name;
select_voix.appendChild(option);
if (v.voiceURI === window.localStorage.getItem('voix')) {
select_voix.value = i;
voix = v;
option.selected = true;
bouton_synthese_vocale.innerHTML = "🔊";
}
})
bouton_synthese_vocale.disabled = false;
bouton_synthese_vocale.addEventListener('click', () => {
boite_synthese_vocale.showModal();
});
bouton_fermer.addEventListener('click', () => {
boite_synthese_vocale.close();
});
bouton_annuler.addEventListener('click', () => {
boite_synthese_vocale.close();
});
bouton_ok.addEventListener('click', () => {
boite_synthese_vocale.close();
if (select_voix.value) {
voix = liste_voix[select_voix.value];
window.localStorage.setItem('voix', voix.voiceURI);
bouton_synthese_vocale.innerHTML = "🔊";
} else {
voix = null;
window.localStorage.removeItem('voix');
bouton_synthese_vocale.innerHTML = "🔈";
}
});
}
if ('speechSynthesis' in window) {
bouton_synthese_vocale.style.display = 'block';
charger_voix();
}
// Reconnaissance vocale
var SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
if (SpeechRecognition) {
bouton_reconnaissance_vocale.addEventListener('click', () => {
const reconnaissance= new SpeechRecognition();
reconnaissance.lang = langue;
reconnaissance.continuous = false;
reconnaissance.interimResults = false;
reconnaissance.maxAlternatives = 1;
bouton_reconnaissance_vocale_inner_HTML = bouton_reconnaissance_vocale.innerHTML
bouton_reconnaissance_vocale.innerHTML = ""
bouton_reconnaissance_vocale.setAttribute("aria-busy", true)
reconnaissance.addEventListener('result', (event) => {
const transcript = event.results[0][0].transcript;
question.value = transcript;
if (!bouton_envoyer.disabled) formulaire.requestSubmit()
});
reconnaissance.onspeechend =
reconnaissance.onerror =
reconnaissance.onnomatch = function () {
reconnaissance.stop();
bouton_reconnaissance_vocale.setAttribute("aria-busy", false)
bouton_reconnaissance_vocale.innerHTML = bouton_reconnaissance_vocale_inner_HTML
};
reconnaissance.start();
});
bouton_reconnaissance_vocale.style.display = 'block';
}
// Adaptation au clavier virtuel du téléphone
function onResize() {
document.body.style.setProperty("--vph", `${window.visualViewport.height}px`);
conversation.scrollTop = conversation.scrollHeight;
@@ -282,7 +298,6 @@ body > main {
window.visualViewport?.addEventListener('resize', onResize);
window.addEventListener('resize', onResize);
onResize();
</script>
</body>