<html> | |
<head> | |
<meta charset="utf-8" /> | |
<meta name="viewport" content="width=device-width" /> | |
<title>Simple Chatbot with WebLLM</title> | |
<link rel="stylesheet" href="style.css" /> | |
</head> | |
<body> | |
<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"> | |
<input type="text" id="user-input" placeholder="Type a message..." /> | |
<button id="send" disabled>Send</button> | |
</div> | |
</div> | |
<script src="./index.js" type="module"></script> | |
</body> | |
</html> | |