Hugging Face's logo

Spaces:
joermd
/
index
Running

App Files Community
index / sss.html
joermd's picture
joermd
Update sss.html
d68db78 verified
raw
history blame contribute delete
26.2 kB
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Speedy Chat</title>
 <!-- Tailwind CSS -->
 <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
 <!-- Prism.js for code highlighting -->
 <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/themes/prism-tomorrow.min.css" rel="stylesheet">
 <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/plugins/line-numbers/prism-line-numbers.min.css" rel="stylesheet">
 <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/prism.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/plugins/line-numbers/prism-line-numbers.min.js"></script>
 <!-- TinyMCE for rich text editing -->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/5.10.7/tinymce.min.js"></script>
 <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;
 }
/* Light/Dark Mode Styles */
 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 .action-button {
 color: #e5e5e5;
 background-color: #404040;
 }
 /* Typing Indicator Styles */
 .typing-indicator {
 display: flex;
 align-items: center;
 padding: 0.5rem 1rem;
 }
 .typing-indicator span {
 height: 8px;
 width: 8px;
 margin: 0 1px;
 background-color: #6366f1;
 display: inline-block;
 border-radius: 50%;
 opacity: 0.4;
 animation: typing 1s infinite ease-in-out;
 }
 .typing-indicator span:nth-child(1) {
 animation-delay: 200ms;
 }
 .typing-indicator span:nth-child(2) {
 animation-delay: 300ms;
 }
 .typing-indicator span:nth-child(3) {
 animation-delay: 400ms;
 }
 @keyframes typing {
 0% { transform: translateY(0px); opacity: 0.4; }
 50% { transform: translateY(-5px); opacity: 0.8; }
 100% { transform: translateY(0px); opacity: 0.4; }
 }
 /* Code Block Styles */
 pre[class*="language-"] {
 direction: ltr;
 text-align: left;
 border-radius: 0.5rem;
 margin: 1rem 0;
 padding: 1rem;
 font-size: 0.9rem;
 line-height: 1.5;
 }
 .code-block-wrapper {
 position: relative;
 margin: 1rem 0;
 border-radius: 0.5rem;
 overflow: hidden;
 }
 .code-block-header {
 display: flex;
 justify-content: space-between;
 align-items: center;
 background: #2d2d2d;
 color: white;
 padding: 0.5rem 1rem;
 }
 /* Long Text Styles */
 .long-text-wrapper {
 max-height: 300px;
 overflow-y: auto;
 padding: 1rem;
 background: #f8f9fa;
 border-radius: 0.5rem;
 margin: 1rem 0;
 }
 /* Rich Text Editor Styles */
 .editor-wrapper {
 display: none;
 background: white;
 border-radius: 0.5rem;
 margin: 1rem 0;
 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 .editor-toolbar {
 display: flex;
 gap: 0.5rem;
 padding: 0.5rem;
 border-bottom: 1px solid #e5e7eb;
 }
 /* Message Input Styles */
 .message-input {
 resize: none;
 min-height: 50px;
 max-height: 200px;
 }
 .message-input:focus {
 outline: none;
 box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
 }
 /* Welcome Text Style */
 .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 Animation */
 .message {
 opacity: 0;
 transform: translateY(20px);
 animation: fadeIn 0.3s ease forwards;
 }
 @keyframes fadeIn {
 to {
 opacity: 1;
 transform: translateY(0);
 }
 }
 /* Utility Classes */
 .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;
 }
 </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>
 <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>
 <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://nvgsxt9jqx730v-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');
 let chatHistory = [];
 let currentStyle = 'normal';
 let currentController = null;
 function createTypingIndicator() {
 return `
 <div class="typing-indicator">
 <span></span>
 <span></span>
 <span></span>
 </div>
 `;
 }
 function createUserMessage(text) {
 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 edit-text-btn">
 <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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
 </svg>
 ุชุญุฑูŠุฑ ูƒู…ุณุชู†ุฏ
 </button>
 </div>
 </div>
 </div>
 </div>
 `;
 }
 function formatCodeBlock(code, language) {
 return `
 <div class="code-block-wrapper">
 <div class="code-block-header">
 <span>${language}</span>
 <button class="copy-code-btn">
 <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 2"></path>
 </svg>
 </button>
 </div>
 <pre class="line-numbers"><code class="language-${language}">${code}</code></pre>
 </div>`;
 }
 async function typeText(elementId, text) {
 const element = document.getElementById(elementId);
 const typingIndicator = element.querySelector('.typing-indicator');
 if (typingIndicator) {
 typingIndicator.remove();
 }
 element.innerHTML = '';
 const codeBlockRegex = /```(\w+)\n([\s\S]+?)```/g;
 let lastIndex = 0;
 let match;
 while ((match = codeBlockRegex.exec(text)) !== null) {
 const beforeText = text.slice(lastIndex, match.index);
 if (beforeText) {
 await addTextWithEditor(element, beforeText);
 }
 const [, language, code] = match;
 element.innerHTML += formatCodeBlock(code.trim(), language);
 lastIndex = match.index + match[0].length;
 }
 const remainingText = text.slice(lastIndex);
 if (remainingText) {
 await addTextWithEditor(element, remainingText);
 }
 Prism.highlightAllUnder(element);
 }
 async function addTextWithEditor(element, text) {
 const textWrapper = document.createElement('div');
 textWrapper.className = 'long-text-wrapper';
 textWrapper.innerHTML = text;
const editorWrapper = document.createElement('div');
 editorWrapper.className = 'editor-wrapper';
 editorWrapper.innerHTML = `
 <div class="editor-toolbar">
 <button class="save-btn action-button">ุญูุธ</button>
 <button class="cancel-btn action-button">ุฅู„ุบุงุก</button>
 </div>
 <textarea class="tinymce-editor"></textarea>
 `;
element.appendChild(textWrapper);
 element.appendChild(editorWrapper);
 tinymce.init({
 selector: '.tinymce-editor:last',
 directionality: 'rtl',
 height: 400,
 menubar: false,
 plugins: 'lists link table',
 toolbar: 'undo redo | formatselect | bold italic | alignleft aligncenter alignright | bullist numlist | link table',
 content_style: 'body { font-family: "IBM Plex Sans Arabic", sans-serif; }',
 setup: function(editor) {
 editor.on('init', function() {
 editor.setContent(text);
 });
 }
 });
 }
 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));
// Add typing indicator
 const messageElement = document.getElementById(messageId);
 messageElement.innerHTML = createTypingIndicator();
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();
 }
 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>
 `;
 }
 }
 function adjustTextareaHeight() {
 messageInput.style.height = 'auto';
 messageInput.style.height = messageInput.scrollHeight + 'px';
 }
 function scrollToBottom() {
 window.scrollTo({
 top: document.documentElement.scrollHeight,
 behavior: 'smooth'
 });
 }
 // Event Listeners
 document.addEventListener('click', async (e) => {
 if (e.target.closest('.copy-code-btn')) {
 const codeBlock = e.target.closest('.code-block-wrapper').querySelector('code');
 await navigator.clipboard.writeText(codeBlock.textContent);
 const btn = e.target.closest('.copy-code-btn');
 btn.innerHTML = 'ุชู… ุงู„ู†ุณุฎ!';
 setTimeout(() => {
 btn.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 2"></path>
 </svg>`;
 }, 2000);
 }
 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);
 const btn = e.target.closest('.copy-button');
 btn.textContent = 'ุชู… ุงู„ู†ุณุฎ!';
 setTimeout(() => {
 btn.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 2"></path>
 </svg>
 ู†ุณุฎ
 `;
 }, 2000);
 }
 if (e.target.closest('.edit-text-btn')) {
 const messageWrapper = e.target.closest('.bot-message');
 const textWrapper = messageWrapper.querySelector('.long-text-wrapper');
 const editorWrapper = messageWrapper.querySelector('.editor-wrapper');
if (textWrapper && editorWrapper) {
 textWrapper.style.display = 'none';
 editorWrapper.style.display = 'block';
 }
 }
 if (e.target.closest('.save-btn')) {
 const messageWrapper = e.target.closest('.bot-message');
 const textWrapper = messageWrapper.querySelector('.long-text-wrapper');
 const editorWrapper = messageWrapper.querySelector('.editor-wrapper');
 const editor = tinymce.get(editorWrapper.querySelector('.tinymce-editor').id);
if (textWrapper && editor) {
 textWrapper.innerHTML = editor.getContent();
 textWrapper.style.display = 'block';
 editorWrapper.style.display = 'none';
 }
 }
 if (e.target.closest('.cancel-btn')) {
 const messageWrapper = e.target.closest('.bot-message');
 const textWrapper = messageWrapper.querySelector('.long-text-wrapper');
 const editorWrapper = messageWrapper.querySelector('.editor-wrapper');
if (textWrapper && editorWrapper) {
 textWrapper.style.display = 'block';
 editorWrapper.style.display = 'none';
 }
 }
 if (e.target.closest('.regenerate-button')) {
 if (chatHistory.length > 0) {
 const lastMessage = chatHistory[chatHistory.length - 1].human;
 messageInput.value = lastMessage;
 sendMessage();
 }
 }
 });
 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 = [];
 });
 // Initial welcome message
 const initialMessageId = 'msg-initial';
 messagesContainer.insertAdjacentHTML('beforeend', createBotMessage('', initialMessageId));
 typeText(initialMessageId, 'ู…ุฑุญุจุงู‹! ูƒูŠู ูŠู…ูƒู†ู†ูŠ ู…ุณุงุนุฏุชูƒ ุงู„ูŠูˆู…ุŸ');
 </script>
</body>
</html>