I am building a script using the OpenAI API that grabs text content from a clicked on
tag in index.html and passes to a separate script in explanation.html where the content from the clicked on
tag in index.html is passed to the script in explanation.html where OpenAI processes the content as “What does this sentence mean?” +
content and returns an output that is an explanation of the
content provided to the OpenAI API.
Here is the code I am working with:
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Example</title>
<script type="text/javascript">
function showExplanation(element) {
const sentence = element.textContent.trim();
fetch('/explanation.html?sentence=' + encodeURIComponent(sentence))
.then(response => response.text())
.then(explanation => {
const win = window.open('', '_blank');
win.document.write('<html><head><title>Explanation</title></head><body><p>' + explanation + '</p></body></html>');
})
.catch(error => console.log(error));
}
</script>
</head>
<body>
<a href="#" onclick="showExplanation(this)">Sentence 1</a>
<a href="#" onclick="showExplanation(this)">Sentence 2</a>
<a href="#" onclick="showExplanation(this)">Sentence 3</a>
</body>
</html>
explanation.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Explanation</title>
</head>
<body>
<p>Loading...</p>
<script type="text/javascript">
const sentence = new URLSearchParams(window.location.search).get('sentence');
const api_key = 'YOUR_OPENAI_API_KEY_HERE';
fetch('https://api.openai.com/v1/engines/davinci-codex/completions', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + api_key
},
body: JSON.stringify({
'prompt': "What does this sentence mean? " + sentence,
'max_tokens': 512,
'n': 1,
'stop': '.'
})
})
.then(response => response.json())
.then(output => {
const explanation = output.choices[0].text;
const pElement = document.createElement('p');
pElement.textContent = explanation;
document.body.innerHTML = '';
document.body.appendChild(pElement);
})
.catch(error => console.log(error));
</script>
</body>
</html>
I tried running the code on My live site and it seems to be getting stuck with a “Loading…” response. The static “Loading…” in the code is not being replaced by the dynamic explanation being fetched from the OpenAI using the provided prompt + sentence extracted from the
tag. Any ideas on how to get this script to return the dynamic explanation?