Arsh9210 commited on
Commit
c275c40
·
verified ·
1 Parent(s): 93b6955

Added inference_scripts_vllm/unified_s2s_scripts/web/styles.css

Browse files
inference_scripts_vllm/unified_s2s_scripts/web/styles.css ADDED
@@ -0,0 +1,226 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ :root {
2
+ color-scheme: light;
3
+ --bg: #f7f7fb;
4
+ --panel: #ffffff;
5
+ --border: #dedee8;
6
+ --text: #1f2328;
7
+ --muted: #6b7280;
8
+ --primary: #ff7c00;
9
+ --primary-dark: #df6800;
10
+ --secondary: #f4f4f7;
11
+ --shadow: 0 10px 28px rgba(31, 35, 40, 0.08);
12
+ }
13
+
14
+ * {
15
+ box-sizing: border-box;
16
+ }
17
+
18
+ body {
19
+ margin: 0;
20
+ background: var(--bg);
21
+ color: var(--text);
22
+ font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
23
+ }
24
+
25
+ button,
26
+ input,
27
+ select,
28
+ textarea {
29
+ font: inherit;
30
+ }
31
+
32
+ button {
33
+ border: 1px solid var(--border);
34
+ border-radius: 10px;
35
+ background: var(--secondary);
36
+ color: var(--text);
37
+ cursor: pointer;
38
+ padding: 10px 14px;
39
+ transition: background 120ms ease, border-color 120ms ease, opacity 120ms ease;
40
+ }
41
+
42
+ button:hover:not(:disabled) {
43
+ border-color: #c2c2cf;
44
+ }
45
+
46
+ button:disabled {
47
+ cursor: not-allowed;
48
+ opacity: 0.55;
49
+ }
50
+
51
+ button.primary {
52
+ background: var(--primary);
53
+ border-color: var(--primary);
54
+ color: #ffffff;
55
+ font-weight: 650;
56
+ }
57
+
58
+ button.primary:hover:not(:disabled) {
59
+ background: var(--primary-dark);
60
+ }
61
+
62
+ button.secondary {
63
+ font-weight: 600;
64
+ }
65
+
66
+ .app {
67
+ max-width: 1180px;
68
+ margin: 0 auto;
69
+ padding: 32px 20px 48px;
70
+ }
71
+
72
+ .hero {
73
+ margin-bottom: 18px;
74
+ }
75
+
76
+ .hero h1 {
77
+ margin: 0 0 8px;
78
+ font-size: clamp(30px, 4vw, 44px);
79
+ line-height: 1.05;
80
+ }
81
+
82
+ .hero p {
83
+ margin: 0;
84
+ color: var(--muted);
85
+ font-size: 16px;
86
+ }
87
+
88
+ .panel {
89
+ background: var(--panel);
90
+ border: 1px solid var(--border);
91
+ border-radius: 14px;
92
+ box-shadow: var(--shadow);
93
+ padding: 18px;
94
+ }
95
+
96
+ .model-row {
97
+ align-items: end;
98
+ display: grid;
99
+ gap: 14px;
100
+ grid-template-columns: minmax(220px, 360px) 1fr;
101
+ margin-bottom: 18px;
102
+ }
103
+
104
+ .grid {
105
+ display: grid;
106
+ gap: 18px;
107
+ grid-template-columns: minmax(320px, 0.92fr) minmax(360px, 1.08fr);
108
+ }
109
+
110
+ .controls,
111
+ .outputs {
112
+ display: flex;
113
+ flex-direction: column;
114
+ gap: 16px;
115
+ }
116
+
117
+ .field {
118
+ display: flex;
119
+ flex-direction: column;
120
+ gap: 7px;
121
+ }
122
+
123
+ .field > span,
124
+ .checkbox span {
125
+ font-weight: 650;
126
+ }
127
+
128
+ .checkbox {
129
+ align-items: center;
130
+ display: flex;
131
+ gap: 9px;
132
+ }
133
+
134
+ input[type="text"],
135
+ select,
136
+ textarea {
137
+ width: 100%;
138
+ border: 1px solid var(--border);
139
+ border-radius: 10px;
140
+ background: #ffffff;
141
+ color: var(--text);
142
+ padding: 10px 12px;
143
+ }
144
+
145
+ textarea {
146
+ line-height: 1.45;
147
+ resize: vertical;
148
+ }
149
+
150
+ input[readonly],
151
+ textarea[readonly] {
152
+ background: #fafafa;
153
+ }
154
+
155
+ .audio-inputs {
156
+ align-items: center;
157
+ display: flex;
158
+ flex-wrap: wrap;
159
+ gap: 10px;
160
+ }
161
+
162
+ .hint {
163
+ color: var(--muted);
164
+ font-size: 13px;
165
+ }
166
+
167
+ .button-stack {
168
+ display: grid;
169
+ gap: 10px;
170
+ }
171
+
172
+ .status-pill {
173
+ align-self: center;
174
+ border: 1px solid var(--border);
175
+ border-radius: 999px;
176
+ color: var(--muted);
177
+ justify-self: end;
178
+ padding: 8px 12px;
179
+ }
180
+
181
+ .status-pill.ready {
182
+ border-color: #2fa66a;
183
+ color: #197045;
184
+ }
185
+
186
+ .status-pill.error {
187
+ border-color: #d74b4b;
188
+ color: #a82727;
189
+ }
190
+
191
+ .speech-card {
192
+ border: 1px solid var(--border);
193
+ border-radius: 12px;
194
+ overflow: hidden;
195
+ background: #101827;
196
+ }
197
+
198
+ #visualizer {
199
+ display: block;
200
+ height: 180px;
201
+ width: 100%;
202
+ }
203
+
204
+ #audio-state {
205
+ background: #ffffff;
206
+ border-top: 1px solid var(--border);
207
+ padding: 9px 12px;
208
+ }
209
+
210
+ #audio-output {
211
+ display: block;
212
+ width: 100%;
213
+ border-top: 1px solid var(--border);
214
+ background: #ffffff;
215
+ }
216
+
217
+ @media (max-width: 840px) {
218
+ .model-row,
219
+ .grid {
220
+ grid-template-columns: 1fr;
221
+ }
222
+
223
+ .status-pill {
224
+ justify-self: start;
225
+ }
226
+ }