Spaces:

al00sakkaf
/

geminipersona-chat-master

Running

App Files Files Community

al00sakkaf commited on Oct 3

Commit

c3f9420

verified ·

1 Parent(s): 069779f

قم بتطوير التطبيق واضف التحسينات واجعل اسم التطبيق "المساعد الذكي" واضف اسفل الشاشة النص التالي "تصميم المهندس احمد السقاف"

Browse files

Files changed (1) hide show

index.html +246 -51

index.html CHANGED Viewed

@@ -4,8 +4,8 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>GeminiPersona - الدردشة الذكية</title>
-    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
     <script src="https://unpkg.com/feather-icons"></script>
@@ -57,7 +57,14 @@
             transform: translateY(-2px);
             box-shadow: 0 10px 25px rgba(99, 102, 241, 0.15);
         }
-        .markdown-content h1, .markdown-content h2, .markdown-content h3 {
             margin-top: 1rem;
             margin-bottom: 0.5rem;
             font-weight: bold;
@@ -79,23 +86,38 @@
             overflow-x: auto;
             margin: 1rem 0;
         }
-        .page-container {
             display: none;
         }
         .active-page {
             display: block;
         }
-    </style>
 </head>
-<body class="bg-gray-50 min-h-screen">
-    <!-- Navigation -->
     <nav class="bg-white shadow-lg border-b">
-        <div class="max-w-7xl mx-auto px-4">
-            <div class="flex justify-between items-center h-16">
-                <div class="flex items-center space-x-4 space-x-reverse">
                     <i data-feather="message-circle" class="text-primary w-8 h-8"></i>
-                    <h1 class="text-xl font-bold text-gray-800">GeminiPersona</h1>
-                </div>
                 <div class="flex items-center space-x-4 space-x-reverse">
                     <button onclick="showPage('settings')" class="text-gray-600 hover:text-primary transition-colors">
                         <i data-feather="settings"></i>
@@ -121,9 +143,9 @@
     <div class="max-w-4xl mx-auto py-8 px-4">
         <!-- Welcome Section -->
         <div class="text-center mb-12">
-            <h2 class="text-3xl font-bold text-gray-800 mb-4">مرحباً بك في GeminiPersona</h2>
-            <p class="text-gray-600 text-lg">تطبيق الدردشة الذكي الذي يتقمص الشخصيات باستخدام نماذج Gemini المتقدمة</p>
-        </div>
         <!-- Quick Actions -->
         <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-12">
             <button onclick="showPage('chat')" class="bg-white p-6 rounded-xl shadow-md border border-gray-200 hover:shadow-lg transition-shadow group">
@@ -165,9 +187,9 @@
                 <div class="flex items-start space-x-4 space-x-reverse">
                     <i data-feather="zap" class="w-6 h-6 text-green-500 mt-1"></i>
                     <div>
-                        <h4 class="font-semibold text-gray-800 mb-2">نماذج Gemini المتقدمة</h4>
-                        <p class="text-gray-600">استخدم أحدث نماذج الذكاء الاصطناعي من Google</p>
-                    </div>
                 </div>
                 <div class="flex items-start space-x-4 space-x-reverse">
                     <i data-feather="user" class="w-6 h-6 text-blue-500 mt-1"></i>
