File size: 6,393 Bytes
86c0028 4d470ff 86c0028 | 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 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 | <!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Qwen 3.5 — In-Browser Vision Chat</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Instrument+Serif:ital@0;1&family=Manrope:wght@300;400;500;600;700&display=swap"
rel="stylesheet"
/>
<link
rel="icon"
href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>⚡️</text></svg>"
/>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div id="landing" class="screen active">
<div class="landing-glow"></div>
<div class="landing-tag">Multimodal AI · 100% Local</div>
<h1 class="landing-title">Qwen 3.5 <em>Vision</em></h1>
<p class="landing-sub">
Run a multimodal vision-language model entirely in your browser. No
server, no API keys — powered by Transformers.js and WebGPU.
</p>
<div class="landing-specs">
<div class="spec">
<div class="spec-value">Vision + Language</div>
<div class="spec-label">Unified Multimodal</div>
</div>
<div class="spec">
<div class="spec-value">201 Languages</div>
<div class="spec-label">Global Coverage</div>
</div>
<div class="spec">
<div class="spec-value">Reasoning</div>
<div class="spec-label">Code · Agents · Visual</div>
</div>
</div>
<div class="btn-load-group">
<button class="btn-load" id="btnLoad">
Load Model (<span id="modelSizeLabel">0.8B</span>)
</button>
<button
class="btn-load-arrow"
id="btnModelArrow"
title="Choose model size"
>
▾
</button>
<select class="model-select" id="modelSelect">
<option value="onnx-community/Qwen3.5-0.8B-ONNX">0.8B</option>
<option value="onnx-community/Qwen3.5-2B-ONNX">2B</option>
<option value="onnx-community/Qwen3.5-4B-ONNX">4B</option>
</select>
</div>
<div class="landing-footer">
Built with
<a href="https://huggingface.co/docs/transformers.js" target="_blank"
>Transformers.js</a
>
</div>
</div>
<div id="loading" class="screen">
<div class="loader-ring"></div>
<div>
<div class="loader-text" id="loaderText">Initializing model…</div>
<div class="loader-sub">
Model weights are cached for future visits.
</div>
</div>
</div>
<div id="chat" class="screen">
<div class="chat-header">
<div class="chat-header-left">
<div class="chat-avatar">Q</div>
<div>
<div class="chat-header-title">Qwen 3.5 Vision</div>
<div class="chat-header-status">Ready on WebGPU</div>
</div>
</div>
<div class="chat-header-controls">
<label
class="toggle-reasoning"
title="Let the model think step-by-step before answering"
>
<input type="checkbox" id="reasoningToggle" />
<span class="toggle-slider"></span>
<span class="toggle-label">Reasoning</span>
</label>
<button class="btn-reset" id="btnReset">Reset Chat</button>
</div>
</div>
<div class="error-banner" id="errorBanner"></div>
<div class="chat-messages" id="chatMessages">
<div class="welcome-msg">
<h3>Start a conversation</h3>
<p>
Optionally attach an image, then type your message.<br />The model
runs entirely in your browser.
</p>
</div>
</div>
<div class="chat-input-area">
<div class="image-preview-bar" id="imagePreview">
<img class="image-preview-thumb" id="imageThumb" src="" alt="" />
<span class="image-preview-name" id="imageName"></span>
<button class="btn-remove-image" id="btnRemoveImage">×</button>
</div>
<div class="chat-input-row">
<button class="btn-attach" id="btnAttach" title="Attach image">
<svg
width="18"
height="18"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<rect x="3" y="3" width="18" height="18" rx="2" />
<circle cx="8.5" cy="8.5" r="1.5" />
<polyline points="21 15 16 10 5 21" />
</svg>
</button>
<input
type="file"
id="fileInput"
accept="image/png,image/jpeg,image/webp,image/gif,image/bmp"
hidden
/>
<div class="input-wrap">
<textarea
id="msgInput"
rows="1"
placeholder="Describe this image…"
></textarea>
</div>
<button class="btn-send" id="btnSend" disabled title="Send">
<svg
class="icon-send"
width="18"
height="18"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2.5"
stroke-linecap="round"
stroke-linejoin="round"
>
<line x1="22" y1="2" x2="11" y2="13" />
<polygon points="22 2 15 22 11 13 2 9 22 2" />
</svg>
<svg
class="icon-stop"
width="16"
height="16"
viewBox="0 0 24 24"
fill="currentColor"
>
<rect x="4" y="4" width="16" height="16" rx="2" />
</svg>
</button>
</div>
<div class="chat-footer-note">
No chats are sent to a server. Everything runs locally in your
browser. AI can make mistakes. Check important info.
</div>
</div>
</div>
<script src="index.js" type="module"></script>
</body>
</html>
|