Skip to content
This repository was archived by the owner on Mar 4, 2026. It is now read-only.
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
350 changes: 350 additions & 0 deletions HeadySystems_v13/apps/heady_admin_ui/HEADY_COMPANION_README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,350 @@
# Heady AI Companion

## Overview

The Heady AI Companion is a personal AI assistant that functions seamlessly across all user UI and UX spaces. It features a welcoming, roundish, symmetrical, and pulsating visual design with an animated robotic face that responds to different states.

## Features

### 🎨 Visual Design
- **Roundish & Symmetrical**: Welcoming orb-shaped design based on natural patterns
- **Pulsating Animation**: Different pulse patterns for each state (idle, listening, speaking, thinking)
- **Robotic Face**: Friendly minimalist face with animated eyes and mouth
- **Wave-Form Mouth**: When speaking, displays moving wave functions representing sound
- **Customizable Colors**: Fully customizable primary, secondary, and accent colors

### 🎤 Voice Capabilities
- **Multiple Voice Options**: Choose from all available system voices
- **Speech Synthesis**: Real-time text-to-speech with visual feedback
- **Custom Voice Training**: Framework for training personalized voice models (coming soon)
- **Voice Parameters**: Adjustable rate, pitch, and volume

### 🔄 Interactive States
- **Idle**: Gentle pulsating when waiting
- **Listening**: Active pulse indicating attention
- **Speaking**: Dynamic animation with wave-form mouth visualization
- **Thinking**: Rotating pulse showing processing

### ⚙️ Customization Options
- **Position**: Place anywhere (bottom-right, bottom-left, top-right, top-left)
- **Size**: Small, medium, or large
- **Theme**: Custom color schemes
- **Minimize**: Compact mode for less intrusion

## Integration Guide

### Standalone Page

The companion can be viewed as a standalone demo page:

```bash
cd HeadySystems_v13/apps/heady_admin_ui
open heady_companion.html # macOS
xdg-open heady_companion.html # Linux
start heady_companion.html # Windows
```

Or serve via HTTP:

```bash
python3 -m http.server 8000
# Navigate to http://127.0.0.1:8000/heady_companion.html
```

### Integration into Existing Pages

#### Method 1: Script Include

```html
<!DOCTYPE html>
<html>
<head>
<title>Your Page</title>
</head>
<body>
<!-- Your content here -->

<!-- Add companion container -->
<div id="heady-companion"></div>

<!-- Include companion script -->
<script src="heady_companion.js"></script>
<script>
// Initialize the companion
const companion = new HeadyCompanion({
container: '#heady-companion',
position: 'bottom-right',
size: 'medium',
voice: 'Google US English',
primaryColor: '#97c97c',
secondaryColor: '#2c5f2d',
accentColor: '#4ecdc4'
});

// Make it speak
companion.speak('Hello! How can I help you today?');

// Make globally accessible
window.headyCompanion = companion;
</script>
</body>
</html>
```

#### Method 2: Auto-initialization

```html
<!DOCTYPE html>
<html>
<head>
<title>Your Page</title>
</head>
<body data-heady-companion-auto
data-heady-companion-position="bottom-right"
data-heady-companion-size="medium">

<!-- Your content here -->

<!-- Include companion script (will auto-init) -->
<script src="heady_companion.js"></script>
</body>
</html>
```

### Usage Examples

#### Basic Speaking

```javascript
// Make the companion speak
companion.speak('Hello! Welcome to Heady Systems.');

// Speak with options
companion.speak('I can adjust my voice!', {
rate: 1.2, // Speak faster
pitch: 1.1, // Higher pitch
volume: 0.8 // Quieter
});
```

#### Change States

```javascript
// Set different states
companion.setState('idle'); // Resting state
companion.setState('listening'); // Paying attention
companion.setState('speaking'); // Talking
companion.setState('thinking'); // Processing
```

#### Customize Appearance

```javascript
// Change colors
companion.setTheme('#ff6b6b', '#c92a2a', '#ff8787');

// Change position
companion.setPosition('top-left');

// Minimize/maximize
companion.minimize();
```

#### Change Voice

```javascript
// Set a specific voice
companion.setVoice('Google UK English Female');

// List available voices
console.log(companion.voices);
```

## API Reference

### Constructor Options

```javascript
new HeadyCompanion({
container: string, // CSS selector or element (default: 'body')
position: string, // 'bottom-right', 'bottom-left', 'top-right', 'top-left'
size: string, // 'small', 'medium', 'large'
theme: string, // 'default' or custom
voice: string, // Voice name (e.g., 'Google US English')
autoInit: boolean, // Auto-initialize on creation (default: true)
primaryColor: string, // Hex color (default: '#97c97c')
secondaryColor: string,// Hex color (default: '#2c5f2d')
accentColor: string // Hex color (default: '#4ecdc4')
})
```

### Methods

#### `speak(text, options)`
Make the companion speak text using speech synthesis.

