### Install OpenAI SDK

Source: https://freetheai.xyz/quickstart

Install the OpenAI SDK using pip for Python or npm for Node.js.

```shell
pip install openai
```

```shell
npm install openai
```

--------------------------------

### Python Example

Source: https://freetheai.xyz/quickstart

A Python code snippet demonstrating how to initialize the OpenAI client with FreeTheAi's base URL and API key, and send a chat completion request.

```python
from openai import OpenAI

client = OpenAI(
    api_key="YOUR_FREETHEAI_KEY",
    base_url="https://api.freetheai.xyz/v1",
)

response = client.chat.completions.create(
    model="bbg/deepseek-ai/DeepSeek-V3.2",
    messages=[{"role": "user", "content": "Reply with OK."}]
)

print(response.choices[0].message.content)

```

--------------------------------

### Get and Activate API Key

Source: https://freetheai.xyz/quickstart

Steps to join Discord, sign up for an API key, and activate it daily.

```text
Join Discord, complete the /signup modal, then run /checkin with your key and the human challenge before using the free API.
```

--------------------------------

### JavaScript / TypeScript Example

Source: https://freetheai.xyz/quickstart

A JavaScript/TypeScript code snippet showing how to set up the OpenAI client for FreeTheAi and make a chat completion request.

```javascript
import OpenAI from "openai";

const client = new OpenAI({
    apiKey: process.env.FREETHEAI_API_KEY,
    baseURL: "https://api.freetheai.xyz/v1",
});

const response = await client.chat.completions.create({
    model: "bbg/deepseek-ai/DeepSeek-V3.2",
    messages: [{ role: "user", content: "Reply with OK." }],
});

console.log(response.choices[0].message.content);

```

--------------------------------

### curl Example

Source: https://freetheai.xyz/quickstart

A curl command to send a chat completion request to the FreeTheAi API.

```bash
curl https://api.freetheai.xyz/v1/chat/completions \
  -H "Authorization: Bearer $FREETHEAI_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{ \
    "model": "bbg/deepseek-ai/DeepSeek-V3.2", \
    "messages": [{"role": "user", "content": "Reply with OK."}] \
  }'

```

--------------------------------

### Send Your First Chat Completion

Source: https://freetheai.xyz/quickstart

Instructions for setting up and making your first chat completion request using the FreeTheAi API.

```text
Get a key in Discord, unlock it daily with /checkin, install the OpenAI SDK, point base_url at FreeTheAi, and send a chat completion.
```

--------------------------------

### curl

Source: https://freetheai.xyz/docs

Example of how to use curl to list available models.

```bash
curl https://api.freetheai.xyz/v1/models \
  -H "Authorization: Bearer $FREETHEAI_API_KEY"
```

--------------------------------

### Image generation

Source: https://freetheai.xyz/docs

Example of how to use curl for image generation.

```bash
curl https://api.freetheai.xyz/v1/images/generations \
  -H "Authorization: Bearer $FREETHEAI_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "model": "vhr/gpt_image_2",
    "prompt": "A cinematic neon sports car parked under rainy city lights"
  }'
```

--------------------------------

### Image edit

Source: https://freetheai.xyz/docs

Example of how to use curl for image editing.

```bash
curl https://api.freetheai.xyz/v1/images/edits \
  -H "Authorization: Bearer $FREETHEAI_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "model": "img/gpt-image-2",
    "prompt": "Improve this logo and make it cleaner",
    "image": "data:image/png;base64,BASE64_IMAGE_HERE"
  }'
```

--------------------------------

### JavaScript SDK

Source: https://freetheai.xyz/docs

Example of how to use the JavaScript SDK to interact with the chat completions endpoint.

```javascript
import OpenAI from "openai";

const client = new OpenAI({
  apiKey: process.env.FREETHEAI_API_KEY,
  baseURL: "https://api.freetheai.xyz/v1"
});

const res = await client.chat.completions.create({
  model: "bbg/moonshotai/Kimi-K2.5",
  messages: [{ role: "user", content: "Reply with OK." }]
});

console.log(res.choices[0].message.content);
```

--------------------------------

### curl

Source: https://freetheai.xyz/docs

Example of how to use curl to interact with the chat completions endpoint.

```bash
curl https://api.freetheai.xyz/v1/chat/completions \
  -H "Authorization: Bearer $FREETHEAI_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "model": "bbg/moonshotai/Kimi-K2.5",
    "messages": [
      { "role": "user", "content": "Write a tiny Flask route." }
    ],
    "stream": true
  }'
```

--------------------------------

### Astro Island Hydration

