Streaming doesn't work in the browser
sublimator opened this issue · comments
The provided value 'stream' is not a valid enum value of type XMLHttpRequestResponseType.
I ended up just using my own fetch based impl that uses eventsource-parser but took some time to leave some feedback here.
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>