Demo Free LLM & Text To Speech Artificial Intelligence Service

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.