Fix: Hermes modal conversation state and add system message customization
- Fix modal conversation persistence between sessions - Fix system messages appearing in DOM by filtering display - Add configurable system message with setSystemMessageAppend() - Reorganize demo.html with table of contents and code-example pattern - Add comprehensive documentation for system message customization - Make all code blocks open by default in demo page
This commit is contained in:
parent
d327d98f77
commit
7e5fa104ca
5 changed files with 246 additions and 62 deletions
252
demo.html
252
demo.html
|
|
@ -42,6 +42,21 @@
|
|||
</script>
|
||||
|
||||
<script src="https://uncloseai.com/uncloseai.js" type="module"></script>
|
||||
|
||||
<!-- Demo: System Message Customization -->
|
||||
<script type="module">
|
||||
import { setSystemMessageAppend } from './src/config.js';
|
||||
|
||||
setSystemMessageAppend(`
|
||||
Additional context for this demo page:
|
||||
- You're helping users explore and test AI features on ai.unturf.com
|
||||
- This is a demonstration page showing various AI capabilities
|
||||
- Encourage users to try different features like TTS, file uploads, and the Hermes chat
|
||||
- Be enthusiastic and helpful when explaining how the features work
|
||||
- If users ask about implementation, reference the code examples on this page
|
||||
`);
|
||||
</script>
|
||||
|
||||
<!--
|
||||
<script defer data-domain="ai.unturf.com" src="https://analytics.unturf.com/js/plausible.js"></script>
|
||||
-->
|
||||
|
|
@ -67,19 +82,51 @@
|
|||
<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 -->
|
||||
<!-- Table of Contents -->
|
||||
<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>
|
||||
<h3>📋 Table of Contents</h3>
|
||||
<nav>
|
||||
<ol>
|
||||
<li><a href="#basic-installation">Basic Installation</a></li>
|
||||
<li><a href="#configuration-options">Configuration Options</a></li>
|
||||
<li><a href="#system-message-customization">System Message Customization</a></li>
|
||||
<li><a href="#full-interface">Full AI Interface</a></li>
|
||||
<li><a href="#chat-only">Chat Interface Only</a></li>
|
||||
<li><a href="#feature-buttons">Feature Buttons Only</a></li>
|
||||
<li><a href="#tts-only">Text-to-Speech Only</a></li>
|
||||
<li><a href="#direct-api">Direct API Usage</a></li>
|
||||
<li><a href="#custom-examples">Custom API Examples</a></li>
|
||||
</ol>
|
||||
</nav>
|
||||
</section>
|
||||
|
||||
<!-- 1. Basic Installation -->
|
||||
<section id="basic-installation">
|
||||
<h3>1. 📦 Basic Installation</h3>
|
||||
<p>The simplest way to add AI features to your website:</p>
|
||||
<h4>📄 Code Example</h4>
|
||||
<details open>
|
||||
<summary><strong>Installation Code</strong></summary>
|
||||
<p>Add this single line to your HTML to get a floating AI button:</p>
|
||||
<pre><code class="html"><script src="https://uncloseai.com/uncloseai.js" type="module"></script></code></pre>
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary><strong>Configuration Options</strong></summary>
|
||||
<h4>🎯 Live Example</h4>
|
||||
<p>This page demonstrates the basic installation - notice the floating AI button in the bottom right corner!</p>
|
||||
<div style="border: 2px dashed #43a047; padding: 20px; margin: 15px 0; border-radius: 8px; background: rgba(67, 160, 71, 0.05);">
|
||||
<p><strong>✅ Active Demo:</strong> The floating Hermes button on this page is created by the basic installation code above.</p>
|
||||
<p>Try clicking the floating button to test the AI chat functionality!</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 2. Configuration Options -->
|
||||
<section id="configuration-options">
|
||||
<h3>2. ⚙️ Configuration Options</h3>
|
||||
<p>Customize the behavior before loading the script:</p>
|
||||
|
||||
<h4>📄 Code Example</h4>
|
||||
<details open>
|
||||
<summary><strong>Configuration Code</strong></summary>
|
||||
<p>Customize the behavior before loading the script:</p>
|
||||
<pre><code class="html"><script>
|
||||
// Disable custom styling (use your CSS framework)
|
||||
|
|
@ -91,22 +138,135 @@
|
|||
<script src="https://uncloseai.com/uncloseai.js" type="module"></script></code></pre>
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary><strong>Class-Based Integration</strong></summary>
|
||||
<p>Embed AI features directly into your HTML:</p>
|
||||
<pre><code class="html"><!-- Full interface with all features -->
|
||||
<div class="uncloseai" data-features="full"></div>
|
||||
<h4>🎯 Live Example</h4>
|
||||
<p>This page uses these configuration options:</p>
|
||||
<div style="border: 2px dashed #43a047; padding: 20px; margin: 15px 0; border-radius: 8px; background: rgba(67, 160, 71, 0.05);">
|
||||
<p><strong>✅ Active Demo:</strong> This page has:</p>
|
||||
<ul>
|
||||
<li><code>UNCLOSEAI_CUSTOM_STYLING = false</code> - Uses PicoCSS styling instead</li>
|
||||
<li><code>UNCLOSEAI_FLOATING_BUTTON = false</code> - Floating button disabled for embedded examples</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Chat interface only -->
|
||||
<div class="uncloseai" data-features="chat"></div>
|
||||
|
||||
<!-- Specific features -->
|
||||
<div class="uncloseai" data-features="tts,upload,read"></div>
|
||||
<div class="uncloseai" data-features="tts"></div></code></pre>
|
||||
<!-- 3. System Message Customization -->
|
||||
<section id="system-message-customization">
|
||||
<h3>3. 💬 System Message Customization</h3>
|
||||
<p>Customize the AI's behavior by appending additional instructions:</p>
|
||||
|
||||
<h4>📄 Code Example</h4>
|
||||
<details open>
|
||||
<summary><strong>System Message Customization Code</strong></summary>
|
||||
<p>Customize the AI's behavior by appending instructions:</p>
|
||||
<pre><code class="html"><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></code></pre>
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary><strong>Direct API Usage</strong></summary>
|
||||
<h4>🎯 Live Example</h4>
|
||||
<p>This page uses custom system message instructions:</p>
|
||||
<div style="border: 2px dashed #43a047; padding: 20px; margin: 15px 0; border-radius: 8px; background: rgba(67, 160, 71, 0.05);">
|
||||
<p><strong>✅ Active Demo:</strong> The AI on this page has been customized to:</p>
|
||||
<ul>
|
||||
<li>Help users explore and test AI features</li>
|
||||
<li>Provide clear, helpful examples</li>
|
||||
<li>Be encouraging about trying different features</li>
|
||||
</ul>
|
||||
<p>Try asking the AI about the features on this page to see the customization in action!</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 4. Full AI Interface -->
|
||||
<section id="full-interface">
|
||||
<h3>4. 🤖 Full AI Interface</h3>
|
||||
<p>Complete AI chat with all features enabled:</p>
|
||||
|
||||
<h4>📄 Code Example</h4>
|
||||
<details open>
|
||||
<summary><strong>Full Interface Code</strong></summary>
|
||||
<p>Embed a complete AI interface with all features:</p>
|
||||
<pre><code class="html"><div class="uncloseai" data-features="full"></div></code></pre>
|
||||
</details>
|
||||
|
||||
<h4>🎯 Live Example</h4>
|
||||
<p>Try the full AI interface 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="full" id="demo-full"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 5. Chat Interface Only -->
|
||||
<section id="chat-only">
|
||||
<h3>5. 💬 Chat Interface Only</h3>
|
||||
<p>Pure chat interface without extra buttons:</p>
|
||||
|
||||
<h4>📄 Code Example</h4>
|
||||
<details open>
|
||||
<summary><strong>Chat Only Code</strong></summary>
|
||||
<p>Embed just the chat interface:</p>
|
||||
<pre><code class="html"><div class="uncloseai" data-features="chat"></div></code></pre>
|
||||
</details>
|
||||
|
||||
<h4>🎯 Live Example</h4>
|
||||
<p>Try the chat-only interface 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="chat" id="demo-chat"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 6. Feature Buttons Only -->
|
||||
<section id="feature-buttons">
|
||||
<h3>6. 🔧 Feature Buttons Only</h3>
|
||||
<p>TTS, Upload, and Read buttons without chat:</p>
|
||||
|
||||
<h4>📄 Code Example</h4>
|
||||
<details open>
|
||||
<summary><strong>Feature Buttons Code</strong></summary>
|
||||
<p>Embed specific feature buttons:</p>
|
||||
<pre><code class="html"><div class="uncloseai" data-features="tts,upload,read"></div></code></pre>
|
||||
</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,upload,read" id="demo-buttons"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 7. Text-to-Speech Only -->
|
||||
<section id="tts-only">
|
||||
<h3>7. 🔊 Text-to-Speech Only</h3>
|
||||
<p>Just the TTS functionality:</p>
|
||||
|
||||
<h4>📄 Code Example</h4>
|
||||
<details open>
|
||||
<summary><strong>TTS Only Code</strong></summary>
|
||||
<p>Embed just the text-to-speech button:</p>
|
||||
<pre><code class="html"><div class="uncloseai" data-features="tts"></div></code></pre>
|
||||
</details>
|
||||
|
||||
<h4>🎯 Live Example</h4>
|
||||
<p>Try the TTS-only interface 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" id="demo-tts"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 8. Direct API Usage -->
|
||||
<section id="direct-api">
|
||||
<h3>8. 🛠️ Direct API Usage</h3>
|
||||
<p>Call uncloseai.js functions from your own JavaScript:</p>
|
||||
|
||||
<h4>📄 Code Example</h4>
|
||||
<details open>
|
||||
<summary><strong>Direct API Code</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')) {
|
||||
|
|
@ -124,46 +284,22 @@ console.log(response);
|
|||
// Read page content with AI
|
||||
await readPageWithHermes();</code></pre>
|
||||
</details>
|
||||
|
||||
<h4>🎯 Live Example</h4>
|
||||
<p>The custom API examples below demonstrate direct API usage:</p>
|
||||
</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>
|
||||
<!-- 9. Custom API Examples -->
|
||||
<section id="custom-examples">
|
||||
<h3>9. 🎨 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: 1px solid #ddd; padding: 20px; border-radius: 8px;">
|
||||
<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>
|
||||
|
|
@ -172,7 +308,7 @@ await readPageWithHermes();</code></pre>
|
|||
</div>
|
||||
|
||||
<!-- Custom TTS Example -->
|
||||
<div style="border: 1px solid #ddd; padding: 20px; border-radius: 8px;">
|
||||
<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>
|
||||
|
|
@ -189,7 +325,7 @@ await readPageWithHermes();</code></pre>
|
|||
</div>
|
||||
|
||||
<!-- Custom File Upload Example -->
|
||||
<div style="border: 1px solid #ddd; padding: 20px; border-radius: 8px;">
|
||||
<div style="border: 2px dashed #43a047; padding: 20px; border-radius: 8px; background: rgba(67, 160, 71, 0.05);">
|
||||
<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;">
|
||||
|
|
@ -198,7 +334,7 @@ await readPageWithHermes();</code></pre>
|
|||
</div>
|
||||
|
||||
<!-- Page Analysis Example -->
|
||||
<div style="border: 1px solid #ddd; padding: 20px; border-radius: 8px;">
|
||||
<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;">
|
||||
|
|
|
|||
22
index.html
22
index.html
|
|
@ -93,6 +93,28 @@
|
|||
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>
|
||||
|
||||
|
|
|
|||
|
|
@ -5,6 +5,22 @@ export const MEGAPARCE_API_URL = "https://megaparce.ai.unturf.com/v1/file";
|
|||
export const API_KEY = "dummy-api-key";
|
||||
export const MODEL = "adamo1139/Hermes-3-Llama-3.1-8B-FP8-Dynamic"; // default model (always available)
|
||||
|
||||
// System message configuration - implementors can customize this
|
||||
export const SYSTEM_MESSAGE_BASE = "You are Hermes, a large language model from Nous Research, embedded as an AI assistant on this webpage. Your primary task is to help users understand and interact with the content of this specific page, while also being capable of assisting with any other topics, coding, creative tasks, or questions they may have. You should be conversational, helpful, and knowledgeable about the webpage content as well as general topics. Always strive to provide accurate, useful responses.";
|
||||
|
||||
// Optional additional system message content - can be set by implementor
|
||||
export let SYSTEM_MESSAGE_APPEND = "";
|
||||
|
||||
// Function to set additional system message content
|
||||
export function setSystemMessageAppend(appendText) {
|
||||
SYSTEM_MESSAGE_APPEND = appendText;
|
||||
}
|
||||
|
||||
// Function to get the complete system message
|
||||
export function getSystemMessage() {
|
||||
return SYSTEM_MESSAGE_APPEND ? `${SYSTEM_MESSAGE_BASE}\n\n${SYSTEM_MESSAGE_APPEND}` : SYSTEM_MESSAGE_BASE;
|
||||
}
|
||||
|
||||
// Dynamic Endpoints Configuration for Chat API
|
||||
export const VLLM_ENDPOINTS = [
|
||||
{ id: 'hermes.ai.unturf.com', url: 'https://hermes.ai.unturf.com/v1' },
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
// Conversation history and localStorage functionality
|
||||
import { getSystemMessage } from './config.js';
|
||||
|
||||
// Helper function to generate a page-specific key for localStorage
|
||||
export function getPageSpecificKey(baseKey) {
|
||||
|
|
@ -32,7 +33,7 @@ export function clearConversationHistory() {
|
|||
return [
|
||||
{
|
||||
role: "system",
|
||||
content: "You are Hermes, a large language model from Nous Research, embedded as an AI assistant on this webpage. Your primary task is to help users understand and interact with the content of this specific page, while also being capable of assisting with any other topics, coding, creative tasks, or questions they may have. You should be conversational, helpful, and knowledgeable about the webpage content as well as general topics. Always strive to provide accurate, useful responses."
|
||||
content: getSystemMessage()
|
||||
}
|
||||
];
|
||||
}
|
||||
|
|
@ -42,7 +43,7 @@ export function initializeChatHistory() {
|
|||
return [
|
||||
{
|
||||
role: "system",
|
||||
content: "You are Hermes, a large language model from Nous Research, embedded as an AI assistant on this webpage. Your primary task is to help users understand and interact with the content of this specific page, while also being capable of assisting with any other topics, coding, creative tasks, or questions they may have. You should be conversational, helpful, and knowledgeable about the webpage content as well as general topics. Always strive to provide accurate, useful responses."
|
||||
content: getSystemMessage()
|
||||
},
|
||||
...loadConversationHistory()
|
||||
];
|
||||
|
|
|
|||
13
src/ui.js
13
src/ui.js
|
|
@ -842,7 +842,9 @@ export async function openHermesModal() {
|
|||
function restoreConversationHistory() {
|
||||
const history = loadConversationHistory();
|
||||
chatBox.innerHTML = '';
|
||||
history.forEach((msg, index) => {
|
||||
// Filter out system messages before displaying
|
||||
const displayHistory = history.filter(msg => msg.role !== 'system');
|
||||
displayHistory.forEach((msg, index) => {
|
||||
const messageDiv = document.createElement('div');
|
||||
messageDiv.style.cssText = 'position: relative; margin-bottom: 10px; padding: 5px; border-radius: 5px; background: rgba(0,0,0,0.05);';
|
||||
|
||||
|
|
@ -857,10 +859,11 @@ export async function openHermesModal() {
|
|||
savedHistory.splice(messageIndex, 1);
|
||||
localStorage.setItem(getPageSpecificKey('hermes-conversation-history'), JSON.stringify(savedHistory));
|
||||
// Update global chat history
|
||||
const { getSystemMessage } = await import('./config.js');
|
||||
chatHistory = [
|
||||
{
|
||||
role: "system",
|
||||
content: "You are Hermes, a large language model from Nous Research, embedded as an AI assistant on this webpage. Your primary task is to help users understand and interact with the content of this specific page, while also being capable of assisting with any other topics, coding, creative tasks, or questions they may have. You should be conversational, helpful, and knowledgeable about the webpage content as well as general topics. Always strive to provide accurate, useful responses."
|
||||
content: getSystemMessage()
|
||||
},
|
||||
...savedHistory
|
||||
];
|
||||
|
|
@ -1160,6 +1163,12 @@ Format: Start with "Greetings! I'm Hermes..." and make it sound natural and enga
|
|||
chatBox.scrollTop = chatBox.scrollHeight;
|
||||
}
|
||||
|
||||
// Add AI response to chat history and save
|
||||
const { getChatHistory } = await import('./chat.js');
|
||||
const currentHistory = getChatHistory();
|
||||
currentHistory.push({ role: "assistant", content: response });
|
||||
saveConversationHistory(currentHistory);
|
||||
|
||||
// Add delete button and TTS button to messages
|
||||
[userDiv, aiDiv].forEach((div, index) => {
|
||||
const deleteBtn = document.createElement('button');
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue