Spaces:
Running
Running
| <html lang="ar" dir="rtl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>واجهة جمناي السحابية</title> | |
| <link href="https://googleapis.com" rel="stylesheet"> | |
| <style> | |
| * { box-sizing: border-box; font-family: 'Cairo', sans-serif; margin: 0; padding: 0; } | |
| body { background-color: #131314; color: #e3e3e3; display: flex; flex-direction: column; height: 100vh; } | |
| header { background-color: #1e1f20; padding: 15px; text-align: center; font-size: 1.2rem; font-weight: bold; border-bottom: 1px solid #303132; box-shadow: 0 2px 5px rgba(0,0,0,0.2); } | |
| .config-bar { background-color: #1e1f20; padding: 10px 20px; display: flex; gap: 10px; align-items: center; border-bottom: 1px solid #303132; } | |
| .config-bar input { flex: 1; padding: 8px 12px; background: #2b2c2d; border: 1px solid #444746; color: #fff; border-radius: 6px; outline: none; font-size: 0.9rem; text-align: left; dir: ltr; } | |
| .chat-container { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 15px; background: #131314; } | |
| .message { max-width: 80%; padding: 12px 16px; border-radius: 12px; line-height: 1.6; word-wrap: break-word; font-size: 1rem; animation: fadeIn 0.3s ease; } | |
| .user-message { background-color: #2b2c2d; align-self: flex-start; border-bottom-left-radius: 2px; } | |
| .ai-message { background-color: #1a237e; align-self: flex-end; border-bottom-right-radius: 2px; } | |
| .error-message { background-color: #b71c1c; align-self: center; border-radius: 6px; font-size: 0.9rem; } | |
| .input-area { padding: 20px; background-color: #1e1f20; border-top: 1px solid #303132; display: flex; gap: 10px; } | |
| .input-area textarea { flex: 1; height: 50px; padding: 12px; background: #2b2c2d; border: 1px solid #444746; color: #fff; border-radius: 8px; resize: none; outline: none; font-size: 1rem; } | |
| .input-area button { background-color: #0b57d0; color: white; border: none; padding: 0 25px; border-radius: 8px; cursor: pointer; font-weight: bold; transition: background 0.2s; font-size: 1rem; } | |
| .input-area button:hover { background-color: #0842a0; } | |
| .input-area button:disabled { background-color: #444746; cursor: not-allowed; } | |
| @keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } } | |
| </style> | |
| </head> | |
| <body> | |
| <header>واجهة الشات السحابية المباشرة (Gemini)</header> | |
| <div class="config-bar"> | |
| <label style="font-size: 0.9rem; color: #c4c7c5;">مفتاح الـ API:</label> | |
| <input type="password" id="apiKeyInput" placeholder="أدخل مفتاح Google AI Studio API الخاص بك هنا..."> | |
| </div> | |
| <div class="chat-container" id="chatContainer"> | |
| <div class="message ai-message">أهلاً بك! الواجهة تعمل الآن سحابياً بالكامل. يرجى إدخال مفتاح الـ API الخاص بك في الأعلى للبدء بالمحادثة.</div> | |
| </div> | |
| <div class="input-area"> | |
| <textarea id="userInput" placeholder="اكتب رسالتك هنا... (اضغط Enter للإرسال)" rows="1"></textarea> | |
| <button id="sendBtn" onclick="sendMessage()">إرسال</button> | |
| </div> | |
| <script> | |
| const chatContainer = document.getElementById('chatContainer'); | |
| const userInput = document.getElementById('userInput'); | |
| const apiKeyInput = document.getElementById('apiKeyInput'); | |
| const sendBtn = document.getElementById('sendBtn'); | |
| // استرجاع المفتاح تلقائياً إذا كان مخزناً في المتصفح سابقاً لحفظ وقتك | |
| if (localStorage.getItem('gemini_api_key')) { | |
| apiKeyInput.value = localStorage.getItem('gemini_api_key'); | |
| } | |
| userInput.addEventListener('keydown', (e) => { | |
| if (e.key === 'Enter' && !e.shiftKey) { | |
| e.preventDefault(); | |
| sendMessage(); | |
| } | |
| }); | |
| async function sendMessage() { | |
| const text = userInput.value.trim(); | |
| const apiKey = apiKeyInput.value.trim(); | |
| if (!text) return; | |
| if (!apiKey) { | |
| alert('الرجاء إدخال مفتاح الـ API الخاص بـ Google AI Studio أولاً في الحقل المخصص بالأعلى!'); | |
| return; | |
| } | |
| // حفظ المفتاح في المتصفح محلياً لكي لا تضطر لكتابته في كل مرة تفتح السبيس | |
| localStorage.setItem('gemini_api_key', apiKey); | |
| // إضافة رسالة المستخدم للواجهة | |
| appendMessage(text, 'user-message'); | |
| userInput.value = ''; | |
| // إعداد رسالة مؤقتة بانتظار الرد | |
| const typingDiv = appendMessage('جاري التفكير وكتابة الرد...', 'ai-message'); | |
| sendBtn.disabled = true; | |
| try { | |
| // الاتصال المباشر والآمن بخوادم Google AI Studio من متصفحك | |
| const response = await fetch(`https://googleapis.com{apiKey}`, { | |
| method: 'POST', | |
| headers: { 'Content-Type': 'application/json' }, | |
| body: JSON.stringify({ | |
| contents: [{ parts: [{ text: text }] }] | |
| }) | |
| }); | |
| const data = await response.json(); | |
| if (!response.ok) { | |
| throw new Error(data.error?.message || 'فشل الاتصال بالخادم، تأكد من صحة المفتاح الخاص بك.'); | |
| } | |
| const aiResponse = data.candidates[0].content.parts[0].text; | |
| typingDiv.innerText = aiResponse; | |
| } catch (error) { | |
| typingDiv.className = 'message error-message'; | |
| typingDiv.innerText = `خطأ: ${error.message}`; | |
| } finally { | |
| sendBtn.disabled = false; | |
| chatContainer.scrollTop = chatContainer.scrollHeight; | |
| } | |
| } | |
| function appendMessage(text, className) { | |
| const messageDiv = document.createElement('div'); | |
| messageDiv.className = `message ${className}`; | |
| messageDiv.innerText = text; | |
| chatContainer.appendChild(messageDiv); | |
| chatContainer.scrollTop = chatContainer.scrollHeight; | |
| return messageDiv; | |
| } | |
| </script> | |
| </body> | |
| </html> | |