Spaces:
Running
Running
File size: 4,811 Bytes
5ca5f25 407ff24 5ca5f25 bba96cd c3fc836 bba96cd c3fc836 5ca5f25 36784c4 5ca5f25 bba96cd 9091160 bba96cd 9091160 ad86f71 bba96cd 027d30a bba96cd d79e943 0bb6b1b bba96cd 0bb6b1b bba96cd 0bb6b1b 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 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>WebLLM Phi 3.5 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 Phi 3.5 Chat</h1>
<p>
This space enables AI chat with Phi 3.5 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">
<!-- Quantization -->
<div class="form-group">
<label for="quantization">Quantization:</label>
<select id="quantization" name="quantization">
<option value="q4f16">q4f16</option>
<option value="q4f32">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">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>
|