Spaces:

shethjenil
/

IMHEX

Running

App Files Files Community

shethjenil commited on Feb 10

Commit

c291ab9

verified ·

1 Parent(s): 8820233

Upload 8 files

Browse files

Files changed (8) hide show

enable-threads.js +79 -0
icon.svg +11 -0
imhex.js +0 -0
imhex.wasm +3 -0
imhex.wasm.size +1 -0
index.html +103 -18
style.css +178 -18
wasm-config.js +275 -0

enable-threads.js ADDED Viewed

	@@ -0,0 +1,79 @@

+// NOTE: This file creates a service worker that cross-origin-isolates the page (read more here: https://web.dev/coop-coep/) which allows us to use wasm threads.
+// Normally you would set the COOP and COEP headers on the server to do this, but Github Pages doesn't allow this, so this is a hack to do that.
+/* Edited version of: coi-serviceworker v0.1.6 - Guido Zuidhof, licensed under MIT */
+// From here: https://github.com/gzuidhof/coi-serviceworker
+if(typeof window === 'undefined') {
+    self.addEventListener("install", () => self.skipWaiting());
+    self.addEventListener("activate", e => e.waitUntil(self.clients.claim()));
+    async function handleFetch(request) {
+        if(request.cache === "only-if-cached" && request.mode !== "same-origin") {
+            return;
+        }
+        if(request.mode === "no-cors") { // We need to set `credentials` to "omit" for no-cors requests, per this comment: https://bugs.chromium.org/p/chromium/issues/detail?id=1309901#c7
+            request = new Request(request.url, {
+                cache: request.cache,
+                credentials: "omit",
+                headers: request.headers,
+                integrity: request.integrity,
+                destination: request.destination,
+                keepalive: request.keepalive,
+                method: request.method,
+                mode: request.mode,
+                redirect: request.redirect,
+                referrer: request.referrer,
+                referrerPolicy: request.referrerPolicy,
+                signal: request.signal,
+            });
+        }
+        let r = await fetch(request).catch(e => console.error(e));
+        if(r.status === 0) {
+            return r;
+        }
+        const headers = new Headers(r.headers);
+        headers.set("Cross-Origin-Embedder-Policy", "require-corp"); // or: require-corp
+        headers.set("Cross-Origin-Opener-Policy", "same-origin");
+        return new Response(r.body, { status: r.status, statusText: r.statusText, headers });
+    }
+    self.addEventListener("fetch", function(e) {
+        e.respondWith(handleFetch(e.request)); // respondWith must be executed synchonously (but can be passed a Promise)
+    });
+} else {
+    (async function() {
+        if(window.crossOriginIsolated !== false) return;
+        if (!('serviceWorker' in navigator)) {
+            alert("Your browser doesn't support service workers.\nIf you're using Firefox, you need to not be in a private window.")
+        }
+        let registration = await navigator.serviceWorker.register(window.document.currentScript.src).catch(e => console.error("COOP/COEP Service Worker failed to register:", e));
+        if(registration) {
+            console.log("COOP/COEP Service Worker registered", registration.scope);
+            registration.addEventListener("updatefound", () => {
+                console.log("Reloading page to make use of updated COOP/COEP Service Worker.");
+                window.location.reload();
+            });
+            // If the registration is active, but it's not controlling the page
+            if(registration.active && !navigator.serviceWorker.controller) {
+                console.log("Reloading page to make use of COOP/COEP Service Worker.");
+                window.location.reload();
+            }
+        }
+    })();
+}
+// Code to deregister:
+// let registrations = await navigator.serviceWorker.getRegistrations();
+// for(let registration of registrations) {
+//   await registration.unregister();
+// }

icon.svg ADDED Viewed

imhex.js ADDED Viewed

The diff for this file is too large to render. See raw diff

imhex.wasm ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:fe42b1b242f9d164291667c8fbc4cb2702c363136e8da35b601ab6145fc84577
+size 31700407

imhex.wasm.size ADDED Viewed

	@@ -0,0 +1 @@


1	+ 31700407

index.html CHANGED Viewed

@@ -1,19 +1,104 @@
 <!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

 <!doctype html>
