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: 14.303 ]

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

Instalar/habilitar o Linux nativo dentro do Windows com WSL (Windows Subsystem for Linux - Subsistema do Windows para Linux)

Como utilizar de forma correta os repositórios e pacotes Backports

Compilação de Kernel

Compilação do Kernel

Instalação do Ventoy, programa para criar pendrives inicializáveis

Leitura recomendada

PHP5 - Criando e utilizando uma classe básica

Gedit - Um bom editor pra programar em PHP!

MVC - Conceito e exemplo em PHP

Introdução ao PHP-GTK

Instalando Servidor LAMP no Ubuntu e Derivadas

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