On Day 8, we’ll make the AI assistant’s voice customizable and allow users to choose different personalities for the chatbot. This will make the assistant feel more human and better fit user preferences.
1. Why Customize Voice & Personality?
✅ User Comfort – Users feel more connected when the assistant’s tone matches their style.
✅ Emotional Experience – Calm voice for stressful queries, cheerful voice for casual talk.
✅ Branding – Businesses can customize voices to match their brand.
We’ll use: 🔹 Expo Speech API – For text-to-speech customization.
🔹 Voice Pitch, Rate, & Language Variants – Adjust speed, tone, and accents.
🔹 Assistant Personality Modes – Friendly, Professional, Humorous.
2. Setting Up Custom Speech Output
Step 1: Install Expo Speech API
expo install expo-speech
Step 2: Create VoiceSettings.js Component
import React, { useState } from 'react';
import { View, Text, Slider, Button, StyleSheet } from 'react-native';
export default function VoiceSettings({ onSaveSettings }) {
const [pitch, setPitch] = useState(1);
const [rate, setRate] = useState(1);
return (
<View style={styles.container}>
<Text>Pitch: {pitch.toFixed(1)}</Text>
<Slider
minimumValue={0.5}
maximumValue={2}
step={0.1}
value={pitch}
onValueChange={setPitch}
/>
<Text>Rate: {rate.toFixed(1)}</Text>
<Slider
minimumValue={0.5}
maximumValue={2}
step={0.1}
value={rate}
onValueChange={setRate}
/>
<Button
title="Save Voice Settings"
onPress={() => onSaveSettings({ pitch, rate })}
/>
</View>
);
}
const styles = StyleSheet.create({
container: { padding: 10 },
});
3. Allowing Users to Choose Assistant Personality
Step 1: Create Personality Dropdown
import { Picker } from '@react-native-picker/picker';
export default function PersonalitySelector({ selectedPersonality, onSelect }) {
return (
<Picker selectedValue={selectedPersonality} onValueChange={onSelect}>
<Picker.Item label="Friendly" value="friendly" />
<Picker.Item label="Professional" value="professional" />
<Picker.Item label="Humorous" value="humorous" />
</Picker>
);
}
Step 2: Define Personality Responses
Modify ChatBot.js:
const personalityModes = {
friendly: "Be warm, encouraging, and casual. Use emojis often.",
professional: "Maintain a polite and formal tone. Use clear, precise language.",
humorous: "Be playful and crack jokes occasionally.",
};
4. Integrating Voice & Personality Settings
Modify ChatBot.js:
import VoiceSettings from './VoiceSettings';
import PersonalitySelector from './PersonalitySelector';
import * as Speech from 'expo-speech';
const [voiceSettings, setVoiceSettings] = useState({ pitch: 1, rate: 1 });
const [personality, setPersonality] = useState('friendly');
const speakResponse = (text) => {
Speech.speak(text, {
pitch: voiceSettings.pitch,
rate: voiceSettings.rate,
});
};
const sendMessage = async (input) => {
const personalityHint = personalityModes[personality];
const response = await axios.post(
'https://api.openai.com/v1/chat/completions',
{
model: 'gpt-4',
messages: [{ role: 'user', content: `${personalityHint} ${input}` }],
},
{ headers: { Authorization: `Bearer ${OPENAI_API_KEY}` } }
);
const botReply = response.data.choices[0].message.content;
setMessages([...messages, { text: botReply, sender: 'bot' }]);
speakResponse(botReply);
};
5. Saving Voice & Personality Preferences
Step 1: Store User Preferences with AsyncStorage
import AsyncStorage from '@react-native-async-storage/async-storage';
const saveVoiceSettings = async (settings) => {
await AsyncStorage.setItem('voiceSettings', JSON.stringify(settings));
};
const getVoiceSettings = async () => {
const settings = await AsyncStorage.getItem('voiceSettings');
return settings ? JSON.parse(settings) : { pitch: 1, rate: 1 };
};
const savePersonality = async (mode) => {
await AsyncStorage.setItem('personality', mode);
};
const getPersonality = async () => {
return await AsyncStorage.getItem('personality') || 'friendly';
};
Step 2: Load Preferences on App Start
useEffect(() => {
const loadPreferences = async () => {
const savedVoice = await getVoiceSettings();
const savedPersonality = await getPersonality();
setVoiceSettings(savedVoice);
setPersonality(savedPersonality);
};
loadPreferences();
}, []);
6. Testing Custom Voice & Personality
Step 1: Start the App
expo start
Step 2: Try These Settings
| Personality | Expected Chatbot Behavior |
|---|---|
| Friendly | Casual, warm tone, emoji use |
| Professional | Formal, precise responses |
| Humorous | Jokes, playful comments |
Step 3: Adjust Voice Pitch & Rate
- Low Pitch & Slow Rate → Calm, soothing assistant.
- High Pitch & Fast Rate → Energetic, playful assistant.
7. Expanding Voice Customization
✅ Add Voice Variants (iOS-only) – Some devices allow voice variants:
Speech.speak(text, { voice: 'com.apple.ttsbundle.Samantha-compact' });
✅ Support Multiple Languages
Speech.speak(text, { language: 'es-ES' }); // Spanish
✅ Store Language Preference
AsyncStorage.setItem('language', 'en-US');
8. Key Concepts Covered
✅ Added voice pitch & speed customization with Expo Speech API.
✅ Enabled user-selected personalities (friendly, professional, humorous).
✅ Stored user preferences locally for persistent customization.
9. Next Steps: Handling Avatar Errors & Recovery
Tomorrow, we’ll:
🔹 Add error detection (e.g., API failure, speech issues).
🔹 Implement fallback replies and visual cues when the assistant fails.
10. References & Learning Resources
11. SEO Keywords:
AI assistant voice customization, GPT chatbot personalities, text-to-speech React Native, customizing AI chatbot tone, React Native voice pitch rate.
