From f79a66ddf0563a0defd819b7a1253a13748d5e90 Mon Sep 17 00:00:00 2001 From: Russell Ballestrini Date: Fri, 4 Jul 2025 14:43:51 -0400 Subject: [PATCH] feat: add comprehensive code documentation to Custom API Examples section --- demo.html | 154 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 154 insertions(+) diff --git a/demo.html b/demo.html index 57a4157..4c64c2d 100644 --- a/demo.html +++ b/demo.html @@ -554,6 +554,160 @@ await readPageWithHermes(); + +

📄 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:

+ + +

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

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