npm - webtalk - Versions diffs - 1.0.0 - Mend

webtalk 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (29) hide show

package/.gitattributes +35 -0
package/.github/workflows/publish.yml +26 -0
package/README.md +1 -0
package/app.html +519 -0
package/assets/index-ClpvH5Vn.js +40 -0
package/assets/index-DUYekU7u.css +1 -0
package/assets/worker-BPxxCWVT.js +2679 -0
package/config.js +36 -0
package/debug.js +21 -0
package/download-lock.js +26 -0
package/hot-reload.js +78 -0
package/middleware.js +62 -0
package/package.json +33 -0
package/persistent-state.js +62 -0
package/sdk.js +22 -0
package/serve-static.js +45 -0
package/server.js +177 -0
package/setup-npm-publishing.sh +140 -0
package/stt.js +141 -0
package/test.mp3 +0 -0
package/tts/EventEmitter.js +59 -0
package/tts/PCMPlayerWorklet.js +563 -0
package/tts/inference-worker.js +1121 -0
package/tts/onnx-streaming.js +721 -0
package/tts-models.js +97 -0
package/tts-utils.js +52 -0
package/tts.js +167 -0
package/whisper-models.js +161 -0
package/worker-patch.js +32 -0

package/.gitattributes ADDED Viewed

@@ -0,0 +1,35 @@
+*.7z filter=lfs diff=lfs merge=lfs -text
+*.arrow filter=lfs diff=lfs merge=lfs -text
+*.bin filter=lfs diff=lfs merge=lfs -text
+*.bz2 filter=lfs diff=lfs merge=lfs -text
+*.ckpt filter=lfs diff=lfs merge=lfs -text
+*.ftz filter=lfs diff=lfs merge=lfs -text
+*.gz filter=lfs diff=lfs merge=lfs -text
+*.h5 filter=lfs diff=lfs merge=lfs -text
+*.joblib filter=lfs diff=lfs merge=lfs -text
+*.lfs.* filter=lfs diff=lfs merge=lfs -text
+*.mlmodel filter=lfs diff=lfs merge=lfs -text
+*.model filter=lfs diff=lfs merge=lfs -text
+*.msgpack filter=lfs diff=lfs merge=lfs -text
+*.npy filter=lfs diff=lfs merge=lfs -text
+*.npz filter=lfs diff=lfs merge=lfs -text
+*.onnx filter=lfs diff=lfs merge=lfs -text
+*.ot filter=lfs diff=lfs merge=lfs -text
+*.parquet filter=lfs diff=lfs merge=lfs -text
+*.pb filter=lfs diff=lfs merge=lfs -text
+*.pickle filter=lfs diff=lfs merge=lfs -text
+*.pkl filter=lfs diff=lfs merge=lfs -text
+*.pt filter=lfs diff=lfs merge=lfs -text
+*.pth filter=lfs diff=lfs merge=lfs -text
+*.rar filter=lfs diff=lfs merge=lfs -text
+*.safetensors filter=lfs diff=lfs merge=lfs -text
+saved_model/**/* filter=lfs diff=lfs merge=lfs -text
+*.tar.* filter=lfs diff=lfs merge=lfs -text
+*.tar filter=lfs diff=lfs merge=lfs -text
+*.tflite filter=lfs diff=lfs merge=lfs -text
+*.tgz filter=lfs diff=lfs merge=lfs -text
+*.wasm filter=lfs diff=lfs merge=lfs -text
+*.xz filter=lfs diff=lfs merge=lfs -text
+*.zip filter=lfs diff=lfs merge=lfs -text
+*.zst filter=lfs diff=lfs merge=lfs -text
+*tfevents* filter=lfs diff=lfs merge=lfs -text

package/.github/workflows/publish.yml ADDED Viewed

@@ -0,0 +1,26 @@
+name: Publish to npm
+on:
+  push:
+    branches:
+      - main
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18'
+          registry-url: 'https://registry.npmjs.org'
+      - name: Install dependencies
+        run: npm ci
+      - name: Publish to npm
+        run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/README.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ coming soon

package/app.html ADDED Viewed

