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}.Onlyreturn 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}.Onlyreturn 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});}functionHtmlEncode(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/27152function separateCodeFromText(jsonResponse){const textWithCode = jsonResponse;const codeSeparator ='```';// Split the text using triple backticks as the separatorconst parts = textWithCode.split(codeSeparator);// Initialize arrays to store separated text and codeconst textParts =[];const codeParts =[];// Iterate over parts and classify them as text or codefor(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.Pleasetry 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)0px3px6px, rgba(0,0,0,0.23)0px3px6px;}.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">ProgrammingAssistant</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>ProgrammingLanguage</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>`);