Spaces:

Chillarmo
/

ATOM-WebGPU

Running

App Files Files Community

Chillarmo commited on Nov 25, 2025

Commit

d5e2966

verified ·

1 Parent(s): f29bf26

Update index.html

Browse files

Files changed (1) hide show

index.html +306 -20

index.html CHANGED Viewed

@@ -1,29 +1,315 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8" />
-    <link rel="stylesheet" href="style.css" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Transformers.js - Object Detection</title>
-</head>
 <body>
-    <h1>Object Detection w/ 🤗 Transformers.js</h1>
-    <label id="container" for="upload">
-        <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path fill="#000"
-                d="M3.5 24.3a3 3 0 0 1-1.9-.8c-.5-.5-.8-1.2-.8-1.9V2.9c0-.7.3-1.3.8-1.9.6-.5 1.2-.7 2-.7h18.6c.7 0 1.3.2 1.9.7.5.6.7 1.2.7 2v18.6c0 .7-.2 1.4-.7 1.9a3 3 0 0 1-2 .8H3.6Zm0-2.7h18.7V2.9H3.5v18.7Zm2.7-2.7h13.3c.3 0 .5 0 .6-.3v-.7l-3.7-5a.6.6 0 0 0-.6-.2c-.2 0-.4 0-.5.3l-3.5 4.6-2.4-3.3a.6.6 0 0 0-.6-.3c-.2 0-.4.1-.5.3l-2.7 3.6c-.1.2-.2.4 0 .7.1.2.3.3.6.3Z">
-            </path>
-        </svg>
-        Click to upload image
-        <label id="example">(or try example)</label>
-    </label>
-    <label id="status">Loading model...</label>
-    <input id="upload" type="file" accept="image/*" />
-    <script src="index.js" type="module"></script>
-</body>
 </html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>ATOM - Armenian Transcription</title>
