Овладение искусством общения с искусственным интеллектом: Практическое руководство

Загружайте файлы в ChatGPT и работайте с ними, используя эту бесплатную альтернативу плагину Code Interpreter

В настоящее время, чтобы загрузить файлы в ChatGPT, требуется использовать плагин Code Interpreter. К сожалению, многие пользователи не имеют возможности использовать ChatGPT Plus, и не имеют доступа к этому плагину. В данной статье я расскажу о бесплатном обходном пути, который я нашел для загрузки файлов и работы с ними в ChatGPT, похожий на использование Плагина интерпретатора кода. Этот метод довольно прост, поэтому давайте начнем!
Демо
Мы добавим кнопку «Отправить файл» на веб-сайт ChatGPT, которая позволит нам загружать различные типы файлов.
Результат будет выглядеть как на изображении
Как только кнопка появится на веб-сайте, мы можем нажать на нее, выбрать файл, который мы хотим загрузить, и ChatGPT прочитает его. Если файл большой, данные внутри будут разбиты на множество фрагментов.
Обратите внимание, что поддерживаются расширения файлов: «.txt», «.js», «.py», «.html», «.css», «.json» и «.csv».

Как это сделать
Чтобы добавить эту зеленую кнопку, во-первых, мы должны добавить некоторый код в консоль нашего браузера. Вам не нужно знать код для этого, но просто попросите ChatGPT сгенерировать код, который создает эту кнопку «Отправить файл», а затем вставьте этот код в консоль.
Это займет меньше минуты!
Ниже смотрите prompt, который мы будем использовать для генерации кода кнопки «Отправить файл»
(источник to “Automate My Life”)

“Generate a Js script that creates a button with the text ‘Submit File’ and inserts it into the DOM before an element with the class ‘.flex.flex-col.w-full.py-2.flex-grow.md\:py-3.md\:pl-4’. The button should have a green background color, white text color, 5px padding, no border, 5px border radius and 5px margin. The script should also create a progress element and insert it into the DOM before the same element. The progress element should have a width of 99%, height of 5px and a grey background color. Inside the progress element, there should be another div element representing the progress bar with a width of 0%, height of 100% and blue background color. When the button is clicked, it should create an input element of type ‘file’ that accepts ‘.txt’, ‘.js’, ‘.py’, ‘.html’, ‘.css’, ‘.json’ and ‘.csv’ files. Once a file is selected, using an async it should be read as text and split into chunks of size 15000. using async Each chunk should be submitted into a conversation by doing the following:

 async function submitConversation(text, part, filename) {
        const textarea = document.querySelector("textarea[tabindex='0']");
        const enterKeyEvent = new KeyboardEvent("keydown", {
          bubbles: true,
          cancelable: true,
          keyCode: 13,
        });
        textarea.value = `Part ${part} of ${filename}: \n\n ${text}`;
        textarea.dispatchEvent(enterKeyEvent);
      }. 
The progress bar should be updated after each chunk is submitted within the for loop as follows
progressBar.style.width = `${((i + 1) / numChunks) * 100}%`;
 and should also check if chatgpt is ready with this code:
