<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>WebLLM Llama 3.2 Chat</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"
/>
<link rel="stylesheet" href="styles/style.css" />
</head>
<body>
<main>
<h1>WebLLM Llama 3.2 Chat</h1>
<p>
This space enables AI chat with Llama 3.2 models directly in your local
browser, empowered by WebLLM.
</p>
<h2>Step 1: Configure And Download Model</h2>
<div class="card vertical">
<form class="configure-form">
<!-- Model Size -->
<div class="form-group">
<label for="model_size">Model Size:</label>
<select id="model_size" name="model_size" value="1B">
<option value="1B">1B</option>
<option value="3B">3B</option>
</select>
</div>
<!-- Quantization -->
<div class="form-group">
<label for="quantization">Quantization:</label>
<select id="quantization" name="quantization" value="q4f16_1">
<option value="q4f16_1">q4f16</option>
<option value="q4f32_1">q4f32</option>
<option value="q0f32">q0f32</option>
<option value="q0f16">q0f16</option>
</select>
</div>
<!-- Context Window -->
<div class="form-group">
<label for="context">Context Window:</label>
<select id="context" name="context">
<option value="1024">1K</option>
<option value="2048">2K</option>
<option value="4096">4K</option>
<option value="8192">8K</option>
<option value="16384">16K</option>
<option value="32768">32K</option>
<option value="65536">64K</option>
<option value="131072">128K</option>
</select>
</div>
<!-- Temperature -->
<div class="form-group">
<label for="temperature"
>Temperature:
<span id="temperature-value" class="range-value">1.00</span></label
>
<input
type="range"
id="temperature"
name="temperature"
min="0.0"
max="1.0"
step="0.01"
value="1.0"
oninput="document.getElementById('temperature-value').textContent = Number(this.value).toFixed(2)"
/>
</div>
<!-- Top-p -->
<div class="form-group">
<label for="top_p"
>Top P:
<span id="top_p-value" class="range-value">1.00</span></label
>
<input
type="range"
id="top_p"
name="top_p"
min="0.01"
max="1.0"
step="0.01"
value="1.0"
oninput="document.getElementById('top_p-value').textContent = Number(this.value).toFixed(2)"
/>
</div>
<!-- Presence Penalty -->
<div class="form-group">
<label for="presence_penalty"
>Presence Penalty:
<span id="presence_penalty-value" class="range-value"
>0.00</span
></label
>
<input
type="range"
id="presence_penalty"
name="presence_penalty"
min="0.0"
max="1.0"
step="0.01"
value="0.0"
oninput="document.getElementById('presence_penalty-value').textContent = Number(this.value).toFixed(2)"
/>
</div>
<!-- Frequency Penalty -->
<div class="form-group">
<label for="frequency_penalty"
>Frequency Penalty:
<span id="frequency_penalty-value" class="range-value"
>0.00</span
></label
>
<input
type="range"
id="frequency_penalty"
name="frequency_penalty"
min="0.0"
max="1.0"
step="0.01"
value="0.0"
oninput="document.getElementById('frequency_penalty-value').textContent = Number(this.value).toFixed(2)"
/>
</div>
</form>
<button id="download" disabled>Loading...</button>
</div>
<p id="download-status" class="hidden"></p>
<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>
</main>
<script src="./dist/index.js" type="module"></script>
</body>
</html>