Spaces:

joermd
/

test22

Running

App Files Files Community

joermd commited on Dec 28, 2024

Commit

6167e18

verified ·

1 Parent(s): 76b4315

Update index.html

Browse files

Files changed (1) hide show

index.html +101 -127

index.html CHANGED Viewed

@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Speedy Chat</title>
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/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');
@@ -51,95 +52,51 @@
         .dark-mode .bot-message {
             background-color: #363636;
         }
-        .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;
         }
-        .typing-animation {
-            display: inline-block;
-            opacity: 0;
-            transform: translateY(10px);
-            animation: typeIn 0.1s ease forwards;
         }
-        .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;
         }
-        /* Mobile Styles */
-        @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);
-            }
-        }
     </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">
@@ -163,41 +120,17 @@
                             <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://xdran65ok359ef-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';
-        // Dark mode toggle
-        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 = '';
@@ -208,51 +141,66 @@
             }
             return `
-                <div class="message flex justify-end">
-                    <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">
-                    <div class="flex-shrink-0 w-10 h-10 rounded-full bg-indigo-500 flex items-center justify-center text-white mt-1 shadow-sm">
-                        <span class="text-lg font-medium">S</span>
-                    </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>
                     </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));
-            }
-        }
         async function sendMessage() {
             const message = messageInput.value.trim();
-            if (!message) return;
             messageInput.value = '';
             adjustTextareaHeight();
             const messageId = 'msg-' + Date.now();
             let actualMessage = message;
@@ -286,10 +234,36 @@
                 });
             } catch (error) {
                 document.getElementById(messageId).textContent = 'عذراً، حدث خطأ في المعالجة.';
             }
             scrollToBottom();
         }
         function scrollToBottom() {
             window.scrollTo({
                 top: document.documentElement.scrollHeight,

     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Speedy Chat</title>
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.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');
         .dark-mode .bot-message {
             background-color: #363636;
         }
+        .message-actions {
+            display: flex;
+            gap: 0.5rem;
+            margin-top: 0.5rem;
         }
+        .message-action-button {
+            padding: 0.25rem 0.75rem;
+            border-radius: 0.375rem;
+            font-size: 0.875rem;
+            display: flex;
+            align-items: center;
+            gap: 0.25rem;
+            transition: all 0.2s;
+            color: #6B7280;
         }
+        .message-action-button:hover {
+            background-color: #F3F4F6;
         }
+        .dark-mode .message-action-button:hover {
+            background-color: #404040;
         }
+        .stop-generating {
+            display: none;
+            background-color: #EF4444;
+            color: white;
+            padding: 0.5rem 1rem;
+            border-radius: 0.375rem;
+            font-weight: 500;
+            transition: all 0.2s;
         }
+        .stop-generating:hover {
+            background-color: #DC2626;
         }
+        /* ... (باقي الأنماط كما هي) ... */
     </style>
 </head>
 <body class="text-lg light-mode">
+    <!-- ... (الهيدر كما هو) ... -->
     <main class="pt-24 pb-24">
         <div class="max-w-3xl mx-auto px-4">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"></path>
                         </svg>
                     </button>
+                    <button id="stopGenerating" class="stop-generating">
+                        إيقاف التوليد
+                    </button>
+                    <!-- ... (باقي الأزرار كما هي) ... -->
                 </div>
             </div>
         </div>
     </footer>
     <script>
+        // ... (التعريفات الأساسية كما هي) ...
         function createUserMessage(text) {
             let prefix = '';
             }
             return `
+                <div class="message flex flex-col">
+                    <div class="flex justify-end">
+                        <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>
+                    <div class="message-actions justify-end">
+                        <button class="message-action-button">
+                            <i class="far fa-thumbs-up"></i>
+                            أعجبني
+                        </button>
+                        <button class="message-action-button">
+                            <i class="far fa-thumbs-down"></i>
+                            لم يعجبني
+                        </button>
+                    </div>
                 </div>
             `;
         }
         function createBotMessage(text, messageId) {
             return `
+                <div class="message flex flex-col">
+                    <div class="flex justify-start">
+                        <div class="flex-shrink-0 w-10 h-10 rounded-full overflow-hidden shadow-sm mt-1">
+                            <img src="https://ufastpro.com/wp-content/uploads/2024/12/3.png" alt="Bot Avatar" class="w-full h-full object-cover">
+                        </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>
                         </div>
                     </div>
+                    <div class="message-actions mr-13">
+                        <button class="message-action-button copy-message">
+                            <i class="far fa-copy"></i>
+                            نسخ
+                        </button>
+                        <button class="message-action-button regenerate">
+                            <i class="fas fa-redo"></i>
+                            إعادة التوليد
+                        </button>
+                    </div>
                 </div>
             `;
         }
+        let isGenerating = false;
+        const stopGenerating = document.getElementById('stopGenerating');
         async function sendMessage() {
             const message = messageInput.value.trim();
+            if (!message || isGenerating) return;
             messageInput.value = '';
             adjustTextareaHeight();
+            isGenerating = true;
+            stopGenerating.style.display = 'block';
             const messageId = 'msg-' + Date.now();
             let actualMessage = message;
                 });
             } catch (error) {
                 document.getElementById(messageId).textContent = 'عذراً، حدث خطأ في المعالجة.';
+            } finally {
+                isGenerating = false;
+                stopGenerating.style.display = 'none';
             }
             scrollToBottom();
         }
+        // إضافة مستمعي الأحداث للأزرار الجديدة
+        document.addEventListener('click', function(e) {
+            if (e.target.closest('.copy-message')) {
+                const messageText = e.target.closest('.message').querySelector('.bot-message p').textContent;
+                navigator.clipboard.writeText(messageText);
+                // يمكن إضافة إشعار هنا للتأكيد على النسخ
+            }
+            if (e.target.closest('.regenerate')) {
+                const message = chatHistory[chatHistory.length - 1].human;
+                messageInput.value = message;
+                sendMessage();
+            }
+        });
+        stopGenerating.addEventListener('click', () => {
+            isGenerating = false;
+            stopGenerating.style.display = 'none';
+            // هنا يمكن إضافة منطق لإيقاف التوليد الفعلي
+        });
+        // ... (باقي الكود كما هو) ...
         function scrollToBottom() {
             window.scrollTo({
                 top: document.documentElement.scrollHeight,