Source: https://freetheai.xyz/quickstart

This JavaScript code is part of the Astro framework, responsible for hydrating client-side components. It defines how components are rendered, props are parsed, and event listeners are set up for client-side interactivity.

```javascript
(()=>{var A=Object.defineProperty;var g=(i,o,a)=>o in i?A(i,o,{enumerable:!0,configurable:!0,writable:!0,value:a}):i\[o\]=a;var d=(i,o,a)=>g(i,typeof o!="symbol"?o+"":o,a);{let i={0:t=>m(t),1:t=>a(t),2:t=>new RegExp(t),3:t=>new Date(t),4:t=>new Map(a(t)),5:t=>new Set(a(t)),6:t=>BigInt(t),7:t=>new URL(t),8:t=>new Uint8Array(t),9:t=>new Uint16Array(t),10:t=>new Uint32Array(t),11:t=>1/0*t},o=t=>{let\[l,e\]=t;return l in i?i\[l\](e):void 0},a=t=>t.map(o),m=t=>typeof t!="object"||t===null?t:Object.fromEntries(Object.entries(t).map((\[l,e\])=>(\[l,o(e)\])));class y extends HTMLElement{constructor(){super(...arguments);d(this,"Component");d(this,"hydrator");d(this,"hydrate",async()=>{var b;if(!this.hydrator||!this.isConnected)return;let e=(b=this.parentElement)==null?void 0:b.closest("astro-island\[ssr\]");if(e){e.addEventListener("astro:hydrate",this.hydrate,{once:!0});return}let c=this.querySelectorAll("astro-slot"),n={},h=this.querySelectorAll("template\[data-astro-template\]");for(let r of h){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n\[r.getAttribute("data-astro-template")||"default"\]=r.innerHTML,r.remove())}for(let r of c){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n\[r.getAttribute("name")||"default"\]=r.innerHTML)}let p;try{p=this.hasAttribute("props")?m(JSON.parse(this.getAttribute("props"))):{}}catch(r){let s=this.getAttribute("component-url")||"<unknown>",v=this.getAttribute("component-export");throw v&&(s+=\` (export ${v})"),console.error(\`\[hydrate\] Error parsing props for component ${s}\",this.getAttribute("props"),r),r}let u;await this.hydrator(this)(this.Component,p,n,{client:this.getAttribute("client")}),this.removeAttribute("ssr"),this.dispatchEvent(new CustomEvent("astro:hydrate"))});d(this,"unmount",()=>{this.isConnected||this.dispatchEvent(new CustomEvent("astro:unmount"))})}disconnectedCallback(){document.removeEventListener("astro:after-swap",this.unmount),document.addEventListener("astro:after-swap",this.unmount,{once:!0})}connectedCallback(){if(!this.hasAttribute("await-children")||document.readyState==="interactive"||document.readyState==="complete")this.childrenConnectedCallback();else{let e=()=>{document.removeEventListener("DOMContentLoaded",e),c.disconnect(),this.childrenConnectedCallback()},c=new MutationObserver(()=>{var n;((n=this.lastChild)==null?void 0:n.nodeType)===Node.COMMENT_NODE&&this.lastChild.nodeValue==="astro:end"&&(this.lastChild.remove(),e())});c.observe(this,{childList:!0}),document.addEventListener("DOMContentLoaded",e)}}async childrenConnectedCallback(){let e=this.getAttribute("before-hydration-url");e&&await import(e),this.start()}async start(){let e=JSON.parse(this.getAttribute("opts")),c=this.getAttribute("client");if(Astro\[c\]===void 0){window.addEventListener(\`astro:${c}\",()=>this.start(),{once:!0});return}try{await Astro\[c\](async()=>{let n=this.getAttribute("renderer-url"),\[h,{default:p}\]=await Promise.all(\[import(this.getAttribute("component-url")),
 n?import(n):()=>()=>{}])
,u=this.getAttribute("component-export")||"default";if(!u.includes("."))this.Component=h\[u\];else{this.Component=h;for(let f of u.split("."))this.Component=this.Component\[f\]}return this.hydrator=p,this.hydrate},e,this)}catch(n){console.error(\`\[astro-island\] Error hydrating ${this.getAttribute("component-url")}\",n)}}attributeChangedCallback(){this.hydrate()}}d(y,"observedAttributes",\["props"\]),customElements.get("astro-island")||customElements.define("astro-island",y)}})();window._$HY||(e=>{let t=e=>e&&e.hasAttribute&&(e.hasAttribute("data-hk")?e:t(e.host&&e.host.nodeType?e.host:e.parentNode));\["click", "input"\].forEach((o=>document.addEventListener(o,(o=>{if(!e.events)return;let s=t(o.composedPath&&o.composedPath()\\\[0\\\\]||o.target);s&&!e.completed.has(s)&&e.events.push(\\[s,o\\\\])}))))}(\_$HY={events:\[\]
,completed:new WeakSet
,r:{}
,fe(){}
}));
```

