RRStorer
New Coder
I've been trialling using chatgpt to make a simple program to create reports for teachers. I enter my report and leave a @ for the name and the software replaces it with an alternative name. There is also room for additional sentences underneath. The report can then be sent to chatgpt to be reworded. Unfortunately, I'm getting a 404 error when it's reworded. Any ideas?
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Student Report</title>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
const API_URL = 'https://api.openai.com/v1/completions';
const API_KEY = ''; // Replace with your actual API key
async function updateReport() {
var studentName = document.getElementById('studentName').value;
// Update report text
var reportTextElement = document.getElementById('reportText');
var reportText = reportTextElement.innerHTML;
var updatedReportText = reportText.replace(/@/g, studentName);
reportTextElement.innerHTML = updatedReportText;
// Update report comments
var reportCommentsElement = document.getElementById('reportComments');
var reportComments = reportCommentsElement.value;
var updatedReportComments = reportComments.replace(/@/g, studentName);
reportCommentsElement.value = updatedReportComments;
// Update word count
var wordCount = updatedReportComments.trim().split(/\s+/).length;
document.getElementById('wordCount').innerHTML = "Word Count: " + wordCount;
}
async function rewordReport() {
var reportText = document.getElementById('reportText').innerText;
// Send request to ChatGPT API for rewording
var response = await axios.post(API_URL, {
messages: [{ role: 'system', content: 'You are a student.' }, { role: 'user', content: reportText }],
max_tokens: 50,
temperature: 0.8
}, {
headers: {
'Authorization': 'Bearer ' + API_KEY,
'Content-Type': 'application/json'
}
});
var rewordedReport = response.data.choices[0].message.content;
var rewordedReportElement = document.getElementById('rewordedReport');
rewordedReportElement.innerHTML = rewordedReport;
}
function addOptionalSentence() {
var sentence = document.getElementById('optionalSentence').value;
var reportCommentsElement = document.getElementById('reportComments');
var currentComments = reportCommentsElement.value;
var updatedComments = currentComments + ' ' + sentence;
reportCommentsElement.value = updatedComments;
}
function createOptionalSentenceInput() {
var optionalSentencesContainer = document.getElementById('optionalSentencesContainer');
var inputContainer = document.createElement('div');
var sentenceInput = document.createElement('input');
sentenceInput.type = 'text';
sentenceInput.className = 'optional-sentence-input';
sentenceInput.placeholder = 'Enter optional sentence';
var addButton = document.createElement('button');
addButton.innerText = 'Add Sentence';
addButton.className = 'add-sentence-button';
addButton.onclick = addOptionalSentence;
inputContainer.appendChild(sentenceInput);
inputContainer.appendChild(addButton);
optionalSentencesContainer.appendChild(inputContainer);
}
</script>
<script src="https://cdn.jsdelivr.net/npm/@grammarly/extension/dist/extension.js"></script>
<style>
.optional-sentence-input {
width: 400px;
}
</style>
</head>
<body>
<h1>Student Report</h1>
<div>
<p id="reportText">This report is about the student @. Please review the student's performance.</p>
</div>
<div>
<label for="studentName">Student Name: </label>
<input type="text" id="studentName" />
<button onclick="updateReport()">Refresh</button>
</div>
<div>
<label for="reportComments">Report Comments:</label><br>
<textarea id="reportComments" rows="4" cols="50" data-gramm_editor="false"></textarea>
</div>
<div>
<p id="wordCount"></p>
</div>
<div>
<button onclick="rewordReport()">Reword Report</button>
</div>
<div>
<h3>Original Report:</h3>
<p id="reportText"></p>
</div>
<div>
<h3>Reworded Report:</h3>
<p id="rewordedReport"></p>
</div>
<div>
<h3>Optional Sentences:</h3>
<div id="optionalSentencesContainer">
<div>
<input type="text" class="optional-sentence-input" placeholder="Enter optional sentence">
<button class="add-sentence-button" onclick="addOptionalSentence()">Add Sentence</button>
</div>
</div>
<button onclick="createOptionalSentenceInput()">Add Sentence Box</button>
</div>
<script>
const grammarly = new Grammarly(window);
</script>
</body>
</html>