Como Criar Mapas Mentais com o ChatGPT
ฝัง
- เผยแพร่เมื่อ 3 ส.ค. 2024
- Veja três formas de se criar mapas mentais com a inteligência artificial do ChatGPT.
Chapters:
0:00 - Parte 1: Mapas Mentais Interativos
5:19 - Parte 2: Mapas Mentais Editáveis
8:19 - Parte 3: Crie seu próprio app de mapas mentais
Prompts usados durante o vídeo:
1️⃣ Prompts Parte 1:
a) De texto para mapa mental
"Crie um mapa mental para explicar [insira o seu tema]. Escreva em markdown."
b) De PDFs/documentos de texto para mapa mental
"Crie um mapa mental para representar os principais pontos do documento anexo. Escreva
em markdown."
c) De Imagem para mapa mental
"Organize as anotações contidas na imagem em forma de mapa mental. Escreva sua resposta em markdown."
2️⃣ Prompts Parte 2:
Primeiro, solicite o mapa mental desejado, em formato markdown, conforme mostrado na etapa anterior.
Em seguida, use o prompt abaixo para que o ChatGPT salve o mapa mental em um arquivo que possa ser lido pelo App Free Mind:
"Ótimo! Agora, salve esse mapa mental em um arquivo que possa ser lido pelo app FreeMind."
3️⃣ Prompts Parte 3:
Prompt 1 - criando a base do código
"Você é um programador experiente, especializado no desenvolvimento de web apps.
Preciso da sua ajuda para criar um construtor de mapas mentais, no estilo web app.
Tendo em vista esse contexto, crie um mapa mental interativo para representar o seguinte:
IDEIA 1
ideia 1.1
ideia 1.2
ideia 1.3
Neste primeiro momento, crie uma estrutura simples, sem botões ou outras funcionalidades avançadas, pois esse será apenas o nosso ponto de partida.
Utilize HTML e JavaScript (Vis.js), tendo em vista que a ideia é criar um construtor de mapas mentais, bastante simples, no estilo web app.
Me forneça o código com o JS já embutido no HTML, bem como todos os demais elementos que me permitam visualizar o mapa mental."
Prompt 2 - movimento dos nós
"Perfeito! Agora, atualize o código para que eu possa movimentar os nós livremente pelo mapa. Contudo, desative a física."
Prompt 3 - adicionar e remover nós
"Ótimo! Agora, adicione a possibilidade de adicionar e remover novos nós:
- Duplo clique com o botão esquerdo do mouse: cria novo nó
- Clique simples sobre um nó com o botão esquerdo do mouse: seleciona o nó
- Para remover um nó, o usuário deve selecioná-lo em, em seguida, clicar com o botão direito"
Prompt 4 - conectar nós
"Perfeito, agora, preciso da habilidade de conectar nós. Atualize o código para que, ao selecionar um nó e, em seguida, clicar em outro nó, uma aresta seja gerada para conectá-los. Certifique-se de garantir que arestas duplicadas não seja criadas."
Prompt 5 - excluir arestas
"Muito bom! Agora, preciso da habilidade de excluir arestas. Um clique com o botão esquerdo do mouse seleciona a aresta. Com a aresta selecionada, um clique com o botão direito do mouse a remove."
Prompt 6 - editar nós
"Excelente! Agora, preciso da habilidade de editar os nós. Atualize o código para que, ao clicar duas vezes com o botão esquerdo do mouse sobre um nó selecionado, seja aberta uma caixa de prompt no próprio navegador, que permitirá alterar o texto e, em seguida, a cor do nó."
Prompt 7 - identidade visual
"Agora, vamos atualizar o código para ajustar alguns detalhes visuais
- o fundo do mapa deve ser preto
- os nós devem ter forma retangular
- o fundo dos nós deve ser preto, mas as bordas devem ser brancas
- os demais elementos, como textos e arestas devem ser na cor branca"
Prompt 8 - botões save e load
"Ótimo. Agora, preciso que você atualize o código para incluir um botão que, ao ser clicado, permitirá que eu salve um mapa mental em JSON. Também deve existir um outro botão que, ao ser clicado, permitirá que eu carregue o JSON de um mapa mental salvo anteriormente."
Prompt 9 - opcional
"Agora, salve o código em um arquivo html e me forneça o link para download."
Caso queira, você pode pular o prompt 9 e salvar o arquivo por conta própria, conforme o procedimento do vídeo.
![[TH] GEN vs SEN | FPX vs TH - VALORANT Champions 2024 DAY 1](http://i.ytimg.com/vi/VcyH-0LAlhs/mqdefault.jpg)
🧠 O que você verá neste vídeo:
Parte 1: Mapas Mentais Interativos
Parte 2: Mapas Mentais Editáveis
Parte 3: Crie seu próprio app de mapas mentais
Os prompts utilizados durante o vídeo estão na descrição.
Excelente vídeo meu amigo !! Assunto super interessante e didática muito boa. Parabéns, os vídeos estão cada vez melhores!!
Valeu pela força, Rodrigão!
Excelente aula, parabéns pela valiosa informação. ❤
Valeu, Jeane! Muito obrigado pelo comentário :)
Aula incrível, Mário! Vou testar essas possibilidades e, quando puder, grave o vídeo mostrando o procedimento para personalizar o layout, inclusive alterar a cor de fundo para branco, caso precise imprimir.
Muito obrigado, Eliseu! Depois me conte como foram seus testes. Mais adiante, trarei o vídeo sobre o layout.
Gratidão!
Valeu, Ericson!
Sensacional
Valeu, meu amigo!
Usa o Whimsical (um GPT) ele já cria a imagem e o link para editar se vc quiser. É bem melhor.
Boa, Gilson! Valeu pela dica
Só é gratuito até certo limite de uso, né?
@@Deontologiaenigmatic o foco do whimsical é profissional ele foi criado para apresentação de projetos. A ferramenta de mapas mentais é só uma delas. E para uso individual é totalmente gratuito. Tu só vai pagar se quiser montar uma equipe. Tipo várias pessoas trabalhando no mesmo projeto. Para nós que usamos para estudo o free já é perfeito. Dá pra criar infinitos mapas lá.
Que dica sensacional mano.
Nem todo herói usa capa!
Obrigado.
GOSTEI MUITO DOS CONTEUDOS ONDE PODEMOS MARCA UM DIA PARA CONVERSA
Muito obrigado, amigo!
Olá, tudo bem !! Seria possível criar um programa para fazer template auto editável para o blogger.
Fala, meu amigo! Essa é uma boa ideia! Vou estudar a respeito
Se eu quiser compartilhar esse arquivo html que eu baixei, eu posso? A pessoa que receber vai conseguir abrir os nós?
Fala, Gabriel! Pode sim, meu amigo. A pessoa para quem você enviar o arquivo conseguirá abri-lo normalmente, desde que ela esteja contectada à internet e usando um computador.