Spaces:
Running
Running
Commit
•
ad86f71
1
Parent(s):
dff0f00
feat: add card link to WebLLM Chat
Browse files- README.md +1 -1
- index.html +20 -6
- style.css +30 -0
README.md
CHANGED
|
@@ -1,5 +1,5 @@
|
|
| 1 |
---
|
| 2 |
-
title: Webllm Chat
|
| 3 |
emoji: 💬
|
| 4 |
colorFrom: blue
|
| 5 |
colorTo: indigo
|
|
|
|
| 1 |
---
|
| 2 |
+
title: Webllm Simple Chat
|
| 3 |
emoji: 💬
|
| 4 |
colorFrom: blue
|
| 5 |
colorTo: indigo
|
index.html
CHANGED
|
@@ -3,12 +3,23 @@
|
|
| 3 |
<head>
|
| 4 |
<meta charset="utf-8" />
|
| 5 |
<meta name="viewport" content="width=device-width" />
|
| 6 |
-
<title>WebLLM Chat Space</title>
|
| 7 |
<link rel="stylesheet" href="style.css" />
|
| 8 |
</head>
|
| 9 |
|
| 10 |
<body>
|
| 11 |
<main>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 12 |
<p>Step 1: Initialize WebLLM and Download Model</p>
|
| 13 |
<div class="download-container">
|
| 14 |
<select id="model-selection"></select>
|
|
@@ -21,11 +32,14 @@
|
|
| 21 |
<div id="chat-box" class="chat-box"></div>
|
| 22 |
<div id="chat-stats" class="chat-stats hidden"></div>
|
| 23 |
<div class="chat-input-container">
|
| 24 |
-
|
| 25 |
-
|
| 26 |
-
|
| 27 |
-
|
| 28 |
-
|
|
|
|
|
|
|
|
|
|
| 29 |
</div>
|
| 30 |
</div>
|
| 31 |
</main>
|
|
|
|
| 3 |
<head>
|
| 4 |
<meta charset="utf-8" />
|
| 5 |
<meta name="viewport" content="width=device-width" />
|
| 6 |
+
<title>WebLLM Simple Chat Space</title>
|
| 7 |
<link rel="stylesheet" href="style.css" />
|
| 8 |
</head>
|
| 9 |
|
| 10 |
<body>
|
| 11 |
<main>
|
| 12 |
+
<div class="card">
|
| 13 |
+
<p>
|
| 14 |
+
This is a simple DEMO page demonstrating how WebLLM supports chatting
|
| 15 |
+
with AI running in your local browser. For a better chat experience,
|
| 16 |
+
check out WebLLM Chat.
|
| 17 |
+
</p>
|
| 18 |
+
<a href="https://chat.webllm.ai/" rel="nofollow noopener noreferrer" target="_blank">
|
| 19 |
+
Go to Chat
|
| 20 |
+
</a>
|
| 21 |
+
</div>
|
| 22 |
+
|
| 23 |
<p>Step 1: Initialize WebLLM and Download Model</p>
|
| 24 |
<div class="download-container">
|
| 25 |
<select id="model-selection"></select>
|
|
|
|
| 32 |
<div id="chat-box" class="chat-box"></div>
|
| 33 |
<div id="chat-stats" class="chat-stats hidden"></div>
|
| 34 |
<div class="chat-input-container">
|
| 35 |
+
<div class="chat-input">
|
| 36 |
+
<input
|
| 37 |
+
type="text"
|
| 38 |
+
id="user-input"
|
| 39 |
+
placeholder="Type a message..."
|
| 40 |
+
/>
|
| 41 |
+
<button id="send" disabled>Send</button>
|
| 42 |
+
</div>
|
| 43 |
</div>
|
| 44 |
</div>
|
| 45 |
</main>
|
style.css
CHANGED
|
@@ -127,3 +127,33 @@ button:hover:not(:disabled) {
|
|
| 127 |
.hidden {
|
| 128 |
display: none;
|
| 129 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 127 |
.hidden {
|
| 128 |
display: none;
|
| 129 |
}
|
| 130 |
+
|
| 131 |
+
.card {
|
| 132 |
+
background-color: #c3dffc;
|
| 133 |
+
padding: 2rem;
|
| 134 |
+
border-radius: 1rem;
|
| 135 |
+
border: 1px solid #94c6fb;
|
| 136 |
+
display: flex;
|
| 137 |
+
margin-bottom: 1rem;
|
| 138 |
+
gap: 1.5rem;
|
| 139 |
+
align-items: center;
|
| 140 |
+
}
|
| 141 |
+
|
| 142 |
+
.card p {
|
| 143 |
+
margin: 0;
|
| 144 |
+
}
|
| 145 |
+
|
| 146 |
+
.card a {
|
| 147 |
+
background-color: #ffffff;
|
| 148 |
+
border: 1px solid #63aaf5;
|
| 149 |
+
padding: 1rem;
|
| 150 |
+
border-radius: 1rem;
|
| 151 |
+
white-space: nowrap;
|
| 152 |
+
color: black;
|
| 153 |
+
text-decoration: none;
|
| 154 |
+
}
|
| 155 |
+
|
| 156 |
+
.card a:hover {
|
| 157 |
+
background-color: #deeeff;
|
| 158 |
+
color: rgb(0, 0, 0);
|
| 159 |
+
}
|