engineering/uncloseai.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Enhance demo page with comprehensive isolated examples and integration snippets

Browse source
This commit is contained in:
Russell Ballestrini 2025-06-30 20:07:14 -04:00
parent 7a6996bc30
commit 2fed53f74b
1 changed files with 239 additions and 71 deletions
Download patch file Download diff file Expand all files Collapse all files

310
demo.html
View file

@ -64,93 +64,215 @@
</header>
<main>
<h2>Demo!</h2>
<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>
<h3>Class-Based Integration Examples</h3>
<p>You can now embed AI features directly into your HTML using CSS classes and data attributes:</p>
<h4>Full AI Interface</h4>
<p>Add a complete AI chat interface with all features:</p>
<div class="uncloseai" data-features="full"></div>
<h4>Custom Feature Selection</h4>
<p>Choose specific features you want:</p>
<h5>Chat Only</h5>
<div class="uncloseai" data-features="chat"></div>
<h5>Buttons Only (TTS + Upload + Read)</h5>
<div class="uncloseai" data-features="tts,upload,read"></div>
<h5>TTS Only</h5>
<div class="uncloseai" data-features="tts"></div>
<!-- Integration Code Examples -->
<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>
<p>Add this single line to your HTML to get a floating AI button:</p>
<pre><code class="html">&lt;script src="https://uncloseai.com/uncloseai.js" type="module"&gt;&lt;/script&gt;</code></pre>
</details>
<details>
<summary><strong>Configuration Options</strong></summary>
<p>Customize the behavior before loading the script:</p>
<pre><code class="html">&lt;script&gt;
// Disable custom styling (use your CSS framework)
window.UNCLOSEAI_CUSTOM_STYLING = false;
// Disable floating button (API functions only)
window.UNCLOSEAI_FLOATING_BUTTON = false;
&lt;/script&gt;
&lt;script src="https://uncloseai.com/uncloseai.js" type="module"&gt;&lt;/script&gt;</code></pre>
</details>
<details>
<summary><strong>Class-Based Integration</strong></summary>
<p>Embed AI features directly into your HTML:</p>
<pre><code class="html">&lt;!-- Full interface with all features --&gt;
&lt;div class="uncloseai" data-features="full"&gt;&lt;/div&gt;
<h3>Individual Function Examples</h3>
<p>You can also call uncloseai.js functions directly from your own buttons and interfaces:</p>
<h4>Direct AI Chat</h4>
<button onclick="directChatExample()">💬 Ask AI about this page</button>
<div id="direct-chat-result" style="margin: 10px 0; padding: 10px; background: rgba(0,0,0,0.05); border-radius: 5px; display: none;"></div>
<h4>Text-to-Speech</h4>
<textarea id="tts-text" placeholder="Enter text to convert to speech..." style="width: 100%; height: 80px; margin: 5px 0;"></textarea>
<button onclick="directTTSExample()">🔊 Convert to Speech</button>
<div id="tts-result" style="margin: 10px 0;"></div>
<h4>Page Reading</h4>
<button onclick="readPageWithHermes()">📖 Read this page with AI</button>
<h4>File Upload (if you have files)</h4>
<input type="file" id="demo-file-input" style="margin: 5px 0;">
<button onclick="directFileExample()">📁 Upload & Analyze File</button>
<div id="file-result" style="margin: 10px 0; padding: 10px; background: rgba(0,0,0,0.05); border-radius: 5px; display: none;"></div>
&lt;!-- Chat interface only --&gt;
&lt;div class="uncloseai" data-features="chat"&gt;&lt;/div&gt;
&lt;!-- Specific features --&gt;
&lt;div class="uncloseai" data-features="tts,upload,read"&gt;&lt;/div&gt;
&lt;div class="uncloseai" data-features="tts"&gt;&lt;/div&gt;</code></pre>
</details>
<details>
<summary><strong>Direct API Usage</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')) {
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();</code></pre>
</details>
</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>
<p>Build your own interface using uncloseai.js functions:</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;">
<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: 1px solid #ddd; padding: 20px; border-radius: 8px;">
<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 -->
<div style="border: 1px solid #ddd; padding: 20px; border-radius: 8px;">
<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;">
<button onclick="customFileExample()" style="width: 100%;">Analyze File</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: 1px solid #ddd; padding: 20px; border-radius: 8px;">
<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>
</div>
</section>
<script>
// Example functions showing direct API usage
async function directChatExample() {
const resultDiv = document.getElementById('direct-chat-result');
resultDiv.style.display = 'block';
resultDiv.innerHTML = '<em>AI is thinking...</em>';
// Custom chat implementation with isolated state
async function customChatExample() {
const input = document.getElementById('custom-chat-input');
const display = document.getElementById('custom-chat-display');
const message = input.value.trim();
if (!message) return;
// Add user message
display.innerHTML += `<div style="margin: 5px 0; padding: 5px; background: #e3f2fd; border-radius: 3px;"><strong>You:</strong> ${message}</div>`;
input.value = '';
// Add AI thinking indicator
const thinkingDiv = document.createElement('div');
thinkingDiv.style.cssText = 'margin: 5px 0; padding: 5px; background: #f5f5f5; border-radius: 3px;';
thinkingDiv.innerHTML = '<strong>Hermes:</strong> <em>thinking...</em>';
display.appendChild(thinkingDiv);
display.scrollTop = display.scrollHeight;
try {
let response = '';
for await (const chunk of sendMessage('Tell me the main purpose of this page in 2 sentences')) {
for await (const chunk of sendMessage(message)) {
response += chunk;
resultDiv.innerHTML = `<strong>AI Response:</strong> ${response}`;
thinkingDiv.innerHTML = `<strong>Hermes:</strong> ${response}`;
display.scrollTop = display.scrollHeight;
}
} catch (error) {
resultDiv.innerHTML = '<strong>Error:</strong> Could not get AI response. ' + error.message;
thinkingDiv.innerHTML = `<strong>Error:</strong> ${error.message}`;
}
}
async function directTTSExample() {
const text = document.getElementById('tts-text').value.trim();
const resultDiv = document.getElementById('tts-result');
// Custom TTS with voice selection
async function customTTSExample() {
const text = document.getElementById('custom-tts-text').value.trim();
const voice = document.getElementById('voice-select').value;
const resultDiv = document.getElementById('custom-tts-result');
if (!text) {
alert('Please enter some text first!');
return;
}
resultDiv.innerHTML = '<em>Converting to speech...</em>';
resultDiv.innerHTML = '<em>Generating speech...</em>';
try {
const result = await speakText(text, 'alloy', 0.9);
const result = await speakText(text, voice, 1.0);
resultDiv.innerHTML = `
<button onclick="this.previousElementSibling.play()" style="margin: 5px;">▶️ Play</button>
<button onclick="this.previousElementSibling.previousElementSibling.pause()" style="margin: 5px;">⏸️ Pause</button>
<button onclick="downloadAudio()" style="margin: 5px;">💾 Download</button>
<div style="margin: 10px 0;">
<button onclick="this.parentElement.previousElementSibling.play()" style="margin: 2px;">▶️ Play</button>
<button onclick="this.parentElement.previousElementSibling.pause()" style="margin: 2px;">⏸️ Pause</button>
<button onclick="downloadCustomAudio()" style="margin: 2px;">💾 Download</button>
</div>
`;
resultDiv.insertBefore(result.audio, resultDiv.firstChild);
window.currentAudioBlob = result.blob; // Store for download
window.customAudioBlob = result.blob;
} catch (error) {
resultDiv.innerHTML = '<strong>Error:</strong> Could not convert to speech. ' + error.message;
resultDiv.innerHTML = `<strong>Error:</strong> ${error.message}`;
}
}
async function directFileExample() {
const fileInput = document.getElementById('demo-file-input');
const resultDiv = document.getElementById('file-result');
// Custom file upload with isolated state
async function customFileExample() {
const fileInput = document.getElementById('custom-file-input');
const resultDiv = document.getElementById('custom-file-result');
if (!fileInput.files[0]) {
alert('Please select a file first!');
@ -158,29 +280,75 @@
}
resultDiv.style.display = 'block';
resultDiv.innerHTML = '<em>Uploading and analyzing file...</em>';
resultDiv.innerHTML = '<em>Analyzing file...</em>';
try {
showProgressIndicator('Processing file...');
const response = await uploadFile(fileInput.files[0]);
hideProgressIndicator();
resultDiv.innerHTML = `<strong>File Analysis:</strong><br>${response}`;
fileInput.value = ''; // Clear the input
resultDiv.innerHTML = `<strong>Analysis Result:</strong><br><div style="white-space: pre-wrap;">${response}</div>`;
fileInput.value = '';
} catch (error) {
hideProgressIndicator();
resultDiv.innerHTML = '<strong>Error:</strong> Could not process file. ' + error.message;
resultDiv.innerHTML = `<strong>Error:</strong> ${error.message}`;
}
}
function downloadAudio() {
if (window.currentAudioBlob) {
// Custom page analysis with user prompt
async function customPageAnalysis() {
const promptInput = document.getElementById('page-analysis-prompt');
const resultDiv = document.getElementById('page-analysis-result');
const prompt = promptInput.value.trim();
if (!prompt) {
alert('Please enter a question about this page!');
return;
}
resultDiv.style.display = 'block';
resultDiv.innerHTML = '<em>Analyzing page...</em>';
try {
const pageContent = document.body.innerText.substring(0, 3000);
const fullPrompt = `Based on this page content: "${pageContent}"\n\nUser question: ${prompt}`;
let response = '';
for await (const chunk of sendMessage(fullPrompt)) {
response += chunk;
resultDiv.innerHTML = `<strong>Analysis:</strong><br><div style="white-space: pre-wrap;">${response}</div>`;
}
} catch (error) {
resultDiv.innerHTML = `<strong>Error:</strong> ${error.message}`;
}
}
// Utility functions
function downloadCustomAudio() {
if (window.customAudioBlob) {
const a = document.createElement('a');
a.href = URL.createObjectURL(window.currentAudioBlob);
a.download = `tts-audio-${Date.now()}.mp3`;
a.href = URL.createObjectURL(window.customAudioBlob);
a.download = `custom-tts-${Date.now()}.mp3`;
a.click();
}
}
// Add Enter key support for chat input
document.addEventListener('DOMContentLoaded', function() {
const chatInput = document.getElementById('custom-chat-input');
if (chatInput) {
chatInput.addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
customChatExample();
}
});
}
const pageInput = document.getElementById('page-analysis-prompt');
if (pageInput) {
pageInput.addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
customPageAnalysis();
}
});
}
});
</script>
</main>