Spaces:
Runtime error
Runtime error
File size: 2,403 Bytes
ed9ee96 8de5da8 ed9ee96 8de5da8 ed9ee96 22ff301 ed9ee96 8de5da8 ed9ee96 8de5da8 ed9ee96 22ff301 8de5da8 22ff301 ed9ee96 8de5da8 ed9ee96 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 |
import useLLM from "@react-llm/headless";
const Loader = () => {
const { loadingStatus, isReady, init, gpuDevice } = useLLM();
if (isReady) return null;
if (loadingStatus.progress === 1) return null;
if (gpuDevice.unsupportedReason) {
return (
<div style={{ fontSize: "20px" }}>
<p style={{ color: "red" }}>Sorry, unsupported!</p>
<p> Reason: {gpuDevice.unsupportedReason}</p>
<p>
This project runs models in
the browser with WebGPU and only works in Google Chrome v113 and above
on Desktop with supported GPUs. Experimental support may be available for desktop Firefox and Safari Tech Preview.
</p>
</div>
);
}
if (loadingStatus.progress == 0) {
return (
<div style={{ padding: "10px", width: "100%" }}>
<div
style={{
display: "flex",
alignItems: "center",
flexDirection: "column",
gap: "10px",
fontSize: "24px",
textAlign: "center"
}}
>
<div className="lg:hidden">
<h1 className="p-1">
<b>💎 web-llm-embed 📄</b>
</h1>
<p className="p-1">
Proof of concept using Transformers.js embeddings in a WebGPU powered LLM chat.
</p>
<p className="p-1">
No data is sent to the server. Conversations are cached in local
storage.
</p>
<p className="p-1">
WebGPU is only supported in Desktop Google Chrome 113
</p>
<p className="p-1">
Powered by Apache TVM and MLC Relax Runtime.
</p>
<p className="p-1">
Model is Vicuna 7b trained by LMSys.
</p>
</div>
<div>
This will download the model (~4GB) and may take a few minutes. After the
first time, it will be cached. It can be deleted in Dev Tools Cache Storage (tvmjs).
</div>
<button
style={{ padding: "10px" }}
size="lg"
onClick={() => init()}
>
Load Model
</button>
</div>
</div>
);
}
return (
<div style={{ width: "100%", margin: "10px" }}>
Loading {loadingStatus.progress * 100}%
</div>
);
};
export default Loader; |