feat: Add ElevenLabs TTS integration and update dependencies

Author: novaticstar

a.eyes/package-lock.json

@@ -13,11 +13,13 @@
     "@react-navigation/native": "^6.1.9",
     "@react-navigation/native-stack": "^6.9.17",
     "axios": "^1.6.2",
+    "base-64": "^1.0.0",
     "dotenv": "^16.5.0",
     "expo": "~52.0.0",
+    "expo-av": "~15.0.2",
     "expo-camera": "~16.0.18",
     "expo-dev-client": "~5.0.20",
-    "expo-file-system": "~18.0.11",
+    "expo-file-system": "~18.0.12",
     "expo-image-manipulator": "~13.0.6",
     "expo-image-picker": "~16.0.6",
     "expo-speech": "~13.0.1",

a.eyes/package.json

@@ -2,9 +2,65 @@ import React, { useRef, useState, useEffect } from 'react';
 import { StyleSheet, Text, View, TouchableOpacity, ActivityIndicator, Alert } from 'react-native';
 import { CameraView, useCameraPermissions, useMicrophonePermissions } from 'expo-camera';
 import * as Speech from 'expo-speech';
+import { Audio } from 'expo-av';
 import { MaterialIcons } from '@expo/vector-icons';
 import { analyzeImage } from '../services/imageRecognitionService';
 import { saveHistoryEntry, loadHistory } from '../services/storageService';
+import * as FileSystem from 'expo-file-system';
+import { decode as atob, encode as btoa } from 'base-64';
+
+const ELEVENLABS_API_KEY = '';
+const ELEVENLABS_VOICE_ID = '56AoDkrOh6qfVPDXZ7Pt';
+
+function arrayBufferToBase64(buffer) {
+  let binary = '';
+  const bytes = new Uint8Array(buffer);
+  const len = bytes.byteLength;
+  for (let i = 0; i < len; i++) {
+    binary += String.fromCharCode(bytes[i]);
+  }
+  return btoa(binary);
+}
+
+export async function speakWithElevenLabs(text) {
+  try {
+    const response = await fetch(
+      `https://api.elevenlabs.io/v1/text-to-speech/${ELEVENLABS_VOICE_ID}`,
+      {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'xi-api-key': ELEVENLABS_API_KEY,
+        },
+        body: JSON.stringify({
+          text: text,
+          voice_settings: {
+            stability: 0.5,
+            similarity_boost: 0.75,
+          }
+        }),
+      }
+    );
+
+    if (!response.ok) {
+      console.error('Error from ElevenLabs:', await response.text());
+      return;
+    }
+
+    // Convert arrayBuffer to base64
+    const arrayBuffer = await response.arrayBuffer();
+    const base64Audio = arrayBufferToBase64(arrayBuffer);
+    const fileUri = FileSystem.cacheDirectory + `tts-${Date.now()}.mp3`;
+    await FileSystem.writeAsStringAsync(fileUri, base64Audio, { encoding: FileSystem.EncodingType.Base64 });
+
+    const soundObject = new Audio.Sound();
+    await soundObject.loadAsync({ uri: fileUri });
+    await soundObject.playAsync();
+
+  } catch (error) {
+    console.error('Error:', error);
+  }
+}
 
 export default function CameraScreen({ navigate }) {
   const cameraRef = useRef(null);
@@ -15,7 +71,7 @@ export default function CameraScreen({ navigate }) {
   const [ttsEnabled, setTtsEnabled] = useState(true);
   const [autoCapture, setAutoCapture] = useState(false);
   const intervalRef = useRef(null);
-
+  
   // Load history count for badge
   useEffect(() => {
     refreshHistoryCount();
@@ -74,7 +130,7 @@ export default function CameraScreen({ navigate }) {
   // TTS wrapper
   const speakIfEnabled = (text) => {
     if (ttsEnabled) {
-      Speech.speak(text, { rate: 0.9, pitch: 1.0 });
+      speakWithElevenLabs(text);
     }
   };
 

a.eyes/screens/CameraScreen.js

@@ -2,8 +2,10 @@ import React, { useState, useEffect, useRef } from 'react';
 import { View, Text, Image, FlatList, TouchableOpacity, TextInput, ActivityIndicator, StyleSheet, KeyboardAvoidingView, Platform } from 'react-native';
 import { MaterialIcons } from '@expo/vector-icons';
 import * as Speech from 'expo-speech';
+import { Audio } from 'expo-av';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import { chatWithImage } from '../services/chatService';
+import { speakWithElevenLabs } from './CameraScreen';
 
 const CHAT_HISTORY_KEY = 'a.eyes.image_chats';
 
@@ -59,7 +61,7 @@ export default function ChatScreen({ navigate, route }) {
       const updatedLog = [...newLog, aiMsg];
       setChatLog(updatedLog);
       saveChat(updatedLog);
-      if (ttsEnabled) Speech.speak(aiReply, { rate: 0.9, pitch: 1.0 });
+      if (ttsEnabled) await speakWithElevenLabs(aiReply); // <-- Use ElevenLabs TTS here
     } catch (e) {
       const errMsg = { sender: 'ai', text: "Sorry, I couldn't reply due to a network error.", timestamp: new Date().toISOString() };
       const updatedLog = [...newLog, errMsg];