## Hermes AI Integration Demo

This page demonstrates all the ways you can integrate Hermes AI into your website using uncloseai.js. Each example is isolated and can be used independently.

### 📋 Table of Contents

### 1. 📦 Basic Installation

The simplest way to add AI features to your website:

#### 📄 Code Example

Installation Code

Add this single line to your HTML to get a floating AI button:

    <script src="https://uncloseai.com/uncloseai.js" type="module"></script>

#### 🎯 Live Example

This page demonstrates the basic installation - notice the floating AI button in the bottom right corner!

✅ Active Demo: The floating Hermes button on this page is created by the basic installation code above.

Try clicking the floating button to test the AI chat functionality!

### 2. ⚙️ Configuration Options

Customize the behavior before loading the script:

#### 📄 Code Example

Configuration Code

Customize the behavior before loading the script:

    <script>
        // Disable custom styling (use your CSS framework)
        window.UNCLOSEAI_CUSTOM_STYLING = false;

        // Disable floating button (API functions only)
        window.UNCLOSEAI_FLOATING_BUTTON = false;
    </script>
    <script src="https://uncloseai.com/uncloseai.js" type="module"></script>

#### 🎯 Live Example

This page uses these configuration options:

✅ Active Demo: This page has:

- `UNCLOSEAI_CUSTOM_STYLING = false` - Uses PicoCSS styling instead
- `UNCLOSEAI_FLOATING_BUTTON = false` - Floating button disabled for embedded examples

### 3. 💬 System Message Customization

Customize the AI's behavior by appending additional instructions:

#### 📄 Code Example

System Message Customization Code

Customize the AI's behavior by appending instructions:

    <script type="module">
        import { setSystemMessageAppend } from './src/config.js';

        setSystemMessageAppend(`
        Additional context for this demo page:
        - You're helping users test AI features
        - Provide clear, helpful examples
        - Be encouraging about trying different features
        `);
    </script>

#### 🎯 Live Example

This page uses custom system message instructions:

✅ Active Demo: The AI on this page has been customized to:

- Help users explore and test AI features
- Provide clear, helpful examples
- Be encouraging about trying different features

Try asking the AI about the features on this page to see the customization in action!

### 4. 🤖 Full AI Interface

Complete AI chat with all features enabled:

#### 📄 Code Example

Full Interface Code

Embed a complete AI interface with all features:

    <div class="uncloseai" data-features="full"></div>

#### 🎯 Live Example

Try the full AI interface below:

### 5. 💬 Chat Interface Only

Pure chat interface without extra buttons:

#### 📄 Code Example

Chat Only Code

Embed just the chat interface:

    <div class="uncloseai" data-features="chat"></div>

#### 🎯 Live Example

Try the chat-only interface below:

### 6. 🔧 Feature Buttons Only

Add specific feature buttons without the full chat interface:

#### 📄 Code Example

How to add specific feature buttons

Mix and match any features you want:

    <!-- TTS and Read buttons only -->
    <div class="uncloseai" data-features="tts,read"></div>

    <!-- Just TTS button -->
    <div class="uncloseai" data-features="tts"></div>

    <!-- Just translation button -->
    <div class="uncloseai" data-features="translate"></div>

    <!-- Multiple features -->
    <div class="uncloseai" data-features="tts,translate,read"></div>

Available features: `chat`, `tts`, `translate`, `read`, `full`

#### 🎯 Live Example

Try the feature buttons below:

Available features: Text-to-Speech and Read Page buttons

### 7. 🔊 Text-to-Speech Options

Two ways to add TTS functionality to your website:

#### 📄 Code Examples

How to implement both TTS options

##### Option 1: TTS Widget Button

    <div class="uncloseai" data-features="tts"></div>

##### Option 2: TTS Modal Button

    <button onclick="openTTSModal()">🔊 Text to Speech</button>

Note: Both require the uncloseai.js script to be loaded first:

    <script src="https://uncloseai.com/uncloseai.js" type="module"></script>

#### 🎯 Live Examples

##### 🔊 TTS Widget Button

Embedded TTS button for any content:

Best for: Adding TTS to specific content areas

##### 🎤 TTS Anything Modal

Standalone modal for any text input:

Best for: General-purpose text-to-speech tool

### 8. 🌐 Translation Options

Two ways to add translation functionality to your website:

#### 📄 Code Examples

How to implement both translation options

##### Option 1: Translation Widget Button

    <div class="uncloseai" data-features="translate"></div>

