Code viewer [Ancient Brain]

Code viewer for World: chirayu tulsyan (world)

const openaiURL = "https://api.openai.com/v1/chat/completions"; // can POST to this 3rd party URL
const themodel = "gpt-3.5-turbo"; // the OpenAI model we are going to talk to 

// Default API key and prompt:
const staticApiKey =   "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";
let apikey = staticApiKey;
let theprompt = "hello";

// Default body has margin 0 and padding 0; give it more whitespace:
$('body').css("margin", "200px");
$('body').css("padding", "20px");

document.write(`
  <!DOCTYPE html>
<html>
<head>
    <title>Colorful Torus and GPT Interaction</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1>Hello World</h1>

    <div style="width:45vw; background-color:white; border: 1px solid black; margin:20px; padding: 20px;">
        <h3>Enter a "prompt"</h3>
        <input style="width:40vw;" id="me">
        <button onclick="sendchat();" class="ab-normbutton">Send</button>
    </div>

    <div style="width:45vw; background-color:#ffffcc; border: 1px solid black; margin:20px; padding: 20px;">
        <h3>GPT Response</h3>
        <div id="them"></div>
    </div>

    <div id="sceneContainer" style="width: 800px; height: 600px;"></div>

    <script>
        // Three.js code for setting up the scene and torus
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, 800 / 600, 0.1, 1000);
        camera.position.z = 10;

        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(800, 600);
        document.getElementById('sceneContainer').appendChild(renderer.domElement);

        const geometry = new THREE.TorusGeometry(1, 0.4, 16, 100);
        const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
        const torus = new THREE.Mesh(geometry, material);
        scene.add(torus);

        function animate() {
            requestAnimationFrame(animate);

            // Rotate the torus
            torus.rotation.x += 0.01;
            torus.rotation.y += 0.01;

            renderer.render(scene, camera);
        }

        animate();
`);

function setkey() {
  apikey = jQuery("input#apikey").val();
  apikey = apikey.trim();
  $("#enterkey").html("<b> API key has been set. </b>");
}

// Enter will also send chat:
document.getElementById('me').onkeydown = function(event) {
  if (event.keyCode == 13) sendchat();
};

// --- Send my line of text ----------------------------------------------------------------
function sendchat() {
  theprompt = $("#me").val();

  // Construct request as JSON
  var thedata = {
    "model": themodel,
    "temperature": 0.7,
    "messages": [{
      "role": "user",
      "content": theprompt
    }]
  };

  // Then as a string representing that JSON:
  var thedatastring = JSON.stringify(thedata);

  // HTTP headers must be set up with API key: 
  $.ajaxSetup({
    headers: {
      "Content-Type": "application/json",
      "Authorization": "Bearer " + apikey
    }
  });

  // POST to 3rd party URL: 
  $.ajax({
    type: "POST",
    url: openaiURL,
    data: thedatastring,
    dataType: "json",
    success: function(d, rc) {
      successfn(d, rc);
    },
    error: function() {
      errorfn();
    }
  });
}

// Global variable to examine return data in console 
var a;

function successfn(data, rc) {
  a = data;
  var answer = a["choices"][0].message.content;
  $("#them").html(answer);
}

function errorfn() {
  if (apikey == "") $("#them").html("<font color=red><b> Enter API key to be able to chat. </b></font>");
  else $("#them").html("<font color=red><b> Unknown error. </b></font>");
}