Laurence
e1bf5a2d7a
Initial static site (no framework, no build) for the 12 Hobbies Studio maker studio, featuring OpenScribe as the flagship project. What changed: - index.html: studio home - hero, featured OpenScribe block with sync diagram, projects grid, about. British spelling, dark warm theme. - projects/openscribe.html: OpenScribe product page. Leads with the "bring your own AI" differentiator, an interactive provider picker, the feature set, a four-step build guide, and licensing. - assets/styles.css: all styling (palette, cards, featured layout, picker, code blocks). - assets/app.js: dependency-free provider picker that swaps a sample server .env snippet across Ollama / OpenAI / Anthropic / Groq / LM Studio - on message with OpenScribe's any-AI design. - README, LICENSE (MIT for site code), .gitignore. Why: - The user asked to develop a site on 12 Hobbies Studio; this is the first cut, showcasing OpenScribe and the connect-to-any-AI capability. Branding uses sensible defaults and is trivially editable (noted in README). Notes: - Pure static files; deploy to any static host or Forgejo Pages. Validated: app.js passes node --check; HTML section tags balanced. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
86 lines
3.1 KiB
JavaScript
86 lines
3.1 KiB
JavaScript
// SPDX-License-Identifier: MIT
|
|
// Interactive AI-provider picker for the OpenScribe page. Swaps a sample server .env
|
|
// snippet as you choose a provider - the whole point of OpenScribe: bring your own AI.
|
|
(function () {
|
|
var PROVIDERS = {
|
|
ollama: {
|
|
label: "Ollama (local)",
|
|
lines: [
|
|
["c", "# Fully local and self-hosted - no cloud, no key"],
|
|
["k", "OPENSCRIBE_LLM_PROVIDER", "ollama"],
|
|
["k", "OPENSCRIBE_OLLAMA_URL", "http://localhost:11434"],
|
|
["k", "OPENSCRIBE_OLLAMA_MODEL", "llama3.1"],
|
|
],
|
|
},
|
|
openai: {
|
|
label: "OpenAI",
|
|
lines: [
|
|
["c", "# Any OpenAI-compatible endpoint works the same way"],
|
|
["k", "OPENSCRIBE_LLM_PROVIDER", "openai_compatible"],
|
|
["k", "OPENSCRIBE_LLM_BASE_URL", "https://api.openai.com/v1"],
|
|
["k", "OPENSCRIBE_LLM_API_KEY", "sk-..."],
|
|
["k", "OPENSCRIBE_LLM_MODEL", "gpt-4o-mini"],
|
|
],
|
|
},
|
|
anthropic: {
|
|
label: "Anthropic (Claude)",
|
|
lines: [
|
|
["c", "# Commercial Claude via the official Anthropic API"],
|
|
["k", "OPENSCRIBE_LLM_PROVIDER", "anthropic"],
|
|
["k", "OPENSCRIBE_LLM_API_KEY", "sk-ant-..."],
|
|
["k", "OPENSCRIBE_LLM_MODEL", "claude-opus-4-8"],
|
|
],
|
|
},
|
|
groq: {
|
|
label: "Groq",
|
|
lines: [
|
|
["c", "# Fast + cheap, OpenAI-compatible"],
|
|
["k", "OPENSCRIBE_LLM_PROVIDER", "openai_compatible"],
|
|
["k", "OPENSCRIBE_LLM_BASE_URL", "https://api.groq.com/openai/v1"],
|
|
["k", "OPENSCRIBE_LLM_API_KEY", "gsk_..."],
|
|
["k", "OPENSCRIBE_LLM_MODEL", "llama-3.3-70b-versatile"],
|
|
],
|
|
},
|
|
lmstudio: {
|
|
label: "LM Studio (local)",
|
|
lines: [
|
|
["c", "# A local model server on your LAN, OpenAI-compatible"],
|
|
["k", "OPENSCRIBE_LLM_PROVIDER", "openai_compatible"],
|
|
["k", "OPENSCRIBE_LLM_BASE_URL", "http://localhost:1234/v1"],
|
|
["k", "OPENSCRIBE_LLM_MODEL", "local-model"],
|
|
],
|
|
},
|
|
};
|
|
|
|
function esc(s) { return s.replace(/&/g, "&").replace(/</g, "<"); }
|
|
|
|
function render(key) {
|
|
var p = PROVIDERS[key];
|
|
var html = p.lines.map(function (l) {
|
|
if (l[0] === "c") return '<span class="c">' + esc(l[1]) + "</span>";
|
|
return '<span class="k">' + esc(l[1]) + "</span>=" + esc(l[2]);
|
|
}).join("\n");
|
|
document.getElementById("env-out").innerHTML = html;
|
|
}
|
|
|
|
function init() {
|
|
var picker = document.getElementById("provider-picker");
|
|
if (!picker) return;
|
|
Object.keys(PROVIDERS).forEach(function (key, i) {
|
|
var b = document.createElement("button");
|
|
b.type = "button";
|
|
b.textContent = PROVIDERS[key].label;
|
|
b.setAttribute("aria-pressed", i === 0 ? "true" : "false");
|
|
b.addEventListener("click", function () {
|
|
picker.querySelectorAll("button").forEach(function (x) { x.setAttribute("aria-pressed", "false"); });
|
|
b.setAttribute("aria-pressed", "true");
|
|
render(key);
|
|
});
|
|
picker.appendChild(b);
|
|
});
|
|
render(Object.keys(PROVIDERS)[0]);
|
|
}
|
|
|
|
if (document.readyState !== "loading") init();
|
|
else document.addEventListener("DOMContentLoaded", init);
|
|
})();
|