+<html lang="en-us">
+<head>
+    <title>ImHex Web - Free Online Hex Editor for Reverse Engineers</title>
+    <link rel="manifest" href="manifest.json">
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <!-- Primary Meta Tags -->
+    <meta name="title" content="ImHex">
+    <meta name="description" content="Free and extremely powerful Online Hex Editor for your Web Browser. ImHex is a free and open source Hex Editor for Reverse Engineers and Developers and Data Analysts.">
+    <link rel="icon" type="image/x-icon" href="favicon.ico">
+    <link rel="apple-touch-icon" href="icon.svg">
+    <!-- Open Graph / Facebook -->
+    <meta property="og:type" content="website">
+    <meta property="og:url" content="https://imhex.werwolv.net/">
+    <meta property="og:title" content="ImHex Web - Online Hex Editor">
+    <meta property="og:image" content="https://imhex.werwolv.net/assets/splash_wasm.png">
+    <!-- Twitter -->
+    <meta property="twitter:card" content="summary_large_image">
+    <meta property="twitter:url" content="https://imhex.werwolv.net/">
+    <meta property="twitter:title" content="ImHex Web - Online Hex Editor">
+    <meta property="twitter:description"
+          content="A Hex Editor for Reverse Engineers, Programmers and people who value their retinas when working at 3 AM.">
+    <meta property="twitter:image" content="https://imhex.werwolv.net/assets/splash_wasm.png">
+    <link rel="stylesheet" type="text/css" href="style.css">
+    <script type="application/ld+json">
+        {
+            "@context": "https://schema.org",
+            "@type": "Organization",
+            "alumni": "WerWolv",
+            "email": "hey@werwolv.net",
+            "founder": "WerWolv",
+            "slogan": "A Hex Editor for Reverse Engineers, Programmers and people who value their retinas when working at 3 AM.",
+            "url": "https://imhex.werwolv.net",
+            "logo": "https://imhex.werwolv.net/assets/logos/logo.svg"
+        }
+    </script>
+    <script type="application/ld+json">
+        {
+            "@context": "https://schema.org",
+            "@type": "SoftwareApplication",
+            "name": "ImHex Web",
+            "operatingSystem": "Windows, MacOS, Linux",
+            "applicationCategory": "DeveloperApplication",
+            "offers": {
+                "@type": "Offer",
+                "price": "0",
+                "priceCurrency": "USD"
+            }
+        }
+    </script>
+    <script src="enable-threads.js"></script>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+<div id="loading" class="centered">
+    <img src="https://raw.githubusercontent.com/WerWolv/ImHex/master/plugins/builtin/romfs/assets/dark/banner.svg" id="logo" alt="ImHex Logo">
+    <h1>A Hex Editor for Reverse Engineers, Programmers and people who value their retinas when working at 3 AM.</h1>
+    <h2>Available both natively and on the web</h2>
+    <h5>ImHex runs directly in your web browser with the help of Emscripten and WebAssembly.</h5>
+    <div style="height: 50%">
+        <div style="height: 30%"> </div>
+        <h2 id="not_working">
+            Not loading in your Browser? <a href="https://imhex.werwolv.net">Try the native version</a>
+        </h2>
+        <div class="progress-bar-container">
+            <div class="progress progress-moved">
+                <div class="progress-bar" id="progress-bar-content">
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="loading_ripple">
+        <div class="lds-ripple"><div></div><div></div></div>
+    </div>
+    <div style="height: 10%">
+    </div>
+    <div class="footer">
+        <a href="https://imhex.werwolv.net">Homepage</a>
+        <p>Made with ♥️ by the ImHex Team</p>
+        <a href="https://github.com/WerWolv/ImHex">GitHub</a>
+    </div>
+</div>
+<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()"></canvas>
+<script src="wasm-config.js"></script>
+<script async src="imhex.js"></script>
+</body>
+</html>

style.css CHANGED Viewed

@@ -1,28 +1,188 @@
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+html, body {
+    height: 100%;
+    margin: 0;
+    user-select: none;
+}
 body {
+    display: flex;
+    align-items: center;
+    background-color: #121212;
+    overflow: hidden;
+}
+.emscripten {
+    padding-right: 0;
+    margin-left: auto;
+    margin-right: auto;
+    display: none;
+    border: 0 none;
+    image-rendering: smooth;
+}
+h1, h2, h5 {
+    color: #F0F0F0;
+    font-size: 20px;
+    font-family: monospace;
+    width: 100%;
+    text-align: center;
+    margin-top: 60px;
+    margin-bottom: 10px;
+}
+h2 {
+    margin-top: 15px;
+    font-size: 17px;
+}
+h5 {
+    margin-top: 0;
+    font-size: 17px;
+}
+#not_working {
+    opacity: 0;
+}
+#not_working.visible {
+    opacity: 1;
+    transition: opacity 2s ease;
+}
+a {
+    color: #7893ff;
+    text-decoration: none;
+}
+a:hover {
+    text-shadow: #3a4677 0 0 10px;
 }
