Demo page

hyparam · Dec 28, 2023 · 76819ce · 76819ce
1 parent 2adf600
commit 76819ce
Show file tree

Hide file tree

Showing 4 changed files with 100 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -2,7 +2,7 @@
 
 [![mit license](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
 [![workflow status](https://github.com/hyparam/hyllama/actions/workflows/ci.yml/badge.svg)](https://github.com/hyparam/hyllama/actions)
-![npm](https://img.shields.io/npm/v/hyllama)
+[![npm](https://img.shields.io/npm/v/hyllama)](https://www.npmjs.com/package/hyllama)
 
 Parser for llama.cpp gguf files written in javascript.
 
@@ -11,6 +11,8 @@ This library makes it easy to parse metadata from GGUF files.
 Model files are often very large.
 A goal of this library is to parse the file efficiently, without loading the entire file into memory.
 
+Dependency free since 2023.
+
 ## Usage
 
 ```bash

diff --git a/index.html b/index.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>GGUF File Parser</title>
+    <style>
+      #dropzone {
+        position: absolute;
+        bottom: 10px;
+        box-sizing: border-box;
+        top: 10px;
+        left: 10px;
+        right: 10px;
+        border: 2px dashed #08e;
+        border-radius: 10px;
+        padding: 10px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #444;
+        font-family: sans-serif;
+        font-size: 20px;
+        overflow-y: auto;
+      }
+      .over {
+        background-color: lightblue;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="dropzone">Drop GGUF model file here</div>
+    <script type="module">
+      import { ggufMetadata } from './dist/hyllama.js'
+
+      const dropZone = document.getElementById('dropzone')
+
+      dropZone.addEventListener('dragover', e => {
+        e.preventDefault()
+        e.dataTransfer.dropEffect = 'copy'
+        dropZone.classList.add('over')
+      })
+
+      dropZone.addEventListener('dragleave', () => {
+        dropZone.classList.remove('over')
+      })
+
+      dropZone.addEventListener('drop', e => {
+        e.preventDefault() // prevent file from being downloaded
+        dropZone.classList.remove('over')
+
+        const files = e.dataTransfer.files
+        if (files.length > 0) {
+          const file = files[0]
+          const reader = new FileReader()
+          reader.onload = async (e) => {
+            const arrayBuffer = e.target.result
+            const metadata = ggufMetadata(arrayBuffer)
+            console.log(metadata)
+            // these are large and of questionable value
+            delete metadata['tokenizer.ggml.tokens']
+            delete metadata['tokenizer.ggml.scores']
+            delete metadata['tokenizer.ggml.token_type']
+            // display metadata
+            dropZone.innerText = file.name
+            for (const key in metadata) {
+              const value = metadata[key]
+              dropZone.innerText += `\n${key}: ${value}`
+            }
+          }
+          reader.onerror = e => {
+            console.error('Error reading file', e)
+            dropZone.innerText = `Error reading file\n${e.target.error}`
+          }
+          reader.readAsArrayBuffer(file)
+        }
+      })
+    </script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -2,17 +2,29 @@
   "name": "hyllama",
   "version": "0.1.0",
   "description": "llama.cpp gguf file parser for javascript",
-  "keywords": [ "llama", "llamacpp", "gguf", "parser", "machine learning", "ml" ],
+  "keywords": [
+    "llama",
+    "llama.cpp",
+    "llama-cpp",
+    "llamacpp",
+    "gguf",
+    "parser",
+    "machine learning",
+    "ml"
+  ],
   "license": "MIT",
   "main": "dist/hyllama.js",
-  "files": [ "dist" ],
+  "files": [
+    "dist"
+  ],
   "repository": {
     "type": "git",
     "url": "https://github.com/hyparam/hyllama"
   },
   "scripts": {
     "build": "tsc",
     "coverage": "vitest run --coverage",
+    "demo": "http-server -o",
     "lint": "eslint . --ext .ts",
     "test": "vitest run"
   },
@@ -22,6 +34,7 @@
     "eslint": "8.56.0",
     "eslint-plugin-import": "2.29.1",
     "eslint-plugin-jsdoc": "46.9.1",
+    "http-server": "14.1.1",
     "typescript": "5.3.3",
     "vitest": "1.1.0"
   }

diff --git a/tsconfig.json b/tsconfig.json
@@ -1,8 +1,9 @@
 {
   "compilerOptions": {
-    "lib": ["esnext"],
+    "lib": ["esnext", "dom"],
     "outDir": "dist",
-    "sourceMap": true
+    "sourceMap": true,
+    "target": "esnext",
   },
   "include": ["src"]
 }