Spaces:

Abmacode12
/

espace-codage-theme

Running

App Files Files Community

Abmacode12 commited on Dec 17, 2025

Commit

c00a577

verified ·

1 Parent(s): 3c0491c

Voici une version améliorée de ton code avec plus de fonctionnalités et un meilleur design :

Browse files

html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Reconnaissance Vocale Française - Version Avancée</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}

.container {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-radius: 24px;
padding: 40px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
max-width: 800px;
width: 100%;
}

.header {
text-align: center;
margin-bottom: 40px;
}

.header h1 {
color: #2d3436;
font-size: 2.8rem;
margin-bottom: 10px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.header p {
color: #636e72;
font-size: 1.2rem;
}

.micro-controls {
display: flex;
flex-direction: column;
align-items: center;
gap: 30px;
margin-bottom: 40px;
}

.micro-btn {
width: 120px;
height: 120px;
border-radius: 50%;
border: none;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
font-size: 3.5rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
}

.micro-btn:hover {
transform: scale(1.05);
box-shadow: 0 15px 40px rgba(102, 126, 234, 0.6);
}

.micro-btn.listening {
animation: pulse 1.5s infinite;
background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
box-shadow: 0 10px 30px rgba(255, 107, 107, 0.4);
}

@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}

.status-indicator {
display: flex;
align-items: center;
gap: 15px;
font-size: 1.2rem;
color: #636e72;
}

.status-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: #4cd137;
}

.status-dot.inactive {
background: #e84118;
}

.status-dot.listening {
background: #fbc531;
animation: blink 1s infinite;
}

@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}

.controls {
display: flex;
justify-content: center;
gap: 20px;
margin-bottom: 40px;
}

.control-btn {
padding: 12px 28px;
border: none;
border-radius: 12px;
background: #f5f6fa;
color: #2d3436;
font-size: 1rem;
cursor: pointer;
display: flex;
align-items: center;
gap: 10px;
transition: all 0.3s ease;
}

.control-btn:hover {
background: #dfe6e9;
transform: translateY(-2px);
}

.control-btn i {
font-size: 1.2rem;
}

.result-container {
background: #f8f9fa;
border-radius: 16px;
padding: 30px;
margin-bottom: 30px;
border: 2px solid #e9ecef;
min-height: 200px;
}

.result-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}

.result-header h2 {
color: #2d3436;
font-size: 1.5rem;
}

.result-content {
font-size: 1.3rem;
line-height: 1.6;
color: #2d3436;
min-height: 100px;
white-space: pre-wrap;
word-wrap: break-word;
padding: 15px;
background: white;
border-radius: 10px;
border: 1px solid #dfe6e9;
}

.stats {
display: flex;
justify-content: space-between;
background: #f8f9fa;
padding: 20px;
border-radius: 16px;
margin-top: 20px;
}

.stat-item {
text-align: center;
}

.stat-value {
font-size: 2rem;
font-weight: bold;
color: #667eea;
display: block;
}

.stat-label {
color: #636e72;
font-size: 0.9rem;
}

.notification {
position: fixed;
bottom: 20px;
right: 20px;
background: #00b894;
color: white;
padding: 15px 25px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
display: none;
z-index: 1000;
}

