Binkaddas
:: الأعضاء ::
- إنضم
- 24 مارس 2021
- المشاركات
- 180
- مستوى التفاعل
- 45
- النقاط
- 28
ارجوا نقل الموضوع للقسم المختص لانه موضوه نقاش حول ال Chat GPT
السلام عليكم
الكل الان يسمع عن Chat GPT طلبت من هذا المحرك العملاق الذي يستخدم خاصية AI الذكاء الاصطناعي بان يقوم بانشاء صندوق محادثه عن طريق الكود وكانت النتيجة رائعه ولكن ناقصه
1- الكود كالتالي
النتيجه
الموقع للتجربة
وهنا كود ثاني
وهنا النتيجة
السلام عليكم
الكل الان يسمع عن Chat GPT طلبت من هذا المحرك العملاق الذي يستخدم خاصية AI الذكاء الاصطناعي بان يقوم بانشاء صندوق محادثه عن طريق الكود وكانت النتيجة رائعه ولكن ناقصه
1- الكود كالتالي
كود:
<div class="chat-box">
<div class="chat-box-header">
<h3>Chat Box</h3>
</div>
<div class="chat-box-body">
<ul>
<!-- Messages will be added here -->
</ul>
</div>
<div class="chat-box-footer">
<form>
<input type="text" placeholder="Type your message here..."> <button type="submit">Send</button> </form> </div> </div>النتيجه
الموقع للتجربة
وهنا كود ثاني
كود:
<!DOCTYPE html>
<html>
<head>
<title>Chat Box</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
box-sizing: border-box;
}
.chat-box {
border: 1px solid #ccc;
height: 500px;
overflow-y: scroll;
margin-bottom: 10px;
padding: 10px;
box-sizing: border-box;
}
.chat-message {
margin-bottom: 10px;
}
.chat-message .username {
font-weight: bold;
margin-right: 10px;
}
.chat-message .timestamp {
font-size: 12px;
color: #888;
margin-left: 10px;
}
.input-box {
display: flex;
margin-bottom: 10px;
}
.input-box input {
flex: 1;
margin-right: 10px;
padding: 10px;
box-sizing: border-box;
font-size: 16px;
border: none;
border-radius: 5px;
box-shadow: 0 0 5px #ccc;
outline: none;
}
.input-box button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
box-shadow: 0 0 5px #ccc;
outline: none;
}
</style>
</head>
<body>
<div class="container">
<h1>Chat Box</h1>
<div class="chat-box" id="chat-box"></div>
<div class="input-box">
<input type="text" id="message-input" placeholder="Type your message...">
<button id="send-button">Send</button>
</div>
</div>
<script>
const chatBox = document.getElementById("chat-box");
const messageInput = document.getElementById("message-input");
const sendButton = document.getElementById("send-button");
let messages = [];
function addMessage(message) {
const div = document.createElement("div");
div.classList.add("chat-message");
div.innerHTML = `<span class="username">${message.username}:</span>${message.text}<span class="timestamp">${message.timestamp}</span>`;
chatBox.appendChild(div);
chatBox.scrollTop = chatBox.scrollHeight;
}
function displayMessages() {
chatBox.innerHTML = "";
for (const message of messages) {
addMessage(message);
}
}
sendButton.addEventListener("click", () => {
const text = messageInput.value.trim();
if (text === "") return;
const timestamp = new Date().toLocaleTimeString();
const message = {username: "User", text, timestamp};
messages.push(message);
addMessage(message);
messageInput.value = "";
messageInput.focus();
});
messageInput.addEventListener("keydown", (event) => {
if (event.key === "Enter") {
sendButton.click();
}
});
displayMessages();
</script>
</body>
</html>وهنا النتيجة
التعديل الأخير:
