Hugging Face's logo

Spaces:
Gregniuki
/
Pipertts
Running

App Files Community
1
Gregniuki commited on
Commit
3ce6dc6
•
1 Parent(s): 837a9d4

Upload 2 files

Browse files
Files changed (2) hide show
  1. templates/interface.html +33 -0
  2. templates/styles.css +93 -0
templates/interface.html ADDED
@@ -0,0 +1,33 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <link rel="stylesheet" href="styles.css"> <!-- Link to your external CSS file -->
7
+ <title>FastAPI HTML Interface</title>
8
+ </head>
9
+ <body>
10
+ <h1>FastAPI HTML Interface</h1>
11
+ <form>
12
+ <div class="form-group">
13
+ <label for="speaker">Select speaker:</label>
14
+ <select id="speaker" name="speaker">
15
+ {% for option in data.speaker_options %}
16
+ <option {% if option == data.default_speaker %}selected{% endif %}>{{ option }}</option>
17
+ {% endfor %}
18
+ </select>
19
+ </div>
20
+ <div class="form-group">
21
+ <label for="text">Text to synthesize:</label>
22
+ <input type="text" id="text" name="text" placeholder="Enter your text here" class="text-input">
23
+ </div>
24
+ <div class="form-group">
25
+ <label for="rate">Rate scale:</label>
26
+ <input type="range" id="rate" name="rate" min="0.25" max="4" step="0.1" value="1" class="slider">
27
+ </div>
28
+ <!-- Add more form elements here -->
29
+ <button type="button" id="synthesize" class="btn-success">Synthesize</button>
30
+ <button type="button" id="exit" class="btn-danger">Exit</button>
31
+ </form>
32
+ </body>
33
+ </html>
templates/styles.css ADDED
@@ -0,0 +1,93 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /* Reset some default styles to ensure consistency */
2
+ * {
3
+ margin: 0;
4
+ padding: 0;
5
+ box-sizing: border-box;
6
+ }
7
+
8
+ /* Basic body styles */
9
+ body {
10
+ font-family: Arial, sans-serif;
11
+ background-color: #f0f0f0;
12
+ padding: 20px;
13
+ text-align: center;
14
+ }
15
+
16
+ /* Header styles */
17
+ h1 {
18
+ color: #333;
19
+ font-size: 24px;
20
+ margin-bottom: 20px;
21
+ }
22
+
23
+ /* Form container styles */
24
+ form {
25
+ background-color: #fff;
26
+ border-radius: 8px;
27
+ padding: 20px;
28
+ box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
29
+ }
30
+
31
+ /* Form group styles */
32
+ .form-group {
33
+ margin-bottom: 15px;
34
+ }
35
+
36
+ /* Label styles */
37
+ label {
38
+ display: block;
39
+ font-weight: bold;
40
+ margin-bottom: 5px;
41
+ color: #555;
42
+ }
43
+
44
+ /* Select styles */
45
+ select {
46
+ width: 100%;
47
+ padding: 10px;
48
+ border: 1px solid #ccc;
49
+ border-radius: 4px;
50
+ font-size: 16px;
51
+ }
52
+
53
+ /* Input styles */
54
+ input[type="text"] {
55
+ width: 100%;
56
+ padding: 10px;
57
+ border: 1px solid #ccc;
58
+ border-radius: 4px;
59
+ font-size: 16px;
60
+ }
61
+
62
+ /* Slider styles */
63
+ input[type="range"] {
64
+ width: 100%;
65
+ }
66
+
67
+ /* Button styles */
68
+ button {
69
+ padding: 10px 20px;
70
+ border: none;
71
+ border-radius: 4px;
72
+ font-size: 16px;
73
+ cursor: pointer;
74
+ margin-right: 10px;
75
+ }
76
+
77
+ /* Button colors */
78
+ .btn-success {
79
+ background-color: #28a745;
80
+ color: #fff;
81
+ }
82
+
83
+ .btn-danger {
84
+ background-color: #dc3545;
85
+ color: #fff;
86
+ }
87
+
88
+ /* Button hover styles */
89
+ button:hover {
90
+ opacity: 0.8;
91
+ }
92
+
93
+ /* Customize more styles as needed */