Embed chatGPT x SMF 2.1

[Edwar Colt]

Hello...

The only way I managed to insert ChatGPT in the forum was by creating a page in html and using an iframe in the post. if anyone knows a more suitable method or who knows, build a mod for GPT. Wordpress already has a plugin to do this integration.

[Arantor]

To what end? What permissions should it have?

[Edwar Colt]

The purpose is to make gpt available quickly as an additional tool on the forum. example: the contact page, the gallery, ... gpt. regarding permissions, in accordance with the interests of the smooth running of the purpose.

[Arantor]

You really need to do more than just 'make it available' especially since in an integration setting you as the admin will be paying for it.

And it really does need permissions in terms of where people can interact with it and how they can interact with it to avoid burning all your money...

[Edwar Colt]

I thought I'd make it available to a group of forum writers. even at some cost, if used as an aid in the production of content, the return would be able to compensate for the financial aspect.

In terms of production, the purpose of gpt justifies itself.
Of course, within a project where the final costs can be paid with the collection through the available means.

[Arantor]

Yeah, that doesn't actually clarify anything that anyone would need to be able to implement this.

Perhaps this should be framed as 'let's look at the implementation and the collection of multiples that all work together for XenForo and what permissions, what options etc. they have' because it *really* isn't as straightforward or as simple you're asking for with 'integrate ChatGPT'. It needs so much more thought than that.

[Kindred]

Your request, as pointed outvis still too broad,  but Let's look at what you have said so far...

The contact page.
What would cmyou have chatgpt do on this page? This is not a standard forum page, so in addition to having the chat got do "something, as yet undefined" on this page - you are also apparently looking for a mod that interacts with other mods. Which contact page mod?


Gallery page....  repeat every question and statement above.

....
....
....
... aid in the production of content.
Again... how? Doing what? Interacting in what way?


...
Project... collection of costs...
Again,  how? Is it the mod author who needs to recoup costs? Or maybe you need to collect payments? Is that part of the desired mod?

Every statement you make is more confusing than the last.

[Edwar Colt]

See, at the moment I got it to work, even if inside an iframe, posted in a topic that will be available only to specific members. The integration would follow each group's permissions options. usage control would be very easy.

would be made available as a work tool using the forum's resources for authorized members, without implying their private accounts.

[Edwar Colt]

Your request, as pointed outvis still too broad,  but Let's look at what you have said so far...

The contact page.
What would cmyou have chatgpt do on this page? This is not a standard forum page, so in addition to having the chat got do "something, as yet undefined" on this page - you are also apparently looking for a mod that interacts with other mods. Which contact page mod?


Gallery page....  repeat every question and statement above.

....
....
....
... aid in the production of content.
Again... how? Doing what? Interacting in what way?


...
Project... collection of costs...
Again,  how? Is it the mod author who needs to recoup costs? Or maybe you need to collect payments? Is that part of the desired mod?

Every statement you make is more confusing than the last.

I think the translator cannot explain the context as it should from Portuguese to English.

I only mentioned the contact page and the gallery as an example of existing tools for those who know, from my point of view, to create another one. in this case the integration with the gpt AI

[Edwar Colt]

it would be practically the same thing as this wordpress plugin, only for SMF

https://br.wordpress.org/plugins/quick-chat-gpt/

[Arantor]

Except it's really, really not. Blogs work fundamentally differently to forums - in a blog only a few people could talk to the bot, but in a forum *everyone* can.

[Edwar Colt]

at this point, I have the integration working just for me. visitors cannot access. fundamentally it would only be used by a team of moderators.

The forum is very diverse in activities. chatgpt is indeed capable of multiplying and facilitating the production of any content.

[Edwar Colt]

If anyone wants the integration as I'm using it, I'll leave the code below.

an index.html and the style.css of the pg. 

replace the INSERT API KEY HERE in the html with the api key

index.html

Code Select Expand

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css">

<title>ChatGPT Black Box</title>

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

  </head>

  <body bgcolor="#0f0f0f">
    <div class="top-frame">
       
      <div id="chat-history" class="response" style="white-space:pre-wrap; overflow-y:scroll; height:350px;"></div>

    </div>

    <div class="bottom-frame">

  <form>

  <label for="input_text">

    <p style="font-size:20px;"><center><p style="color:white;">Hello! Start by typing your message below...</center></p>

  </label>

  <p style="text-align:center;">

    <input type="text" id="input_text" name="input_text" required style="width:50%; margin:auto;">

    <button type="button" onclick="connectChatGPT()" class="button">Send</button>

  </p>