+    <style>
+        * {
+            box-sizing: border-box;
+            padding: 0;
+            margin: 0;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+        }
+        body {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 2rem;
+        }
+        h1 {
+            color: white;
+            margin-bottom: 0.5rem;
+            font-size: 2.5rem;
+            text-align: center;
+            text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
+        }
+        .subtitle {
+            color: rgba(255, 255, 255, 0.9);
+            margin-bottom: 2rem;
+            text-align: center;
+            font-size: 1.1rem;
+        }
+        .container {
+            background: white;
+            border-radius: 20px;
+            padding: 2rem;
+            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
+            max-width: 900px;
+            width: 100%;
+        }
+        #status {
+            padding: 1rem;
+            background: #f0f4f8;
+            border-radius: 10px;
+            margin-bottom: 1.5rem;
+            text-align: center;
+            font-weight: 500;
+            color: #4a5568;
+            transition: all 0.3s ease;
+        }
+        #status.loading { background: #fef3c7; color: #92400e; }
+        #status.ready { background: #d1fae5; color: #065f46; }
+        #status.recording { background: #fecaca; color: #991b1b; animation: pulse 2s infinite; }
+        #status.processing { background: #dbeafe; color: #1e40af; }
+        #status.error { background: #fee2e2; color: #991b1b; }
+        @keyframes pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.7; }
+        }
+        .info-box {
+            background: #eff6ff;
+            border-left: 4px solid #3b82f6;
+            padding: 1rem;
+            border-radius: 8px;
+            margin-bottom: 1.5rem;
+            font-size: 0.9rem;
+            color: #1e40af;
+        }
+        .stats {
+            display: flex;
+            gap: 1rem;
+            justify-content: space-around;
+            padding: 1rem;
+            background: #f9fafb;
+            border-radius: 8px;
+            margin-bottom: 1.5rem;
+        }
+        .stat-item { text-align: center; }
+        .stat-value { font-size: 1.5rem; font-weight: 700; color: #667eea; }
+        .stat-label { font-size: 0.85rem; color: #6b7280; margin-top: 0.25rem; }
+        .audio-visualizer {
+            height: 80px;
+            background: #1f2937;
+            border-radius: 8px;
+            margin-bottom: 1.5rem;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 4px;
+            padding: 1rem;
+        }
+        .bar {
+            width: 6px;
+            background: linear-gradient(to top, #10b981, #34d399);
+            border-radius: 3px;
+            transition: height 0.1s ease;
+            min-height: 4px;
+        }
+        .settings {
+            display: flex;
+            gap: 1.5rem;
+            margin-bottom: 1.5rem;
+            flex-wrap: wrap;
+            padding: 1rem;
+            background: #f9fafb;
+            border-radius: 8px;
+        }
+        .setting-group {
+            display: flex;
+            flex-direction: column;
+            gap: 0.5rem;
+        }
+        .setting-group label {
+            font-size: 0.9rem;
+            font-weight: 500;
+            color: #4b5563;
+        }
+        select {
+            padding: 0.5rem;
+            border: 2px solid #e5e7eb;
+            border-radius: 6px;
+            font-size: 0.9rem;
+            background: white;
+        }
+        .controls {
+            display: flex;
+            gap: 1rem;
+            justify-content: center;
+            margin-bottom: 2rem;
+            flex-wrap: wrap;
+        }
+        button {
+            padding: 1rem 2rem;
+            font-size: 1rem;
+            font-weight: 600;
+            border: none;
+            border-radius: 10px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+        }
+        button:disabled { opacity: 0.5; cursor: not-allowed; }
+        #startBtn { background: #10b981; color: white; }
+        #startBtn:hover:not(:disabled) {
+            background: #059669;
+            transform: translateY(-2px);
+            box-shadow: 0 6px 12px rgba(0,0,0,0.15);
+        }
+        #stopBtn { background: #ef4444; color: white; }
+        #stopBtn:hover:not(:disabled) {
+            background: #dc2626;
+            transform: translateY(-2px);
+            box-shadow: 0 6px 12px rgba(0,0,0,0.15);
+        }
+        #clearBtn { background: #6b7280; color: white; }
+        #clearBtn:hover:not(:disabled) { background: #4b5563; }
+        .transcription-container {
+            background: #f9fafb;
+            border: 2px solid #e5e7eb;
+            border-radius: 10px;
+            padding: 1.5rem;
+            min-height: 300px;
+            max-height: 500px;
+            overflow-y: auto;
+        }
+        .transcription-item {
+            margin-bottom: 1rem;
+            padding: 1rem;
+            background: white;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+            animation: slideIn 0.3s ease;
+        }
+        @keyframes slideIn {
+            from { opacity: 0; transform: translateY(-10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .timestamp {
+            font-size: 0.85rem;
+            color: #6b7280;
+            margin-bottom: 0.5rem;
+            font-family: monospace;
+        }
+        .text {
+            color: #1f2937;
+            line-height: 1.6;
+            font-size: 1.1rem;
+        }
+        .empty-state {
+            text-align: center;
+            color: #9ca3af;
+            padding: 3rem;
+        }
+        .empty-state svg {
+            width: 64px;
+            height: 64px;
+            margin-bottom: 1rem;
+            opacity: 0.5;
+        }
+    </style>
+</head>
 <body>
+    <h1>🎤 ATOM - Armenian Transcription</h1>
+    <p class="subtitle">Real-time Armenian speech recognition with WebGPU</p>
+    <div class="container">
+        <div id="status" class="loading">Loading ATOM model...</div>
+        <div class="info-box">
+            <strong>Armenian-only model:</strong> This custom ATOM model is trained specifically for Armenian speech recognition.
+            WebGPU acceleration recommended (Chrome/Edge 113+).
+        </div>
+        <div class="stats">
+            <div class="stat-item">
+                <div class="stat-value" id="chunkCount">0</div>
+                <div class="stat-label">Chunks Processed</div>
+            </div>
+            <div class="stat-item">
+                <div class="stat-value" id="recordingTime">00:00</div>
+                <div class="stat-label">Recording Time</div>
+            </div>
+        </div>
+        <div class="settings">
+            <div class="setting-group">
+                <label for="chunkLength">Chunk Duration:</label>
+                <select id="chunkLength">
+                    <option value="3">3 seconds</option>
+                    <option value="5" selected>5 seconds</option>
+                    <option value="8">8 seconds</option>
+                    <option value="10">10 seconds</option>
+                </select>
+            </div>
+            <div class="setting-group">
+                <label>
+                    <input type="checkbox" id="useWebGPU" checked>
+                    Use WebGPU Acceleration
+                </label>
+            </div>
+        </div>
+        <div class="audio-visualizer" id="visualizer">
+            <div class="bar"></div>
+            <div class="bar"></div>
+            <div class="bar"></div>
+            <div class="bar"></div>
+            <div class="bar"></div>
+            <div class="bar"></div>
+            <div class="bar"></div>
+            <div class="bar"></div>
+            <div class="bar"></div>
+            <div class="bar"></div>
+            <div class="bar"></div>
+            <div class="bar"></div>
+            <div class="bar"></div>
+            <div class="bar"></div>
+            <div class="bar"></div>
+            <div class="bar"></div>
+            <div class="bar"></div>
+            <div class="bar"></div>
+            <div class="bar"></div>
+            <div class="bar"></div>
+        </div>
+        <div class="controls">
+            <button id="startBtn">🎙️ Start Recording</button>
+            <button id="stopBtn" disabled>⏹️ Stop Recording</button>
+            <button id="clearBtn">🗑️ Clear</button>
+        </div>
+        <div class="transcription-container" id="transcriptionContainer">
+            <div class="empty-state">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z" />
+                </svg>
+                <p>Click "Start Recording" to begin transcribing Armenian speech</p>
+            </div>
+        </div>
+    </div>
+    <script type="module" src="index.js"></script>
+</body>
 </html>