feat: add comprehensive code documentation to Custom API Examples section

demo.html

@@ -554,6 +554,160 @@ await readPageWithHermes();</code></pre>
                     <div id="custom-translate-result" style="margin: 10px 0; padding: 10px; background: #f9f9f9; border-radius: 5px; display: none; white-space: pre-wrap;"></div>
                 </div>
             </div>
+            
+            <h4>📄 Code Examples</h4>
+            <details open>
+                <summary><strong>How to build custom interfaces with Direct API</strong></summary>
+                
+                <h5>Custom Chat Interface</h5>
+                <pre><code class="javascript">// 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 += `&lt;div&gt;&lt;strong&gt;You:&lt;/strong&gt; ${message}&lt;/div&gt;`;
+    input.value = '';
+    
+    // Add AI thinking indicator
+    const thinkingDiv = document.createElement('div');
+    thinkingDiv.innerHTML = '&lt;strong&gt;Hermes:&lt;/strong&gt; &lt;em&gt;thinking...&lt;/em&gt;';
+    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 = `&lt;strong&gt;Hermes:&lt;/strong&gt; ${response}`;
+        }
+    } catch (error) {
+        thinkingDiv.innerHTML = `&lt;strong&gt;Error:&lt;/strong&gt; ${error.message}`;
+    }
+}</code></pre>
+                
+                <h5>Custom TTS Interface</h5>
+                <pre><code class="javascript">// 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 = `&lt;strong&gt;Error:&lt;/strong&gt; ${error.message}`;
+    }
+}</code></pre>
+                
+                <h5>Custom Page Analysis</h5>
+                <pre><code class="javascript">// 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 = '&lt;em&gt;Analyzing page...&lt;/em&gt;';
+    
+    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 = `&lt;strong&gt;Analysis:&lt;/strong&gt;&lt;br&gt;&lt;div&gt;${response}&lt;/div&gt;`;
+        }
+    } catch (error) {
+        resultDiv.innerHTML = `&lt;strong&gt;Error:&lt;/strong&gt; ${error.message}`;
+    }
+}</code></pre>
+                
+                <h5>Custom Translation Interface</h5>
+                <pre><code class="javascript">// 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}`;
+    }
+}</code></pre>
+                
+                <p><strong>Available API Functions:</strong></p>
+                <ul>
+                    <li><code>sendMessage(message)</code> - Chat with AI (returns async generator)</li>
+                    <li><code>speakTextDirect(text, voice, speed)</code> - Convert text to speech</li>
+                    <li><code>translateText(text, targetLanguage)</code> - Translate text</li>
+                    <li><code>readPageWithHermes()</code> - Read page content aloud</li>
+                    <li><code>openTTSModal()</code> - Open TTS modal</li>
+                    <li><code>openTranslateModal()</code> - Open translation modal</li>
+                </ul>
+                
+                <p><strong>Note:</strong> All functions require uncloseai.js to be loaded first:</p>
+                <pre><code class="html">&lt;script src="https://uncloseai.com/uncloseai.js" type="module"&gt;&lt;/script&gt;</code></pre>
+            </details>
         </section>
 
         <script>