##### Option 2: Translation Modal Button

    <button onclick="openTranslateModal()">🌐 Translate</button>

Translation Features:

- 📝 Custom text translation into 19 languages
- 📄 Full page translation with preserved formatting
- ⚙️ Advanced options and language selection
- 📋 Copy and preview translated content

Note: Both require the uncloseai.js script to be loaded first:

    <script src="https://uncloseai.com/uncloseai.js" type="module"></script>

#### 🎯 Live Examples

##### 🌐 Translation Widget Button

Embedded translation button for content:

Best for: Adding translation to specific content areas

##### 🔄 Translation Modal

Standalone modal for translation tasks:

Best for: General-purpose translation tool

### 9. 🌐 Translation

Translate page content or custom text into 19 languages with code block preservation:

#### 📄 Code Example

Translation Code

Add translation capabilities to any interface:

    // Import translation functions
    import { translateText, translateCurrentPage, SUPPORTED_LANGUAGES } from './src/translation.js';

    // Translate custom text
    const translatedText = await translateText('Hello world!', 'es'); // Spanish

    // Translate current page content
    const translatedPage = await translateCurrentPage('fr'); // French

    // Available languages
    console.log(SUPPORTED_LANGUAGES);
    // { 'en': 'English', 'es': 'Spanish', 'fr': 'French', ... }

#### 🎯 Live Example

Try the translation feature below - it preserves code blocks and formatting:

💡 Tip: The translation feature automatically detects and preserves:

- Code blocks (```code```)
- Inline code (`code`)
- URLs and links
- HTML tags
- Technical formatting

### 10. 📖 Read Page Functionality

Let AI read the entire webpage aloud with natural voice synthesis:

#### 📄 Code Examples

How to add read page functionality

##### Option 1: Read Page Button in Widget

    <div class="uncloseai" data-features="read"></div>

##### Option 2: Standalone Read Page Button

    <button onclick="readPageWithHermes()">📖 Read Page</button>

##### Option 3: Custom JavaScript Integration

    // Call read page function programmatically
    await readPageWithHermes();

    // Or import and use directly
    import { readPageWithHermes } from './src/page-reader.js';
    await readPageWithHermes();

Note: Requires the uncloseai.js script to be loaded first:

    <script src="https://uncloseai.com/uncloseai.js" type="module"></script>

#### 🎯 Live Example

What it does:

- 🤖 AI processes page content for optimal speech
- 🔊 Converts to natural-sounding audio
- ⏯️ Provides play/pause controls
- 💾 Option to download MP3 file
- 📱 Works on mobile and desktop

### 11. 🛠️ Direct API Usage

Call uncloseai.js functions from your own JavaScript:

#### 📄 Code Example

Direct API Code

Call uncloseai.js functions from your own JavaScript:

    // Send a message to AI
    for await (const chunk of sendMessage('Your question here')) {
        console.log(chunk);
    }

    // Convert text to speech
    const result = await speakText('Hello world', 'alloy', 0.9);
    document.body.appendChild(result.audio);

    // Upload and analyze files - COMMENTED OUT: Not working
    // const response = await uploadFile(fileInput.files[0]);
    // console.log(response);

    // Read page content with AI
    await readPageWithHermes();

#### 🎯 Live Example

The custom API examples below demonstrate direct API usage:

### 12. 🎨 Custom API Examples

Build your own interface using uncloseai.js functions:

#### 📄 Code Examples

How to build custom interfaces with Direct API

##### Custom Chat Interface

    // Custom chat implementation with isolated state
    async function customChatExample() {
        const input = document.getElementById('custom-chat-input');
        const display = document.getElementById('custom-chat-display');
        const message = input.value.trim();

        if (!message) return;

        // Add user message to display
        display.innerHTML += `<div><strong>You:</strong> ${message}</div>`;
        input.value = '';

        // Add AI thinking indicator
        const thinkingDiv = document.createElement('div');
        thinkingDiv.innerHTML = '<strong>Hermes:</strong> <em>thinking...</em>';
        display.appendChild(thinkingDiv);

        try {
            // Import and use sendMessage function
            const { sendMessage } = await import('./src/chat.js');
            let response = '';
            for await (const chunk of sendMessage(message)) {
                response += chunk;
                thinkingDiv.innerHTML = `<strong>Hermes:</strong> ${response}`;
            }
        } catch (error) {
            thinkingDiv.innerHTML = `<strong>Error:</strong> ${error.message}`;
        }
    }