chatgptReady = false;
      while (!chatgptReady) {
        await new Promise((resolve) => setTimeout(resolve, 1000));
        chatgptReady = !document.querySelector(
          ".text-2xl > span:not(.invisible)"
Once all chunks have been submitted, the progress bar should turn blue.”

Вот и вся подсказка!
По сути, это приглашение говорит ChatGPT создать кнопку «Отправить файл», какие форматы поддерживаются, и при необходимости разбить наш файл на куски размером 15000 символов.
После запуска приведенного выше приглашения вы должны получить следующий код (не стесняйтесь скопировать его, если тот, который вы получили, не работает):

// Create button
const button = document.createElement('button');
button.textContent = 'Submit File';
button.style.backgroundColor = 'green';
button.style.color = 'white';
button.style.padding = '5px';
button.style.border = 'none';
button.style.borderRadius = '5px';
button.style.margin = '5px';

// Create progress element
const progress = document.createElement('progress');
progress.style.width = '99%';
progress.style.height = '5px';
progress.style.backgroundColor = 'grey';

// Create progress bar inside progress element
const progressBar = document.createElement('div');
progressBar.style.width = '0%';
progressBar.style.height = '100%';
progressBar.style.backgroundColor = 'blue';

// Append progress bar to progress element
progress.appendChild(progressBar);

// Find the target element to insert before
const targetElement = document.querySelector('.flex.flex-col.w-full.py-2.flex-grow.md\\:py-3.md\\:pl-4');

// Insert button and progress element before the target element
targetElement.parentNode.insertBefore(progress, targetElement);
targetElement.parentNode.insertBefore(button, targetElement);

// Button click event handler
button.addEventListener('click', async () => {
  const fileInput = document.createElement('input');
  fileInput.type = 'file';
  fileInput.accept = '.txt, .js, .py, .html, .css, .json, .csv';

  // File selected event handler
  fileInput.addEventListener('change', async (event) => {
    const file = event.target.files[0];
    const filename = file.name;
    const reader = new FileReader();

    reader.onload = async (event) => {
      const text = event.target.result;
      const chunkSize = 15000;
      const numChunks = Math.ceil(text.length / chunkSize);

      for (let i = 0; i < numChunks; i++) {
        const start = i * chunkSize;
        const end = start + chunkSize;
        const chunk = text.substring(start, end);

        await submitConversation(chunk, i + 1, filename);

        // Update progress bar
        progressBar.style.width = `${((i + 1) / numChunks) * 100}%`;
      }

      // Check if chatgpt is ready
      let chatgptReady = false;
      while (!chatgptReady) {
        await new Promise((resolve) => setTimeout(resolve, 1000));
        chatgptReady = !document.querySelector('.text-2xl > span:not(.invisible)');
      }

      // All chunks submitted, turn progress bar blue
      progressBar.style.backgroundColor = 'blue';
    };

    reader.readAsText(file);
  });

  fileInput.click();
});

// Function to submit conversation
async function submitConversation(text, part, filename) {
  const textarea = document.querySelector("textarea[tabindex='0']");
  const enterKeyEvent = new KeyboardEvent('keydown', {
    bubbles: true,
    cancelable: true,
    keyCode: 13,
  });

  textarea.value = `Part ${part} of ${filename}:\n\n${text}`;
  textarea.dispatchEvent(enterKeyEvent);
}

Теперь щелкните правой кнопкой мыши любую часть веб-сайта и выберите «Inspect».
Появятся инструменты разработчика. Найдите «Console», а затем нажмите кнопку очистки, выделенную ниже, чтобы очистить любое сообщение в поле.


Теперь поле должно быть пустым.







Теперь вставьте код и нажмите Enter.



Наконец, вы должны увидеть зеленую кнопку «Отправить файл» на сайте ChatGPT.
Теперь вы можете закрыть инструменты разработчика. Просто помните, что если вы перейдете в другой чат ChatGPT, кнопка исчезнет, ​​и вам придется снова выполнить предыдущие шаги.

Анализ файла CSV с помощью ChatGPT
Для этой демонстрации я загружу CSV-файл с именем investors-7-28-2020.csv который содержит более 1100 строк данных о населении Поскольку файл содержит не более 15000 символов, ChatGPT после загрузки файла автоматически создаст одну часть со всеми данными
После того, данные были загружены, я могу начать свой анализ.
Я начну с простого prompt
"Покажи мне всех инвесторов из San Francisco"
И получаю список со ссылками на всех инвесторов из San Francisco
Далее вы можете создать код для визуализации графиков. Например я хочу построить график с данными сколько инвесторов в какой стране в моей таблице"

Вот подсказка, которую я буду использовать:
"read the Part 1 of investors-7-28-2020.csv: into a dataframe using python and make a lineplot how many investors are in whichever country"

Вот какой код я получаю, который вы можете запустить онлайн в https://jupyter.org/try-jupyter/lab/
Идем в Jupyter Notebooks и запускаем код

Обратите внимание, что если вы используете GPT-4, вы можете включить плагин Wolfram и заставить ChatGPT сделать график и показать его на своем веб-сайте без необходимости копировать/вставлять код в редактор кода
Единственным недостатком является то, что GPT-4 может медленно считывать данные, а также имеет ограничение в 25 сообщений каждые 3 часа.

Бесплатные шпаргалки по ChatGPT
Подпишитесь на нашу рассылку и получайте бесплатные шпаргалки по ChatGPT.

Присоединяйтесь к новостной рассылке
Будьте в курсе последних лайфхаков в Prompt Engineering и осваивайте навыки общения с ChatGPT и ИИ