Hugging Face's logo

Spaces:
matthoffner
/
web-llm-embed
Runtime error

App Files Community
web-llm-embed
File size: 2,321 Bytes 
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
 
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>
          <a href={"http://github.com/react-llm"}>react-llm</a> runs models in
          the browser with WebGPU and only works in Google Chrome v113 and above
          on Desktop with supported GPUs.
        </p>
      </div>
    );
  }

  if (loadingStatus.progress == 0) {
    return (
      <div style={{ padding: "10px", width: "100%" }}>
        <div
          style={{
            display: "flex",
            alignItems: "center",
            flexDirection: "column",
            gap: "10px",
          }}
        >
          <div className="lg:hidden">
            <p className="p-1">
              web-llm-embed
            </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">
              Large language model is <a href="https://www.together.xyz/blog/redpajama-3b-updates">RedPajama-INCITE-3B</a>
            </p>
            <p className="p-1">
              Embeddings are from<a href="https://github.com/xenova/transformers.js">transformers.js</a>
            </p>
          </div>
          <div>
            This will download the model and may take a few minutes. After the
            first time, it will be cached.
          </div>

          <button
            style={{ padding: "10px" }}
            size="lg"
            primary
            onClick={() => init()}
          >
            Load Model
          </button>
        </div>
      </div>
    );
  }

  return (
    <div style={{ width: "100%", margin: "10px" }}>
      Loading {loadingStatus.progress * 100}%
    </div>
  );
};

export default Loader;