Spaces:

joermd
/

test

Running

App Files Files Community

joermd commited on Nov 10, 2024

Commit

853d214

verified ·

1 Parent(s): a15cdfd

Update index.html

Browse files

Files changed (1) hide show

index.html +64 -39

index.html CHANGED Viewed

@@ -14,7 +14,6 @@
             height: 100vh;
             background-color: #f0f0f0;
         }
         .sidebar {
             width: 260px;
             background-color: #ffffff;
@@ -24,7 +23,6 @@
             border-left: 1px solid #e0e0e0;
             overflow-y: auto;
         }
         .logo {
             font-size: 28px;
             font-weight: bold;
@@ -32,25 +30,21 @@
             text-align: center;
             color: #333;
         }
         .menu-item {
             padding: 10px;
             margin-bottom: 5px;
             cursor: pointer;
             border-radius: 5px;
         }
         .menu-item:hover {
             background-color: #f0f0f0;
         }
         .main-content {
             flex-grow: 1;
             display: flex;
             flex-direction: column;
             padding: 20px;
         }
         .header {
             display: flex;
             justify-content: space-between;
@@ -61,13 +55,11 @@
             box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
             margin-bottom: 20px;
         }
         .header-title {
             font-size: 24px;
             font-weight: bold;
             color: #333;
         }
         .chat-container {
             flex-grow: 1;
             display: flex;
@@ -77,14 +69,12 @@
             box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
             overflow: hidden;
         }
         .messages {
             flex: 1;
             overflow-y: auto;
             padding: 15px;
             background-color: #fafafa;
         }
         .message {
             padding: 12px;
             margin: 8px 0;
@@ -93,26 +83,22 @@
             max-width: 70%;
             word-break: break-word;
         }
         .user-message {
             text-align: left;
             background-color: #e0e0e0;
             margin-right: auto;
         }
         .bot-message {
             text-align: right;
             background-color: #f5f5f5;
             margin-left: auto;
         }
         .input-container {
             display: flex;
             padding: 12px;
             background-color: #ffffff;
             border-top: 1px solid #e0e0e0;
         }
         .input-container input {
             flex: 1;
             padding: 12px;
@@ -121,7 +107,6 @@
             margin-left: 10px;
             font-size: 16px;
         }
         .input-container button {
             padding: 12px 24px;
             border-radius: 12px;
@@ -131,17 +116,14 @@
             cursor: pointer;
             font-size: 16px;
         }
         .input-container button:hover {
             background-color: #666;
         }
         .quick-actions {
             display: flex;
             justify-content: center;
             margin-top: 20px;
         }
         .action-button {
             background-color: #f0f0f0;
             color: #333;
@@ -151,7 +133,6 @@
             border-radius: 5px;
             cursor: pointer;
         }
         footer {
             text-align: center;
             padding: 15px;
@@ -160,12 +141,19 @@
             margin-top: 20px;
             box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
         }
         @media (max-width: 768px) {
             .sidebar {
                 display: none;
             }
         }
     </style>
 </head>
 <body>
@@ -189,18 +177,18 @@
             <div class="messages" id="messages">
                 <!-- Messages will be displayed here -->
             </div>
             <div class="input-container">
-                <input type="text" id="message-input" placeholder="اكتب رسالتك...">
                 <button onclick="sendMessage()">إرسال</button>
             </div>
         </div>
         <div class="quick-actions">
-            <button class="action-button">إنشاء صورة</button>
-            <button class="action-button">شرح موضوع</button>
-            <button class="action-button">شكر المقابل</button>
-            <button class="action-button">حقيقة مثيرة</button>
         </div>
         <footer>
@@ -209,21 +197,47 @@
     </div>
     <script>
-        function sendMessage() {
             var input = document.getElementById('message-input');
             var message = input.value.trim();
             if (message !== '') {
                 appendMessage('user-message', message);
-                // هنا يمكنك إضافة الكود الخاص بإرسال الرسالة إلى الخادم
-                // وتلقي الرد، ولكن في هذا المثال سنقوم فقط بمحاكاة الرد
-                setTimeout(() => {
-                    appendMessage('bot-message', 'شكرًا لرسالتك. كيف يمكنني مساعدتك أكثر؟');
-                }, 1000);
                 input.value = '';
             }
         }
@@ -236,16 +250,27 @@
             messages.scrollTop = messages.scrollHeight;
         }
         // دالة لإضافة رسالة ترحيب عند تحميل الصفحة
         function initializeMessages() {
             var today = new Date();
             var hour = today.getHours();
             var greeting = hour < 12 ? 'صباح الخير' : 'مساء الخير';
-            appendMessage('bot-message', `أهلاً يا يوسف، ${greeting} ازاي أقدر أساعدك النهاردة؟`);
         }
