function send_request() {
const url = "https://api.openai.com/v1/chat/completions";
let l = document.getElementById("language").value;
let code = document.getElementById("code").value;
let selection = document.getElementById("selectaction").value;
let token = document.getElementById("api").value;
// MH edit
console.log ( `${selection} Language: ${l}. Code:
${code}. Only return code between \`\`\` characters. Provide additional information about your result. You are not an AI text-based assistant.` );
fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + token,
},
body: JSON.stringify({
"model": "gpt-3.5-turbo",
"messages": [{
"role": "user",
"content": `${selection} Language: ${l}. Code:
${code}. Only return code between \`\`\` characters. Provide additional information about your result. You are not an AI text-based assistant.`
}]
})
})
.then(response => {
return response.json(); // Return the JSON data from the response
})
.then(result => {
update_output(result.choices[0].message.content);
})
.catch(error => {
console.error(error); // Handle any errors that occur during the request
});
}
function HtmlEncode(s)
{
var el = document.createElement("div");
el.innerText = el.textContent = s;
s = el.innerHTML;
return s;
}
function textAreaAdjust(element) {
element.style.height = "1px";
element.style.height = (25+element.scrollHeight)+"px";
}
// Function to separate code from text using triple backticks
// slightly modified version of code: https://community.openai.com/t/extract-code-from-text-gpt-response/27152
function separateCodeFromText(jsonResponse) {
const textWithCode = jsonResponse;
const codeSeparator = '```';
// Split the text using triple backticks as the separator
const parts = textWithCode.split(codeSeparator);
// Initialize arrays to store separated text and code
const textParts = [];
const codeParts = [];
// Iterate over parts and classify them as text or code
for (let i = 0; i < parts.length; i++) {
if (i % 2 === 0) {
// Even index indicates text
textParts.push(parts[i].trim());
} else {
// Odd index indicates code
codeParts.push(parts[i].trim());
}
}
return {
text: textParts, // Join text parts
code: codeParts, // Array of code snippets
};
}
function update_output(message) {
// MH edit
console.log (message);
if (message.toLowerCase().indexOf("sorry") !== -1 || message.toLowerCase().indexOf("apologize") !== -1 || message.toLowerCase().indexOf(" ai") !== -1) {
p = document.getElementById("box");
p.innerHTML = `<p>Sorry, there was an issue submitting your code. Please try again.</p>`
} else {
if (message.indexOf("```") !== -1) {
const separatedContent = separateCodeFromText(message);
//console.log('Text:', separatedContent.text);
//console.log('Code Snippets:', separatedContent.code);
p = document.getElementById("box");
for (let i = 0; i < separatedContent.text.length; i++) {
formatText = HtmlEncode(separatedContent.text[i]);
p.innerHTML += `<pre>${formatText}</pre>`;
if (i < separatedContent.text.length) {
p.innerHTML += `<div class="card">
<div class="card-body">
<p class="card-title">${separatedContent.code[i].slice(0,separatedContent.code[i].indexOf('\n'))}<p>
<pre class="code">${separatedContent.code[i].slice(separatedContent.code[i].indexOf('\n'))}</pre>
</div>
</div><br>`;
}
}
} else {
var mySubString = message;
p = document.getElementById("box");
formatText = HtmlEncode(mySubString);
p.innerHTML = `<pre>${formatText}</pre>`;
}
}
}
document.write ( `
<html data-bs-theme="dark">
<style>
.body {
color: white;
font-family: Helvetica;
}
.box::-webkit-scrollbar {
display: none;
}
body::-webkit-scrollbar {
display: none;
}
body {
background-color: rgb(38, 38, 38);
color: white;
font-family: Helvetica;
overflow-y:hidden;
}
body > * {
z-index: -1;
}
.box {
padding: 20px;
background-color: rgb(26, 26, 26);
border-radius: 20px;
overflow-y: auto;
max-height: 500px;
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}
.output {
white-space: wrap;
}
.output > * {
padding: 5px;
}
.lang {
background-color:grey;
text-align: left;
text-weight: normal;
padding: 5px;
}
pre {
white-space: pre-wrap;
}
.code {
background-color:black;
white-space: pre-wrap;
padding: 5px;
}
</style>
<br>
<div id="ab-screenshot-this" class="body" style="justify-items: center">
<h1 style="text-align: center"> Programming Assistant </h1>
<div style="display: grid; grid-template-columns: 50% 50%; gap: 20px; padding:30px; padding-right:50px;">
<div id="ab-screenshot-this2" class="box">
<p>Enter API Key:</p>
<input id="api" class="form-control" type="text" placeholder="API Key...">
<br>
<div id="ab-screenshot-this3" >
<p>I would like to:</p>
<select style="height: 112px; overflow: hidden;" id="selectaction" class="form-select" multiple>
<option>Add comments to my code.</option>
<option>Fix my code.</option>
<option>Suggest improvements for my code.</option>
<option>Translate my code to another language.</option>
<option>Write some documentation for my code in markdown.</option>
</select>
</div>
<br>
<div id="ab-screenshot-this4">
<p>Programming Language</p>
<div max-width: 50%;">
<div>
<select id="language" class="form-select" aria-label="Default select example">
<option></option>
<option>Bash</option>
<option>C</option>
<option>Clojure</option>
<option>C#</option>
<option>C++</option>
<option>Dart</option>
<option>Go</option>
<option>Haskell</option>
<option>Java</option>
<option>JavaScript</option>
<option>Kotlin</option>
<option>Lua</option>
<option>Perl</option>
<option>PHP</option>
<option>Prolog</option>
<option>Python</option>
<option>R</option>
<option>Ruby</option>
<option>Rust</option>
<option>SQL</option>
<option>Swift</option>
</select>
</div>
</div>
<br>
<div>
<p>Code</p>
<textarea class="form-control" onkeyup="textAreaAdjust(this)" style="overflow:hidden; resize: none;" id="code" contentEditable></textarea>
</div>
<br>
</div>
<button onclick="send_request()" class="btn btn-primary">Submit</button>
</div>
<div class="box">
<div id="box" class="output"></div>
</div>
</div>
</div>
</div>
</div>
</html>
`);