// Cloned by Venkatraman Palani on 1 Dec 2023 from World "Prototype - Professional AI Consultant" by Venkatraman Palani
// Please leave this clone trail here.
document.write('<style>');
document.write('body, html { height: 100%; margin: 0; background: url("/uploads/palaniv2/Qian-Nirenberg-John_von_Neumann-ftr.jpg") no-repeat center center fixed; background-size: cover; }');
document.write('.section { text-align: center; padding: 20px; }');
document.write('h1, h2 { color: red; font-size: 2em; }');
document.write('p { color: blue; font-size: 1em; }');
document.write('input, button, iframe { padding: 10px; margin: 10px; border: 1px solid #ccc; border-radius: 5px; }');
document.write('button { background-color: #007bff; color: white; cursor: pointer; }');
document.write('button:hover { background-color: #0056b3; }');
document.write('.alert-box { display: none; color: yellow; position: fixed; top: 0; left: 0; width: 100%; text-align: center; padding: 10px; background: rgba(255,0,0,0.5); }');
document.write('.header-text { position: absolute; top: 20px; width: 100%; text-align: center; z-index: 1000; }');
document.write('</style>');
// Add the header text
document.write('<h1 class="header-text">Hello World! - API Status Code Demo <br> </h1>');
// Add API Key inputs for both services
document.write('<div class="api-key-inputs">');
document.write('<input id="textToSpeechApiKey" type="text" placeholder="Enter Text to Speech API Key...">');
document.write('<input id="textToImageApiKey" type="text" placeholder="Enter Text to Image API Key...">');
document.write('</div>');
// Alert box for displaying errors
document.write('<div id="alertBox" class="alert-box"></div>');
// Text to Speech Section
document.write('<div class="section" id="textToSpeechSection">');
document.write('<h2>Hello World to Speech</h2>');
document.write('<select id="voiceSelect"></select>'); // Dropdown for selecting voices
document.write('<div id="voiceInfo" class="voice-info"></div>'); // Div to display voice information
document.write('<input id="textInput" type="text" placeholder="Hello World!">'); // Input for text to be spoken
document.write('<button id="convertText">Convert Text to Speech</button>'); // Button to trigger conversion
document.write('<audio id="audioPlayer" controls></audio>'); // Audio element to play the speech
document.write('</div>');
// Text to Image Section
document.write('<div class="section" id="textToImageSection">');
document.write('<h2>Hello World to Image</h2>');
document.write('<input id="textPrompt" type="text" placeholder="Hello World in Stylish Text">'); // Input for image prompt
document.write('<button id="generateImage">Generate Image</button>'); // Button to trigger image generation
document.write('<div id="imageContainer"></div>'); // Div to display the generated image
document.write('</div>');
// Function to display custom alert messages
function displayAlert(message) {
$('#alertBox').text(message).show(); // Show alert box with message
}
// Function to clear custom alert messages
function clearAlert() {
$('#alertBox').hide().text(''); // Hide alert box and clear text
}
$(document).ready(function() {
// Set default values for Text to Speech and Text to Image inputs
$('#textInput').val("Hello World!"); // Default text for Text to Speech
$('#textPrompt').val("Hello World in Stylish Text"); // Default prompt for Text to Image
// Define default texts
/*var defaultTextToSpeechText = "Hello World!"; // Default text for Text to Speech
var defaultTextToImagePrompt = "Hello World in Stylish Text"; // Default prompt for Text to Image*/
// Fetch and display voice data for text-to-speech functionality
$.getJSON('/uploads/palaniv2/voices.json', function(data) {
var voices = data.voices;
voices.forEach(function(voice) {
$('#voiceSelect').append(new Option(voice.name, voice.voice_id));
});
if (voices.length > 0) {
displayVoiceInfo(voices[0]);
}
$('#voiceSelect').change(function() {
var selectedVoice = voices.find(v => v.voice_id === this.value);
displayVoiceInfo(selectedVoice);
});
});
// Function to display voice information
function displayVoiceInfo(voice) {
var infoText = 'Accent: ' + voice.labels.accent + '<br>' +
'Description: ' + voice.labels.description + '<br>' +
'Age: ' + voice.labels.age + '<br>' +
'Gender: ' + voice.labels.gender + '<br>' +
'Use Case: ' + voice.labels['use case'];
$('#voiceInfo').html(infoText);
}
// Updated Text to Speech button click handler
$('#convertText').click(function() {
var textToSpeechApiKey = $('#textToSpeechApiKey').val();
var textToConvert = $('#textInput').val();
if (textToConvert && textToSpeechApiKey) {
$.ajax({
url: 'https://api.elevenlabs.io/v1/text-to-speech/' + $('#voiceSelect').val() + '?output_format=mp3_44100_64',
method: 'POST',
headers: {
'xi-api-key': textToSpeechApiKey,
'Content-Type': 'application/json'
},
data: JSON.stringify({
text: textToConvert,
voice_settings: {
similarity_boost: 0.5,
stability: 0.5,
style: 1,
use_speaker_boost: true
}
}),
xhrFields: {
responseType: 'blob'
},
success: function(blob, status, xhr) {
var url = window.URL.createObjectURL(blob);
$('#audioPlayer').attr('src', url);
$('#audioPlayer')[0].play();
clearAlert();
displayAlert("Text to Speech Success. Status: " + xhr.status);
},
error: function(xhr, status, error) {
displayAlert("Error: " + xhr.status + " " + error);
}
});
} else {
displayAlert("Please enter a text and API key for conversion.");
}
});
// Updated Text to Image button click handler
$('#generateImage').click(function() {
var textToImageApiKey = $('#textToImageApiKey').val();
var promptText = $('#textPrompt').val();
if (promptText && textToImageApiKey) {
var form = new FormData();
form.append('prompt', promptText);
$.ajax({
url: 'https://clipdrop-api.co/text-to-image/v1',
method: 'POST',
headers: {
'x-api-key': textToImageApiKey
},
processData: false,
contentType: false,
data: form,
xhrFields: {
responseType: 'blob'
},
success: function(blob, status, xhr) {
var imageUrl = window.URL.createObjectURL(blob);
$('#imageContainer').html('<img src="' + imageUrl + '" alt="Generated Image"/>');
clearAlert();
displayAlert("Image Generation Success. Status: " + xhr.status);
},
error: function(xhr, status, error) {
displayAlert("Error: " + xhr.status + " " + error);
}
});
} else {
displayAlert("Please enter a prompt and API key for the image.");
}
});
});