uncloseai.com/demo.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="theme-color" content="#43a047">
    <meta name="color-scheme" content="light dark">
    <title>Demo Free LLM & Text To Speech Artificial Intelligence Service | ai.unturf.com</title>

    <!-- PicoCSS -->
    <link rel="stylesheet" href="/css/pico.classless.min.css">
    <!-- ChunkFive Font -->
    <link rel="stylesheet" href="/css/chunkfive/stylesheet.css" type="text/css" charset="utf-8" />

    <style>
    body {
        max-width: 960px;
        margin: 0 auto;
    }
    </style>

    <!-- Highlight.js for syntax highlighting -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/styles/a11y-dark.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js"></script>

    <!-- Theme Switcher Script -->
    <script>
        function switchTheme(theme) {
            if (theme === "auto") {
                document.documentElement.removeAttribute('data-theme');
            } else {
                document.documentElement.setAttribute('data-theme', theme);
            }
        }
        
        // Disable custom styling for uncloseai.js - use PicoCSS instead
        window.UNCLOSEAI_CUSTOM_STYLING = false;

        // Disable the floating button
        window.UNCLOSEAI_FLOATING_BUTTON = false;
    </script>

    <script src="https://uncloseai.com/uncloseai.js" type="module"></script>
    <!--
    <script defer data-domain="ai.unturf.com" src="https://analytics.unturf.com/js/plausible.js"></script>
    -->
</head>

<body>

    <header>
        <hgroup>
	     <a href="https://ai.unturf.com"><h1 class="unturf" style="font-family: 'ChunkFiveRegular';">unturf.</h1></a>
            <p>Welcome to ai.unturf.com - Free LLM & Text To Speech Artificial Intelligence Service</title>
        </hgroup>
        <nav>
            <ul>
                <li><a href="#" onclick="switchTheme('auto')">Auto</a></li>
                <li><a href="#" onclick="switchTheme('light')">Light</a></li>
                <li><a href="#" onclick="switchTheme('dark')">Dark</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <h2>Hermes AI Integration Demo</h2>
        <p>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.</p>

        <!-- Integration Code Examples -->
        <section>
            <h3>📝 Integration Code Examples</h3>
            <p>Copy these code snippets to add AI features to your website:</p>
            
            <details>
                <summary><strong>Basic Installation</strong></summary>
                <p>Add this single line to your HTML to get a floating AI button:</p>
                <pre><code class="html">&lt;script src="https://uncloseai.com/uncloseai.js" type="module"&gt;&lt;/script&gt;</code></pre>
            </details>
            
            <details>
                <summary><strong>Configuration Options</strong></summary>
                <p>Customize the behavior before loading the script:</p>
                <pre><code class="html">&lt;script&gt;
    // Disable custom styling (use your CSS framework)
    window.UNCLOSEAI_CUSTOM_STYLING = false;
    
    // Disable floating button (API functions only)
    window.UNCLOSEAI_FLOATING_BUTTON = false;
&lt;/script&gt;
&lt;script src="https://uncloseai.com/uncloseai.js" type="module"&gt;&lt;/script&gt;</code></pre>
            </details>
            
            <details>
                <summary><strong>Class-Based Integration</strong></summary>
                <p>Embed AI features directly into your HTML:</p>
                <pre><code class="html">&lt;!-- Full interface with all features --&gt;
&lt;div class="uncloseai" data-features="full"&gt;&lt;/div&gt;

&lt;!-- Chat interface only --&gt;
&lt;div class="uncloseai" data-features="chat"&gt;&lt;/div&gt;

&lt;!-- Specific features --&gt;
&lt;div class="uncloseai" data-features="tts,upload,read"&gt;&lt;/div&gt;
&lt;div class="uncloseai" data-features="tts"&gt;&lt;/div&gt;</code></pre>
            </details>
            
            <details>
                <summary><strong>Direct API Usage</strong></summary>
                <p>Call uncloseai.js functions from your own JavaScript:</p>
                <pre><code class="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
const response = await uploadFile(fileInput.files[0]);
console.log(response);

