fix: streamline quick start section and ensure consistent code-first demo structure
- Streamlined index.html quick start section to focus on one-line installation - Fixed demo.html section ordering to consistently show code examples before live demos - Corrected section 12 numbering (was duplicate section 11) - Enhanced demo page user experience with proper code-then-demo flow 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
f79a66ddf0
commit
b9be6e512a
2 changed files with 145 additions and 192 deletions
268
demo.html
268
demo.html
|
|
@ -229,13 +229,6 @@
|
|||
<h3>6. 🔧 Feature Buttons Only</h3>
|
||||
<p>Add specific feature buttons without the full chat interface:</p>
|
||||
|
||||
<h4>🎯 Live Example</h4>
|
||||
<p>Try the feature buttons below:</p>
|
||||
<div style="border: 2px dashed #43a047; padding: 20px; margin: 15px 0; border-radius: 8px; background: rgba(67, 160, 71, 0.05);">
|
||||
<div class="uncloseai" data-features="tts,read" id="demo-buttons"></div>
|
||||
<p><strong>Available features:</strong> Text-to-Speech and Read Page buttons</p>
|
||||
</div>
|
||||
|
||||
<h4>📄 Code Example</h4>
|
||||
<details open>
|
||||
<summary><strong>How to add specific feature buttons</strong></summary>
|
||||
|
|
@ -254,6 +247,13 @@
|
|||
|
||||
<p><strong>Available features:</strong> <code>chat</code>, <code>tts</code>, <code>translate</code>, <code>read</code>, <code>full</code></p>
|
||||
</details>
|
||||
|
||||
<h4>🎯 Live Example</h4>
|
||||
<p>Try the feature buttons below:</p>
|
||||
<div style="border: 2px dashed #43a047; padding: 20px; margin: 15px 0; border-radius: 8px; background: rgba(67, 160, 71, 0.05);">
|
||||
<div class="uncloseai" data-features="tts,read" id="demo-buttons"></div>
|
||||
<p><strong>Available features:</strong> Text-to-Speech and Read Page buttons</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 7. Text-to-Speech Options -->
|
||||
|
|
@ -261,6 +261,20 @@
|
|||
<h3>7. 🔊 Text-to-Speech Options</h3>
|
||||
<p>Two ways to add TTS functionality to your website:</p>
|
||||
|
||||
<h4>📄 Code Examples</h4>
|
||||
<details open>
|
||||
<summary><strong>How to implement both TTS options</strong></summary>
|
||||
|
||||
<h5>Option 1: TTS Widget Button</h5>
|
||||
<pre><code class="html"><div class="uncloseai" data-features="tts"></div></code></pre>
|
||||
|
||||
<h5>Option 2: TTS Modal Button</h5>
|
||||
<pre><code class="html"><button onclick="openTTSModal()">🔊 Text to Speech</button></code></pre>
|
||||
|
||||
<p><strong>Note:</strong> Both require the uncloseai.js script to be loaded first:</p>
|
||||
<pre><code class="html"><script src="https://uncloseai.com/uncloseai.js" type="module"></script></code></pre>
|
||||
</details>
|
||||
|
||||
<h4>🎯 Live Examples</h4>
|
||||
|
||||
<div style="display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));">
|
||||
|
|
@ -280,20 +294,6 @@
|
|||
<p><strong>Best for:</strong> General-purpose text-to-speech tool</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4>📄 Code Examples</h4>
|
||||
<details open>
|
||||
<summary><strong>How to implement both TTS options</strong></summary>
|
||||
|
||||
<h5>Option 1: TTS Widget Button</h5>
|
||||
<pre><code class="html"><div class="uncloseai" data-features="tts"></div></code></pre>
|
||||
|
||||
<h5>Option 2: TTS Modal Button</h5>
|
||||
<pre><code class="html"><button onclick="openTTSModal()">🔊 Text to Speech</button></code></pre>
|
||||
|
||||
<p><strong>Note:</strong> Both require the uncloseai.js script to be loaded first:</p>
|
||||
<pre><code class="html"><script src="https://uncloseai.com/uncloseai.js" type="module"></script></code></pre>
|
||||
</details>
|
||||
</section>
|
||||
|
||||
<!-- 8. Translation Options -->
|
||||
|
|
@ -301,26 +301,6 @@
|
|||
<h3>8. 🌐 Translation Options</h3>
|
||||
<p>Two ways to add translation functionality to your website:</p>
|
||||
|
||||
<h4>🎯 Live Examples</h4>
|
||||
|
||||
<div style="display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));">
|
||||
<!-- Translation Widget Button -->
|
||||
<div style="border: 2px dashed #43a047; padding: 20px; border-radius: 8px; background: rgba(67, 160, 71, 0.05);">
|
||||
<h5>🌐 Translation Widget Button</h5>
|
||||
<p>Embedded translation button for content:</p>
|
||||
<div class="uncloseai" data-features="translate" id="demo-translate-modal"></div>
|
||||
<p><strong>Best for:</strong> Adding translation to specific content areas</p>
|
||||
</div>
|
||||
|
||||
<!-- Translation Modal Button -->
|
||||
<div style="border: 2px dashed #43a047; padding: 20px; border-radius: 8px; background: rgba(67, 160, 71, 0.05);">
|
||||
<h5>🔄 Translation Modal</h5>
|
||||
<p>Standalone modal for translation tasks:</p>
|
||||
<button onclick="openTranslateModal()" style="padding: 10px 20px; background: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer;">🌐 Open Translation Modal</button>
|
||||
<p><strong>Best for:</strong> General-purpose translation tool</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4>📄 Code Examples</h4>
|
||||
<details open>
|
||||
<summary><strong>How to implement both translation options</strong></summary>
|
||||
|
|
@ -342,6 +322,26 @@
|
|||
<p><strong>Note:</strong> Both require the uncloseai.js script to be loaded first:</p>
|
||||
<pre><code class="html"><script src="https://uncloseai.com/uncloseai.js" type="module"></script></code></pre>
|
||||
</details>
|
||||
|
||||
<h4>🎯 Live Examples</h4>
|
||||
|
||||
<div style="display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));">
|
||||
<!-- Translation Widget Button -->
|
||||
<div style="border: 2px dashed #43a047; padding: 20px; border-radius: 8px; background: rgba(67, 160, 71, 0.05);">
|
||||
<h5>🌐 Translation Widget Button</h5>
|
||||
<p>Embedded translation button for content:</p>
|
||||
<div class="uncloseai" data-features="translate" id="demo-translate-modal"></div>
|
||||
<p><strong>Best for:</strong> Adding translation to specific content areas</p>
|
||||
</div>
|
||||
|
||||
<!-- Translation Modal Button -->
|
||||
<div style="border: 2px dashed #43a047; padding: 20px; border-radius: 8px; background: rgba(67, 160, 71, 0.05);">
|
||||
<h5>🔄 Translation Modal</h5>
|
||||
<p>Standalone modal for translation tasks:</p>
|
||||
<button onclick="openTranslateModal()" style="padding: 10px 20px; background: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer;">🌐 Open Translation Modal</button>
|
||||
<p><strong>Best for:</strong> General-purpose translation tool</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!--
|
||||
|
|
@ -406,19 +406,6 @@ console.log(SUPPORTED_LANGUAGES);
|
|||
<h3>10. 📖 Read Page Functionality</h3>
|
||||
<p>Let AI read the entire webpage aloud with natural voice synthesis:</p>
|
||||
|
||||
<h4>🎯 Live Example</h4>
|
||||
<div style="border: 2px dashed #43a047; padding: 20px; margin: 15px 0; border-radius: 8px; background: rgba(67, 160, 71, 0.05);">
|
||||
<button onclick="readPageWithHermes()" style="padding: 15px 30px; background: #4CAF50; color: white; border: none; border-radius: 8px; cursor: pointer; font-size: 16px; font-weight: bold;">📖 Read This Page Aloud</button>
|
||||
<p><strong>What it does:</strong></p>
|
||||
<ul>
|
||||
<li>🤖 AI processes page content for optimal speech</li>
|
||||
<li>🔊 Converts to natural-sounding audio</li>
|
||||
<li>⏯️ Provides play/pause controls</li>
|
||||
<li>💾 Option to download MP3 file</li>
|
||||
<li>📱 Works on mobile and desktop</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h4>📄 Code Examples</h4>
|
||||
<details open>
|
||||
<summary><strong>How to add read page functionality</strong></summary>
|
||||
|
|
@ -440,6 +427,19 @@ await readPageWithHermes();</code></pre>
|
|||
<p><strong>Note:</strong> Requires the uncloseai.js script to be loaded first:</p>
|
||||
<pre><code class="html"><script src="https://uncloseai.com/uncloseai.js" type="module"></script></code></pre>
|
||||
</details>
|
||||
|
||||
<h4>🎯 Live Example</h4>
|
||||
<div style="border: 2px dashed #43a047; padding: 20px; margin: 15px 0; border-radius: 8px; background: rgba(67, 160, 71, 0.05);">
|
||||
<button onclick="readPageWithHermes()" style="padding: 15px 30px; background: #4CAF50; color: white; border: none; border-radius: 8px; cursor: pointer; font-size: 16px; font-weight: bold;">📖 Read This Page Aloud</button>
|
||||
<p><strong>What it does:</strong></p>
|
||||
<ul>
|
||||
<li>🤖 AI processes page content for optimal speech</li>
|
||||
<li>🔊 Converts to natural-sounding audio</li>
|
||||
<li>⏯️ Provides play/pause controls</li>
|
||||
<li>💾 Option to download MP3 file</li>
|
||||
<li>📱 Works on mobile and desktop</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 11. Direct API Usage -->
|
||||
|
|
@ -472,89 +472,11 @@ await readPageWithHermes();</code></pre>
|
|||
<p>The custom API examples below demonstrate direct API usage:</p>
|
||||
</section>
|
||||
|
||||
<!-- 11. Custom API Examples -->
|
||||
<!-- 12. Custom API Examples -->
|
||||
<section id="custom-examples">
|
||||
<h3>11. 🎨 Custom API Examples</h3>
|
||||
<h3>12. 🎨 Custom API Examples</h3>
|
||||
<p>Build your own interface using uncloseai.js functions:</p>
|
||||
|
||||
<h4>🎯 Live Examples</h4>
|
||||
<p>Try these custom implementations built with the Direct API:</p>
|
||||
|
||||
<div style="display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));">
|
||||
<!-- Custom Chat Example -->
|
||||
<div style="border: 2px dashed #43a047; padding: 20px; border-radius: 8px; background: rgba(67, 160, 71, 0.05);">
|
||||
<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: 2px dashed #43a047; padding: 20px; border-radius: 8px; background: rgba(67, 160, 71, 0.05);">
|
||||
<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 - DISABLED: Upload functionality under development -->
|
||||
<div style="border: 2px dashed #ccc; padding: 20px; border-radius: 8px; background: rgba(128, 128, 128, 0.05); opacity: 0.6;">
|
||||
<h5>📁 Custom File Analysis <span style="color: #999; font-size: 0.8em;">(Under Development)</span></h5>
|
||||
<p>File upload interface (temporarily disabled):</p>
|
||||
<input type="file" id="custom-file-input" style="width: 100%; margin: 5px 0;" disabled>
|
||||
<button onclick="alert('File upload feature is under development')" style="width: 100%;" disabled>Analyze File (Coming Soon)</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: 2px dashed #43a047; padding: 20px; border-radius: 8px; background: rgba(67, 160, 71, 0.05);">
|
||||
<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>
|
||||
|
||||
<!-- Custom Translation Example -->
|
||||
<div style="border: 2px dashed #43a047; padding: 20px; border-radius: 8px; background: rgba(67, 160, 71, 0.05);">
|
||||
<h5>🌐 Custom Translation</h5>
|
||||
<p>Translate text with code preservation:</p>
|
||||
<textarea id="custom-translate-text" placeholder="Enter text to translate (try including code like `function test()` or ```code blocks```)" style="width: 100%; height: 80px; margin: 5px 0;"></textarea>
|
||||
<select id="translate-language" style="width: 100%; margin: 5px 0;">
|
||||
<option value="es">Spanish</option>
|
||||
<option value="zh">Chinese (Simplified)</option>
|
||||
<option value="hi">Hindi</option>
|
||||
<option value="fr">French</option>
|
||||
<option value="ar">Arabic</option>
|
||||
<option value="bn">Bengali</option>
|
||||
<option value="ru">Russian</option>
|
||||
<option value="pt">Portuguese</option>
|
||||
<option value="ur">Urdu</option>
|
||||
<option value="id">Indonesian</option>
|
||||
<option value="de">German</option>
|
||||
<option value="ja">Japanese</option>
|
||||
<option value="sw">Swahili</option>
|
||||
<option value="mr">Marathi</option>
|
||||
<option value="te">Telugu</option>
|
||||
<option value="tr">Turkish</option>
|
||||
<option value="zh-tw">Chinese (Traditional)</option>
|
||||
<option value="ko">Korean</option>
|
||||
</select>
|
||||
<button onclick="customTranslateExample()" style="width: 100%;">Translate Text</button>
|
||||
<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>
|
||||
|
|
@ -708,6 +630,84 @@ async function customTranslateExample() {
|
|||
<p><strong>Note:</strong> All functions require uncloseai.js to be loaded first:</p>
|
||||
<pre><code class="html"><script src="https://uncloseai.com/uncloseai.js" type="module"></script></code></pre>
|
||||
</details>
|
||||
|
||||
<h4>🎯 Live Examples</h4>
|
||||
<p>Try these custom implementations built with the Direct API:</p>
|
||||
|
||||
<div style="display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));">
|
||||
<!-- Custom Chat Example -->
|
||||
<div style="border: 2px dashed #43a047; padding: 20px; border-radius: 8px; background: rgba(67, 160, 71, 0.05);">
|
||||
<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: 2px dashed #43a047; padding: 20px; border-radius: 8px; background: rgba(67, 160, 71, 0.05);">
|
||||
<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 - DISABLED: Upload functionality under development -->
|
||||
<div style="border: 2px dashed #ccc; padding: 20px; border-radius: 8px; background: rgba(128, 128, 128, 0.05); opacity: 0.6;">
|
||||
<h5>📁 Custom File Analysis <span style="color: #999; font-size: 0.8em;">(Under Development)</span></h5>
|
||||
<p>File upload interface (temporarily disabled):</p>
|
||||
<input type="file" id="custom-file-input" style="width: 100%; margin: 5px 0;" disabled>
|
||||
<button onclick="alert('File upload feature is under development')" style="width: 100%;" disabled>Analyze File (Coming Soon)</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: 2px dashed #43a047; padding: 20px; border-radius: 8px; background: rgba(67, 160, 71, 0.05);">
|
||||
<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>
|
||||
|
||||
<!-- Custom Translation Example -->
|
||||
<div style="border: 2px dashed #43a047; padding: 20px; border-radius: 8px; background: rgba(67, 160, 71, 0.05);">
|
||||
<h5>🌐 Custom Translation</h5>
|
||||
<p>Translate text with code preservation:</p>
|
||||
<textarea id="custom-translate-text" placeholder="Enter text to translate (try including code like `function test()` or ```code blocks```)" style="width: 100%; height: 80px; margin: 5px 0;"></textarea>
|
||||
<select id="translate-language" style="width: 100%; margin: 5px 0;">
|
||||
<option value="es">Spanish</option>
|
||||
<option value="zh">Chinese (Simplified)</option>
|
||||
<option value="hi">Hindi</option>
|
||||
<option value="fr">French</option>
|
||||
<option value="ar">Arabic</option>
|
||||
<option value="bn">Bengali</option>
|
||||
<option value="ru">Russian</option>
|
||||
<option value="pt">Portuguese</option>
|
||||
<option value="ur">Urdu</option>
|
||||
<option value="id">Indonesian</option>
|
||||
<option value="de">German</option>
|
||||
<option value="ja">Japanese</option>
|
||||
<option value="sw">Swahili</option>
|
||||
<option value="mr">Marathi</option>
|
||||
<option value="te">Telugu</option>
|
||||
<option value="tr">Turkish</option>
|
||||
<option value="zh-tw">Chinese (Traditional)</option>
|
||||
<option value="ko">Korean</option>
|
||||
</select>
|
||||
<button onclick="customTranslateExample()" style="width: 100%;">Translate Text</button>
|
||||
<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>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
69
index.html
69
index.html
|
|
@ -74,74 +74,27 @@
|
|||
|
||||
<p>This web client-only solution uses <a href="https://uncloseai.com/uncloseai.js" target="_blank">uncloseai.js</a> to make the browser act as a client, directly interacting with the API without needing an intermediary server. By eliminating the need for a valid API key, the API handles requests on behalf of the browser client, making it efficient and accessible thin client, especially those on battery power like phones & laptops.</p>
|
||||
|
||||
<h3>Install uncloseai.js on any website</h3>
|
||||
<h3>🚀 Quick Start: Install uncloseai.js on any website</h3>
|
||||
|
||||
<p>Add AI capabilities to any static website or web application with just one line of code. uncloseai.js automatically creates a floating "uncloseai." button that provides access to Hermes AI, text-to-speech, file upload, and more.</p>
|
||||
<p>Add AI capabilities to any website with just one line of code. The floating "uncloseai." button appears automatically, providing access to Hermes AI, text-to-speech, translation, and more.</p>
|
||||
|
||||
<h4>Quick Installation</h4>
|
||||
<h4>✨ One-Line Installation</h4>
|
||||
<p>Add this script tag to your HTML - that's it! The floating AI button appears automatically:</p>
|
||||
<pre><code class="html"><script src="https://uncloseai.com/uncloseai.js" type="module"></script></code></pre>
|
||||
|
||||
<h4>Configuration Options</h4>
|
||||
<p>To use your CSS framework's styling instead of uncloseai.js custom styles:</p>
|
||||
<pre><code class="javascript"><script>
|
||||
window.UNCLOSEAI_CUSTOM_STYLING = false;
|
||||
</script></code></pre>
|
||||
|
||||
<p>To disable the floating button (if you only want the API functions):</p>
|
||||
<pre><code class="javascript"><script>
|
||||
window.UNCLOSEAI_FLOATING_BUTTON = false;
|
||||
</script></code></pre>
|
||||
|
||||
<h4>System Message Customization</h4>
|
||||
<p>Customize the AI's behavior by appending additional instructions to the system message:</p>
|
||||
<pre><code class="javascript"><script type="module">
|
||||
import { setSystemMessageAppend } from './src/config.js';
|
||||
|
||||
// Add custom instructions
|
||||
setSystemMessageAppend(`
|
||||
You are embedded on a documentation website about CSS frameworks.
|
||||
- Help users understand CSS concepts and provide examples
|
||||
- Reference the current page content when answering
|
||||
- Suggest best practices for responsive design
|
||||
`);
|
||||
</script></code></pre>
|
||||
|
||||
<p>The custom text is appended to the base Hermes system message, allowing you to:</p>
|
||||
<ul>
|
||||
<li>Add domain-specific knowledge</li>
|
||||
<li>Provide context about your website/application</li>
|
||||
<li>Set specific behavioral guidelines</li>
|
||||
<li>Include relevant instructions without losing core functionality</li>
|
||||
</ul>
|
||||
|
||||
<h4>Class-Based Integration</h4>
|
||||
<p>Embed AI features directly into your HTML using CSS classes and data attributes:</p>
|
||||
|
||||
<p><strong>Full Interface:</strong> Complete AI chat with all features</p>
|
||||
<pre><code class="html"><div class="uncloseai" data-features="full"></div></code></pre>
|
||||
|
||||
<p><strong>Chat Only:</strong> Just the AI chat interface</p>
|
||||
<pre><code class="html"><div class="uncloseai" data-features="chat"></div></code></pre>
|
||||
|
||||
<p><strong>Specific Features:</strong> Choose which buttons to include</p>
|
||||
<pre><code class="html"><div class="uncloseai" data-features="tts,translate,read"></div>
|
||||
<div class="uncloseai" data-features="translate"></div>
|
||||
<div class="uncloseai" data-features="smart-translate"></div></code></pre>
|
||||
|
||||
<p><strong>Available Features:</strong> <code>chat</code>, <code>tts</code>, <code>translate</code>, <code>smart-translate</code>, <code>upload</code>, <code>read</code>, <code>full</code></p>
|
||||
|
||||
<h4>What You Get</h4>
|
||||
<h4>🎯 What You Get</h4>
|
||||
<ul>
|
||||
<li><strong>🤖 Floating AI Assistant</strong> - Always-accessible "uncloseai." button in bottom right</li>
|
||||
<li><strong>📖 Page-Aware</strong> - Hermes AI understands your page content and generates contextual introductions</li>
|
||||
<li><strong>📖 Page-Aware</strong> - Hermes AI understands your page content and provides contextual help</li>
|
||||
<li><strong>🔊 Text-to-Speech</strong> - Convert any text to speech with multiple voice options</li>
|
||||
<li><strong>💾 Conversation History</strong> - Persistent chat history with delete functionality in browser localstorage</li>
|
||||
<li><strong>🌐 Translation</strong> - Pixel perfect HTML DOM translation into 19 languages!</li>
|
||||
<li><strong>🎨 Framework Compatible</strong> - Works with PicoCSS, PureCSS, Bootstrap, and more</li>
|
||||
<li><strong>🌐 Translation</strong> - Translate content into 19 languages with formatting preservation</li>
|
||||
<li><strong>💾 Conversation History</strong> - Persistent chat history stored in browser</li>
|
||||
<li><strong>🎨 Framework Compatible</strong> - Works with any CSS framework</li>
|
||||
</ul>
|
||||
|
||||
<p><strong>Live Demo:</strong> <a href="https://ai.unturf.com/demo.html">Try uncloseai.js in action here</a> - see a page with various isolated features working on a real page!</p>
|
||||
<p><strong>🎮 Live Demo & Complete Documentation:</strong> <a href="https://ai.unturf.com/demo.html" style="font-weight: bold; color: #43a047;">See uncloseai.js in action with 12+ integration examples →</a></p>
|
||||
|
||||
<p>The demo page includes configuration options, embedded widgets, custom implementations, direct API usage, and more advanced features.</p>
|
||||
|
||||
<h3>Installing the OpenAI Client</h3>
|
||||
<h4>Python</h4>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue