paint-brush
Crie modelos de prompt do ChatGPT usando este plug-in do Google Chromepor@sinenko
2,639 leituras
2,639 leituras

Crie modelos de prompt do ChatGPT usando este plug-in do Google Chrome

por Ilya Sinenko5m2023/06/02
Read on Terminal Reader

Muito longo; Para ler

O plug-in ChatGPT de Ilya permite adicionar botões diretamente à interface de bate-papo. O prompt necessário será inserido no campo de entrada de texto. O plug-in não é complicado e compartilharei seu código aqui com você. O código é escrito em JavaScript e pode ser baixado do GitHub.
featured image - Crie modelos de prompt do ChatGPT usando este plug-in do Google Chrome
Ilya Sinenko HackerNoon profile picture

Ao usar o ChatGPT, muitas vezes você precisa repetir os mesmos prompts ou partes dos mesmos prompts.


Fica muito chato digitar a mesma coisa indefinidamente, principalmente se o ChatGPT esquecer o objetivo do chat, então você terá que repetir a mesma solicitação no contexto deste ou daquele diálogo. Inicialmente, copiei os prompts padrão em um bloco de notas de texto.


Estes foram, por exemplo, tais prompts:


  • Resuma o seguinte texto em inglês:


  • Se o texto a seguir estiver em inglês, traduza-o para o italiano e, se estiver em italiano, para o inglês:


  • Crie um poema com base no seguinte texto:


  • Meu nome é Ilya, pense no que me responder neste diálogo:


Mas abrir um documento de texto todas as vezes e copiar e colar o prompt necessário também não é conveniente. Sem contar que sou muito preguiçoso e não gosto de repetir as mesmas ações.


E então tive a ideia de fazer um plug-in para o Google Chrome, com o qual você pode adicionar botões diretamente à interface do ChatGPT, pressionando o qual o prompt necessário será inserido no campo de entrada de texto.


O plug-in não é complicado e compartilharei seu código aqui com você.


Primeiro, crie um diretório em algum lugar onde nosso plugin estará. Vou nomeá-lo /gptinsert


No diretório, você pode criar imediatamente um ícone de 48x48 pixels, nomeando-o icon.png


Após isso, criamos um arquivo manifest.json com o seguinte conteúdo:


 { "manifest_version": 3, "name": "ChatGPT textarea buttons", "version": "1.0", "permissions": ["activeTab"], "content_scripts": [ { "matches": ["https://chat.openai.com/*"], "js": ["content.js"] } ], "icons": { "48": "icon.png" } }


Após isso, criamos um arquivo que irá realizar o trabalho do nosso módulo; nós o chamamos de content.js e adicionamos o seguinte código a ele em JavaScript:


 const insertText = (text) => { // Check if the page has a textarea. const textarea = document.querySelector('textarea'); if (textarea) { const startPosition = textarea.selectionStart; // The position of the cursor at the beginning of the selected text. const endPosition = textarea.selectionEnd; // The position of the cursor at the end of the selected text. const originalText = textarea.value; // The original text in the textarea. const newText = originalText.slice(0, startPosition) + text + originalText.slice(endPosition); // The new text in the textarea. textarea.value = newText; // Insert the new text into the textarea. textarea.focus(); // Focus on the textarea. textarea.selectionEnd = startPosition + text.length; // Set the cursor position at the end of the inserted text. textarea.selectionStart = startPosition + text.length; // Set the cursor position at the beginning of the inserted text. } }; // Create a button. const addButton = (title,text) => { const button = document.createElement('button'); // Create a button. button.textContent = `${title}`; // Set the button text. button.addEventListener('click', (event) => { event.preventDefault(); insertText(text); // Insert text into the textarea. }); return button; }; // Add buttons to the page. const init = () => { // Check if the page has a textarea. const textarea = document.querySelector('textarea').parentElement; if (textarea && !document.querySelector('.textarea-buttons')) { // Create a container for the buttons. const container = document.createElement('div'); container.className = 'textarea-buttons'; container.style.display = 'flex'; container.style.gap = '5px'; container.style.marginTop = '5px'; // Add buttons to the container. container.appendChild(addButton('Summarize','Summarize the following text in English: ')); container.appendChild(addButton('Translate','If the following text is in English, translate it into Italian, and if in Italian, then into English: ')); container.appendChild(addButton('Poem','Create a poem based on the following text: ')); container.appendChild(addButton('Response','My name is Ilya, write that I can answer my interlocutor in this dialogue: ')); // Add the container below the textarea. textarea.parentNode.insertBefore(container, textarea.nextSibling); } }; init(); // If the page uses dynamic elements, periodically check and add buttons if necessary. setInterval(init, 1000);


Agora precisamos adicionar este plugin ao Google Chrome. Para isso, vamos ao Menu->Configurações->Extensões->Carregar Descompactado, depois abrimos o diretório com nosso plugin /gptinsert, e clicamos no botão "Selecionar Pasta" .


Depois disso, o logotipo do nosso plug-in aparecerá próximo à barra de endereços do navegador.

Agora, podemos usá-lo. Para fazer isso, basta abrir https://chat.openai.com/ e criar um novo chat, após o qual aparecerão 4 botões na parte inferior do nosso chat: Resumir, Traduzir, Poema e Resposta.


Ao pressionar, por exemplo, em Resumir, o prompt "Resumir o seguinte texto em inglês:" aparecerá no campo de entrada.


Depois disso, você pode inserir qualquer texto em qualquer idioma suportado, e o ChatGPT produzirá seu breve conteúdo e significado.

Vamos verificar o funcionamento do botão "Resposta" por exemplo:

Se você precisar adicionar um novo botão, basta adicionar o seguinte código ao arquivo content.js :


 container.appendChild(addButton('My button','My prompt text: '));


Depois de salvar - você só precisa reiniciar o navegador e tudo funcionará.


Dessa forma, você pode adicionar um número ilimitado de botões e prompts. Com uso frequente, isso acelera visivelmente o trabalho e adiciona conveniência ;)


Link do GitHub: https://github.com/sinenko/ChatGptPromptInsert