:root {
--background: #003650;
--text: #ffffff;
--border: #e0e0e0;
}
[data-theme="dark"] {
--background: #ffffff;
--text: #000000;
--border: #333333;
}
body {
background: var(--background);
color: var(--text);
min-height: 100vh;
transition: all 0.3s ease;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
height: 100vh;
display: flex;
flex-direction: column;
}
.header {
text-align: center;
margin-bottom: 20px;
opacity: 0;
}
.chat-container {
flex: 1;
overflow-y: auto;
padding: 20px;
border: 1px solid var(--border);
border-radius: 10px;
margin-bottom: 20px;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
}
.message {
margin: 10px 0;
padding: 15px;
border-radius: 12px;
max-width: 80%;
opacity: 0;
transform: translateY(20px);
line-height: 1.5;
}
.user-message {
background: #007AFF;
color: white;
margin-left: auto;
box-shadow: 0 2px 5px rgba(0, 122, 255, 0.2);
}
.ai-message {
background: var(--border);
margin-right: auto;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.input-container {
display: flex;
gap: 10px;
margin-bottom: 20px;
}
input {
flex: 1;
padding: 15px;
border: 2px solid var(--border);
border-radius: 12px;
background: var(--background);
color: var(--text);
font-size: 16px;
transition: all 0.3s ease;
}
input:focus {
outline: none;
border-color: #007AFF;
box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.2);
}
button {
padding: 15px 30px;
border: none;
border-radius: 12px;
background: #007AFF;
color: white;
cursor: pointer;
transition: all 0.3s ease;
font-weight: 600;
box-shadow: 0 2px 5px rgba(0, 122, 255, 0.2);
}
button:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 122, 255, 0.3);
}
.theme-toggle {
position: fixed;
top: 20px;
right: 20px;
cursor: pointer;
padding: 10px;
border-radius: 50%;
background: var(--border);
transition: all 0.3s ease;
}
.theme-toggle:hover {
transform: rotate(180deg);
}
.footer {
text-align: center;
padding: 20px;
font-size: 0.8em;
color: var(--text);
opacity: 0.7;
}
.loading {
display: none;
margin: 10px 0;
padding: 15px;
border-radius: 12px;
background: var(--border);
max-width: 80px;
margin-right: auto;
}
.loading-dots {
display: flex;
gap: 5px;
justify-content: center;
}
.dot {
width: 8px;
height: 8px;
background: var(--text);
border-radius: 50%;
animation: bounce 1s infinite;
}
.dot:nth-child(2) { animation-delay: 0.2s; }
.dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-5px); }
}
</style>
<script>
const API_KEY = 'sk-26397d260bac4e118cb911511f601f9e';
let conversationHistory = [];
async function sendMessage() {
const input = document.getElementById('userInput');
const message = input.value.trim();
if (!message) return;
// Add user message
addMessage(message, 'user');
input.value = '';
// Show loading animation
document.getElementById('loading').style.display = 'block';
try {
conversationHistory.push({ role: "user", content: message });
const response = await fetch('https://api.deepseek.com/chat/completions', {
method: 'POST',
headers: {
'Authorization': `Bearer ${API_KEY}`,
'Content-Type': 'application/json'
},
body: JSON.stringify({
model: "gpt-3.5-turbo",
messages: conversationHistory,
temperature: 0.7,
max_tokens: 1000
})
});
const data = await response.json();
const aiResponse = data.choices[0].message.content;
conversationHistory.push({ role: "assistant", content: aiResponse });
// Hide loading animation
document.getElementById('loading').style.display = 'none';
addMessage(aiResponse, 'ai');
} catch (error) {
document.getElementById('loading').style.display = 'none';
addMessage('آسف، حدث خطأ في معالجة طلبك.', 'ai');
}
}
function addMessage(message, type) {
const chatContainer = document.getElementById('chatContainer');
const messageDiv = document.createElement('div');
messageDiv.className = `message ${type}-message`;
messageDiv.textContent = message;
chatContainer.appendChild(messageDiv);
chatContainer.scrollTop = chatContainer.scrollHeight;
anime({
targets: messageDiv,
opacity: [0, 1],
translateY: [20, 0],
duration: 500,
easing: 'easeOutCubic'
});
}
function handleKeyPress(event) {
if (event.key === 'Enter') {
sendMessage();
}
}
function toggleTheme() {
const body = document.body;
const currentTheme = body.getAttribute('data-theme');
body.setAttribute('data-theme', currentTheme === 'dark' ? 'light' : 'dark');
}
// Initial animations
anime({
targets: ['.header', '.chat-container', '.input-container', '.footer'],
opacity: [0, 1],
translateY: [20, 0],
delay: anime.stagger(100),
duration: 1000,
easing: 'easeOutCubic'
});
</script>
حسنًا، سأقوم بتعديل الكود لاستخدام API Deepseek بدلاً من OpenAI. إليك الكود المحدث مع التغييرات اللازمة:
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI NOT - GPT BOT</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<style>
/* الأنماط تبقى كما هي */
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>AI NOT BOT</h1>
</div>
<div class="theme-toggle" onclick="toggleTheme()">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="5"/>
<path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>
</svg>
</div>
<div class="chat-container" id="chatContainer"></div>
<div class="loading" id="loading">
<div class="loading-dots">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
<div class="input-container">
<input type="text" id="userInput" placeholder="اسألني أي شيء ..." onkeypress="handleKeyPress(event)">
<button onclick="sendMessage()">إرسال</button>
</div>
<div class="footer">© 2024 NOT-GPT-BOT. مدعوم من NOT-GPT-BOT كل الحقوق محفوظة.لدى المطور عمار فطيح
</div>
</div>
<script>
const API_KEY = 'sk-26397d260bac4e118cb911511f601f9e';
let conversationHistory = [];
async function sendMessage() {
const input = document.getElementById('userInput');
const message = input.value.trim();
if (!message) return;
// Add user message
addMessage(message, 'user');
input.value = '';
// Show loading animation
document.getElementById('loading').style.display = 'block';
try {
conversationHistory.push({ role: "user", content: message });
const response = await fetch('https://api.deepseek.com/v1/chat/completions', {
method: 'POST',
headers: {
'Authorization': `Bearer ${API_KEY}`,
'Content-Type': 'application/json'
},
body: JSON.stringify({
model: "deepseek-chat",
messages: conversationHistory,
temperature: 0.7,
max_tokens: 1000
})
});
const data = await response.json();
const aiResponse = data.choices[0].message.content;
conversationHistory.push({ role: "assistant", content: aiResponse });
// Hide loading animation
document.getElementById('loading').style.display = 'none';
addMessage(aiResponse, 'ai');
} catch (error) {
console.error('Error:', error);
document.getElementById('loading').style.display = 'none';
addMessage('آسف، حدث خطأ في معالجة طلبك.', 'ai');
}
}
function addMessage(message, type) {
const chatContainer = document.getElementById('chatContainer');
const messageDiv = document.createElement('div');
messageDiv.className = `message ${type}-message`;
messageDiv.textContent = message;
chatContainer.appendChild(messageDiv);
chatContainer.scrollTop = chatContainer.scrollHeight;
anime({
targets: messageDiv,
opacity: [0, 1],
translateY: [20, 0],
duration: 500,
easing: 'easeOutCubic'
});
}
function handleKeyPress(event) {
if (event.key === 'Enter') {
sendMessage();
}
}
function toggleTheme() {
const body = document.body;
const currentTheme = body.getAttribute('data-theme');
body.setAttribute('data-theme', currentTheme === 'dark' ? 'light' : 'dark');
}
// Initial animations
anime({
targets: ['.header', '.chat-container', '.input-container', '.footer'],
opacity: [0, 1],
translateY: [20, 0],
delay: anime.stagger(100),
duration: 1000,
easing: 'easeOutCubic'
});
</script>
</body>
</html>التغييرات الرئيسية التي تم إجراؤها:
lang و dir في علامة <html> لدعم اللغة العربية والاتجاه من اليمين إلى اليسار.https://api.deepseek.com/v1/chat/completions."deepseek-chat".يرجى ملاحظة أن هذا الكود يفترض أن واجهة برمجة التطبيقات (API) الخاصة بـ Deepseek تعمل بشكل مشابه لـ OpenAI. إذا كانت هناك اختلافات في كيفية استدعاء API أو في شكل الاستجابة، فقد تحتاج إلى إجراء المزيد من التعديلات.
أيضًا، تأكد من أن استخدام API key في جانب العميل (في كود JavaScript) آمن لتطبيقك. عادةً، يُفضل التعامل مع مفاتيح API على الخادم لأسباب أمنية.
بالتأكيد! سأقوم بإنشاء نظام ذكاء اصطناعي كامل باسم "NOT GPT BOT" باستخدام API Deepseek مع تصميم أكثر جاذبية وإضافة اسم المطور. سأقوم بتحسين التصميم وإضافة بعض الميزات الإضافية لجعل التجربة أكثر تفاعلية.
هذا النظام يتضمن الميزات التالية:
لتشغيل هذا النظام:
npm install..env يحتوي على مفتاح API الصحيح.npm start.http://localhost:3000 (أو المنفذ الذي قمت بتعيينه).هذا النظام سيرد على جميع رسائل المستخدمين باستخدام الذكاء الاصطناعي من Deepseek. يمكنك تخصيص المزيد من الإعدادات أو إضافة ميزات إضافية حسب الحاجة.
You can send messages while the preview loads