Spaces:

joermd
/

interface

Running

App Files Files Community

joermd commited on Jan 30

Commit

cd2e838

verified ·

1 Parent(s): e74eda0

Update index.html

Browse files

Files changed (1) hide show

index.html +597 -19

index.html CHANGED Viewed

@@ -1,19 +1,597 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!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/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 .action-button {
+            color: #e5e5e5;
+            background-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.75rem;
+            color: #6B7280;
+            background-color: #F3F4F6;
+        }
+        .action-button:hover {
+            background-color: #E5E7EB;
+        }
+        .header-button {
+            color: #6B7280;
+            padding: 0.5rem;
+            border-radius: 9999px;
+            transition: all 0.2s;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .header-button:hover {
+            background-color: #F3F4F6;
+        }
+        .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;
+        }
+        .search-toggle.active {
+            background-color: #3b82f6;
+            color: white;
+        }
+        .thinking-steps {
+            background-color: #f8fafc;
+            border-radius: 0.5rem;
+            padding: 1rem;
+            margin: 0.5rem 0;
+            font-size: 0.9rem;
+            color: #64748b;
+        }
+        .chat-input {
+            max-height: 60px;
+            min-height: 32px;
+        }
+        @keyframes fadeIn {
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        .message p {
+            font-size: 0.875rem;
+            line-height: 1.5;
+        }
+        .bot-avatar {
+            width: 36px;
+            height: 36px;
+            border-radius: 50%;
+            object-fit: cover;
+        }
+        .message-input-container {
+            padding: 0.5rem !important;
+        }
+        .input-actions {
+            padding-top: 0.25rem !important;
+        }
+        /* Remove footer border */
+        footer {
+            border-top: none !important;
+        }
+        /* Reduce message container padding */
+        .bot-message {
+            padding: 0.75rem !important;
+        }
+        /* Adjust message actions spacing */
+        .message-actions {
+            margin-top: 0.25rem;
+            display: flex;
+            gap: 0.25rem;
+        }
+    </style>
+</head>
+<body class="text-lg light-mode">
+    <!-- Rest of the HTML remains exactly the same -->
+    <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>
+                <a href="/account" 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="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>
+                <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 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 shadow-sm">
+        <div class="max-w-3xl mx-auto px-4 py-3">
+            <div class="relative bg-white rounded-xl border border-gray-200 p-2 message-input-container">
+                <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 input-actions">
+                    <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 search-toggle">
+                            <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 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 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>
+    </footer>
+    <script>
+        const API_URL = 'https://0iz0iw69333rax-7777.proxy.runpod.net/proxy/6000/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');
+        let chatHistory = [];
+        let currentStyle = 'normal';
+        let currentController = null;
+        let isSearchEnabled = false;
+        // Search button toggle
+        searchButton.addEventListener('click', () => {
+            isSearchEnabled = !isSearchEnabled;
+            searchButton.classList.toggle('active');
+            messageInput.placeholder = isSearchEnabled ? "ابحث عن..." : "اكتب رسالتك هنا...";
+        });
+        // Dark mode toggle
+        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;
+        });
+        function createThinkingSteps(messageId) {
+            return `
+                <div id="${messageId}-thinking" class="thinking-steps">
+                    <div>1. تحليل السؤال وفهم المطلوب...</div>
+                    <div>2. جمع المعلومات ذات الصلة...</div>
+                    <div>3. صياغة إجابة شاملة ودقيقة...</div>
+                </div>
+            `;
+        }
+        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-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="bot-avatar">
+                    </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 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-3 h-3" 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-3 h-3" 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-3 h-3" 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) {
+            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 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"></path>
+                        </svg>
+                        نسخ
+                    `;
+                }, 2000);
+            }
+            if (e.target.closest('.regenerate-button')) {
+                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');
+            }
+        });
+        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>