@@ -611,16 +633,19 @@
                 }
             };
         }
         // Page navigation
         function showPage(pageName) {
-            // Hide all pages
             document.querySelectorAll('.page-container').forEach(page => {
                 page.classList.remove('active-page');
             });
-            // Show the selected page
-            document.getElementById(pageName).classList.add('active-page');
             // Update page-specific content
             if (pageName === 'characters') {
@@ -640,16 +665,31 @@
             feather.replace();
         }
-        // Initialize app
         document.addEventListener('DOMContentLoaded', function() {
             initDB();
             feather.replace();
             loadStatistics();
             showPage('home');
         });
-        // Load statistics
         function loadStatistics() {
             const dbRequest = indexedDB.open("GeminiPersonaDB", 1);
@@ -900,14 +940,13 @@
             const url = URL.createObjectURL(dataBlob);
             const link = document.createElement('a');
             link.href = url;
-            link.download = `gemini-persona-characters-${new Date().toISOString().split('T')[0]}.json`;
             document.body.appendChild(link);
             link.click();
             document.body.removeChild(link);
             URL.revokeObjectURL(url);
         }
-        // Handle form submission
         document.getElementById('characterForm').addEventListener('submit', function(e) {
             e.preventDefault();
@@ -981,7 +1020,6 @@
             document.getElementById('messageInput').disabled = false;
             document.getElementById('sendButton').disabled = false;
         }
         async function sendMessage() {
             const messageInput = document.getElementById('messageInput');
             const message = messageInput.value.trim();
@@ -998,6 +1036,13 @@
             addMessageToChat('user', message);
             messageInput.value = '';
             // Get character info
             const request = indexedDB.open("GeminiPersonaDB", 1);
             request.onsuccess = function(event) {
@@ -1008,15 +1053,46 @@
                 getRequest.onsuccess = function() {
                     const character = getRequest.result;
-                    // Simulate AI response (replace with actual API call)
                     setTimeout(() => {
-                        addMessageToChat('ai', `هذه استجابة محاكاة من ${character.name}: ${message}`, character);
-                    }, 1000);
                 };
             };
         }
-        function addMessageToChat(sender, content, character = null) {
             const messagesContainer = document.getElementById('messagesContainer');
             const messageDiv = document.createElement('div');
             messageDiv.className = `flex ${sender === 'user' ? 'justify-end' : 'justify-start'}`;
@@ -1041,13 +1117,47 @@
             messagesContainer.appendChild(messageDiv);
             messagesContainer.scrollTop = messagesContainer.scrollHeight;
         }
         function saveConversation() {
-            // Implementation for saving conversation
-            alert('تم حفظ المحادثة');
-        }
-        function clearChat() {
             document.getElementById('messagesContainer').innerHTML = `
                 <div class="text-center text-gray-500 py-8">
                     <i data-feather="message-circle" class="w-12 h-12 mx-auto mb-4"></i>
@@ -1056,13 +1166,38 @@
             `;
             feather.replace();
         }
         function exportChat() {
-            // Implementation for exporting chat
-            alert('تم تصدير المحادثة');
-        }
-        // Voice chat functionality
         function loadVoiceCharacterSelect() {
             const select = document.getElementById('voiceCharacterSelect');
             const request = indexedDB.open("GeminiPersonaDB", 1);
@@ -1230,7 +1365,6 @@
                 };
             };
         }
         function exportAllConversations() {
             const request = indexedDB.open("GeminiPersonaDB", 1);
@@ -1247,7 +1381,7 @@
                     const url = URL.createObjectURL(dataBlob);
                     const link = document.createElement('a');
                     link.href = url;
-                    link.download = `gemini-persona-conversations-${new Date().toISOString().split('T')[0]}.json`;
                     document.body.appendChild(link);
                     link.click();
                     document.body.removeChild(link);
@@ -1255,8 +1389,7 @@
                 };
             };
         }
-        // Settings functionality
         function loadSettings() {
             const request = indexedDB.open("GeminiPersonaDB", 1);
@@ -1337,7 +1470,6 @@
                 };
             };
         }
         function exportAllData() {
             const request = indexedDB.open("GeminiPersonaDB", 1);
@@ -1366,7 +1498,7 @@
                     const url = URL.createObjectURL(dataBlob);
                     const link = document.createElement('a');
                     link.href = url;
-                    link.download = `gemini-persona-backup-${new Date().toISOString().split('T')[0]}.json`;
                     document.body.appendChild(link);
                     link.click();
                     document.body.removeChild(link);
@@ -1375,7 +1507,63 @@
             };
         }
-        // Add event listeners for search and sort in characters page
         document.addEventListener('DOMContentLoaded', function() {
             document.getElementById('searchInput')?.addEventListener('input', function() {
                 currentPage = 1;
@@ -1395,5 +1583,12 @@
             });
         });
     </script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>المساعد الذكي - الدردشة الذكية</title>
+<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
     <script src="https://unpkg.com/feather-icons"></script>
             transform: translateY(-2px);
             box-shadow: 0 10px 25px rgba(99, 102, 241, 0.15);
         }
