npm - aniclaude - Versions diffs - 1.0.0 - Mend

aniclaude 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 (13) hide show

package/README.md ADDED Viewed

@@ -0,0 +1,40 @@
+# AniClaude
+Voice-enabled Claude Code - talk to Claude in your terminal with an animated avatar.
+## Requirements
+- Node.js 18+
+- [Claude Code](https://claude.ai/code) installed (`npm install -g @anthropic-ai/claude-code`)
+- Google Chrome or Safari (for avatar window)
+- Microphone access
+## Usage
+```bash
+npx aniclaude
+```
+This will:
+1. Start Claude Code with voice input enabled
+2. Open a small avatar window in your browser
+3. Click "Start" in the avatar window to begin speaking
+## Options
+```
+--with-permissions    Run Claude with permission prompts (default: skipped)
+--no-browser          Don't open the avatar window
+-h, --help            Show help
+-v, --version         Show version
+```
+## How it works
+- **Speech-to-Text**: Uses Web Speech API (browser-native, instant)
+- **Text-to-Speech**: Uses ElevenLabs API via hosted server
+- **Avatar**: Animated MP4 that syncs with speech
+## License
+MIT

package/assets/cli-window.html ADDED Viewed

@@ -0,0 +1,602 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>AniClaude</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    html, body {
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+      background: transparent;
+    }
+    body {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+      font-family: system-ui, -apple-system, sans-serif;
+    }
+    #avatar-container {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+    }
+    #avatar {
+      max-width: 90%;
+      max-height: 90%;
+      object-fit: contain;
+      border-radius: 8px;
+    }
+    #status {
+      position: absolute;
+      bottom: 12px;
+      left: 50%;
+      transform: translateX(-50%);
+      background: rgba(0, 0, 0, 0.7);
+      color: white;
+      padding: 6px 14px;
+      border-radius: 16px;
+      font-size: 12px;
+      opacity: 0;
+      transition: opacity 0.3s ease;
+    }
+    #status.visible { opacity: 1; }
+    #start-overlay {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba(0, 0, 0, 0.7);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      z-index: 100;
+    }
+    #start-overlay.hidden { display: none; }
+    #start-btn {
+      background: #44ff44;
+      color: #000;
+      border: none;
+      padding: 16px 32px;
+      border-radius: 24px;
+      font-size: 16px;
+      font-weight: bold;
+      cursor: pointer;
+      transition: transform 0.2s;
+    }
+    #start-btn:hover { transform: scale(1.05); }
+    #connection {
+      position: absolute;
+      top: 10px;
+      right: 10px;
+      width: 12px;
+      height: 12px;
+      border-radius: 50%;
+      background: #ff4444;
+      transition: background 0.3s ease;
+    }
+    #connection.connected { background: #44ff44; }
+    #connection.connecting { background: #ffaa00; animation: pulse 1s infinite; }
+    @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
+    /* Listening state - green border */
+    body.listening { box-shadow: inset 0 0 0 3px #44ff44; }
+    body.processing { box-shadow: inset 0 0 0 3px #ffaa00; }
+    /* Push to talk button */
+    #ptt-btn {
+      position: absolute;
+      bottom: 10px;
+      right: 10px;
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      border: none;
+      background: rgba(255, 255, 255, 0.15);
+      color: white;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: all 0.2s ease;
+      z-index: 50;
+    }
+    #ptt-btn:hover { background: rgba(255, 255, 255, 0.25); transform: scale(1.05); }
+    #ptt-btn:active { transform: scale(0.95); }
+    #ptt-btn.listening { background: #44ff44; color: #000; }
+    #ptt-btn svg { width: 20px; height: 20px; }
+  </style>
+</head>
+<body>
+  <div id="avatar-container">
+    <div id="connection" class="connecting"></div>
+    <video id="avatar" loop autoplay muted playsinline></video>
+    <div id="status"></div>
+    <div id="start-overlay">
+      <button id="start-btn">Click to Start</button>
+    </div>
+    <button id="ptt-btn" title="Push to Talk">
+      <svg viewBox="0 0 24 24" fill="currentColor">
+        <path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm-1-9c0-.55.45-1 1-1s1 .45 1 1v6c0 .55-.45 1-1 1s-1-.45-1-1V5zm6 6c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z"/>
+      </svg>
+    </button>
+  </div>
+  <script>
+    // Config from URL params
+    const params = new URLSearchParams(window.location.search);
+    const WS_PORT = params.get('port') || '3457';
+    const SERVER_URL = params.get('server') || 'http://localhost:3456';
+    // Elements
+    const avatar = document.getElementById('avatar');
+    const status = document.getElementById('status');
+    const connection = document.getElementById('connection');
+    const startOverlay = document.getElementById('start-overlay');
+    const startBtn = document.getElementById('start-btn');
+    const pttBtn = document.getElementById('ptt-btn');
+    // State
+    let ws = null;
+    let isConnected = false;
+    let isSpeaking = false;
+    let audioQueue = [];
+    let currentAudio = null;
+    let isStarted = false;
+    // Video URLs (served from local server)
+    const IDLE_VIDEO = '/idle.mp4';
+    const TALKING_VIDEO = '/speak.mp4';
+    // Initialize avatar
+    avatar.src = IDLE_VIDEO;
+    function setAvatarState(state) {
+      const newSrc = state === 'talking' ? TALKING_VIDEO : IDLE_VIDEO;
+      // Compare using endsWith since avatar.src returns full URL
+      if (!avatar.src.endsWith(newSrc)) {
+        avatar.src = newSrc;
+        avatar.play().catch(() => {});
+      }
+    }
+    function showStatus(text, duration = 0) {
+      status.textContent = text;
+      status.classList.add('visible');
+      if (duration > 0) {
+        setTimeout(() => status.classList.remove('visible'), duration);
+      }
+    }
+    function hideStatus() {
+      status.classList.remove('visible');
+    }
+    // ========== Web Speech STT ==========
+    let recognition = null;
+    let isListening = false;
+    let isStartingRecognition = false;
+    function initSpeechRecognition() {
+      const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+      if (!SpeechRecognition) {
+        console.error('Web Speech API not supported');
+        showStatus('Speech not supported', 3000);
+        return;
+      }
+      recognition = new SpeechRecognition();
+      recognition.continuous = false;
+      recognition.interimResults = true;
+      recognition.lang = 'en-US';
+      recognition.onstart = () => {
+        console.log('[STT] Listening...');
+        isListening = true;
+        isStartingRecognition = false;
+        document.body.classList.add('listening');
+        pttBtn.classList.add('listening');
+        showStatus('Listening...');
+      };
+      recognition.onresult = (event) => {
+        let finalTranscript = '';
+        let interimTranscript = '';
+        for (let i = event.resultIndex; i < event.results.length; i++) {
+          const transcript = event.results[i][0].transcript;
+          if (event.results[i].isFinal) {
+            finalTranscript += transcript;
+          } else {
+            interimTranscript += transcript;
+          }
+        }
+        if (interimTranscript) {
+          showStatus(interimTranscript);
+        }
+        if (finalTranscript) {
+          console.log('[STT] Final:', finalTranscript);
+          sendVoiceInput(finalTranscript);
+        }
+      };
+      recognition.onend = () => {
+        console.log('[STT] Ended');
+        isListening = false;
+        isStartingRecognition = false;
+        document.body.classList.remove('listening');
+        pttBtn.classList.remove('listening');
+        hideStatus();
+      };
+      recognition.onerror = (event) => {
+        console.error('[STT] Error:', event.error);
+        isListening = false;
+        isStartingRecognition = false;
+        document.body.classList.remove('listening');
+        pttBtn.classList.remove('listening');
+        if (event.error !== 'no-speech') {
+          showStatus('Error: ' + event.error, 2000);
+        }
+      };
+    }
+    function startListening() {
+      if (!isStarted || isListening || isSpeaking || isStartingRecognition) return;
+      if (!recognition) initSpeechRecognition();
+      if (recognition) {
+        try {
+          isStartingRecognition = true;
+          recognition.start();
+        } catch (e) {
+          isStartingRecognition = false;
+          console.error('[STT] Start error:', e);
+        }
+      }
+    }
+    function handleStart() {
+      if (isStarted) return;
+      isStarted = true;
+      startOverlay.classList.add('hidden');
+      console.log('[AniClaude] Started by user');
+      startListening();
+    }
+    // Click handler for start button
+    startBtn.addEventListener('click', handleStart);
+    startOverlay.addEventListener('click', handleStart);
+    // Push-to-talk button - toggle listening
+    pttBtn.addEventListener('click', () => {
+      if (!isStarted) {
+        handleStart();
+        return;
+      }
+      if (isListening) {
+        stopListening();
+      } else if (!isSpeaking) {
+        startListening();
+      }
+    });
+    function stopListening() {
+      if (recognition && isListening) {
+        recognition.stop();
+      }
+    }
+    // ========== Text Preprocessing for TTS ==========
+    function preprocessForTTS(text) {
+      let processed = text;
+      // Remove backticks but keep content
+      processed = processed.replace(/```/g, ' ');
+      processed = processed.replace(/`/g, '');
+      // Remove markdown bold/italic
+      processed = processed.replace(/\*\*([^*]+)\*\*/g, '$1');
+      processed = processed.replace(/\*([^*]+)\*/g, '$1');
+      processed = processed.replace(/__([^_]+)__/g, '$1');
+      processed = processed.replace(/_([^_]+)_/g, '$1');
+      // Convert markdown headers to just the text
+      processed = processed.replace(/^#{1,6}\s+/gm, '');
+      // Handle bullet points - add pause
+      processed = processed.replace(/^[\s]*[-*•]\s+/gm, '. ');
+      // Handle numbered lists - keep the number
+      processed = processed.replace(/^[\s]*(\d+)\.\s+/gm, '. $1, ');
+      // Simplify URLs - just say "link"
+      processed = processed.replace(/https?:\/\/[^\s]+/g, 'link');
+      // Simplify file paths
+      processed = processed.replace(/[\/\\][\w\-\.\/\\]+\.\w+/g, (match) => {
+        const filename = match.split(/[\/\\]/).pop();
+        return filename;
+      });
+      // Remove HTML tags
+      processed = processed.replace(/<[^>]+>/g, '');
+      // Convert special characters
+      processed = processed.replace(/&amp;/g, 'and');
+      processed = processed.replace(/&lt;/g, 'less than');
+      processed = processed.replace(/&gt;/g, 'greater than');
+      processed = processed.replace(/\$/g, 'dollar ');
+      processed = processed.replace(/\{/g, ' ');
+      processed = processed.replace(/\}/g, ' ');
+      processed = processed.replace(/\[/g, ' ');
+      processed = processed.replace(/\]/g, ' ');
+      processed = processed.replace(/\|/g, ' ');
+      // Clean up arrows and symbols
+      processed = processed.replace(/->/g, ' to ');
+      processed = processed.replace(/=>/g, ' becomes ');
+      processed = processed.replace(/→/g, ' to ');
+      processed = processed.replace(/←/g, ' from ');
+      processed = processed.replace(/↔/g, ' both ways ');
+      processed = processed.replace(/\.\.\./g, '...');
+      // Add pause for newlines (comma for single, period for multiple)
+      processed = processed.replace(/\n{2,}/g, '. ');
+      processed = processed.replace(/\n/g, ', ');
+      // Normalize whitespace
+      processed = processed.replace(/\s+/g, ' ');
+      // Clean up multiple periods
+      processed = processed.replace(/\.+/g, '.');
+      processed = processed.replace(/\.\s*\./g, '.');
+      return processed.trim();
+    }
+    // ========== TTS via Server (Streaming) ==========
+    // Check if MediaSource supports MP3 streaming
+    const supportsStreamingMP3 = window.MediaSource &&
+      MediaSource.isTypeSupported('audio/mpeg');
+    async function speak(text) {
+      if (!text || text.length < 5) return;
+      console.log('[TTS] Speaking:', text.substring(0, 50) + '...');
+      isSpeaking = true;
+      setAvatarState('talking');
+      try {
+        const response = await fetch(SERVER_URL + '/tts', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ text })
+        });
+        if (!response.ok) {
+          throw new Error('TTS request failed: ' + response.status);
+        }
+        // Use streaming playback if supported, otherwise fall back to buffered
+        if (supportsStreamingMP3) {
+          await playAudioStreaming(response);
+        } else {
+          const audioData = await response.arrayBuffer();
+          await playAudioBuffered(audioData);
+        }
+      } catch (error) {
+        console.error('[TTS] Error:', error);
+      } finally {
+        isSpeaking = false;
+        setAvatarState('idle');
+        processAudioQueue();
+      }
+    }
+    // Streaming playback using MediaSource API
+    async function playAudioStreaming(response) {
+      return new Promise(async (resolve) => {
+        const mediaSource = new MediaSource();
+        const audio = new Audio();
+        currentAudio = audio;
+        audio.src = URL.createObjectURL(mediaSource);
+        mediaSource.addEventListener('sourceopen', async () => {
+          const sourceBuffer = mediaSource.addSourceBuffer('audio/mpeg');
+          const reader = response.body.getReader();
+          let hasStartedPlaying = false;
+          const processChunk = async () => {
+            try {
+              const { done, value } = await reader.read();
+              if (done) {
+                // Signal end of stream when buffer is done updating
+                if (!sourceBuffer.updating) {
+                  mediaSource.endOfStream();
+                } else {
+                  sourceBuffer.addEventListener('updateend', () => {
+                    if (mediaSource.readyState === 'open') {
+                      mediaSource.endOfStream();
+                    }
+                  }, { once: true });
+                }
+                return;
+              }
+              // Wait for buffer to be ready
+              if (sourceBuffer.updating) {
+                await new Promise(r => sourceBuffer.addEventListener('updateend', r, { once: true }));
+              }
+              // Append chunk
+              sourceBuffer.appendBuffer(value);
+              // Start playing after first chunk
+              if (!hasStartedPlaying) {
+                hasStartedPlaying = true;
+                audio.play().catch(console.error);
+                console.log('[TTS] Streaming playback started');
+              }
+              // Process next chunk
+              await processChunk();
+            } catch (e) {
+              console.error('[TTS] Streaming error:', e);
+              resolve();
+            }
+          };
+          await processChunk();
+        });
+        audio.onended = () => {
+          URL.revokeObjectURL(audio.src);
+          currentAudio = null;
+          resolve();
+        };
+        audio.onerror = () => {
+          URL.revokeObjectURL(audio.src);
+          currentAudio = null;
+          resolve();
+        };
+      });
+    }
+    // Fallback: Buffered playback (waits for full audio)
+    function playAudioBuffered(arrayBuffer) {
+      return new Promise((resolve) => {
+        const blob = new Blob([arrayBuffer], { type: 'audio/mpeg' });
+        const url = URL.createObjectURL(blob);
+        const audio = new Audio(url);
+        currentAudio = audio;
+        audio.onended = () => {
+          URL.revokeObjectURL(url);
+          currentAudio = null;
+          resolve();
+        };
+        audio.onerror = () => {
+          URL.revokeObjectURL(url);
+          currentAudio = null;
+          resolve();
+        };
+        audio.play().catch(resolve);
+      });
+    }
+    function queueSpeech(text) {
+      // Preprocess text for natural speech
+      const processed = preprocessForTTS(text);
+      if (processed.length < 5) return; // Skip if too short after processing
+      audioQueue.push(processed);
+      if (!isSpeaking) {
+        processAudioQueue();
+      }
+    }
+    function processAudioQueue() {
+      if (audioQueue.length === 0) {
+        // All speech done, start listening
+        setTimeout(startListening, 500);
+        return;
+      }
+      const text = audioQueue.shift();
+      speak(text);
+    }
+    // ========== WebSocket Connection ==========
+    function connectWebSocket() {
+      console.log('[WS] Connecting to localhost:' + WS_PORT);
+      connection.className = 'connecting';
+      ws = new WebSocket('ws://localhost:' + WS_PORT);
+      ws.onopen = () => {
+        console.log('[WS] Connected');
+        isConnected = true;
+        connection.className = 'connected';
+        showStatus('Connected', 2000);
+        // If already started, begin listening
+        if (isStarted) {
+          setTimeout(startListening, 500);
+        }
+      };
+      ws.onmessage = (event) => {
+        try {
+          const data = JSON.parse(event.data);
+          handleMessage(data);
+        } catch (e) {
+          console.error('[WS] Parse error:', e);
+        }
+      };
+      ws.onclose = () => {
+        console.log('[WS] Disconnected');
+        isConnected = false;
+        connection.className = '';
+        // Reconnect after 2 seconds
+        setTimeout(connectWebSocket, 2000);
+      };
+      ws.onerror = (error) => {
+        console.error('[WS] Error:', error);
+      };
+    }
+    function handleMessage(data) {
+      console.log('[WS] Received:', data.type);
+      switch (data.type) {
+        case 'claude_response':
+          if (data.text) {
+            stopListening();
+            queueSpeech(data.text);
+          }
+          break;
+        case 'status':
+          showStatus(data.message, 2000);
+          break;
+      }
+    }
+    function sendVoiceInput(text) {
+      if (ws && isConnected) {
+        ws.send(JSON.stringify({
+          type: 'voice_input',
+          text: text
+        }));
+        showStatus('Sent: ' + text.substring(0, 30) + '...', 1500);
+      }
+    }
+    // Initialize
+    initSpeechRecognition();
+    connectWebSocket();
+    // Handle window close
+    window.addEventListener('beforeunload', () => {
+      if (ws) ws.close();
+      if (recognition) recognition.stop();
+    });
+  </script>
+</body>
+</html>