// Read page content with AI
await readPageWithHermes();</code></pre>
            </details>
        </section>

        <!-- Live Demonstrations -->
        <section>
            <h3>🎯 Live Demonstrations</h3>
            <p>Try each integration method below. All examples work independently:</p>
            
            <h4>1. Full AI Interface</h4>
            <p>Complete AI chat with all features enabled:</p>
            <div style="border: 2px dashed #ccc; padding: 20px; margin: 15px 0; border-radius: 8px;">
                <div class="uncloseai" data-features="full" id="demo-full"></div>
            </div>
            
            <h4>2. Chat Interface Only</h4>
            <p>Pure chat interface without extra buttons:</p>
            <div style="border: 2px dashed #ccc; padding: 20px; margin: 15px 0; border-radius: 8px;">
                <div class="uncloseai" data-features="chat" id="demo-chat"></div>
            </div>
            
            <h4>3. Feature Buttons Only</h4>
            <p>TTS, Upload, and Read buttons without chat:</p>
            <div style="border: 2px dashed #ccc; padding: 20px; margin: 15px 0; border-radius: 8px;">
                <div class="uncloseai" data-features="tts,upload,read" id="demo-buttons"></div>
            </div>
            
            <h4>4. Text-to-Speech Only</h4>
            <p>Just the TTS functionality:</p>
            <div style="border: 2px dashed #ccc; padding: 20px; margin: 15px 0; border-radius: 8px;">
                <div class="uncloseai" data-features="tts" id="demo-tts"></div>
            </div>
        </section>

        <!-- Custom API Examples -->
        <section>
            <h3>🔧 Custom API Integration Examples</h3>
            <p>Build your own interface using uncloseai.js functions:</p>
            
            <div style="display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));">
                <!-- Custom Chat Example -->
                <div style="border: 1px solid #ddd; padding: 20px; border-radius: 8px;">
                    <h5>💬 Custom AI Chat</h5>
                    <p>Your own chat interface:</p>
                    <div style="border: 1px solid #eee; height: 200px; padding: 10px; margin: 10px 0; overflow-y: auto; background: #fafafa;" id="custom-chat-display"></div>
                    <input type="text" id="custom-chat-input" placeholder="Ask anything..." style="width: 100%; margin: 5px 0;">
                    <button onclick="customChatExample()" style="width: 100%;">Send Message</button>
                </div>
                
                <!-- Custom TTS Example -->
                <div style="border: 1px solid #ddd; padding: 20px; border-radius: 8px;">
                    <h5>🔊 Custom Text-to-Speech</h5>
                    <p>Your own TTS interface:</p>
                    <textarea id="custom-tts-text" placeholder="Enter text to speak..." style="width: 100%; height: 80px; margin: 5px 0;"></textarea>
                    <select id="voice-select" style="width: 100%; margin: 5px 0;">
                        <option value="alloy">Alloy</option>
                        <option value="echo">Echo</option>
                        <option value="fable">Fable</option>
                        <option value="onyx">Onyx</option>
                        <option value="nova">Nova</option>
                        <option value="shimmer">Shimmer</option>
                    </select>
                    <button onclick="customTTSExample()" style="width: 100%;">Generate Speech</button>
                    <div id="custom-tts-result" style="margin: 10px 0;"></div>
                </div>
                
                <!-- Custom File Upload Example -->
                <div style="border: 1px solid #ddd; padding: 20px; border-radius: 8px;">
                    <h5>📁 Custom File Analysis</h5>
                    <p>Your own file upload interface:</p>
                    <input type="file" id="custom-file-input" style="width: 100%; margin: 5px 0;">
                    <button onclick="customFileExample()" style="width: 100%;">Analyze File</button>
                    <div id="custom-file-result" style="margin: 10px 0; padding: 10px; background: #f9f9f9; border-radius: 5px; display: none;"></div>
                </div>
                
                <!-- Page Analysis Example -->
                <div style="border: 1px solid #ddd; padding: 20px; border-radius: 8px;">
                    <h5>📖 Custom Page Analysis</h5>
                    <p>Analyze page content with custom prompts:</p>
                    <input type="text" id="page-analysis-prompt" placeholder="What would you like to know about this page?" style="width: 100%; margin: 5px 0;">
                    <button onclick="customPageAnalysis()" style="width: 100%;">Analyze Page</button>
                    <div id="page-analysis-result" style="margin: 10px 0; padding: 10px; background: #f9f9f9; border-radius: 5px; display: none;"></div>
                </div>
            </div>
        </section>

        <script>
        // 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
            display.innerHTML += `<div style="margin: 5px 0; padding: 5px; background: #e3f2fd; border-radius: 3px;"><strong>You:</strong> ${message}</div>`;
            input.value = '';
            
            // Add AI thinking indicator
            const thinkingDiv = document.createElement('div');
            thinkingDiv.style.cssText = 'margin: 5px 0; padding: 5px; background: #f5f5f5; border-radius: 3px;';
            thinkingDiv.innerHTML = '<strong>Hermes:</strong> <em>thinking...</em>';
            display.appendChild(thinkingDiv);
            display.scrollTop = display.scrollHeight;
            
            try {
                let response = '';
                for await (const chunk of sendMessage(message)) {
                    response += chunk;
                    thinkingDiv.innerHTML = `<strong>Hermes:</strong> ${response}`;
                    display.scrollTop = display.scrollHeight;
                }
            } catch (error) {
                thinkingDiv.innerHTML = `<strong>Error:</strong> ${error.message}`;
            }
        }
        
        // 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;
            }
            
            resultDiv.innerHTML = '<em>Generating speech...</em>';
            
            try {
                const result = await speakText(text, voice, 1.0);
                resultDiv.innerHTML = `
                    <div style="margin: 10px 0;">
                        <button onclick="this.parentElement.previousElementSibling.play()" style="margin: 2px;">▶️ Play</button>
                        <button onclick="this.parentElement.previousElementSibling.pause()" style="margin: 2px;">⏸️ Pause</button>
                        <button onclick="downloadCustomAudio()" style="margin: 2px;">💾 Download</button>
                    </div>
                `;
                resultDiv.insertBefore(result.audio, resultDiv.firstChild);
                window.customAudioBlob = result.blob;
            } catch (error) {
                resultDiv.innerHTML = `<strong>Error:</strong> ${error.message}`;
            }
        }
        
        // Custom file upload with isolated state
        async function customFileExample() {
            const fileInput = document.getElementById('custom-file-input');
            const resultDiv = document.getElementById('custom-file-result');
            
            if (!fileInput.files[0]) {
                alert('Please select a file first!');
                return;
            }
            
            resultDiv.style.display = 'block';
            resultDiv.innerHTML = '<em>Analyzing file...</em>';
            
            try {
                const response = await uploadFile(fileInput.files[0]);
                resultDiv.innerHTML = `<strong>Analysis Result:</strong><br><div style="white-space: pre-wrap;">${response}</div>`;
                fileInput.value = '';
            } catch (error) {
                resultDiv.innerHTML = `<strong>Error:</strong> ${error.message}`;
            }
        }
        
        // Custom page analysis with user prompt
        async function customPageAnalysis() {
            const promptInput = document.getElementById('page-analysis-prompt');
            const resultDiv = document.getElementById('page-analysis-result');
            const prompt = promptInput.value.trim();
            
            if (!prompt) {
                alert('Please enter a question about this page!');
                return;
            }
            
            resultDiv.style.display = 'block';
            resultDiv.innerHTML = '<em>Analyzing page...</em>';
            
            try {
                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 style="white-space: pre-wrap;">${response}</div>`;
                }
            } catch (error) {
                resultDiv.innerHTML = `<strong>Error:</strong> ${error.message}`;
            }
        }
        
        // Utility functions
        function downloadCustomAudio() {
            if (window.customAudioBlob) {
                const a = document.createElement('a');
                a.href = URL.createObjectURL(window.customAudioBlob);
                a.download = `custom-tts-${Date.now()}.mp3`;
                a.click();
            }
        }
        
        // Add Enter key support for chat input
        document.addEventListener('DOMContentLoaded', function() {
            const chatInput = document.getElementById('custom-chat-input');
            if (chatInput) {
                chatInput.addEventListener('keypress', function(e) {
                    if (e.key === 'Enter') {
                        customChatExample();
                    }
                });
            }
            
            const pageInput = document.getElementById('page-analysis-prompt');
            if (pageInput) {
                pageInput.addEventListener('keypress', function(e) {
                    if (e.key === 'Enter') {
                        customPageAnalysis();
                    }
                });
            }
        });
        </script>

    </main>

    <footer>
        <small>Stylesheets by <a href="https://picocss.com" target="_blank">PicoCSS</a></small>
        <small>& <a href="https://highlightjs.org/" target="_blank">highlight.js</a></small>
    </footer>

</body>

</html>