Hugging Face's logo

Spaces:
reach-vb
/
webllm-simple-chat
Running

App Files Community
1
webllm-simple-chat
File size: 2,879 Bytes 
5ca5f25
045cfb2
 
 
 
 
 
 
 
 
 
 
638fed6
045cfb2
 
ad86f71
045cfb2
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
9091160
5ca5f25
 
 
 
 
045cfb2
5ca5f25
045cfb2
9091160
5ca5f25
 
 
 
ad86f71
045cfb2
ad86f71
 
5ca5f25
 
638fed6
 
 
 
 
 
 
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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>WebLLM Simple Chat Space</title>
  <link rel="stylesheet" href="styles/katex.min.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css" />
  <style>
    /* Add some basic styling to make the output look prettier */
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
      background-color: #f0f0f0;
    }

    main {
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
      background-color: #fff;
      border: 1px solid #ddd;
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    h1 {
      color: #00698f;
    }

    section {
      margin-bottom: 20px;
    }

   .download-container {
      margin-top: 10px;
    }

   .chat-container {
      margin-top: 20px;
    }

   .chat-box {
      padding: 10px;
      border: 1px solid #ddd;
      border-radius: 10px;
      background-color: #f9f9f9;
    }

   .chat-input-container {
      margin-top: 10px;
    }

   .chat-input {
      display: flex;
      align-items: center;
    }

    #user-input {
      width: 80%;
      padding: 10px;
      border: 1px solid #ddd;
      border-radius: 10px;
    }

    #send {
      width: 20%;
      padding: 10px;
      background-color: #4CAF50;
      color: #fff;
      border: none;
      border-radius: 10px;
      cursor: pointer;
    }

    #send:hover {
      background-color: #3e8e41;
    }

    #send:disabled {
      background-color: #ccc;
      cursor: not-allowed;
    }
  </style>
  <link rel="stylesheet" href="styles/style.css" />
</head>

<body>
  <main>
    <h1>WebLLM Simple Chat Space</h1>
    <p>
      This is a minimal demo app showcasing how WebLLM enables AI chat directly in your local browser.
      You might also enjoy exploring <a href="https://chat.webllm.ai/" rel="nofollow noopener noreferrer" target="_blank">WebLLM Chat</a>!
    </p>

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

    <section>
      <h2>Step 2: Chat</h2>
      <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>
    </section>
  </main>

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