| <!DOCTYPE html> |
| <html lang="ar" dir="rtl"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>G4F Chat</title> |
| <style> |
| * { margin: 0; padding: 0; box-sizing: border-box; } |
| |
| body { |
| font-family: 'Segoe UI', Tahoma, sans-serif; |
| background: linear-gradient(135deg, #0f0c29, #302b63, #24243e); |
| min-height: 100vh; |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| } |
| |
| .chat-container { |
| width: 500px; |
| background: rgba(255,255,255,0.05); |
| backdrop-filter: blur(20px); |
| border-radius: px; |
| border: 1px solid rgba(255,255,255,0.1); |
| box-shadow: 0 20px 60px rgba(0,0,0,0.3); |
| overflow: hidden; |
| } |
| |
| .header { |
| background: linear-gradient(90deg, #667eea, #764ba2); |
| padding: 20px; |
| text-align: center; |
| color: white; |
| } |
| |
| .header h1 { font-size: 1.2rem; } |
| .header small { opacity: 0.8; font-size: 0.8rem; } |
| |
| .chat-messages { |
| height: 40px; |
| overflow-y: auto; |
| padding: 20px; |
| } |
| |
| .message { |
| margin: 10px 0; |
| display: flex; |
| } |
| |
| .message.user { justify-content: flex-end; } |
| .message.bot { justify-content: flex-start; } |
| |
| .message .bubble { |
| max-width: 75%; |
| padding: 12px 18px; |
| border-radius: 18px; |
| font-size: 0.95rem; |
| line-height: 1.6; |
| } |
| |
| .message.user .bubble { |
| background: linear-gradient(135deg, #667eea, #764ba2); |
| color: white; |
| border-bottom-right-radius: 4px; |
| } |
| |
| .message.bot .bubble { |
| background: rgba(255,255,255,0.1); |
| color: #e0e0e0; |
| border-bottom-left-radius: 4px; |
| } |
| |
| .input-area { |
| display: flex; |
| padding: 15px; |
| gap: 10px; |
| border-top: 1px solid rgba(255,255,255,0.1); |
| } |
| |
| #userInput { |
| flex: 1; |
| padding: 12px 20px; |
| border-radius: 25px; |
| border: 1px solid rgba(255,255,255,0.2); |
| background: rgba(255,255,255,0.08); |
| color: white; |
| font-size: 0.95rem; |
| outline: none; |
| } |
| |
| #userInput::placeholder { color: rgba(255,255,255,0.4); } |
| |
| #sendBtn { |
| padding: 12px 25px; |
| border-radius: 25px; |
| border: none; |
| background: linear-gradient(135deg, #667eea, #764ba2); |
| color: white; |
| cursor: pointer; |
| font-size: 1rem; |
| transition: transform 0.2s; |
| } |
| |
| #sendBtn:hover { transform: scale(1.05); } |
| #sendBtn:disabled { opacity: 0.5; cursor: not-allowed; } |
| |
| .typing { color: #667eea; font-style: italic; } |
| </style> |
| </head> |
| <body> |
|
|
| <div class="chat-container"> |
| <div class="header"> |
| <h1>🤖 G4F Chat</h1> |
| <small>AI Assistant powered by G4F</small> |
| </div> |
|
|
| <div class="chat-messages" id="chatBox"> |
| <div class="message bot"> |
| <div class="bubble">مرحباً! 👋 اسألني أي شي</div> |
| </div> |
| </div> |
|
|
| <div class="input-area"> |
| <input type="text" id="userInput" placeholder="اكتب رسالتك هنا..." |
| onkeypress="if(event.key==='Enter') sendMessage()"> |
| <button id="sendBtn" onclick="sendMessage()">إرسال</button> |
| </div> |
| </div> |
|
|
| <script> |
| |
| |
| |
| const API_URL = "http://localhost:7860/chat"; |
| |
| |
| let chatHistory = []; |
| |
| async function sendMessage() { |
| const input = document.getElementById("userInput"); |
| const message = input.value.trim(); |
| if (!message) return; |
| |
| const sendBtn = document.getElementById("sendBtn"); |
| |
| |
| addMessage(message, "user"); |
| input.value = ""; |
| sendBtn.disabled = true; |
| |
| |
| const typingEl = addMessage("⏳ جاري التفكير...", "bot typing"); |
| |
| try { |
| const response = await fetch(API_URL, { |
| method: "POST", |
| headers: { "Content-Type": "application/json" }, |
| body: JSON.stringify({ |
| message: message, |
| model: "gpt-4o-mini", |
| history: chatHistory |
| }) |
| }); |
| |
| const data = await response.json(); |
| |
| |
| typingEl.remove(); |
| |
| if (data.success) { |
| addMessage(data.response, "bot"); |
| |
| |
| chatHistory = data.history; |
| } else { |
| addMessage("❌ خطأ: " + data.error, "bot"); |
| } |
| |
| } catch (error) { |
| typingEl.remove(); |
| addMessage("❌ فشل الاتصال بالسيرفر - تأكد إن الـ Docker شغال", "bot"); |
| } |
| |
| sendBtn.disabled = false; |
| input.focus(); |
| } |
| |
| function addMessage(text, type) { |
| const chatBox = document.getElementById("chatBox"); |
| const div = document.createElement("div"); |
| div.className = `message ${type}`; |
| div.innerHTML = `<div class="bubble">${text}</div>`; |
| chatBox.appendChild(div); |
| chatBox.scrollTop = chatBox.scrollHeight; |
| return div; |
| } |
| </script> |
|
|
| </body> |
| </html> |
|
|
