Spaces:

joermd
/

interface

Running

File size: 28,210 Bytes

<!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>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/themes/prism.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/components/prism-python.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/components/prism-javascript.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;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }
        
        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;
        }

        .dark-mode .modal-content {
            background-color: #2d2d2d;
            color: #e5e5e5;
        }

        .dark-mode .modal-content textarea {
            background-color: #363636;
            color: #e5e5e5;
            border-color: #404040;
        }

        .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;
        }

        .toggle-switch {
            width: 32px;
            height: 16px;
            background-color: #e5e7eb;
            border-radius: 999px;
            position: relative;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        
        .toggle-switch::after {
            content: '';
            position: absolute;
            top: 2px;
            right: 2px;
            width: 12px;
            height: 12px;
            background-color: white;
            border-radius: 50%;
            transition: transform 0.3s;
        }
        
        .toggle-switch.active {
            background-color: #3b82f6;
        }
        
        .toggle-switch.active::after {
            transform: translateX(-16px);
        }

        .action-button {
            padding: 0.25rem 0.5rem;
            border-radius: 0.375rem;
            transition: all 0.2s;
            display: inline-flex;
            align-items: center;
            gap: 0.25rem;
            font-size: 0.7rem;
            color: #6B7280;
            background-color: #F3F4F6;
        }

        .action-button:hover {
            background-color: #E5E7EB;
        }

        .thinking-steps {
            margin: 10px 0;
            padding: 10px;
            background-color: #f8f9fa;
            border-radius: 8px;
            font-size: 0.9em;
            position: relative;
            overflow: hidden;
        }

        .thinking-steps::after {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
            animation: shine 1.5s infinite;
        }

        @keyframes shine {
            to {
                left: 100%;
            }
        }

        .thinking-steps div {
            margin: 5px 0;
            color: #666;
        }

        .loading-indicator {
            display: inline-block;
            position: relative;
            width: 80px;
            height: 13px;
        }

        .loading-indicator div {
            position: absolute;
            top: 0;
            width: 13px;
            height: 13px;
            border-radius: 50%;
            background: #3b82f6;
            animation-timing-function: cubic-bezier(0, 1, 1, 0);
        }

        .loading-indicator div:nth-child(1) {
            left: 8px;
            animation: loading1 0.6s infinite;
        }

        .loading-indicator div:nth-child(2) {
            left: 8px;
            animation: loading2 0.6s infinite;
        }

        .loading-indicator div:nth-child(3) {
            left: 32px;
            animation: loading2 0.6s infinite;
        }

        .loading-indicator div:nth-child(4) {
            left: 56px;
            animation: loading3 0.6s infinite;
        }

        @keyframes loading1 {
            0% {
                transform: scale(0);
            }
            100% {
                transform: scale(1);
            }
        }

        @keyframes loading3 {
            0% {
                transform: scale(1);
            }
            100% {
                transform: scale(0);
            }
        }

        @keyframes loading2 {
            0% {
                transform: translate(0, 0);
            }
            100% {
                transform: translate(24px, 0);
            }
        }

        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }

        .modal-content {
            background-color: white;
            padding: 2rem;
            border-radius: 0.5rem;
            max-width: 600px;
            width: 90%;
            max-height: 80vh;
            overflow-y: auto;
        }

        pre[class*="language-"] {
            direction: ltr;
            text-align: left;
            margin: 1em 0;
            border-radius: 0.5rem;
            padding: 1em;
        }

        .chat-input {
            max-height: 60px;
            min-height: 32px;
        }

        @keyframes fadeIn {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .message-actions {
            margin-top: 0.5rem;
            display: flex;
            gap: 0.5rem;
        }

        main {
            flex: 1;
            padding-bottom: 180px; /* Increased padding to accommodate the input area */
        }

        .input-container {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: white;
            padding: 1rem;
            border-top: 1px solid #e5e7eb;
            z-index: 50;
        }

        @media (max-width: 640px) {
            .welcome-text {
                font-size: 1.5rem;
            }

            .input-container {
                padding: 0.5rem;
            }

            .style-select, .toggle-switch-container {
                font-size: 0.8rem;
            }
        }
    </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>
            <div class="flex items-center gap-2">
                <a href="/home" class="header-button">
                    <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="/chats" class="header-button">
                    <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="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path>
                    </svg>
                </a>
                <button id="darkModeToggle" class="header-button">
                    <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="header-button">
                    <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>
        </div>
    </header>

    <main class="pt-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>

    <div class="input-container">
        <div class="max-w-3xl mx-auto">
            <div class="relative bg-white rounded-xl border border-gray-200 p-2">
                <textarea 
                    id="messageInput"
                    class="chat-input w-full text-gray-600 text-lg p-2 rounded-lg resize-none border-none"
                    placeholder="اكتب رسالتك هنا..."
                    rows="1"
                ></textarea>
                
                <div class="flex items-center justify-between mt-2">
                    <div class="flex gap-3">
                        <button class="text-gray-400 hover:text-gray-600" id="attachButton">
                            <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                <path d="M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48"/>
                            </svg>
                        </button>
                        <a href="https://joermd-test11.static.hf.space" target="_blank" id="micButton" class="text-gray-400 hover:text-gray-600">
                            <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                <path 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"/>
                            </svg>
                        </a>
                        <button id="searchButton" class="text-gray-400 hover:text-gray-600">
                            <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                            </svg>
                        </button>
                    </div>

                    <div class="flex items-center gap-3">
                        <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">
                            <option value="short">⚡ ردود قصيرة</option>
                            <option value="normal" selected>◯ عادي</option>
                            <option value="long">↔ ردود مفصلة</option>
                        </select>

                        <div class="flex items-center gap-2 bg-gray-50 px-2 py-1 rounded-lg">
                            <span class="text-gray-600">ذكاء متقدم</span>
                            <div class="toggle-switch" id="aiToggle"></div>
                        </div>

                        <button id="sendMessage" class="bg-black text-white px-3 py-1.5 rounded-lg flex items-center gap-2">
                            إرسال
                            <svg class="w-4 h-4 rotate-90" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                <path d="M12 19V5M5 12l7-7 7 7"/>
                            </svg>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="editModal" class="modal">
        <div class="modal-content">
            <h2 class="text-xl font-bold mb-4">تعديل النص</h2>
            <textarea id="editText" class="w-full h-40 p-2 border rounded-lg mb-4"></textarea>
            <div class="flex justify-end gap-2">
                <button id="cancelEdit" class="px-4 py-2 bg-gray-200 rounded-lg">إلغاء</button>
                <button id="saveEdit" class="px-4 py-2 bg-black text-white rounded-lg">حفظ</button>
            </div>
        </div>
    </div>

    <script>
        const API_URL = 'https://g2mgow5tgbxsjy-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 aiToggle = document.getElementById('aiToggle');
        const searchButton = document.getElementById('searchButton');
        const editModal = document.getElementById('editModal');
        const editText = document.getElementById('editText');
        const saveEdit = document.getElementById('saveEdit');
        const cancelEdit = document.getElementById('cancelEdit');
        
        let chatHistory = [];
        let currentStyle = 'normal';
        let currentController = null;
        let isSearchEnabled = false;
        let currentEditMessageId = null;

        function formatCode(text) {
            const codeBlockRegex = /```(\w+)?\n([\s\S]*?)```/g;
            return text.replace(codeBlockRegex, (match, lang, code) => {
                const language = lang || 'plaintext';
                return `<pre><code class="language-${language}">${code.trim()}</code></pre>`;
            });
        }

        function createThinkingSteps(messageId) {
            return `
                <div id="${messageId}-thinking" class="thinking-steps">
                    <div>جاري التفكير وتحليل السؤال...</div>
                    <div>معالجة المعلومات وتجهيز الإجابة...</div>
                    <div class="loading-indicator">
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                    </div>
                </div>
            `;
        }

        function createUserMessage(text) {
            return `
                <div class="message flex justify-end mb-4">
                    <div class="max-w-[80%]">
                        <div class="bg-black text-white rounded-lg p-3 shadow-sm">
                            <p class="text-sm">${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="w-8 h-8 rounded-full">
                    </div>
                    <div class="max-w-[80%] mr-3">
                        <div class="bot-message bg-white rounded-lg p-3 shadow-sm">
                            <p id="${messageId}" class="text-sm"></p>
                            <div class="message-actions">
                                <button class="action-button copy-button" data-message-id="${messageId}">
                                    <svg class="w-3 h-3" 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>
                                <button class="action-button speak-button" data-message-id="${messageId}">
                                    <svg class="w-3 h-3" 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>
                                    قراءة
                                </button>
                                <button class="action-button edit-button" data-message-id="${messageId}">
                                    <svg class="w-3 h-3" 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>
            `;
        }

        async function typeText(elementId, text) {
            const element = document.getElementById(elementId);
            element.innerHTML = formatCode(text);
            Prism.highlightAllUnder(element);
        }

        function speakText(text) {
            const utterance = new SpeechSynthesisUtterance(text);
            utterance.lang = 'ar';
            speechSynthesis.speak(utterance);
        }

        function openEditModal(messageId) {
            const messageElement = document.getElementById(messageId);
            editText.value = messageElement.textContent;
            editModal.style.display = 'flex';
            currentEditMessageId = messageId;
        }

        function closeEditModal() {
            editModal.style.display = 'none';
            currentEditMessageId = null;
        }

        function toggleSendButton(isGenerating) {
            if (isGenerating) {
                sendButton.classList.add('stop-generation');
                sendButton.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="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                    إيقاف
                `;
            } else {
                sendButton.classList.remove('stop-generation');
                sendButton.innerHTML = `
                    إرسال
                    <svg class="w-4 h-4 rotate-90" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                        <path d="M12 19V5M5 12l7-7 7 7"/>
                    </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));
            
            if (aiToggle.classList.contains('active')) {
                document.getElementById(messageId).insertAdjacentHTML('beforebegin', createThinkingSteps(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,
                        advanced: aiToggle.classList.contains('active'),
                        search: isSearchEnabled
                    }),
                    signal: currentController.signal
                });

                const data = await response.json();
                
                const thinkingSteps = document.getElementById(`${messageId}-thinking`);
                if (thinkingSteps) {
                    thinkingSteps.remove();
                }
                
                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 adjustTextareaHeight() {
            messageInput.style.height = 'auto';
            messageInput.style.height = Math.min(messageInput.scrollHeight, 60) + 'px';
        }

        function scrollToBottom() {
            window.scrollTo({
                top: document.documentElement.scrollHeight,
                behavior: 'smooth'
            });
        }

        // Event Listeners
        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);
                const button = e.target.closest('.copy-button');
                button.innerHTML = `
                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                    </svg>
                    تم النسخ!
                `;
                setTimeout(() => {
                    button.innerHTML = `
                        <svg class="w-3 h-3" 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('.speak-button')) {
                const messageId = e.target.closest('.speak-button').dataset.messageId;
                const text = document.getElementById(messageId).textContent;
                speakText(text);
            }
            
            if (e.target.closest('.edit-button')) {
                const messageId = e.target.closest('.edit-button').dataset.messageId;
                openEditModal(messageId);
            }
        });

        // Event listeners for buttons and inputs
        sendButton.addEventListener('click', sendMessage);
        messageInput.addEventListener('keypress', (e) => {
            if (e.key === 'Enter' && !e.shiftKey) {
                e.preventDefault();
                sendMessage();
            }
        });
        messageInput.addEventListener('input', adjustTextareaHeight);
        
        saveEdit.addEventListener('click', () => {
            if (currentEditMessageId) {
                const messageElement = document.getElementById(currentEditMessageId);
                messageElement.innerHTML = formatCode(editText.value);
                Prism.highlightAllUnder(messageElement);
            }
            closeEditModal();
        });

        cancelEdit.addEventListener('click', closeEditModal);

        searchButton.addEventListener('click', () => {
            isSearchEnabled = !isSearchEnabled;
            searchButton.classList.toggle('active');
            messageInput.placeholder = isSearchEnabled ? "ابحث عن..." : "اكتب رسالتك هنا...";
        });

        darkModeToggle.addEventListener('click', () => {
            document.body.classList.toggle('dark-mode');
            document.body.classList.toggle('light-mode');
        });

        aiToggle.addEventListener('click', function() {
            this.classList.toggle('active');
        });

        styleSelect.addEventListener('change', (e) => {
            currentStyle = e.target.value;
        });

        clearButton.addEventListener('click', () => {
            messagesContainer.innerHTML = '';
            chatHistory = [];
        });

        // Initial welcome message
        const initialMessageId = 'msg-initial';
        messagesContainer.insertAdjacentHTML('beforeend', createBotMessage('', initialMessageId));
        typeText(initialMessageId, 'مرحباً! كيف يمكنني مساعدتك اليوم؟');

        // Initialize Prism.js
        document.addEventListener('DOMContentLoaded', () => {
            Prism.highlightAll();
        });
    </script>
</body>
</html>