620 lines
36 KiB
HTML
620 lines
36 KiB
HTML
<div class="section-head">
|
||
<span class="section-icon"><span class="mdi mdi-robot-outline"></span></span>
|
||
<div class="section-title">
|
||
<h2>AI Backends</h2>
|
||
<p>Connect local or cloud services for speech recognition, synthesis, and text generation.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Category tabs: Local / Online -->
|
||
<div class="llm-cat-tabs" id="llm-cat-tabs">
|
||
<button class="llm-cat-tab active" data-llm-cat="local"><span class="mdi mdi-laptop"></span> Local</button>
|
||
<button class="llm-cat-tab" data-llm-cat="online"><span class="mdi mdi-earth"></span> Online APIs</button>
|
||
</div>
|
||
|
||
<!-- ── LOCAL section ──────────────────────────────────────── -->
|
||
<div class="llm-section" id="llm-sec-local" data-llm-section="local">
|
||
<div class="llm-sec-header">
|
||
<div>
|
||
<h3 class="llm-sec-title">Local AI Services</h3>
|
||
<p class="llm-sec-note">Run everything on your own hardware — no API key, no rate limits, no data leaves your machine.</p>
|
||
</div>
|
||
<span class="llm-free-badge llm-free-local">100% Local</span>
|
||
</div>
|
||
|
||
<!-- ── Active Docker Stack ──────────────────────────────── -->
|
||
<div class="dc-section-head">
|
||
<div>
|
||
<h4 class="llm-local-cat" style="margin:0">Active Docker Stack</h4>
|
||
<p class="llm-sec-note" style="margin:2px 0 0">Start, stop, or install TTS and ASR containers running on this machine.</p>
|
||
</div>
|
||
<button class="btn-secondary" id="dc-refresh-btn" type="button"><span class="mdi mdi-refresh"></span> Refresh</button>
|
||
</div>
|
||
<div id="dc-grid" class="dc-grid">
|
||
<div class="dc-loading">Checking container status…</div>
|
||
</div>
|
||
|
||
<!-- ── Language Models ──────────────────────────────────── -->
|
||
<h4 class="llm-local-cat" style="margin-top:28px">Language Models (LLM)</h4>
|
||
<div class="llm-local-grid">
|
||
|
||
<div class="llm-local-card">
|
||
<div class="llm-local-head">
|
||
<span class="llm-local-icon"><span class="mdi mdi-head-dots-horizontal-outline"></span></span>
|
||
<span class="llm-local-name">Ollama</span>
|
||
<span class="llm-local-compat">OpenAI-compat</span>
|
||
</div>
|
||
<p class="llm-local-desc">Easiest local LLM setup. Pull any model with one command. Runs Llama, Mistral, Qwen, Phi, Gemma and many more.</p>
|
||
<div class="llm-local-url">
|
||
<span class="llm-local-url-label">URL</span>
|
||
<input class="llm-local-url-inp" type="text" placeholder="http://localhost:11434/v1" data-llm-local-key="ollama" data-llm-local-default="http://localhost:11434/v1" spellcheck="false">
|
||
<button class="llm-local-ping" data-ping-key="ollama" title="Test connection">Connect</button>
|
||
</div>
|
||
<div class="llm-local-snippet">
|
||
<div class="llm-snippet-bar">
|
||
<span>Quick start</span>
|
||
<button class="llm-copy-btn" data-copy="curl https://ollama.ai/install.sh | sh ollama pull llama3.3">Copy</button>
|
||
</div>
|
||
<pre>curl https://ollama.ai/install.sh | sh
|
||
ollama pull llama3.3</pre>
|
||
</div>
|
||
<a class="llm-local-link" href="https://ollama.ai" target="_blank" rel="noopener">ollama.ai <span class="mdi mdi-open-in-new link-icon"></span></a>
|
||
</div>
|
||
|
||
<div class="llm-local-card llm-local-card-running">
|
||
<div class="llm-local-head">
|
||
<span class="llm-local-icon"><span class="mdi mdi-lightning-bolt"></span></span>
|
||
<span class="llm-local-name">vLLM</span>
|
||
<span class="llm-local-compat llm-compat-detected">Detected in stack</span>
|
||
</div>
|
||
<p class="llm-local-desc">High-throughput GPU inference. Already in your Docker stack. Serve any HuggingFace model with PagedAttention.</p>
|
||
<div class="llm-local-url">
|
||
<span class="llm-local-url-label">URL</span>
|
||
<input class="llm-local-url-inp" type="text" placeholder="http://localhost:8000/v1" data-llm-local-key="vllm" data-llm-local-default="http://localhost:8000/v1" spellcheck="false">
|
||
<button class="llm-local-ping" data-ping-key="vllm" title="Test connection">Connect</button>
|
||
</div>
|
||
<div class="llm-local-snippet">
|
||
<div class="llm-snippet-bar">
|
||
<span>Add a model to your stack</span>
|
||
<button class="llm-copy-btn" data-copy="--model Qwen/Qwen3-8B --served-model-name qwen3-8b">Copy</button>
|
||
</div>
|
||
<pre>--model Qwen/Qwen3-8B \
|
||
--served-model-name qwen3-8b</pre>
|
||
</div>
|
||
<a class="llm-local-link" href="https://docs.vllm.ai" target="_blank" rel="noopener">docs.vllm.ai <span class="mdi mdi-open-in-new link-icon"></span></a>
|
||
</div>
|
||
|
||
<div class="llm-local-card">
|
||
<div class="llm-local-head">
|
||
<span class="llm-local-icon">🎛️</span>
|
||
<span class="llm-local-name">LM Studio</span>
|
||
<span class="llm-local-compat">OpenAI-compat</span>
|
||
</div>
|
||
<p class="llm-local-desc">GUI app for running quantized models. Built-in model browser, chat UI, and a local server with OpenAI API.</p>
|
||
<div class="llm-local-url">
|
||
<span class="llm-local-url-label">URL</span>
|
||
<input class="llm-local-url-inp" type="text" placeholder="http://localhost:1234/v1" data-llm-local-key="lmstudio" data-llm-local-default="http://localhost:1234/v1" spellcheck="false">
|
||
<button class="llm-local-ping" data-ping-key="lmstudio" title="Test connection">Connect</button>
|
||
</div>
|
||
<div class="llm-local-snippet">
|
||
<div class="llm-snippet-bar"><span>Enable in LM Studio</span></div>
|
||
<pre>Developer tab → Start server → Port 1234
|
||
Check "Enable CORS" for browser access</pre>
|
||
</div>
|
||
<a class="llm-local-link" href="https://lmstudio.ai" target="_blank" rel="noopener">lmstudio.ai <span class="mdi mdi-open-in-new link-icon"></span></a>
|
||
</div>
|
||
|
||
<div class="llm-local-card">
|
||
<div class="llm-local-head">
|
||
<span class="llm-local-icon">🔷</span>
|
||
<span class="llm-local-name">llama.cpp</span>
|
||
<span class="llm-local-compat">OpenAI-compat</span>
|
||
</div>
|
||
<p class="llm-local-desc">Lightweight GGUF model server. Minimal RAM usage. Runs on CPU or GPU. Great for embedding in Docker.</p>
|
||
<div class="llm-local-url">
|
||
<span class="llm-local-url-label">URL</span>
|
||
<input class="llm-local-url-inp" type="text" placeholder="http://localhost:8080/v1" data-llm-local-key="llamacpp" data-llm-local-default="http://localhost:8080/v1" spellcheck="false">
|
||
<button class="llm-local-ping" data-ping-key="llamacpp" title="Test connection">Connect</button>
|
||
</div>
|
||
<div class="llm-local-snippet">
|
||
<div class="llm-snippet-bar">
|
||
<span>Docker one-liner</span>
|
||
<button class="llm-copy-btn" data-copy="docker run -p 8080:8080 ghcr.io/ggml-org/llama.cpp:server -hf QuantFactory/Meta-Llama-3-8B-GGUF -hff Meta-Llama-3-8B.Q4_K_M.gguf">Copy</button>
|
||
</div>
|
||
<pre>docker run -p 8080:8080 ghcr.io/ggml-org/llama.cpp:server \
|
||
-hf QuantFactory/Meta-Llama-3-8B-GGUF \
|
||
-hff Meta-Llama-3-8B.Q4_K_M.gguf</pre>
|
||
</div>
|
||
<a class="llm-local-link" href="https://github.com/ggml-org/llama.cpp" target="_blank" rel="noopener">github.com/ggml-org/llama.cpp <span class="mdi mdi-open-in-new link-icon"></span></a>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- ── Speech Recognition ───────────────────────────────── -->
|
||
<h4 class="llm-local-cat" style="margin-top:24px">Speech Recognition (STT)</h4>
|
||
<div class="llm-local-grid">
|
||
|
||
<div class="llm-local-card">
|
||
<div class="llm-local-head">
|
||
<span class="llm-local-icon"><span class="mdi mdi-microphone-variant"></span>️</span>
|
||
<span class="llm-local-name">faster-whisper-server</span>
|
||
<span class="llm-local-compat">OpenAI-compat</span>
|
||
</div>
|
||
<div class="llm-local-metrics">
|
||
<span class="llm-metric-chip"><span class="mdi mdi-lightning-bolt"></span> ~70× RT GPU</span>
|
||
<span class="llm-metric-chip"><span class="mdi mdi-clock-outline"></span> 0.5–2 s</span>
|
||
<span class="llm-metric-chip"><span class="mdi mdi-star-circle-outline"></span> large-v3</span>
|
||
<span class="llm-metric-chip"><span class="mdi mdi-memory"></span> 1.5 GB VRAM</span>
|
||
</div>
|
||
<p class="llm-local-desc">Drop-in local replacement for the Whisper API. GPU-accelerated via CTranslate2. OpenAI-compatible endpoint.</p>
|
||
<div class="llm-local-url">
|
||
<span class="llm-local-url-label">URL</span>
|
||
<input class="llm-local-url-inp" type="text" placeholder="http://localhost:8000" data-llm-local-key="faster-whisper" data-llm-local-default="http://localhost:8000" spellcheck="false">
|
||
<button class="llm-local-ping" data-ping-key="faster-whisper" title="Test connection">Connect</button>
|
||
</div>
|
||
<div class="llm-local-actions">
|
||
<button class="llm-use-btn" id="llm-use-faster-whisper-stt" type="button" title="Copy URL to Settings → faster-whisper-server URL and set as active STT"><span class="mdi mdi-content-copy"></span> Use as STT</button>
|
||
</div>
|
||
<div class="llm-local-snippet">
|
||
<div class="llm-snippet-bar">
|
||
<span>docker-compose snippet</span>
|
||
<button class="llm-copy-btn" data-copy="services: whisper: image: fedirz/faster-whisper-server:latest-cuda ports: ["8000:8000"] environment: - WHISPER__MODEL=large-v3 deploy: resources: reservations: devices: [{driver: nvidia, count: 1, capabilities: [gpu]}]">Copy</button>
|
||
</div>
|
||
<pre>services:
|
||
whisper:
|
||
image: fedirz/faster-whisper-server:latest-cuda
|
||
ports: ["8000:8000"]
|
||
environment:
|
||
- WHISPER__MODEL=large-v3
|
||
deploy:
|
||
resources:
|
||
reservations:
|
||
devices: [{driver: nvidia, count: 1, capabilities: [gpu]}]</pre>
|
||
</div>
|
||
<a class="llm-local-link" href="https://github.com/fedirz/faster-whisper-server" target="_blank" rel="noopener">github.com/fedirz/faster-whisper-server <span class="mdi mdi-open-in-new link-icon"></span></a>
|
||
</div>
|
||
|
||
<div class="llm-local-card">
|
||
<div class="llm-local-head">
|
||
<span class="llm-local-icon">🔉</span>
|
||
<span class="llm-local-name">whisper.cpp</span>
|
||
<span class="llm-local-compat">HTTP server</span>
|
||
</div>
|
||
<div class="llm-local-metrics">
|
||
<span class="llm-metric-chip"><span class="mdi mdi-lightning-bolt"></span> ~8–15× RT CPU</span>
|
||
<span class="llm-metric-chip"><span class="mdi mdi-clock-outline"></span> 1–5 s</span>
|
||
<span class="llm-metric-chip"><span class="mdi mdi-star-circle-outline"></span> large-v3 Q5</span>
|
||
<span class="llm-metric-chip"><span class="mdi mdi-memory"></span> ~1 GB RAM</span>
|
||
</div>
|
||
<p class="llm-local-desc">Minimal C++ Whisper with a built-in HTTP server. CPU or Metal/CUDA. Low memory, fast on consumer hardware.</p>
|
||
<div class="llm-local-url">
|
||
<span class="llm-local-url-label">URL</span>
|
||
<input class="llm-local-url-inp" type="text" placeholder="http://localhost:8080" data-llm-local-key="whisper-cpp" data-llm-local-default="http://localhost:8080" spellcheck="false">
|
||
<button class="llm-local-ping" data-ping-key="whisper-cpp" title="Test connection">Connect</button>
|
||
</div>
|
||
<div class="llm-local-actions">
|
||
<button class="llm-use-btn" id="llm-use-whisper-cpp-stt" type="button" title="Copy URL to Settings → whisper.cpp URL and set as active STT"><span class="mdi mdi-content-copy"></span> Use as STT</button>
|
||
</div>
|
||
<div class="llm-local-snippet">
|
||
<div class="llm-snippet-bar">
|
||
<span>Build & run</span>
|
||
<button class="llm-copy-btn" data-copy="git clone https://github.com/ggml-org/whisper.cpp cd whisper.cpp && cmake -B build && cmake --build build -j ./build/bin/whisper-server -m models/ggml-large-v3.bin --port 8080">Copy</button>
|
||
</div>
|
||
<pre>git clone https://github.com/ggml-org/whisper.cpp
|
||
cd whisper.cpp && cmake -B build && cmake --build build -j
|
||
./build/bin/whisper-server \
|
||
-m models/ggml-large-v3.bin --port 8080</pre>
|
||
</div>
|
||
<a class="llm-local-link" href="https://github.com/ggml-org/whisper.cpp" target="_blank" rel="noopener">github.com/ggml-org/whisper.cpp <span class="mdi mdi-open-in-new link-icon"></span></a>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- ── Text-to-Speech ────────────────────────────────────── -->
|
||
<h4 class="llm-local-cat" style="margin-top:24px">Text-to-Speech (local TTS)</h4>
|
||
<div class="llm-local-grid">
|
||
|
||
<div class="llm-local-card">
|
||
<div class="llm-local-head">
|
||
<span class="llm-local-icon"><span class="mdi mdi-speaker-outline"></span></span>
|
||
<span class="llm-local-name">Piper TTS</span>
|
||
<span class="llm-local-compat">Fast · offline</span>
|
||
</div>
|
||
<div class="llm-local-metrics">
|
||
<span class="llm-metric-chip"><span class="mdi mdi-lightning-bolt"></span> ~1× CPU realtime</span>
|
||
<span class="llm-metric-chip"><span class="mdi mdi-clock-outline"></span> <50 ms</span>
|
||
<span class="llm-metric-chip"><span class="mdi mdi-star-circle-outline"></span> Good (VITS)</span>
|
||
<span class="llm-metric-chip"><span class="mdi mdi-memory"></span> ~50 MB RAM</span>
|
||
</div>
|
||
<p class="llm-local-desc">Lightning-fast offline TTS. Runs on CPU in real time. 50+ language voices available. Uses Wyoming protocol (port 10200) — not directly OpenAI-compatible.</p>
|
||
<div class="llm-local-url">
|
||
<span class="llm-local-url-label">URL</span>
|
||
<input class="llm-local-url-inp" type="text" placeholder="localhost:10200" data-llm-local-key="piper" data-llm-local-default="localhost:10200" spellcheck="false">
|
||
<button class="llm-local-ping" data-ping-key="piper" title="Test connection">Connect</button>
|
||
</div>
|
||
<div class="llm-local-snippet">
|
||
<div class="llm-snippet-bar">
|
||
<span>Docker</span>
|
||
<button class="llm-copy-btn" data-copy="docker run -p 10200:10200 rhasspy/wyoming-piper --voice en_US-lessac-medium">Copy</button>
|
||
</div>
|
||
<pre>docker run -p 10200:10200 \
|
||
rhasspy/wyoming-piper \
|
||
--voice en_US-lessac-medium</pre>
|
||
</div>
|
||
<a class="llm-local-link" href="https://github.com/rhasspy/piper" target="_blank" rel="noopener">github.com/rhasspy/piper <span class="mdi mdi-open-in-new link-icon"></span></a>
|
||
</div>
|
||
|
||
<div class="llm-local-card">
|
||
<div class="llm-local-head">
|
||
<span class="llm-local-icon">🌸</span>
|
||
<span class="llm-local-name">Kokoro FastAPI</span>
|
||
<span class="llm-local-compat">OpenAI-compat TTS</span>
|
||
</div>
|
||
<div class="llm-local-metrics">
|
||
<span class="llm-metric-chip"><span class="mdi mdi-lightning-bolt"></span> ~0.1× CPU RTF</span>
|
||
<span class="llm-metric-chip"><span class="mdi mdi-clock-outline"></span> ~200 ms</span>
|
||
<span class="llm-metric-chip"><span class="mdi mdi-star-circle-outline"></span> High (82M)</span>
|
||
<span class="llm-metric-chip"><span class="mdi mdi-memory"></span> 300 MB CPU</span>
|
||
</div>
|
||
<p class="llm-local-desc">Kokoro-82M running behind an OpenAI-compatible TTS endpoint. 11 built-in voices (af_bella, bf_emma, am_adam…). Drop-in replacement for OpenAI’s TTS API.</p>
|
||
<div class="llm-local-url">
|
||
<span class="llm-local-url-label">URL</span>
|
||
<input class="llm-local-url-inp" type="text" placeholder="http://localhost:8880/v1" data-llm-local-key="kokoro" data-llm-local-default="http://localhost:8880/v1" spellcheck="false">
|
||
<button class="llm-local-ping" data-ping-key="kokoro" title="Test connection">Connect</button>
|
||
</div>
|
||
<div class="llm-local-actions">
|
||
<button class="llm-use-btn" id="llm-use-kokoro-tts" type="button" title="Copy URL to Settings → Kokoro FastAPI URL and enable Kokoro in Try It Out"><span class="mdi mdi-content-copy"></span> Use as TTS</button>
|
||
</div>
|
||
<div class="llm-local-snippet">
|
||
<div class="llm-snippet-bar">
|
||
<span>Docker</span>
|
||
<button class="llm-copy-btn" data-copy="docker run -p 8880:8880 ghcr.io/remsky/kokoro-fastapi-cpu:v0.2.2">Copy</button>
|
||
</div>
|
||
<pre>docker run -p 8880:8880 \
|
||
ghcr.io/remsky/kokoro-fastapi-cpu:v0.2.2
|
||
# GPU:
|
||
docker run -p 8880:8880 --gpus all \
|
||
ghcr.io/remsky/kokoro-fastapi-gpu:v0.2.2</pre>
|
||
</div>
|
||
<a class="llm-local-link" href="https://github.com/remsky/Kokoro-FastAPI" target="_blank" rel="noopener">github.com/remsky/Kokoro-FastAPI <span class="mdi mdi-open-in-new link-icon"></span></a>
|
||
</div>
|
||
|
||
<div class="llm-local-card">
|
||
<div class="llm-local-head">
|
||
<span class="llm-local-icon">🗣️</span>
|
||
<span class="llm-local-name">XTTS v2</span>
|
||
<span class="llm-local-compat">Voice cloning</span>
|
||
</div>
|
||
<div class="llm-local-metrics">
|
||
<span class="llm-metric-chip"><span class="mdi mdi-lightning-bolt"></span> ~0.5× GPU RTF</span>
|
||
<span class="llm-metric-chip"><span class="mdi mdi-clock-outline"></span> 1–3 s</span>
|
||
<span class="llm-metric-chip"><span class="mdi mdi-star-circle-outline"></span> High (WAV clone)</span>
|
||
<span class="llm-metric-chip"><span class="mdi mdi-memory"></span> 3–4 GB VRAM</span>
|
||
</div>
|
||
<p class="llm-local-desc">Coqui XTTS — multilingual voice cloning from a 6-second sample. 17 languages. Compatible with this app’s voice library.</p>
|
||
<div class="llm-local-url">
|
||
<span class="llm-local-url-label">URL</span>
|
||
<input class="llm-local-url-inp" type="text" placeholder="http://localhost:8020/tts_to_audio" data-llm-local-key="xtts" data-llm-local-default="http://localhost:8020/tts_to_audio" spellcheck="false">
|
||
<button class="llm-local-ping" data-ping-key="xtts" title="Test connection">Connect</button>
|
||
</div>
|
||
<div class="llm-local-snippet">
|
||
<div class="llm-snippet-bar">
|
||
<span>Docker</span>
|
||
<button class="llm-copy-btn" data-copy="docker run -p 8020:80 --gpus all -v /voices:/voices daswer123/xtts-api-server:latest">Copy</button>
|
||
</div>
|
||
<pre>docker run -p 8020:80 --gpus all \
|
||
-v /voices:/voices \
|
||
daswer123/xtts-api-server:latest</pre>
|
||
</div>
|
||
<a class="llm-local-link" href="https://github.com/daswer123/xtts-api-server" target="_blank" rel="noopener">xtts-api-server <span class="mdi mdi-open-in-new link-icon"></span></a>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="llm-local-howto">
|
||
<div class="llm-howto-icon"><span class="mdi mdi-lightbulb-outline"></span></div>
|
||
<div class="llm-howto-body">
|
||
<strong>Adding a local service to this app</strong>
|
||
<p>All OpenAI-compatible services work the same way: open <em>App Routing</em> in the sidebar, add a new backend entry with the local URL, leave the API key field empty, and set it as the default backend for the voice type you want.</p>
|
||
</div>
|
||
</div>
|
||
|
||
</div><!-- /local -->
|
||
|
||
<!-- ── ONLINE section ─────────────────────────────────────── -->
|
||
<div class="llm-section" id="llm-sec-online" data-llm-section="online" hidden>
|
||
<div class="llm-sec-header">
|
||
<div>
|
||
<h3 class="llm-sec-title">Online API Services</h3>
|
||
<p class="llm-sec-note">Cloud STT, TTS, and LLM APIs. All providers below have a free tier you can start with immediately.</p>
|
||
</div>
|
||
<span class="llm-free-badge">Free tiers available</span>
|
||
</div>
|
||
|
||
<!-- ── ASR / STT ─────────────────────────────────────────── -->
|
||
<h4 class="llm-local-cat" style="margin-bottom:12px"><span class="mdi mdi-microphone-variant"></span> ASR · Speech-to-Text</h4>
|
||
<div class="llm-service-grid">
|
||
|
||
<div class="llm-card llm-card-highlight">
|
||
<div class="llm-card-head">
|
||
<span class="llm-card-icon"><span class="mdi mdi-lightning-bolt"></span></span>
|
||
<div>
|
||
<div class="llm-card-name">Groq Whisper</div>
|
||
<div class="llm-card-sub">whisper-large-v3-turbo · OpenAI-compatible</div>
|
||
</div>
|
||
<span class="llm-tier-badge llm-tier-free">Free</span>
|
||
</div>
|
||
<div class="llm-card-stats">
|
||
<span>2 000 req / day</span>
|
||
<span><span class="mdi mdi-lightning-bolt"></span> Fastest cloud STT</span>
|
||
<span><span class="mdi mdi-memory"></span> Cloud · 0 VRAM</span>
|
||
</div>
|
||
<div class="llm-field-row">
|
||
<label class="llm-label">API key</label>
|
||
<input type="password" class="llm-input" placeholder="gsk_…" data-llm-key="groq_stt">
|
||
<a class="llm-link" href="https://console.groq.com" target="_blank" rel="noopener">Get key <span class="mdi mdi-open-in-new link-icon"></span></a>
|
||
</div>
|
||
<div class="llm-endpoint">
|
||
<span class="llm-endpoint-label">Endpoint</span>
|
||
<code>https://api.groq.com/openai/v1</code>
|
||
</div>
|
||
<div class="llm-models">
|
||
<span class="llm-model-tag">whisper-large-v3-turbo</span>
|
||
<span class="llm-model-tag">whisper-large-v3</span>
|
||
<span class="llm-model-tag">distil-whisper-large-v3-en</span>
|
||
</div>
|
||
<div class="llm-info-note">Save key in <strong>Settings → Groq API key</strong> to enable <em>Groq Whisper</em> in the STT dropdown → <em>Try It Out</em> and <em>Clone a Voice</em>.</div>
|
||
</div>
|
||
|
||
<div class="llm-card">
|
||
<div class="llm-card-head">
|
||
<span class="llm-card-icon"><span class="mdi mdi-emoticon-happy-outline"></span></span>
|
||
<div>
|
||
<div class="llm-card-name">HuggingFace Inference</div>
|
||
<div class="llm-card-sub">Serverless Whisper models</div>
|
||
</div>
|
||
<span class="llm-tier-badge llm-tier-free">Free</span>
|
||
</div>
|
||
<div class="llm-card-stats">
|
||
<span>~1 000 req / day</span>
|
||
<span>Slower cold starts</span>
|
||
<span>Many model variants</span>
|
||
</div>
|
||
<div class="llm-field-row">
|
||
<label class="llm-label">API key</label>
|
||
<input type="password" class="llm-input" placeholder="hf_…" data-llm-key="hf_stt">
|
||
<a class="llm-link" href="https://huggingface.co/settings/tokens" target="_blank" rel="noopener">Get key <span class="mdi mdi-open-in-new link-icon"></span></a>
|
||
</div>
|
||
<div class="llm-endpoint">
|
||
<span class="llm-endpoint-label">Endpoint</span>
|
||
<code>https://api-inference.huggingface.co/models/openai/whisper-large-v3</code>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="llm-card">
|
||
<div class="llm-card-head">
|
||
<span class="llm-card-icon"><span class="mdi mdi-content-copy"></span></span>
|
||
<div>
|
||
<div class="llm-card-name">AssemblyAI</div>
|
||
<div class="llm-card-sub">High-accuracy transcription + speaker diarization</div>
|
||
</div>
|
||
<span class="llm-tier-badge llm-tier-free">Free</span>
|
||
</div>
|
||
<div class="llm-card-stats">
|
||
<span>100 h lifetime</span>
|
||
<span>Speaker labels</span>
|
||
<span>Auto-chapters</span>
|
||
</div>
|
||
<div class="llm-field-row">
|
||
<label class="llm-label">API key</label>
|
||
<input type="password" class="llm-input" placeholder="AssemblyAI key…" data-llm-key="assemblyai">
|
||
<a class="llm-link" href="https://www.assemblyai.com" target="_blank" rel="noopener">Get key <span class="mdi mdi-open-in-new link-icon"></span></a>
|
||
</div>
|
||
<div class="llm-endpoint">
|
||
<span class="llm-endpoint-label">Endpoint</span>
|
||
<code>https://api.assemblyai.com/v2/transcript</code>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- ── TTS ──────────────────────────────────────────────── -->
|
||
<h4 class="llm-local-cat" style="margin-top:28px;margin-bottom:12px"><span class="mdi mdi-account-voice"></span> Text-to-Speech</h4>
|
||
<div class="llm-service-grid">
|
||
|
||
<div class="llm-card llm-card-highlight">
|
||
<div class="llm-card-head">
|
||
<span class="llm-card-icon"><span class="mdi mdi-waveform"></span></span>
|
||
<div>
|
||
<div class="llm-card-name">ElevenLabs</div>
|
||
<div class="llm-card-sub">High-quality voice cloning & synthesis</div>
|
||
</div>
|
||
<span class="llm-tier-badge llm-tier-free">Free</span>
|
||
</div>
|
||
<div class="llm-card-stats">
|
||
<span>10 000 chars / month</span>
|
||
<span>2 500 char / request max</span>
|
||
<span>Voice cloning supported</span>
|
||
</div>
|
||
<div class="llm-field-row">
|
||
<label class="llm-label">API key</label>
|
||
<input type="password" class="llm-input" placeholder="xi-api-key…" data-llm-key="elevenlabs">
|
||
<a class="llm-link" href="https://elevenlabs.io" target="_blank" rel="noopener">Get key <span class="mdi mdi-open-in-new link-icon"></span></a>
|
||
</div>
|
||
<div class="llm-endpoint">
|
||
<span class="llm-endpoint-label">Endpoint</span>
|
||
<code>https://api.elevenlabs.io/v1/text-to-speech</code>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="llm-card">
|
||
<div class="llm-card-head">
|
||
<span class="llm-card-icon"><span class="mdi mdi-fish"></span></span>
|
||
<div>
|
||
<div class="llm-card-name">Fish Audio</div>
|
||
<div class="llm-card-sub">Voice cloning & multilingual TTS</div>
|
||
</div>
|
||
<span class="llm-tier-badge llm-tier-free">Free</span>
|
||
</div>
|
||
<div class="llm-card-stats">
|
||
<span>1 h audio / month</span>
|
||
<span>100 req / min</span>
|
||
<span>30+ languages</span>
|
||
</div>
|
||
<div class="llm-field-row">
|
||
<label class="llm-label">API key</label>
|
||
<input type="password" class="llm-input" placeholder="Fish Audio key…" data-llm-key="fish_audio">
|
||
<a class="llm-link" href="https://fish.audio" target="_blank" rel="noopener">Get key <span class="mdi mdi-open-in-new link-icon"></span></a>
|
||
</div>
|
||
<div class="llm-endpoint">
|
||
<span class="llm-endpoint-label">Endpoint</span>
|
||
<code>https://api.fish.audio/v1/tts</code>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="llm-card">
|
||
<div class="llm-card-head">
|
||
<span class="llm-card-icon"><span class="mdi mdi-music-note"></span></span>
|
||
<div>
|
||
<div class="llm-card-name">Kokoro TTS</div>
|
||
<div class="llm-card-sub">82M model · HuggingFace Spaces demo</div>
|
||
</div>
|
||
<span class="llm-tier-badge llm-tier-demo">Demo</span>
|
||
</div>
|
||
<div class="llm-card-stats">
|
||
<span>Free web demo</span>
|
||
<span><$1 per 1M chars (paid)</span>
|
||
<span>High naturalness</span>
|
||
</div>
|
||
<div class="llm-info-box">
|
||
Use the HF Spaces web demo for quick tests, or run Kokoro locally via Docker for production use.
|
||
<br>
|
||
<a class="llm-link-inline" href="https://huggingface.co/spaces/hexgrad/Kokoro-TTS" target="_blank" rel="noopener"><span class="mdi mdi-arrow-right"></span> Open Kokoro HF Space</a>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- ── LLM ──────────────────────────────────────────────── -->
|
||
<h4 class="llm-local-cat" style="margin-top:28px;margin-bottom:12px"><span class="mdi mdi-robot-outline"></span> Large Language Models</h4>
|
||
<div class="llm-service-grid">
|
||
|
||
<div class="llm-card llm-card-highlight">
|
||
<div class="llm-card-head">
|
||
<span class="llm-card-icon"><span class="mdi mdi-lightning-bolt"></span></span>
|
||
<div>
|
||
<div class="llm-card-name">Groq</div>
|
||
<div class="llm-card-sub">Ultra-fast inference · OpenAI-compatible</div>
|
||
</div>
|
||
<span class="llm-tier-badge llm-tier-free">Free</span>
|
||
</div>
|
||
<div class="llm-card-stats">
|
||
<span>30 000 tokens / min</span>
|
||
<span>14 400 req / day</span>
|
||
<span>Lowest latency</span>
|
||
</div>
|
||
<div class="llm-field-row">
|
||
<label class="llm-label">API key</label>
|
||
<input type="password" class="llm-input" placeholder="gsk_…" data-llm-key="groq_llm">
|
||
<a class="llm-link" href="https://console.groq.com" target="_blank" rel="noopener">Get key <span class="mdi mdi-open-in-new link-icon"></span></a>
|
||
</div>
|
||
<div class="llm-endpoint">
|
||
<span class="llm-endpoint-label">Endpoint</span>
|
||
<code>https://api.groq.com/openai/v1</code>
|
||
</div>
|
||
<div class="llm-models">
|
||
<span class="llm-model-tag">llama-3.3-70b-versatile</span>
|
||
<span class="llm-model-tag">qwen-qwq-32b</span>
|
||
<span class="llm-model-tag">deepseek-r1-distill-llama-70b</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="llm-card">
|
||
<div class="llm-card-head">
|
||
<span class="llm-card-icon"><span class="mdi mdi-earth"></span></span>
|
||
<div>
|
||
<div class="llm-card-name">OpenRouter</div>
|
||
<div class="llm-card-sub">50+ free models · OpenAI-compatible</div>
|
||
</div>
|
||
<span class="llm-tier-badge llm-tier-free">Free</span>
|
||
</div>
|
||
<div class="llm-card-stats">
|
||
<span>20 req / min</span>
|
||
<span>200 req / day (free models)</span>
|
||
<span>Single API for all models</span>
|
||
</div>
|
||
<div class="llm-field-row">
|
||
<label class="llm-label">API key</label>
|
||
<input type="password" class="llm-input" placeholder="sk-or-…" data-llm-key="openrouter">
|
||
<a class="llm-link" href="https://openrouter.ai" target="_blank" rel="noopener">Get key <span class="mdi mdi-open-in-new link-icon"></span></a>
|
||
</div>
|
||
<div class="llm-endpoint">
|
||
<span class="llm-endpoint-label">Endpoint</span>
|
||
<code>https://openrouter.ai/api/v1</code>
|
||
</div>
|
||
<div class="llm-models">
|
||
<span class="llm-model-tag">qwen/qwen3-235b-a22b:free</span>
|
||
<span class="llm-model-tag">deepseek/deepseek-r1-0528:free</span>
|
||
<span class="llm-model-tag">mistralai/mistral-7b-instruct:free</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="llm-card">
|
||
<div class="llm-card-head">
|
||
<span class="llm-card-icon"><span class="mdi mdi-diamond-outline"></span></span>
|
||
<div>
|
||
<div class="llm-card-name">Google Gemini</div>
|
||
<div class="llm-card-sub">Gemini 2.5 Flash · Generous free tier</div>
|
||
</div>
|
||
<span class="llm-tier-badge llm-tier-free">Free</span>
|
||
</div>
|
||
<div class="llm-card-stats">
|
||
<span>250 000 tokens / min</span>
|
||
<span>15 req / min free</span>
|
||
<span>1M context window</span>
|
||
</div>
|
||
<div class="llm-field-row">
|
||
<label class="llm-label">API key</label>
|
||
<input type="password" class="llm-input" placeholder="AIza…" data-llm-key="gemini">
|
||
<a class="llm-link" href="https://ai.google.dev" target="_blank" rel="noopener">Get key <span class="mdi mdi-open-in-new link-icon"></span></a>
|
||
</div>
|
||
<div class="llm-endpoint">
|
||
<span class="llm-endpoint-label">Endpoint</span>
|
||
<code>https://generativelanguage.googleapis.com/v1beta/openai/</code>
|
||
</div>
|
||
<div class="llm-info-note">Uses OpenAI-compat wrapper — use model <code>gemini-2.5-flash</code></div>
|
||
</div>
|
||
|
||
<div class="llm-card">
|
||
<div class="llm-card-head">
|
||
<span class="llm-card-icon"><span class="mdi mdi-alpha-m-circle-outline"></span></span>
|
||
<div>
|
||
<div class="llm-card-name">Mistral AI</div>
|
||
<div class="llm-card-sub">OpenAI-compatible · EU-based</div>
|
||
</div>
|
||
<span class="llm-tier-badge llm-tier-free">Free</span>
|
||
</div>
|
||
<div class="llm-card-stats">
|
||
<span>1B tokens / month</span>
|
||
<span>2 req / min free</span>
|
||
<span>GDPR-compliant</span>
|
||
</div>
|
||
<div class="llm-field-row">
|
||
<label class="llm-label">API key</label>
|
||
<input type="password" class="llm-input" placeholder="Mistral key…" data-llm-key="mistral">
|
||
<a class="llm-link" href="https://mistral.ai" target="_blank" rel="noopener">Get key <span class="mdi mdi-open-in-new link-icon"></span></a>
|
||
</div>
|
||
<div class="llm-endpoint">
|
||
<span class="llm-endpoint-label">Endpoint</span>
|
||
<code>https://api.mistral.ai/v1</code>
|
||
</div>
|
||
<div class="llm-models">
|
||
<span class="llm-model-tag">mistral-small-latest</span>
|
||
<span class="llm-model-tag">mistral-large-latest</span>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div><!-- /online -->
|
||
|