+        .fade-in {
+            animation: fadeIn 0.3s ease-in-out;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+.markdown-content h1, .markdown-content h2, .markdown-content h3 {
             margin-top: 1rem;
             margin-bottom: 0.5rem;
             font-weight: bold;
             overflow-x: auto;
             margin: 1rem 0;
         }
+        .loading-spinner {
+            border: 3px solid #f3f3f3;
+            border-top: 3px solid #6366f1;
+            border-radius: 50%;
+            width: 20px;
+            height: 20px;
+            animation: spin 1s linear infinite;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+.page-container {
             display: none;
+            opacity: 0;
+            transition: opacity 0.3s ease-in-out;
         }
         .active-page {
             display: block;
+            opacity: 1;
         }
+</style>
 </head>
+<body class="bg-gray-50 min-h-screen flex flex-col">
+<!-- Navigation -->
     <nav class="bg-white shadow-lg border-b">
+            <div class="max-w-7xl mx-auto px-4">
+                <div class="flex justify-between items-center h-16">
+<div class="flex items-center space-x-4 space-x-reverse">
                     <i data-feather="message-circle" class="text-primary w-8 h-8"></i>
+                    <h1 class="text-xl font-bold text-gray-800">المساعد الذكي</h1>
+</div>
                 <div class="flex items-center space-x-4 space-x-reverse">
                     <button onclick="showPage('settings')" class="text-gray-600 hover:text-primary transition-colors">
                         <i data-feather="settings"></i>
     <div class="max-w-4xl mx-auto py-8 px-4">
         <!-- Welcome Section -->
         <div class="text-center mb-12">
+            <h2 class="text-3xl font-bold text-gray-800 mb-4">مرحباً بك في المساعد الذكي</h2>
+            <p class="text-gray-600 text-lg">تطبيق الدردشة الذكي الذي يتقمص الشخصيات باستخدام نماذج الذكاء الاصطناعي المتقدمة</p>
+</div>
         <!-- Quick Actions -->
         <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-12">
             <button onclick="showPage('chat')" class="bg-white p-6 rounded-xl shadow-md border border-gray-200 hover:shadow-lg transition-shadow group">
                 <div class="flex items-start space-x-4 space-x-reverse">
                     <i data-feather="zap" class="w-6 h-6 text-green-500 mt-1"></i>
                     <div>
+                        <h4 class="font-semibold text-gray-800 mb-2">نماذج الذكاء الاصطناعي المتقدمة</h4>
+                        <p class="text-gray-600">استخدم أحدث نماذج الذكاء الاصطناعي المتقدمة</p>
+</div>
                 </div>
                 <div class="flex items-start space-x-4 space-x-reverse">
                     <i data-feather="user" class="w-6 h-6 text-blue-500 mt-1"></i>
                 }
             };
         }
         // Page navigation
         function showPage(pageName) {
+            // Hide all pages with fade out
             document.querySelectorAll('.page-container').forEach(page => {
                 page.classList.remove('active-page');
+                page.style.opacity = '0';
             });
+            // Show the selected page with fade in
+            setTimeout(() => {
+                document.getElementById(pageName).classList.add('active-page');
+                document.getElementById(pageName).style.opacity = '1';
+            }, 100);
             // Update page-specific content
             if (pageName === 'characters') {
             feather.replace();
         }
+// Initialize app
         document.addEventListener('DOMContentLoaded', function() {
             initDB();
             feather.replace();
             loadStatistics();
             showPage('home');
+            // Add smooth scroll behavior
+            document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+                anchor.addEventListener('click', function (e) {
+                    e.preventDefault();
+                    const target = document.querySelector(this.getAttribute('href'));
+                    if (target) {
+                        target.scrollIntoView({ behavior: 'smooth' });
+                    }
+                });
+            });
+            // Add loading animation
+            document.querySelectorAll('.page-container').forEach(page => {
+                page.style.opacity = '0';
+                page.style.transition = 'opacity 0.3s ease-in-out';
+            });
         });
+// Load statistics
         function loadStatistics() {
             const dbRequest = indexedDB.open("GeminiPersonaDB", 1);
             const url = URL.createObjectURL(dataBlob);
             const link = document.createElement('a');
             link.href = url;
+            link.download = `smart-assistant-characters-${new Date().toISOString().split('T')[0]}.json`;
             document.body.appendChild(link);
             link.click();
             document.body.removeChild(link);
             URL.revokeObjectURL(url);
         }
