Hugging Face's logo

Spaces:
sanjay7178
/
ssml2text
Running

App Files Community
sanjay7178 commited on
Commit
3b33102
·
verified ·
1 Parent(s): 699b0d1

Create templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +130 -0
templates/index.html ADDED
@@ -0,0 +1,130 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
+ <title>SSML Tag Processor</title>
7
+ <style>
8
+ body {
9
+ font-family: Arial, sans-serif;
10
+ max-width: 1000px;
11
+ margin: 0 auto;
12
+ padding: 20px;
13
+ line-height: 1.6;
14
+ }
15
+ h1 {
16
+ color: #333;
17
+ text-align: center;
18
+ }
19
+ .container {
20
+ display: flex;
21
+ flex-direction: column;
22
+ gap: 20px;
23
+ }
24
+ .text-areas {
25
+ display: flex;
26
+ gap: 20px;
27
+ }
28
+ .text-area-container {
29
+ flex: 1;
30
+ display: flex;
31
+ flex-direction: column;
32
+ }
33
+ label {
34
+ font-weight: bold;
35
+ margin-bottom: 5px;
36
+ }
37
+ textarea {
38
+ width: 100%;
39
+ height: 400px;
40
+ padding: 10px;
41
+ box-sizing: border-box;
42
+ border: 1px solid #ccc;
43
+ border-radius: 4px;
44
+ font-family: monospace;
45
+ font-size: 14px;
46
+ resize: vertical;
47
+ }
48
+ .buttons {
49
+ display: flex;
50
+ justify-content: center;
51
+ gap: 10px;
52
+ }
53
+ button {
54
+ background-color: #4CAF50;
55
+ color: white;
56
+ padding: 10px 20px;
57
+ border: none;
58
+ border-radius: 4px;
59
+ cursor: pointer;
60
+ font-size: 16px;
61
+ }
62
+ button:hover {
63
+ background-color: #45a049;
64
+ }
65
+ .clear-btn {
66
+ background-color: #f44336;
67
+ }
68
+ .clear-btn:hover {
69
+ background-color: #d32f2f;
70
+ }
71
+ .copy-btn {
72
+ background-color: #2196F3;
73
+ }
74
+ .copy-btn:hover {
75
+ background-color: #0b7dda;
76
+ }
77
+ .instructions {
78
+ background-color: #f9f9f9;
79
+ padding: 15px;
80
+ border-radius: 4px;
81
+ margin-bottom: 20px;
82
+ }
83
+ </style>
84
+ </head>
85
+ <body>
86
+ <h1>SSML Tag Processor</h1>
87
+
88
+ <div class="instructions">
89
+ <h3>Instructions:</h3>
90
+ <p>Paste SSML-tagged text in the input area on the left, then click "Process" to extract plain text with each tag's content.</p>
91
+ <p>Example: <code>Hello &lt;textnorm class='SomeClass' text='example'&gt;world&lt;/textnorm&gt;</code> → <code>Hello world</code></p>
92
+ </div>
93
+
94
+ <form method="POST">
95
+ <div class="container">
96
+ <div class="text-areas">
97
+ <div class="text-area-container">
98
+ <label for="input_text">Input (SSML text):</label>
99
+ <textarea id="input_text" name="input_text" placeholder="Paste your SSML text here...">{{ input_text }}</textarea>
100
+ </div>
101
+
102
+ <div class="text-area-container">
103
+ <label for="output_text">Output (Processed text):</label>
104
+ <textarea id="output_text" readonly placeholder="Processed text will appear here...">{{ processed_text }}</textarea>
105
+ </div>
106
+ </div>
107
+
108
+ <div class="buttons">
109
+ <button type="submit">Process</button>
110
+ <button type="button" class="clear-btn" onclick="clearTextareas()">Clear All</button>
111
+ <button type="button" class="copy-btn" onclick="copyToClipboard()">Copy Output</button>
112
+ </div>
113
+ </div>
114
+ </form>
115
+
116
+ <script>
117
+ function clearTextareas() {
118
+ document.getElementById('input_text').value = '';
119
+ document.getElementById('output_text').value = '';
120
+ }
121
+
122
+ function copyToClipboard() {
123
+ const outputText = document.getElementById('output_text');
124
+ outputText.select();
125
+ document.execCommand('copy');
126
+ alert('Output copied to clipboard!');
127
+ }
128
+ </script>
129
+ </body>
130
+ </html>