feat(chat): Update models
This commit is contained in:
@@ -39,13 +39,18 @@
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: menlo, consolas, monospace;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.6;
|
||||
font-size: 14px;
|
||||
background-color: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--text-user);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.chat-container {
|
||||
height: 100vh;
|
||||
display: grid;
|
||||
@@ -83,6 +88,7 @@
|
||||
color: var(--text-user);
|
||||
background: var(--bg-user-message);
|
||||
margin-left: auto;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.system-message {
|
||||
@@ -92,6 +98,7 @@
|
||||
|
||||
.system-message pre,
|
||||
.system-message code {
|
||||
font-family: menlo, consolas, monospace;
|
||||
background: var(--bg-code);
|
||||
padding: 0.5rem;
|
||||
border-radius: 0.4rem;
|
||||
@@ -167,6 +174,25 @@
|
||||
details {
|
||||
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>
|
||||
</head>
|
||||
<body>
|
||||
@@ -178,36 +204,37 @@
|
||||
<details class="model-selector">
|
||||
<summary>Model</summary>
|
||||
<label class="model-opt__label">
|
||||
<input type="radio" name="model" value="gpt-4o" checked />
|
||||
GPT-4o
|
||||
<input type="radio" name="model" value="gemini-2.5-flash" />
|
||||
Gemini 2.5 Flash
|
||||
</label>
|
||||
|
||||
<label class="model-opt__label">
|
||||
<input type="radio" name="model" value="gpt-4o-mini" />
|
||||
GPT-4o mini
|
||||
<input type="radio" name="model" value="gpt-4.1" checked />
|
||||
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 class="model-opt__label">
|
||||
<input type="radio" name="model" value="claude-3-7-sonnet-20250219" />
|
||||
Claude 3.7 Sonnet
|
||||
</label>
|
||||
|
||||
<label class="model-opt__label">
|
||||
<input type="radio" name="model" value="gemini-2.0-flash-lite" />
|
||||
Gemini 2.0 Flash Lite
|
||||
</label>
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
window.env ??= {};
|
||||
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 $prompt = document.getElementById("prompt");
|
||||
const $submit = document.getElementById("submit");
|
||||
|
||||
window.env.MODEL ||= "gpt-4.1-mini";
|
||||
document.querySelectorAll("[name=model]").forEach((modelOpt) => {
|
||||
if (modelOpt.value === window.env.MODEL) {
|
||||
modelOpt.checked = true;
|
||||
@@ -259,16 +286,12 @@
|
||||
$submit.textContent = "Cancel";
|
||||
abortController = new AbortController();
|
||||
|
||||
const pickedModel = document.querySelector("[name=model]:checked")?.value ?? window.env.MODEL;
|
||||
const pickedModel = document.querySelector("[name=model]:checked")?.value;
|
||||
|
||||
const chat = {
|
||||
chatgpt: (params) => chatWithOpenAI({ ...params, apiKey: window.env.OPENAI_API_KEY, model: "gpt-4o" }),
|
||||
claude: (params) => chatWithClaude({ ...params, apiKey: window.env.ANTHROPIC_API_KEY, model: "claude-3-5-sonnet-20241022" }),
|
||||
"gpt-4o": (params) => chatWithOpenAI({ ...params, apiKey: window.env.OPENAI_API_KEY, model: "gpt-4o" }),
|
||||
"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" }),
|
||||
"gpt-4.1": (params) => chatWithOpenAI({ ...params, apiKey: window.env.OPENAI_API_KEY, model: "gpt-4.1" }),
|
||||
"gpt-4.1-mini": (params) => chatWithOpenAI({ ...params, apiKey: window.env.OPENAI_API_KEY, model: "gpt-4.1-mini" }),
|
||||
"gemini-2.5-flash": (params) => chatWithGemini({ ...params, apiKey: window.env.GEMINI_API_KEY, model: "gemini-2.5-flash" }),
|
||||
"claude-3-7-sonnet-20250219": (params) => chatWithClaude({ ...params, apiKey: window.env.ANTHROPIC_API_KEY, model: "claude-3-7-sonnet-20250219" }),
|
||||
}[pickedModel];
|
||||
|
||||
@@ -287,7 +310,9 @@
|
||||
messages,
|
||||
signal: abortController.signal,
|
||||
});
|
||||
if (fullResponse.trim() !== "") {
|
||||
messages.push({ role: "assistant", content: fullResponse });
|
||||
}
|
||||
} catch (err) {
|
||||
if (err.name === "AbortError") {
|
||||
updateMessageContent(systemMessage, fullResponse + "\n[Cancelled]");
|
||||
@@ -303,7 +328,11 @@
|
||||
function createMessageElement(content, isUser) {
|
||||
const $el = document.createElement("div");
|
||||
$el.className = `message ${isUser ? "user-message" : "system-message"}`;
|
||||
if (isUser) {
|
||||
$el.innerText = content;
|
||||
} else {
|
||||
$el.innerHTML = marked.parse(content, { sanitize: true });
|
||||
}
|
||||
return $el;
|
||||
}
|
||||
|
||||
@@ -311,18 +340,49 @@
|
||||
$el.innerHTML = marked.parse(markdown, { sanitize: true });
|
||||
}
|
||||
|
||||
function scrollToBottom($el) {
|
||||
$el.scrollTop = $el.scrollHeight;
|
||||
function throttle(func, ms) {
|
||||
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 = {
|
||||
model,
|
||||
messages,
|
||||
stream: true,
|
||||
};
|
||||
|
||||
const response = await fetch("https://api.openai.com/v1/chat/completions", {
|
||||
const response = await fetch(`${baseUrl}/chat/completions`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
@@ -413,61 +473,15 @@
|
||||
}
|
||||
}
|
||||
|
||||
async function chatWithGemini({ onContent, messages, signal, apiKey, model = "gemini-1.5-flash-8b" }) {
|
||||
const payload = {
|
||||
contents: messages.map((msg) => ({
|
||||
role: msg.role === "system" ? "user" : msg.role,
|
||||
parts: [{ text: msg.content }],
|
||||
})),
|
||||
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),
|
||||
async function chatWithGemini({ onContent, messages, signal, apiKey, model = "gemini-2.5-flash" }) {
|
||||
return chatWithOpenAI({
|
||||
baseUrl: "https://generativelanguage.googleapis.com/v1beta/openai",
|
||||
onContent,
|
||||
messages,
|
||||
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>
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user