// Inject CSS styles directly into the document for layout and styling
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: red; position: fixed; top: 0; left: 0; width: 100%; text-align: center; padding: 10px; background: rgba(255,0,0,0.5); }'); // Custom alert box for errors
document.write('.header-text { position: absolute; top: 20px; width: 100%; text-align: center; z-index: 1000; }'); // Ensure the header text appears over the background
document.write('#imageFrame { width: 100%; height: 500px; border: none; }'); // Style for iframe
document.write('</style>');
// Add the header text
//document.write('<h1 class="header-text">Professional AI Consultant</h1>');
document.write('<h1 class="header-text">AI assisted Police Informant - Sketch Artist</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>');
document.write('<div class="section" id="informantSection">');
document.write('<p>Imagine you are, <br> an underworld global espionage secret police agent <br> working in crime network ring informing about mob activity <br></p>');
document.write('<p>(Scroll down to the bottom left to refer a memory of <br> Pseudo-Random AI Generated Mob Person with StyleGAN)</p>');
document.write('</div>');
// Text to Speech Section
document.write('<div class="section" id="textToSpeechSection">');
document.write('<h2>Text to Speech</h2>');
document.write('<p>Now try to quote some thing <br> the mafia/ mob person you memorized would say with a suitable voice</p>');
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="Enter text here...">'); // 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>Text to Image</h2>');
document.write('<p>Now try to describe <br> the mob person you memorized with similar facial features</p>');
document.write('<input id="textPrompt" type="text" placeholder="Enter your prompt...">'); // 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>');
// StyleGAN Pseudo-Person Generator Section
document.write('<div class="section" id="styleGanSection">');
document.write('<div style="text-align: left;"><h1>StyleGAN Pseudo-Person Generator*</h1>');
document.write('<div style="color: red; font-size: 0.5em;"><h2>(*Press Regenerate, if the image is a kid or distorted or if you need a new face)</h2>');
//document.write('<iframe id="imageFrame" src="https://www.thispersondoesnotexist.com"></iframe>'); // iframe to display the generated image
//document.write('#imageFrame { width: 200%; height: 200%; border: none; transform: scale(0.5); transform-origin: 0 0; }'); // Style for scaled iframe
document.write('<div style="text-align: left;"><button id="regeneratePerson">Regenerate New Pseudo-Person</button>'); // Button to reload the iframe
document.write('<style>#imageFrame { width: 200%; height: 200%; border: none; transform: scale(0.5); transform-origin: 0 0; overflow: hidden; }</style><iframe id="imageFrame" src="https://www.thispersondoesnotexist.com"></iframe>');
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() {
// Fetch and display voice data for text-to-speech functionality
$.getJSON('/uploads/palaniv2/voices.json', function(data) {
// Assuming the JSON structure is { "voices": [...] }
var voices = data.voices; // Corrected to access the voices property within the JSON
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);
}
// Button click handler for Text to Speech conversion
$('#convertText').click(function() {
var textToSpeechApiKey = $('#textToSpeechApiKey').val();
var textToConvert = $('#textInput').val();
if (textToConvert && textToSpeechApiKey) {
// Perform AJAX POST request for Text to Speech conversion
$.ajax({
url: 'https://api.elevenlabs.io/v1/text-to-speech/' + $('#voiceSelect').val() + '?output_format=mp3_44100_64',
method: 'POST',
headers: {
'xi-api-key': textToSpeechApiKey, // API key input by user
'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' // Handle binary data response for audio
},
success: function(blob) {
// Create an object URL for the audio blob and play it
var url = window.URL.createObjectURL(blob);
$('#audioPlayer').attr('src', url);
$('#audioPlayer')[0].play();
clearAlert(); // Clear any existing alerts
},
error: function(xhr, status, error) {
displayAlert("Error converting text to speech: " + error);
}
});
} else {
displayAlert("Please enter a text and API key for conversion.");
}
});
// Button click handler for Text to Image generation
$('#generateImage').click(function() {
var textToImageApiKey = $('#textToImageApiKey').val();
var promptText = $('#textPrompt').val();
if (promptText && textToImageApiKey) {
// Form data for POST request
var form = new FormData();
form.append('prompt', promptText);
// Perform AJAX POST request for Text to Image generation
$.ajax({
url: 'https://clipdrop-api.co/text-to-image/v1',
method: 'POST',
headers: {
'x-api-key': textToImageApiKey // API key input by user
},
processData: false,
contentType: false,
data: form,
xhrFields: {
responseType: 'blob' // Expect a binary response for image
},
success: function(blob) {
// Convert the binary data to an image URL and display it
var imageUrl = window.URL.createObjectURL(blob);
$('#imageContainer').html('<img src="' + imageUrl + '" alt="Generated Image"/>');
clearAlert(); // Clear any existing alerts
},
error: function(xhr, status, error) {
displayAlert("Error generating image: " + error);
}
});
} else {
displayAlert("Please enter a prompt and API key for the image.");
}
});
// Reload StyleGAN Pseudo-Person iframe to generate a new image
$('#regeneratePerson').click(function() {
$('#imageFrame').attr('src', 'https://www.thispersondoesnotexist.com'); // Set the iframe src to reload it
clearAlert(); // Clear any existing alerts
});
});