Como ter o ChatGPT no seu site em PHP

Buckminster

Códigos fontes prontos (PHP, HTML, JavaScript e CSS) para adaptar e implementar o ChatGPT no seu site.

[ Hits: 13.900 ]

Por: Buckminster em 26/01/2023

13 0

Denuncie Favoritos Indicar Impressora

Arquivo index.php

Arquivo index.php para a coisa ficar completa, mas você pode adaptar os arquivos para o teu site já em produção.

Aqui foi utilizada modal com o ChatGPT dentro dela. Você não precisa utilizar modal para abrir o ChatGPT, pode fazer uma página html para isso, a liberdade é sua.

<!DOCTYPE html>
<html>
    <head>
        <!-- Agradecimentos a Cesar Szpak - Celke -   cesar@celke.com.br -->
        <meta charset="utf-8" lang="pt-br">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Eliza</title>
        <link rel="stylesheet" href="/caminho/do/arquivo/bootstrap.min.css">
        <script src="/caminho/do/arquivo/bootstrap.bundle.min.js"></script>
        <script src="/caminho/do/arquivo/jquery-3.6.3.min.js"></script>
        <style>
            @-webkit-keyframes glowing {
              0% { background-color: #0074d9; -webkit-box-shadow: 0 0 3px #0074d9; }
              50% { background-color: #ffffff; -webkit-box-shadow: 0 0 3px #ffffff; }
              100% { background-color: #0074d9; -webkit-box-shadow: 0 0 3px #0074d9; }
            }
            @-moz-keyframes glowing {
              0% { background-color: #0074d9; -moz-box-shadow: 0 0 3px #0074d9; }
              50% { background-color: #ffffff; -moz-box-shadow: 0 0 3px #ffffff; }
              100% { background-color: #0074d9; -moz-box-shadow: 0 0 3px #0074d9; }
            }
            @-o-keyframes glowing {
              0% { background-color: #0074d9; box-shadow: 0 0 3px #0074d9; }
              50% { background-color: #ffffff; box-shadow: 0 0 3px #ffffff; }
              100% { background-color: #0074d9; box-shadow: 0 0 3px #0074d9; }
            }
            @keyframes glowing {
              0% { background-color: dodgerblue; box-shadow: 0 0 3px dodgerblue; }
              50% { background-color: #ffffff; box-shadow: 0 0 3px #ffffff; }
              100% { background-color: #0074d9; box-shadow: 0 0 3px #0074d9; }
            }
            .button {
              -webkit-animation: glowing 4500ms infinite;
              -moz-animation: glowing 4500ms infinite;
              -o-animation: glowing 4500ms infinite;
              animation: glowing 4500ms infinite;
              animation-timing-function: cubic-bezier(0.9,0,1,1);
              font-size: 20px;
            }
            .buttonnn {
              -webkit-animation: glowing 4500ms infinite;
              -moz-animation: glowing 4500ms infinite;
              -o-animation: glowing 4500ms infinite;
              animation: glowing 4500ms infinite;
              font-size: 20px;
            }
            .fontes{
                font-family: sans-serif;
                font-size:104px;
                align-content: center;
            }
            .longovol{
                width: 20%;
                border-radius: 44px;
                box-shadow: 0px 0px 7px -2px #000; /*DH DV ES CS*/
            }
            .longovol1{
                width: 20%;
                margin-left: 20px;
                border-radius: 44px;
                box-shadow: 0px 0px 7px -2px #000;
            }
            /* Blue */
            .info {
              border-color: #2196f3;
              color: dodgerblue;
            }
            .info:hover {
              background: #2196f3;
              color: white;
            }
            .item-active {
              position: fixed;
              bottom: 25px;
              right: 85px;
              cursor: pointer;
              width: 91px;
              height: 74px;
              -moz-border-radius: 7px;
               -webkit-border-radius: 7px;
               box-shadow: 0px 0px 7px 2px #a9a9a9;
               -webkit-box-shadow: 0px 0px 7px 2px #a9a9a9;
               -moz-box-shadow: 0px 0px 7px 2px #a9a9a9;
                -moz-transform: translateX(10%);
                -webkit-transform: translateX(10%);
                transform: translateX(10%);
                -moz-animation: slide 2s linear;
                -webkit-animation: slide 2s linear;
                animation: slide 2s linear;
            }
            @-moz-keyframes slide {
                0% {
                    -moz-transform: translateX(50%);
                }
                50% {
                    -moz-transform: translateX(-50%);
                }
            }
            @-webkit-keyframes slide {
                0% {
                    -webkit-transform: translateX(50%);
                }
                50% {
                    -webkit-transform: translateX(-50%);
                }
            }
            @keyframes slide {
                0% {
                    -moz-transform: translateX(50%);
                    -webkit-transform: translateX(50%);
                    transform: translateX(50%);
                }
                50% {
                    -moz-transform: translateX(-150%);
                    -webkit-transform: translateX(-150%);
                    transform: translateX(-150%);
                }
            }
            @media screen and (max-width:576px) {
                .longovol{
                    width: 40%;
                    border-radius: 44px;
                    box-shadow: 0px 0px 7px -2px #000;
                }
                .longovol1{
                    width: 40%;
                    margin-left: 20px;
                    border-radius: 44px;
                    box-shadow: 0px 0px 7px -2px #000;
                }
            }
        </style>
    </head>
    <body><br>
        <div style="text-align: center; margin-top: 10%;  align-items: center;">
            <h4><strong><span class="fontes" style="color:#0074d9;">V</span><span class="fontes" style="color:red;">i</span><span class="fontes" style="color:orange;">v</span><span class="fontes" style="color:#0074d9;">a</span><span class="fontes" style="color:green;">O</span><span class="fontes" style="color:red;">L</span></strong></h4>
        </div><br><br>
        <nav style="text-align: center; align-items: center;">
            <form class="formi">
                <button type="submit" class="btn info button longovol" value="submit" id="vol" name="vol" formaction="/caminho/arquivo/index_fazalgumacoisa.php">Vol</button>
                <button type="submit" class="btn info buttonnn longovol1" value="submit" id="vol_1" name="vol_1" formaction="/caminho/arquivo/index_fazoutracoisa.php ">VOL</button>
            </form>
        </nav>
        <div class="item-active">
            <button type="button" class="btn btn-info position-absolute bottom-0 end-0" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-placement="top" title="Converse com a Eliza">
<span class="visually-hidden">Eliza - OpenAI</span>
                <img alt="*" src="/caminho/da/imagem/fcap.png" style="border:0px solid; width:65px; height:60px;">
            </button>
        </div>
        <div class="modal fade" id="exampleModal" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <script src="/caminho/do/arquivo/chamaEliza.js"></script>
            <script>
                $('#exampleModal').on('shown.bs.modal', function () {
                  $('#recipient-name').focus();
                });
            </script>
            <div class="modal-dialog modal-dialog-scrollable">
                <div class="modal-content">
                    <div class="modal-header bg-warning text-dark">
                        <h5 class="modal-title" id="exampleModalLabel">Converse com a nossa assistente virtual Eliza!</h5>
                          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                            <script>
                                $('#exampleModal').on('hidden.bs.modal', function(){
                                $("#form-eliza")[0].reset();   // reseta o form (apaga os dados dos campos)
                                window.location.reload(true); //Recarrega do servidor forçando nova requisição
                                //Element.innerHtml="";
                                //window.location.reload(); //Recarrega do cache, mesma coisa que false.
                                });
                            </script>
                        </button>
                    </div>
                    <div class="modal-body bg-light">
                        <form id="form-eliza" name="form-eliza" method="post">
                          <div class="mb-3">
                            <label for="message-text" class="col-form-label">Resposta:</label>
                            <textarea class="form-control" id="message-text" name="message-text" placeholder="A resposta é limitada em 1.500 caracteres e/ou 256 palavras" style="height: 10em;"><?php if(isset($resposta->choices[0]->text)) { echo ltrim($resposta->choices[0]->text); } ?></textarea>
                          </div>
                          <div class="mb-3">
                            <label for="recipient-name" class="col-form-label">Mensagem:</label>
                            <input type="text" class="form-control" autofocus="autofocus" id="recipient-name" name="recipient-name" placeholder="Pergunte ou escreva qualquer coisa...">
                          </div>
                          <input type="submit" class="btn btn-outline-primary m-3" id="submeter-btn" value="Submeter">
                          <input type="reset" class="btn btn-outline-info" value="Limpar" onclick="$('#recipient-name').focus();" >
                          <div id="carregando" style="display: none; color: red; font-weight: bold;">&emsp14;&emsp14;Pensando... aguarde&nbsp;&nbsp;
                              <img alt="*" src="/caminho/da/imagem/pontos-2.gif" style="border:0px solid; width:60px; height:30px;">
                          </div>
                        </form>
                    </div>
                    <h6 align="right" style="font-weight:400;">*Inteligência Artificial da <a href="https://openai.com/api/" target="_blank">OpenAI</a>.&emsp14;&emsp14;&emsp14;&emsp14;</h6>
                </div>
            </div>
        </div>
    </body>
</html>

Nas duas linhas com imagens <img alt="*" src="/caminho/da/imagem/fcap.png", etc, etc"> você coloca as imagens que quiser, mas deixo disponibilizadas para download as duas imagens que utilizei.

Em "/caminho/do/arquivo" e "/caminho/da/imagem" você coloca os respectivos caminhos aí do teu código. O bootstrap é o 5, mas você pode utilizar o bootstrap da w3schools que é muito bom também ou pode fazer tua própria modal.

O CSS embutido faz a perfumaria (frescura) de movimentar o button ao inicializar a página ou após dar refresh (F5).

Página anterior Próxima página

Páginas do artigo

   1. Introdução
   2. Arquivo index.php
   3. Arquivo chamaEliza.js
   4. Arquivo openai.php

Outros artigos deste autor

VMD no Debian - Instalação e configuração

Como agendar um backup automático do PostgreSQL no Cron evitando o problema de senha

Manual traduzido do Squid

Instalar Minecraft, League of Legends e Fortnite no Linux

Manual traduzido do Squid - Parte 3

Leitura recomendada

Ato 3 - Estrutura de Controle e Funções

PHP5 - Criando e utilizando uma classe básica

Xoops - Um ótimo gestor de portais em PHP

Construindo um ToolBar com botões no PHP-GTK

Verdades e mentiras sobre tecnologias WEB

Comentários

[1] Comentário enviado por fabio em 26/01/2023 - 06:44h

Afirmo sem medo de errar, a OpenAI como ferramenta me tornou um ser humano turbinado kkk. Sério, tem coisa que eu levava algumas horas pra fazer que com o auxílio dela levo minutos. Já estou até me animando de verdade em reformar o VOL.

8 0

[2] Comentário enviado por maurixnovatrento em 26/01/2023 - 11:52h

Ótimo artigo. Show de bola.

___________________________________________________________
Conhecimento não se Leva para o Túmulo.
https://github.com/mxnt10

5 0

[3] Comentário enviado por Buckminster em 27/01/2023 - 19:31h

O código do arquivo openai.php ela me deu quase pronto, tive que fazer pouquíssimas adaptações.

0 0

[4] Comentário enviado por maurixnovatrento em 08/02/2023 - 11:33h

O ChatGPT pode até ter feito um ótimo trabalho em programação, agora não pra legenda de música. Eu pedi pra ela criar umas legendas de música e ela fez um péssimo trabalho. Por outro lado, o ChatGPT substitui facinho horas de pesquisa no google.

___________________________________________________________
Conhecimento não se Leva para o Túmulo.
https://github.com/mxnt10

1 0