<!DOCTYPE html>
<html dir="rtl" lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>محادثة صوتية</title>
<style>
/* Previous styles remain the same */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background: #ffffff;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
}
.container {
width: 100%;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
.record-button-container {
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: #ffffff;
}
.record-button {
width: 60vmin;
height: 60vmin;
border-radius: 50%;
background: rgba(40, 167, 69, 0.1);
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
position: relative;
transition: all 0.3s ease;
box-shadow: 0 10px 30px rgba(40, 167, 69, 0.2);
}
.record-button:hover {
transform: scale(1.02);
box-shadow: 0 15px 40px rgba(40, 167, 69, 0.3);
}
.record-button.recording {
background: rgba(40, 167, 69, 0.2);
animation: pulse 2s infinite;
}
/* Modified inner shape styles */
.inner-shape {
width: 40%;
height: 40%;
background: #28a745;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(40, 167, 69, 0.2);
}
/* Circle state (default) */
.inner-shape {
border-radius: 50%;
}
/* Square state (recording) */
.record-button.recording .inner-shape {
border-radius: 15%;
transform: scale(0.8);
}
.wave-container {
margin-top: 30px;
display: flex;
justify-content: center;
align-items: center;
gap: 5px;
height: 50px;
}
.wave {
width: 4px;
height: 20px;
background: rgba(40, 167, 69, 0.6);
border-radius: 2px;
animation: waveAnimation 1s ease-in-out infinite;
}
.wave:nth-child(2) { animation-delay: 0.1s; }
.wave:nth-child(3) { animation-delay: 0.2s; }
.wave:nth-child(4) { animation-delay: 0.3s; }
.wave:nth-child(5) { animation-delay: 0.4s; }
.wave:nth-child(6) { animation-delay: 0.5s; }
.wave:nth-child(7) { animation-delay: 0.6s; }
.wave:nth-child(8) { animation-delay: 0.7s; }
@keyframes waveAnimation {
0%, 100% { transform: scaleY(0.5); }
50% { transform: scaleY(2); }
}
.status-text {
text-align: center;
color: #28a745;
font-size: 1.5rem;
font-weight: bold;
margin-top: 20px;
}
.toggle-code-button {
position: fixed;
top: 20px;
right: 20px;
padding: 10px 20px;
background: #28a745;
border: none;
border-radius: 25px;
color: white;
cursor: pointer;
transition: all 0.3s ease;
z-index: 1000;
}
.toggle-code-button:hover {
background: #218838;
}
.code-section {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.95);
z-index: 999;
overflow-y: auto;
padding: 20px;
box-sizing: border-box;
}
.code-section.visible {
display: block;
}
.message-container {
background: rgba(40, 167, 69, 0.1);
padding: 15px;
border-radius: 15px;
margin: 10px;
color: #333;
width: 90%;
max-width: 600px;
}
.message-label {
font-weight: bold;
margin-bottom: 8px;
color: #28a745;
}
.message-content {
padding: 10px;
background: rgba(40, 167, 69, 0.05);
border-radius: 8px;
min-height: 40px;
}
.voice-settings {
position: fixed;
bottom: 20px;
width: 90%;
max-width: 600px;
padding: 15px;
background: rgba(40, 167, 69, 0.1);
border-radius: 15px;
}
select {
width: 100%;
padding: 12px;
border-radius: 10px;
border: 1px solid #28a745;
background: white;
color: #28a745;
font-size: 16px;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
</style>
</head>
<body>
<div class="container">
<button class="toggle-code-button" id="toggleCode">عرض النص</button>
<div class="record-button-container">
<button class="record-button" id="recordButton">
<div class="inner-shape"></div>
</button>
<div class="wave-container">
<div class="wave"></div>
<div class="wave"></div>
<div class="wave"></div>
<div class="wave"></div>
<div class="wave"></div>
<div class="wave"></div>
<div class="wave"></div>
<div class="wave"></div>
</div>
</div>
<div class="status-text" id="statusText">انقر للبدء في التسجيل</div>
<div class="code-section" id="codeSection">
<div class="message-container">
<div class="message-label">ما قلته:</div>
<div class="message-content" id="spokenText"></div>
</div>
<div class="message-container">
<div class="message-label">رد النموذج:</div>
<div class="message-content" id="modelResponse"></div>
</div>
<div class="voice-settings">
<select id="voiceSelect">
<option value="">اختر صوت رجل عربي فصحى</option>
</select>
</div>
</div>
</div>
<script>
const API_URL = 'https://g2mgow5tgbxsjy-7777.proxy.runpod.net/proxy/8000/chat';
const recordButton = document.getElementById('recordButton');
const statusText = document.getElementById('statusText');
const spokenText = document.getElementById('spokenText');
const modelResponse = document.getElementById('modelResponse');
const voiceSelect = document.getElementById('voiceSelect');
const toggleCodeButton = document.getElementById('toggleCode');
const codeSection = document.getElementById('codeSection');
const waveContainer = document.querySelector('.wave-container');
let isRecording = false;
toggleCodeButton.onclick = () => {
codeSection.classList.toggle('visible');
toggleCodeButton.textContent = codeSection.classList.contains('visible') ? 'إخفاء النص' : 'عرض النص';
};
const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
recognition.lang = 'ar-SA';
recognition.continuous = false;
recognition.interimResults = false;
function loadVoices() {
const voices = speechSynthesis.getVoices();
voiceSelect.innerHTML = '<option value="">اختر صوت رجل عربي فصحى</option>';
voices.forEach((voice, index) => {
if (voice.lang.includes('ar') && (voice.name.includes('Male') || voice.name.includes('رجل'))) {
const option = document.createElement('option');
option.value = index;
option.textContent = voice.name;
if (voice.default) {
option.selected = true;
}
voiceSelect.appendChild(option);
}
});
if (voiceSelect.options.length === 1) {
voices.forEach((voice, index) => {
if (voice.name.includes('Male')) {
const option = document.createElement('option');
option.value = index;
option.textContent = voice.name;
voiceSelect.appendChild(option);
}
});
}
}
speechSynthesis.onvoiceschanged = loadVoices;
loadVoices();
recognition.onresult = async (event) => {
const text = event.results[0][0].transcript;
spokenText.textContent = text;
try {
const response = await fetch(API_URL, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ message: text })
});
const data = await response.json();
const botReply = data.response;
modelResponse.textContent = botReply;
const utterance = new SpeechSynthesisUtterance(botReply);
const voices = speechSynthesis.getVoices();
const selectedVoice = voices[voiceSelect.value || 0];
utterance.voice = selectedVoice;
utterance.lang = 'ar-SA';
utterance.rate = 1;
utterance.pitch = 1;
speechSynthesis.speak(utterance);
} catch (error) {
modelResponse.textContent = 'حدث خطأ في الاتصال بالنموذج';
statusText.textContent = 'حدث خطأ في الاتصال';
}
};
recognition.onerror = (event) => {
console.error('خطأ:', event.error);
statusText.textContent = 'حدث خطأ في التعرف على الكلام';
isRecording = false;
recordButton.classList.remove('recording');
};
recognition.onend = () => {
isRecording = false;
recordButton.classList.remove('recording');
statusText.textContent = 'انقر للبدء في التسجيل';
};
recordButton.onclick = () => {
if (!isRecording) {
recognition.start();
isRecording = true;
recordButton.classList.add('recording');
statusText.textContent = 'جارٍ التسجيل... انقر للإيقاف';
spokenText.textContent = '';
modelResponse.textContent = '';
} else {
recognition.stop();
isRecording = false;
recordButton.classList.remove('recording');
statusText.textContent = 'جارٍ معالجة الكلام...';
}
};
</script>
</body>
</html>