Created
December 20, 2022 05:51
-
-
Save bplunkert/d5b0f78f0fc94dd53aa231d084dfc7f7 to your computer and use it in GitHub Desktop.
A Javascript GPT3 interface, written by GPT3
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>OpenAI API Test</title> | |
| </head> | |
| <body> | |
| <form id="form"> | |
| API Key: <input type="text" id="apiKey"><br> | |
| Model: | |
| <select id="model"> | |
| <option value="text-davinci-003">text-davinci-003</option> | |
| <option value="code-davinci-002">code-davinci-002</option> | |
| </select><br> | |
| Prompt: <input type="text" id="prompt"><br> | |
| Temperature: | |
| <input type="range" min="0.0" max="1.0" step="0.01" id="temperature"><br> | |
| <span id="temperatureLabel"></span> | |
| Max Tokens: | |
| <input type="range" min="0" max="2000" step="1" id="maxTokens"><br> | |
| <span id="maxTokensLabel"></span> | |
| <input type="submit" value="Submit"> | |
| </form> | |
| <br> | |
| <textarea id="output" rows="10" cols="50"></textarea> | |
| <div id="spinner" style="display:none">Loading...</div> | |
| <script> | |
| const form = document.getElementById('form'); | |
| form.addEventListener('submit', (event) => { | |
| event.preventDefault(); | |
| const apiKey = document.getElementById('apiKey').value; | |
| const model = document.getElementById('model').value; | |
| const prompt = document.getElementById('prompt').value; | |
| const temperature = parseInt(document.getElementById('temperature').value); | |
| const maxTokens = parseInt(document.getElementById('maxTokens').value); | |
| const data = { | |
| model: model, | |
| prompt: prompt, | |
| max_tokens: maxTokens, | |
| temperature: temperature | |
| }; | |
| // Show spinner | |
| document.getElementById('spinner').style.display = 'block'; | |
| const xhr = new XMLHttpRequest(); | |
| xhr.open('POST', 'https://api.openai.com/v1/completions'); | |
| xhr.setRequestHeader('Content-Type', 'application/json'); | |
| xhr.setRequestHeader('Authorization', `Bearer ${apiKey}`); | |
| xhr.onload = () => { | |
| if (xhr.status === 200) { | |
| const response = JSON.parse(xhr.responseText); | |
| document.getElementById('output').value = response.choices[0].text; | |
| } else { | |
| console.error('Error:', xhr.statusText); | |
| } | |
| // Hide spinner | |
| document.getElementById('spinner').style.display = 'none'; | |
| }; | |
| xhr.send(JSON.stringify(data)); | |
| }); | |
| // Update temperature and max tokens labels when values change | |
| const temperatureInput = document.getElementById('temperature'); | |
| temperatureInput.addEventListener('input', () => { | |
| document.getElementById('temperatureLabel').textContent = `Temperature: ${temperatureInput.value}`; | |
| }); | |
| const maxTokensInput = document.getElementById('maxTokens'); | |
| maxTokensInput.addEventListener('input', () => { | |
| document.getElementById('maxTokensLabel').textContent = `Max Tokens: ${maxTokensInput.value}`; | |
| }); | |
| // Set initial values for temperature and max tokens labels | |
| document.getElementById('temperatureLabel').textContent = `Temperature: ${temperatureInput.value}`; | |
| document.getElementById('maxTokensLabel').textContent = `Max Tokens: ${maxTokensInput.value}`; | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment