Hugging Face's logo

Spaces:
Dmtlant
/
BarVOx
Running

App Files Community
Dmtlant commited on
Commit
a4cc52f
·
verified ·
1 Parent(s): e4cfe31

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +107 -17
index.html CHANGED
@@ -1,19 +1,109 @@
1
- <!doctype html>
2
  <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
  <html>
3
+ <head>
4
+ <title>TTS GUI</title>
5
+ <style>
6
+ body {
7
+ font-family: Arial, sans-serif;
8
+ display: flex;
9
+ flex-direction: column;
10
+ align-items: center;
11
+ justify-content: center;
12
+ height: 100vh;
13
+ margin: 0;
14
+ background-color: #f0f0f0;
15
+ }
16
+
17
+ .container {
18
+ background-color: white;
19
+ padding: 20px;
20
+ border-radius: 8px;
21
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
22
+ width: 400px;
23
+ }
24
+
25
+ textarea {
26
+ width: 100%;
27
+ height: 100px;
28
+ font-size: 16px;
29
+ padding: 10px;
30
+ box-sizing: border-box;
31
+ border: 1px solid #ccc;
32
+ border-radius: 4px;
33
+ resize: vertical;
34
+ }
35
+
36
+ button {
37
+ width: 100%;
38
+ font-size: 16px;
39
+ padding: 10px;
40
+ background-color: #4CAF50;
41
+ color: white;
42
+ border: none;
43
+ border-radius: 4px;
44
+ cursor: pointer;
45
+ margin-top: 10px;
46
+ }
47
+
48
+ button:hover {
49
+ background-color: #45a049;
50
+ }
51
+
52
+ #log-container {
53
+ margin-top: 20px;
54
+ width: 100%;
55
+ max-height: 200px;
56
+ overflow-y: auto;
57
+ background-color: #f0f0f0;
58
+ padding: 10px;
59
+ border-radius: 4px;
60
+ font-size: 14px;
61
+ }
62
+ </style>
63
+ </head>
64
+ <body>
65
+ <div class="container">
66
+ <textarea id="text-input" placeholder="Enter text to convert to speech"></textarea>
67
+ <button onclick="generateSpeech()">Generate Speech</button>
68
+ <div id="log-container">
69
+ <pre id="log"></pre>
70
+ </div>
71
+ </div>
72
+
73
+ <script>
74
+ async function generateSpeech() {
75
+ const textInput = document.getElementById('text-input').value;
76
+ const response = await query({ "inputs": textInput });
77
+ const audioBlob = response;
78
+ // Use the audioBlob to play the speech or save it to a file
79
+ console.log(audioBlob);
80
+ }
81
+
82
+ async function query(data) {
83
+ logMessage('Sending request to the server...');
84
+
85
+ const response = await fetch(
86
+ "https://api-inference.huggingface.co/models/suno/bark-small",
87
+ {
88
+ headers: {
89
+ Authorization: "Bearer hf_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
90
+ "Content-Type": "application/json",
91
+ },
92
+ method: "POST",
93
+ body: JSON.stringify(data),
94
+ }
95
+ );
96
+
97
+ logMessage('Response received from the server.');
98
+
99
+ const result = await response.blob();
100
+ return result;
101
+ }
102
+
103
+ function logMessage(message) {
104
+ const logContainer = document.getElementById('log');
105
+ logContainer.textContent += `${message}\n`;
106
+ }
107
+ </script>
108
+ </body>
109
  </html>