Merge pull request #4 from Jane232/main

Fix issue #3 - Add error messages

index.html

@@ -37,7 +37,10 @@ <h1>Text-to-Audio Converter</h1>
 <div id="generate-section">
     <button id="generate-audiobook">Generate Audiobook</button>
 </div>
-
+<!-- Error Indicator (Hidden Initially) -->
+<div id="error-indicator" style="display: none;">
+    <p style="color:red;">An error occured calling the OpenAI API: <br/>Are you sure that the entered key is valid and that there is enough credit balance on your account?</p>
+</div>
 <!-- Progress Indicator (Hidden Initially) -->
 <div id="progress-indicator" style="display: none;">
     <p>Converting...</p>

main.js

@@ -85,6 +85,7 @@ function generateAudiobook() {
     var segments = splitTextIntoSegments(text, 4000);
     var audioBlobs = new Array(segments.length);
     var progressBar = document.getElementById('progressbar1');
+	document.getElementById('error-indicator').style.display = 'none';
     progressBar.max = segments.length;
     progressBar.value = 0;
 
@@ -150,6 +151,7 @@ function callOpenAIAPI(segment, apiKey, callback) {
             callback(audioBlob);
         } else {
             console.error("Error calling OpenAI API: " + xhr.statusText);
+			document.getElementById('error-indicator').style.display = 'block';
         }
     };