release test#4

mtb0x1 · Oct 22, 2023 · 7c8071e · 7c8071e
1 parent aa1f60b
commit 7c8071e
Show file tree

Hide file tree

Showing 5 changed files with 152 additions and 1 deletion.
diff --git a/port3/.gitignore b/port3/.gitignore
@@ -1,2 +1 @@
 /target
-/www
diff --git a/port3/www/.gitignore b/port3/www/.gitignore
@@ -0,0 +1,2 @@
+pkg
+stories*.bin
diff --git a/port3/www/index.html b/port3/www/index.html
@@ -0,0 +1,133 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <title>llama2.rs.wasm - port3</title>
+        <link
+        rel="stylesheet"
+        href="https://cdn.jsdelivr.net/npm/water.css@2/out/dark.css"
+        />
+        <link
+        rel="stylesheet"
+        href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
+        integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
+        crossorigin="anonymous"
+        referrerpolicy="no-referrer"
+        />
+
+        <!-- preload loads 438m+167m+60m+size_of(port3_bg.wasm) ... after few refresh browser memory goes up fast -->
+        <link rel="preload" href="/pkg/port3_bg.wasm" as="fetch" type="application/wasm"/>
+        <link rel="preload" href="/stories42M.bin" as="fetch" type="application/binary"/>
+        <link rel="preload" href="/stories15M.bin" as="fetch" type="application/binary"/>
+        <link rel="preload" href="/stories110M.bin" as="fetch" type="application/binary"/>
+        <script>
+            function log(msg,...args){
+                if (document.getElementById("debug_info").checked) {
+                    document.getElementById("debug_content1").value+=msg;
+                }
+            }
+            function enabledebug(){
+                //console.log(this);
+                document.getElementById("debug_content1").value="";
+                if (!document.getElementById("debug_info").checked) {
+                    document.getElementById("debug_content").style="display:none;";
+                }else {
+                    document.getElementById("debug_content").style="";
+                }
+            }
+        </script>     
+    </head>
+    <body>
+        <div class="container">
+            <h1>llama2.rs.wasm - port3</h1>
+
+            <h3>Links</h3>
+            <p>
+            <a
+                target="_blank"
+                rel="noopener noreferrer"
+                href="https://github.com/mtb0x1/llama2.rs.wasm"
+                style="all: unset; cursor: pointer; font-size: 0.9em"
+            >
+            <i class="fa-brands fa-github fa-xl"></i>
+            llama2.rs.wasm Source Code
+            </a>
+            </p>
+
+            <label for="model">Model</label>
+            <select id="model">
+                <option value="stories15M">stories15m</option>
+                <option selected="selected" value="stories42M">stories42m</option>
+                <option value="stories110M">stories110m</option>
+            </select>
+            <label for="temperature">Temperature</label>
+            <input id="temperature" type="number" value="0.9" step=".01" min="0" max="1"  /> 
+            <label for="steps">Steps</label>
+            <input id="steps" type="number" value="20" />
+            <label for="debug_info">Debug info:</label>
+            <input id="debug_info" type="checkbox" onchange="enabledebug()"/></br>
+            <label for="prompt">Prompt:</label>
+            <textarea id="prompt" name="prompt" rows="10" placeholder="write something here ..."></textarea>
+            <div id="debug_content" style="display:none">
+            <label for="debug_content1">Debug content:</label>
+            <textarea id="debug_content1" name="prompt" rows="10" disabled></textarea>
+            </div>
+            <button id="run" class="flat">Run</button>
+            <div id="meta">
+                <label for="token_per_second">Token per second:</label>
+                <input id="token_per_second" type="number" value="0" disabled/>
+                <p>*for acurate measure, close other tabs and restart browser.
+                    Performance is reduced by 10x after a couple of runs.</p>
+            </div>
+        </div>
+    <script type="module">
+        import init, { port3_main_wasm, initThreadPool  } from './pkg/port3.js';
+        await init();
+        //await initThreadPool(navigator.hardwareConcurrency);
+
+        async function run() {
+            if (navigator.hardwareConcurrency >0){
+                const cpus_in_use = Math.ceil(navigator.hardwareConcurrency*0.75);
+                //requires https://stackoverflow.com/questions/72881660/web-worker-blocked-by-self-crossoriginisolated-on-cypress
+                //Cross-Origin-Opener-Policy="same-origin"
+                //Cross-Origin-Embedder-Policy="require-corp"
+                //Fixme(https://github.com/mtb0x1/llama2.rs.wasm/issues/1)
+                //await initThreadPool(cpus_in_use);
+            }
+
+            //document.getElementById("prompt").value ="";
+            let model = document.getElementById("model").value+".bin";
+            const model_buffer =await fetch(model)
+            .then(response => response.arrayBuffer())
+            .then(buffer => {
+                // Convert the ArrayBuffer to a Uint8Array
+                return new Uint8Array(buffer);
+            });
+            log("JS: model_buffer fetched\n");  
+
+            const tokenizer_buffer =await fetch('tokenizer.bin')
+            .then(response => response.arrayBuffer())
+            .then(buffer => {
+                // Convert the ArrayBuffer to a Uint8Array
+                return new Uint8Array(buffer);
+            });
+            log("JS: tokenizer_buffer fetched\n");
+
+            let temperature  = document.getElementById("temperature").value;
+            let steps = document.getElementById("steps").value;
+            let prompt = document.getElementById("prompt").value?? ""; 
+
+            let result = port3_main_wasm(model_buffer,tokenizer_buffer,temperature,steps,prompt);
+            document.getElementById("prompt").value = result.result?? "";
+            document.getElementById("token_per_second").value = result.token_per_second?? 0;
+            log(result.logs?? "");
+        }
+
+        //run();
+        document.getElementById('run').addEventListener('click', run);
+
+      </script>
+
+    </body>
+</html>
diff --git a/port3/www/tokenizer.bin b/port3/www/tokenizer.bin
diff --git a/port3/www/www_server.py b/port3/www/www_server.py
@@ -0,0 +1,17 @@
+from http.server import HTTPServer, SimpleHTTPRequestHandler
+
+class CORSRequestHandler(SimpleHTTPRequestHandler):
+    def end_headers(self):
+        self.send_header("Cross-Origin-Opener-Policy", "same-origin")
+        #self.send_header("Cross-Origin-Resource-Policy", "same-origin")
+        self.send_header("Cross-Origin-Embedder-Policy", "require-corp")
+        super().end_headers()
+
+def run(server_class=HTTPServer, handler_class=CORSRequestHandler, port=8080):
+    server_address = ("localhost", port)
+    httpd = server_class(server_address, handler_class)
+    print(f"Starting server on port {port}...")
+    httpd.serve_forever()
+
+if __name__ == "__main__":
+    run()