CyberSys/fruit-fly-simulation
0
1<!doctype html>2<html lang="en">3 <head>4 <meta charset="utf-8" />5 <meta name="viewport" content="width=device-width,initial-scale=1" />6 <meta name="theme-color" content="#10171d" />7 <meta8 name="description"9 content="Paint fruit fly neurons and watch their activity drive an animated fly."10 />11 <title>Neural Canvas</title>12 <link13 rel="preload"14 href="%BASE_URL%fonts/InterVariable.woff2"15 as="font"16 type="font/woff2"17 crossorigin18 />19 </head>20 <body>21 <svg class="icon-definitions" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">22 <defs>23 <symbol id="i-paint" viewBox="0 0 24 24">24 <path d="m14.622 17.897-10.68-2.913" />25 <path26 d="M18.376 2.622a1 1 0 1 1 3.002 3.002L17.36 9.643a.5.5 0 0 0 0 .707l.944.944a2.41 2.41 0 0 1 0 3.408l-.944.944a.5.5 0 0 1-.707 0L8.354 7.348a.5.5 0 0 1 0-.707l.944-.944a2.41 2.41 0 0 1 3.408 0l.944.944a.5.5 0 0 0 .707 0z"27 />28 <path29 d="M9 8c-1.804 2.71-3.97 3.46-6.583 3.948a.507.507 0 0 0-.302.819l7.32 8.883a1 1 0 0 0 1.185.204C12.735 20.405 16 16.792 16 15"30 />31 </symbol>32 <symbol id="i-erase" viewBox="0 0 24 24">33 <path34 d="M21 21H8a2 2 0 0 1-1.42-.587l-3.994-3.999a2 2 0 0 1 0-2.828l10-10a2 2 0 0 1 2.829 0l5.999 6a2 2 0 0 1 0 2.828L12.834 21"35 />36 <path d="m5.082 11.09 8.828 8.828" />37 </symbol>38 <symbol id="i-download" viewBox="0 0 24 24">39 <path d="M12 3v12m-5-5 5 5 5-5M4 16v4a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-4" />40 </symbol>41 <symbol id="i-trash" viewBox="0 0 24 24">42 <path d="M3 6h18M8 6V3h8v3M5 6l1 15h12l1-15M10 10v7M14 10v7" />43 </symbol>44 <symbol id="i-pulse" viewBox="0 0 24 24"><path d="M2 12h4l3-9 5 18 3-9h5" /></symbol>45 <symbol id="i-walk" viewBox="0 0 24 24">46 <path47 d="M4 16v-2.38C4 11.5 2.97 10.5 3 8c.03-2.72 1.49-6 4.5-6C9.37 2 10 3.8 10 5.5c0 3.11-2 5.66-2 8.68V16a2 2 0 1 1-4 0Z"48 />49 <path50 d="M20 20v-2.38c0-2.12 1.03-3.12 1-5.62-.03-2.72-1.49-6-4.5-6C14.63 6 14 7.8 14 9.5c0 3.11 2 5.66 2 8.68V20a2 2 0 1 0 4 0Z"51 />52 <path d="M16 17h4" />53 <path d="M4 13h4" />54 </symbol>55 <symbol id="i-left" viewBox="0 0 24 24">56 <path d="m10 3-7 7 7 7M3 10h9c6 0 9 3 9 10" />57 </symbol>58 <symbol id="i-right" viewBox="0 0 24 24">59 <path d="m14 3 7 7-7 7m7-7h-9c-6 0-9 3-9 10" />60 </symbol>61 <symbol id="i-escape" viewBox="0 0 24 24"><path d="m14 2-10 12h7l-1 8 10-13h-7Z" /></symbol>62 <symbol id="i-pause" viewBox="0 0 24 24">63 <rect x="6" y="3" width="3" height="18" rx="1" />64 <rect x="15" y="3" width="3" height="18" rx="1" />65 </symbol>66 <symbol id="i-play" viewBox="0 0 24 24"><path d="m7 3 14 9-14 9Z" /></symbol>67 <symbol id="i-reset" viewBox="0 0 24 24"><path d="M3 3v6h6M3 9a9 9 0 1 1 0 7" /></symbol>68 <symbol id="i-info" viewBox="0 0 24 24">69 <circle cx="12" cy="12" r="9" />70 <path d="M12 11v6m0-10v.5" />71 </symbol>72 <symbol id="i-chevron" viewBox="0 0 24 24"><path d="m6 9 6 6 6-6" /></symbol>73 </defs>74 </svg>75 <main class="workspace" id="workspace" inert>76 <section class="brain-pane" aria-labelledby="brain-heading">77 <div class="pane-head">78 <span class="section-index">01</span>79 <div class="pane-title">80 <h1 id="brain-heading">Paint the brain</h1>81 <p id="paint-hint">Paint neurons. Release to stimulate.</p>82 </div>83 <div class="projection-control">84 <select id="projection" aria-label="Anatomical view">85 <option value="brain">Brain</option>86 <option value="cns">Brain + nerve cord</option></select87 ><svg class="icon"><use href="#i-chevron" /></svg>88 </div>89 </div>90 <div class="brain-stage" id="brain-stage">91 <canvas92 id="brain"93 tabindex="0"94 aria-label="Paint neurons by dragging. Release to pulse. Action buttons below provide a keyboard alternative."95 ></canvas>96 <div id="neuron-tooltip" hidden></div>97 <div class="brain-loading" id="anatomy-status">Ready to load</div>98 </div>99 <div class="brain-key">100 <span class="side-label">L</span>101 <div class="activity-key">102 <span><i class="rest"></i>Resting</span><span><i class="stim"></i>Stimulated</span103 ><span><i class="fire"></i>Firing</span>104 </div>105 <span class="side-label">R</span>106 </div>107 <div class="paint-controls">108 <div class="paint-tools">109 <button id="brush" class="tool-button" aria-pressed="true">110 <svg class="icon"><use href="#i-paint" /></svg><span>Paint</span>111 </button>112 <button id="erase" class="tool-button" aria-pressed="false">113 <svg class="icon"><use href="#i-erase" /></svg><span>Erase</span>114 </button>115 <label class="brush-size"116 ><span>Brush size</span117 ><input118 id="size"119 type="range"120 min="10"121 max="120"122 value="42"123 aria-label="Brush diameter"124 /><output id="size-label">42 px</output></label125 >126 <button id="clear" class="tool-button">127 <svg class="icon"><use href="#i-trash" /></svg><span>Clear</span>128 </button>129 <button id="replay" class="primary" disabled>130 <svg class="icon"><use href="#i-pulse" /></svg><span>Pulse again</span>131 </button>132 </div>133 <div class="actions">134 <span class="field-label">Actions</span>135 <div class="examples" aria-label="Actions">136 <button data-preset="walk" aria-pressed="false">137 <svg class="icon"><use href="#i-walk" /></svg><span>Walk</span>138 </button>139 <button data-preset="left" aria-pressed="false">140 <svg class="icon"><use href="#i-left" /></svg><span>Turn left</span>141 </button>142 <button data-preset="right" aria-pressed="false">143 <svg class="icon"><use href="#i-right" /></svg><span>Turn right</span>144 </button>145 <button data-preset="escape" aria-pressed="false">146 <svg class="icon"><use href="#i-escape" /></svg><span>Fly</span>147 </button>148 </div>149 </div>150 </div>151 </section>152 <section class="fly-pane" aria-labelledby="fly-heading">153 <div class="fly-surface" id="fly-surface">154 <div class="pane-head fly-head">155 <span class="section-index">02</span>156 <h2 id="fly-heading">Watch the response</h2>157 <div class="transport">158 <button id="pause" disabled>159 <svg class="icon"><use id="pause-icon" href="#i-pause" /></svg160 ><span id="pause-label">Pause</span></button161 ><span class="divider"></span162 ><button id="reset" disabled>163 <svg class="icon"><use href="#i-reset" /></svg><span>Reset</span>164 </button>165 </div>166 </div>167 <div class="response-bar">168 <div class="body-state">169 <span id="behavior-dot"></span><span id="behavior">At rest</span170 ><small id="body-description"></small>171 </div>172 <div class="camera-tabs" aria-label="Camera view">173 <button174 id="camera-side"175 aria-pressed="true"176 title="Fixed viewing angle to see the fly turn"177 >178 Side</button179 ><button id="camera-top" aria-pressed="false">Top</button180 ><button181 id="camera-follow"182 aria-pressed="false"183 title="Chase camera that follows the fly’s heading"184 >185 Follow186 </button>187 </div>188 </div>189 <div class="fly-stage" id="fly-stage">190 <canvas id="fly" aria-label="Fly response. Drag to orbit; scroll to zoom."></canvas>191 </div>192 <div class="specimen-line">193 <span>Drosophila melanogaster</span194 ><span class="scale"><i id="scale-bar"></i><span id="scale-value">1 mm</span></span>195 </div>196 </div>197 <div class="readouts">198 <div>199 <span>Walking drive</span><output id="walk-rate">0 Hz</output>200 <div class="meter"><i id="walk-meter"></i></div>201 </div>202 <div>203 <span>Turning</span><output id="turn-rate">0°/s</output>204 <div class="balance"><i id="turn-meter"></i><b id="turn-cursor"></b></div>205 </div>206 <div>207 <span>Escape drive</span><output id="escape-rate">0 Hz</output>208 <div class="meter"><i id="escape-meter"></i></div>209 </div>210 </div>211 <div class="scene-footer">212 <button213 id="settings-button"214 class="info-button"215 aria-label="Experiment settings and information"216 title="Experiment settings and information"217 >218 <svg class="icon"><use href="#i-info" /></svg>219 </button>220 <div id="status-wrap" class="status-copy" role="status">221 <strong id="status">Ready to set up</strong222 ><span id="status-detail">166,700 neurons</span>223 </div>224 <details class="compute-select" id="compute-menu">225 <summary>226 <span class="status-light" id="status-light"></span227 ><span id="runtime-label">WebGPU · auto</span228 ><svg class="icon"><use href="#i-chevron" /></svg>229 </summary>230 <div class="compute-options">231 <label232 >Backend<select id="backend">233 <option value="auto">WebGPU · automatic</option>234 <option value="cpu">JavaScript reference</option>235 </select></label236 ><label class="check"237 ><input id="depth-of-field" type="checkbox" checked /> Macro depth of field</label238 >239 <p id="compute-detail">Simulation runs locally.</p>240 <button id="start" class="start-button" disabled>Start simulation</button>241 </div>242 </details>243 </div>244 <progress id="progress" max="1" value="0" hidden></progress>245 </section>246 </main>247 <dialog248 id="setup"249 class="setup-dialog"250 aria-labelledby="setup-heading"251 aria-describedby="setup-status setup-detail"252 data-state="idle"253 open254 >255 <div class="setup-content">256 <h2 id="setup-heading">Neural Canvas</h2>257 <p id="setup-status" role="status">258 Load the neural weights and prepare the scene to start painting.259 </p>260 <p id="setup-detail">166,700 neurons · 76 MB neural weights</p>261 <progress id="setup-progress" max="1" aria-label="Setup progress" hidden></progress>262 <button id="setup-button" class="primary" autofocus>263 <svg class="icon"><use href="#i-download" /></svg264 ><span id="setup-button-label">Download & start</span>265 </button>266 <p class="setup-note">267 Runs locally in your browser. Downloaded weights are cached for next time.268 </p>269 </div>270 </dialog>271 <dialog id="settings" aria-labelledby="settings-heading">272 <div class="dialog-heading">273 <h2 id="settings-heading">Experiment settings</h2>274 <button id="close-settings" aria-label="Close settings">×</button>275 </div>276 <label277 >Pulse <input id="strength" type="range" min="50" max="250" step="10" value="180" /><output278 id="strength-label"279 >180 Hz</output280 ></label281 >282 <label class="check"283 ><input id="silence" type="checkbox" /> Disable recurrent transmission</label284 >285 <details class="model-details">286 <summary>Model & sources</summary>287 <p>288 166,700 neurons from MaleCNS v1.0. Dataset IDs identify individual cells; they are not289 consecutive neuron numbers.290 </p>291 <p>292 Recorded connectivity and adapted spiking dynamics drive crafted walking, turning, and293 flight animations. The movements are illustrative, not validated predictions of fly294 behavior. The scanned body is a female NeuroMechFly specimen.295 </p>296 <p>297 Turn actions stimulate LC9 and DNa02 on the selected side. Directly stimulated neurons can298 still fire when recurrent transmission is disabled.299 </p>300 <div class="sources">301 <a href="https://male-cns.janelia.org/download/" target="_blank" rel="noreferrer"302 >MaleCNS data ↗</a303 ><a304 href="https://www.nature.com/articles/s41586-024-07763-9"305 target="_blank"306 rel="noreferrer"307 >Neural model ↗</a308 ><a href="https://huggingface.co/blog/webgpu-kernels" target="_blank" rel="noreferrer"309 >@huggingface/kernels ↗</a310 ><a href="%BASE_URL%model.json" target="_blank">Model parameters ↗</a>311 </div>312 </details>313 </dialog>314 <script type="module" src="/src/main.js"></script>315 </body>316</html>317