--------------------------------

### curl

Source: https://freetheai.xyz/docs

Example of how to use curl to list full model catalog with tier and catalog metadata.

```bash
curl "https://api.freetheai.xyz/v1/models/full" \
  -H "Authorization: Bearer $FREETHEAI_API_KEY"
```

--------------------------------

### curl

Source: https://freetheai.xyz/docs

Example of how to use curl to interact with the messages endpoint for Anthropic-style clients.

```bash
curl https://api.freetheai.xyz/v1/messages \
  -H "Authorization: Bearer $FREETHEAI_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "model": "bbg/moonshotai/Kimi-K2.5",
    "max_tokens": 256,
    "messages": [
      { "role": "user", "content": "Give me a short implementation plan." }
    ]
  }'
```

--------------------------------

### Python save helper

Source: https://freetheai.xyz/docs

This Python code snippet defines a function `save_image_result` that handles saving generated images. It can save images directly from a base64 encoded string or by downloading from a URL provided in the API response. It also includes an example of how to call the FreeTheAI image generation API and then use the helper function to save the result.

```python
import base64
import os
from pathlib import Path

import requests

API_KEY = os.environ["FREETHEAI_API_KEY"]
API_BASE = "https://api.freetheai.xyz/v1"


def save_image_result(result, output_path):
    item = (result.get("data") or [{}])[0]
    if item.get("b64_json"):
        Path(output_path).write_bytes(base64.b64decode(item["b64_json"]))
        return
    if item.get("url"):
        image = requests.get(item["url"], timeout=120)
        image.raise_for_status()
        Path(output_path).write_bytes(image.content)
        return
    raise RuntimeError(f"No image found in response: {result}")


res = requests.post(
    f"{API_BASE}/images/generations",
    headers={
        "Authorization": f"Bearer {API_KEY}",
        "Content-Type": "application/json",
    },
    json={
        "model": "vhr/gpt_image_2",
        "prompt": "A clean product mockup on a dark desk",
    },
    timeout=180,
)
res.raise_for_status()
save_image_result(res.json(), "generated.png")
```

--------------------------------

### Signup Command

Source: https://freetheai.xyz/docs

Command to sign up for an API key via Discord.

```plaintext
/signup
```

--------------------------------

### Base URL and Header

Source: https://freetheai.xyz/docs

The base URL for the API and the required Authorization header format.

```plaintext
Base URL
https://api.freetheai.xyz/v1

Header
Authorization: Bearer YOUR_API_KEY
```

--------------------------------

### Check-in Command

Source: https://freetheai.xyz/docs

Command to check in daily for API access.

```plaintext
/checkin
```

--------------------------------

### Haptic Feedback Implementation

Source: https://freetheai.xyz/pricing

This JavaScript code implements haptic feedback for various user interactions on the page, mapping elements to specific haptic effects.

```javascript
(function(){const r={\"a[href]\":\"tap\",\"button:not([data-haptic])\":\"tap\",\".primary-button\":\"heavy\",\".discord-button\":\"heavy\",\".nav-hamburger\":\"press\",\".copy-btn\":\"select\",\".model-card\":\"tap\",\".status-card\":\"tap\",\".catalog-chip\":\"press\",\".kb-accordion___trigger\":\"press\",\".docs-section-head\":\"press\",\"select:not([data-haptic])\":\"select\",'input[type=\"checkbox\"]:not([data-haptic])':\"select\"};function o(e){for(const[a,t]of Object.entries(r))e.querySelectorAll(a).forEach(c=>{c.hasAttribute(\"data-haptic\")||c.setAttribute(\"data-haptic\",t)})}o(document),typeof MutationObserver<\"u\"&&new MutationObserver(e=>{for(const a of e)a.addedNodes.forEach(t=>{t.nodeType===1&&typeof t.querySelectorAll===\"function\"&&o(t)})}).observe(document.body,{childList:!0,subtree:!0})})();
```

--------------------------------

### Haptic Feedback Implementation

Source: https://freetheai.xyz/

This script adds haptic feedback attributes to various HTML elements based on their selectors. It also includes a MutationObserver to handle dynamically added elements.