</form>


   

    </div>

    <script>

      document.querySelector('form').addEventListener('submit', (event) => {

        event.preventDefault();

        connectChatGPT();

      });


      async function connectChatGPT() {

  const inputText = document.getElementById('input_text').value;

  const chatHistory = document.getElementById('chat-history');


  chatHistory.innerHTML += `<p style="color:white;">You: ${inputText}</p>`;

  chatHistory.innerHTML += `<p id="typing-indicator" style="color:grey;">ChatGPT is typing...</p>`;


  // Send the request to ChatGPT

  const apiKey = "INSERT API KEY HERE";

  const modelEngine = "text-davinci-003";

  const prompt = inputText;

  const maxTokens = 2048;

  const temperature = 0.5;


  const response = await axios.post(

    "https://api.openai.com/v1/completions",

    {

      prompt,

      max_tokens: maxTokens,

      temperature,

      model: modelEngine,

    },

    {

      headers: {

        "Content-Type": "application/json",

        "Authorization": `Bearer ${apiKey}`,

      },

    }

  );


  // Display the response as if it were being typed on the screen

  const responseMessage = response.data.choices[0].text;

  chatHistory.innerHTML += `<p style="color:grey;">ChatGPT: ${responseMessage}</p>`;

  document.getElementById('typing-indicator').remove();


  // Speak the response

 // const utterance = new SpeechSynthesisUtterance(responseMessage);

 // utterance.lang = 'pt-BR';

 // utterance.rate = 0.8;

  //window.speechSynthesis.speak(utterance);


  // Clear the input box

  document.getElementById('input_text').value = '';


  // Auto-scroll to the bottom of the chat history

  chatHistory.scrollTop = chatHistory.scrollHeight;

}



      function saveChat() {

    const filename = 'chat-history.txt';

    const fileContent = conversation;


    const element = document.createElement('a');

    element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(fileContent));

    element.setAttribute('download', filename);


    element.style.display = 'none';

    document.body.appendChild(element);


    element.click();


    document.body.removeChild(element);

  }

</script>

  </body>

</html>



style.css

Code Select Expand

/* Defina as cores para o texto e o fundo */
body {
  color: white;
  background-color: #0f0f0f;
}

/* Estilo para o histórico de bate-papo */
#chat-history {
  overflow-y: scroll;
  height: 350px;
  font-size: 16px;
}

/* Estilo para a área de entrada de texto */
input[type=text] {
  width: 50%;
  margin: auto;
  font-size: 20px;
  padding: 10px;
  border-radius: 5px;
  border: none;
}

/* Estilo para o botão */
button {
  background-color: #0EA982;
  color: white;
  font-size: 20px;
  padding: 10px 20px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
}

/* Estilo para a mensagem digitada pelo usuário */
#chat-history p:nth-of-type(odd) {
  text-align: right;
}

/* Estilo para a mensagem digitada pelo ChatGPT */
#chat-history p:nth-of-type(even) {
  text-align: left;
}

/* Estilo para o indicador de digitação */
#typing-indicator {
  font-style: italic;
}

/* Estilo para a mensagem de boas-vindas */
p {
  font-size: 20px;
  text-align: center;
  color: white;
}

/* Estilo para o cabeçalho */
.top-frame {
  padding: 20px;
}

/* Estilo para o rodapé */
.bottom-frame {
  padding: 20px;
  text-align: center;
}


[vbgamer45]

Just note it exposes your OpenAI key. I would suggest do it server side.
https://github.com/orhanerday/open-ai
https://github.com/openai-php/client

[Edwar Colt]

Yes, this method has a serious security flaw. that's why I came here on the forum to raise possibilities to adjust the system.

[Sesquipedalian]

fundamentally it would only be used by a team of moderators.

To do what? What would moderators use content generated by ChatGPT for? We are all aware that ChatGPT can be used to generate content. The question is, what you want to do with that content?

For example, do you want moderators to be able to use ChatGPT to generate automated answers to questions posted in your forum? Do you want to do something else with that content?

If you are not sure how to answer those questions, try answering this one instead: What is the goal that you are trying to accomplish and how would ChatGPT help you to accomplish that goal?

[Edwar Colt]

fundamentally to boost the generation of fixed content.

the moderators would have the gpt available to solve different problems and to produce content related to the forum.

would be of no use in the open discussion forum. it would be a basically administrative tool

[Kindred]

Given that chatgpt is still, and consistently, 80+% wrong with its generated "facts"....

And you still have not actually indicated what, specifically,  you intend this integration to do

[Edwar Colt]

that this application is used by a specific team for the purposes that it - "ChatGPT", is intended.

and that the use is up to the domain and not the moderators who use it.

It's like a company computer with internet and chatgpt, the employee arrives, uses the company's logged in gpt, hangs up and goes home to use his private chatgpt at home.

seems simple to me

[Kindred]

What/how exactly are you seeing the "uses chatgpt"?

Uses chatgpt TP DO WHAT??