Ищу веб интерфейс ChatGPT
- Автор темы Таблеткин
- Дата начала
Вот такую штуку он сам и написал
А вот готовый скрипт написал, подставить нужно только апи ключ
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>GPT Chat</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.chat {
width: 400px;
height: 600px;
border-radius: 10px;
background-color: #fff;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
display: flex;
flex-direction: column;
}
.chat-header {
padding: 20px;
background-color: #2f2f2f;
color: #fff;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.chat-header h1 {
font-size: 24px;
}
.chat-history {
flex: 1;
padding: 20px;
overflow-y: scroll;
}
.messages {
list-style-type: none;
}
.message {
margin-bottom: 10px;
}
.message .author {
font-weight: bold;
margin-right: 5px;
}
.message .text {
display: inline;
}
.chat-input {
padding: 20px;
background-color: #eee;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
display: flex;
}
.chat-input input[type="text"] {
flex: 1;
padding: 10px;
border: none;
border-radius: 5px;
font-size: 16px;
}
.chat-input button {
padding: 10px;
background-color: #2f2f2f;
color: #fff;
border: none;
border-radius: 5px;
margin-left: 10px;
font-size: 16px;
cursor: pointer;
}
.chat-input button:hover {
background-color: #555;
}
</style>
</head>
<body>
<div class="container">
<div class="chat">
<div class="chat-header">
<h1>GPT Chat</h1>
</div>
<div class="chat-history">
<ul class="messages"></ul>
</div>
<div class="chat-input">
<input type="text" placeholder="Type your message here...">
<button type="button">Send</button>
</div>
</div>
</div>
<script>
// Код для работы с чатом через API будет добавлен здесь
</script>
</body>
</html>А вот готовый скрипт написал, подставить нужно только апи ключ
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>GPT Chat</title>
<style>
.container {
max-width: 800px;
margin: 0 auto;
padding: 0 16px;
}
.chat {
display: flex;
flex-direction: column;
height: 600px;
margin-top: 32px;
border: 1px solid #ccc;
border-radius: 8px;
overflow: hidden;
}
.chat-header {
background-color: #f0f0f0;
padding: 8px;
text-align: center;
}
.chat-history {
flex-grow: 1;
overflow-y: scroll;
padding: 8px;
}
.chat-history .messages {
list-style: none;
margin: 0;
padding: 0;
}
.chat-history .message {
margin-bottom: 16px;
word-wrap: break-word;
}
.chat-history .message .sender {
font-weight: bold;
}
.chat-history .message.sent {
text-align: right;
}
.chat-history .message.received {
text-align: left;
}
.chat-input {
display: flex;
align-items: center;
padding: 8px;
}
.chat-input input {
flex-grow: 1;
padding: 8px;
border-radius: 8px;
border: none;
box-shadow: 0 0 4px #ccc;
margin-right: 8px;
}
.chat-input button {
background-color: #4caf50;
color: #fff;
border: none;
border-radius: 8px;
padding: 8px 16px;
cursor: pointer;
}
.chat-input button:hover {
background-color: #3e8e41;
}
</style>
</head>
<body>
<div class="container">
<div class="chat">
<div class="chat-header">
<h1>GPT Chat</h1>
</div>
<div class="chat-history">
<ul class="messages"></ul>
</div>
<div class="chat-input">
<input type="text" placeholder="Type your message here...">
<button type="button">Send</button>
</div>
</div>
</div>
<script>
const API_KEY = 'sk-JrfMbJTk3R25cK52hB74544bkFJTPyB8LsxzW70e9h6y1jO'; // замените на свой ключ API
const chatHistory = document.querySelector('.chat-history .messages');
const chatInput = document.querySelector('.chat-input input');
const chatSendButton = document.querySelector('.chat-input button');
function sendMessage() {
const message = chatInput.value.trim();
if (message) {
addMessage('You', message);
chatInput.value = '';
/*fetch('https://api.openai.com/v1/completions', {*/
fetch('https://api.openai.com/v1/chat/completions', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${API_KEY}`,
},
body: JSON.stringify({
'model': 'gpt-3.5-turbo',
'messages': [{'role': 'user', 'content': message}]
/*
'prompt': message,
'max_tokens': 100,
'temperature': 0.9,
'model': 'text-davinci-003'
*/
})
})
.then(response => response.json())
.then(data => {
const message = data.choices[0].text.trim();
addMessage('GPT', message);
})
.catch(error => {
console.error(error);
addMessage('Error', 'An error occurred while processing your request.');
});
}
}
function addMessage(sender, message) {
const messageClass = sender === 'You' ? 'sent' : 'received';
const messageElement = document.createElement('li');
messageElement.classList.add('message', messageClass);
messageElement.innerHTML = `
<div class="sender">${sender}:</div>
<div class="text">${message}</div>
`;
chatHistory.appendChild(messageElement);
chatHistory.scrollTop = chatHistory.scrollHeight;
}
chatInput.addEventListener('keydown', event => {
if (event.key === 'Enter') {
sendMessage();
}
});
chatSendButton.addEventListener('click', sendMessage);
</script>
</body>
</html>
Последнее редактирование:
California
Разрушитель (V)
Можете поделиться, как поднять подобное? Как бы код вижу, но как бы "просто" раздобыть индивидуальный токен без оплаты их тарифа (chatgpt-3)
Почти бесплатно
Как получить доступ к chatGPT в России
Всем привет! Перед началом статьи сразу скажу: САМЫЙ ВАЖНЫЙ ДИСКЛЕЙМЕР: естественно, покупая смс на чужой номер вы полностью компрометируете безопасность своего аккаунта. Мало ли кто его потом еще...
habr.com
Код от @*R* Рабочий
Воспользовался сервисом
Virtual Phone Numbers to Receive SMS Online | SMS-Activate
Receive SMS online with virtual numbers from SMS-Activate. Disposable numbers available for registration on over 600 services. Enjoy immediate SMS delivery at affordable prices.
sms-activate.org
Последнее редактирование:
Вот то, что вы ищете: https://github.com/mckaywrigley/chatbot-ui
Пользовался сам, не хуже чем на офф. сайте, а местами лучше.
На гитхабе есть и другие клиенты для chatgpt которые можно захостить у себя. https://github.com/search?q=chatgpt+language:TypeScript&type=repositories&l=TypeScript
Пользовался сам, не хуже чем на офф. сайте, а местами лучше.
На гитхабе есть и другие клиенты для chatgpt которые можно захостить у себя. https://github.com/search?q=chatgpt+language:TypeScript&type=repositories&l=TypeScript
California
Разрушитель (V)
В основном проблема - получить токен, впн с нидерландов (wireguard) - не авторизует, ругается.
Интересно посмотреть на решения, до 10$, например.
Как бы поднять на докере какой-то интерфейс это одно, но как получить свой токен максимально просто - не понятно)
Цель - поднять приватный сервис на команду в офисе до 10 человек (для seo мощный инструмент), чтобы купил разово токен, без абонентки.
Интересно посмотреть на решения, до 10$, например.
Как бы поднять на докере какой-то интерфейс это одно, но как получить свой токен максимально просто - не понятно)
Цель - поднять приватный сервис на команду в офисе до 10 человек (для seo мощный инструмент), чтобы купил разово токен, без абонентки.
Токен необходимо получать только 1 раз. Я использовал приватный прокси для доступа к сайту openai.
API сервер не заблокирован в России и прекрасно работает без VPN.
Если вы хотите селф-хостед решение у вас не должно быть проблем сконфигурировать докер компос. Если собираетесь использовать chatbot-ui вам понадобится только nodejs, ну и возможно traefik.
Сhatbot-ui не использует бд для хранения данных пользователя, все чаты хранятся локально.
California
Разрушитель (V)
Установил на дебиане, где уже была расшарена впнка wireguard, легла рядом спокойно.
Взял какой-то клон с гита на общем ключе, установилось только на python3.10, доставил pip, вписал хоста и поехало.
Нашел инфу с видоса.
Суть - выполняет работу, версия 4 пишет, что юзается 3 на самом деле))
Бесплатно, кто запросы перехватывает - пофиг вообще)
Не совсем то, но ставил cms для монетизации chat gpt, Quick Ai вроде, помогает писать мета теги, статьи посты и прочее, в т.ч. режим чата и поддержка gpt-4, ставил больше для себя) Могу поделиться.
И для wordpress есть модуль meow apps - ai engine pro, там и чат-бота на сайт можно настроить для клиентов вместо того же jivo, и контент генерировать, и просто чат с 4й версией запустить в админке. Тоже лежит где-то.
И для wordpress есть модуль meow apps - ai engine pro, там и чат-бота на сайт можно настроить для клиентов вместо того же jivo, и контент генерировать, и просто чат с 4й версией запустить в админке. Тоже лежит где-то.
California
Разрушитель (V)
выкладывай quick ai, посмотрю