Spaces:
Runtime error
Runtime error
| <html lang="ar" dir="rtl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AMR PROGRAMER - AI Chat</title> | |
| <style> | |
| :root { | |
| --bg-color: #131314; | |
| --chat-bg: #1e1e1f; | |
| --user-msg-bg: #2b2a2a; | |
| --text-color: #e3e3e3; | |
| --accent-color: #a8c7fa; | |
| --input-bg: #1e1e1f; | |
| } | |
| body { | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| background-color: var(--bg-color); | |
| color: var(--text-color); | |
| margin: 0; | |
| display: flex; | |
| flex-direction: column; | |
| height: 100vh; | |
| } | |
| header { | |
| padding: 15px 20px; | |
| background-color: var(--bg-color); | |
| border-bottom: 1px solid #282829; | |
| } | |
| header h1 { | |
| margin: 0; | |
| font-size: 20px; | |
| color: var(--accent-color); | |
| font-weight: 600; | |
| } | |
| .chat-container { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: 20px; | |
| max-width: 850px; | |
| margin: 0 auto; | |
| width: 100%; | |
| box-sizing: border-box; | |
| } | |
| .message { | |
| margin-bottom: 25px; | |
| padding: 15px 20px; | |
| border-radius: 12px; | |
| line-height: 1.6; | |
| max-width: 85%; | |
| word-wrap: break-word; | |
| white-space: pre-wrap; | |
| } | |
| .user-message { | |
| background-color: var(--user-msg-bg); | |
| margin-right: auto; | |
| border-bottom-left-radius: 2px; | |
| } | |
| .bot-message { | |
| background-color: var(--chat-bg); | |
| margin-left: auto; | |
| border-left: 4px solid var(--accent-color); | |
| border-bottom-right-radius: 2px; | |
| } | |
| .input-area { | |
| padding: 20px; | |
| background-color: var(--bg-color); | |
| display: flex; | |
| justify-content: center; | |
| } | |
| .input-box { | |
| width: 100%; | |
| max-width: 800px; | |
| display: flex; | |
| background: var(--input-bg); | |
| border-radius: 30px; | |
| padding: 10px 20px; | |
| align-items: center; | |
| border: 1px solid #3c4043; | |
| } | |
| input { | |
| flex: 1; | |
| background: none; | |
| border: none; | |
| color: white; | |
| font-size: 16px; | |
| outline: none; | |
| padding: 8px 5px; | |
| } | |
| button { | |
| background: none; | |
| border: none; | |
| color: var(--accent-color); | |
| padding: 10px; | |
| cursor: pointer; | |
| font-weight: bold; | |
| font-size: 16px; | |
| } | |
| .typing-indicator { | |
| display: none; | |
| align-items: center; | |
| margin-bottom: 25px; | |
| padding: 15px; | |
| background: var(--chat-bg); | |
| border-radius: 12px; | |
| width: fit-content; | |
| } | |
| .dot { | |
| width: 8px; | |
| height: 8px; | |
| background: var(--accent-color); | |
| border-radius: 50%; | |
| margin: 0 3px; | |
| animation: bounce 1.4s infinite ease-in-out both; | |
| } | |
| .dot:nth-child(1) { animation-delay: -0.32s; } | |
| .dot:nth-child(2) { animation-delay: -0.16s; } | |
| @keyframes bounce { | |
| 0%, 80%, 100% { transform: scale(0); } | |
| 40% { transform: scale(1.0); } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <h1>AMR PROGRAMER - AI Chat</h1> | |
| </header> | |
| <div class="chat-container" id="chatContainer"> | |
| <div class="message bot-message">مرحباً بك! أنا مساعدك الذكي المطور بواسطة AMR PROGRAMER. كيف يمكنني مساعدتك اليوم؟</div> | |
| <div class="typing-indicator" id="typingIndicator"> | |
| <div class="dot"></div><div class="dot"></div><div class="dot"></div> | |
| </div> | |
| </div> | |
| <div class="input-area"> | |
| <div class="input-box"> | |
| <input type="text" id="userInput" placeholder="اسألني أي شيء..." onkeypress="if(event.key === 'Enter') sendMessage()"> | |
| <button onclick="sendMessage()">إرسال</button> | |
| </div> | |
| </div> | |
| <script> | |
| async function sendMessage() { | |
| const inputEl = document.getElementById('userInput'); | |
| const messageText = inputEl.value.trim(); | |
| if (!messageText) return; | |
| const indicator = document.getElementById('typingIndicator'); | |
| const container = document.getElementById('chatContainer'); | |
| appendMessage(messageText, 'user-message'); | |
| inputEl.value = ''; | |
| container.appendChild(indicator); | |
| indicator.style.display = 'flex'; | |
| container.scrollTop = container.scrollHeight; | |
| try { | |
| // الاتصال بالسيرفر الداخلي الخاص بالمنصة | |
| const response = await fetch('/chat', { | |
| method: 'POST', | |
| headers: { 'Content-Type': 'application/json' }, | |
| body: JSON.stringify({ message: messageText }) | |
| }); | |
| const data = await response.json(); | |
| indicator.style.display = 'none'; | |
| appendMessage(data.response, 'bot-message'); | |
| } catch (error) { | |
| indicator.style.display = 'none'; | |
| appendMessage("عذراً، حدث خطأ أثناء الاتصال بمحرك الذكاء الاصطناعي.", 'bot-message'); | |
| } | |
| } | |
| function appendMessage(text, className) { | |
| const container = document.getElementById('chatContainer'); | |
| const indicator = document.getElementById('typingIndicator'); | |
| const msgDiv = document.createElement('div'); | |
| msgDiv.className = `message ${className}`; | |
| msgDiv.innerText = text; | |
| container.insertBefore(msgDiv, indicator); | |
| container.scrollTop = container.scrollHeight; | |
| } | |
| </script> | |
| </body> | |
| </html> |