This repository has been archived by the owner on Oct 10, 2024. It is now read-only.
Streaming doesn't work in the browser #4
Comments
|
This package should work in the browser: https://www.npmjs.com/package/mistral-edge |
|
Actually, it looks like there's also a CORS issue but this can be solved with corsproxy.io Here's a very minimal example <!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>mistral-edge browser example</title>
<!-- Including mistral-edge from unpkg -->
<script src="https://www.unpkg.com/mistral-edge/dist/index.min.js"></script>
</head>
<body>
<h1><code>mistral-edge</code> browser example</h1>
<textarea id="input" placeholder="Your request here">Write a haiku about cheese</textarea>
<button id="run">Run</button>
<pre id="output"></pre>
<script>
const runButton = document.getElementById("run");
const outputElement = document.getElementById("output");
let fullOutput;
runButton.addEventListener("click", async function () {
fullOutput = "";
const tokenStream = window["mistral-edge"].streamMistralChat(
[{ role: "user", content: document.getElementById("input").value }],
{
model: "mistral-medium",
temperature: 0.7,
},
{
apiKey: "dN3DwBHXeml44luKElOmz6tHW3kVzZxL",
apiUrl:
"https://corsproxy.io/?https://api.mistral.ai/v1/chat/completions",
},
);
let fullResponse = "";
for await (const token of tokenStream) {
fullResponse += token;
outputElement.textContent = fullResponse;
}
});
</script>
</body>
</html> |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
I ended up just using my own fetch based impl that uses
eventsource-parserbut took some time to leave some feedback here.The text was updated successfully, but these errors were encountered: