From 7e5fa104ca02d0011568c60fea2a23295864f030 Mon Sep 17 00:00:00 2001 From: Russell Ballestrini Date: Tue, 1 Jul 2025 10:07:12 -0400 Subject: [PATCH] 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 --- demo.html | 252 +++++++++++++++++++++++++++++++++++++------------ index.html | 22 +++++ src/config.js | 16 ++++ src/storage.js | 5 +- src/ui.js | 13 ++- 5 files changed, 246 insertions(+), 62 deletions(-) diff --git a/demo.html b/demo.html index 589f898..f2632ca 100644 --- a/demo.html +++ b/demo.html @@ -42,6 +42,21 @@ + + + + @@ -67,19 +82,51 @@

Hermes AI Integration Demo

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.

- +
-

📝 Integration Code Examples

-

Copy these code snippets to add AI features to your website:

- -
- Basic Installation +

📋 Table of Contents

+ +
+ + +
+

1. 📦 Basic Installation

+

The simplest way to add AI features to your website:

+

📄 Code Example

+
+ Installation Code

Add this single line to your HTML to get a floating AI button:

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

🎯 Live Example

+

This page demonstrates the basic installation - notice the floating AI button in the bottom right corner!

+
+

✅ Active Demo: The floating Hermes button on this page is created by the basic installation code above.

+

Try clicking the floating button to test the AI chat functionality!

+
+
+ + +
+

2. ⚙️ Configuration Options

+

Customize the behavior before loading the script:

+ +

📄 Code Example

+
+ Configuration Code

Customize the behavior before loading the script:

<script>
     // Disable custom styling (use your CSS framework)
@@ -91,22 +138,135 @@
 <script src="https://uncloseai.com/uncloseai.js" type="module"></script>
-
- Class-Based Integration -

Embed AI features directly into your HTML:

- 
<!-- Full interface with all features -->
-<div class="uncloseai" data-features="full"></div>
+            
🎯 Live Example

+            
This page uses these configuration options:

+            

+                
✅ Active Demo: This page has:

+                
    
+                    
  • UNCLOSEAI_CUSTOM_STYLING = false - Uses PicoCSS styling instead
    • 
+                    
  • UNCLOSEAI_FLOATING_BUTTON = false - Floating button disabled for embedded examples
    • 
+                

+            

+
-<!-- 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> + +
+

3. 💬 System Message Customization

+

Customize the AI's behavior by appending additional instructions:

+ +

📄 Code Example

+
+ System Message Customization Code +

Customize the AI's behavior by appending instructions:

+ 
<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>
-
- Direct API Usage +

🎯 Live Example

+

This page uses custom system message instructions:

+
+

✅ Active Demo: The AI on this page has been customized to:

+
    +
  • Help users explore and test AI features
    • +
  • Provide clear, helpful examples
    • +
  • Be encouraging about trying different features
    • +
+

Try asking the AI about the features on this page to see the customization in action!

+
+
+ + +
+

4. 🤖 Full AI Interface

+

Complete AI chat with all features enabled:

+ +

📄 Code Example

+
+ Full Interface Code +

Embed a complete AI interface with all features:

+ 
<div class="uncloseai" data-features="full"></div>
+
+ +

🎯 Live Example

+

Try the full AI interface below:

+
+
+
+
+ + +
+

5. 💬 Chat Interface Only

+

Pure chat interface without extra buttons:

+ +

📄 Code Example

+
+ Chat Only Code +

Embed just the chat interface:

+ 
<div class="uncloseai" data-features="chat"></div>
+
+ +

🎯 Live Example

+

Try the chat-only interface below:

+
+
+
+
+ + +
+

6. 🔧 Feature Buttons Only

+

TTS, Upload, and Read buttons without chat:

+ +

📄 Code Example

+
+ Feature Buttons Code +

Embed specific feature buttons:

+ 
<div class="uncloseai" data-features="tts,upload,read"></div>
+
+ +

🎯 Live Example

+

Try the feature buttons below:

+
+
+
+
+ + +
+

7. 🔊 Text-to-Speech Only

+

Just the TTS functionality:

+ +

📄 Code Example

+
+ TTS Only Code +

Embed just the text-to-speech button:

+ 
<div class="uncloseai" data-features="tts"></div>
+
+ +

🎯 Live Example

+

Try the TTS-only interface below:

+
+
+
+
+ + +
+

8. 🛠️ Direct API Usage

+

Call uncloseai.js functions from your own JavaScript:

+ +

📄 Code Example

+
+ Direct API Code

Call uncloseai.js functions from your own 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();
+ +

🎯 Live Example

+

The custom API examples below demonstrate direct API usage:

- -
-

🎯 Live Demonstrations

-

Try each integration method below. All examples work independently:

- -

1. Full AI Interface

-

Complete AI chat with all features enabled:

-
-
-
- -

2. Chat Interface Only

-

Pure chat interface without extra buttons:

-
-
-
- -

3. Feature Buttons Only

-

TTS, Upload, and Read buttons without chat:

-
-
-
- -

4. Text-to-Speech Only

-

Just the TTS functionality:

-
-
-
-
- - -
-

🔧 Custom API Integration Examples

+ +
+

9. 🎨 Custom API Examples

Build your own interface using uncloseai.js functions:

+

🎯 Live Examples

+

Try these custom implementations built with the Direct API:

+
-
+
💬 Custom AI Chat

Your own chat interface:

@@ -172,7 +308,7 @@ await readPageWithHermes();
-
+
🔊 Custom Text-to-Speech

Your own TTS interface:

@@ -189,7 +325,7 @@ await readPageWithHermes();
-
+
📁 Custom File Analysis

Your own file upload interface:

@@ -198,7 +334,7 @@ await readPageWithHermes();
-
+
📖 Custom Page Analysis

Analyze page content with custom prompts:

diff --git a/index.html b/index.html index 3aa2a93..93b80f0 100644 --- a/index.html +++ b/index.html @@ -93,6 +93,28 @@ window.UNCLOSEAI_FLOATING_BUTTON = false; </script> +

System Message Customization

+

Customize the AI's behavior by appending additional instructions to the system message:

+ 
<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>
+ +

The custom text is appended to the base Hermes system message, allowing you to:

+
    +
  • Add domain-specific knowledge
    • +
  • Provide context about your website/application
    • +
  • Set specific behavioral guidelines
    • +
  • Include relevant instructions without losing core functionality
    • +
+

Class-Based Integration

Embed AI features directly into your HTML using CSS classes and data attributes:

diff --git a/src/config.js b/src/config.js index a720587..d667b29 100644 --- a/src/config.js +++ b/src/config.js @@ -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' }, diff --git a/src/storage.js b/src/storage.js index fd709ff..3489c50 100644 --- a/src/storage.js +++ b/src/storage.js @@ -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() ]; diff --git a/src/ui.js b/src/ui.js index 40079c6..d4b823e 100644 --- a/src/ui.js +++ b/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');