+// Handle form submission
         document.getElementById('characterForm').addEventListener('submit', function(e) {
             e.preventDefault();
             document.getElementById('messageInput').disabled = false;
             document.getElementById('sendButton').disabled = false;
         }
         async function sendMessage() {
             const messageInput = document.getElementById('messageInput');
             const message = messageInput.value.trim();
             addMessageToChat('user', message);
             messageInput.value = '';
+            // Show loading indicator
+            const loadingDiv = document.createElement('div');
+            loadingDiv.className = 'flex justify-start';
+            loadingDiv.innerHTML = '<div class="chat-bubble-ai px-4 py-2"><div class="loading-spinner"></div></div>';
+            document.getElementById('messagesContainer').appendChild(loadingDiv);
+            document.getElementById('messagesContainer').scrollTop = document.getElementById('messagesContainer').scrollHeight;
             // Get character info
             const request = indexedDB.open("GeminiPersonaDB", 1);
             request.onsuccess = function(event) {
                 getRequest.onsuccess = function() {
                     const character = getRequest.result;
+                    // Remove loading indicator
+                    loadingDiv.remove();
+                    // Simulate AI response with better formatting
                     setTimeout(() => {
+                        const response = generateSmartResponse(message, character);
+                        addMessageToChat('ai', response, character);
+                    }, 1500);
                 };
             };
         }
+        function generateSmartResponse(message, character) {
+            const responses = {
+                doctor: [
+                    "بناءً على ما ذكرت، أنصحك باستشارة الطبيب المختص للحصول على تشخيص دقيق.",
+                    "هذه الأعراض قد تتطلب فحصاً طبياً شاملاً. هل يمكنك توضيح المزيد؟",
+                    "من المهم مراقبة هذه الأعراض وتسجيلها لمساعدة الطبيب في التشخيص."
+                ],
+                teacher: [
+                    "هذا سؤال ممتاز! دعنا نحلل المفهوم خطوة بخطوة.",
+                    "يمكنني شرح هذا الموضوع بطريقة أبسط. هل تريد التركيز على جانب معين؟",
+                    "هذه نقطة مهمة جداً في الفهم. سأوضحها لك بمثال عملي."
+                ],
+                friend: [
+                    "أفهم ما تمر به تماماً. هل تريد أن تتحدث عن الأمر أكثر؟",
+                    "أنا هنا للاستماع. شاركني ما يجول في خاطرك.",
+                    "هذا موقف صعب حقاً. كيف تشعر حيال ذلك؟"
+                ],
+                default: [
+                    "هذا مثير للاهتمام! أخبرني المزيد عن هذا الموضوع.",
+                    "أفهم وجهة نظرك. هل هناك جانب آخر ترغب في مناقشته؟",
+                    "سؤال جيد! دعنا نفكر في هذا معاً."
+                ]
+            };
+            const roleResponses = responses[character.role?.toLowerCase()] || responses.default;
+            return roleResponses[Math.floor(Math.random() * roleResponses.length)];
+        }
+function addMessageToChat(sender, content, character = null) {
             const messagesContainer = document.getElementById('messagesContainer');
             const messageDiv = document.createElement('div');
             messageDiv.className = `flex ${sender === 'user' ? 'justify-end' : 'justify-start'}`;
             messagesContainer.appendChild(messageDiv);
             messagesContainer.scrollTop = messagesContainer.scrollHeight;
         }
         function saveConversation() {
+            const messages = document.querySelectorAll('#messagesContainer .flex');
+            if (messages.length === 0) {
+                alert('لا توجد رسائل لحفظها');
+                return;
+            }
+            const characterSelect = document.getElementById('characterSelect');
+            const characterId = characterSelect.value;
+            const characterName = characterSelect.options[characterSelect.selectedIndex].text;
+            const conversationData = {
+                title: `محادثة مع ${characterName}`,
+                characterId: parseInt(characterId),
+                characterName: characterName,
+                messages: Array.from(messages).map(msg => {
+                    const isUser = msg.classList.contains('justify-end');
+                    const content = msg.querySelector('.markdown-content')?.innerHTML || msg.querySelector('div:not(.font-semibold)')?.textContent || '';
+                    return {
+                        sender: isUser ? 'user' : 'ai',
+                        content: content,
+                        timestamp: new Date().toISOString()
+                    };
+                }),
+                createdAt: new Date().toISOString()
+            };
+            const request = indexedDB.open("GeminiPersonaDB", 1);
+            request.onsuccess = function(event) {
+                const db = event.target.result;
+                const transaction = db.transaction(['conversations'], 'readwrite');
+                const store = transaction.objectStore('conversations');
+                store.add(conversationData);
+                transaction.oncomplete = function() {
+                    alert('تم حفظ المحادثة بنجاح');
+                };
+            };
+        }
+function clearChat() {
             document.getElementById('messagesContainer').innerHTML = `
                 <div class="text-center text-gray-500 py-8">
                     <i data-feather="message-circle" class="w-12 h-12 mx-auto mb-4"></i>
             `;
             feather.replace();
         }
         function exportChat() {
+            const messages = document.querySelectorAll('#messagesContainer .flex');
+            if (messages.length === 0) {
+                alert('لا توجد رسائل لتصديرها');
+                return;
+            }
+            const characterSelect = document.getElementById('characterSelect');
+            const characterName = characterSelect.options[characterSelect.selectedIndex].text;
+            let chatContent = `محادثة مع ${characterName}\n`;
+            chatContent += `التاريخ: ${new Date().toLocaleString('ar-SA')}\n`;
+            chatContent += '=' .repeat(50) + '\n\n';
+            messages.forEach(msg => {
+                const isUser = msg.classList.contains('justify-end');
+                const sender = isUser ? 'أنت' : characterName;
+                const content = msg.querySelector('.markdown-content')?.textContent || msg.querySelector('div:not(.font-semibold)')?.textContent || '';
+                chatContent += `${sender}: ${content}\n\n`;
+            });
+            const dataBlob = new Blob([chatContent], {type: 'text/plain'});
+            const url = URL.createObjectURL(dataBlob);
+            const link = document.createElement('a');
+            link.href = url;
+            link.download = `chat-${characterName}-${new Date().toISOString().split('T')[0]}.txt`;
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+            URL.revokeObjectURL(url);
+        }
+// Voice chat functionality
         function loadVoiceCharacterSelect() {
             const select = document.getElementById('voiceCharacterSelect');
             const request = indexedDB.open("GeminiPersonaDB", 1);
                 };
             };
         }
         function exportAllConversations() {
             const request = indexedDB.open("GeminiPersonaDB", 1);
                     const url = URL.createObjectURL(dataBlob);
                     const link = document.createElement('a');
                     link.href = url;
+                    link.download = `smart-assistant-conversations-${new Date().toISOString().split('T')[0]}.json`;
                     document.body.appendChild(link);
                     link.click();
                     document.body.removeChild(link);
                 };
             };
         }
