From 2fed53f74ba50dbb1ed7a379d47cb3988a1f4b62 Mon Sep 17 00:00:00 2001 From: Russell Ballestrini Date: Mon, 30 Jun 2025 20:07:14 -0400 Subject: [PATCH] Enhance demo page with comprehensive isolated examples and integration snippets --- demo.html | 310 +++++++++++++++++++++++++++++++++++++++++------------- 1 file changed, 239 insertions(+), 71 deletions(-) diff --git a/demo.html b/demo.html index ab2b3a7..589f898 100644 --- a/demo.html +++ b/demo.html @@ -64,93 +64,215 @@
-

Demo!

+

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.

-

Class-Based Integration Examples

-

You can now embed AI features directly into your HTML using CSS classes and data attributes:

- -

Full AI Interface

-

Add a complete AI chat interface with all features:

-
- -

Custom Feature Selection

-

Choose specific features you want:

- -
Chat Only
-
- -
Buttons Only (TTS + Upload + Read)
-
- -
TTS Only
-
+ +
+

πŸ“ Integration Code Examples

+

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

+ +
+ Basic Installation +

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 +

Customize the behavior before loading the script:

+ 
<script>
+    // Disable custom styling (use your CSS framework)
+    window.UNCLOSEAI_CUSTOM_STYLING = false;
+    
+    // Disable floating button (API functions only)
+    window.UNCLOSEAI_FLOATING_BUTTON = false;
+</script>
+<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>
 
-        
Individual Function Examples

-        
You can also call uncloseai.js functions directly from your own buttons and interfaces:

-        
-        
Direct AI Chat

-        
-        
-        
-        
Text-to-Speech

-        
-        
-        

-        
-        
Page Reading

-        
-        
-        
File Upload (if you have files)

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

Call uncloseai.js functions from your own JavaScript:

+ 
// Send a message to AI
+for await (const chunk of sendMessage('Your question here')) {
+    console.log(chunk);
+}
+
+// Convert text to speech
+const result = await speakText('Hello world', 'alloy', 0.9);
+document.body.appendChild(result.audio);
+
+// Upload and analyze files
+const response = await uploadFile(fileInput.files[0]);
+console.log(response);
+
+// Read page content with AI
+await readPageWithHermes();
+
+
+ + +
+

🎯 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

+

Build your own interface using uncloseai.js functions:

+ +
+ +
+
πŸ’¬ Custom AI Chat
+

Your own chat interface:

+
+ + +
+ + +
+
πŸ”Š Custom Text-to-Speech
+

Your own TTS interface:

+ + + +
+
+ + +
+
πŸ“ Custom File Analysis
+

Your own file upload interface:

+ + + +
+ + +
+
πŸ“– Custom Page Analysis
+

Analyze page content with custom prompts:

+ + + +
+
+