|
<!DOCTYPE html> |
|
<html lang="ar" dir="rtl"> |
|
<head> |
|
|
|
<script async src="https://www.googletagmanager.com/gtag/js?id=G-6L736QT2CB"></script> |
|
<script> |
|
window.dataLayer = window.dataLayer || []; |
|
function gtag(){dataLayer.push(arguments);} |
|
gtag('js', new Date()); |
|
|
|
gtag('config', 'G-6L736QT2CB'); |
|
</script> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>Speedy Chat</title> |
|
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"> |
|
<style> |
|
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@100;200;300;400;500;600;700&display=swap'); |
|
@import url('https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@100;200;300;400;500;600;700;800;900&display=swap'); |
|
|
|
body { |
|
font-family: 'IBM Plex Sans Arabic', sans-serif; |
|
line-height: 1.6; |
|
letter-spacing: -0.01em; |
|
transition: background-color 0.3s, color 0.3s; |
|
} |
|
|
|
body.light-mode { |
|
background-color: #fafafa; |
|
color: #374151; |
|
} |
|
|
|
body.dark-mode { |
|
background-color: #1a1a1a; |
|
color: #e5e5e5; |
|
} |
|
|
|
.dark-mode header { |
|
background-color: #2d2d2d; |
|
border-color: #404040; |
|
} |
|
|
|
.dark-mode footer { |
|
background-color: #2d2d2d; |
|
border-color: #404040; |
|
} |
|
|
|
.dark-mode .message-input { |
|
background-color: #363636; |
|
border-color: #404040; |
|
color: #e5e5e5; |
|
} |
|
|
|
.dark-mode .style-select { |
|
background-color: #363636; |
|
border-color: #404040; |
|
color: #e5e5e5; |
|
} |
|
|
|
.dark-mode .bot-message { |
|
background-color: #363636; |
|
color: #e5e5e5; |
|
} |
|
|
|
.dark-mode .bot-message p { |
|
color: #ffffff !important; |
|
} |
|
|
|
.dark-mode .action-button { |
|
color: #e5e5e5; |
|
background-color: #404040; |
|
} |
|
|
|
.message-input:focus { |
|
outline: none; |
|
box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2); |
|
} |
|
|
|
.welcome-text { |
|
font-family: 'Noto Kufi Arabic', sans-serif; |
|
font-size: 2rem; |
|
font-weight: 700; |
|
text-align: center; |
|
margin: 1.5rem 0; |
|
letter-spacing: -0.02em; |
|
} |
|
|
|
.message { |
|
opacity: 0; |
|
transform: translateY(20px); |
|
animation: fadeIn 0.3s ease forwards; |
|
} |
|
|
|
.message p { |
|
font-size: 1.05rem; |
|
line-height: 1.7; |
|
} |
|
|
|
.bot-avatar { |
|
width: 40px; |
|
height: 40px; |
|
border-radius: 50%; |
|
object-fit: cover; |
|
} |
|
|
|
.action-button { |
|
padding: 0.5rem; |
|
border-radius: 0.375rem; |
|
transition: all 0.2s; |
|
display: inline-flex; |
|
align-items: center; |
|
gap: 0.5rem; |
|
font-size: 0.875rem; |
|
color: #6B7280; |
|
background-color: #F3F4F6; |
|
} |
|
|
|
.action-button:hover { |
|
background-color: #E5E7EB; |
|
} |
|
|
|
.style-select { |
|
appearance: none; |
|
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e"); |
|
background-repeat: no-repeat; |
|
background-position: left 0.5rem center; |
|
background-size: 1em; |
|
} |
|
|
|
.stop-generation { |
|
background-color: #EF4444 !important; |
|
color: white !important; |
|
} |
|
|
|
.message-actions { |
|
display: flex; |
|
gap: 0.5rem; |
|
margin-top: 0.5rem; |
|
} |
|
|
|
@media (max-width: 640px) { |
|
.style-select { |
|
width: 40px; |
|
overflow: hidden; |
|
white-space: nowrap; |
|
padding-right: 0; |
|
background-position: center; |
|
} |
|
|
|
.style-select option { |
|
padding: 8px; |
|
} |
|
} |
|
|
|
@keyframes typeIn { |
|
to { |
|
opacity: 1; |
|
transform: translateY(0); |
|
} |
|
} |
|
|
|
@keyframes fadeIn { |
|
to { |
|
opacity: 1; |
|
transform: translateY(0); |
|
} |
|
} |
|
|
|
#fileInput { |
|
display: none; |
|
} |
|
</style> |
|
</head> |
|
<body class="text-lg light-mode"> |
|
<header class="fixed top-0 left-0 right-0 bg-white border-b border-gray-100 z-50 shadow-sm"> |
|
<div class="flex items-center px-4 py-2"> |
|
<div class="flex items-center flex-1"> |
|
<span class="text-2xl font-bold text-indigo-600">Speedy</span> |
|
</div> |
|
<a href="https://ufastpro.com/" class="text-gray-500 hover:bg-gray-50 p-2 rounded-full transition-colors mr-2"> |
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path> |
|
</svg> |
|
</a> |
|
<a href="/profile" class="text-gray-500 hover:bg-gray-50 p-2 rounded-full transition-colors mr-2"> |
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path> |
|
</svg> |
|
</a> |
|
<a href="https://joermd-mostasharak.static.hf.space" class="text-gray-500 hover:bg-gray-50 p-2 rounded-full transition-colors mr-2"> |
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-3-9l-6-2M6 7l-3-1m3 1l3 9a5.002 5.002 0 006.001 0M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9"></path> |
|
</svg> |
|
</a> |
|
<button id="darkModeToggle" class="text-gray-500 hover:bg-gray-50 p-2 rounded-full transition-colors mr-2"> |
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path> |
|
</svg> |
|
</button> |
|
<button id="clearChat" class="text-gray-500 hover:bg-gray-50 p-2 rounded-full transition-colors"> |
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path> |
|
</svg> |
|
</button> |
|
</div> |
|
</header> |
|
|
|
<main class="pt-24 pb-24"> |
|
<div class="max-w-3xl mx-auto px-4"> |
|
<div class="welcome-text">سبيدي هنا لمساعدتك</div> |
|
<div id="messagesContainer" class="space-y-4"></div> |
|
</div> |
|
</main> |
|
|
|
<footer class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-100 shadow-sm"> |
|
<div class="max-w-3xl mx-auto px-4 py-4"> |
|
<div class="relative"> |
|
<textarea |
|
id="messageInput" |
|
class="message-input w-full border border-gray-200 rounded-lg px-4 py-3 pl-32 pr-4 resize-none text-lg" |
|
rows="1" |
|
placeholder="اكتب رسالتك هنا..." |
|
></textarea> |
|
<div class="absolute bottom-3 left-2 flex items-center space-x-2 rtl:space-x-reverse"> |
|
<button id="sendMessage" class="bg-indigo-500 hover:bg-indigo-600 text-white rounded-full p-2 transition-colors"> |
|
<svg class="w-6 h-6 transform rotate-90" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"></path> |
|
</svg> |
|
</button> |
|
<a href="https://joermd-test11.static.hf.space" target="_blank" id="micButton" class="bg-green-500 hover:bg-green-600 text-white rounded-full p-2 transition-colors"> |
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z"></path> |
|
</svg> |
|
</a> |
|
<input type="file" id="fileInput" multiple /> |
|
<button id="fileButton" class="bg-blue-500 hover:bg-blue-600 text-white rounded-full p-2 transition-colors"> |
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"></path> |
|
</svg> |
|
</button> |
|
<select id="styleSelect" class="style-select bg-gray-50 border border-gray-200 text-gray-600 text-sm rounded-lg pl-8 pr-2 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-200"> |
|
<option value="short">⚡ ردود قصيرة</option> |
|
<option value="normal" selected>◯ عادي</option> |
|
<option value="long">↔ ردود مفصلة</option> |
|
</select> |
|
</div> |
|
</div> |
|
</div> |
|
</footer> |
|
|
|
<script> |
|
|
|
const API_URL = 'https://j8fp9mu44k547j-7777.proxy.runpod.net/proxy/8000/chat'; |
|
const messagesContainer = document.getElementById('messagesContainer'); |
|
const messageInput = document.getElementById('messageInput'); |
|
const sendButton = document.getElementById('sendMessage'); |
|
const clearButton = document.getElementById('clearChat'); |
|
const styleSelect = document.getElementById('styleSelect'); |
|
const darkModeToggle = document.getElementById('darkModeToggle'); |
|
const fileInput = document.getElementById('fileInput'); |
|
const fileButton = document.getElementById('fileButton'); |
|
let chatHistory = []; |
|
let currentStyle = 'normal'; |
|
let currentController = null; |
|
|
|
|
|
fileButton.addEventListener('click', () => { |
|
fileInput.click(); |
|
}); |
|
|
|
|
|
|
|
fileInput.addEventListener('change', async (e) => { |
|
const files = Array.from(e.target.files); |
|
const formData = new FormData(); |
|
|
|
files.forEach(file => { |
|
formData.append('files', file); |
|
}); |
|
|
|
try { |
|
const response = await fetch(`${API_URL}/upload`, { |
|
method: 'POST', |
|
body: formData |
|
}); |
|
|
|
if (!response.ok) { |
|
throw new Error('File upload failed'); |
|
} |
|
|
|
const data = await response.json(); |
|
|
|
|
|
const fileNames = files.map(file => file.name).join(', '); |
|
messageInput.value = `تم رفع الملفات: ${fileNames}`; |
|
sendMessage(); |
|
|
|
|
|
fileInput.value = ''; |
|
} catch (error) { |
|
console.error('Error uploading files:', error); |
|
messageInput.value = 'عذرا نحن نعمل حاليا عى اضافة هذه الميزة'; |
|
sendMessage(); |
|
} |
|
}); |
|
|
|
|
|
darkModeToggle.addEventListener('click', () => { |
|
document.body.classList.toggle('dark-mode'); |
|
document.body.classList.toggle('light-mode'); |
|
}); |
|
|
|
styleSelect.addEventListener('change', (e) => { |
|
currentStyle = e.target.value; |
|
}); |
|
|
|
function createUserMessage(text) { |
|
let prefix = ''; |
|
if (currentStyle === 'short') { |
|
prefix = 'اعطني رد باختصار وسرعة: '; |
|
} else if (currentStyle === 'long') { |
|
prefix = 'اعطني رد مفصل وموسع: '; |
|
} |
|
|
|
return ` |
|
<div class="message flex justify-end mb-4"> |
|
<div class="max-w-[80%]"> |
|
<div class="bg-indigo-500 text-white rounded-lg p-4 shadow-sm"> |
|
<p class="text-lg">${text}</p> |
|
</div> |
|
</div> |
|
</div> |
|
`; |
|
} |
|
|
|
function createBotMessage(text, messageId) { |
|
return ` |
|
<div class="message flex justify-start mb-4"> |
|
<div class="flex-shrink-0 mt-1"> |
|
<img src="https://ufastpro.com/wp-content/uploads/2024/12/3.png" alt="Bot Avatar" class="bot-avatar"> |
|
</div> |
|
<div class="max-w-[80%] mr-3"> |
|
<div class="bot-message bg-white rounded-lg p-4 shadow-sm"> |
|
<p id="${messageId}" class="text-gray-700"></p> |
|
<div class="message-actions"> |
|
<button class="action-button copy-button" data-message-id="${messageId}"> |
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"></path> |
|
</svg> |
|
نسخ |
|
</button> |
|
<button class="action-button regenerate-button" data-message-id="${messageId}"> |
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path> |
|
</svg> |
|
إعادة التوليد |
|
</button> |
|
<button class="action-button like-button" data-message-id="${messageId}"> |
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21h-4.017c-.163 0-.326-.02-.485-.06L7 20m7-10V5a2 2 0 00-2-2h-.095c-.5 0-.905.405-.905.905 0 .714-.211 1.412-.608 2.006L7 11v9m7-10h-2M7 20H5a2 2 0 01-2-2v-6a2 2 0 012-2h2.5"></path> |
|
</svg> |
|
أعجبني |
|
</button> |
|
<button class="action-button dislike-button" data-message-id="${messageId}"> |
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14H5.236a2 2 0 01-1.789-2.894l3.5-7A2 2 0 018.736 3h4.018c.163 0 .326.02.485.06L17 4m-7 10v5a2 2 0 002 2h.095c.5 0 .905-.405.905-.905 0-.714.211-1.412.608-2.006L17 13V4m-7 10h2m5 0v2a2 2 0 01-2 2h-2.5"></path> |
|
</svg> |
|
لم يعجبني |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
`; |
|
} |
|
|
|
async function typeText(elementId, text) { |
|
const element = document.getElementById(elementId); |
|
element.innerHTML = ''; |
|
const words = text.split(' '); |
|
|
|
for (let i = 0; i < words.length; i++) { |
|
const span = document.createElement('span'); |
|
span.textContent = words[i] + ' '; |
|
span.className = 'typing-animation'; |
|
element.appendChild(span); |
|
await new Promise(resolve => setTimeout(resolve, 50)); |
|
} |
|
} |
|
|
|
function toggleSendButton(isGenerating) { |
|
const sendButton = document.getElementById('sendMessage'); |
|
if (isGenerating) { |
|
sendButton.classList.add('stop-generation'); |
|
sendButton.innerHTML = ` |
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path> |
|
</svg> |
|
`; |
|
} else { |
|
sendButton.classList.remove('stop-generation'); |
|
sendButton.innerHTML = ` |
|
<svg class="w-6 h-6 transform rotate-90" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"></path> |
|
</svg> |
|
`; |
|
} |
|
} |
|
|
|
async function sendMessage() { |
|
const message = messageInput.value.trim(); |
|
if (!message) return; |
|
|
|
if (currentController) { |
|
currentController.abort(); |
|
currentController = null; |
|
toggleSendButton(false); |
|
return; |
|
} |
|
|
|
messageInput.value = ''; |
|
adjustTextareaHeight(); |
|
|
|
const messageId = 'msg-' + Date.now(); |
|
let actualMessage = message; |
|
|
|
if (currentStyle === 'short') { |
|
actualMessage = 'اعطني رد باختصار وسرعة: ' + message; |
|
} else if (currentStyle === 'long') { |
|
actualMessage = 'اعطني رد مفصل وموسع: ' + message; |
|
} |
|
|
|
messagesContainer.insertAdjacentHTML('beforeend', createUserMessage(message)); |
|
messagesContainer.insertAdjacentHTML('beforeend', createBotMessage('', messageId)); |
|
scrollToBottom(); |
|
|
|
try { |
|
currentController = new AbortController(); |
|
toggleSendButton(true); |
|
|
|
const response = await fetch(API_URL, { |
|
method: 'POST', |
|
headers: { 'Content-Type': 'application/json' }, |
|
body: JSON.stringify({ |
|
message: actualMessage, |
|
history: chatHistory |
|
}), |
|
signal: currentController.signal |
|
}); |
|
|
|
const data = await response.json(); |
|
await typeText(messageId, data.response); |
|
|
|
chatHistory.push({ |
|
human: actualMessage, |
|
assistant: data.response |
|
}); |
|
} catch (error) { |
|
if (error.name === 'AbortError') { |
|
document.getElementById(messageId).textContent = 'تم إيقاف التوليد.'; |
|
} else { |
|
document.getElementById(messageId).textContent = 'عذراً، حدث خطأ في المعالجة.'; |
|
} |
|
} finally { |
|
currentController = null; |
|
toggleSendButton(false); |
|
} |
|
scrollToBottom(); |
|
} |
|
|
|
|
|
document.addEventListener('click', async (e) => { |
|
if (e.target.closest('.copy-button')) { |
|
const messageId = e.target.closest('.copy-button').dataset.messageId; |
|
const text = document.getElementById(messageId).textContent; |
|
await navigator.clipboard.writeText(text); |
|
e.target.closest('.copy-button').textContent = 'تم النسخ!'; |
|
setTimeout(() => { |
|
e.target.closest('.copy-button').innerHTML = ` |
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"></path> |
|
</svg> |
|
نسخ |
|
`; |
|
}, 2000); |
|
} |
|
|
|
if (e.target.closest('.regenerate-button')) { |
|
const messageId = e.target.closest('.regenerate-button').dataset.messageId; |
|
if (chatHistory.length > 0) { |
|
const lastMessage = chatHistory[chatHistory.length - 1].human; |
|
messageInput.value = lastMessage; |
|
sendMessage(); |
|
} |
|
} |
|
|
|
if (e.target.closest('.like-button')) { |
|
const button = e.target.closest('.like-button'); |
|
button.classList.toggle('text-green-500'); |
|
} |
|
|
|
if (e.target.closest('.dislike-button')) { |
|
const button = e.target.closest('.dislike-button'); |
|
button.classList.toggle('text-red-500'); |
|
} |
|
}); |
|
|
|
function scrollToBottom() { |
|
window.scrollTo({ |
|
top: document.documentElement.scrollHeight, |
|
behavior: 'smooth' |
|
}); |
|
} |
|
|
|
function adjustTextareaHeight() { |
|
messageInput.style.height = 'auto'; |
|
messageInput.style.height = messageInput.scrollHeight + 'px'; |
|
} |
|
|
|
sendButton.addEventListener('click', sendMessage); |
|
messageInput.addEventListener('keypress', (e) => { |
|
if (e.key === 'Enter' && !e.shiftKey) { |
|
e.preventDefault(); |
|
sendMessage(); |
|
} |
|
}); |
|
messageInput.addEventListener('input', adjustTextareaHeight); |
|
clearButton.addEventListener('click', () => { |
|
messagesContainer.innerHTML = ''; |
|
chatHistory = []; |
|
}); |
|
|
|
|
|
const initialMessageId = 'msg-initial'; |
|
messagesContainer.insertAdjacentHTML('beforeend', createBotMessage('', initialMessageId)); |
|
typeText(initialMessageId, 'مرحباً! كيف يمكنني مساعدتك اليوم؟'); |
|
</script> |
|
</body> |
|
</html> |