package/assets/idle.mp4 ADDED Viewed

Binary file

package/assets/speak.mp4 ADDED Viewed

Binary file

package/dist/config.d.ts ADDED Viewed

@@ -0,0 +1,9 @@
+/**
+ * AniClaude CLI Configuration
+ */
+export declare const TTS_SERVER_URL: string;
+export declare const HTTP_PORT: number;
+export declare const WS_PORT: number;
+export declare const WINDOW_WIDTH = 300;
+export declare const WINDOW_HEIGHT = 350;
+export declare const BANNER = "\n\u001B[36m    _          _ ____ _                 _\n   / \\   _ __ (_) ___| | __ _ _   _  __| | ___\n  / _ \\ | '_ \\| | |   | |/ _` | | | |/ _` |/ _ \\\n / ___ \\| | | | | |___| | (_| | |_| | (_| |  __/\n/_/   \\_\\_| |_|_|\\____|_|\\__,_|\\__,_|\\__,_|\\___|\n\u001B[0m";

package/dist/config.js ADDED Viewed

@@ -0,0 +1,22 @@
+"use strict";
+/**
+ * AniClaude CLI Configuration
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BANNER = exports.WINDOW_HEIGHT = exports.WINDOW_WIDTH = exports.WS_PORT = exports.HTTP_PORT = exports.TTS_SERVER_URL = void 0;
+// Production TTS server URL (deployed on Render)
+exports.TTS_SERVER_URL = process.env.ANICLAUDE_SERVER || 'https://api.aniclaude.com';
+// Local server ports
+exports.HTTP_PORT = parseInt(process.env.ANICLAUDE_HTTP_PORT || '3457', 10);
+exports.WS_PORT = parseInt(process.env.ANICLAUDE_WS_PORT || '3458', 10);
+// Avatar window size
+exports.WINDOW_WIDTH = 300;
+exports.WINDOW_HEIGHT = 350;
+// CLI branding
+exports.BANNER = `
+\x1b[36m    _          _ ____ _                 _
+   / \\   _ __ (_) ___| | __ _ _   _  __| | ___
+  / _ \\ | '_ \\| | |   | |/ _\` | | | |/ _\` |/ _ \\
+ / ___ \\| | | | | |___| | (_| | |_| | (_| |  __/
+/_/   \\_\\_| |_|_|\\____|_|\\__,_|\\__,_|\\__,_|\\___|
+\x1b[0m`;

package/dist/index.d.ts ADDED Viewed

@@ -0,0 +1,6 @@
+#!/usr/bin/env node
+/**
+ * AniClaude CLI
+ * Voice-enabled Claude Code - talk to Claude in your terminal
+ */
+export {};