Russell Ballestrini
eea1c51ce8
- Add 'Our Crawler' link to left sidebar navigation after Text-to-Speech on all HTML pages - Fix missing Text-to-Speech link in inference.html navigation - Update Discord bot link in crawler.html to point to Git repo instead of domain
271 lines
13 KiB
HTML
271 lines
13 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 Machine Learning | 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="/text-to-speech.html">Text-to-Speech</a></li>
|
|
<li><a href="/crawler.html">Our Crawler</a></li>
|
|
<li><a href="/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 Machine Learning 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 Machine Learning for Everyone</h2>
|
|
<p><strong>uncloseai.js</strong> is a lightweight JavaScript library that adds a floating chat button to any website. With just one line of code, you can integrate Hermes model directly into your site - no server required, no backend needed. Absolutely no API keys to manage!</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 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 machine learning 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 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.</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 models</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>machine learning 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!</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 assistant to engage with readers</li>
|
|
<li><strong>Portfolios</strong> - Showcase integration skills</li>
|
|
<li><strong>Static sites</strong> - Add dynamic features without a backend</li>
|
|
<li><strong>Educational content</strong> - Provide interactive 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>Battery-Powered Devices & Machine Learning</h3>
|
|
<p>
|
|
uncloseai.js is a game-changer for battery-powered devices like smartphones, tablets, & laptops, which often when often on-the-go lack enough energy reservations to run large language models locally. By leveraging a client-side JavaScript library, uncloseai.js offloads the heavy processing to backend inference servers powered by community GPUs. This approach eliminates the need for API keys, simplifying integration and removing the burden of securing sensitive credentials on the client side. As a result, resource-constrained devices can seamlessly access powerful capabilities without draining battery life or requiring complex security measures, making uncloseai.js an ideal solution for adding machine learning to websites accessed on mobile and portable devices.
|
|
</p>
|
|
|
|
<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>© uncloseai. 2025</small>
|
|
<br>
|
|
<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>
|
|
<br>
|
|
<small><a href="/privacy-policy.html">Privacy Policy</a> | <a href="/terms-of-use.html">Terms of Use</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>
|