```javascript
(function(){const r={"a\[href\]":"tap","button:not(\[data-haptic\])":"tap",".primary-button":"heavy",".discord-button":"heavy",".nav-hamburger":"press",".copy-btn":"select",".model-card":"tap",".status-card":"tap",".catalog-chip":"press",".kb-accordion__trigger":"press",".docs-section-head":"press", "select:not(\[data-haptic\])":"select",'input\[type="checkbox"\]:not(\[data-haptic\])':"select"};function o(e){for(const[a,t]of Object.entries(r))e.querySelectorAll(a).forEach(c=>{c.hasAttribute("data-haptic")||c.setAttribute("data-haptic",t)})}o(document),typeof MutationObserver<"u"&&new MutationObserver(e=>{for(const a of e)a.addedNodes.forEach(t=>{t.nodeType===1&&typeof t.querySelectorAll=="function"&&o(t)})}).observe(document.body,{childList:!0,subtree:!0})})();
```

--------------------------------

### Reset Key Command

Source: https://freetheai.xyz/docs

Command to reset a lost API key.

```plaintext
/resetkey
```

--------------------------------

### URL Redirection

Source: https://freetheai.xyz/

This script redirects the current page to a new URL constructed from the base path '/home', the current query string, and the current hash.

```javascript
(function () { var path = "/home" + window.location.search + window.location.hash; window.location.replace(path); })();
```

--------------------------------

### Chat Completions API URL

Source: https://freetheai.xyz/docs

The URL to point OpenAI-compatible clients at for chat completions.

```plaintext
https://api.freetheai.xyz/v1
```

--------------------------------

### Chat Completions Endpoint

Source: https://freetheai.xyz/docs

Endpoint for OpenAI-compatible chat completions.

```http
POST /v1/chat/completions
```

--------------------------------

### Full Models Catalog Endpoint

Source: https://freetheai.xyz/docs

Endpoint for an expanded model catalog with metadata.

```http
GET /v1/models/full
```

--------------------------------

### Astro Component Hydration

Source: https://freetheai.xyz/pricing

This JavaScript code demonstrates Astro's client-side hydration mechanism. It defines a base class for components and handles the process of hydrating them with their respective logic, props, and slots after they are mounted in the DOM. It also includes error handling for prop parsing and supports different client-side rendering strategies.

```javascript
var A=Object.defineProperty;
var g=(i,o,a)=>o in i?A(i,o,{enumerable:!0,configurable:!0,writable:!0,value:a}):i[o]=a;
var d=(i,o,a)=>g(i,typeof o!="symbol"?o+"":o,a);
{
let i={0:t=>m(t),1:t=>a(t),2:t=>new RegExp(t),3:t=>new Date(t),4:t=>new Map(a(t)),5:t=>new Set(a(t)),6:t=>BigInt(t),7:t=>new URL(t),8:t=>new Uint8Array(t),9:t=>new Uint16Array(t),10:t=>new Uint32Array(t),11:t=>1/0*t},
o=t=>{let[l,e]=t;
return l in i?i[l](e):void 0
},
a=t=>t.map(o),
m=t=>typeof t!="object"||t===null?t:Object.fromEntries(Object.entries(t).map(([l,e])=>[l,o(e)]));
class y extends HTMLElement{
constructor(){super(...arguments);
d(this,"Component");
d(this,"hydrator");
d(this,"hydrate",async()=>{
var b;
if(!this.hydrator||!this.isConnected)return;
let e=(b=this.parentElement)==null?void 0:b.closest("astro-island[ssr]");
if(e){
e.addEventListener("astro:hydrate",this.hydrate,{once:!0});
return
}
let c=this.querySelectorAll("astro-slot"),n={},h=this.querySelectorAll("template[data-astro-template]");
for(let r of h){
let s=r.closest(this.tagName);
s!=null&&s.isSameNode(this)&&(n[r.getAttribute("data-astro-template")||"default"]=r.innerHTML,r.remove())
}
for(let r of c){
let s=r.closest(this.tagName);
s!=null&&s.isSameNode(this)&&(n[r.getAttribute("name")||"default"]=r.innerHTML)
}
let p;
try{
p=this.hasAttribute("props")?m(JSON.parse(this.getAttribute("props"))):{}
}catch(r){
let s=this.getAttribute("component-url")||"<unknown>",v=this.getAttribute("component-export");
v&&(s+=` (export ${v})`)
;console.error(`[hydrate] Error parsing props for component ${s}`,this.getAttribute("props"),r);
throw r
}
let u;
await this.hydrator(this)(this.Component,p,n,{client:this.getAttribute("client")});
this.removeAttribute("ssr");
this.dispatchEvent(new CustomEvent("astro:hydrate"))
});
d(this,"unmount",()=>{
this.isConnected||this.dispatchEvent(new CustomEvent("astro:unmount"))
});
}
disconnectedCallback(){
document.removeEventListener("astro:after-swap",this.unmount);
document.addEventListener("astro:after-swap",this.unmount,{once:!0})
}
connectedCallback(){
if(!this.hasAttribute("await-children")||document.readyState==="interactive"||document.readyState==="complete")this.childrenConnectedCallback();
else{
let e=()=>{
document.removeEventListener("DOMContentLoaded",e);
c.disconnect();
this.childrenConnectedCallback()
};
let c=new MutationObserver(()=>{
var n;
((n=this.lastChild)==null?void 0:n.nodeType)===Node.COMMENT_NODE&&this.lastChild.nodeValue==="astro:end"&&(this.lastChild.remove(),e())
});
c.observe(this,{childList:!0});
document.addEventListener("DOMContentLoaded",e)
}
}
async childrenConnectedCallback(){
let e=this.getAttribute("before-hydration-url");
e&&await import(e);
this.start()
}
async start(){
let e=JSON.parse(this.getAttribute("opts")),c=this.getAttribute("client");
if(Astro[c]===void 0){
window.addEventListener(`astro:${c}`,()=>this.start(),{once:!0});
return
}
try{
await Astro[c](async()=>{
let n=this.getAttribute("renderer-url"),[h,{default:p}]=await Promise.all([import(this.getAttribu
```

--------------------------------

### Models Leaderboard Endpoint

Source: https://freetheai.xyz/docs

Endpoint for the site-key model leaderboard.

```http
GET /v1/models/leaderboard
```

--------------------------------

### Image Generations Endpoint

Source: https://freetheai.xyz/docs

Endpoint for image generation.

```http
POST /v1/images/generations
```

--------------------------------

### Empty State and Status Card CSS

Source: https://freetheai.xyz/status

CSS for the empty state message when no items match filters, and for the individual status cards.

```css
/* ── Empty state when filter excludes all ── */
.status-grid-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 22px;
  border: 1px dashed var(--sk-border);
  border-radius: var(--radius);
  background: var(--sk-inset-bg);
  color: var(--muted);
  font-size: 0.9rem;
}

.status-grid-empty-clear {
  padding: 8px 12px;
  border: 1px solid var(--sk-border);
  border-radius: var(--radius-sm);
  background: var(--sk-shell-bg);
  color: var(--accent-text);
  font-family: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  transition: border-color 150ms ease, color 150ms ease;
}

.status-grid-empty-clear:hover {
  border-color: var(--accent);
  text-shadow: var(--accent-text-glow);
}

/* ── Card ── */
.status-card {
  position: relative;
  display: grid;
  gap: 18px;
  padding: 18px;
  min-height: 210px;
  border: 1px solid var(--sk-border);
  border-radius: var(--radius);
  background: var(--sk-shell-bg);
  box-shadow: var(--sk-raised-shadow);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.status-card:hover {
  box-shadow: var(--sk-raised-shadow), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.status-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -4px;
  border-radius: 4px;
}

.status-card.is-up {
  border-color: rgba(46, 160, 67, 0.3);
  box-shadow: var(--sk-raised-shadow), inset 2px 0 0 rgba(46, 160, 67, 0.7);
}

.status-card.is-degraded {
  border-color: rgba(217, 119, 6, 0.38);
  box-shadow: var(--sk-raised-shadow), inset 2px 0 0 rgba(217, 119, 6, 0.72);
}

.status-card.is-down {
  border-color: rgba(255, 77, 77, 0.38);
  box-shadow: var(--sk-raised-shadow), inset 2px 0 0 rgba(255, 77, 77, 0.72);
}

.status-card-top {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.status-card-top strong {
  font-size: 1rem;
  letter-spacing: -0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-card-top span:last-child {
  margin-left: auto;
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  flex-shrink: 0;
}

.status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--dim);
  flex-shrink: 0;
}

.is-up .status-dot {
  background: #2ea043;
}

.is-degraded .status-dot {
  background: var(--amber);
}

.is-down .status-dot {
  background: var(--danger);
}

.status-card-main {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.status-card-main span {
  font-family: var(--font-mono);
  font-size: clamp(1.55rem, 3vw, 2.15rem);
  line-height: 0.9;
  letter-spacing: -0.05em;
}

.status-card-main small {
  color: var(--muted);
  font-size: 0.82rem;
  flex-shrink: 0;
}

.status-card-blast-slot {
  min-height: 32px;
  display: flex;
  align-items: center;
}

.status-card-blast {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--sk-border);
  border-radius: var(--radius-sm);
  background: var(--sk-inset-bg);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 500;
  max-width: 100%;
}

.status-card-blast strong {
  color: var(--text);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.is-degraded .status-card-blast {
  border-color: rgba(217, 119, 6, 0.35);
  color: var(--amber);
}

.is-down .status-card-blast {
  border-color: rgba(255, 77, 77, 0.35);
  color: var(--danger);
}

.status-card-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 12px;
  padding: 10px;
  border: 1px solid var(--sk-border);
  border-radius: var(--radius-sm);
  background: var(--sk-inset-bg);
  box-shadow: var(--sk-inset-shadow);
  color: var(--muted);
  font-size: 0.82rem;
```

