Вот краткий обзор того, что создал ChatGPT.
В настоящее время доказано, что ChatGPT эффективен при решении всех видов задач, от математических, связанных с вопросами, до фактического написания кода.
В этой статье я намерен показать вам, как вы можете создать живую информационную панель для отображения некоторых данных шаблона (относительно производительности продукта данной компании), даже если вы не знаете, как программировать!
Чтобы быть максимально достоверным и показать, что вам даже не нужно знать, как программировать, чтобы создать простую программу, я буду использовать JavaScript, язык, с которым я никогда не работал. с.
Итак, первый шаг — попросить ChatGPT сгенерировать для нас начальный шаблон, чтобы у нас была отправная точка. Вместо того, чтобы показывать всю беседу (это сделало бы эту статью слишком длинной), я поделюсь здесьссылкой на беседу, чтобы вы могли следить за ней. Вы также можете просмотреть проект полностью здесь.
Итак, первый ответ, который мы получаем, это следующий код:
<!DOCTYPE html>
<html>
<head>
<title>Product Usage Dashboard</title>
<style>
/* Add your custom CSS styles here */
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<div class="container">
<h1>Product Usage Dashboard</h1>
<div id="dataContainer"></div>
</div>
<script>
// Fetch data from your server or an API
function fetchData() {
// Simulating data retrieval (replace with your own logic)
const data = {
users: 1500,
activeUsers: 1000,
revenue: 50000
};
// Render the data on the dashboard
renderData(data);
}
// Update the dashboard with the retrieved data
function renderData(data) {
const dataContainer = document.getElementById('dataContainer');
// Create HTML elements to display the data
const usersElement = document.createElement('p');
usersElement.textContent = `Total Users: ${data.users}`;
const activeUsersElement = document.createElement('p');
activeUsersElement.textContent = `Active Users: ${data.activeUsers}`;
const revenueElement = document.createElement('p');
revenueElement.textContent = `Revenue: $${data.revenue}`;
// Clear the data container before appending new data
dataContainer.innerHTML = '';
// Append the data elements to the container
dataContainer.appendChild(usersElement);
dataContainer.appendChild(activeUsersElement);
dataContainer.appendChild(revenueElement);
}
// Call the fetchData function to initiate the data retrieval and rendering
fetchData();
// Refresh the data every few seconds (adjust the interval as per your needs)
setInterval(fetchData, 5000);
</script>
</body>
</html>
Этот код подтвердился, когда я попросил ChatGPT предоставить мне шаблон панели инструментов. В нем также подробно описаны некоторые инструкции о том, что необходимо сделать (точнее, что ChatGPT придется сделать позже) и о том, как использовать этот скрипт.
Чтобы проверить, работает ли это, скопируйте этот код, сохраните его в файле .html (например, dashboard.html) и откройте его в браузере. Вы должны увидеть что-то вроде этого
На данный момент это выглядит очень просто, но мы его улучшим (я имею в виду ChatGPT). Теперь первое, что я хочу улучшить, — это данные, которые мы используем. Прямо сейчас данные поступают из функции fetchData(data), которая просто возвращает некоторые константы. В идеале мы хотели бы, чтобы это приложение подключалось к существующей базе данных, но здесь это не рассматривается.
Чтобы попытаться воспроизвести это, мы можем использовать лист Excel с фиктивными данными и попросить ChatGPT подготовить его для нас. Итак, я попросил ChatGPT показать мне, как загружать данные из файла Excel с именем «data.xlsx» (файл находится в репозитории, которым я поделился выше), а также указать, как этот файл организован. Это подсказка, которую я дал:
Мои данные хранятся в файле Excel, который хранится в том же каталоге, с именем «data.xlsx». Первая строка файла содержит различные столбцы: «Имя клиента», «Дата регистрации», «#Продукты», «Удовлетворение» соответственно. В следующих строках каждая строка представляет собой запись для другого клиента, где поле «Имя клиента» представляет собой строку, «Дата регистрации» — дату, «#Продукты» — целое число и «Удовлетворение» — целое число. Можете ли вы адаптировать файл, чтобы показать всю эту информацию?
А это обновленный код:
<!DOCTYPE html>
<html>
<head>
<title>Product Usage Dashboard</title>
<style>
/* Add your custom CSS styles here */
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<div class="container">
<h1>Product Usage Dashboard</h1>
<div id="dataContainer"></div>
</div>
<script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>
<script>
function fetchData() {
const dataContainer = document.getElementById('dataContainer');
// Load the Excel file
const file = 'data.xlsx';
const reader = new FileReader();
reader.onload = function (e) {
const data = new Uint8Array(e.target.result);
const workbook = XLSX.read(data, { type: 'array' });
// Assuming the data is in the first sheet (modify if necessary)
const sheetName = workbook.SheetNames[0];
const worksheet = workbook.Sheets[sheetName];
// Convert the worksheet to JSON
const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
// Get the header row (first row)
const headerRow = jsonData[0];
// Create an array to store the client data
const clientData = [];
// Iterate over the remaining rows (client data)
for (let i = 1; i < jsonData.length; i++) {
const row = jsonData[i];
// Create an object to store the client information
const client = {
'Client Name': row[0],
'Registration Date': new Date(row[1]),
'#Products': row[2],
'Satisfaction': row[3]
};
// Push the client data to the array
clientData.push(client);
}
// Render the client data on the dashboard
renderData(clientData, dataContainer);
};
reader.readAsArrayBuffer(file);
}
// Update the dashboard with the retrieved data
function renderData(data, container) {
// Clear the data container before appending new data
container.innerHTML = '';
// Create HTML elements to display the data
for (const client of data) {
const clientElement = document.createElement('div');
clientElement.classList.add('client');
const nameElement = document.createElement('p');
nameElement.textContent = `Client Name: ${client['Client Name']}`;
const regDateElement = document.createElement('p');
regDateElement.textContent = `Registration Date: ${client['Registration Date'].toLocaleDateString()}`;
const productsElement = document.createElement('p');
productsElement.textContent = `#Products: ${client['#Products']}`;
const satisfactionElement = document.createElement('p');
satisfactionElement.textContent = `Satisfaction: ${client['Satisfaction']}`;
// Append the data elements to the client container
clientElement.appendChild(nameElement);
clientElement.appendChild(regDateElement);
clientElement.appendChild(productsElement);
clientElement.appendChild(satisfactionElement);
// Append the client container to the main data container
container.appendChild(clientElement);
}
}
// Call the fetchData function to initiate the data retrieval and rendering
fetchData();
// Refresh the data every few seconds (adjust the interval as per your needs)
setInterval(fetchData, 5000);
</script>
</body>
</html>
Если вы посмотрите на код, вы увидите, где он принимает структуру файла Excel, но нас это не интересует, нам не нужен код, пока он работает.
Однако, если вы проверите это (после создания файла Excel и заполнения его некоторыми фиктивными данными или с помощью предоставленных мной), вы, вероятно, ничего не увидите, поэтому что-то должно быть не так. Теперь, поскольку мы запускаем это в браузере, консоли действительно нет, мы можем видеть ошибки, или, по крайней мере, эта консоль не видна. Чтобы увидеть ошибки, вы можете щелкнуть правой кнопкой мыши в любом месте страницы и выбрать «Проверить элемент». Это должно открыть вкладку справа, и там у вас есть еще одна вкладка вверху под названием «Консоль», нажмите на нее. Вы должны получить что-то вроде этого
Как видите, у нас есть ошибка на панели инструментов. Теперь обычный способ решения ошибок программирования — посмотреть на код, попытаться найти причину проблемы и исправить ее. Однако мы не умеем кодировать! Поэтому мы просим ChatGPT решить эту проблему за нас! Давая ему эту подсказку
Когда я запускаю этот код, я получаю следующую ошибку
Uncaught TypeError: не удалось выполнить «readAsArrayBuffer» для «FileReader»: параметр 1 не имеет типа «Blob». в fetchData (dashboard.html:68:14) в dashboard.html:105:5
Как мне это решить?
ChatGPT объяснит, почему возникает эта ошибка, и перепишет код, чтобы исправить эту проблему. Удивительный!
В этом случае нужно было обновить только функцию fetchData() до следующего:
function fetchData() {
const dataContainer = document.getElementById('dataContainer');
// Load the Excel file
const file = 'data.xlsx';
// Create a new XMLHttpRequest to fetch the file
const xhr = new XMLHttpRequest();
xhr.open('GET', file, true);
xhr.responseType = 'arraybuffer';
xhr.onload = function (e) {
const data = new Uint8Array(xhr.response);
const workbook = XLSX.read(data, { type: 'array' });
// Assuming the data is in the first sheet (modify if necessary)
const sheetName = workbook.SheetNames[0];
const worksheet = workbook.Sheets[sheetName];
// Convert the worksheet to JSON
const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
// Get the header row (first row)
const headerRow = jsonData[0];
// Create an array to store the client data
const clientData = [];
// Iterate over the remaining rows (client data)
for (let i = 1; i < jsonData.length; i++) {
const row = jsonData[i];
// Create an object to store the client information
const client = {
'Client Name': row[0],
'Registration Date': new Date(row[1]),
'#Products': row[2],
'Satisfaction': row[3]
};
// Push the client data to the array
clientData.push(client);
}
// Render the client data on the dashboard
renderData(clientData, dataContainer);
};
xhr.send();
}
Однако, если мы запустим этот код, мы все равно получим то же представление. Если мы снова откроем консоль, мы увидим, что у нас все еще есть ошибка, но уже другая. Это связано с политикой CORS. Короче говоря, проблема в том, что мы не можем запустить этот файл из нашей локальной файловой системы, нам нужно настроить локальный веб-сервер, чтобы решить эту проблему.
Примечание. Если вы прочитаете всю беседу (ссылка здесь), вы заметите, что ChatGPT уже указывал, что это может быть проблемой, еще до того, как она появилась!
Поэтому мы еще раз просим ChatGPT исправить эту проблему, и предлагаемое ею решение заключается в настройке локального веб-сервера с использованием Node.js. Ну, это звучит немного сложно для людей без опыта, но, к счастью, ChatGPT предоставил нам простые шаги:
- Установите Node.js на свой компьютер, скачав его с официального сайта: https://nodejs.org/
- Создайте новый каталог для вашего проекта (например,
dashboard). - Откройте терминал или командную строку и перейдите в каталог проекта.
- Выполните следующую команду, чтобы инициализировать новый проект Node.js и создать файл
package.json:npm init -y - Установите пакет
http-server, выполнив следующую команду:npm install http-server - Переместите файл
dashboard.htmlи файлdata.xlsxв каталог проекта. - Запустите локальный веб-сервер, выполнив следующую команду:
npx http-server - Откройте веб-браузер и получите доступ к панели инструментов, используя предоставленный URL-адрес (например,
http://localhost:8080/dashboard.html).
Если вы выполните эти шаги и откроете панель инструментов по указанному выше URL-адресу (имейте в виду, что имя html-файла должно совпадать), вы должны увидеть появление некоторых данных!
(Я использую фиктивные данные, представленные здесь). Если вам интересно, как выглядит папка моего проекта
Этот шаг включал в себя более «сложные» шаги, по крайней мере, для тех, кто плохо знаком с программированием, но если вы столкнулись с какими-либо проблемами, я уверен, что ChatGPT сможет вам помочь.
Следующее, что мы замечаем, это то, что информация сейчас совсем не читаема. Мы хотим видеть не каждого отдельного клиента, а сводку наших данных. Чтобы сделать эту панель более полезной, давайте определим, что мы хотим показать. Мы можем определить две глобальные метрики: общее количество клиентов и общий доход от этих клиентов. Тогда также было бы интересно отобразить некоторые графики, например, количество клиентов и доход с течением времени. При этом приходится переделывать макет, чтобы все это показать. Давайте посмотрим, сможет ли ChatGPT справиться со всем этим сразу. Вот подсказка, которую я дал ChatGPT
Я хотел бы изменить макет приложения. Разделите его на три разных раздела. Первый раздел содержит только название информационной панели, которое можно изменить на «Внутренняя информационная панель». Второй раздел, расположенный ниже первого, должен содержать три метрики. Первый — это общее количество клиентов, которое можно получить, подсчитав количество клиентов в файле данных. Второй метрикой должен быть общий доход, который вы можете получить, зная, что каждый продукт стоит 100 долларов в месяц, учитывая количество продуктов, которые есть у каждого клиента, которые доступны в столбце «#Продукты», и как долго они были клиент, который описан в столбце «Дата регистрации», вы можете рассчитать доход для каждого клиента, следовательно, общий доход. В третьем разделе, ниже второго раздела, должно быть 2 графика, один из которых содержит гистограмму с ячейками по 10, содержащую распределение количества продуктов. Второй график должен содержать общий доход с течением времени.
Это большой запрос, поэтому ChatGPT потребовалось немного больше времени для его обработки, но он дал ответ и подробное объяснение изменений. Пока я не буду публиковать код здесь, чтобы не затянуться. Вы еще можете получить его из разговора и в конце я выложу окончательный вариант.
Таким образом, с этой подсказкой мы получаем следующее:
Мы видим, что стало намного лучше, и мы получили почти все, что просили! Ожидайте общий доход с течением времени, этот график, похоже, не работает нормально, поэтому давайте объясним его немного лучше.
Я пошел дальше и также попросил еще несколько улучшений, а именно размер отображаемой информации, и добавил третий показатель во второй раздел, который представляет собой среднее удовлетворение. Я также попросил ChatGPT настроить CSS, который в основном отвечает за визуальную составляющую приложения. Вот результат:
(проверьте беседу, чтобы увидеть, какие подсказки сгенерировали это) Опять же, я не написал ни одной строки кода, это все сгенерировано ИИ. Я думаю, что на данный момент это хороший внешний вид, однако есть одна последняя функция, которую я хотел бы добавить, а именно экран входа в систему. Если вы собираетесь использовать внутреннюю панель инструментов в Интернете, вы хотите, чтобы она была частной и недоступной для случайных людей. Давайте попросим ChatGPT сделать это. Это подсказка, которую я дал
Создайте отдельную страницу входа с именем login.html с тем же стилем CSS, что и раньше. После ввода учетных данных и их проверки панель управления становится видимой. Принятые учетные данные на данный момент могут быть «admin» для имени пользователя и «password» для пароля.
И теперь у нас есть экран входа в систему!
Чтобы это работало, нам пришлось создать новый файл с именем login.html и вставить следующий код.
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<style>
/* Add your custom CSS styles here */
body {
background: linear-gradient(to bottom, #ffffff, #6f42c1); /* Vertical gradient background */
font-family: 'Arial', sans-serif; /* Change the font type */
margin: 0;
padding: 0;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
padding: 20px;
color: #ffffff; /* Font color */
}
h1 {
font-size: 32px;
margin-bottom: 20px;
text-align: center;
text-transform: uppercase;
color: #6f42c1; /* Title color */
}
.form-container {
background-color: rgba(111, 66, 193, 0.7); /* Background color with transparency */
padding: 40px;
border-radius: 10px;
}
.form-group {
margin-bottom: 20px;
}
.form-label {
font-size: 18px;
}
.form-input {
width: 100%;
padding: 10px;
font-size: 16px;
border-radius: 5px;
border: none;
}
.form-button {
width: 100%;
padding: 10px;
font-size: 18px;
color: #ffffff;
background-color: #6f42c1;
border: none;
border-radius: 5px;
cursor: pointer;
}
.form-button:hover {
background-color: #542689;
}
</style>
</head>
<body>
<div class="container">
<div class="form-container">
<h1>Login</h1>
<form id="loginForm" onsubmit="validateCredentials(event)">
<div class="form-group">
<label for="username" class="form-label">Username:</label>
<input type="text" id="username" class="form-input" required>
</div>
<div class="form-group">
<label for="password" class="form-label">Password:</label>
<input type="password" id="password" class="form-input" required>
</div>
<button type="submit" class="form-button">Log In</button>
</form>
</div>
</div>
<script>
function validateCredentials(event) {
event.preventDefault();
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
// Check if the credentials are valid
if (username === 'admin' && password === 'password') {
// Redirect to the dashboard page
window.location.href = 'dashboard.html';
} else {
alert('Invalid credentials. Please try again.');
}
}
</script>
</body>
</html>
И тогда вместо ссылки http://127.0.0.1:8080/Dashboard/dashboard.html вы делитесь этой http://127.0.0.1:8080/Dashboard/login.html. Теперь только после входа в систему с правильными учетными данными вы можете получить доступ к панели инструментов.
Если вам интересно, вот полный код файла dashboard.html.
<!DOCTYPE html>
<html>
<head>
<title>Internal Dashboard</title>
<style>
/* Add your custom CSS styles here */
body {
background: linear-gradient(to bottom, #ffffff, #6f42c1); /* Vertical gradient background */
font-family: 'Arial', sans-serif; /* Change the font type */
margin: 0;
padding: 0;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
color: #ffffff; /* Font color */
}
h1 {
font-size: 32px;
margin-bottom: 20px;
text-align: center;
text-transform: uppercase;
color: #6f42c1; /* Title color */
}
.section {
margin-bottom: 40px;
background-color: rgba(111, 66, 193, 0.7); /* Background color with transparency */
padding: 20px;
border-radius: 10px;
}
.metrics-container {
display: flex;
justify-content: space-between;
gap: 40px;
font-size: 24px;
}
.metric {
text-align: center;
}
.chart {
width: 600px;
height: 400px;
background-color: rgba(111, 66, 193, 0.7); /* Background color with transparency */
border-radius: 10px;
}
.charts-container {
display: flex;
gap: 40px;
}
</style>
</head>
<body>
<div class="container">
<h1>Internal Dashboard</h1>
<div class="section">
<h2>Overall Metrics</h2>
<div class="metrics-container">
<p class="metric">Total Clients: <span id="totalClients"></span></p>
<p class="metric">Total Revenue: $<span id="totalRevenue"></span> M</p>
<p class="metric">Average Satisfaction: <span id="averageSatisfaction"></span></p>
</div>
</div>
<div class="section">
<h2>More Information</h2>
<div class="charts-container">
<div id="productsChart" class="chart"></div>
<div id="revenueChart" class="chart"></div>
</div>
</div>
</div>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>
<script>
function fetchData() {
// Load the Excel file
const file = 'data.xlsx';
const xhr = new XMLHttpRequest();
xhr.open('GET', file, true);
xhr.responseType = 'arraybuffer';
xhr.onload = function (e) {
const data = new Uint8Array(xhr.response);
const workbook = XLSX.read(data, { type: 'array' });
// Assuming the data is in the first sheet (modify if necessary)
const sheetName = workbook.SheetNames[0];
const worksheet = workbook.Sheets[sheetName];
// Convert the worksheet to JSON
const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
// Calculate total clients
const totalClients = jsonData.length - 1;
// Calculate total revenue and revenue over time
const revenueData = calculateRevenueData(jsonData);
// Calculate average satisfaction
const averageSatisfaction = calculateAverageSatisfaction(jsonData);
// Render metrics
renderMetrics(totalClients, revenueData[revenueData.length - 1].y, averageSatisfaction);
// Calculate product distribution data
const productsData = jsonData.slice(1).map(row => parseInt(row[2]));
const productsHistogram = createHistogram(productsData, 10);
// Render charts
renderProductsChart(productsHistogram);
renderRevenueChart(revenueData);
};
xhr.send();
}
function calculateRevenueData(jsonData) {
const sortedData = jsonData.slice(1).sort((a, b) => {
const dateA = new Date(a[1]);
const dateB = new Date(b[1]);
return dateA - dateB;
});
let totalRevenue = 0;
const revenueData = [];
for (const row of sortedData) {
const products = parseInt(row[2]);
const regDate = new Date(row[1]);
const monthsAsClient = (new Date() - regDate) / (1000 * 60 * 60 * 24 * 30); // Approximate months
totalRevenue += products * monthsAsClient * 100;
revenueData.push({ x: regDate, y: totalRevenue });
}
return revenueData;
}
function calculateAverageSatisfaction(jsonData) {
const satisfactionData = jsonData.slice(1).map(row => parseInt(row[3]));
const totalSatisfaction = satisfactionData.reduce((sum, value) => sum + value, 0);
const averageSatisfaction = totalSatisfaction / satisfactionData.length;
return averageSatisfaction.toFixed(2);
}
function renderMetrics(totalClients, totalRevenue, averageSatisfaction) {
const totalClientsElement = document.getElementById('totalClients');
const totalRevenueElement = document.getElementById('totalRevenue');
const averageSatisfactionElement = document.getElementById('averageSatisfaction');
totalClientsElement.textContent = totalClients;
totalRevenueElement.textContent = (totalRevenue / 1000000).toFixed(2);
averageSatisfactionElement.textContent = averageSatisfaction;
}
function createHistogram(data, binSize) {
const histogram = {};
for (const value of data) {
const bin = Math.floor(value / binSize) * binSize;
if (!histogram[bin]) {
histogram[bin] = 0;
}
histogram[bin]++;
}
return histogram;
}
function renderProductsChart(productsHistogram) {
const chartData = Object.entries(productsHistogram).map(([bin, count]) => ({
x: [bin],
y: [count],
type: 'bar',
name: 'Products',
showlegend: false
}));
const layout = {
title: 'Number of Products Distribution',
xaxis: { title: 'Number of Products' },
yaxis: { title: 'Count' }
};
Plotly.newPlot('productsChart', chartData, layout);
}
function renderRevenueChart(revenueData) {
const sortedData = revenueData.sort((a, b) => a.x - b.x);
const chartData = [{
x: sortedData.map(data => data.x),
y: sortedData.map(data => data.y),
type: 'scatter',
mode: 'lines',
name: 'Revenue'
}];
const layout = {
title: 'Total Revenue over Time',
xaxis: { title: 'Registration Date' },
yaxis: { title: 'Revenue' }
};
Plotly.newPlot('revenueChart', chartData, layout);
}
fetchData();
</script>
</body>
</html>
Здесь можно протестировать гораздо больше вещей, и, конечно, это работает только на вашем локальном сервере. Чтобы заставить эту панель управления работать в реальном времени, вам нужно где-то ее развернуть. Я не буду описывать это здесь, но я уверен, что если вы спросите ChatGPT, это укажет вам правильное направление.
Работая над этим проектом, я был действительно поражен, увидев, как ИИ может интерпретировать запросы, чтобы делать то, что вы от него хотите. И что еще более впечатляет, мне очень нравятся объяснения, которые ChatGPT предоставил после написания кода. Даже если вы не понимаете код, вы все равно можете получить представление о том, что делается и почему.
Также хочу напомнить, что я честно не написал ни строчки кода в этом проекте!
Надеюсь, вам понравился этот небольшой урок, и я действительно рекомендую вам прочитать разговор, который породил этот проект, вы будете поражены.
