Upload 2 files
Browse files- index.html +16 -1
- style.css +42 -0
index.html
CHANGED
|
@@ -7,7 +7,16 @@
|
|
| 7 |
<link rel="stylesheet" href="style.css?v=3">
|
| 8 |
</head>
|
| 9 |
<body>
|
| 10 |
-
<
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 11 |
<!-- Header -->
|
| 12 |
<h1>Granite Speech WebGPU</h1>
|
| 13 |
<h2>Speech recognition and translation directly in your browser</h2>
|
|
@@ -127,6 +136,12 @@
|
|
| 127 |
<div class="gpu-info" id="gpuInfo"></div>
|
| 128 |
</div>
|
| 129 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 130 |
<!-- ORT global is retained for VAD (vad.js) and punctuation (punctuator.js) which use WASM -->
|
| 131 |
<script src="https://cdn.jsdelivr.net/npm/onnxruntime-web@1.24.3/dist/ort.all.min.js"></script>
|
| 132 |
<script src="vad.js?v=1"></script>
|
|
|
|
| 7 |
<link rel="stylesheet" href="style.css?v=3">
|
| 8 |
</head>
|
| 9 |
<body>
|
| 10 |
+
<!-- Browser compatibility banner (hidden by default) -->
|
| 11 |
+
<div class="browser-error" id="browserError" style="display: none;">
|
| 12 |
+
<div class="browser-error-content">
|
| 13 |
+
<h2>Browser Not Supported</h2>
|
| 14 |
+
<p>This demo requires <strong>WebGPU</strong>, which is not available in your browser.</p>
|
| 15 |
+
<p>Please use <strong>Google Chrome 113+</strong> or <strong>Microsoft Edge 113+</strong> on desktop.</p>
|
| 16 |
+
</div>
|
| 17 |
+
</div>
|
| 18 |
+
|
| 19 |
+
<div class="container" id="appContainer">
|
| 20 |
<!-- Header -->
|
| 21 |
<h1>Granite Speech WebGPU</h1>
|
| 22 |
<h2>Speech recognition and translation directly in your browser</h2>
|
|
|
|
| 136 |
<div class="gpu-info" id="gpuInfo"></div>
|
| 137 |
</div>
|
| 138 |
|
| 139 |
+
<script>
|
| 140 |
+
if (!navigator.gpu) {
|
| 141 |
+
document.getElementById('browserError').style.display = 'flex';
|
| 142 |
+
document.getElementById('appContainer').style.display = 'none';
|
| 143 |
+
}
|
| 144 |
+
</script>
|
| 145 |
<!-- ORT global is retained for VAD (vad.js) and punctuation (punctuator.js) which use WASM -->
|
| 146 |
<script src="https://cdn.jsdelivr.net/npm/onnxruntime-web@1.24.3/dist/ort.all.min.js"></script>
|
| 147 |
<script src="vad.js?v=1"></script>
|
style.css
CHANGED
|
@@ -460,6 +460,36 @@ h2 {
|
|
| 460 |
color: #94a3b8;
|
| 461 |
}
|
| 462 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 463 |
/* Responsive */
|
| 464 |
@media (max-width: 640px) {
|
| 465 |
body {
|
|
@@ -623,6 +653,18 @@ h2 {
|
|
| 623 |
color: #64748b;
|
| 624 |
}
|
| 625 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 626 |
/* Scrollbar dark */
|
| 627 |
.transcript-output::-webkit-scrollbar-track {
|
| 628 |
background: #1e293b;
|
|
|
|
| 460 |
color: #94a3b8;
|
| 461 |
}
|
| 462 |
|
| 463 |
+
/* Browser Error */
|
| 464 |
+
.browser-error {
|
| 465 |
+
position: fixed;
|
| 466 |
+
inset: 0;
|
| 467 |
+
display: flex;
|
| 468 |
+
align-items: center;
|
| 469 |
+
justify-content: center;
|
| 470 |
+
background: #f8fafc;
|
| 471 |
+
z-index: 100;
|
| 472 |
+
padding: 2rem;
|
| 473 |
+
}
|
| 474 |
+
|
| 475 |
+
.browser-error-content {
|
| 476 |
+
text-align: center;
|
| 477 |
+
max-width: 440px;
|
| 478 |
+
}
|
| 479 |
+
|
| 480 |
+
.browser-error-content h2 {
|
| 481 |
+
font-size: 1.5rem;
|
| 482 |
+
font-weight: 700;
|
| 483 |
+
color: #0f172a;
|
| 484 |
+
margin-bottom: 1rem;
|
| 485 |
+
}
|
| 486 |
+
|
| 487 |
+
.browser-error-content p {
|
| 488 |
+
font-size: 1rem;
|
| 489 |
+
color: #64748b;
|
| 490 |
+
margin-bottom: 0.5rem;
|
| 491 |
+
}
|
| 492 |
+
|
| 493 |
/* Responsive */
|
| 494 |
@media (max-width: 640px) {
|
| 495 |
body {
|
|
|
|
| 653 |
color: #64748b;
|
| 654 |
}
|
| 655 |
|
| 656 |
+
.browser-error {
|
| 657 |
+
background: #0f172a;
|
| 658 |
+
}
|
| 659 |
+
|
| 660 |
+
.browser-error-content h2 {
|
| 661 |
+
color: #f1f5f9;
|
| 662 |
+
}
|
| 663 |
+
|
| 664 |
+
.browser-error-content p {
|
| 665 |
+
color: #94a3b8;
|
| 666 |
+
}
|
| 667 |
+
|
| 668 |
/* Scrollbar dark */
|
| 669 |
.transcript-output::-webkit-scrollbar-track {
|
| 670 |
background: #1e293b;
|