--------------------------------

### Copy Code Snippet

Source: https://freetheai.xyz/what-is-free-the-ai

This JavaScript code handles copying code snippets to the clipboard when a copy button is clicked. It finds the relevant code block, copies its text content, and provides visual feedback to the user.

```javascript
function s(e,t){return e.target instanceof Element?e.target.closest(t):(typeof e.composedPath=="function"?e.composedPath():\[\]).find(o=>o instanceof Element&&o.matches(t))??null}document.addEventListener("click",async e=>{const t=s(e,".copy-btn");if(!t)return;const o=(t.closest?.(".docs-code-group")??t.parentElement)?.querySelector("code");if(!o)return;try{await navigator.clipboard.writeText(o.textContent??"")}catch(r){console.error("Failed to copy code sample",r);return}const n=t.querySelector(".material-symbols-outlined");n&&(n.textContent="check",setTimeout(()=>{n.textContent="content_copy"},2e3))});
```

--------------------------------

### Haptic Feedback Script

Source: https://freetheai.xyz/team

This JavaScript code adds haptic feedback to various interactive elements on the page.

```javascript
(function(){const r={"a\[href\]":"tap","button:not(\[data-haptic\])":"tap",".primary-button":"heavy",".discord-button":"heavy",".nav-hamburger":"press",".copy-btn":"select",".model-card":"tap",".status-card":"tap",".catalog-chip":"press",".kb-accordion__trigger":"press",".docs-section-head":"press","select:not(\[data-haptic\])":"select",'input\[type="checkbox"\]:not(\[data-haptic\])':"select"};function o(e){for(const[a,t]of Object.entries(r))e.querySelectorAll(a).forEach(c=>{c.hasAttribute("data-haptic")||c.setAttribute("data-haptic",t)})}o(document),typeof MutationObserver<"u"&&new MutationObserver(e=>{for(const a of e)a.addedNodes.forEach(t=>{t.nodeType===1&&typeof t.querySelectorAll=="function"&&o(t)})}).observe(document.body,{childList:!0,subtree:!0})})();
```

--------------------------------

### JavaScript Event Listener for Copy Button

Source: https://freetheai.xyz/docs

This JavaScript code listens for click events on elements with the class 'copy-btn'. When clicked, it finds the associated code block, copies its text content to the clipboard, and provides visual feedback to the user.

```javascript
function s(e,t){return e.target instanceof Element?e.target.closest(t):(typeof e.composedPath=="function"?e.composedPath():\[\]).find(o=>o instanceof Element&&o.matches(t))??null}document.addEventListener("click",async e=>{
const t=s(e,".copy-btn");
if(!t)return;
const o=(t.closest?.(".docs-code-group")??t.parentElement)?.querySelector("code");
if(!o)return;
try{
await navigator.clipboard.writeText(o.textContent??"")
}catch(r){
console.error("Failed to copy code sample",r);
return
}
const n=t.querySelector(".material-symbols-outlined");
n&&(n.textContent="check",setTimeout(()=>{
    n.textContent="content_copy"
},2e3))
});
```

--------------------------------

### Image Edits Endpoint

Source: https://freetheai.xyz/docs

Endpoint for image editing.

```http
POST /v1/images/edits
```

--------------------------------

### Status Grid and Filter Pills CSS

Source: https://freetheai.xyz/status

CSS for the status grid layout and the interactive status filter pills.