##### Custom TTS Interface

    // Custom TTS with voice selection
    async function customTTSExample() {
        const text = document.getElementById('custom-tts-text').value.trim();
        const voice = document.getElementById('voice-select').value;
        const resultDiv = document.getElementById('custom-tts-result');

        if (!text) {
            alert('Please enter some text first!');
            return;
        }

        try {
            // Import and use speakTextDirect function
            const { speakTextDirect } = await import('./src/tts.js');
            const result = await speakTextDirect(text, voice, 1.0);

            // Create custom audio controls
            const playPauseBtn = document.createElement('button');
            playPauseBtn.textContent = '⏸️ Pause';

            const downloadBtn = document.createElement('button');
            downloadBtn.textContent = '💾 Download';
            downloadBtn.onclick = () => {
                const a = document.createElement('a');
                a.href = URL.createObjectURL(result.blob);
                a.download = `custom-tts-${Date.now()}.mp3`;
                a.click();
            };

            // Auto-play and handle controls
            result.audio.play();
            playPauseBtn.onclick = () => {
                if (result.audio.paused) {
                    result.audio.play();
                    playPauseBtn.textContent = '⏸️ Pause';
                } else {
                    result.audio.pause();
                    playPauseBtn.textContent = '▶️ Play';
                }
            };

            resultDiv.appendChild(playPauseBtn);
            resultDiv.appendChild(downloadBtn);
        } catch (error) {
            resultDiv.innerHTML = `<strong>Error:</strong> ${error.message}`;
        }
    }

##### Custom Page Analysis

    // Custom page analysis with user prompt
    async function customPageAnalysis() {
        const prompt = document.getElementById('page-analysis-prompt').value.trim();
        const resultDiv = document.getElementById('page-analysis-result');

        if (!prompt) {
            alert('Please enter a question about this page!');
            return;
        }

        resultDiv.style.display = 'block';
        resultDiv.innerHTML = '<em>Analyzing page...</em>';

        try {
            // Get page content and combine with user prompt
            const { sendMessage } = await import('./src/chat.js');
            const pageContent = document.body.innerText.substring(0, 3000);
            const fullPrompt = `Based on this page content: "${pageContent}"\\n\\nUser question: ${prompt}`;

            let response = '';
            for await (const chunk of sendMessage(fullPrompt)) {
                response += chunk;
                resultDiv.innerHTML = `<strong>Analysis:</strong><br><div>${response}</div>`;
            }
        } catch (error) {
            resultDiv.innerHTML = `<strong>Error:</strong> ${error.message}`;
        }
    }

##### Custom Translation Interface

    // Custom translation with code preservation
    async function customTranslateExample() {
        const text = document.getElementById('custom-translate-text').value.trim();
        const targetLanguage = document.getElementById('translate-language').value;
        const resultDiv = document.getElementById('custom-translate-result');

        if (!text) {
            alert('Please enter some text to translate!');
            return;
        }

        resultDiv.style.display = 'block';
        resultDiv.textContent = 'Translating...';

        try {
            // Import and use translation function
            const { translateText } = await import('./src/translation.js');
            const translatedText = await translateText(text, targetLanguage);

            resultDiv.textContent = translatedText;
        } catch (error) {
            resultDiv.textContent = `Translation failed: ${error.message}`;
        }
    }

Available API Functions:

- `sendMessage(message)` - Chat with AI (returns async generator)
- `speakTextDirect(text, voice, speed)` - Convert text to speech
- `translateText(text, targetLanguage)` - Translate text
- `readPageWithHermes()` - Read page content aloud
- `openTTSModal()` - Open TTS modal
- `openTranslateModal()` - Open translation modal

Note: All functions require uncloseai.js to be loaded first:

    <script src="https://uncloseai.com/uncloseai.js" type="module"></script>

#### 🎯 Live Examples

Try these custom implementations built with the Direct API:

##### 💬 Custom AI Chat

Your own chat interface:

##### 🔊 Custom Text-to-Speech

Your own TTS interface:

##### 📁 Custom File Analysis (Under Development)

File upload interface (temporarily disabled):

##### 📖 Custom Page Analysis

Analyze page content with custom prompts:

##### 🌐 Custom Translation

Translate text with code preservation:

## Open Source & Public Domain

uncloseai. is completely public domain - free as in beer, free as in freedom. AI for all, internet for all, open web for everyone.

📦 Source Code: https://git.unturf.com/engineering/unturf/uncloseai.com

📄 Full Documentation: See README.rst in the repository for complete technical details, architecture, and contribution guidelines.