-        // استدعاء الدالة عند تحميل الصفحة
-        initializeMessages();
     </script>
 </body>
 </html>

             height: 100vh;
             background-color: #f0f0f0;
         }
         .sidebar {
             width: 260px;
             background-color: #ffffff;
             border-left: 1px solid #e0e0e0;
             overflow-y: auto;
         }
         .logo {
             font-size: 28px;
             font-weight: bold;
             text-align: center;
             color: #333;
         }
         .menu-item {
             padding: 10px;
             margin-bottom: 5px;
             cursor: pointer;
             border-radius: 5px;
         }
         .menu-item:hover {
             background-color: #f0f0f0;
         }
         .main-content {
             flex-grow: 1;
             display: flex;
             flex-direction: column;
             padding: 20px;
         }
         .header {
             display: flex;
             justify-content: space-between;
             box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
             margin-bottom: 20px;
         }
         .header-title {
             font-size: 24px;
             font-weight: bold;
             color: #333;
         }
         .chat-container {
             flex-grow: 1;
             display: flex;
             box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
             overflow: hidden;
         }
         .messages {
             flex: 1;
             overflow-y: auto;
             padding: 15px;
             background-color: #fafafa;
         }
         .message {
             padding: 12px;
             margin: 8px 0;
             max-width: 70%;
             word-break: break-word;
         }
         .user-message {
             text-align: left;
             background-color: #e0e0e0;
             margin-right: auto;
         }
         .bot-message {
             text-align: right;
             background-color: #f5f5f5;
             margin-left: auto;
         }
         .input-container {
             display: flex;
             padding: 12px;
             background-color: #ffffff;
             border-top: 1px solid #e0e0e0;
         }
         .input-container input {
             flex: 1;
             padding: 12px;
             margin-left: 10px;
             font-size: 16px;
         }
         .input-container button {
             padding: 12px 24px;
             border-radius: 12px;
             cursor: pointer;
             font-size: 16px;
         }
         .input-container button:hover {
             background-color: #666;
         }
         .quick-actions {
             display: flex;
             justify-content: center;
             margin-top: 20px;
         }
         .action-button {
             background-color: #f0f0f0;
             color: #333;
             border-radius: 5px;
             cursor: pointer;
         }
         footer {
             text-align: center;
             padding: 15px;
             margin-top: 20px;
             box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
         }
         @media (max-width: 768px) {
             .sidebar {
                 display: none;
             }
         }
+        .loading {
+            display: none;
+            text-align: center;
+            padding: 10px;
+        }
+        .loading.visible {
+            display: block;
+        }
     </style>
 </head>
 <body>
             <div class="messages" id="messages">
                 <!-- Messages will be displayed here -->
             </div>
+            <div class="loading" id="loading">جاري التحميل...</div>
             <div class="input-container">
+                <input type="text" id="message-input" placeholder="اكتب رسالتك..." onkeypress="handleKeyPress(event)">
                 <button onclick="sendMessage()">إرسال</button>
             </div>
         </div>
         <div class="quick-actions">
+            <button class="action-button" onclick="sendQuickMessage('إنشاء صورة')">إنشاء صورة</button>
+            <button class="action-button" onclick="sendQuickMessage('شرح موضوع')">شرح موضوع</button>
+            <button class="action-button" onclick="sendQuickMessage('شكر المقابل')">شكر المقابل</button>
+            <button class="action-button" onclick="sendQuickMessage('حقيقة مثيرة')">حقيقة مثيرة</button>
         </div>
         <footer>
     </div>
     <script>
+        // إضافة متغير للتحكم ��ي حالة الإرسال
+        let isSending = false;
+        async function sendMessage() {
+            if (isSending) return;
             var input = document.getElementById('message-input');
             var message = input.value.trim();
             if (message !== '') {
+                isSending = true;
+                // إظهار الرسالة في الشات
                 appendMessage('user-message', message);
                 input.value = '';
+                // إظهار مؤشر التحميل
+                document.getElementById('loading').classList.add('visible');
+                try {
+                    // إرسال الرسالة إلى Python/Streamlit
+                    const response = await fetch('/_stcore/message', {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                        },
+                        body: JSON.stringify({ message: message })
+                    });
+                    if (response.ok) {
+                        const data = await response.json();
+                        appendMessage('bot-message', data.response);
+                    } else {
+                        appendMessage('bot-message', 'عذراً، حدث خطأ في معالجة رسالتك.');
+                    }
+                } catch (error) {
+                    appendMessage('bot-message', 'عذراً، حدث خطأ في الاتصال.');
+                } finally {
+                    // إخفاء مؤشر التحميل وإعادة تعيين حالة الإرسال
+                    document.getElementById('loading').classList.remove('visible');
+                    isSending = false;
+                }
             }
         }
             messages.scrollTop = messages.scrollHeight;
         }
+        function handleKeyPress(event) {
+            if (event.key === 'Enter') {
+                sendMessage();
+            }
+        }
+        function sendQuickMessage(message) {
+            document.getElementById('message-input').value = message;
+            sendMessage();
+        }
         // دالة لإضافة رسالة ترحيب عند تحميل الصفحة
         function initializeMessages() {
             var today = new Date();
             var hour = today.getHours();
             var greeting = hour < 12 ? 'صباح الخير' : 'مساء الخير';
+            appendMessage('bot-message', `أهلاً بك، ${greeting}! كيف يمكنني مساعدتك اليوم؟`);
         }
+        // استدعاء دالة التهيئة عند تحميل الصفحة
+        window.onload = initializeMessages;
     </script>
 </body>
 </html>