+.footer {
+    width: 100%;
+    height: 20px;
+    position: absolute;
+    bottom: 0;
+    text-align: center;
+    color: #F0F0F0;
+    background-color: #0A0A0A;
+    padding: 10px;
+    font-family: monospace;
+    font-size: 15px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: row;
+    gap: 10%;
+}
+.centered {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+}
+.lds-ripple {
+    display: inline-block;
+    position: relative;
+    width: 80px;
+    height: 80px;
+}
+.lds-ripple div {
+    position: absolute;
+    border: 4px solid #fff;
+    opacity: 1;
+    border-radius: 50%;
+    animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
+}
+.lds-ripple div:nth-child(2) {
+    animation-delay: -0.5s;
 }
+@keyframes lds-ripple {
+    0% {
+        top: 36px;
+        left: 36px;
+        width: 0;
+        height: 0;
+        opacity: 0;
+    }
+    4.9% {
+        top: 36px;
+        left: 36px;
+        width: 0;
+        height: 0;
+        opacity: 0;
+    }
+    5% {
+        top: 36px;
+        left: 36px;
+        width: 0;
+        height: 0;
+        opacity: 1;
+    }
+    100% {
+        top: 0;
+        left: 0;
+        width: 72px;
+        height: 72px;
+        opacity: 0;
+    }
+}
+:root {
+    --progress: 0%;
 }
+.progress-bar-container {
+    margin: 100px auto;
+    width: 600px;
+    text-align: center;
 }
+.progress {
+    padding: 6px;
+    border-radius: 30px;
+    background: rgba(0, 0, 0, 0.25);
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25),
+    0 1px rgba(255, 255, 255, 0.08);
 }
+.progress-bar {
+    color: rgba(240, 240, 240, 0.9);
+    height: 18px;
+    border-radius: 30px;
+    font-size: 13px;
+    font-family: monospace;
+    font-weight: bold;
+    text-wrap: avoid;
+    white-space: nowrap;
+    overflow: hidden;
+    background-image: linear-gradient(
+            to bottom,
+            rgba(255, 255, 255, 0.2),
+            rgba(255, 255, 255, 0.0)
+    );
+}
+.progress-moved .progress-bar {
+    width: var(--progress);
+    background-color: #3864cb;
+}
+#logo {
+    height: 25%;
+    margin-top: 50px;
+}
+.canvas-fixed {
+    position: absolute;
+    top: 0;
+    left: 0;
+}

wasm-config.js ADDED Viewed

	@@ -0,0 +1,275 @@

