Code viewer [Ancient Brain]

Code viewer for World: Text to speech "Hello World"
// Cloned by Aleena Joseph on 21 Nov 2023 from World "New World (clone by Aleena Joseph) (clone by Aleena Joseph)" by Aleena Joseph 
// Please leave this clone trail here.
 
const openaiURL = "https://api.openai.com/v1/audio/speech";           // can POST to this 3rd party URL
  
const themodel = "tts-1";       // the OpenAI text to speech model

// default API key and prompt:

var apikey = "";
var theprompt = "hello";


// default body is margin 0 and padding 0 
// give it more whitespace:

  $('body').css( "margin", "20px" );
  $('body').css( "padding", "20px" );

 
document.write ( `

<h1 align="center"> Text to Speech with OpenAI TTS model</h1>

<pre>

</pre>
Enter your text and get different voice modulations. <br>
Choose different voices from the dropdown <br>

<h3> Enter API key </h3>

The crucial thing is you need an    "API key" to talk to OpenAI. <br>
Register for free and get your API key  
<a href='https://platform.openai.com/account/api-keys'>here</a>.
<br>
You enter your API key below and then give a text message.
<p>

<div id=enterkey>
Enter API key: 
	<input    style='width:25vw;'    maxlength='2000'   NAME="apikey"    id="apikey"       VALUE='' >  
	<button onclick='setkey();'  class=ab-normbutton >Set API key</button>
</div>

<pre>

</pre>

<div style="width:60vw; background-color:#f2e5bb;  border: 1px solid black; margin:20; padding: 20px;">
<h3> Enter a text </h3>
<INPUT style="width:50vw;height:10vw;"  id=me value="" placeholder="Enter text here...">

<h3> Select voice </h3>
<select id="voiceSelection">
  <option value="alloy">Alloy</option>
  <option value="echo">Echo</option>
  <option value="fable">fable</option>
  <option value="onyx">Onyx</option>
  <option value="nova">Nova</option>
  <option value="shimmer">Shimmer</option>
  
</select>
<br>
<br>
<button id="Send" class=ab-normbutton>Send Data</button>
</div>

<div style="width:60vw; background-color:#ffffcc;  border: 1px solid black; margin:20; padding: 20px;">
<h3> Playback your Audio Data </h3>
<div id=them > </div> 

<audio id="audioPlayer" controls>
  Your browser does not support the audio element.
</audio>
</div>
 
 <p> <i> Text to speech with OpenAi tts model<br> 
  </i> </p>

<pre>

</pre>

` );



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


document.getElementById('Send').addEventListener('click', () => {
const selectedVoice = document.getElementById('voiceSelection').value;
const textToConvert = document.getElementById('me').value;

const requestData = {
  model: 'tts-1',
  voice: selectedVoice,                       // gets value from dropdown list selected by user
  input: textToConvert,             
};

function handleError(error) {
  console.error('Error:', error);
}

function handleSuccess(data) {
    
    // mh edit
     console.log ("API call returned success");
    
  const audioBlob = new Blob([data], { type: 'audio/mp3' });
  const audioUrl = URL.createObjectURL(audioBlob);

  // Get the audio element by ID
  const audioPlayer = document.getElementById('audioPlayer');

  // Set the source of the audio element to the generated audio URL
  audioPlayer.src = audioUrl;
}

fetch(openaiURL, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    Authorization: "Bearer " + apikey,
  },
  body: JSON.stringify(requestData),
})
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    return response.blob();
  })
  .then(handleSuccess)
  .catch(handleError);

});