diff --git a/public/chat.html b/public/chat.html new file mode 100644 index 000000000..c1f29aea4 --- /dev/null +++ b/public/chat.html @@ -0,0 +1,31 @@ + + + + Chat with Chat GPT + + + +
+

Chat with Chat GPT

+
+ + +
+ +
+
+ +
+
+ + + + +
+
+
+ + + + + diff --git a/public/css/main.css b/public/css/main.css new file mode 100644 index 000000000..f8eec9bc4 --- /dev/null +++ b/public/css/main.css @@ -0,0 +1,70 @@ + +/* Reset default margins and paddings */ +body, html, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset, input, textarea, blockquote { + margin: 0; + padding: 0; +} + +/* Set box-sizing to border-box */ +*, *::before, *::after { + box-sizing: border-box; +} + +/* Remove list styles */ +ul, ol { + list-style: none; +} + +/* Set a default font */ +body { + font-family: Arial, sans-serif; +} + +/* Set container styles */ +.container { + max-width: 600px; + margin: 0 auto; + padding: 20px; +} + +/* Styling for chat log */ +#chat-log { + border: 1px solid #ccc; + padding: 10px; + height: 300px; + overflow-y: auto; + margin-bottom: 10px; +} + +.message { + margin-bottom: 10px; + padding: 5px 10px; + border-radius: 5px; +} + +.user { + background-color: #f2f2f2; +} + +.chatbot { + background-color: #e3e4e6; +} + +/* Styling for user input */ +#user-input { + width: 80%; + padding: 5px; + margin-right: 10px; +} + +#send-button { + padding: 5px 10px; + background-color: #4CAF50; + color: white; + border: none; + cursor: pointer; +} + +#send-button:hover { + background-color: #45a049; +} diff --git a/public/css/styles.css b/public/css/styles.css new file mode 100644 index 000000000..3edef2583 --- /dev/null +++ b/public/css/styles.css @@ -0,0 +1,44 @@ +main { + background-color: #f2f2f2; + padding: 20px; + border-radius: 5px; +} + +.chat-container { + display: flex; + flex-direction: column; + height: 400px; + overflow-y: scroll; + padding: 10px; +} + +.chat-messages { + flex-grow: 1; + margin-bottom: 10px; +} + +form#chat-form { + display: flex; + align-items: center; +} + +#message-input { + flex-grow: 1; + padding: 8px; + border: none; + border-radius: 5px; + margin-right: 10px; +} + +button[type="submit"] { + padding: 8px 16px; + background-color: #007bff; + color: #fff; + border: none; + border-radius: 5px; + cursor: pointer; +} + +button[type="submit"]:hover { + background-color: #0056b3; +} diff --git a/public/gpt.html b/public/gpt.html new file mode 100644 index 000000000..6f4873506 --- /dev/null +++ b/public/gpt.html @@ -0,0 +1,20 @@ + + + + + Chat GPT + + + +
+
+ +
+ + +
+
+ + + + diff --git a/public/js/chat.js b/public/js/chat.js new file mode 100644 index 000000000..611254694 --- /dev/null +++ b/public/js/chat.js @@ -0,0 +1,64 @@ +// chat.js + +// Функция отправки сообщения на сервер Chat GPT и получения ответа +async function sendMessageToChatGPT(message) { + try { + const response = await fetch('127.0.0.1', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + 'Authorization': 'Bearer sk-76ADBqR4Eqsto6K8p8DNVGhlQi5BSQBGIxu8MKv2E6mla1KY' + }, + body: JSON.stringify({ + message: message + }) + }); + + if (!response.ok) { + throw new Error('Request failed'); + } + + const data = await response.json(); + return data.answer; + } catch (error) { + console.log('Error:', error.message); + return 'Sorry, I am unable to respond at the moment.'; + } +} + +function getChatGPTResponse(message) { + const url = '127.0.0.1'; // Replace with your server URL + + // остальной код +} + +// Обработчик отправки сообщения из формы чата +function handleChatFormSubmit(event) { + event.preventDefault(); + const messageInput = document.getElementById('message-input'); + const message = messageInput.value.trim(); + if (message !== '') { + appendMessageToChat('You: ' + message); + messageInput.value = ''; + sendMessageToChatGPT(message) + .then(response => { + appendMessageToChat('ChatBot: ' + response); + }) + .catch(error => { + console.log(error); + appendMessageToChat('Sorry, there was an error processing your request.'); + }); + } +} + +// Функция добавления сообщения в окно чата +function appendMessageToChat(message) { + const chatMessages = document.querySelector('.chat-messages'); + const messageElement = document.createElement('div'); + messageElement.textContent = message; + chatMessages.appendChild(messageElement); +} + +// Назначение обработчика события отправки формы чата +const chatForm = document.getElementById('chat-form'); +chatForm.addEventListener('submit', handleChatFormSubmit); diff --git a/public/js/chatGPT.js b/public/js/chatGPT.js new file mode 100644 index 000000000..9547dbc2d --- /dev/null +++ b/public/js/chatGPT.js @@ -0,0 +1,63 @@ + +// chatGPT.js + +// API-ключ от Chat GPT +const API_KEY = 'sk-76ADBqR4Eqsto6K8p8DNVGhlQi5BSQBGIxu8MKv2E6mla1KY'; + +// Функция для отправки сообщения на сервер Chat GPT и получения ответа +async function sendMessageToChatGPT(message) { + try { + const response = await fetch('https://chatgpt.cyclic.app', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + 'Authorization': 'Bearer sk-76ADBqR4Eqsto6K8p8DNVGhlQi5BSQBGIxu8MKv2E6mla1KY' + }, + body: JSON.stringify({ + message: message + }) + }); + + if (!response.ok) { + throw new Error('Request failed'); + } + + const data = await response.json(); + return data.answer; + } catch (error) { + console.log('Error:', error.message); + return 'Sorry, I am unable to respond at the moment.'; + } +} + +// Функция для отображения полученного ответа от Chat GPT в чате +function displayChatMessage(message) { + const chatMessages = document.querySelector('.chat-messages'); + const messageElement = document.createElement('div'); + messageElement.classList.add('message'); + messageElement.innerText = message; + chatMessages.appendChild(messageElement); +} + +// Обработчик отправки формы +async function handleSubmit(event) { + event.preventDefault(); // Предотвращаем отправку формы + + const messageInput = document.getElementById('message-input'); + const message = messageInput.value.trim(); + + if (message !== '') { + // Отправляем сообщение на Chat GPT + const answer = await sendMessageToChatGPT(message); + + // Отображаем полученный ответ в чате + displayChatMessage(answer); + + // Очищаем поле ввода + messageInput.value = ''; + } +} + +// Привязываем обработчик отправки формы к форме чата +const chatForm = document.getElementById('chat-form'); +chatForm.addEventListener('submit', handleSubmit); diff --git a/public/js/client.js b/public/js/client.js new file mode 100644 index 000000000..e18cdfca7 --- /dev/null +++ b/public/js/client.js @@ -0,0 +1,56 @@ +const chatLog = document.getElementById('chat-log'); +const userInput = document.getElementById('user-input'); +const sendButton = document.getElementById('send-button'); +import axios from 'axios'; + +sendButton.addEventListener('click', sendMessage); + +function sendMessage() { + const message = userInput.value.trim(); + + if (message !== '') { + appendMessage('user', message); + userInput.value = ''; + + getChatGPTResponse(message) + .then(reply => { + appendMessage('chatbot', reply); + }) + .catch(error => { + console.error('Error:', error); + appendMessage('chatbot', 'An error occurred while processing the request.'); + }); + } +} + +function appendMessage(sender, content) { + const messageElement = document.createElement('div'); + messageElement.className = `message ${sender}`; + messageElement.textContent = content; + + chatLog.appendChild(messageElement); + chatLog.scrollTop = chatLog.scrollHeight; +} + + +function getChatGPTResponse(message) { + const url = 'https://chatgpt.cyclic.app'; // Replace with your server URL + const apiKey = 'sk-76ADBqR4Eqsto6K8p8DNVGhlQi5BSQBGIxu8MKv2E6mla1KY'; // Replace with your API key + + return new Promise((resolve, reject) => { + axios.get(url, { + params: { + message: message + }, + headers: { + 'Authorization': 'Bearer sk-76ADBqR4Eqsto6K8p8DNVGhlQi5BSQBGIxu8MKv2E6mla1KY' + } + }) + .then(response => { + resolve(response.data.reply); + }) + .catch(error => { + reject(error); + }); + }); +} diff --git a/public/js/getModels.js b/public/js/getModels.js new file mode 100644 index 000000000..1dec29274 --- /dev/null +++ b/public/js/getModels.js @@ -0,0 +1,8 @@ +import requests +url = "https://api.theb.ai/v1/models" +# url = "https://api.baizhi.ai/v1/models" +headers = { + 'Authorization': 'Bearer sk-76ADBqR4Eqsto6K8p8DNVGhlQi5BSQBGIxu8MKv2E6mla1KY' +} +response = requests.request("GET", url, headers=headers) +print(response.json()) diff --git a/public/js/get_response.js b/public/js/get_response.js new file mode 100644 index 000000000..0d4b09081 --- /dev/null +++ b/public/js/get_response.js @@ -0,0 +1,107 @@ +import axios from 'axios'; +import { OpenAI } from 'openai'; + +const openai = new OpenAI({ + apiKey: process.env.TheB_AI_API_KEY, + baseURL: 'https://api.theb.ai/v1' +}); + +const data = JSON.stringify({ + "model": "claude-2", + "messages": [ + { + "role": "user", + "content": "How are you?" + } + ], + "stream": false, + "model_params": { + "temperature": 1 + } +}); + +const config = { + method: 'post', + maxBodyLength: Infinity, + baseURL: 'https://api.theb.ai/v1', + url: '/chat/completions', + headers: { + 'Authorization': 'Bearer sk-76ADBqR4Eqsto6K8p8DNVGhlQi5BSQBGIxu8MKv2E6mla1KY', + 'Content-Type': 'application/json' + }, + data: data +}; + +axios.request(config) + .then((response) => { + console.log(JSON.stringify(response.data)); + }) + .catch((error) => { + console.log(error); + }); + +async function fetchChatCompletion() { + const result = await openai.chat.completions.create({ + model: 'claude-instant-1', + stream: false, + model_params: { + temperature: 0.8 + }, + messages: [{ + role: 'user', + content: 'Say hello!' + }], + }); + console.log(result); +} + +fetchChatCompletion(); + +// Отправка запроса к API +const response = await axios.post('https://api.example.com/chat/completions', payload, headers); + +// Пример обработки ответа +const completion = response.data.choices[0]; // Получение первого завершения чата +const role = completion.message.role; // Получение роли в сообщении (assistant, user и т.д.) +const content = completion.message.content; // Получение содержимого сообщения +const finishReason = completion.finish_reason; // Получение причины завершения чата + +// Дальнейшая обработка ответа, например, вывод в консоль +console.log(`Role: ${role}`); +console.log(`Content: ${content}`); +console.log(`Finish Reason: ${finishReason}`); + +const axios = require('axios'); +let data = JSON.stringify({ + "model": "claude-2", + "messages": [ + { + "role": "user", + "content": "How are you?" + } + ], + "stream": true, + "model_params": { + "temperature": 1 + } +}); + +let config = { + method: 'post', + maxBodyLength: Infinity, + url: 'https://api.theb.ai/v1/chat/completions', + // url: 'https://api.baizhi.ai/v1/chat/completions', + headers: { + 'Authorization': 'Bearer sk-76ADBqR4Eqsto6K8p8DNVGhlQi5BSQBGIxu8MKv2E6mla1KY', + 'Content-Type': 'application/json' + }, + data : data +}; + +axios.request(config) +.then((response) => { + console.log(JSON.stringify(response.data)); +}) +.catch((error) => { + console.log(error); +}); diff --git a/public/js/main.js b/public/js/main.js new file mode 100644 index 000000000..afebbcd47 --- /dev/null +++ b/public/js/main.js @@ -0,0 +1,26 @@ + +// Common JavaScript code for both index.html and chat.html + +function getChatGPTResponse(message) { + const url = 'https://chatgpt.cyclic.app'; // Replace with your server URL + const apiKey = 'sk-76ADBqR4Eqsto6K8p8DNVGhlQi5BSQBGIxu8MKv2E6mla1KY'; // Replace with your API key + + return new Promise((resolve, reject) => { + axios.get(url, { + params: { + message: message + }, + headers: { + 'Authorization': 'Bearer sk-76ADBqR4Eqsto6K8p8DNVGhlQi5BSQBGIxu8MKv2E6mla1KY' + } + }) + .then(response => { + resolve(response.data.reply); + }) + .catch(error => { + reject(error); + }); + }); +} + +// Other shared functions or code can be added here diff --git a/public/js/server.js b/public/js/server.js new file mode 100644 index 000000000..a2aa4a129 --- /dev/null +++ b/public/js/server.js @@ -0,0 +1,36 @@ +// server.js +const express = require('express'); +const { OpenAI } = require("openai"); + +const app = express(); +const port = 3000; + +app.get('/fetchChatCompletion', async (req, res) => { + const openai = new OpenAI({ + apiKey: process.env.TheB_AI_API_KEY, + baseURL: 'https://api.theb.ai/v1' + }); + + try { + const result = await openai.chat.completions.create({ + model: 'gpt-3.5-turbo', + stream: true, + model_params: { + temperature: 0.8 + }, + messages: [{ + role: 'user', + content: 'Say hello!' + }], + }); + console.log(result); + res.send(result); + } catch (error) { + console.error('Error:', error); + res.status(500).json({ error: 'An error occurred while processing the request.' }); + } +}); + +app.listen(port, () => { + console.log(`Server listening on port ${port}`); +}); diff --git a/public/script.js b/public/script.js new file mode 100644 index 000000000..eae912413 --- /dev/null +++ b/public/script.js @@ -0,0 +1,47 @@ +const chatForm = document.getElementById('chatForm'); +const userMessageInput = document.getElementById('userMessage'); +const chatLog = document.getElementById('chatLog'); + +chatForm.addEventListener('submit', (event) => { + event.preventDefault(); + + const userMessage = userMessageInput.value; + + const requestBody = { + "model": "gpt-3.5-turbo", + "messages": [ + { + "role": "user", + "content": userMessage + } + ], + "stream": false + }; + + const requestOptions = { + method: 'POST', + headers: { + 'Authorization': 'Bearer sk-76ADBqR4Eqsto6K8p8DNVGhlQi5BSQBGIxu8MKv2E6mla1KY', // Замените $API_KEY на ваш ключ авторизации + 'Content-Type': 'application/json' + }, + body: JSON.stringify(requestBody) + }; + + fetch('https://api.theb.ai/v1/chat/completions', requestOptions) + .then(response => response.json()) + .then(data => { + const assistantReply = data.choices[0].message.content; + displayMessage('assistant', assistantReply); + }) + .catch(error => { + console.error('Error:', error); + }); + + userMessageInput.value = ''; +}); + +function displayMessage(role, content) { + const messageElement = document.createElement('p'); + messageElement.innerHTML = `${role}: ${content}`; + chatLog.appendChild(messageElement); +} diff --git a/public/server.js b/public/server.js new file mode 100644 index 000000000..8faa06eea --- /dev/null +++ b/public/server.js @@ -0,0 +1,7 @@ +const httpServer = require('http-server'); +const server = httpServer.createServer(); +const port = 3000; // Укажите порт по вашему усмотрению + +server.listen(port, () => { + console.log(`Server running at http://localhost:${port}`); +}); diff --git a/public/styles.css b/public/styles.css new file mode 100644 index 000000000..ec877e63a --- /dev/null +++ b/public/styles.css @@ -0,0 +1,50 @@ +/* Стили для контейнера чата */ +#chatContainer { + width: 400px; + margin: 0 auto; + padding: 20px; + background-color: #f0f0f0; + border-radius: 10px; +} + +/* Стили для сообщений чата */ +#chatLog { + margin-bottom: 10px; +} + +/* Стили для формы ввода сообщения */ +#chatForm { + display: flex; + margin-bottom: 10px; +} + +#userMessage { + flex: 1; + padding: 10px; + border-radius: 5px; + border: none; +} + +#sendMessageButton { + margin-left: 10px; + padding: 10px; + border-radius: 5px; + background-color: #4CAF50; + color: white; + border: none; + cursor: pointer; +} + +/* Стили для сообщений от пользователя */ +p.userMessage { + background-color: #4CAF50; + color: white; + padding: 8px 12px; + border-radius: 5px; + display: inline-block; +} + +/* Стили для сообщений от ассистента */ +p.assistantMessage { + color: #1E90FF; +}