psy_vk

Sleeping

App Files Files Community

DmitrMakeev commited on May 25, 2024

Commit

40b2e70

verified ·

1 Parent(s): 4a46bb7

Update settings.html

Browse files

Files changed (1) hide show

settings.html +73 -84

settings.html CHANGED Viewed

@@ -214,92 +214,81 @@ input[type="number"] {
 <br><br><br><br>
-<style>
-  body {
-    font-family: Arial, sans-serif;
-    padding: 20px;
-  }
-  #chat-container {
-    max-width: 600px;
-    margin: 0 auto;
-  }
-  #chat-output {
-    background: #f9f9f9;
-    border: 1px solid #ddd;
-    padding: 10px;
-    margin-bottom: 10px;
-    height: 200px;
-    overflow-y: scroll;
-  }
-  #user-input {
-    width: 70%;
-    padding: 10px;
-    margin-right: 10px;
-  }
-  button {
-    padding: 10px;
-    background: #007BFF;
-    color: white;
-    border: none;
-    cursor: pointer;
-  }
-  button:hover {
-    background: #0056b3;
-  }
-</style>
 </head>
 <body>
-<div id="chat-container">
-  <div id="chat-output"></div>
-  <input type="text" id="user-input" placeholder="Type your message here...">
-  <button onclick="sendMessage()">Send</button>
-</div>
-<script>
-const API_KEY = 'sk-d77e468c052044eeaefb0f816f3e0944'; // Замените на ваш ключ API
-const BASE_URL = 'https://api.openai.com/v1/chat/completions';
-function sendMessage() {
-  const userInput = document.getElementById('user-input').value;
-  const outputDiv = document.getElementById('chat-output');
-  // Очищаем поле ввода
-  document.getElementById('user-input').value = '';
-  // Добавляем сообщение пользователя в чат
-  outputDiv.innerHTML += `<p><strong>You:</strong> ${userInput}</p>`;
-  // Формируем запрос к API
-  const requestOptions = {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-      'Authorization': `Bearer ${API_KEY}`
-    },
-    body: JSON.stringify({
-      model: 'deepseek-chat',
-      messages: [
-        {"role": "system", "content": "You are a helpful assistant"},
-        {"role": "user", "content": userInput}
-      ],
-      stream: false
-    })
-  };
-  // Отправляем запрос к API
-  fetch(BASE_URL, requestOptions)
-    .then(response => response.json())
-    .then(data => {
-      // Обрабатываем ответ от API
-      const aiResponse = data.choices[0].message.content;
-      outputDiv.innerHTML += `<p><strong>AI:</strong> ${aiResponse}</p>`;
-    })
-    .catch(error => {
-      console.error('Error:', error);
-    });
-}
-</script>
 </div>

 <br><br><br><br>
+    <style>
+        #chat-box {
+            width: 300px;
+            height: 400px;
+            border: 1px solid #ccc;
+            overflow-y: scroll;
+            padding: 10px;
+        }
+        .message {
+            margin: 5px 0;
+        }
+        .message.user {
+            text-align: right;
+            color: blue;
+        }
+        .message.bot {
+            text-align: left;
+            color: green;
+        }
+    </style>
 </head>
 <body>
+    <div id="chat-box"></div>
+    <input type="text" id="user-input" placeholder="Type a message...">
+    <button id="send-btn">Send</button>
+    <script>
+        const chatBox = document.getElementById('chat-box');
+        const userInput = document.getElementById('user-input');
+        const sendBtn = document.getElementById('send-btn');
+        sendBtn.addEventListener('click', () => {
+            const userMessage = userInput.value;
+            if (!userMessage) return;
+            appendMessage('user', userMessage);
+            userInput.value = '';
+            const apiKey = "sk-d77e468c052044eeaefb0f816f3e0944";
+            const apiUrl = "https://api.deepseek.com/v1/chat/completions";
+            fetch(apiUrl, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': `Bearer ${apiKey}`
+                },
+                body: JSON.stringify({
+                    model: "deepseek-chat",
+                    messages: [
+                        { role: "system", content: "You are a helpful assistant" },
+                        { role: "user", content: userMessage }
+                    ],
+                    stream: false
+                })
+            })
+            .then(response => response.json())
+            .then(data => {
+                const botMessage = data.choices[0].message.content;
+                appendMessage('bot', botMessage);
+            })
+            .catch(error => {
+                console.error('Error:', error);
+                appendMessage('bot', 'Error: Could not retrieve response.');
+            });
+        });
+        function appendMessage(role, message) {
+            const messageDiv = document.createElement('div');
+            messageDiv.classList.add('message', role);
+            messageDiv.textContent = message;
+            chatBox.appendChild(messageDiv);
+            chatBox.scrollTop = chatBox.scrollHeight;
+        }
+    </script>
 </div>