picocss and highlight.js themes
modified: index.html
This commit is contained in:
root
parent
a8ac3775fd
commit
6cddfd0ef7
1 changed files with 110 additions and 138 deletions
248
index.html
248
index.html
|
|
@ -5,116 +5,86 @@
|
|||
<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>Using Free Hermes AI Service | ai.unturf.com</title>
|
||||
|
||||
<!-- PicoCSS -->
|
||||
<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.classless.min.css">
|
||||
<!-- ChunkFive Font -->
|
||||
<link rel="stylesheet" href="/css/chunkfive/stylesheet.css" type="text/css" charset="utf-8" />
|
||||
|
||||
<!-- PicoCSS -->
|
||||
<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.fluid.classless.css">
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--primary: #43a047;
|
||||
}
|
||||
body {
|
||||
max-width: 960px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
line-height: 1.6;
|
||||
margin: 40px auto;
|
||||
padding: 40px;
|
||||
max-width: 960px;
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
<!-- 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>
|
||||
|
||||
h1.unturf {
|
||||
font-family: 'ChunkFiveRegular';
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
color: #333;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: #e8e8e8;
|
||||
padding: 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
pre {
|
||||
background-color: #e8e8e8;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
/* Dark Mode adjustments */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
body {
|
||||
background-color: #1e1e1e;
|
||||
color: #f4f4f4;
|
||||
}
|
||||
|
||||
code,
|
||||
pre {
|
||||
background-color: #333;
|
||||
color: #f4f4f4;
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
color: #f4f4f4;
|
||||
}
|
||||
|
||||
#remarkbox-iframe {
|
||||
background-color: #1e1e1e;
|
||||
color: #f4f4f4;
|
||||
<!-- Theme Switcher Script -->
|
||||
<script>
|
||||
function switchTheme(theme) {
|
||||
if (theme === "auto") {
|
||||
document.documentElement.removeAttribute('data-theme');
|
||||
} else {
|
||||
document.documentElement.setAttribute('data-theme', theme);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</script>
|
||||
|
||||
<script defer data-domain="ai.unturf.com" src="https://analytics.unturf.com/js/plausible.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1 class="unturf">unturf.</h1>
|
||||
<h1>Welcome to ai.unturf.com</h1>
|
||||
<p>At <strong>ai.unturf.com</strong>, we offer a free AI service powered by the model <a href="https://nousresearch.com/hermes3/" target="_blank">NousResearch/Hermes-3-Llama-3.1-8B</a>. Our mission is to provide accessible AI tools for everyone, embodying the principles of both free as in beer & free as in freedom. You can interact with our model without any cost, and you are encouraged to contribute and build upon the open-source code & models that we use.</p>
|
||||
<header>
|
||||
<hgroup>
|
||||
<h1 class="unturf" style="font-family: 'ChunkFiveRegular';">unturf.</h1>
|
||||
<p>Welcome to ai.unturf.com - Free AI Service Powered by Hermes AI</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>Using the Hermes AI Model</h2>
|
||||
<p>This guide explains how to use the official OpenAI client to interact with the Hermes AI model hosted at <strong>hermes.ai.unturf.com/v1</strong>. You can use this endpoint without an API key.</p>
|
||||
<main>
|
||||
<h2>Using the Hermes AI Model</h2>
|
||||
<p>At <strong>ai.unturf.com</strong>, we offer a free AI service powered by the model <a href="https://nousresearch.com/hermes3/" target="_blank">NousResearch/Hermes-3-Llama-3.1-8B</a>. Our mission is to provide accessible AI tools for everyone, embodying the principles of both free as in beer & free as in freedom. You can interact with our model without any cost, and you are encouraged to contribute and build upon the open-source code & models that we use.</p>
|
||||
|
||||
<h3>Installing the OpenAI Client</h3>
|
||||
<h4>Python</h4>
|
||||
<p>To install the OpenAI package for Python, use <code>pip</code>:</p>
|
||||
<pre><code>pip install openai</code></pre>
|
||||
<h3>Installing the OpenAI Client</h3>
|
||||
<h4>Python</h4>
|
||||
<p>To install the OpenAI package for Python, use <code>pip</code>:</p>
|
||||
<pre><code>pip install openai</code></pre>
|
||||
|
||||
<h4>Node.js</h4>
|
||||
<p>To install the OpenAI package for Node.js, you can use <code>npm</code> in your <code>package.json</code>:</p>
|
||||
<pre><code>{
|
||||
<h4>Node.js</h4>
|
||||
<p>To install the OpenAI package for Node.js, you can use <code>npm</code> in your <code>package.json</code>:</p>
|
||||
<pre><code>{
|
||||
"dependencies": {
|
||||
"openai": "^v4.67.3" // Use the latest version
|
||||
}
|
||||
}
|
||||
</code></pre>
|
||||
<p>Run the following command to install it:</p>
|
||||
<pre><code>npm install</code></pre>
|
||||
</code></pre>
|
||||
<p>Run the following command to install it:</p>
|
||||
<pre><code>npm install</code></pre>
|
||||
|
||||
<h2>Python Example</h2>
|
||||
<h3>Non-Streaming</h3>
|
||||
<pre><code>
|
||||
<h2>Python Example</h2>
|
||||
<h3>Non-Streaming</h3>
|
||||
<pre><code class="python"># Python Fizzbuzz Example
|
||||
from openai import OpenAI
|
||||
|
||||
client = OpenAI(base_url="https://hermes.ai.unturf.com/v1", api_key="none")
|
||||
|
||||
# Set your model
|
||||
MODEL = "NousResearch/Hermes-3-Llama-3.1-8B"
|
||||
|
||||
# Define your messages
|
||||
messages = [{"role": "user", "content": "Give a Python Fizzbuzz solution in one line of code?"}]
|
||||
|
||||
# Make the request
|
||||
response = client.chat.completions.create(
|
||||
model=MODEL,
|
||||
messages=messages,
|
||||
|
|
@ -122,25 +92,21 @@ response = client.chat.completions.create(
|
|||
max_tokens=150
|
||||
)
|
||||
|
||||
# Print the response
|
||||
print(response.choices[0].message.content)
|
||||
</code></pre>
|
||||
</code></pre>
|
||||
|
||||
<h3>Streaming</h3>
|
||||
<pre><code>
|
||||
<h3>Streaming</h3>
|
||||
<pre><code class="python"># Streaming response in Python
|
||||
from openai import OpenAI
|
||||
|
||||
client = OpenAI(base_url="https://hermes.ai.unturf.com/v1", api_key="none")
|
||||
|
||||
# Set your model
|
||||
MODEL = "NousResearch/Hermes-3-Llama-3.1-8B"
|
||||
|
||||
# Define your messages
|
||||
messages = [
|
||||
{"role": "user", "content": "Give a Python Fizzbuzz solution in one line of code?"}
|
||||
]
|
||||
|
||||
# Make the streaming request
|
||||
response = client.chat.completions.create(
|
||||
model=MODEL,
|
||||
messages=messages,
|
||||
|
|
@ -149,16 +115,14 @@ response = client.chat.completions.create(
|
|||
stream=True, # Enable streaming
|
||||
)
|
||||
|
||||
# Print each message in the streaming response
|
||||
for chunk in response:
|
||||
# The 'ChatCompletionChunk' object exposes the 'choices' attribute directly
|
||||
if hasattr(chunk.choices[0].delta, "content"):
|
||||
print(chunk.choices[0].delta.content, end="")
|
||||
</code></pre>
|
||||
</code></pre>
|
||||
|
||||
<h2>Node.js Example</h2>
|
||||
<h3>Non-Streaming</h3>
|
||||
<pre><code>const OpenAI = require('openai');
|
||||
<h2>Node.js Example</h2>
|
||||
<h3>Non-Streaming</h3>
|
||||
<pre><code class="javascript">const OpenAI = require('openai');
|
||||
|
||||
const client = new OpenAI({
|
||||
baseURL: "https://hermes.ai.unturf.com/v1",
|
||||
|
|
@ -185,10 +149,10 @@ async function getResponse() {
|
|||
}
|
||||
|
||||
getResponse();
|
||||
</code></pre>
|
||||
</code></pre>
|
||||
|
||||
<h3>Streaming</h3>
|
||||
<pre><code>
|
||||
<h3>Streaming</h3>
|
||||
<pre><code class="javascript">
|
||||
const OpenAI = require('openai');
|
||||
|
||||
const client = new OpenAI({
|
||||
|
|
@ -221,60 +185,68 @@ async function streamResponse() {
|
|||
}
|
||||
|
||||
streamResponse();
|
||||
</code></pre>
|
||||
</code></pre>
|
||||
|
||||
<h2>How we run inference if you wanted to try to contribute</h2>
|
||||
<h2>How we run inference if you wanted to try to contribute</h2>
|
||||
|
||||
<p>We use vLLM to run models, currently full f16 safetensors. We make sure to use a virtualenv to hold the dependencies.</p>
|
||||
<p>We are considering supporting ollama for better quant support.</p>
|
||||
<pre><code>
|
||||
<p>We use vLLM to run models, currently full f16 safetensors. We make sure to use a virtualenv to hold the dependencies.</p>
|
||||
<p>We are considering supporting ollama for better quant support.</p>
|
||||
<pre><code>
|
||||
cd ~
|
||||
python3 -m venv env
|
||||
source env/bin/activate
|
||||
pip install vllm
|
||||
python -m vllm.entrypoints.openai.api_server --model NousResearch/Hermes-3-Llama-3.1-8B --host 0.0.0.0 --port 18888 --max-model-len 16000
|
||||
</code></pre>
|
||||
</code></pre>
|
||||
|
||||
<h2>Questions, Comments, Discussions</h2>
|
||||
<div id="remarkbox-div">
|
||||
<noscript>
|
||||
<iframe id=remarkbox-iframe src="https://my.remarkbox.com/embed?nojs=true" style="height:600px;width:100%;border:none!important" tabindex=0></iframe>
|
||||
</noscript>
|
||||
</div>
|
||||
<script src="https://my.remarkbox.com/static/js/iframe-resizer/iframeResizer.min.js"></script>
|
||||
<script>
|
||||
var rb_owner_key = "944c8dfa-8b2b-11ef-af0e-29ab4fb285a0";
|
||||
var thread_uri = window.location.href;
|
||||
var thread_title = window.document.title;
|
||||
var thread_fragment = window.location.hash;
|
||||
<h2>Questions, Comments, Discussions</h2>
|
||||
<div id="remarkbox-div">
|
||||
<noscript>
|
||||
<iframe id=remarkbox-iframe src="https://my.remarkbox.com/embed?nojs=true" style="height:600px;width:100%;border:none!important" tabindex=0></iframe>
|
||||
</noscript>
|
||||
</div>
|
||||
<script src="https://my.remarkbox.com/static/js/iframe-resizer/iframeResizer.min.js"></script>
|
||||
<script>
|
||||
var rb_owner_key = "944c8dfa-8b2b-11ef-af0e-29ab4fb285a0";
|
||||
var thread_uri = window.location.href;
|
||||
var thread_title = window.document.title;
|
||||
var thread_fragment = window.location.hash;
|
||||
|
||||
var rb_src = "https://my.remarkbox.com/embed" +
|
||||
"?rb_owner_key=" + rb_owner_key +
|
||||
"&thread_title=" + encodeURI(thread_title) +
|
||||
"&thread_uri=" + encodeURIComponent(thread_uri) +
|
||||
thread_fragment;
|
||||
var rb_src = "https://my.remarkbox.com/embed" +
|
||||
"?rb_owner_key=" + rb_owner_key +
|
||||
"&thread_title=" + encodeURI(thread_title) +
|
||||
"&thread_uri=" + encodeURIComponent(thread_uri) +
|
||||
thread_fragment;
|
||||
|
||||
function create_remarkbox_iframe() {
|
||||
var ifrm = document.createElement("iframe");
|
||||
ifrm.setAttribute("id", "remarkbox-iframe");
|
||||
ifrm.setAttribute("scrolling", "no");
|
||||
ifrm.setAttribute("src", rb_src);
|
||||
ifrm.setAttribute("frameborder", "0");
|
||||
ifrm.setAttribute("tabindex", "0");
|
||||
ifrm.setAttribute("title", "Remarkbox");
|
||||
ifrm.style.width = "100%";
|
||||
document.getElementById("remarkbox-div").appendChild(ifrm);
|
||||
}
|
||||
create_remarkbox_iframe();
|
||||
iFrameResize(
|
||||
{
|
||||
checkOrigin: ["https://my.remarkbox.com"],
|
||||
inPageLinks: true,
|
||||
initCallback: function(e) { e.iFrameResizer.moveToAnchor(thread_fragment) }
|
||||
},
|
||||
document.getElementById("remarkbox-iframe")
|
||||
);
|
||||
</script>
|
||||
function create_remarkbox_iframe() {
|
||||
var ifrm = document.createElement("iframe");
|
||||
ifrm.setAttribute("id", "remarkbox-iframe");
|
||||
ifrm.setAttribute("scrolling", "no");
|
||||
ifrm.setAttribute("src", rb_src);
|
||||
ifrm.setAttribute("frameborder", "0");
|
||||
ifrm.setAttribute("tabindex", "0");
|
||||
ifrm.setAttribute("title", "Remarkbox");
|
||||
ifrm.style.width = "100%";
|
||||
document.getElementById("remarkbox-div").appendChild(ifrm);
|
||||
}
|
||||
create_remarkbox_iframe();
|
||||
iFrameResize(
|
||||
{
|
||||
checkOrigin: ["https://my.remarkbox.com"],
|
||||
inPageLinks: true,
|
||||
initCallback: function(e) { e.iFrameResizer.moveToAnchor(thread_fragment) }
|
||||
},
|
||||
document.getElementById("remarkbox-iframe")
|
||||
);
|
||||
</script>
|
||||
|
||||
<script>hljs.highlightAll();</script>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<small>Stylesheet by <a href="https://picocss.com" target="_blank">PicoCSS</a></small>
|
||||
<small>Stylesheet for code <a href="https://highlightjs.org/" target="_blank">highlight.js</a></small>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue