mirror of
https://github.com/huggingface/candle.git
synced 2025-06-15 18:28:24 +00:00
26226068a4
* moondream wasm wip * examples, more * fix eos token check * README * cleanip * cleanup, clippy
313 lines
10 KiB
HTML
313 lines
10 KiB
HTML
<html>
|
|
<head>
|
|
<meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
|
|
<title>Candle Moondream Rust/WASM</title>
|
|
</head>
|
|
<body></body>
|
|
</html>
|
|
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.8.0/build/styles/default.min.css"
|
|
/>
|
|
<style>
|
|
@import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@200;300;400&family=Source+Sans+3:wght@100;200;300;400;500;600;700;800;900&display=swap");
|
|
html,
|
|
body {
|
|
font-family: "Source Sans 3", sans-serif;
|
|
}
|
|
code,
|
|
output,
|
|
select,
|
|
pre {
|
|
font-family: "Source Code Pro", monospace;
|
|
}
|
|
</style>
|
|
<style type="text/tailwindcss">
|
|
.link {
|
|
@apply underline hover:text-blue-500 hover:no-underline;
|
|
}
|
|
</style>
|
|
<script src="https://cdn.tailwindcss.com/3.4.3"></script>
|
|
<script type="module" src="./code.js"></script>
|
|
</head>
|
|
<body class="container max-w-4xl mx-auto p-4 text-gray-800">
|
|
<main class="grid grid-cols-1 gap-8 relative">
|
|
<span class="absolute text-5xl -ml-[1em]"> 🕯️ </span>
|
|
<div>
|
|
<h1 class="text-5xl font-bold">Candle Moondream 2</h1>
|
|
<h2 class="text-2xl font-bold">Rust/WASM Demo</h2>
|
|
<p class="max-w-lg">
|
|
<a
|
|
href="https://huggingface.co/vikhyatk/moondream2"
|
|
class="link"
|
|
target="_blank"
|
|
>Moondream 2</a
|
|
>
|
|
by
|
|
<a
|
|
href=" https://huggingface.co/vikhyatk"
|
|
class="link"
|
|
target="_blank"
|
|
>Vik</a
|
|
>
|
|
and model implementation on Candle by
|
|
<a
|
|
href="https://huggingface.co/santiagomed"
|
|
class="link"
|
|
target="_blank"
|
|
>Santiago Medina
|
|
</a>
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<p class="text-xs italic max-w-lg">
|
|
<b>Note:</b>
|
|
When first run, the app will download and cache the model, which could
|
|
take a few minutes. Then, the embeddings and generation will take a
|
|
few minutes to start 😔.
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<label for="model" class="font-medium">Models Options: </label>
|
|
<select
|
|
id="model"
|
|
class="border-2 border-gray-500 rounded-md font-light"
|
|
></select>
|
|
</div>
|
|
<form
|
|
id="form"
|
|
class="flex text-normal px-1 py-1 border border-gray-700 rounded-md items-center"
|
|
>
|
|
<input type="submit" hidden />
|
|
<input
|
|
type="text"
|
|
id="prompt"
|
|
class="font-light text-lg w-full px-3 py-2 mx-1 resize-none outline-none"
|
|
placeholder="Add your prompt here..."
|
|
/>
|
|
<button
|
|
id="run"
|
|
class="bg-gray-700 hover:bg-gray-800 text-white font-normal py-2 w-16 rounded disabled:bg-gray-300 disabled:cursor-not-allowed"
|
|
>
|
|
Run
|
|
</button>
|
|
</form>
|
|
|
|
<details>
|
|
<summary class="font-medium cursor-pointer">Advanced Options</summary>
|
|
|
|
<div class="grid grid-cols-3 max-w-md items-center gap-3 py-3">
|
|
<label class="text-sm font-medium" for="max-seq"
|
|
>Maximum length
|
|
</label>
|
|
<input
|
|
type="range"
|
|
id="max-seq"
|
|
name="max-seq"
|
|
min="1"
|
|
max="2048"
|
|
step="1"
|
|
value="500"
|
|
oninput="this.nextElementSibling.value = Number(this.value)"
|
|
/>
|
|
<output
|
|
class="text-xs w-[50px] text-center font-light px-1 py-1 border border-gray-700 rounded-md"
|
|
>
|
|
500</output
|
|
>
|
|
<label class="text-sm font-medium" for="temperature"
|
|
>Temperature</label
|
|
>
|
|
<input
|
|
type="range"
|
|
id="temperature"
|
|
name="temperature"
|
|
min="0"
|
|
max="2"
|
|
step="0.01"
|
|
value="0.00"
|
|
oninput="this.nextElementSibling.value = Number(this.value).toFixed(2)"
|
|
/>
|
|
<output
|
|
class="text-xs w-[50px] text-center font-light px-1 py-1 border border-gray-700 rounded-md"
|
|
>
|
|
0.00</output
|
|
>
|
|
<label class="text-sm font-medium" for="top-p">Top-p</label>
|
|
<input
|
|
type="range"
|
|
id="top-p"
|
|
name="top-p"
|
|
min="0"
|
|
max="1"
|
|
step="0.01"
|
|
value="1.00"
|
|
oninput="this.nextElementSibling.value = Number(this.value).toFixed(2)"
|
|
/>
|
|
<output
|
|
class="text-xs w-[50px] text-center font-light px-1 py-1 border border-gray-700 rounded-md"
|
|
>
|
|
1.00</output
|
|
>
|
|
|
|
<label class="text-sm font-medium" for="repeat_penalty"
|
|
>Repeat Penalty</label
|
|
>
|
|
|
|
<input
|
|
type="range"
|
|
id="repeat_penalty"
|
|
name="repeat_penalty"
|
|
min="1"
|
|
max="2"
|
|
step="0.01"
|
|
value="1.10"
|
|
oninput="this.nextElementSibling.value = Number(this.value).toFixed(2)"
|
|
/>
|
|
<output
|
|
class="text-xs w-[50px] text-center font-light px-1 py-1 border border-gray-700 rounded-md"
|
|
>1.10</output
|
|
>
|
|
<label class="text-sm font-medium" for="seed">Seed</label>
|
|
<input
|
|
type="number"
|
|
id="seed"
|
|
name="seed"
|
|
value="299792458"
|
|
class="font-light border border-gray-700 text-right rounded-md p-2"
|
|
/>
|
|
<button
|
|
id="run"
|
|
onclick="document.querySelector('#seed').value = Math.floor(Math.random() * Number.MAX_SAFE_INTEGER)"
|
|
class="bg-gray-700 hover:bg-gray-800 text-white font-normal py-1 w-[50px] rounded disabled:bg-gray-300 disabled:cursor-not-allowed text-sm"
|
|
>
|
|
Rand
|
|
</button>
|
|
</div>
|
|
</details>
|
|
|
|
<div class="grid md:grid-cols-2 gap-4 items-start">
|
|
<div>
|
|
<div class="relative md:mt-6">
|
|
<div
|
|
class="absolute w-full bottom-full flex justify-between items-center"
|
|
>
|
|
<div class="flex gap-2 w-full">
|
|
<button
|
|
id="clear-img-btn"
|
|
disabled
|
|
title="Clear Image"
|
|
class="ml-auto text-xs py-1 bg-white rounded-md disabled:opacity-20 flex gap-1 items-center"
|
|
>
|
|
<svg
|
|
class=""
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 13 12"
|
|
height="1em"
|
|
>
|
|
<path
|
|
d="M1.6.7 12 11.1M12 .7 1.6 11.1"
|
|
stroke="#2E3036"
|
|
stroke-width="2"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div
|
|
id="drop-area"
|
|
class="min-h-[250px] flex flex-col items-center justify-center border-2 border-gray-300 border-dashed rounded-xl relative w-full overflow-hidden"
|
|
>
|
|
<div
|
|
class="absolute flex flex-col items-center justify-center space-y-1 text-center"
|
|
>
|
|
<svg
|
|
width="25"
|
|
height="25"
|
|
viewBox="0 0 25 25"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M3.5 24.3a3 3 0 0 1-1.9-.8c-.5-.5-.8-1.2-.8-1.9V2.9c0-.7.3-1.3.8-1.9.6-.5 1.2-.7 2-.7h18.6c.7 0 1.3.2 1.9.7.5.6.7 1.2.7 2v18.6c0 .7-.2 1.4-.7 1.9a3 3 0 0 1-2 .8H3.6Zm0-2.7h18.7V2.9H3.5v18.7Zm2.7-2.7h13.3c.3 0 .5 0 .6-.3v-.7l-3.7-5a.6.6 0 0 0-.6-.2c-.2 0-.4 0-.5.3l-3.5 4.6-2.4-3.3a.6.6 0 0 0-.6-.3c-.2 0-.4.1-.5.3l-2.7 3.6c-.1.2-.2.4 0 .7.1.2.3.3.6.3Z"
|
|
fill="#000"
|
|
/>
|
|
</svg>
|
|
<div class="flex text-sm text-gray-600">
|
|
<label
|
|
for="file-upload"
|
|
class="relative cursor-pointer bg-white rounded-md font-medium text-blue-950 hover:text-blue-700"
|
|
>
|
|
<span>Drag and drop the image here</span>
|
|
<span class="block text-xs">or</span>
|
|
<span class="block text-xs">Click to upload</span>
|
|
</label>
|
|
</div>
|
|
<input
|
|
id="file-upload"
|
|
name="file-upload"
|
|
type="file"
|
|
accept="image/*"
|
|
class="sr-only"
|
|
/>
|
|
</div>
|
|
<canvas
|
|
id="canvas"
|
|
class="z-10 pointer-events-none w-full"
|
|
></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h3 class="font-medium">Generation:</h3>
|
|
<div
|
|
class="min-h-[250px] bg-slate-100 text-gray-500 p-4 rounded-md flex flex-col gap-2"
|
|
>
|
|
<div
|
|
id="output-counter"
|
|
hidden
|
|
class="ml-auto font-semibold grid-rows-1"
|
|
></div>
|
|
<p hidden id="output-generation" class="grid-rows-2 text-lg"></p>
|
|
<span id="output-status" class="m-auto font-light"
|
|
>No output yet</span
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div
|
|
class="flex gap-3 items-center overflow-x-scroll"
|
|
id="image-select"
|
|
>
|
|
<h3 class="font-medium">Examples:</h3>
|
|
|
|
<img
|
|
src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/candle/examples/sf.jpg"
|
|
class="cursor-pointer w-24 h-24 object-cover"
|
|
/>
|
|
<img
|
|
src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/candle/examples/bike.jpeg"
|
|
class="cursor-pointer w-24 h-24 object-cover"
|
|
/>
|
|
<img
|
|
src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/candle/examples/000000000077.jpg"
|
|
class="cursor-pointer w-24 h-24 object-cover"
|
|
/>
|
|
<img
|
|
src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/candle/examples/demo-1.jpg"
|
|
class="cursor-pointer w-24 h-24 object-cover"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</body>
|
|
</html>
|