@media (max-width: 768px) {
.container {
padding: 20px;
}

.header h1 {
font-size: 2rem;
}

.controls {
flex-direction: column;
align-items: center;
}

.micro-btn {
width: 100px;
height: 100px;
font-size: 2.8rem;
}

.stats {
flex-direction: column;
gap: 15px;
}
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
<div class="container">
<div class="header">
<h1><i class="fas fa-microphone-alt"></i> Reconnaissance Vocale Française</h1>
<p>Parlez, le système transcrit automatiquement en texte</p>
</div>

<div class="micro-controls">
<button id="micro-btn" class="micro-btn" aria-label="Activer/désactiver le microphone">
<i class="fas fa-microphone"></i>
</button>

<div class="status-indicator">
<div id="status-dot" class="status-dot inactive"></div>
<span id="status-text">Microphone désactivé</span>
</div>
</div>

<div class="controls">
<button id="clear-btn" class="control-btn">
<i class="fas fa-trash-alt"></i> Effacer tout
</button>
<button id="copy-btn" class="control-btn">
<i class="fas fa-copy"></i> Copier le texte
</button>
<button id="save-btn" class="control-btn">
<i class="fas fa-save"></i> Sauvegarder
</button>
</div>

<div class="result-container">
<div class="result-header">
<h2><i class="fas fa-comment-alt"></i> Texte transcrit</h2>
<div class="language-selector">
<select id="language-select" style="padding: 8px; border-radius: 8px; border: 1px solid #ddd;">
<option value="fr-FR">Français (France)</option>
<option value="fr-CA">Français (Canada)</option>
<option value="fr-BE">Français (Belgique)</option>
<option value="fr-CH">Français (Suisse)</option>
<option value="en-US">Anglais (USA)</option>
<option value="es-ES">Espagnol (Espagne)</option>
</select>
</div>
</div>
<div id="result" class="result-content" aria-live="polite" aria-atomic="true">
Votre texte apparaîtra ici...
</div>
</div>

<div class="stats">
<div class="stat-item">
<span id="word-count" class="stat-value">0</span>
<span class="stat-label">Mots</span>
</div>
<div class="stat-item">
<span id="char-count" class="stat-value">0</span>
<span class="stat-label">Caractères</span>
</div>
<div class="stat-item">
<span id="line-count" class="stat-value">0</span>
<span class="stat-label">Lignes</span>
</div>
<div class="stat-item">
<span id="session-count" class="stat-value">0</span>
<span class="stat-label">Sessions</span>
</div>
</div>
</div>

<div id="notification" class="notification">
<i class="fas fa-check-circle"></i> Texte copié dans le presse-papier !
</div>

<script>
// Éléments DOM
const btn = document.getElementById('micro-btn');
const resultDiv = document.getElementById('result');
const statusDot = document.getElementById('status-dot');
const statusText = document.getElementById('status-text');
const clearBtn = document.getElementById('clear-btn');
const c

Files changed (3) hide show

index.html +2 -2
script.js +182 -2
styles.css +14 -0

index.html CHANGED Viewed

@@ -94,10 +94,10 @@
           <i class="fas fa-plug"></i>
         </button>
         <input type="text" id="chatInput" placeholder="Écrire à Rosalinda..." />
-        <button id="micBtn" title="Micro">
           <i class="fas fa-microphone"></i>
         </button>
-        <button id="sendBtn" title="Envoyer">
           <i class="fas fa-paper-plane"></i>
         </button>
       </div>

           <i class="fas fa-plug"></i>
         </button>
         <input type="text" id="chatInput" placeholder="Écrire à Rosalinda..." />
+        <button id="micBtn" title="Activer/Désactiver le micro (Ctrl+Espace)">
           <i class="fas fa-microphone"></i>
         </button>
+<button id="sendBtn" title="Envoyer">
           <i class="fas fa-paper-plane"></i>
         </button>
       </div>

script.js CHANGED Viewed

@@ -193,8 +193,188 @@ sendBtn.addEventListener('click', sendMessage);
 chatInput.addEventListener('keydown', (e) => {
   if (e.key === 'Enter') sendMessage();
 });
-micBtn.addEventListener('click', () => {
-  alert('Fonction "Micro" à implémenter (Web Speech API, Whisper, etc.).');
 });
 connectBtn.addEventListener('click', () => {
   alert('Fonction "Connexion" à implémenter (OAuth, clés API, etc.).');

 chatInput.addEventListener('keydown', (e) => {
   if (e.key === 'Enter') sendMessage();
 });
+const micBtn = document.getElementById('micBtn');
+const languageSelect = document.createElement('select');
+languageSelect.id = 'languageSelect';
+languageSelect.style.marginLeft = '8px';
+languageSelect.style.padding = '6px 8px';
+languageSelect.style.borderRadius = '6px';
+languageSelect.style.border = '1px solid rgb(226 232 240)';
+languageSelect.style.background = 'rgb(248 250 252)';
+languageSelect.style.color = 'inherit';
+languageSelect.innerHTML = `
+  <option value="fr-FR">Français (France)</option>
+  <option value="fr-CA">Français (Canada)</option>
+  <option value="fr-BE">Français (Belgique)</option>
+  <option value="fr-CH">Français (Suisse)</option>
+  <option value="en-US">English (US)</option>
+  <option value="es-ES">Español (España)</option>
+`;
+const chatInputParent = chatInput.parentElement;
+if (chatInputParent && !document.getElementById('languageSelect')) {
+  chatInputParent.insertBefore(languageSelect, chatInput);
+}
+let isListening = false;
+let recognition = null;
+let interimTranscript = '';
+let lastFinalTranscript = '';
+const SpeechRecognitionAPI = window.SpeechRecognition || window.webkitSpeechRecognition;
+function initSpeechRecognition() {
+  if (!SpeechRecognitionAPI) {
+    aiActivityText.textContent = 'Reconnaissance vocale non supportée';
+    aiActivityDot.style.background = 'rgb(239,68,68)';
+    micBtn.disabled = true;
+    micBtn.title = 'Navigateur non compatible';
+    micBtn.style.opacity = '0.6';
+    micBtn.style.cursor = 'not-allowed';
+    return;
+  }
+  recognition = new SpeechRecognitionAPI();
+  recognition.lang = languageSelect.value;
+  recognition.continuous = true;
+  recognition.interimResults = true;
+  recognition.maxAlternatives = 1;
+  recognition.onstart = () => {
+    isListening = true;
+    micBtn.classList.add('listening');
+    micBtn.innerHTML = '<i class="fas fa-microphone-slash"></i>';
+    aiActivityText.textContent = 'Écoute en cours...';
+    aiActivityDot.style.background = 'rgb(234,179,8)';
+    setAIActivity('Écoute en cours...', true);
+  };
+  recognition.onend = () => {
+    isListening = false;
+    micBtn.classList.remove('listening');
+    micBtn.innerHTML = '<i class="fas fa-microphone"></i>';
+    aiActivityText.textContent = 'IA en veille';
+    aiActivityDot.style.background = 'rgb(100,116,139)';
+    setAIActivity('IA en veille', false);
+    interimTranscript = '';
+  };
+  recognition.onerror = (event) => {
+    console.error('SpeechRecognition error:', event.error);
+    let message = 'Erreur de reconnaissance vocale.';
+    switch (event.error) {
+      case 'no-speech':
+        message = 'Aucune parole détectée. Essayez de parler plus fort.';
+        break;
+      case 'audio-capture':
+        message = 'Aucun microphone détecté.';
+        break;
+      case 'not-allowed':
+        message = 'Accès au microphone refusé.';
+        break;
+      case 'network':
+        message = 'Erreur réseau.';
+        break;
+    }
+    addMessage('ai', message);
+    recognition.stop();
+  };
+  recognition.onresult = (event) => {
+    interimTranscript = '';
+    for (let i = event.resultIndex; i < event.results.length; i++) {
+      const transcript = event.results[i][0].transcript.trim();
+      if (event.results[i].isFinal) {
+        lastFinalTranscript = transcript;
+        addMessage('user', transcript);
+        setAIActivity('Rosalinda réfléchit...', true);
+        sendToAI(transcript);
+      } else {
+        interimTranscript += transcript + ' ';
+      }
+    }
+    if (interimTranscript) {
+      codeOutput.textContent = `// En écoute...\n${interimTranscript}`;
+    }
+  };
+}
+function sendToAI(text) {
+  fetch('https://api.openai.com/v1/chat/completions', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      'Authorization': `Bearer ${OPENAI_API_KEY}`
+    },
+    body: JSON.stringify({
+      model: 'gpt-3.5-turbo',
+      messages: [
+        { role: 'system', content: 'Tu es Rosalinda, une assistante IA utile et concise.' },
+        ...getChatHistory(),
+        { role: 'user', content: text }
+      ],
+      temperature: 0.7
+    })
+  })
+    .then(response => {
+      if (!response.ok) throw new Error(`Erreur API: ${response.status}`);
+      return response.json();
+    })
+    .then(data => {
+      const assistantMessage = data.choices?.[0]?.message?.content ?? 'Désolé, aucune réponse.';
+      addMessage('ai', assistantMessage);
+      codeOutput.textContent = assistantMessage;
+    })
+    .catch(error => {
+      console.error(error);
+      addMessage('ai', 'Une erreur est survenue lors de la communication avec l\'IA.');
+    })
+    .finally(() => {
+      setAIActivity('IA en veille', false);
+    });
+}
+async function toggleListening() {
+  if (!recognition) initSpeechRecognition();
+  if (!recognition) return;
+  try {
+    if (isListening) {
+      recognition.stop();
+    } else {
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true }).catch(() => null);
+      if (!stream) {
+        addMessage('ai', 'Impossible d\'accéder au microphone. Vérifiez les permissions.');
+        return;
+      }
+      stream.getTracks().forEach(t => t.stop());
+      recognition.start();
+    }
+  } catch (err) {
+    console.error(err);
+    addMessage('ai', 'Erreur lors du démarrage de la reconnaissance vocale.');
+  }
+}
+function stopListening() {
+  if (recognition && isListening) recognition.stop();
+}
+micBtn.addEventListener('click', toggleListening);
+languageSelect.addEventListener('change', () => {
+  if (recognition) recognition.lang = languageSelect.value;
+});
+document.addEventListener('keydown', (e) => {
+  if (e.code === 'Space' && (e.ctrlKey || e.metaKey)) {
+    e.preventDefault();
+    toggleListening();
+  }
+  if (e.key === 'Escape' && isListening) {
+    stopListening();
+  }
+});
+// Stop listening on tab change to avoid dangling permissions
+document.addEventListener('visibilitychange', () => {
+  if (document.hidden) stopListening();
 });
 connectBtn.addEventListener('click', () => {
   alert('Fonction "Connexion" à implémenter (OAuth, clés API, etc.).');

styles.css CHANGED Viewed

@@ -181,6 +181,20 @@ body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, S
 .chat-input button:hover { background: rgb(241 245 249); }
 .dark .chat-input button:hover { background: rgb(30 41 59); }
 /* Colonne 3 : Output */
 .output {
   width: 35%;

 .chat-input button:hover { background: rgb(241 245 249); }
 .dark .chat-input button:hover { background: rgb(30 41 59); }
+/* Micro button listening state */
+#micBtn.listening {
+  background: rgb(239, 68, 68); /* red-500 */
+  border-color: rgb(239, 68, 68);
+  animation: micPulse 1.2s infinite;
+}
+@keyframes micPulse {
+  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239,68,68,0.6); }
+  70% { transform: scale(1.03); box-shadow: 0 0 0 10px rgba(239,68,68,0); }
+  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239,68,68,0); }
+}
+/* Small status dot improvements (used for activity too) */
+.dot.listening { background: rgb(234,179,8); } /* amber-500 */
 /* Colonne 3 : Output */
 .output {
   width: 35%;