Custom code for making calls for openai api

Custom Coding
1

Hi,
I am trying to embed a paraphrasing function to my website by making calls to openai api. I tried using a custom code block to make calls to the openai api. But I am not getting the output (paraphrased text) displayed on the website. When I click the paraphrase button, nothing happens. Please help me to identify what the problem is. Here is the code used in the custom code block.

<textarea id="input-text"></textarea>
<button id="paraphrase-button">Paraphrase</button>
<div id="paraphrase-output"></div>

<script>
async function paraphrase(text) {
  const endpoint = "https://api.openai.com/v1/engines/davinci/jobs";
  const apiKey = "YOUR_API_KEY_HERE";
  const prompt = text;
  
  const response = await fetch(endpoint, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "Authorization": `Bearer ${apiKey}`
    },
    body: JSON.stringify({
      prompt: prompt,
      max_tokens: 100,
      n: 1,
      stop: null,
      temperature: 0.5,
    })
  });
  
  const result = await response.json();
  const paraphrasedText = result.choices[0].text;
  
  // Display the paraphrased text
  document.getElementById("paraphrase-output").innerHTML = paraphrasedText;
}

document.getElementById("paraphrase-button").addEventListener("click", function() {
  const inputText = document.getElementById("input-text").value;
  paraphrase(inputText);
});

</script>

Thank you in advance.

1 Like
2

@Yara_T I would not recommend putting API key open here. Perhaps you can use our own openai blocks or use forms and make to do calls and then show the result via custom code

3

I totally agree regarding the API key. Anyone would be able to see it in the HTML source code.

And I don’t think that custom code (js in the front end) would allow that. We would need js executed in the back end.

@artur using global variables would still be a security flaw ?
Let’s say I have a specific table in Airtable with key/value being mychatgptkey / [value of the key]
Softr use this table to create global variables
In the code I can write const apiKey = mychatgptkey

I have a similar frustration as I’m adding the support of metamask wallet.
I can check the connection, check if the user has a specific nft but after that I’m stuck.
Ideally I would like to create and display a magic link (so then I can use the normal user access management). But I cannot use API in the front end for this question of security

4

Thank you for your suggestion.

5

Thanks

6

This tool could make the job: https://www.edenai.co/, it is worth taking a look

7

But the code snippet in this website is also displaying the API key in the HTML source code.

8

Can you show me the screenshot of the inspector to see exactly what is revealed? (you can hide your api key if it really appears), just want to see the labels

9

Screenshot27
Screenshot271230×235 36.1 KB