Раскрытие возможностей ChatGPT: подробный пример JavaScript
В сфере искусственного интеллекта ChatGPT выделяется как мощная языковая модель, разработанная OpenAI. Использование возможностей ChatGPT в среде JavaScript открывает захватывающие возможности для создания интерактивных и интеллектуальных приложений. В этом блоге представлено подробное руководство и пример интеграции ChatGPT с JavaScript, демонстрирующий, как разработчики могут использовать потенциал диалогового ИИ в своих веб-проектах.
Понимание ChatGPT
Прежде чем углубиться в пример JavaScript, давайте кратко разберемся, что делает ChatGPT новаторской языковой моделью.
- Архитектура GPT: ChatGPT построен на архитектуре GPT (генеративный предварительно обученный преобразователь), современной модели обработки естественного языка. Он предварительно обучен работе с разнообразным интернет-текстом, что позволяет генерировать связный и контекстуально релевантный текст.
- Разговорный искусственный интеллект: в отличие от традиционных чат-ботов, ChatGPT отличается интересными и динамичными разговорами. Он может понимать контекст, генерировать человеческие ответы и адаптироваться к различным входным данным, что делает его идеальным инструментом для взаимодействия на естественном языке.
Настройка среды
Прежде чем интегрировать ChatGPT с JavaScript, убедитесь, что у вас установлены необходимые инструменты и зависимости.
- Установка Node.js: если у вас не установлен Node.js, загрузите и установите его с официального сайта (https://nodejs.org/).
- Редактор кода: выберите редактор кода по своему усмотрению, например Visual Studio Code или Atom.
- Ключ API OpenAI: получите ключ API от OpenAI для доступа к API ChatGPT. Вы можете подписаться на доступ на платформе OpenAI.
Установка зависимостей
Для взаимодействия с API ChatGPT в JavaScript вам понадобится клиентская библиотека HTTP. В этом примере мы будем использовать Axios. Установите его с помощью следующей команды в каталоге вашего проекта:
npm install axiosСоздание JavaScript-клиента ChatGPT:
Теперь давайте создадим простой файл JavaScript, который будет работать как клиент для ChatGPT. В этом примере предполагается, что у вас есть готовый ключ API OpenAI.
// Importing the Axios library for HTTP requests
const axios = require('axios');
// Define the OpenAI API endpoint
const apiEndpoint = 'https://api.openai.com/v1/chat/completions';
// Set your OpenAI API key
const apiKey = 'YOUR_API_KEY';
// Function to interact with ChatGPT
async function interactWithChatGPT(prompt) {
try {
// Making a POST request to the ChatGPT API
const response = await axios.post(apiEndpoint, {
model: 'gpt-3.5-turbo',
messages: [
{ role: 'system', content: 'You are a helpful assistant.' },
{ role: 'user', content: prompt },
],
}, {
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${apiKey}`,
},
});
// Extracting and returning the model's response
return response.data.choices[0].message.content;
} catch (error) {
console.error('Error interacting with ChatGPT:', error.response ? error.response.data : error.message);
return 'An error occurred while processing your request.';
}
}
// Example prompt
const userPrompt = 'Tell me a joke.';
// Interact with ChatGPT and log the response
interactWithChatGPT(userPrompt).then(response => {
console.log('ChatGPT Response:', response);
}).catch(error => {
console.error('Error:', error);
});В этом примере JavaScript настраивается базовый клиент для взаимодействия с ChatGPT. Замените YOUR_API_KEY своим фактическим ключом API OpenAI. Функция InteractWithChatGPT отправляет приглашение пользователя в ChatGPT и регистрирует ответ модели.
Настройка и расширение примера
Теперь, когда у вас есть базовый клиент JavaScript ChatGPT, вы можете настроить и расширить его для различных вариантов использования.
- Цикл взаимодействия с пользователем: создайте цикл, который позволит пользователям вводить несколько запросов и получать непрерывные ответы от ChatGPT.
- Интеграция с внешним интерфейсом: расширьте пример для работы с интерфейсными платформами, такими как React или Vue.js. Это позволяет создавать интерактивные и динамические пользовательские интерфейсы, использующие ChatGPT.
- Обработка ошибок: улучшите обработку ошибок, чтобы корректно решать такие проблемы, как ограничения скорости API, сетевые ошибки или неожиданные ответы.
- Управление контекстом: поэкспериментируйте с поддержанием контекста в разговорах, отслеживая предыдущие сообщения и ответы.
Реализация цикла взаимодействия с пользователем:
Чтобы реализовать цикл взаимодействия с пользователем, измените пример следующим образом:
const readline = require('readline');
const rl = readline.createInterface({
input: process.stdin,
output: process.stdout
});
async function startChat() {
while (true) {
// Get user input
const userPrompt = await getUserInput('You: ');
// Exit the loop if the user types 'exit'
if (userPrompt.toLowerCase() === 'exit') {
console.log('Exiting ChatGPT.');
break;
}
// Interact with ChatGPT and log the response
const chatGPTResponse = await interactWithChatGPT(userPrompt);
console.log(`ChatGPT: ${chatGPTResponse}`);
}
rl.close();
}
function getUserInput(prompt) {
return new Promise(resolve => {
rl.question(prompt, answer => {
resolve(answer);
});
});
}
// Start the chat loop
startChat();В этой модифицированной версии представлен цикл взаимодействия с пользователем, который постоянно запрашивает у пользователя ввод данных. Цикл можно завершить, набрав exit. Функция getUserInput — это подход, основанный на обещаниях, для асинхронной обработки пользовательского ввода.
Интеграция с внешним интерфейсом (необязательно)
Если вы хотите интегрировать функциональность ChatGPT с внешним приложением, рассмотрите возможность использования веб-фреймворка, такого как Express.js, для серверной части и библиотеки внешнего интерфейса, такой как React или Vue.js.
Настройка Express.js:
- Установите
Express.js:
npm install express- Создайте файл
app.jsдля вашего приложения Express:
const express = require('express');
const app = express();
const port = 3000;
// Serve static files from the 'public' directory
app.use(express.static('public'));
app.listen(port, () => {
console.log(`Server is running at http://localhost:${port}`);
});- Создайте файл
public/index.htmlдля вашего интерфейса.
Настройка внешнего интерфейса:
- Установите фронтенд-библиотеку, например React:
npx create-react-app my-chat-app
cd my-chat-app- Замените содержимое
src/App.jsкомпонентами React для чата.
Конечная точка API:
- Измените файл
app.jsExpress.js для обработки запросов API:
// Import the necessary modules
const express = require('express');
const bodyParser = require('body-parser');
const axios = require('axios');
const app = express();
const port = 3000;
// Middleware to parse JSON requests
app.use(bodyParser.json());
// Define the ChatGPT API endpoint and API key
const apiEndpoint = 'https://api.openai.com/v1/chat/completions';
const apiKey = 'YOUR_API_KEY';
// API endpoint for interacting with ChatGPT
app.post('/chat', async (req, res) => {
try {
// Make a POST request to the ChatGPT API
const response = await axios.post(apiEndpoint, {
model: 'gpt-3.5-turbo',
messages: [
{ role: 'system', content: 'You are a helpful assistant.' },
{ role: 'user', content: req.body.prompt },
],
}, {
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${apiKey}`,
},
});
// Extract and send the model's response
res.json({ response: response.data.choices[0].message.content });
} catch (error) {
console.error('Error interacting with ChatGPT:', error.response ? error.response.data : error.message);
res.status(500).json({ error: 'An error occurred while processing your request.' });
}
});
// Start the server
app.listen(port, () => {
console.log(`Server is running at http://localhost:${port}`);
});- Обновите компоненты React, чтобы отправлять запросы API к серверной части Express.js.
Реализация внешнего интерфейса:
Обновите свои компоненты React, чтобы они могли выполнять запросы к API. Например:
import React, { useState } from 'react';
import axios from 'axios';
const App = () => {
const [userInput, setUserInput] = useState('');
const [chatHistory, setChatHistory] = useState([]);
const handleUserInput = async () => {
// Make an API request to the backend
try {
const response = await axios.post('http://localhost:3000/chat', { prompt: userInput });
const chatResponse = response.data.response;
// Update the chat history
setChatHistory(prevHistory => [...prevHistory, { role: 'user', content: userInput }, { role: 'assistant', content: chatResponse }]);
setUserInput('');
} catch (error) {
console.error('Error:', error.response ? error.response.data : error.message);
}
};
return (
<div>
<div>
{chatHistory.map((message, index) => (
<div key={index} className={message.role}>
{message.content}
</div>
))}
</div>
<div>
<input type="text" value={userInput} onChange={(e) => setUserInput(e.target.value)} />
<button onClick={handleUserInput}>Send</button>
</div>
</div>
);
};
export default App;- Этот компонент React сохраняет историю чата и отправляет пользовательский ввод во внутренний API. Ответы из серверной части добавляются в историю чата для отображения.
Интегрируя ChatGPT с интерфейсной платформой, такой как React, и внутренней платформой, такой как Express.js, вы создаете динамичное и интерактивное приложение для чата, которое использует возможности диалогового искусственного интеллекта.
Заключение
В заключение отметим, что интеграция ChatGPT с JavaScript открывает мир возможностей для создания интеллектуальных и интерактивных приложений. Это подробное руководство и пример предоставляют разработчикам основу для начала работы с ChatGPT: от настройки среды до создания базового клиента JavaScript и расширения его для более сложных случаев использования. Независимо от того, разрабатываете ли вы простого чат-бота или интегрируете ChatGPT в сложное веб-приложение.
