diff --git a/index.html b/index.html index 0196b9a..5c9f5e1 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,6 @@ + Audiobook Generator @@ -7,60 +8,86 @@ <link href="bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="style.css"> </head> + <body> -<!-- Example Key for test usage: --> -<!-- Example data: eins. zwei. drei. vier. fünf. sechs. sieben. acht. neun. zehn. --> -<!-- Header Section --> -<header> - <h1>Text-to-Audio Converter</h1> -</header> + <!-- Example Key for test usage: --> + <!-- Example data: eins. zwei. drei. vier. fünf. sechs. sieben. acht. neun. zehn. --> + <!-- Header Section --> + <header> + <h1>Text-to-Audio Converter</h1> + </header> + + <!-- API Key Input Section --> + <div id="api-key-section"> + <label for="api-key">Enter OpenAI API Key:</label> + <input type="text" id="api-key" name="api-key"> + </div> -<!-- API Key Input Section --> -<div id="api-key-section"> - <label for="api-key">Enter OpenAI API Key:</label> - <input type="text" id="api-key" name="api-key"> -</div> + <!-- File Upload and Text Input Section --> + <div id="input-section"> + <input type="file" id="file-upload" name="file-upload"> + <label for="file-upload">Upload .txt or .ePub File OR enter some text</label> + <textarea id="text-input" name="text-input" rows="10" cols="50" + placeholder="Paste or type text here"></textarea> + </div> -<!-- File Upload and Text Input Section --> -<div id="input-section"> - <input type="file" id="file-upload" name="file-upload"> - <label for="file-upload">Upload .txt or .ePub File OR enter some text</label> - <textarea id="text-input" name="text-input" rows="10" cols="50" placeholder="Paste or type text here"></textarea> -</div> -<!-- Cost Estimation Section --> -<div id="cost-estimation"> - <p id="cost-estimate-display">Estimated Cost for Conversion: $X.XX</p> -</div> + <!-- Voice Section --> + <div id="voice-section"> + <label for="voice">Choose your voice</label> + <select id="voice" class="form-select" aria-label="voice"> + <option selected value="onyx">Onyx</option> + <option value="nova">Nova</option> + <option value="alloy">Alloy</option> + <option value="echo">Echo</option> + <option value="fable">Fable</option> + <option value="shimmer">Shimmer</option> + </select> + <p> + If you want to hear examples of the voices check out the + <a href="https://platform.openai.com/docs/guides/text-to-speech" + target="_blank">OpenAI documentation</a>. + </p> + </div> -<!-- Audiobook Generation Section --> -<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> -</div> + <!-- Cost Estimation Section --> + <div id="cost-estimation"> + <p id="cost-estimate-display">Estimated Cost for Conversion: $X.XX</p> + </div> -<!-- Footer Section --> -<footer> - <p> - By using this Text-to-Audio Converter / Audiobook Creator, you acknowledge that you have read and agreed to all terms and conditions outlined in the licenses and agreements of this repository. For more details, please visit - <a href="https://github.com/TheMorpheus407/OpenAI-Audiobook-Generator" target="_blank">https://github.com/TheMorpheus407/OpenAI-Audiobook-Generator</a>. - </p> - <p>Get your OpenAI API Key <a href="https://platform.openai.com/api-keys">here</a>.</p> - <p id="status">This will take some time... Make sure to not interrupt the process!</p> - <p>Step 1: Creating TTS: <progress id="progressbar1" value="0" max="0"></progress></p> - <p>Step 2: Creating your file: <progress id="progressbar2" value="0" max="0"></progress></p> -</footer> + <!-- Audiobook Generation Section --> + <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> + </div> + <!-- Footer Section --> + <footer> + <p> + By using this Text-to-Audio Converter / Audiobook Creator, you acknowledge that you have read and agreed to + all terms and conditions outlined in the licenses and agreements of this repository. For more details, + please visit + <a href="https://github.com/TheMorpheus407/OpenAI-Audiobook-Generator" + target="_blank">https://github.com/TheMorpheus407/OpenAI-Audiobook-Generator</a>. + </p> + <p>Get your OpenAI API Key <a href="https://platform.openai.com/api-keys" target="_blank">here</a>.</p> + <p id="status">This will take some time... Make sure to not interrupt the process!</p> + <p>Step 1: Creating TTS: <progress id="progressbar1" value="0" max="0"></progress></p> + <p>Step 2: Creating your file: <progress id="progressbar2" value="0" max="0"></progress></p> + </footer> -<script src="jszip.min.js"></script> -<script src="audiobuffer-to-wav.js"></script> -<script src="main.js"></script> + + <script src="jszip.min.js"></script> + <script src="audiobuffer-to-wav.js"></script> + <script src="main.js"></script> </body> -</html> + +</html> \ No newline at end of file diff --git a/main.js b/main.js index 3ed8fb6..6bb48bb 100644 --- a/main.js +++ b/main.js @@ -161,7 +161,7 @@ function callOpenAIAPI(segment, apiKey, callback) { var data = JSON.stringify({ "model": "tts-1", "input": segment, - "voice": "nova" + "voice": document.getElementById("voice").value }); xhr.send(data); }