Skip to content

Commit

Permalink
added selection for choosing the voice. Set onyx to standard.
Browse files Browse the repository at this point in the history
  • Loading branch information
Mischa Rohleder committed Dec 15, 2023
1 parent bed4121 commit 0ef41c6
Show file tree
Hide file tree
Showing 2 changed files with 76 additions and 49 deletions.
123 changes: 75 additions & 48 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,66 +1,93 @@
<!DOCTYPE html>
<html lang="en">

<head>
<title>
Audiobook Generator
</title>
<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>
2 changes: 1 addition & 1 deletion main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -161,7 +161,7 @@ function callOpenAIAPI(segment, apiKey, callback) {
var data = JSON.stringify({
"model": "tts-1",
"input": segment,
"voice": "onyx"
"voice": document.getElementById("voice").value
});
xhr.send(data);
}
Expand Down

0 comments on commit 0ef41c6

Please sign in to comment.