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.
- +Copy these code snippets to add AI features to your website:
- -The simplest way to add AI features to your website:
+Add this single line to your HTML to get a floating AI button:
<script src="https://uncloseai.com/uncloseai.js" type="module"></script>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!
+Customize the behavior before loading the script:
+ +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>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 insteadUNCLOSEAI_FLOATING_BUTTON = false - Floating button disabled for embedded examples
+
+ Customize the AI's behavior by appending additional instructions:
+ +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>This page uses custom system message instructions:
+✅ Active Demo: The AI on this page has been customized to:
+Try asking the AI about the features on this page to see the customization in action!
+Complete AI chat with all features enabled:
+ +Embed a complete AI interface with all features:
+<div class="uncloseai" data-features="full"></div>Try the full AI interface below:
+Pure chat interface without extra buttons:
+ +Embed just the chat interface:
+<div class="uncloseai" data-features="chat"></div>Try the chat-only interface below:
+Just the TTS functionality:
+ +Embed just the text-to-speech button:
+<div class="uncloseai" data-features="tts"></div>Try the TTS-only interface below:
+Call uncloseai.js functions from your own JavaScript:
+ +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();The custom API examples below demonstrate direct API usage:
Try each integration method below. All examples work independently:
- -Complete AI chat with all features enabled:
-Pure chat interface without extra buttons:
-TTS, Upload, and Read buttons without chat:
-Just the TTS functionality:
-Build your own interface using uncloseai.js functions:
+Try these custom implementations built with the Direct API:
+Your own chat interface:
@@ -172,7 +308,7 @@ await readPageWithHermes();Your own TTS interface:
@@ -189,7 +325,7 @@ await readPageWithHermes();Your own file upload interface:
@@ -198,7 +334,7 @@ await readPageWithHermes();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> +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:
+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');