IA Text

HTML

<h1>OpenAI Text Completions</h1>

    <label>API key:
      <input id="key" type="password" size="60" placeholder="sk-...">
    </label>
    <br><br>

    <label>Model:
      <input id="model" size="30" value="davinci-002">
    </label>
    <br><br>

    <div class="slider-row">
      <label for="temperature">Temperature: </label><span id="temp_disp"></span><br>
      <input type="range" id="temperature" name="temperature" min=0 max=2 step=0.1 value="0.5">
    </div>

    <div class="slider-row">
      <label for="frequency_penalty">Frequency penalty: </label><span id="freq_disp"></span><br>
      <input type="range" id="frequency_penalty" name="frequency_penalty" min="-2" max="2" step="0.1" value="0.3">
    </div>

    <div class="slider-row">
      <label for="presence_penalty">Presence penalty: </label><span id="pres_disp"></span><br>
      <input type="range" id="presence_penalty" name="presence_penalty" min="-2" max="2" step="0.1" value="0.3">
    </div>

    <div style="float:left">
      <label for="max_tokens">Max Tokens: </label>
      <input type="number" id="max_tokens" name="max_tokens" min="1" max="2048" value=256>
    </div>

    <div class="clear"></div>

    <textarea id="prompt" rows="6" cols="80"></textarea>
    <br><br>

    <button id="run">Run</button>

    <!-- <div id="out" style="white-space: pre-wrap"></div> -->

CSS

body, input, textarea, button {
      background-color: #333;
      color: #eee;
      border: 1px solid #888;
      font-size: 20pt;
      border-radius: 0.25em;
      padding: 0.25em;
    }
    body{
      padding: 2em;
      margin: 1em;
    }
    .slider-row { float:left; margin-right:1em; }
    .clear { clear:both; }
    #prompt{
      font-family: sans-serif;
    }

JavaScript

let $key = document.getElementById('key');
let key = null;
let key_loaded = localStorage.getItem('OPENAI_API_KEY');
if (key_loaded) key = key_loaded;
if (key) $key.value = key;
$key.addEventListener('change', (e) => {
  key = e.target.value.trim();
  localStorage.setItem('OPENAI_API_KEY', key);
});


let $model = document.getElementById('model');
let model = null;
let model_loaded = localStorage.getItem('OPENAI_TEXT_MODEL');
if (model_loaded) model = model_loaded;
if (model) {
  $model.value = model;
} else {
  model = 'davinci-002'
}

$model.addEventListener('change', (e) => {
  model = e.target.value.trim();
  localStorage.setItem('OPENAI_TEXT_MODEL', model);
});


let $temperature = document.getElementById('temperature');
let $temp_disp = document.getElementById('temp_disp');
$temp_disp.textContent = $temperature.value;
$temperature.addEventListener("input", (e) => {
  $temp_disp.textContent = e.target.value;
});

let $frequency = document.getElementById('frequency_penalty');
let $freq_disp = document.getElementById('freq_disp');
$freq_disp.textContent = $frequency.value;
$frequency.addEventListener("input", (e) => {
  $freq_disp.textContent = e.target.value;
});

let $presence = document.getElementById('presence_penalty');
let $pres_disp = document.getElementById('pres_disp');
$pres_disp.textContent = $presence.value;
$presence.addEventListener("input", (e) => {
  $pres_disp.textContent = e.target.value;
});

let $max_tokens = document.getElementById('max_tokens');


let $prompt = document.getElementById('prompt');
// let $out = document.getElementById('out');
let $out = document.getElementById('prompt');


async function run() {
  if (!key) { alert('Enter your API key.'); return; }
  if (!model) { alert('please provide a model'); return;}

  const prompt = $prompt.value;

  const body = {
    model,
    prompt,
    max_tokens: Number($max_tokens.value),
    temperature:...