+// Settings functionality
         function loadSettings() {
             const request = indexedDB.open("GeminiPersonaDB", 1);
                 };
             };
         }
         function exportAllData() {
             const request = indexedDB.open("GeminiPersonaDB", 1);
                     const url = URL.createObjectURL(dataBlob);
                     const link = document.createElement('a');
                     link.href = url;
+                    link.download = `smart-assistant-backup-${new Date().toISOString().split('T')[0]}.json`;
                     document.body.appendChild(link);
                     link.click();
                     document.body.removeChild(link);
             };
         }
+        function importData(event) {
+            const file = event.target.files[0];
+            if (!file) return;
+            const reader = new FileReader();
+            reader.onload = function(e) {
+                try {
+                    const data = JSON.parse(e.target.result);
+                    const request = indexedDB.open("GeminiPersonaDB", 1);
+                    request.onsuccess = function(event) {
+                        const db = event.target.result;
+                        const transaction = db.transaction(['conversations', 'characters', 'settings'], 'readwrite');
+                        // Clear existing data
+                        transaction.objectStore('conversations').clear();
+                        transaction.objectStore('characters').clear();
+                        transaction.objectStore('settings').clear();
+                        // Import new data
+                        if (data.conversations && data.conversations.length > 0) {
+                            const conversationsStore = transaction.objectStore('conversations');
+                            data.conversations.forEach(conv => {
+                                delete conv.id; // Let IndexedDB generate new ID
+                                conversationsStore.add(conv);
+                            });
+                        }
+                        if (data.characters && data.characters.length > 0) {
+                            const charactersStore = transaction.objectStore('characters');
+                            data.characters.forEach(char => {
+                                delete char.id; // Let IndexedDB generate new ID
+                                charactersStore.add(char);
+                            });
+                        }
+                        if (data.settings && data.settings.length > 0) {
+                            const settingsStore = transaction.objectStore('settings');
+                            data.settings.forEach(setting => {
+                                settingsStore.add(setting);
+                            });
+                        }
+                        transaction.oncomplete = function() {
+                            alert('تم استيراد البيانات بنجاح');
+                            location.reload();
+                        };
+                    };
+                } catch (error) {
+                    alert('خطأ في قراءة الملف. يرجى التأكد من أنه ملف نسخة احتياطية صحيح.');
+                }
+            };
+            reader.readAsText(file);
+        }
+// Add event listeners for search and sort in characters page
         document.addEventListener('DOMContentLoaded', function() {
             document.getElementById('searchInput')?.addEventListener('input', function() {
                 currentPage = 1;
             });
         });
     </script>
+    <!-- Footer -->
+    <footer class="bg-gray-800 text-white py-4 mt-auto">
+        <div class="text-center">
+            <p class="text-sm">تصميم المهندس احمد السقاف</p>
+        </div>
+    </footer>
 </body>
 </html>