File size: 5,235 Bytes
5ca5f25 407ff24 5ca5f25 8633710 c3fc836 bba96cd c3fc836 5ca5f25 36784c4 5ca5f25 8633710 9091160 8633710 9091160 ad86f71 bba96cd 8633710 847e2f0 8633710 847e2f0 bba96cd 2819fb4 847e2f0 bba96cd 027d30a bba96cd 8633710 bba96cd 8633710 bba96cd d79e943 8633710 bba96cd 0bb6b1b bba96cd 8633710 bba96cd f7c6c35 5ca5f25 9091160 5ca5f25 ad86f71 5ca5f25 c3fc836 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 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 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>WebLLM DeepSeek R1 Distill</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 DeepSeek R1 Distill</h1>
<p>
A space to chat with DeepSeek-R1-Distill-Llama-8B and Qwen-7B.
The models run directly in your local browser, empowered by WebLLM, all WebGPU-accelerated.
</p>
<h2>Step 1: Configure And Download Model</h2>
<div class="card vertical">
<form class="configure-form">
<!-- Model -->
<div class="form-group">
<label for="model">DeepSeek R1 Distill:</label>
<select id="model" name="model" value="Llama-8B">
<option value="Llama-8B">Llama-8B</option>
<option value="Qwen-7B">Qwen-7B</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>
</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">0.60</span></label
>
<input
type="range"
id="temperature"
name="temperature"
min="0.0"
max="1.0"
step="0.01"
value="0.6"
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">0.95</span></label
>
<input
type="range"
id="top_p"
name="top_p"
min="0.01"
max="1.0"
step="0.01"
value="0.95"
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>
|