@@ -0,0 +1,519 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Webtalk - Whisper STT + Pocket TTS</title>
+    <link rel="icon" type="image/png" href="/logo.png">
+    <style>
+        * { box-sizing: border-box; margin: 0; padding: 0; }
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            background: #0a0a0f;
+            color: #e0e0e0;
+            min-height: 100vh;
+        }
+        .header {
+            background: #15151f;
+            border-bottom: 1px solid #252535;
+            padding: 15px 20px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+        }
+        .logo {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            font-size: 20px;
+            font-weight: 600;
+            color: #00d4aa;
+        }
+        .logo-icon {
+            width: 32px;
+            height: 32px;
+        }
+        .subtitle {
+            color: #666;
+            font-size: 12px;
+            font-weight: normal;
+        }
+        .container {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 0;
+            height: calc(100vh - 65px);
+        }
+        .panel {
+            padding: 20px;
+            overflow-y: auto;
+        }
+        .panel-left {
+            border-right: 1px solid #252535;
+        }
+        .panel-header {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid #252535;
+        }
+        .panel-header h2 {
+            font-size: 18px;
+            color: #00d4aa;
+        }
+        .panel-header .icon {
+            width: 24px;
+            height: 24px;
+        }
+        .section {
+            background: #15151f;
+            border-radius: 12px;
+            padding: 16px;
+            margin-bottom: 16px;
+            border: 1px solid #252535;
+        }
+        .section-title {
+            font-size: 13px;
+            color: #888;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            margin-bottom: 12px;
+        }
+        button {
+            background: #00d4aa;
+            border: none;
+            border-radius: 8px;
+            padding: 12px 20px;
+            color: #0a0a0f;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.2s;
+            font-size: 14px;
+        }
+        button:hover:not(:disabled) {
+            background: #00e6b8;
+            transform: translateY(-1px);
+        }
+        button:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+        button.secondary {
+            background: #252535;
+            color: #e0e0e0;
+        }
+        button.secondary:hover:not(:disabled) {
+            background: #303045;
+        }
+        button.danger {
+            background: #ff6b6b;
+            color: white;
+        }
+        textarea, select {
+            width: 100%;
+            background: #0f0f15;
+            border: 1px solid #303040;
+            border-radius: 8px;
+            padding: 12px;
+            color: #e0e0e0;
+            font-size: 14px;
+            font-family: inherit;
+        }
+        textarea {
+            min-height: 100px;
+            resize: vertical;
+        }
+        textarea:focus, select:focus {
+            outline: none;
+            border-color: #00d4aa;
+        }
+        .controls {
+            display: flex;
+            gap: 10px;
+            flex-wrap: wrap;
+            margin-top: 12px;
+        }
+        .status {
+            padding: 8px 12px;
+            border-radius: 6px;
+            font-size: 13px;
+            background: #1a1a25;
+            color: #888;
+            margin-top: 10px;
+        }
+        .status.loading { background: #1a2a35; color: #00d4aa; }
+        .status.generating { background: #1a2535; color: #4a9eff; }
+        .status.ready { background: #1a2f25; color: #00d4aa; }
+        .status.recording { background: #351a1a; color: #ff6b6b; }
+        .status.error { background: #351a1a; color: #ff6b6b; }
+        .output-box {
+            background: #0f0f15;
+            border: 1px solid #303040;
+            border-radius: 8px;
+            padding: 12px;
+            min-height: 80px;
+            font-size: 14px;
+            line-height: 1.5;
+        }
+        .output-box:empty::before {
+            content: 'Transcribed text will appear here...';
+            color: #555;
+            font-style: italic;
+        }
+        .output-box.has-content:empty::before {
+            content: none;
+        }
+        .transfer-btn {
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+            background: #252535;
+            border: 2px solid #00d4aa;
+            border-radius: 50%;
+            width: 48px;
+            height: 48px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            z-index: 10;
+            transition: all 0.2s;
+        }
+        .transfer-btn:hover {
+            background: #00d4aa;
+        }
+        .transfer-btn svg {
+            width: 20px;
+            height: 20px;
+            fill: #00d4aa;
+        }
+        .transfer-btn:hover svg {
+            fill: #0a0a0f;
+        }
+        .audio-player {
+            width: 100%;
+            margin-top: 12px;
+        }
+        .voice-controls {
+            display: flex;
+            gap: 10px;
+            align-items: center;
+            flex-wrap: wrap;
+        }
+        .metrics {
+            display: flex;
+            gap: 15px;
+            margin-top: 10px;
+            font-size: 12px;
+            color: #666;
+        }
+        .metric-value {
+            color: #00d4aa;
+            font-weight: 600;
+        }
+        @media (max-width: 900px) {
+            .container {
+                grid-template-columns: 1fr;
+                grid-template-rows: auto auto;
+            }
+            .panel-left {
+                border-right: none;
+                border-bottom: 1px solid #252535;
+            }
+            .transfer-btn {
+                position: static;
+                transform: none;
+                margin: 10px auto;
+            }
+        }
+        .hidden { display: none !important; }
+        #whisper-container {
+            min-height: 200px;
+        }
+        .loading-overlay {
+            position: fixed;
+            top: 0; left: 0; right: 0; bottom: 0;
+            background: rgba(10, 10, 15, 0.9);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            z-index: 1000;
+        }
+        .loading-overlay.hidden {
+            display: none;
+        }
+        .spinner {
+            width: 50px;
+            height: 50px;
+            border: 3px solid #252535;
+            border-top-color: #00d4aa;
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+        }
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+        .loading-text {
+            margin-top: 20px;
+            color: #888;
+        }
+    </style>
+</head>
+<body>
+    <div class="loading-overlay" id="loading-screen">
+        <div class="spinner"></div>
+        <div class="loading-text">Loading models...</div>
+    </div>
+    <header class="header">
+        <div class="logo">
+            <svg class="logo-icon" viewBox="0 0 32 32" fill="none">
+                <circle cx="16" cy="16" r="14" stroke="#00d4aa" stroke-width="2"/>
+                <path d="M10 16h12M16 10v12" stroke="#00d4aa" stroke-width="2" stroke-linecap="round"/>
+            </svg>
+            Webtalk
+            <span class="subtitle">Whisper STT + Pocket TTS</span>
+        </div>
+        <div style="color: #666; font-size: 13px;">
+            Local AI Speech Processing
+        </div>
+    </header>
+    <div class="container">
+        <!-- Whisper STT Panel -->
+        <div class="panel panel-left">
+            <div class="panel-header">
+                <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#00d4aa" stroke-width="2">
+                    <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/>
+                    <path d="M19 10v2a7 7 0 0 1-14 0v-2"/>
+                    <line x1="12" y1="19" x2="12" y2="23"/>
+                    <line x1="8" y1="23" x2="16" y2="23"/>
+                </svg>
+                <h2>Speech to Text (Whisper)</h2>
+            </div>
+            <div class="section">
+                <div class="section-title">Audio Input</div>
+                <div class="controls">
+                    <button id="record-btn" onclick="startRecording()">
+                        Start Recording
+                    </button>
+                    <button id="stop-record-btn" class="danger" onclick="stopRecording()" disabled>
+                        Stop
+                    </button>
+                    <input type="file" id="audio-upload" accept="audio/*" hidden onchange="handleAudioUpload(event)">
+                    <button class="secondary" onclick="document.getElementById('audio-upload').click()">
+                        Upload Audio
+                    </button>
+                </div>
+                <div id="stt-status" class="status">Ready</div>
+            </div>
+            <div class="section">
+                <div class="section-title">Transcription</div>
+                <div id="transcription-output" class="output-box"></div>
+                <div class="controls">
+                    <button class="secondary" onclick="copyTranscription()">Copy</button>
+                    <button class="secondary" onclick="clearTranscription()">Clear</button>
+                </div>
+            </div>
+            <div id="root" style="display: none;"></div>
+        </div>
+        <!-- Pocket TTS Panel -->
+        <div class="panel">
+            <div class="panel-header">
+                <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#00d4aa" stroke-width="2">
+                    <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/>
+                    <path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"/>
+                </svg>
+                <h2>Text to Speech (Pocket TTS)</h2>
+            </div>
+            <div class="section">
+                <div class="section-title">Voice Selection</div>
+                <div class="voice-controls">
+                    <select id="voice-select" style="flex: 1;">
+                        <option value="">Loading voices...</option>
+                    </select>
+                    <input type="file" id="voice-upload" accept="audio/*" hidden onchange="handleVoiceUpload(event)">
+                    <button class="secondary" onclick="document.getElementById('voice-upload').click()">
+                        Custom Voice
+                    </button>
+                </div>
+            </div>
+            <div class="section">
+                <div class="section-title">Text Input</div>
+                <textarea id="tts-input" placeholder="Enter text to synthesize..."></textarea>
+                <div class="controls">
+                    <button id="generate-btn" onclick="generateSpeech()" disabled>
+                        Generate Speech
+                    </button>
+                    <button id="stop-tts-btn" class="danger" onclick="stopTTS()" disabled>
+                        Stop
+                    </button>
+                    <button class="secondary" onclick="useTranscription()">
+                        Use Transcription ↑
+                    </button>
+                </div>
+                <div id="tts-status" class="status">Loading models...</div>
+                <div class="metrics" id="tts-metrics" style="display: none;">
+                    <div>RTFx: <span class="metric-value" id="rtfx">--</span></div>
+                    <div>TTFB: <span class="metric-value" id="ttfb">--</span>ms</div>
+                </div>
+            </div>
+            <div class="section" id="audio-output-section" style="display: none;">
+                <div class="section-title">Generated Audio</div>
+                <audio id="tts-audio" class="audio-player" controls></audio>
+                <div class="controls">
+                    <button class="secondary" onclick="downloadAudio()">Download WAV</button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script type="module">
+        import { STT, TTS, debug } from '/webtalk/sdk.js';
+        window.webtalkSDK = { STT, TTS, debug };
+        const sttStatus = document.getElementById('stt-status');
+        const ttsStatus = document.getElementById('tts-status');
+        // === STT ===
+        const stt = new STT({
+            language: 'en',
+            onTranscript: (text) => {
+                document.getElementById('transcription-output').textContent = text;
+            },
+            onPartial: (text) => {
+                document.getElementById('transcription-output').textContent = text;
+            },
+            onStatus: (state, msg) => {
+                sttStatus.textContent = msg;
+                const classMap = { loading: 'loading', ready: 'ready', recording: 'recording', transcribing: 'loading' };
+                sttStatus.className = 'status ' + (classMap[state] || 'ready');
+                if (state === 'ready') document.getElementById('loading-screen').classList.add('hidden');
+            }
+        });
+        stt.init().then(() => {
+            document.getElementById('loading-screen').classList.add('hidden');
+        }).catch(err => {
+            sttStatus.textContent = 'STT error: ' + err.message;
+            sttStatus.className = 'status error';
+            document.getElementById('loading-screen').classList.add('hidden');
+        });
+        window.startRecording = async () => {
+            await stt.startRecording();
+            document.getElementById('record-btn').disabled = true;
+            document.getElementById('stop-record-btn').disabled = false;
+        };
+        window.stopRecording = async () => {
+            document.getElementById('record-btn').disabled = false;
+            document.getElementById('stop-record-btn').disabled = true;
+            await stt.stopRecording();
+        };
+        window.handleAudioUpload = (e) => {
+            const file = e.target.files[0];
+            if (file) stt.transcribeBlob(file);
+        };
+        window.copyTranscription = () => {
+            navigator.clipboard.writeText(document.getElementById('transcription-output').textContent);
+        };
+        window.clearTranscription = () => {
+            document.getElementById('transcription-output').textContent = '';
+        };
+        const tts = new TTS({
+            onStatus: (status, state) => {
+                ttsStatus.textContent = status;
+                ttsStatus.className = 'status ' + (state || 'ready');
+            },
+            onVoicesLoaded: (voices, defaultVoice) => {
+                const select = document.getElementById('voice-select');
+                select.innerHTML = '';
+                voices.forEach(voice => {
+                    const option = document.createElement('option');
+                    option.value = voice;
+                    option.textContent = voice.charAt(0).toUpperCase() + voice.slice(1);
+                    if (voice === defaultVoice) option.selected = true;
+                    select.appendChild(option);
+                });
+                const custom = document.createElement('option');
+                custom.value = 'custom';
+                custom.textContent = 'Custom Voice';
+                select.appendChild(custom);
+            },
+            onAudioChunk: () => {
+                document.getElementById('audio-output-section').style.display = 'block';
+            },
+            onMetrics: (metrics) => {
+                document.getElementById('tts-metrics').style.display = 'flex';
+                if (metrics.rtfx) document.getElementById('rtfx').textContent = metrics.rtfx.toFixed(2) + 'x';
+                if (metrics.ttfb) document.getElementById('ttfb').textContent = Math.round(metrics.ttfb);
+            },
+            onAudioReady: (audioUrl) => {
+                if (audioUrl) document.getElementById('tts-audio').src = audioUrl;
+                document.getElementById('generate-btn').disabled = false;
+                document.getElementById('stop-tts-btn').disabled = true;
+            }
+        });
+        tts.init().then(() => {
+            document.getElementById('generate-btn').disabled = false;
+        }).catch(err => {
+            ttsStatus.textContent = 'TTS error: ' + err.message;
+            ttsStatus.className = 'status error';
+        });
+        window.generateSpeech = async () => {
+            const text = document.getElementById('tts-input').value.trim();
+            if (!text) return;
+            document.getElementById('generate-btn').disabled = true;
+            document.getElementById('stop-tts-btn').disabled = false;
+            document.getElementById('tts-metrics').style.display = 'none';
+            await tts.generate(text, document.getElementById('voice-select').value);
+        };
+        window.stopTTS = () => {
+            tts.stop();
+            document.getElementById('generate-btn').disabled = false;
+            document.getElementById('stop-tts-btn').disabled = true;
+        };
+        window.handleVoiceUpload = (e) => {
+            const file = e.target.files[0];
+            if (file) tts.uploadVoice(file);
+        };
+        window.useTranscription = () => {
+            const t = document.getElementById('transcription-output').textContent;
+            if (t) document.getElementById('tts-input').value = t;
+        };
+        window.downloadAudio = () => tts.downloadAudio();
+    </script>
+</body>
+</html>