forked from TheMorpheus407/OpenAI-Audiobook-Generator
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
117 lines (106 loc) · 4.47 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!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>
<!-- 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>
<!-- Language Section -->
<div id="language-section">
<label for="language">Choose your language</label>
<select id="language" class="form-select" aria-label="language" onchange="changeLanguage()">
<option value="de">German</option>
<option value="en">English</option>
<option value="fr">French</option>
<option value="es">Spanish</option>
<option value="it">Italian</option>
<option value="pt">Portuguese</option>
<option value="ja">Japanese</option>
<option value="ko">Korean</option>
<option value="zh">Chinese</option>
</select>
</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>
<!-- Cost Estimation Section -->
<div id="cost-estimation">
<p id="cost-estimate-display">Estimated Cost for Conversion: $X.XX</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>
<!-- 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>
function changeLanguage() {
var language = document.getElementById("language").value;
document.documentElement.lang = language;
}
</script>
<script src="pdf.js"></script>
<script>
pdfjsLib.GlobalWorkerOptions.workerSrc = 'pdf.worker.js';
</script>
<script src="jszip.min.js"></script>
<script src="audiobuffer-to-wav.js"></script>
<script src="main.js"></script>
</body>
</body>
</html>