+let wasmSize = null;
+// See comment in dist/web/Dockerfile about imhex.wasm.size
+fetch("imhex.wasm.size").then(async (resp) => {
+    wasmSize = parseInt((await resp.text()).trim());
+    console.log(`Real WASM binary size is ${wasmSize} bytes`);
+});
+// Monkeypatch WebAssembly to have a progress bar
+// inspired from: https://github.com/WordPress/wordpress-playground/pull/46 (but had to be modified)
+function monkeyPatch(progressFun) {
+    const _instantiateStreaming = WebAssembly.instantiateStreaming;
+    WebAssembly.instantiateStreaming = async (responsePromise, ...args) => {
+        // Do not collect wasm content length here see above
+        let response = await responsePromise
+        const file = response.url.substring(
+            new URL(response.url).origin.length + 1
+        );
+        const reportingResponse = new Response(
+            new ReadableStream(
+                {
+                    async start(controller) {
+                        const reader = response.clone().body.getReader();
+                        let loaded = 0;
+                        for (; ;) {
+                            const { done, value } = await reader.read();
+                            if (done) {
+                                if(wasmSize) progressFun(file, wasmSize);
+                                break;
+                            }
+                            loaded += value.byteLength;
+                            progressFun(file, loaded);
+                            controller.enqueue(value);
+                        }
+                        controller.close();
+                    }
+                },
+                {
+                    status: response.status,
+                    statusText: response.statusText
+                }
+            )
+        );
+        for (const pair of response.headers.entries()) {
+            reportingResponse.headers.set(pair[0], pair[1]);
+        }
+        return _instantiateStreaming(reportingResponse, ...args);
+    }
+}
+monkeyPatch((file, done) =>  {
+    if (!wasmSize) return;
+    if (done > wasmSize) {
+        console.warn(`Downloaded binary size ${done} is larger than expected WASM size ${wasmSize}`);
+        return;
+    }
+    const percent  = ((done / wasmSize) * 100).toFixed(0);
+    const mibNow   = (done / 1024**2).toFixed(1);
+    const mibTotal = (wasmSize / 1024**2).toFixed(1);
+    let root = document.querySelector(':root');
+    root.style.setProperty("--progress", `${percent}%`)
+    document.getElementById("progress-bar-content").innerHTML = `${percent}% &nbsp;[${mibNow} MiB / ${mibTotal} MiB]`;
+});
+function glfwSetCursorCustom(wnd, shape) {
+    let body = document.getElementsByTagName("body")[0]
+    switch (shape) {
+        case 0x00036001: // GLFW_ARROW_CURSOR
+            body.style.cursor = "default";
+            break;
+        case 0x00036002: // GLFW_IBEAM_CURSOR
+            body.style.cursor = "text";
+            break;
+        case 0x00036003: // GLFW_CROSSHAIR_CURSOR
+            body.style.cursor = "crosshair";
+            break;
+        case 0x00036004: // GLFW_HAND_CURSOR
+            body.style.cursor = "pointer";
+            break;
+        case 0x00036005: // GLFW_HRESIZE_CURSOR
+            body.style.cursor = "ew-resize";
+            break;
+        case 0x00036006: // GLFW_VRESIZE_CURSOR
+            body.style.cursor = "ns-resize";
+            break;
+        default:
+            body.style.cursor = "default";
+            break;
+    }
+}
+function glfwCreateStandardCursorCustom(shape) {
+    return shape
+}
+var notWorkingTimer = setTimeout(() => {
+    document.getElementById("not_working").classList.add("visible")
+}, 5000);
+var Module = {
+    preRun:  [],
+    postRun: function() {
+        // Patch the emscripten GLFW module to send mouse and touch events in the right order
+        // For ImGui interactions to correctly work with touch input, MousePos events need
+        // to be processed first and then MouseButton events in the next frame. By default,
+        // GLFW does the exact opposite, which causes buttons to require two taps to register
+        // and windows get "stuck" to the cursor when dragged or resized
+        GLFW.onMousemove = event => {
+            if (event.type === "touchmove") {
+                event.preventDefault();
+                let primaryChanged = false;
+                for (let i of event.changedTouches) {
+                    if (GLFW.primaryTouchId === i.identifier) {
+                        Browser.setMouseCoords(i.pageX, i.pageY);
+                        primaryChanged = true;
+                        break;
+                    }
+                }
+                if (!primaryChanged) {
+                    return;
+                }
+            } else {
+                Browser.calculateMouseEvent(event);
+            }
+        };
+        GLFW.onMouseButtonChanged = (event, status) => {
+            if (!GLFW.active) return;
+            if (event.target != Module["canvas"]) return;
+            const isTouchType = event.type === "touchstart" || event.type === "touchend" || event.type === "touchcancel";
+            let eventButton = 0;
+            if (isTouchType) {
+                event.preventDefault();
+                let primaryChanged = false;
+                if (GLFW.primaryTouchId === null && event.type === "touchstart" && event.targetTouches.length > 0) {
+                    const chosenTouch = event.targetTouches[0];
+                    GLFW.primaryTouchId = chosenTouch.identifier;
+                    Browser.setMouseCoords(chosenTouch.pageX, chosenTouch.pageY);
+                    primaryChanged = true;
+                } else if (event.type === "touchend" || event.type === "touchcancel") {
+                    for (let i of event.changedTouches) {
+                        if (GLFW.primaryTouchId === i.identifier) {
+                            GLFW.primaryTouchId = null;
+                            primaryChanged = true;
+                            break;
+                        }
+                    }
+                }
+                if (!primaryChanged) {
+                    return;
+                }
+            } else {
+                Browser.calculateMouseEvent(event);
+                eventButton = GLFW.DOMToGLFWMouseButton(event);
+            }
+            if (status == 1) {
+                GLFW.active.buttons |= (1 << eventButton);
+                try {
+                    event.target.setCapture();
+                } catch (e) {}
+            } else {
+                GLFW.active.buttons &= ~(1 << eventButton);
+            }
+            if (GLFW.active.cursorPosFunc) {
+                getWasmTableEntry(GLFW.active.cursorPosFunc)(GLFW.active.id, Browser.mouseX, Browser.mouseY);
+            }
+            if (GLFW.active.mouseButtonFunc) {
+                getWasmTableEntry(GLFW.active.mouseButtonFunc)(GLFW.active.id, eventButton, status, GLFW.getModBits(GLFW.active));
+            }
+        };
+    },
+    onRuntimeInitialized: function() {
+        // Triggered when the wasm module is loaded and ready to use.
+        document.getElementById("loading").style.display = "none"
+        document.getElementById("canvas").style.display = "initial"
+        clearTimeout(notWorkingTimer);
+    },
+    print:   (function() { })(),
+    printErr: function(text) {  },
+    canvas: (function() {
+        const canvas = document.getElementById('canvas');
+        canvas.addEventListener("webglcontextlost", function(e) {
+            alert('WebGL context lost, please reload the page');
+            e.preventDefault();
+        }, false);
+        // Turn long touches into right-clicks
+        let timer = null;
+        canvas.addEventListener('touchstart', event => {
+            timer = setTimeout(() => {
+                let eventArgs = {
+                    bubbles: true,
+                    cancelable: true,
+                    view: window,
+                    screenX: event.touches[0].screenX,
+                    screenY: event.touches[0].screenY,
+                    clientX: event.touches[0].clientX,
+                    clientY: event.touches[0].clientY,
+                    button: 2,
+                    buttons: 2,
+                    relatedTarget: event.target,
+                    region: event.region
+                }
+                canvas.dispatchEvent(new MouseEvent('mousedown', eventArgs));
+                canvas.dispatchEvent(new MouseEvent('mouseup', eventArgs));
+            }, 400);
+        });
+        canvas.addEventListener('touchend', event => {
+            if (timer) {
+                clearTimeout(timer);
+                timer = null;
+            }
+        });
+        if (typeof WebGL2RenderingContext !== 'undefined') {
+            let gl = canvas.getContext('webgl2', { stencil: true });
+            if (!gl) {
+                console.error('WebGL 2 not available, falling back to WebGL');
+                gl = canvas.getContext('webgl', { stencil: true });
+            }
+            if (!gl) {
+                alert('WebGL not available with stencil buffer');
+            }
+            return canvas;
+        } else {
+            alert('WebGL 2 not supported by this browser');
+        }
+    })(),
+    setStatus: function(text) { },
+    totalDependencies: 0,
+    monitorRunDependencies: function(left) {
+    },
+    instantiateWasm: async function(imports, successCallback) {
+        imports.env.glfwSetCursor = glfwSetCursorCustom
+        imports.env.glfwCreateStandardCursor = glfwCreateStandardCursorCustom
+        let result = await instantiateAsync(null, findWasmBinary(), imports);
+        successCallback(result.instance, result.module)
+    },
+    arguments: []
+};
+// Handle passing arguments to the wasm module
+const queryString = window.location.search;
+const urlParams = new URLSearchParams(queryString);
+if (urlParams.has("lang")) {
+    Module["arguments"].push("--language");
+    Module["arguments"].push(urlParams.get("lang"));
+} else if (urlParams.has("save-editor")) {
+    Module["arguments"].push("--save-editor");
+    Module["arguments"].push("gist");
+    Module["arguments"].push(urlParams.get("save-editor"));
+}
+window.addEventListener('resize', js_resizeCanvas, false);
+function js_resizeCanvas() {
+    let canvas = document.getElementById('canvas');
+    canvas.top    = document.documentElement.clientTop;
+    canvas.left   = document.documentElement.clientLeft;
+    canvas.width  = Math.min(document.documentElement.clientWidth, window.innerWidth || 0);
+    canvas.height = Math.min(document.documentElement.clientHeight, window.innerHeight || 0);
+}
+// Prevent some default browser shortcuts from preventing ImHex ones to work
+document.addEventListener('keydown', e => {
+    if (e.ctrlKey) {
+        if (e.which == 83) e.preventDefault();
+    }
+})