File size: 2,377 Bytes
5ca5f25
407ff24
5ca5f25
 
 
ad86f71
5ca5f25
 
36784c4
5ca5f25
 
ad86f71
 
6ebfe81
 
 
ad86f71
6ebfe81
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
ad86f71
 
 
5ca5f25
 
 
 
 
 
 
 
 
 
 
 
ad86f71
 
 
 
 
 
 
 
5ca5f25
 
 
 
 
 
407ff24
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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>WebLLM Simple Chat Space</title>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <main>
      <div class="card">
        <p>
          This is a minimal demo app showcasing how WebLLM enables AI chat
          directly in your local browser. You might also enjoy exploring
          <b>WebLLM Chat</b>!
        </p>
        <a
          href="https://chat.webllm.ai/"
          rel="nofollow noopener noreferrer"
          target="_blank"
        >
          Try WebLLM Chat
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="16px"
            height="16px"
            viewBox="0 0 24 24"
            fill="none"
          >
            <g id="Interface / External_Link">
              <path
                id="Vector"
                d="M10.0002 5H8.2002C7.08009 5 6.51962 5 6.0918 5.21799C5.71547 5.40973 5.40973 5.71547 5.21799 6.0918C5 6.51962 5 7.08009 5 8.2002V15.8002C5 16.9203 5 17.4801 5.21799 17.9079C5.40973 18.2842 5.71547 18.5905 6.0918 18.7822C6.5192 19 7.07899 19 8.19691 19H15.8031C16.921 19 17.48 19 17.9074 18.7822C18.2837 18.5905 18.5905 18.2839 18.7822 17.9076C19 17.4802 19 16.921 19 15.8031V14M20 9V4M20 4H15M20 4L13 11"
                stroke="#000000"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
            </g>
          </svg>
        </a>
      </div>

      <p>Step 1: Initialize WebLLM and Download Model</p>
      <div class="download-container">
        <select id="model-selection"></select>
        <button id="download">Download</button>
      </div>
      <p id="download-status" class="hidden"></p>

      <p>Step 2: Chat</p>
      <div class="chat-container">
        <div id="chat-box" class="chat-box"></div>
        <div id="chat-stats" class="chat-stats hidden"></div>
        <div class="chat-input-container">
          <div class="chat-input">
            <input
              type="text"
              id="user-input"
              placeholder="Type a message..."
            />
            <button id="send" disabled>Send</button>
          </div>
        </div>
      </div>
    </main>

    <script src="./index.js" type="module"></script>
  </body>
</html>