260 lines
12 KiB
HTML
260 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="theme-color" content="#43a047">
|
|
<meta name="color-scheme" content="light dark">
|
|
<title>uncloseai.js - Client-Side AI | uncloseai.com</title>
|
|
|
|
<!-- PicoCSS -->
|
|
<link rel="stylesheet" href="/css/pico.classless.min.css">
|
|
<!-- ChunkFive Font -->
|
|
<link rel="stylesheet" href="/css/chunkfive/stylesheet.css" type="text/css" charset="utf-8" />
|
|
<!-- Sidebar Theme -->
|
|
<link rel="stylesheet" href="/css/sidebar-theme.css">
|
|
|
|
<!-- Highlight.js for syntax highlighting -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/styles/a11y-dark.min.css" />
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js"></script>
|
|
|
|
<!-- Theme Switcher Script -->
|
|
<script>
|
|
function switchTheme(theme) {
|
|
if (theme === "auto") {
|
|
document.documentElement.removeAttribute('data-theme');
|
|
} else {
|
|
document.documentElement.setAttribute('data-theme', theme);
|
|
}
|
|
}
|
|
|
|
// Disable custom styling for uncloseai.js - use PicoCSS instead
|
|
window.UNCLOSEAI_CUSTOM_STYLING = false;
|
|
</script>
|
|
|
|
<script src="https://uncloseai.com/uncloseai.js" type="module"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<!-- Mobile menu toggle -->
|
|
<button class="sidebar-toggle" onclick="document.querySelector('.sidebar').classList.toggle('open')">
|
|
☰
|
|
</button>
|
|
|
|
<!-- Left sidebar - Main Navigation -->
|
|
<aside class="sidebar">
|
|
<div class="table-of-contents">
|
|
|
|
<nav>
|
|
<ul>
|
|
<li><a href="/">Home</a></li>
|
|
<li><a href="/csharp-examples.html">C# Examples</a></li>
|
|
<li><a href="/dart-examples.html">Dart Examples</a></li>
|
|
<li><a href="/elixir-examples.html">Elixir Examples</a></li>
|
|
<li><a href="/go-examples.html">Go Examples</a></li>
|
|
<li><a href="/java-examples.html">Java Examples</a></li>
|
|
<li><a href="/kotlin-examples.html">Kotlin Examples</a></li>
|
|
<li><a href="/nodejs-examples.html">Node.js Examples</a></li>
|
|
<li><a href="/php-examples.html">PHP Examples</a></li>
|
|
<li><a href="/python-examples.html">Python Examples</a></li>
|
|
<li><a href="/ruby-examples.html">Ruby Examples</a></li>
|
|
<li><a href="/rust-examples.html">Rust Examples</a></li>
|
|
<li><a href="/swift-examples.html">Swift Examples</a></li>
|
|
<li><a href="/uncloseai-js.html" class="active">uncloseai.js Docs</a></li>
|
|
<li><a href="/inference.html">Inference Setup</a></li>
|
|
<li><a href="https://git.unturf.com/engineering/unturf/uncloseai.com/-/tree/master/languages" target="_blank">🔗 All Languages</a></li>
|
|
<li><a href="https://shop.unturf.com/p/8486f492-a93e-11f0-b477-02dfe05770ee/uncloseai-machine-learning-reference-guide-to-inference-clients" target="_blank">📚 Book</a></li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Main content -->
|
|
<main>
|
|
<header>
|
|
<hgroup>
|
|
<a href="https://uncloseai.com"><h1 class="unturf" style="font-family: 'ChunkFiveRegular';">uncloseai.</h1></a>
|
|
<p>uncloseai.js - Add AI to Any Website</p>
|
|
</hgroup>
|
|
<nav>
|
|
<ul>
|
|
<li><a href="#" onclick="switchTheme('auto')">Auto</a></li>
|
|
<li><a href="#" onclick="switchTheme('light')">Light</a></li>
|
|
<li><a href="#" onclick="switchTheme('dark')">Dark</a></li>
|
|
</ul>
|
|
</nav>
|
|
</header>
|
|
|
|
<h2 id="intro">uncloseai.js - Client-Side AI for Everyone</h2>
|
|
<p><strong>uncloseai.js</strong> is a lightweight JavaScript library that adds a floating AI chat button to any website. With just one line of code, you can integrate Hermes AI directly into your site - no server required, no backend needed.</p>
|
|
|
|
<p>This is a <strong>web client-only solution</strong> that works with static sites, CDNs, GitHub Pages, and any hosting platform that serves HTML. Add AI capabilities to your documentation, blog, portfolio, or any web page instantly.</p>
|
|
|
|
<h3 id="installation">✨ One-Line Installation</h3>
|
|
<p>Add this script tag to your HTML to get the same floating AI button on your site:</p>
|
|
<pre><code class="html"><script src="https://uncloseai.com/uncloseai.js" type="module"></script></code></pre>
|
|
|
|
<p>That's it! A floating "uncloseai." button will appear in the bottom right corner of your page.</p>
|
|
|
|
<h3 id="features">🎯 Features</h3>
|
|
<ul>
|
|
<li><strong>Zero Configuration</strong> - Works out of the box with sensible defaults</li>
|
|
<li><strong>No Server Required</strong> - Pure client-side JavaScript, runs entirely in the browser</li>
|
|
<li><strong>Streaming Responses</strong> - Real-time AI responses with smooth typewriter effect</li>
|
|
<li><strong>Mobile Friendly</strong> - Responsive design that works on all screen sizes</li>
|
|
<li><strong>Customizable</strong> - Control styling, positioning, and behavior via JavaScript variables</li>
|
|
<li><strong>Free & Open Source</strong> - Public domain software, use anywhere for any purpose</li>
|
|
</ul>
|
|
|
|
<h3 id="usage">📖 Basic Usage</h3>
|
|
<p>Once you've added the script tag, the floating button appears automatically. Click it to open the chat interface and start conversing with Hermes AI.</p>
|
|
|
|
<p>The chat interface includes:</p>
|
|
<ul>
|
|
<li>A textarea for your message input</li>
|
|
<li>A send button to submit your question</li>
|
|
<li>Real-time streaming responses from the AI</li>
|
|
<li>Auto-scrolling to keep the latest message in view</li>
|
|
<li>Mobile-responsive design that adapts to screen size</li>
|
|
</ul>
|
|
|
|
<h3 id="customization">⚙️ Customization</h3>
|
|
<p>You can customize the behavior and appearance of uncloseai.js by setting global variables before loading the script:</p>
|
|
|
|
<pre><code class="html"><script>
|
|
// Disable custom styling to use your site's CSS framework (e.g., PicoCSS)
|
|
window.UNCLOSEAI_CUSTOM_STYLING = false;
|
|
|
|
// Change the API endpoint (advanced)
|
|
window.UNCLOSEAI_BASE_URL = "https://hermes.ai.unturf.com/v1";
|
|
|
|
// Change the model (advanced)
|
|
window.UNCLOSEAI_MODEL = "adamo1139/Hermes-3-Llama-3.1-8B-FP8-Dynamic";
|
|
</script>
|
|
<script src="https://uncloseai.com/uncloseai.js" type="module"></script></code></pre>
|
|
|
|
<h4>Available Configuration Options:</h4>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Variable</th>
|
|
<th>Default</th>
|
|
<th>Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><code>UNCLOSEAI_CUSTOM_STYLING</code></td>
|
|
<td><code>true</code></td>
|
|
<td>Enable/disable built-in styling. Set to <code>false</code> to use your site's CSS framework.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>UNCLOSEAI_BASE_URL</code></td>
|
|
<td><code>https://hermes.ai.unturf.com/v1</code></td>
|
|
<td>API endpoint URL for chat completions</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>UNCLOSEAI_MODEL</code></td>
|
|
<td><code>adamo1139/Hermes-3-Llama-3.1-8B-FP8-Dynamic</code></td>
|
|
<td>AI model identifier</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<h3 id="example">🎮 Try It Now</h3>
|
|
<p>This page has uncloseai.js installed. Look for the floating "uncloseai." button in the bottom right corner of your screen and click it to start chatting with Hermes AI!</p>
|
|
|
|
<p><strong>Example prompts to try:</strong></p>
|
|
<ul>
|
|
<li>"Explain quantum computing in simple terms"</li>
|
|
<li>"Write a JavaScript function to reverse a string"</li>
|
|
<li>"What are the key principles of responsive web design?"</li>
|
|
<li>"Generate a creative short story about a robot learning to paint"</li>
|
|
</ul>
|
|
|
|
<h3>Use Cases</h3>
|
|
<p>uncloseai.js is perfect for:</p>
|
|
<ul>
|
|
<li><strong>Documentation sites</strong> - Let users ask questions about your docs</li>
|
|
<li><strong>Personal blogs</strong> - Add an AI assistant to engage with readers</li>
|
|
<li><strong>Portfolios</strong> - Showcase AI integration skills</li>
|
|
<li><strong>Static sites</strong> - Add dynamic AI features without a backend</li>
|
|
<li><strong>Educational content</strong> - Provide interactive AI tutoring</li>
|
|
<li><strong>Landing pages</strong> - Answer visitor questions instantly</li>
|
|
</ul>
|
|
|
|
<h3>Technical Details</h3>
|
|
<p>uncloseai.js uses:</p>
|
|
<ul>
|
|
<li><strong>ES6 Modules</strong> - Modern JavaScript with <code>type="module"</code></li>
|
|
<li><strong>Fetch API</strong> - For streaming server-sent events (SSE)</li>
|
|
<li><strong>ReadableStream</strong> - For processing streaming responses</li>
|
|
<li><strong>CSS Variables</strong> - For easy theme customization</li>
|
|
<li><strong>Responsive Design</strong> - Mobile-first approach with media queries</li>
|
|
</ul>
|
|
|
|
<h3>Open Source</h3>
|
|
<p>uncloseai.js is <strong>public domain software</strong> - completely free to use, modify, and distribute. No attribution required, though always appreciated!</p>
|
|
|
|
<p>📦 <strong>Source Code:</strong> <a href="https://git.unturf.com/engineering/unturf/uncloseai.com" target="_blank">https://git.unturf.com/engineering/unturf/uncloseai.com</a></p>
|
|
|
|
<script>hljs.highlightAll();</script>
|
|
|
|
<footer>
|
|
<small>Stylesheets by <a href="https://picocss.com" target="_blank">PicoCSS</a></small>
|
|
<small>& <a href="https://highlightjs.org/" target="_blank">highlight.js</a></small>
|
|
</footer>
|
|
|
|
<script>
|
|
// Simple active link highlighting
|
|
document.querySelectorAll('.table-of-contents a').forEach(link => {
|
|
link.addEventListener('click', function() {
|
|
document.querySelectorAll('.table-of-contents a').forEach(a => a.classList.remove('active'));
|
|
this.classList.add('active');
|
|
});
|
|
});
|
|
|
|
// Highlight current section on scroll
|
|
const sections = document.querySelectorAll('h2[id], h3[id]');
|
|
const navLinks = document.querySelectorAll('.table-of-contents a');
|
|
|
|
window.addEventListener('scroll', () => {
|
|
let current = '';
|
|
sections.forEach(section => {
|
|
const sectionTop = section.offsetTop;
|
|
const sectionHeight = section.clientHeight;
|
|
if (window.scrollY >= sectionTop - 100) {
|
|
current = section.getAttribute('id');
|
|
}
|
|
});
|
|
|
|
navLinks.forEach(link => {
|
|
link.classList.remove('active');
|
|
if (link.getAttribute('href') === '#' + current) {
|
|
link.classList.add('active');
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</main>
|
|
|
|
<!-- Right sidebar - Page TOC -->
|
|
<aside class="sidebar-right">
|
|
<div class="table-of-contents">
|
|
|
|
<nav>
|
|
<ul>
|
|
<li><a href="#intro" class="active">Overview</a></li>
|
|
<li><a href="#installation">Installation</a></li>
|
|
<li><a href="#features">Features</a></li>
|
|
<li><a href="#usage">Usage</a></li>
|
|
<li><a href="#customization">Customization</a></li>
|
|
<li><a href="#example">Try It Now</a></li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</aside>
|
|
</body>
|
|
|
|
</html>
|