```css
/* ── Grid ── */
.status-grid {
  align-items: start;
}

/* ── Status filter pills ── */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid var(--sk-border);
  border-radius: var(--radius-sm);
  background: var(--sk-inset-bg);
  box-shadow: var(--sk-inset-shadow);
  color: var(--muted);
  font-family: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  transition: border-color 150ms ease, color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

.status-pill:hover:not(:disabled) {
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.16);
}

.status-pill:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.status-pill:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.status-pill.is-up.is-active {
  border-color: rgba(46, 160, 67, 0.6);
  background: rgba(46, 160, 67, 0.12);
  color: #6fd585;
  box-shadow: var(--sk-inset-shadow), 0 0 0 1px rgba(46, 160, 67, 0.35);
}

.status-pill.is-degraded.is-active {
  border-color: rgba(217, 119, 6, 0.6);
  background: rgba(217, 119, 6, 0.12);
  color: var(--amber);
  box-shadow: var(--sk-inset-shadow), 0 0 0 1px rgba(217, 119, 6, 0.4);
}

.status-pill.is-down.is-active {
  border-color: rgba(255, 77, 77, 0.6);
  background: rgba(255, 77, 77, 0.12);
  color: var(--danger);
  box-shadow: var(--sk-inset-shadow), 0 0 0 1px rgba(255, 77, 77, 0.4);
}
```

--------------------------------

### Copy Code Snippet Functionality

Source: https://freetheai.xyz/team

This JavaScript code handles the functionality for copying code snippets to the clipboard when a button is clicked. It finds the relevant code element, uses the Clipboard API to copy the text, and provides visual feedback to the user.

```javascript
function s(e,t){return e.target instanceof Element?e.target.closest(t):(typeof e.composedPath=="function"?e.composedPath():\[\]).find(o=>o instanceof Element&&o.matches(t))??null}document.addEventListener("click",async e=>{
const t=s(e,".copy-btn");
if(!t)return;
const o=(t.closest?.(".docs-code-group")??t.parentElement)?.querySelector("code");
if(!o)return;
try{
await navigator.clipboard.writeText(o.textContent??"")
}catch(r){
console.error("Failed to copy code sample",r);
return
}
const n=t.querySelector(".material-symbols-outlined");
n&&(n.textContent="check",setTimeout(()=>{
n.textContent="content_copy"
},2e3))
});
```

--------------------------------

### Haptic Feedback Script

Source: https://freetheai.xyz/status

This JavaScript code enhances user interaction by adding haptic feedback to various elements on the page. It dynamically assigns haptic attributes based on element type and event.

```javascript
(function(){
const r={"a\[href\]":"tap","button:not(\[data-haptic\])":"tap",".primary-button":"heavy",".discord-button":"heavy",".nav-hamburger":"press",".copy-btn":"select",".model-card":"tap",".status-card":"tap",".catalog-chip":"press",".kb-accordion\_\_trigger":"press",".docs-section-head":"press","select:not(\[data-haptic\])":"select",'input\[type="checkbox"\]:not(\[data-haptic\])':"select"};
function o(e){for(const[a,t]of Object.entries(r))e.querySelectorAll(a).forEach(c=>{c.hasAttribute("data-haptic")||c.setAttribute("data-haptic",t)})
}
o(document),
typeof MutationObserver<"u"&&new MutationObserver(e=>{for(const a of e)a.addedNodes.forEach(t=>{t.nodeType===1&&typeof t.querySelectorAll=="function"&&o(t)})}).observe(document.body,{childList:!0,subtree:!0})
})();
```

--------------------------------

### Copy Code Snippet

Source: https://freetheai.xyz/status

JavaScript code to handle copying code snippets to the clipboard when a copy button is clicked. It finds the code element within the closest '.docs-code-group' or parent element, copies its text content, and provides visual feedback on the button.

```javascript
function s(e,t){return e.target instanceof Element?e.target.closest(t):(typeof e.composedPath=="function"?e.composedPath():[]).find(o=>o instanceof Element&&o.matches(t))??null}document.addEventListener("click",async e=>{const t=s(e,".copy-btn");if(!t)return;const o=(t.closest?.(".docs-code-group")??t.parentElement)?.querySelector("code");if(!o)return;try{await navigator.clipboard.writeText(o.textContent??"")}catch(r){console.error("Failed to copy code sample",r);return}const n=t.querySelector(".material-symbols-outlined");n&&(n.textContent="check",setTimeout(()=>{n.textContent="content_copy"},2e3))});
```

--------------------------------

### Astro Island Event Handling

Source: https://freetheai.xyz/what-is-free-the-ai

This JavaScript code sets up event listeners for 'click' and 'input' events on the document to handle interactions within Astro Islands, specifically for event delegation and tracking completed islands.

```javascript
window._$HY||(e=>{let t=e=>e&&e.hasAttribute&&(e.hasAttribute("data-hk")?e:t(e.host&&e.host.nodeType?e.host:e.parentNode));[\
```

--------------------------------

### Astro Island Hydration and Loading Logic

Source: https://freetheai.xyz/team

