Você já conhece o ChatGPT, o modelo avançado de linguagem desenvolvido pela OpenAI que usa aprendizado de máquina para entender a linguagem natural e gerar respostas semelhantes às humanas. Ele possui uma vasta base de conhecimento e, com sua sofisticada “compreensão” da linguagem, é capaz de atuar como um poderoso ajudante para qualquer pessoa em busca de informações. Ele pode responder a uma ampla gama de perguntas, fornecer conselhos, conversar sobre vários tópicos e provou seu valor em um grande número de áreas.
Mas o ChatGPT pode criar páginas da web? Vamos levá-lo para a tarefa e descobrir.
Observe que isso foi escrito usando o ChatGPT 3.5, antes do lançamento da versão mais recente.
Vamos começar com um pouco de HTML básico. Dado que O ChatGPT já provou ser um codificador e assistente de programação talentoso, isso não deve ser um grande teste.
Aqui está o prompt que usamos com o ChatGPT para criar com sucesso uma página HTML “Hello, World”:
Crie um simples “Hello, World!” página da web usando HTML
O ChatGPT gerou o seguinte HTML básico que, sem surpresa, fez o que pretendia.
<!DOCTYPE html>
<html> <head> <title>Hello, World!</title> </head> <body> <h1>Hello, World!</h1> </body>
</html>O ChatGPT nos aconselha a colocá-lo em um arquivo com a extensão “.html” e abri-lo com nosso navegador. Missão cumprida.
Não vou me incomodar com uma captura de tela; todos vocês já viram saída HTML não formatada antes.
Vamos pedir ao ChatGPT para deixar as coisas mais bonitas.
Você pode fazer esta página parecer muito melhor com o uso de CSS?
ChatGPT cuspiu no seguinte:
Este exemplo usa CSS para alterar a cor de fundo da página da Web para azul claro, centralizar o texto na página, alterar a cor do título para marinho e aumentar o tamanho da fonte do título para 4em.
Você pode brincar com css e estilizar sua página da web.
Também é uma boa prática colocar css em um arquivo separado e vinculá-lo ao seu arquivo index.html.
Que se parece com isto:
Uma página da Web simples criada pelo ChatGPT usando HTML e CSS
Uma melhoria, com certeza, mas ainda é brincadeira de criança. Antes de continuarmos, porém, vamos seguir o conselho do ChatGPT e separar nosso HTML e CSS.
Como eu colocaria o CSS em um arquivo separado e o vincularia ao meu arquivo index.html?
Você pode criar um arquivo CSS separado e vinculá-lo ao seu arquivo HTML usando o elemento link dentro do
headseção do seu arquivo HTML. Aqui está um exemplo de como você faria isso:
- Crie um novo arquivo chamado “styles.css” no mesmo diretório do seu arquivo “index.html”.
- Adicione seu código CSS ao arquivo “styles.css”.
- Em seu arquivo “index.html”, adicione a seguinte linha dentro do
headseção:
<link rel="stylesheet" type="text/css" href="styles.css">A
relO atributo especifica a relação entre o documento atual e o documento vinculado, otypeO atributo especifica o tipo do documento vinculado e ohrefO atributo especifica a localização do documento vinculado.- Salve os dois arquivos e abra “index.html” em seu navegador. Os estilos de “styles.css” agora devem ser aplicados à página da web.
Você também pode incluir arquivos css de links online, como em “https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css”.
Ele também será aplicado à sua página da Web e você não precisará incluí-lo em seu diretório local.
Crie uma página da Web no estilo Craigslist que faça o seguinte:
– me permite adicionar um novo anúncio
– me permite excluir anúncios existentes
– me permite listar todos os anúncios existentes
– me permite editar um anúncio existente
A criação de uma página da Web no estilo Craigslist envolveria o uso de uma combinação de HTML, CSS, JavaScript e uma linguagem de back-end, como PHP ou Node.js, para lidar com os aspectos dinâmicos da página da Web. Aqui está um exemplo de como pode ser a estrutura básica da página da web:
<!DOCTYPE html>
<html> <head> <title>Craigslist-style Webpage</title> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <h1>Craigslist-style Webpage</h1> <form id="add-ad-form"> <label for="title">Title:</label> <input type="text" id="title" name="title"> <br> <label for="description">Description:</label> <textarea id="description" name="description"></textarea> <br> <button type="submit">Add Ad</button> </form> <table id="ads-table"> <thead> <tr> <th>Title</th> <th>Description</th> <th>Actions</th> </tr> </thead> <tbody> <!-- This section will be populated with ads using JavaScript --> </tbody> </table> <script src="script.js"></script> </body>
</html>A página inicial resultante sem funcionalidade de plano de fundo não é muito bonita. Então eu pergunto:
Você poderia tornar o site mais profissional com o uso de um arquivo CSS? Eu gostaria que a paleta de cores fosse as cores nacionais da Itália.
E o ChatGPT obriga (o botão “adicionar” até fica vermelho quando você passa o mouse sobre ele).
Formulário HTML simples com estilo criado por ChatGPT
Mas e o JavaScript? Vamos ver se o ChatGPT pode adicionar isso.
Você pode adicionar o javascript para adicionar um novo anúncio à listagem e exibi-lo?
// Get references to the form and table
const addAdForm = document.querySelector("#add-ad-form");
const adsTable = document.querySelector("#ads-table tbody"); // Handle the form submit event
addAdForm.addEventListener("submit", function(event) { event.preventDefault(); // Get the values from the form inputs const title = document.querySelector("#title").value; const description = document.querySelector("#description").value; // Create a new table row and add the ad data const newRow = document.createElement("tr"); newRow.innerHTML = ` <td>${title}</td> <td>${description}</td> <td> <button>Edit</button> <button>Delete</button> </td> `; // Add the new row to the table adsTable.appendChild(newRow); // Clear the form inputs addAdForm.reset();
});E os resultados:
Formulário HTML semi-funcional com o uso de JavaScript criado por ChatGPT
Nada mal. Com alguns prompts, passamos do nada para um HTML feio, para um HTML mais agradável, para um JavaScript que não algo.
Vamos tentar algo útil. Abaixo está o prompt para criar uma página inicial simples (mas potencialmente útil) para um blog, com alguns requisitos específicos.
Vamos criar uma página da web. Eu gostaria que você escrevesse o HTML e o CSS e tudo o mais necessário para gerar uma página inicial do blog que atendesse a esses requisitos:
– a página usará uma largura de 1024px
– no topo da página estará o título em fonte grande
– abaixo disso deve haver uma linha de links para 3 páginas úteis no blog
– abaixo disso, haverá um anúncio em banner clicável em conformidade com o tamanho padrão do setor
– abaixo disso há uma seção dos blogs mais recentes, que deve mostrar as 6 entradas mais recentes em um layout lado a lado com 2 linhas de 3 blocos
– abaixo das últimas entradas do blog deve haver uma seção “sobre” que lista informações sobre o fundador do site junto com sua foto
– abaixo disso deve haver um rodapé típico, incluindo
- use lorem ipsum para preencher o texto
– a página deve ser atraente, usando um estilo moderno
– deve haver um efeito de foco do CSS nos blocos de blog mais recentes
Aqui está o HTML e CSS gerado pelo ChatGPT:
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My Blog</title> <style> body { font-family: Arial, sans-serif; max-width: 1024px; margin: 0 auto; padding: 1rem; } h1 { font-size: 2.5rem; text-align: center; margin-bottom: 1rem; } nav { display: flex; justify-content: center; margin-bottom: 1rem; } nav a { text-decoration: none; color: #333; margin: 0 1rem; } .banner { display: block; width: 728px; height: 90px; background-color: #ccc; margin: 0 auto 1rem; text-align: center; line-height: 90px; } .blogs { display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 1rem; } .blog { width: 32%; background-color: #f0f0f0; padding: 1rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease; cursor: pointer; } .blog:hover { transform: translateY(-10px); } .about { display: flex; margin-bottom: 1rem; } .about img { width: 150px; height: 150px; object-fit: cover; border-radius: 50%; margin-right: 1rem; } .about p { flex: 1; } footer { background-color: #333; color: #fff; padding: 1rem; text-align: center; font-size: 0.875rem; } </style>
</head> <body> <h1>My Awesome Blog</h1> <nav> <a href="#">Useful Page 1</a> <a href="#">Useful Page 2</a> <a href="#">Useful Page 3</a> </nav> <a href="#" class="banner">Ad - 728x90</a> <div class="blogs"> <div class="blog"> <h2>Lorem Ipsum</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras venenatis mauris id facilisis...</p> </div> <div class="blog"> <h2>Lorem Ipsum</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras venenatis mauris id facilisis...</p> </div> <div class="blog"> <h2>Lorem Ipsum</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras venenatis mauris id facilisis...</p> </div> <div class="blog"> <h2>Lorem Ipsum</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras venenatis mauris id facilisis...</p> </div> <div class="blog"> <h2>Lorem Ipsum</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras venenatis mauris id facilisis...</p> </div> <div class="blog"> <h2>Lorem Ipsum</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras venenatis mauris id facilisis...</p> </div> </div> <div class="about"> <img src="founder.jpg" alt="Founder's Photo"> <div> <h2>About the Founder</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras venenatis mauris id facilisis. Integer sit amet tincidunt turpis, a lacinia ligula.</p> </div> </div> <footer> © 2023 My Awesome Blog. All Rights Reserved. </footer> </body>
</html>E aqui está o produto final:
Página inicial de blog simples criada por ChatGPT
Parece muito bom. Quero dizer, poderia parecer melhor com alguma orientação CSS adicional no prompt, tenho certeza, mas, no geral, não é um mau começo. Ele ainda tem um efeito de foco nos ladrilhos, visível no ladrilho superior esquerdo (ele é ligeiramente elevado ao passar o mouse).
Uma observação é que eu pedi “as 6 entradas mais recentes em um layout lado a lado com 2 linhas de 3 blocos”, mas o ChatGPT gerou esse lado a lado em 2 colunas ao invés.
Parece que, com algumas solicitações simples e diretas, o ChatGPT certamente mostra alguns recursos para gerar páginas da web. Eu me pergunto como ele funcionaria quando solicitado a gerar algo dinâmico e como instruiria o humano a tecer os diferentes componentes juntos. Um teste para a próxima vez.
Mateus Mayo (@mattmayo13) é um cientista de dados e editor-chefe do KDnuggets, o recurso online seminal de ciência de dados e aprendizado de máquina. Seus interesses estão em processamento de linguagem natural, design e otimização de algoritmos, aprendizado não supervisionado, redes neurais e abordagens automatizadas para aprendizado de máquina. Matthew tem mestrado em ciência da computação e diploma de pós-graduação em mineração de dados. Ele pode ser contatado em editor1 em kdnuggets[ponto]com.
- Conteúdo com tecnologia de SEO e distribuição de relações públicas. Seja amplificado hoje.
- Platoblockchain. Inteligência Metaverso Web3. Conhecimento Ampliado. Acesse aqui.
- Fonte: https://www.kdnuggets.com/2023/03/chatgpt-webpage-construction.html?utm_source=rss&utm_medium=rss&utm_campaign=using-chatgpt-for-webpage-construction
