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

339
index.html
View File

@@ -63,7 +63,14 @@ body > main {
} }
#bouton_reconnaissance_vocale { #bouton_reconnaissance_vocale {
padding: 0.7rem; padding: 0;
width: 3rem;
margin-left: -3rem;
border: none;
}
#bouton_envoyer {
padding: 1.5rem;
} }
@media print { @media print {
@@ -82,7 +89,7 @@ body > main {
<button id="bouton_synthese_vocale" type="button" class="secondary" style="display: none;" disabled>🔈</button> <button id="bouton_synthese_vocale" type="button" class="secondary" style="display: none;" disabled>🔈</button>
</nav> </nav>
</header> </header>
<main class="container overflow-auto" id="conversation"> <main class="container" id="conversation">
<p class="reponse">Posez-moi toutes vos questions !</p> <p class="reponse">Posez-moi toutes vos questions !</p>
</main> </main>
<footer class="container"> <footer class="container">
@@ -102,7 +109,7 @@ body > main {
</header> </header>
<form> <form>
<fieldset> <fieldset>
<label>Voix disponibles :</label> <label for="select_voix">Voix disponibles :</label>
<select id="select_voix"> <select id="select_voix">
<option value="">Pas de synthèse vocale</option> <option value="">Pas de synthèse vocale</option>
</select> </select>
@@ -115,174 +122,182 @@ body > main {
</article> </article>
</dialog> </dialog>
<script> <script>
const formulaire = document.getElementById('formulaire'); const formulaire = document.getElementById('formulaire');
const bouton_envoyer = document.getElementById('bouton_envoyer'); const bouton_envoyer = document.getElementById('bouton_envoyer');
const conversation = document.getElementById('conversation'); const conversation = document.getElementById('conversation');
const question = document.getElementById('question'); const question = document.getElementById('question');
const bouton_synthese_vocale = document.getElementById('bouton_synthese_vocale'); const bouton_synthese_vocale = document.getElementById('bouton_synthese_vocale');
const boite_synthese_vocale = document.getElementById('boite_synthese_vocale'); const boite_synthese_vocale = document.getElementById('boite_synthese_vocale');
const select_voix = document.getElementById('select_voix'); const select_voix = document.getElementById('select_voix');
const aphone = select_voix.innerHTML; const aphone = select_voix.innerHTML;
const bouton_fermer = document.getElementById('bouton_fermer'); const bouton_fermer = document.getElementById('bouton_fermer');
const bouton_annuler = document.getElementById('bouton_annuler'); const bouton_annuler = document.getElementById('bouton_annuler');
const bouton_ok = document.getElementById('bouton_ok'); const bouton_ok = document.getElementById('bouton_ok');
const footer = document.querySelector('footer'); const footer = document.querySelector('footer');
const langue = document.documentElement.lang; const langue = document.documentElement.lang;
let voix = null; question.addEventListener('keydown', e => {
function charger_voix() { if (e.key === 'Enter' && !e.ctrlKey && !e.shiftKey) {
let liste_voix = speechSynthesis.getVoices().filter(voice => voice.lang.startsWith(langue)); e.preventDefault();
select_voix.innerHTML = aphone; e.target.form.requestSubmit();
}
if (!liste_voix.length) { });
bouton_synthese_vocale.disabled = true;
speechSynthesis.addEventListener('voiceschanged', charger_voix);
return;
}
speechSynthesis.removeEventListener('voiceschanged', charger_voix); question.addEventListener('focus', () => {
liste_voix.forEach((v, i) => { question.scrollIntoView({ block: 'nearest' });
const option = document.createElement('option'); });
option.value = i;
option.innerText = v.name; formulaire.addEventListener('submit', async (e) => {
select_voix.appendChild(option); e.preventDefault();
if (v.voiceURI === window.localStorage.getItem('voix')) { if (bouton_envoyer.disabled == true) return;
select_voix.value = i;
voix = v; bouton_envoyer.disabled = true;
option.selected = true; let bouton_envoyer_innerHTML = bouton_envoyer.innerHTML;
bouton_synthese_vocale.innerHTML = "🔊"; bouton_envoyer.innerHTML = "";
} bouton_envoyer.setAttribute("aria-busy", true)
}) const formulaireData = new FormData(formulaire);
const citation = document.createElement('article');
bouton_synthese_vocale.disabled = false; citation.innerText = formulaireData.get('question');
bouton_synthese_vocale.addEventListener('click', () => { conversation.appendChild(citation);
boite_synthese_vocale.showModal(); formulaire.reset();
});
bouton_fermer.addEventListener('click', () => { const paragraphe = document.createElement('p');
boite_synthese_vocale.close(); paragraphe.setAttribute("aria-busy", "true");
}); conversation.appendChild(paragraphe);
bouton_annuler.addEventListener('click', () => { conversation.scrollTop = conversation.scrollHeight;
boite_synthese_vocale.close();
}); const requete = await fetch(formulaire.action, {
bouton_ok.addEventListener('click', () => { method: formulaire.method,
boite_synthese_vocale.close(); body: formulaireData
if (select_voix.value) { });
voix = liste_voix[select_voix.value]; paragraphe.setAttribute('aria-busy', 'true');
window.localStorage.setItem('voix', voix.voiceURI); const reponse = await requete.text();
bouton_synthese_vocale.innerHTML = "🔊"; paragraphe.setAttribute('aria-busy', 'false');
} else {
voix = null; if (voix) {
window.localStorage.removeItem('voix'); const utterance = new SpeechSynthesisUtterance(reponse);
bouton_synthese_vocale.innerHTML = "🔈"; utterance.lang = langue;
} utterance.voice = voix;
}); utterance.rate = 1;
} speechSynthesis.speak(utterance);
if ('speechSynthesis' in window) { }
bouton_synthese_vocale.style.display = 'block'; let t = 0;
charger_voix(); Array.from(reponse).forEach((lettre, i) => {
setTimeout(() => {
if (lettre == "\n") {
paragraphe.innerHTML += "<br>";
} else {
paragraphe.innerHTML += lettre;
} }
paragraphe.scrollIntoView({ block: 'start', behavior: 'auto' });
}, t += 100 * Math.random());
});
setTimeout(() => {
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;
question.focus()
}, t);
})
var SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition; // Synthèse vocale
if (SpeechRecognition) { let voix = null;
bouton_reconnaissance_vocale.addEventListener('click', () => { function charger_voix() {
const reconnaissance= new SpeechRecognition(); let liste_voix = speechSynthesis.getVoices(); // .filter(voice => voice.lang.startsWith(langue));
reconnaissance.lang = langue; select_voix.innerHTML = aphone;
bouton_reconnaissance_vocale_inner_HTML = bouton_reconnaissance_vocale.innerHTML
bouton_reconnaissance_vocale.innerHTML = "" if (!liste_voix.length) {
bouton_reconnaissance_vocale.setAttribute("aria-busy", true) bouton_synthese_vocale.disabled = true;
reconnaissance.addEventListener('result', (event) => { speechSynthesis.addEventListener('voiceschanged', charger_voix);
const transcript = event.results[0][0].transcript; return;
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 => { speechSynthesis.removeEventListener('voiceschanged', charger_voix);
if (e.key === 'Enter' && !e.ctrlKey && !e.shiftKey) { liste_voix.forEach((v, i) => {
e.preventDefault(); const option = document.createElement('option');
e.target.form.requestSubmit(); 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 = "🔊";
}
})
question.addEventListener('focus', () => { bouton_synthese_vocale.disabled = false;
question.scrollIntoView({ block: 'nearest' }); 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();
}
formulaire.addEventListener('submit', async (e) => { // Reconnaissance vocale
e.preventDefault(); var SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
if (bouton_envoyer.disabled == true) return; 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)
bouton_envoyer.disabled = true; reconnaissance.addEventListener('result', (event) => {
let bouton_envoyer_innerHTML = bouton_envoyer.innerHTML; const transcript = event.results[0][0].transcript;
bouton_envoyer.innerHTML = ""; question.value = transcript;
bouton_envoyer.setAttribute("aria-busy", true) if (!bouton_envoyer.disabled) formulaire.requestSubmit()
const formulaireData = new FormData(formulaire); });
const citation = document.createElement('article'); reconnaissance.onspeechend =
citation.innerText = formulaireData.get('question'); reconnaissance.onerror =
conversation.appendChild(citation); reconnaissance.onnomatch = function () {
formulaire.reset(); reconnaissance.stop();
bouton_reconnaissance_vocale.setAttribute("aria-busy", false)
const paragraphe = document.createElement('p'); bouton_reconnaissance_vocale.innerHTML = bouton_reconnaissance_vocale_inner_HTML
paragraphe.setAttribute("aria-busy", "true"); };
conversation.appendChild(paragraphe);
conversation.scrollTop = conversation.scrollHeight; reconnaissance.start();
});
const requete = await fetch(formulaire.action, { bouton_reconnaissance_vocale.style.display = 'block';
method: formulaire.method, }
body: formulaireData
});
paragraphe.setAttribute('aria-busy', 'true');
const reponse = await requete.text();
paragraphe.setAttribute('aria-busy', 'false');
if (voix) {
const utterance = new SpeechSynthesisUtterance(reponse);
utterance.lang = langue;
utterance.voice = voix;
utterance.rate = 1;
speechSynthesis.speak(utterance);
}
let t = 0;
Array.from(reponse).forEach((lettre, i) => {
setTimeout(() => {
if (lettre == "\n") {
paragraphe.innerHTML += "<br>";
} else {
paragraphe.innerHTML += lettre;
}
conversation.scrollTop = conversation.scrollHeight;
}, t += 100 * Math.random());
});
setTimeout(() => {
conversation.innerHTML += '<p class="reponse">Voulez-vous que je réponde à une autre question ?</p>';
conversation.scrollTop = conversation.scrollHeight;
bouton_envoyer.disabled = false;
bouton_envoyer.setAttribute("aria-busy", false);
bouton_envoyer.innerHTML = bouton_envoyer_innerHTML;
question.focus()
}, t);
})
function onResize() {
document.body.style.setProperty("--vph", `${window.visualViewport.height}px`);
conversation.scrollTop = conversation.scrollHeight;
}
window.visualViewport?.addEventListener('resize', onResize);
window.addEventListener('resize', onResize);
onResize();
// Adaptation au clavier virtuel du téléphone
function onResize() {
document.body.style.setProperty("--vph", `${window.visualViewport.height}px`);
conversation.scrollTop = conversation.scrollHeight;
}
window.visualViewport?.addEventListener('resize', onResize);
window.addEventListener('resize', onResize);
onResize();
</script> </script>
</body> </body>