This JavaScript code handles the hydration and loading logic for Astro islands, including component loading, prop parsing, and event handling for client-side rendering.

```javascript
(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).load=e;window.dispatchEvent(new Event("astro:load"));})();(()=>{var A=Object.defineProperty;var g=(i,o,a)=>o in i?A(i,o,{enumerable:!0,configurable:!0,writable:!0,value:a}):i\[o\]=a;var d=(i,o,a)=>g(i,typeof o!="symbol"?o+"":o,a);{let i={0:t=>m(t),1:t=>a(t),2:t=>new RegExp(t),3:t=>new Date(t),4:t=>new Map(a(t)),5:t=>new Set(a(t)),6:t=>BigInt(t),7:t=>new URL(t),8:t=>new Uint8Array(t),9:t=>new Uint16Array(t),10:t=>new Uint32Array(t),11:t=>1/0*t},o=t=>{let\[l,e\]=t;return l in i?i\[l\](e):void 0},a=t=>t.map(o),m=t=>typeof t!="object"||t===null?t:Object.fromEntries(Object.entries(t).map((\[l,e\])=>f(l,o(e))));class y extends HTMLElement{constructor(){super(...arguments);d(this,"Component");d(this,"hydrator");d(this,"hydrate",async()=>{var b;if(!this.hydrator||!this.isConnected)return;let e=(b=this.parentElement)==null?void 0:b.closest("astro-island\[ssr\]");if(e){e.addEventListener("astro:hydrate",this.hydrate,{once:!0});return}let c=this.querySelectorAll("astro-slot"),n={},h=this.querySelectorAll("template\[data-astro-template\]");for(let r of h){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n\[r.getAttribute("data-astro-template")||"default"\]=r.innerHTML,r.remove())}for(let r of c){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n\[r.getAttribute("name")||"default"\]=r.innerHTML)}let p;try{p=this.hasAttribute("props")?m(JSON.parse(this.getAttribute("props"))):{}}catch(r){let s=this.getAttribute("component-url")||"<unknown>",v=this.getAttribute("component-export");throw v&&(s+=\` (export ${v})"),console.error(\`[hydrate] Error parsing props for component ${s}\",this.getAttribute("props"),r),r}let u;await this.hydrator(this)(this.Component,p,n,{client:this.getAttribute("client")}),this.removeAttribute("ssr"),this.dispatchEvent(new CustomEvent("astro:hydrate"))});d(this,"unmount",()=>{this.isConnected||this.dispatchEvent(new CustomEvent("astro:unmount"))})}disconnectedCallback(){document.removeEventListener("astro:after-swap",this.unmount),document.addEventListener("astro:after-swap",this.unmount,{once:!0})}connectedCallback(){if(!this.hasAttribute("await-children")||document.readyState==="interactive"||document.readyState==="complete")this.childrenConnectedCallback();else{let e=()=>{document.removeEventListener("DOMContentLoaded",e),c.disconnect(),this.childrenConnectedCallback()},c=new MutationObserver(()=>{var n;((n=this.lastChild)==null?void 0:n.nodeType)===Node.COMMENT_NODE&&this.lastChild.nodeValue==="astro:end"&&(this.lastChild.remove(),e())});c.observe(this,{childList:!0}),document.addEventListener("DOMContentLoaded",e)}}async childrenConnectedCallback(){let e=this.getAttribute("before-hydration-url");e&&await import(e),this.start()}async start(){let e=JSON.parse(this.getAttribute("opts")),c=this.getAttribute("client");if(Astro\[c\]===void 0){window.addEventListener(\`astro:${c}\",()=>this.start(),{once:!0});return}try{await Astro\[c\](async()=>{let n=this.getAttribute("renderer-url"),\[h,{default:p}\]=await Promise.all(\[import(this.getAttribute("component-url")),
 n?import(n):()=>()=>()\],e,this)}catch(n){console.error(\`[astro-island] Error hydrating ${this.getAttribute("component-url")}\",n)}}}}d(y,"observedAttributes",\["props"\]),customElements.get("astro-island")||customElements.define("astro-island",y)}})();window.\_$HY||(e=>{let t=e=>e&&e.hasAttribute&&(e.hasAttribute("data-hk")?e:t(e.host&&e.host.nodeType?e.host:e.parentNode));\["click", "input"\].forEach((o=>document.addEventListener(o,(o=>{if(!e.events)return;let s=t(o.composedPath&&o.composedPath()\\\[0\\\\]||o.target);s&&!e.completed.has(s)&&e.events.push(\\[s,o\\\\])}))))})(\_$HY={events:\[\]});
```