abdus/playground
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(chat): Update models

Browse Source
This commit is contained in:
abdus
2025-08-26 17:55:03 +02:00
parent 3883db2074
commit 66f102abc0
1 changed files with 92 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files
chat.html
+90 -76
View File
@@ -39,13 +39,18 @@
body { body {
margin: 0; margin: 0;
font-family: menlo, consolas, monospace; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
line-height: 1.6; line-height: 1.6;
font-size: 14px; font-size: 14px;
background-color: var(--bg-primary); background-color: var(--bg-primary);
color: var(--text-primary); color: var(--text-primary);
} }
a {
color: var(--text-user);
text-decoration: none;
}
.chat-container { .chat-container {
height: 100vh; height: 100vh;
display: grid; display: grid;
@@ -83,6 +88,7 @@
color: var(--text-user); color: var(--text-user);
background: var(--bg-user-message); background: var(--bg-user-message);
margin-left: auto; margin-left: auto;
white-space: pre-wrap;
} }
.system-message { .system-message {
@@ -92,6 +98,7 @@
.system-message pre, .system-message pre,
.system-message code { .system-message code {
font-family: menlo, consolas, monospace;
background: var(--bg-code); background: var(--bg-code);
padding: 0.5rem; padding: 0.5rem;
border-radius: 0.4rem; border-radius: 0.4rem;
@@ -167,6 +174,25 @@
details { details {
cursor: pointer; cursor: pointer;
} }
blockquote {
padding: 1rem;
margin: 1rem 0;
background-color: rgba(0, 0, 0, 0.1);
border-left: 3px solid dodgerblue;
}
blockquote > p + p {
margin: 1em 0 0 0;
}
blockquote > p:only-child {
margin: 0;
}
ul {
padding-left: 1rem;
}
</style> </style>
</head> </head>
<body> <body>
@@ -178,36 +204,37 @@
<details class="model-selector"> <details class="model-selector">
<summary>Model</summary> <summary>Model</summary>
<label class="model-opt__label"> <label class="model-opt__label">
<input type="radio" name="model" value="gpt-4o" checked /> <input type="radio" name="model" value="gemini-2.5-flash" />
GPT-4o Gemini 2.5 Flash
</label> </label>
<label class="model-opt__label"> <label class="model-opt__label">
<input type="radio" name="model" value="gpt-4o-mini" /> <input type="radio" name="model" value="gpt-4.1" checked />
GPT-4o mini GPT-4.1
</label>
<label class="model-opt__label">
<input type="radio" name="model" value="gpt-4.1-mini" />
GPT-4.1 mini
</label> </label>
<label class="model-opt__label"> <label class="model-opt__label">
<input type="radio" name="model" value="claude-3-7-sonnet-20250219" /> <input type="radio" name="model" value="claude-3-7-sonnet-20250219" />
Claude 3.7 Sonnet Claude 3.7 Sonnet
</label> </label>
<label class="model-opt__label">
<input type="radio" name="model" value="gemini-2.0-flash-lite" />
Gemini 2.0 Flash Lite
</label>
</details> </details>
</div> </div>
</div> </div>
<script> <script>
window.env ??= {}; window.env ??= {};
let abortController = null; let abortController = null;
const messages = [{ role: "system", content: "You are a helpful AI assistant. Do not preach about implications." }]; const messages = [{ role: "system", content: "You are a helpful AI assistant. Do not preach about implications. Answer in valid markdown." }];
const $messages = document.getElementById("messages"); const $messages = document.getElementById("messages");
const $prompt = document.getElementById("prompt"); const $prompt = document.getElementById("prompt");
const $submit = document.getElementById("submit"); const $submit = document.getElementById("submit");
window.env.MODEL ||= "gpt-4.1-mini";
document.querySelectorAll("[name=model]").forEach((modelOpt) => { document.querySelectorAll("[name=model]").forEach((modelOpt) => {
if (modelOpt.value === window.env.MODEL) { if (modelOpt.value === window.env.MODEL) {
modelOpt.checked = true; modelOpt.checked = true;
@@ -259,16 +286,12 @@
$submit.textContent = "Cancel"; $submit.textContent = "Cancel";
abortController = new AbortController(); abortController = new AbortController();
const pickedModel = document.querySelector("[name=model]:checked")?.value ?? window.env.MODEL; const pickedModel = document.querySelector("[name=model]:checked")?.value;
const chat = { const chat = {
chatgpt: (params) => chatWithOpenAI({ ...params, apiKey: window.env.OPENAI_API_KEY, model: "gpt-4o" }), "gpt-4.1": (params) => chatWithOpenAI({ ...params, apiKey: window.env.OPENAI_API_KEY, model: "gpt-4.1" }),
claude: (params) => chatWithClaude({ ...params, apiKey: window.env.ANTHROPIC_API_KEY, model: "claude-3-5-sonnet-20241022" }), "gpt-4.1-mini": (params) => chatWithOpenAI({ ...params, apiKey: window.env.OPENAI_API_KEY, model: "gpt-4.1-mini" }),
"gpt-4o": (params) => chatWithOpenAI({ ...params, apiKey: window.env.OPENAI_API_KEY, model: "gpt-4o" }), "gemini-2.5-flash": (params) => chatWithGemini({ ...params, apiKey: window.env.GEMINI_API_KEY, model: "gemini-2.5-flash" }),
"gpt-4o-mini": (params) => chatWithOpenAI({ ...params, apiKey: window.env.OPENAI_API_KEY, model: "gpt-4o-mini" }),
"gemini-1.5-flash-8b-latest": (params) => chatWithGemini({ ...params, apiKey: window.env.GEMINI_API_KEY, model: "gemini-1.5-flash-8b-latest" }),
"gemini-2.0-flash-lite": (params) => chatWithGemini({ ...params, apiKey: window.env.GEMINI_API_KEY, model: "gemini-2.0-flash-lite" }),
"claude-3-5-sonnet-20241022": (params) => chatWithClaude({ ...params, apiKey: window.env.ANTHROPIC_API_KEY, model: "claude-3-5-sonnet-20241022" }),
"claude-3-7-sonnet-20250219": (params) => chatWithClaude({ ...params, apiKey: window.env.ANTHROPIC_API_KEY, model: "claude-3-7-sonnet-20250219" }), "claude-3-7-sonnet-20250219": (params) => chatWithClaude({ ...params, apiKey: window.env.ANTHROPIC_API_KEY, model: "claude-3-7-sonnet-20250219" }),
}[pickedModel]; }[pickedModel];
@@ -287,7 +310,9 @@
messages, messages,
signal: abortController.signal, signal: abortController.signal,
}); });
if (fullResponse.trim() !== "") {
messages.push({ role: "assistant", content: fullResponse }); messages.push({ role: "assistant", content: fullResponse });
}
} catch (err) { } catch (err) {
if (err.name === "AbortError") { if (err.name === "AbortError") {
updateMessageContent(systemMessage, fullResponse + "\n[Cancelled]"); updateMessageContent(systemMessage, fullResponse + "\n[Cancelled]");
@@ -303,7 +328,11 @@
function createMessageElement(content, isUser) { function createMessageElement(content, isUser) {
const $el = document.createElement("div"); const $el = document.createElement("div");
$el.className = `message ${isUser ? "user-message" : "system-message"}`; $el.className = `message ${isUser ? "user-message" : "system-message"}`;
if (isUser) {
$el.innerText = content;
} else {
$el.innerHTML = marked.parse(content, { sanitize: true }); $el.innerHTML = marked.parse(content, { sanitize: true });
}
return $el; return $el;
} }
@@ -311,18 +340,49 @@
$el.innerHTML = marked.parse(markdown, { sanitize: true }); $el.innerHTML = marked.parse(markdown, { sanitize: true });
} }
function scrollToBottom($el) { function throttle(func, ms) {
$el.scrollTop = $el.scrollHeight; let lastCall = 0;
let timeoutId = null;
let lastArgs = null;
return function throttled(...args) {
const now = Date.now();
const remaining = ms - (now - lastCall);
if (remaining <= 0) {
if (timeoutId) {
clearTimeout(timeoutId);
timeoutId = null;
}
lastCall = now;
func.apply(this, args);
} else {
lastArgs = args;
if (!timeoutId) {
timeoutId = setTimeout(() => {
lastCall = Date.now();
timeoutId = null;
func.apply(this, lastArgs);
}, remaining);
}
}
};
} }
async function chatWithOpenAI({ onContent, messages, signal, apiKey, model }) { // Throttled version to use in your code
const scrollToBottom = throttle(($el) => {
const isScrolledUp = $el.scrollHeight - $el.clientHeight - $el.scrollTop > 100;
if (!isScrolledUp) {
$el.scrollTop = $el.scrollHeight;
}
}, 200);
async function chatWithOpenAI({ baseUrl = "https://api.openai.com/v1", onContent, messages, signal, apiKey, model }) {
const payload = { const payload = {
model, model,
messages, messages,
stream: true, stream: true,
}; };
const response = await fetch("https://api.openai.com/v1/chat/completions", { const response = await fetch(`${baseUrl}/chat/completions`, {
method: "POST", method: "POST",
headers: { headers: {
"Content-Type": "application/json", "Content-Type": "application/json",
@@ -413,61 +473,15 @@
} }
} }
async function chatWithGemini({ onContent, messages, signal, apiKey, model = "gemini-1.5-flash-8b" }) { async function chatWithGemini({ onContent, messages, signal, apiKey, model = "gemini-2.5-flash" }) {
const payload = { return chatWithOpenAI({
contents: messages.map((msg) => ({ baseUrl: "https://generativelanguage.googleapis.com/v1beta/openai",
role: msg.role === "system" ? "user" : msg.role, onContent,
parts: [{ text: msg.content }], messages,
})),
generationConfig: {
temperature: 0,
},
safetySettings: [
{ category: "HARM_CATEGORY_DANGEROUS_CONTENT", threshold: "BLOCK_NONE" },
{ category: "HARM_CATEGORY_HARASSMENT", threshold: "BLOCK_NONE" },
{ category: "HARM_CATEGORY_HATE_SPEECH", threshold: "BLOCK_NONE" },
{ category: "HARM_CATEGORY_SEXUALLY_EXPLICIT", threshold: "BLOCK_NONE" },
],
};
const response = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/${model}:streamGenerateContent?alt=sse`, {
method: "POST",
headers: {
"Content-Type": "application/json",
"x-goog-api-key": apiKey,
},
body: JSON.stringify(payload),
signal, signal,
apiKey,
model,
}); });
const reader = response.body.getReader();
const decoder = new TextDecoder();
while (true) {
const { done, value } = await reader.read();
if (done) break;
const text = decoder.decode(value, { stream: true });
const lines = text
.split("\n")
.filter((line) => line.trim())
.map((line) => line.replace("data: ", ""));
for (const line of lines) {
if (line === "") continue;
try {
const parsed = JSON.parse(line);
if (parsed.candidates?.[0]?.content?.parts?.[0]?.text) {
const content = parsed.candidates[0].content.parts[0].text;
if (content) {
await onContent(content);
}
}
} catch (e) {
console.error("Error parsing line:", e);
}
}
}
} }
</script> </script>
</body> </body>