```javascript
companion.speak('Hello world!', {
rate: 1.0, // Speed (0.1 to 10)
pitch: 1.0, // Pitch (0 to 2)
volume: 1.0 // Volume (0 to 1)
});
```

#### `setState(state)`
Change the companion's visual state.

```javascript
companion.setState('idle' | 'listening' | 'speaking' | 'thinking');
```

#### `setPosition(position)`
Change the companion's screen position.

```javascript
companion.setPosition('bottom-right' | 'bottom-left' | 'top-right' | 'top-left');
```

#### `setVoice(voiceName)`
Set the speech synthesis voice.

```javascript
companion.setVoice('Google US English');
```

#### `setTheme(primaryColor, secondaryColor, accentColor)`
Update the color theme.

```javascript
companion.setTheme('#97c97c', '#2c5f2d', '#4ecdc4');
```

#### `minimize()`
Toggle minimized state.

```javascript
companion.minimize();
```

#### `destroy()`
Remove the companion from the page.

```javascript
companion.destroy();
```

### Properties

- `companion.state` - Current state ('idle', 'listening', 'speaking', 'thinking')
- `companion.voices` - Array of available speech synthesis voices
- `companion.selectedVoice` - Currently selected voice object
- `companion.isMinimized` - Whether companion is minimized

## Design Philosophy

### Visual Design Principles

1. **Welcoming & Friendly**: Round, soft shapes create an approachable presence
2. **Natural Motion**: Pulsating animations follow natural breathing rhythms
3. **Clear Communication**: Visual states clearly indicate what the companion is doing
4. **Non-intrusive**: Can be minimized and positioned to not block content
5. **Customizable**: Adapts to user preferences and brand requirements

### Interaction Patterns

- **Hover**: Shows attention when user's cursor is nearby
- **Click**: Reveals controls and options
- **Speaking**: Dynamic wave-form visualization provides clear feedback
- **State Changes**: Smooth transitions between states

### Accessibility

- **Visual Feedback**: Clear visual indicators for all states
- **Customizable Size**: Adjustable to user needs
- **Color Customization**: Can be themed for better contrast
- **Voice Options**: Multiple voice choices for different preferences

## Future Enhancements

### Custom Voice Training

The companion includes a framework for custom voice training that will allow users to:

1. **Record Voice Samples**: Record multiple sentences in their own voice
2. **Train Voice Model**: Process samples to create a personalized voice model
3. **Use Custom Voice**: Apply the trained model for speech synthesis
4. **Share Voice Models**: Export/import voice profiles (with consent)

### Advanced Features (Planned)

- **Emotion Detection**: Visual responses to user emotions
- **Context Awareness**: Different behaviors based on page context
- **Multi-language Support**: Automatic language detection and switching
- **Gesture Recognition**: Respond to user gestures
- **Integration with AI Services**: Connect to backend AI for conversations
- **Notification System**: Proactive alerts and reminders
- **Learning Preferences**: Adapt behavior based on user interactions

## Technical Details

### Browser Compatibility

- **Chrome/Edge**: Full support
- **Firefox**: Full support
- **Safari**: Full support (iOS 14+)
- **Opera**: Full support

### Dependencies

- **None**: Pure vanilla JavaScript, no external libraries required
- **Web Speech API**: Uses browser's native speech synthesis

### Performance

- **Lightweight**: < 20KB minified
- **60 FPS Animations**: Smooth, hardware-accelerated
- **Low Memory**: Minimal resource usage
- **Lazy Loading**: Only loads when needed

### Privacy & Security

- **Local Processing**: All speech synthesis runs in the browser
- **No External Calls**: No data sent to external servers
- **No PII Storage**: Does not store personal information
- **User Consent**: Custom voice training requires explicit consent

## Alignment with Heady Philosophy

The AI Companion embodies key Heady principles:

- **User Sovereignty**: Full control over appearance and behavior
- **Transparency**: Clear visual feedback for all operations
- **Privacy by Design**: Local processing, no data leakage
- **Natural Patterns**: Design inspired by golden ratio and nature
- **Ethical AI**: Respectful, helpful, and non-manipulative

## Patent Portfolio Integration

This component integrates concepts from:

- **Patent #11**: MCP Gateway - AI Tool Safety
- **Patent #12**: PromptOps Governance - Ethical AI interaction patterns
- **Patent #31**: HeadyResonance - Wave-form visualizations
- **Patent #34**: HeadyPhi - Golden ratio-based design

## Examples

See `heady_companion.html` for a complete working demo with all features.

## Support

For issues, questions, or feature requests related to the Heady AI Companion:

- **Repository**: HeadyConnection/Heady
- **Path**: HeadySystems_v13/apps/heady_admin_ui/
- **Assignee**: HeadySystems Inc.
- **Inventor**: Eric Haywood

---

*The Heady AI Companion - Your personal AI assistant across all user spaces*
Loading