Como criar ferramentas de IA com o WordPress

1. Aula 1: Pessoal, este é o meu site Wordpress. Você pode ver aqui que eu construí muitas ferramentas poderosas de IA diretamente no Wordpress. Neste curso, escolhi a ferramenta geradora AI Who. Eu vou te mostrar passo a passo como construir essa ferramenta no Wordpress. Por exemplo, você pode dizer aqui dicas de marketing digital para o tópico. Você pode definir um tipo de conteúdo, digamos, para uma introdução em vídeo e clicar em Gerar E agora essa ferramenta incrível, alimentada por IA, gerará resultados incríveis. Você pode copiar uma por uma, copiar todas essas funcionalidades diretamente no Wordpress Isso ajudará você a entender a estrutura por trás dessa ferramenta, para que você possa criar talvez qualquer ferramenta que desejar posteriormente, como fiz no meu site. Além disso, mostrarei também como monetizar essas ferramentas com o sistema de pontos para que você possa vender pontos e transformar seu Wordpress em As Business Se você estiver pronto, vamos começar. 2. Aula 2: Ok, amigos. Então, primeiro passo, você precisa de um site Wordpress. É óbvio porque este curso trata da criação da ferramenta de geração de ganchos AI no Wordpress. No meu caso, eu tenho esse site simples, novo e limpo. É um novo site que criei para essas partituras. Se você não tem um site, pode simplesmente obter um no Ten Web, um dos melhores serviços de hospedagem na web, talvez Kinsa, talvez host stinger, o que quiser Ou mesmo se você quiser continuar sem obter um plano de hospedagem, você pode instalar o Wordpress localmente com o Dive. Kinsta é uma ferramenta gratuita para instalações locais do Wordpress. Assim, você pode baixar o Vekinsta e instalar o Wordpress localmente em seu computador para acompanhar e aprender conosco No meu caso, estou usando meu próprio servidor web. Eu uso isso para fins educacionais para criar sites com facilidade. Talvez eu te mostre isso em outro curso de qualquer maneira. Então, primeiro passo, você precisa de um site do Word Press. Em seguida, faremos login no painel. Vou inserir minhas credenciais e, em seguida, basta acessar os Plug-Ins aqui e clicar em um U Plug In para criar ferramentas Precisamos principalmente de um plug-in É chamado de plug-in de trecho de código WP. Isso nos ajudará a personalizar nossas ferramentas com códigos personalizados. Você verá isso mais tarde no curso. Instale e ative. É isso mesmo. Agora temos nosso site de imprensa com versão gratuita do código WP instalada Estamos prontos para começar a criar nossa ferramenta. 3. Aula 3: Ok, amigos. Portanto, essa é a nossa estrutura básica de ferramentas. Se você entende isso, talvez possa criar qualquer ferramenta que quiser, uma ferramenta poderosa de IA. Primeiro, temos nosso front-end, onde o usuário insere um tópico e clica em Gerar. Quando o usuário clica em Gerar, a solicitação vai para nosso back-end do Wordpress, nosso painel Deixe-me mostrar isso, esse é o front-end. Entraremos em um tópico, selecionaremos um tipo de conteúdo, então essa é a entrada do usuário e, em seguida, o usuário clica em Gerar Clicamos em Gerar. Essa solicitação voltará ao nosso painel do Wordpress. Esta é a parte de trás, mais precisamente do plug-in de trechos de código Adicionaremos um trecho e conectaremos o front-end a esse trecho. Novamente, clicamos A solicitação foi enviada para o final de nossos trechos. Agora, os trechos, nossa palavra recuada. Vamos nos conectar com a IA aberta para gerar o conteúdo ou os resultados com inteligência artificial. Com a IA, recuperaremos os resultados. E então eles foram pressionados para trás e nós os passaremos para a frente. E, novamente, voltando aqui, obtemos os resultados do Y aberto para os trechos de código do WP E esse trecho os passará novamente para nossa frente e os mostraremos ao usuário nesse estilo incrível Então, uma última vez, temos a interface, a interface, o front-end, o usuário insere a entrada. Clicamos em Gerar. A solicitação será enviada para nosso back-end para obter trechos de código. Em seguida, os trechos de código se conectarão à API I aberta para gerar o conteúdo Recuperaremos o conteúdo e mostraremos ao usuário no front-end. Mais uma vez, espero que você tenha entendido . Não esqueça. Sempre que você sentir que algo não está claro, você precisa de mais detalhes Estou aqui para te ajudar. Basta postar suas perguntas. Eu estarei aqui quase todos os dias para ajudá-lo a responder a qualquer pergunta que você tenha. Não siga em frente. Se você encontrar algo obscuro, pare, pergunte-me, esclareça as coisas e continue 4. Aula 4: Ok amigos, neste vídeo vamos jogar com IA e carregar o animal de estimação. Acho que você conhece o ChagPT. Normalmente, quando você deseja gerar algo com o CharGPT, basta dizer Por exemplo, três trechos para o meu vídeo sobre marketing, qualquer coisa parecida É um prompt básico muito simples, do qual eu não gosto. Você verá por que agora Chip dirá: ok, eu ficaria feliz em ajudar e começar gerar e assim por diante. Isso é bom. Se você é iniciante, pode fazer isso. Mas estamos aqui para aprender algo além dos iniciantes. Vamos abrir outro bate-papo. Vamos ver, outro aviso básico. Ainda estamos no nível iniciante aqui, mas um pouco, eu aumentei o prompt Dizemos que ele, como redator especialista especializado em geração de ganchos, sua tarefa é gerar três ganchos para o tópico a seguir E você pode passar um tópico aqui entre parênteses e depois usá-lo em algo como um A saída que estamos definindo, a saída deve ser apenas a lista de ganchos com seu tipo Em seguida, adicionamos a coluna da lista de ganchos e clicamos na areia e você não vê diferença Chagipeti gerará diretamente os ganchos, a lista e informará o gancho de perguntas, o tipo do gancho, o gancho de exemplo e assim por diante Então eu acho que isso é melhor se você está construindo uma ferramenta, você quer apenas a saída. Então, o truque aqui é usar isso em seu prompt. Não sei se você está no meu site e conferiu meu curso de engenharia rápida ou talvez tenha assistido ao meu curso gratuito no meu canal do Youtube. É um dos melhores cursos engenharia rápida no Youtube. Quase 1 milhão de visualizações agora, com quase 35.000 curtidas Não estou me gabando aqui, mas eu realmente trabalhei duro neste curso gratuito no E você pode conferir os comentários abaixo para ver as avaliações desse curso gratuito. Você pode ir agora e verificar de qualquer maneira, voltando ao Cha GPT Portanto, esse é o prompt básico que você pode usar para gerar ganchos Como mencionei, ainda estamos em um nível básico. Nós apenas ajustamos o prompt com algumas dicas rápidas de engenharia, adicionando a função e adicionando a saída E adicionando isso no final para gerar apenas os ganchos diretamente Agora vamos um pouco além do nível iniciante e mostrar de alguma forma um prompt avançado Mais uma vez, vou abrir o chat. E aqui está meu novo aviso. É de alguma forma grande, você saberá o porquê agora. Agora, o prompt é quase o mesmo em termos de definição de um rolo. Mas agora você pode ver que a tarefa está definida aqui. Sua tarefa é analisar os exemplos de ganchos fornecidos e, em seguida, usar os principais modelos adequados para gerar os três novos ganchos para o tópico a seguir e usá-los desta forma saída deve ser apenas a lista de ganchos com o Agora eu forneço os exemplos de ganchos. Nesse prompt, estamos alimentando nossa ferramenta ou nosso prompt com os dados que coletamos Não se trata simplesmente de ganchos genéricos gerados pela IA. Estou pedindo que a IA gere com base em meus próprios exemplos e modelos que coletei e sei que está funcionando. E então a lista novamente para gerar somente os ganchos é executada. E agora a saída terá a mesma aparência, mas o conteúdo é diferente. Está usando meus modelos. Agora, meus tipos de ganchos são como a entrada em questão, o fato, a chamada à ação e assim por diante. Ele escolherá o melhor modelo adequado ao tópico e ao caso de uso. Novamente, voltando ao meu canal no Youtube, não sei se você está seguindo. Publiquei um vídeo há alguns meses sobre como criar PTs personalizados da maneira certa. Neste vídeo, mostrarei como criar PTs personalizados que realmente vendam e se destaquem na concorrência A maneira certa de criar o GPT. Mencionei que uma das melhores maneiras é criar uma GPT com base em seus próprios dados Outro exemplo, se você entrar na minha seção de ferramentas, temos o gerador de títulos do Youtube. Muitas pessoas criam essas ferramentas. Bloqueie o gerador mais apertado para o gerador mais apertado. Mas a diferença aqui é que, se selecionarmos um tópico e clicarmos em Gerar, o prompt que estou usando por trás dessa ferramenta não é um prompt qualquer. Ele também se baseia nos meus principais modelos que eu colecionei. Se você for aqui, deixe-me mostrar essa dica como especialista, Youtube blá, blá, blá Estou compartilhando aqui meus modelos de títulos bem-sucedidos do Youtube. Portanto, o prompt está usando meus dados que eu sei que funcionam e gera títulos com base nisso. Essa é a importância de conectar suas ferramentas aos seus próprios dados. É assim que você se destaca na competição, porque agora qualquer pessoa pode criar um gerador de ganchos com IA, um gerador de títulos Utu ou qualquer gerador Mas o prompt que você cria é diferente. É por isso que sempre menciono aprender engenharia rápida da maneira certa e entender a importância de adicionar seus próprios dados ao criar ferramentas de IA. Portanto, esse é o prompt que você usará em nossa ferramenta. Posteriormente, falaremos mais sobre um prompt mais avançado que nos permitirá e nos ajudará a criar essa incrível interface de usuário. Você pode ver aqui a interface estruturada que temos. Outra solicitação nos ajudará a fazer isso de qualquer maneira. Por enquanto, espero que você tenha entendido. Você pode usar um prompt básico ou um prompt avançado como o meu baseado em modelos e dados reais de sucesso. A propósito, todas as instruções, tudo será anexado às palestras Não se preocupe em copiar ou escrever isso. Vou anexar todas as instruções e os scripts. Tudo o que usaremos será anexado a este curso. 5. Aula 5: Ok amigos, na última palestra, mostrei a vocês o prompt que vamos usar e geramos os ganchos Mas dentro do cha GPT temos os ganchos. Nossa, perfeito. Mas agora, como passar para o Word Press. Queremos gerar ganchos dentro do word press. É disso que trata o curso. Nesta palestra, vamos nos aprofundar um pouco mais Vamos criar o back-end. Você se lembra dos trechos de código do WP, esse plug-in. Você se lembra da estrutura, do back-end do Wordpress que se conectará ao open para gerar os ganchos para nós Agora vamos configurar essa parte aqui. Vamos conectar o back-end à IA aberta para gerar os ganchos internos ou conectar trechos de código do WP Vamos criar e usar o trecho. Vou selecionar Usar código personalizado. E agora vou chamar esse trecho de Basic Open AI Começaremos o exemplo básico para entender como as coisas funcionam. Selecione o tipo de código como trecho de PHP e bum, aqui está o Não se preocupe, eu sei que você pode pensar agora. Ok, eu não sou um desenvolvedor. Não consigo criar esses scripts ou esses trechos. Eu não conheço a HP. Eu também não conheço a HP. Eu nunca escrevi uma única linha de código em PHP. Acabei de conversar com o ChagPT e gerei essa função e estou usando e está perfeita E se você conhece um pouco de codificação, pode entender esse script apenas folheando-o. Então, aqui estamos definindo o tópico como uma entrada. E esta é a nossa solicitação para gerar três ganchos para um blog sobre determinado tópico Em seguida, inserimos a IA aberta, URL, a API do open I. Em seguida, inserimos nossa chave de API e construímos a chamada e, em seguida, enviamos uma chamada para a API para abrir a IA. E aqui estamos lendo a resposta e enviando-a de volta. É isso mesmo. Novamente, não se preocupe com os detalhes aqui, a função está funcionando perfeitamente. Você pode simplesmente copiá-lo e usá-lo em seu site. Esse é o exemplo básico de como gerar texto com IA. Com a IA aberta, ative esse script. Mas lembre-se de inserir sua própria chave de API aqui. Se você não sabe como simplesmente abrir, clique na API de registro. Simplesmente aqui, acesse as chaves de API. Clique em, crie uma nova chave secreta. E eu vou dizer que as ferramentas testam qualquer coisa para mim. Agora, crie uma chave secreta, copie-a, volte aqui, cole a chave e salve o trecho Perfeito. Agora temos a função salva dentro de trechos de código Agora, para garantir que essa função esteja funcionando em seu site, queremos testá-la antes de criarmos a interface , o front-end e assim por diante. Queremos ter certeza de que isso está funcionando e estamos recebendo uma resposta da IA aberta para testar isso. Temos muitas ferramentas diferentes. Podemos usar um aplicativo chamado Postman. Se você tiver o código do Visual Studio, instalei o plug-in ou a extensão Thunder Client Você pode usá-lo para testar ou até mesmo usar ferramentas online como esta Rock Been. Vou deixar os links e tudo isso anexados. A ideia é que você queira testar essa chamada de API em nosso site. Esta solicitação ou site. Farei isso agora no código do Visual Studio e online para mostrar diferentes métodos dentro do cliente. Aqui, selecionamos a postagem como uma solicitação, como o tipo de solicitação. E então você obtém o URL do seu site assim. Você cola aqui e diz Sp admin, admin Ajax, Php. Esse é o URL que vamos usar. Depois vamos para o corpo, depois formamos o código, adicionamos o nome como ação. É o nome da função. Aqui, adicionamos o parâmetro que é o tópico em nosso caso. Deixe-me te mostrar isso. A ação é o nome dessa função. Nós copiamos isso. Essa é a ação que colamos aqui. Se você olhar dentro da função, temos o tópico como parâmetro. Nós apenas copiamos esse passado aqui, veja, nós colamos aqui. Agregamos um valor como marketing digital, qualquer coisa, qualquer entrada que você quiser. Se tivermos vários parâmetros, podemos adicioná-los. Veremos isso daqui a pouco. Temos o nome da ação, o nome da função e o tópico como parâmetro. Clique em enviar. Você pode ver agora que recebemos uma resposta da IA aberta na seção de conteúdo. Aqui temos nossos ganchos. Veja, aqui estão nossos ganchos. O mesmo se você quiser testar com essa ferramenta on-line aqui, basta adicionar o URL no conteúdo. Você seleciona o URL do formulário codificado, adiciona o tópico da ação e clica em Enviar Você pode ver aqui embaixo que temos a resposta para garantir que nossa função esteja funcionando perfeitamente. Agora, e se quisermos que a resposta contenha apenas os títulos? Não precisamos de todas essas informações da IA aberta, como o objeto, o modelo, os tokens e o que quisermos, os ganchos gerados, como podemos extrair apenas esse valor aqui O que vou fazer simplesmente é mudar a resposta que recebo desse trecho Novamente, usei o GP para gerar isso. Eu não escrevi nenhum desses códigos. Você pode ver simplesmente que estou aqui navegando pelo objeto de dados Estou selecionando opções, a primeira opção, a mensagem e o conteúdo. Se você voltar aqui, verá que temos opções. Então temos o primeiro , já que é uma matriz, depois temos a mensagem, depois temos o conteúdo, da mesma forma que eu acessei o conteúdo. E devolva a atualização do conteúdo. Agora vamos voltar e testar o mesmo envio de chamadas. Você verá que agora eu recebo apenas o conteúdo, os ganchos diretamente. E é isso que queremos. Queremos o conteúdo gerado diretamente para que possamos acessar e mostrar ao usuário na interface do usuário posteriormente. Voltando ao nosso trecho, você vê aqui nesta função básica, que estamos usando apenas o tópico como parâmetro Temos apenas uma entrada em nosso prompt; se você se lembra, temos duas entradas Temos o tópico e temos onde vamos usá-lo. Lembre-se de que aqui temos duas entradas, o tópico e o tipo de conteúdo, onde vamos usar esse gancho em um vídeo curto, em uma postagem em bloco e assim por diante Temos duas entradas, precisamos atualizar isso com outra entrada Simplesmente, vamos alterar os parâmetros e o prompt dessa forma. Temos outro tópico, temos o parâmetro de uso. Temos o novo prompt. Se, lembre-se de voltar aqui, nós temos, eu acho, este. Sim, esse prompt com dois parâmetros. Aqui está meu aviso. Temos o parâmetro de uso e temos o parâmetro tópico. Você pode adicionar 34 entradas, o que quiser, apenas adicionando-as ao prompt dessa forma Agora, se eu atualizar esse script e voltar aqui para testar, adicionarei agora o uso. Eu vou dizer blog, por exemplo. Clique em Enviar e aperfeiçoar, temos nosso gancho de resposta à pergunta e o exemplo do gancho, e assim por diante. É assim que você pode criar uma função interna ou um trecho dentro dos trechos código do WP para conectar seu site Wordpress à pen AI Para criar qualquer ferramenta de IA, você precisa entender o conceito de parâmetros e o prompt. Altere as entradas, altere o prompt e você terá uma ferramenta de IA, talvez um gerador de blocos mais apertados, talvez um escritor de IA Qualquer coisa, basta decidir suas entradas, criar seu prompt. E você tem sua ferramenta, a parte traseira da sua ferramenta. Agora é hora de criar a interface do usuário. Até agora, criamos o back-end. Geramos os ganchos com IA. Agora, queremos retornar os resultados e criar a interface do usuário no Wordpress. 6. Aula 6: Ok, amigos, agora é hora de começar com o front-end para criar a interface do usuário, a interface do usuário. Então, para simplificar, começaremos com a interface básica do usuário. Se você se lembra, temos duas entradas. O usuário insere um tópico, selecionamos o caso de uso ou o uso em um pequeno vídeo, em um blog, postagem, qualquer coisa, e depois clicamos em um botão para gerar a saída, os ganchos e os Os ganchos aparecerão em uma caixa. Temos principalmente uma caixa de texto para inserir um tópico, temos uma caixa suspensa para selecionar o caso de uso. Temos um botão e uma caixa de saída. Vamos criar isso. Então, o que eu fiz simplesmente foi abrir o ChagIpt e pedir para criar a interface do usuário para mim ChagIpt e pedir para criar a interface do usuário para Você vê esse aviso? Eu disse que você é um especialista em HTML. Sim, S. E sua tarefa é me ajudar a criar uma interface de usuário profissional, mas simples e limpa, para minha ferramenta, o gerador de ganchos. A ferramenta tem duas entradas principais, Textbox e Drop down, e os resultados serão exibidos em um Em seguida, pedi que ele gerasse apenas o design para mim, sem nenhum outro código, apenas o código HTML e CSS, o front-end do código de design e se certificasse de alinhar todos os controles corretamente e adicionar o espaçamento adequado entre eles Eu uso esse prompt e simplesmente ele gerou para mim o código HTML da ferramenta e o estilo CSS Acabei de copiá-lo e usá-lo diretamente. Lembre-se, vou deixar todos os códigos, todas as instruções, tudo Não se preocupe com nada agora. Você encontrará todos os códigos anexados ao curso. Mas, por favor, acompanhe. Agora, para entender o conceito e como eu construo a interface do usuário, eu simplesmente uso o CharGPT O que podemos fazer é copiar esse código e criar uma pasta U. Essa é uma maneira básica simples. Vou chamá-la de qualquer interface de usuário, por exemplo, e depois criar dois arquivos de texto. O primeiro é, por exemplo, a interface do usuário. E substitua XT por HTML para alterar o tipo do arquivo. E o outro, é chamado de Estilos para estilizar. Simplesmente, acesse o ChagPT, copie o código HTML e o código CSS e cole Basta clicar e editar com o bloco de notas, por exemplo, e colar o código aqui. Em seguida, basta abrir esse arquivo e você poderá ver nossa incrível ferramenta geradora de ganchos. É claro que não está funcionando no momento, mas você pode ver que podemos inserir um tópico aqui. Podemos selecionar um tipo como bloco, postagem, vídeo, qualquer coisa, e clicar em Gerar para obter os resultados nesta caixa , caso haja algum problema de espaçamento ou talvez haja algo errado no design Você pode simplesmente conversar com o ChagPT e pedir para resolver o problema É por isso que eu sempre encorajo você e digo que você aprenda pelo menos codificação básica, CML básico, CSS básico, script Java básico Caso você queira gerar ferramentas e gerar código com o ChagPT para entender o que está E se você quiser perguntar e resolver algo, pode perguntar para entender o que está acontecendo de qualquer maneira. Então, essa é a nossa interface de usuário. Nossa interface básica agora está pronta. O segundo passo é conectar essa interface, esse botão, ao nosso back-end war press. Lembre-se de que criamos essa função aqui que gera os ganchos Agora, queremos conectar essa interface de usuário ao nosso trecho. Isso é o que vamos ver na próxima palestra. 7. Aula 7: Ok, então até agora criamos o back-end e o front-end. Agora é hora de conectar os dois. Nesta palestra, vamos trabalhar com essas setas. Vamos conectar o front-end ao nosso back-end. Vamos ver como, antes disso, talvez você esteja se perguntando se criamos essa interface básica. Mas na introdução eu mostrei essa interface, essa interface de usuário profissional Não se preocupe, começaremos com esse exemplo básico e, posteriormente, mostrarei como otimizar e criar essa interface de usuário. Basta me acompanhar agora, passo a passo , e abordaremos tudo. Temos esse front-end HTML CSS. Precisamos nos conectar agora com nosso trecho de código aqui. Usando o script Java, voltando ao ChagIpt depois de gerar o front-end para mim, eu simplesmente solicito novamente ele gere e conecte a interface do usuário ao Eu disse, por favor, gere o código JS para chamar minha palavra, pressione a função Ajax e mostre os resultados na área de texto Certifique-se de adicionar um carregamento enquanto a operação estiver em andamento. E aqui está minha função Ajax. E passei a função completa do Ajac, o trecho de pressionamento de palavras, para que ele possa entender melhor como gerar o código de gerar o Novamente, ele gerou um script simples. Você pode ver o roteiro. Isso o gerou. Acabei de copiar Voltando para nossa pasta agora aqui, crio um novo arquivo de texto e vou chamá-lo script JS sim e simplesmente editar com o Bloco de Notas e colar o código Aqui você pode ver que aqui estão obtendo o tópico e o tipo de contexto que é o uso em nosso caso. Você vê definindo aqui as variáveis, obtendo o valor e simplesmente chamando a função básica de gerar ganchos ao pressionar e , em seguida, obter os resultados na área de resultados Aqui precisamos fazer uma coisa, alterar o URL de Lee do seu site. Eu adicionei esse comentário aqui, substitua um URL de Jack. Basta voltar ao nosso site, copiar isso, colar aqui e salvar. Agora vamos abrir novamente a interface do usuário. Insira um tópico, por exemplo, anúncios do Facebook, tutorial, qualquer coisa, e eu selecionarei aqui uma postagem em bloco, por exemplo, e clicarei em Gerar. Opa, recebemos um erro de falha na busca. Se você ver algo assim, a primeira coisa a fazer é abrir aqui as ferramentas do desenvolvedor no seu navegador e verificar o erro no console. Você vê que me diz que foi bloqueado pela política do CRS. Às vezes, isso acontece quando você abre a ferramenta no navegador para corrigir isso. Volte ao seu trecho aqui e adicionaremos algumas linhas para desativar essa política de CORS do navegador É algo relacionado à segurança de origem cruzada. Quando você chama sua função de domínios diferentes, ela está de alguma forma fora do escopo por enquanto Mas agora vamos consertá-lo. Apenas para continuar nosso trabalho, adicionarei as seguintes linhas simplesmente aqui. Estou dizendo para permitir todas as origens. Não impeça que nenhum domínio ou qualquer outro domínio acesse essa atualização de função E agora vamos tentar novamente, atualize a ferramenta. Anúncios do Facebook para trabalhar, e vamos selecionar conversar, encerrar , gerar e aperfeiçoar Você pode ver agora que obtemos os ganchos na área de texto resultante. Perfeito. Selecione outra coisa, por exemplo, crescimento do Youtube, qualquer tópico, gere. Agora, a ferramenta está funcionando perfeitamente. Temos 123 ganchos. Perfeito. Agora, conectamos nossa interface de usuário básica ao nosso trecho de código de retorno 8. Aula 8: Ok, amigos. Então, até agora, criamos a interface do usuário, a parte traseira e, no Wordpress, conectamos a interface com o Wordpress. A ferramenta está gerando os ganchos. Tudo está perfeito, mas a ferramenta não está no Wordpress. Queremos publicá-lo em nosso site. Aqui neste site. Então, vamos fazer isso agora. Vou voltar aqui para o painel. Em seguida, pressione, vá aqui para Páginas e clique em uma página Agora, a maneira mais fácil e básica é simplesmente criar uma página como este gerador de ganchos, por exemplo. Então, aqui, adicione três blocos HTML. O primeiro é para o código CSS. Basta ir aqui até o arquivo, abrir os estilos. Por exemplo, aqui com o Bloco de Notas, basta copiá-lo e colar dentro desse bloco Em seguida, outro bloco para a ferramenta HTML, basta copiar novamente aqui, copiar e colar. Outro para Javascript, como este, abra e pegue o arquivo Javascript, copie e, novamente, cole aqui. Basta publicar a ferramenta. Existe uma maneira muito básica. Abra a página e você pode ver agora que temos o gerador de quem. Mas o design está quebrado. Por quê? Simplesmente porque se você quiser adicionar CSS e Javascript dessa forma, precisará adicionar e fechar tags. Basta adicionar aqui um estilo como este. Abra-o e depois copie-o. E desça e feche a etiqueta de estilo. Agora, para entender o estilo, o mesmo para Javascript, vamos dizer aqui script e descer e colar aqui E feche-o. Agora, atualize. Vamos ver agora a mágica, o que vai acontecer, refrescar e aperfeiçoar Agora você pode ver todo o gerador. Mas há um problema no design. Normalmente, você verá conflitos com um tema ou algo assim. Para corrigir isso, vamos voltar ao nosso painel do Wordpress e clicar em Temas de aparência. Vamos instalar outro tema. Por exemplo, adicionando. Vamos selecionar, por exemplo, Hello Elementor Activate Então, vamos fazer isso agora, atualizar, e você pode ver como a ferramenta aparece aqui O design ainda é ruim. Vou resolver isso agora mesmo. Mas vamos verificar se a ferramenta está funcionando novamente. Vou entrar em um tópico, selecionar algo, gerar e aperfeiçoar. A ferramenta está funcionando em nosso site Wordpress. Perfeito. Agora, a melhor abordagem, ou o que eu prefiro fazer, é instalar um plug-in chamado Elementor Elementor é um designer de páginas da web. Isso nos ajudará a projetar as páginas da web e a criar designs profissionais como os do meu site. se você entrar aqui no meu site, poderá ver aqui a ferramenta, os botões de compartilhamento, essas áreas rígidas e assim por diante E o menu e o elemento de rodapé ajudarão você a fazer isso Se você trabalha no Wordpress, acho que conhece o elemento. É um dos construtores de páginas da web mais populares para Wordpress, com 5 milhões de instalações Eu o instalei. Agora vá aqui para Páginas novamente ou para a mesma página com a qual trabalhamos. Onde estão as páginas da página? Todas as páginas o geram. Agora clique em Editar com Elementor. Vou deletar todos esses códigos. Agora, exclua a atualização e clique em Editar com Elementor. Esta é a nossa página, muito simples. Vou adicionar aqui um contêiner. Esse é o contêiner. Vou adicionar um bloco HTML, um bloco como este. Então, novamente, copiarei os códigos, começando com o controle de edição de estilo Vá aqui novamente, não se esqueça, adicionaremos estilo. Em seguida, adicionaremos o código HTML. E o código Javascript aqui é o código do script. Vamos copiar o código do script. Controle de script Controle C, temos o código HTML. Basta copiar e colar no meio. E você pode remover a seção da cabeça. Basta manter o código da ferramenta principal. E você verá isso agora, diretamente no construtor. Você pode ver que está um pouco grudado na parte superior. Como corrigir isso, por exemplo, você pode entrar no Navegador e clicar no contêiner Em seguida, seção de dança, temos a margem superior. Podemos adicionar, por exemplo, 100. E você pode ver, agora a ferramenta não está mais presa. De qualquer forma, a ideia é que você possa criar suas próprias páginas, selecionar o tema apropriado e colar o código HTML da ferramenta em sua página. É simples assim. Vamos visualizar as mudanças como gerador de suínos Novamente, você pode ocultar o título, se quiser, ou se esconder da ferramenta dessa forma. Basta selecionar o código HTML aqui. Você verá no HTML que temos a tag H one do gerador ho Você pode excluir essa atualização. Agora, teremos na ferramenta como eu faço aqui, você pode ver que esse título está com elementor, esse subtítulo está com A ferramenta de código está aqui. Não tenho nenhum título dentro da ferramenta. Acabei de colar o código principal nessa área. Vamos voltar aqui. Vamos testá-lo, adicionar, gerar e está funcionando perfeitamente. Muito bom Agora temos nossa ferramenta em nosso site Wordpress. Novamente, se você enfrentar algum problema, estou aqui para ajudá-lo. A qualquer momento, você também pode conversar com o ChaChipt. Se você enfrentar algum problema de design, estilo ou algo assim, ele pode corrigi-lo para você 9. Aula 9: Ok, amigos, nesta palestra, queremos passar desse design básico para essa interface de usuário limpa e profissional Esta palestra é muito importante se você entender o conceito por trás dessa palestra Você pode criar praticamente qualquer ferramenta que quiser. Vamos voltar aqui para a interface básica. Se você observar os resultados, a resposta, é texto puro. O principal problema aqui, por favor, foque, é que temos o resultado, pois esse texto pode ser mostrado em uma área de texto como esta aqui. Mas é muito difícil transformar esse texto nesse design de incêndio criminoso, nessa análise organizada de dados de design Dizemos que entra lixo, sai lixo. Se você tiver dados incorretos, terá resultados ruins. Se quisermos aplicar esse conceito no nosso caso, se tivermos essa resposta ruim, que é um texto simples, é muito difícil ter esse design organizado. Para ter esse design organizado e estruturado, queremos resultados estruturados, respostas estruturadas. Então, como podemos fazer isso, como podemos recuperar e obter respostas estruturadas para criar qualquer interface de usuário que quisermos É aí que vem de novo. O poder da engenharia rápida e da criação da melhor mensagem Vamos voltar aqui para conversar com o GPT e abrir um bate-papo. Lembre-se de nosso aviso avançado nesta palestra. Nós vamos aplicá-lo. Nós vamos usá-lo. Estamos gerando ganchos com base em dados, lembre-se. E usamos esse truque de prompt para gerar diretamente a lista de prompts Você vê a lista de solicitações? Agora, queremos obter uma resposta estruturada. Queremos obter uma resposta organizada que possamos acessar facilmente para criar qualquer interface de usuário que quisermos. Aí vem nosso prompt super avançado. Vamos abrir novamente um novo bate-papo. E vamos dar uma olhada nesse novo prompt. Novamente, estamos gerando ganchos com base no exemplo de ganchos fornecido e em nossos Mas veja agora o que mudou. A saída deve ser somente um Jason válido da seguinte forma. E dei ao prompt um exemplo de como eu quero que a resposta se pareça com o tipo de gancho e com a resposta estruturada adjacente ao gancho. Se você não sabe o que é Jason, é simplesmente uma representação estruturada dos dados Em vez de ter um texto fictício, temos essa resposta estruturada E no final, eu disse que Jason se opõe. Portanto, podemos obter apenas a resposta direta de Jason. Vamos dar uma olhada nos resultados agora. Agora você pode ver que a resposta é Jason e temos três ganchos organizados para que possamos acessar cada um sozinho e acessar facilmente para criar interfaces de usuário com base nisso Eu falei sobre isso com mais detalhes. Em dois posts de bloco, este sobre cadeias de funções e este sobre como criar ferramentas rápida, compartilhei meus scripts aqui. Vou criar um link para essas postagens do bloco se você quiser saber mais. Mas, novamente, o que você precisa entender se quiser criar interfaces de UIs organizadas é obter uma resposta estruturada do modelo de IA do modelo de linguagem da GPT, no nosso caso, ou da API aberta, no nosso caso Então, temos essa saída agora, podemos usá-la para criar nossa interface de usuário. Espero que você tenha entendido a ideia novamente Se tiver alguma dúvida e achar que algo não está claro, estou aqui para ajudá-lo Então, vamos atualizar nossa função agora com esse prompt. Vou copiá-lo e voltar ao nosso trecho aqui. E agora vamos substituir nosso prompt. Você vê aqui o aviso novamente para colar. Mas agora temos um pequeno problema. Normalmente, as sequências de caracteres em qualquer linguagem de sondagem ou texto são colocadas entre dois códigos duplos Como temos aqui códigos duplos dentro do nosso código ou dentro do nosso prompt, precisamos escapar desses códigos duplos. Só precisamos adicionar uma barra invertida como essa para que possamos escapar desses caracteres Basta adicioná-los um por um. Não se esqueça de alterar as entradas novamente. Vou excluir o marketing digital. Aqui estou fazendo isso, muitos precisarão mostrar como, caso você queira se testar. Você adiciona dois pontos e adiciona a variável dentro. Novamente, para os códigos duplos de idade. E é isso. Acho que o prompt agora está pronto. Nós o adicionamos. Ainda temos um aqui. Esse aqui. Ok, perfeito. Vamos tentar agora. Vou salvar a atualização, recortá-la atualizada Vamos agora para nossa ferramenta. Mais uma vez, eu atualizo aqui. Insira um tópico, anúncios do Google, por exemplo. Qualquer coisa gerada e perfeita. Você pode ver agora que temos a saída estruturada de Jason, perfeita Agora temos essa saída de Jason. Podemos criar a interface do usuário com base nisso. Espero que você tenha entendido a ideia e tenha entendido o que fizemos aqui. Mais uma vez, lembro que o encorajo a aprender, engenharia rápida, como criar instruções como essas Isso ajudará você não apenas a criar ferramentas, mas a tirar o máximo proveito dos modelos de linguagem. Se você não pode investir em cursos premium, pode conferir meu curso gratuito no Youtube. Vou manter links para todos esses recursos e anexá-los a essas palestras De qualquer forma, agora temos a resposta estruturada. Agora é hora de usar essa resposta para criar essa interface de usuário, essa interface de usuário. Agora, como este não é um curso de HTML, CSS e Javascript, e está fora do escopo ensinar isso agora, o que fiz foi criar a interface do usuário, o modelo básico para você, e compartilharei com você neste curso. Podemos usá-lo e, se você quiser ajustar, mudar alguma coisa, peça ao GPT que mude algo para Depende de você. Eu vou te dar de graça. Pode usá-lo diretamente em seu site. E, a propósito, esse modelo pode ser usado para geração de títulos, pode ser usado para muitas ferramentas, qualquer coisa que tenha uma entrada ou duas entradas e gere uma lista de coisas De qualquer forma, o que vamos fazer simplesmente é voltar para nossa pasta e criaremos três arquivos. Novamente, a mesma operação, mas agora temos apenas um novo código, o novo código de design. Você encontrará os arquivos anexados a esta palestra. Basta obtê-los, baixá-los e você encontrará I avançado, script avançado de estilo avançado. Se você abrir essa interface avançada, verá o novo design. Vamos experimentá-lo. Vou dizer aqui, por exemplo, dicas de CO para um documentário, por exemplo, gerar e aperfeiçoar. Você pode ver agora que temos a interface do usuário funcionando perfeitamente. Apenas um lembrete, ao copiar o script, abra com o Bloco de Notas ou qualquer editor que desejar E altere o URL base aqui, seu site, URL, pronto. E você terá um gerador de pessoas totalmente funcional. E então você pode copiar, da mesma forma que fizemos com o design básico, podemos copiar o Wordpress e publicá-lo em seu site como eu fiz aqui, e eles o têm dentro do meu site Wordpress. Nas próximas palestras, veremos como podemos restringir o acesso a essa ferramenta apenas para usuários logados E como implementar essa ferramenta com o sistema de pontos. Se você observar aqui, se clicar agora em Gerar, os pontos diminuirão. Portanto, estamos consumindo pontos ou créditos ao usar as ferramentas. Então, é como criar um SAS usando essas ferramentas. Veremos como fazer isso também nas próximas palestras. 10. Aula 10: Ok, amigos, vamos ver agora como podemos restringir o Ace a essa ferramenta apenas para usuários logados. Então essa é a nossa ferramenta. Mais uma vez, vou atualizar e agora qualquer pessoa pode usá-lo. O que podemos fazer simplesmente é voltar ao nosso trecho. Onde está nosso trecho aqui? Antes de chegar ao código, o código principal, verificaremos se o usuário está logado Veja como é fácil fazer isso com a guerra. Pressione essa linha de código simples. Se o usuário não estiver logado, você verá esse ponto de exclamação Se você fez alguma codificação antes, sabe que isso significa que, se nenhum usuário estiver logado, enviarei de volta o login primeiro. É isso aí, atualize. E agora, o que há de bom nesse modelo, eu também criei a lógica de login. Vamos ver isso. Vou dizer aqui uma dica de CO novamente, qualquer coisa clique em Gerar. Agora, ele dirá que você precisa fazer login primeiro e clicar em um botão. E levaremos você para a página de login. Agora, neste caso, coloquei minha página de login de usuário. Você precisa alterar a CRL. Vou te dizer onde daqui a pouco, mas agora você pode ver como é fácil proteger suas ferramentas contra acesso não autorizado Somente usuários logados podem acessar essa ferramenta. Dessa forma, você pode coletar e criar listas de e-mail ou, como você verá a seguir, podemos permitir que apenas usuários com créditos ou pontos suficientes usem essa ferramenta. Basta adicionar essa pequena linha de código e pronto. Vamos voltar ao script avançado e abrir a edição do arquivo JS . E se você descer, verá que temos esse show pop-up, pop-up de login. Você pode ver aqui o link para minha página de login de usuário. Basta alterar isso e você também pode alterar a imagem se quiser o PNG sem eixo que você pode ver aqui. Vamos voltar novamente. Esta imagem aqui, você pode alterá-la se quiser. Depende de você. É assim que podemos restringir o acesso aos usuários conectados. Vamos implementar o sistema de pontos e começar a vender essas ferramentas na próxima palestra. 11. Aula 11: Tudo bem, amigos. Agora vamos ganhar algum dinheiro com nossas ferramentas. Vamos transformar nosso site Wordpress em um negócio. Voltando ao meu site, você verá novamente, sempre que usar a ferramenta, clique em Gerar. Veja o saldo de pontos aqui, diminua. Você pode ver que estamos consumindo nossos pontos. Se você clicar nos pontos aqui, você será direcionado para a página de pontos, onde você poderá comprar power points de volta. É como qualquer sistema CT, qualquer empresa Sa, mas no Wordpress. Vamos ver como fazer isso nesta palestra. Primeiro passo, voltamos ao nosso painel do Wordpress. Queremos instalar um plug-in que gerencie facilmente o sistema de pontos ou crédito. Volte aqui para conectar, adicionar e conectar. É chamado meu Crid. Instale-o. Aqui estamos. Instale e ative. Perfeito. Vamos guardar isso por enquanto. E aqui estamos. Nós temos os pontos. Você pode mudar o nome se quiser créditos ou algo assim. Mas agora se concentra no ponto principal. Vá até os usuários. Aqui, todos os usuários. Então você pode ver que agora o administrador tem zero pontos. Você pode clicar em Ajustar. E vamos adicionar alguns pontos por enquanto, atualizar. Agora podemos ver que tenho 100 pontos. Perfeito, eu posso testar com. Agora, o que queremos fazer é se o usuário estiver logado e clicar em Gerar, queremos verificar se ele tem o equilíbrio certo para usar a ferramenta Vamos ver como fazer isso de novo. Dentro do War Press, volte aos cold snippets. Os trechos frios E abra nosso trecho de dois geradores que criamos anteriormente. E o que vamos fazer agora, você pode ver aqui, vamos mover isso aqui. Se o usuário estiver logado, vamos nos mover e agora vamos verificar o saldo Ok, e você adicionará esse código simples. Vamos obter o ID do usuário. O usuário está logado Aprovamos essa condição para que possamos obter o ID do usuário. Em seguida, obteremos o equilíbrio do usuário com essa função simples. Agora você vê como é fácil implementar o sistema de pontos com o word press. Como essas funções são integradas, se o saldo for menor que cinco, não enviaremos nenhum saldo. É simples assim. Uma última coisa: antes de enviarmos a solicitação de volta ao usuário, queremos garantir que estamos deduzindo pontos Também temos esse método de subtração. Passamos o nome dos dois e o ID do usuário. Quantos pontos queremos deduzir. E uma descrição simples e um horário. E pronto, atualize o script. E vamos ver agora a mágica. Antes de vermos a mágica, em vez de testar o código aqui, vamos adiá-lo. Pressione o site novamente. Onde está minha página? Aqui está minha página. Clique com elementor. Vou atualizar os códigos. É simples. Já fizemos isso antes. Basta mover os códigos HTML, CSS e Javascript desses códigos. E coloque aqui, em vez desse código, uma cópia de estilo avançada. Novamente, lembre-se de que adicionamos a tag de estilo. Colamos o estilo aqui. propósito, vamos ver essa folha de estilo é usada para estilizar todas as minhas ferramentas. Vamos copiar daqui, a seção principal, e isso é copiar e colar aqui. Você vê agora que a ferramenta apareceu e ainda temos o script. Vamos fazer com que ele controle C e cole. Perfeito. Vamos atualizar. Não se esqueça de que você precisa atualizar o URL e os URLs das imagens Você lembra que aqui temos o pop-up de login, temos a fonte da imagem. Em vez disso, precisamos inserir uma URL aqui para acessar uma imagem pública. Então, para fazer isso, vou voltar ao meu painel do Wordpress. Clique aqui para adicionar novos arquivos de mídia à mídia. Selecione Arquivo e eu vou fazer o upload das imagens Sem acesso e sem equilíbrio. Png é perfeito. Vamos copiar o URL para a área de transferência do URL público e colocá-lo aqui Novamente, eu encorajo você a aprender HTML, CSS e Javascript básicos. Isso vai te ajudar muito. De qualquer forma, novamente, vamos pegar o saldo sem saldo e colá-lo. Aqui estamos, Update. Agora vamos testar a ferramenta aberta. Agora, basta dizer, por exemplo, os anúncios do Facebook são novamente gerados e aperfeiçoados. Você pode ver que a ferramenta está funcionando perfeitamente. Se você atualizar a página, verá menos cinco deduzidos pelo Esse pop-up está embutido no plugue microd. É realmente perfeito. Vamos voltar ao nosso painel, todos os usuários, e você pode ver que agora temos 90 pontos. Vou testar isso novamente, gerar e-mail. Agora, se formos , deve ser 85. Vamos atualizar e aperfeiçoar, você pode ver 85 pontos O sistema de pontos também está integrado e funciona perfeitamente. A última etapa a ser feita é permitir que as pessoas comprem pontos. Você pode fazer isso com duas opções. Aqui você tem gateways intermediários, que podem ser implementados diretamente no plug-in, como usar Paypal, Scrill, qualquer Ou você pode usar, como eu faço no meu site, eu uso o Woo Commerce Assim, você pode instalar o Woo Commerce. Acho que se você já trabalhou antes com o Wordpress, acho que conhece o Woocommerce, é o número um Conecte-se para vender produtos no Wordpress. Ok, agora vá aqui para produtos, adicione um novo produto e simplesmente diga, por exemplo, 1.000 pontos. E a ideia aqui principalmente é marcar essa caixa de recompensa com pontos e somar o número de pontos. Agora, sempre que alguém comprar este produto , receberá 1.000 pontos em seu saldo É isso aí, você tem o sistema de pontos e agora os usuários podem acessar suas ferramentas somente se estiverem logados E sempre que o usarem, consumirão seus créditos ou pontos. Agora, voltando ao meu site, se você notar que tenho aqui o saldo de pontos no cabeçalho. Eu também tenho esse modelo onde mostro os custos e isso para recarregar pontos de energia e assim por diante Se você estiver interessado em aprender mais sobre como criar um Wordpress e roubar todos os meus códigos e assim por diante, confira meu outro curso, transforme o word press em AS Não sei se você é um membro poderoso. Se estiver, você pode acessar este curso gratuitamente. Caso contrário, você pode conferir no meu site. Aqui você pode aprender tudo em detalhes sobre como eu construo meu sistema de ferramentas. Não se esqueça, se você enfrentar algum problema, você tem alguma dúvida, qualquer coisa. Eu estarei aqui para ajudá-lo quase todos os dias.