added Try Valkey support (#255)

### General Description

This PR implements a browser-based environment that allows users to
interact with Valkey-CLI commands without needing local installation.
This feature was initially introduced in [Issue
#1412](valkey-io/valkey#1412), and it aims to
provide a lightweight, easy-to-access platform for users to explore
Valkey’s functionalities directly in the browser.

### Implementation 

The solution uses a virtualized environment powered by
[v86](https://github.com/copy/v86), a tool that emulates an
x86-compatible CPU and hardware. The machine code for the environment is
translated into WebAssembly modules at runtime, allowing it to run
entirely within the browser.

* VM Configuration: When the page is loaded, the VM loads a
preconfigured Alpine Linux image that already has the Valkey server and
CLI installed. This configuration ensures users can immediately interact
with the Valkey CLI upon starting the web-based environment.
* Current Version: The current version of Valkey in the preconfigured
image is 8.1.0. However, binaries for earlier versions (7.2.8 and 8.0.1)
are also available in the S3 bucket. We can decide whether to set a
single version or implement a dropdown menu that allows users to choose
the version they want to interact with.

### Serving of Binary Files

The virtual machine used for this setup relies on two main binary file
components:

1. Binary files for the VM’s filesystem.
2. A binary file containing a preloaded state, which allows for seamless
page loading.

These binaries are served from an S3 bucket (currently set as a test
bucket) via CloudFront CDN.

* CORS Policy: To allow the browser to access these binary files, we
need to configure the appropriate CORS policy. Specifically, the
“Access-Control-Allow-Origin” header must be set correctly. This CORS
policy needs to be configured both for the S3 bucket and the CloudFront
distribution.
* We can set this policy only for the Try-Valkey files directory if we
prefer not to apply it to the entire bucket.
* Additionally, we can restrict access to these files by specifying that
only the Valkey website domain can use them. More details can be found
[here](https://repost.aws/knowledge-center/no-access-control-allow-origin-error).

### New Image Creation Process

Currently, the creation of new images for future Valkey versions will be
done manually. However, we plan to automate this process in the future
to simplify updates as new versions of Valkey are released.
I have also created a
[repository](https://github.com/valkey-io/valkey-try-me) for
documentation and for creating new images for Try Valkey.

### Screenshots
new "Try Valkey" tab
<img width="1510" alt="Screenshot 2025-06-03 at 11 48 36"
src="https://github.com/user-attachments/assets/d881c7b6-6156-4e85-aa45-673beb76528b"
/>
data warning 
<img width="1510" alt="Screenshot 2025-06-03 at 11 48 47"
src="https://github.com/user-attachments/assets/d9c4c75c-90de-4c83-a3cd-a85bab2a648b"
/>
after pressing "load emulator"
<img width="1510" alt="Screenshot 2025-06-03 at 11 49 00"
src="https://github.com/user-attachments/assets/ea2f98c5-239d-462f-a2a7-3dd265ad66e5"
/>

---------

Signed-off-by: Shai Zarka <[email protected]>
Signed-off-by: Daniel Phillips <[email protected]>
Signed-off-by: Madelyn Olson <[email protected]>
Co-authored-by: Daniel Phillips <[email protected]>
Co-authored-by: Madelyn Olson <[email protected]>

Author: 3 people

content/try-valkey/index.md

@@ -0,0 +1,5 @@
++++
+title = "Try Valkey"
+template = "valkey-try-me.html"
++++
+

templates/default.html

@@ -36,6 +36,9 @@
         <a role="menuitem" href="/blog/">Blog</a>
         <a role="menuitem" href="/community/">Community</a>
         <a role="menuitem" href="/participants/">Participants</a>
+        <a role="menuitem" href="/try-valkey/">Try Valkey</a>
+        <a role="menuitem" href="/community/">Community</a>
+        <a role="menuitem" href="/participants/">Participants</a>
       </nav>
     </div>
   </div>

templates/valkey-try-me.html

@@ -0,0 +1,232 @@
+{% extends "fullwidth.html" %}
+{% block main_content %}
+    <!-- Scripts -->
+    <script src="https://download.valkey.io/try-me-valkey/vos/v86/libv86.js"></script>
+    <script src="https://download.valkey.io/try-me-valkey/vos/xterm/xterm.min.js"></script>
+    <script src="https://download.valkey.io/try-me-valkey/vos/pako/pako.min.js"></script>
+    <script src="https://download.valkey.io/try-me-valkey/vos/v86/serial_xterm.js"></script>
+    
+    <!-- Styles -->
+    <link rel="stylesheet" href="https://download.valkey.io/try-me-valkey/vos/xterm/xterm.css" />
+    <link rel="stylesheet" href="https://download.valkey.io/try-me-valkey/vos/valkey-try-me.css" />
+    
+    <!-- Body -->
+    <title>Try Valkey</title>
+    <p>This is an in-browser Valkey server and CLI that runs directly within your browser using a <a href="https://github.com/copy/v86">V86</a> emulator, requiring no external installations. </p>
+    <p>Try it out below:</p>
+    <div id="terminalWrapper" class="container" style="display: none;">
+        <div id="terminal-container"></div>
+    </div>
+    <!-- Warning Section -->
+    <div id="warningContainer" style="text-align: center; margin-top: 20px;">
+        <button id="startButton" style="padding: 10px 20px; font-size: 18px; margin-top: 10px; cursor: pointer;">Load Emulator</button>
+        <p>This emulator will download approximately 50MB of data.</p>
+    </div>
+    <!-- Loading Section (Hidden at first) -->
+    <div id="loadingContainer" style="display: none;">
+        <p id="progressText">Preparing to load...</p>
+        <progress id="progressBar" value="0" max="100"></progress>
+    </div>
+
+    <script>
+        "use strict";
+        const FILE_URL = "https://download.valkey.io/try-me-valkey/8.1.0/states/state.bin.gz";  // Path to the .gz file
+        const CACHE_KEY = "valkey_binary_cache";
+        const LAST_MODIFIED_KEY = "valkey_last_modified";
+        let emulator;
+
+        // Open or create IndexedDB
+        async function openIndexedDB() {
+            return new Promise((resolve, reject) => {
+                const request = indexedDB.open("binaryCacheDB", 1);
+
+                request.onerror = () => reject("Error opening IndexedDB");
+                request.onsuccess = () => resolve(request.result);
+
+                request.onupgradeneeded = (event) => {
+                    const db = event.target.result;
+                    db.createObjectStore("cache", { keyPath: "key" });
+                };
+            });
+        }
+
+        // Retrieve binary from cache
+        async function getCachedBinary(db) {
+            return new Promise((resolve, reject) => {
+                const transaction = db.transaction(["cache"], "readonly");
+                const objectStore = transaction.objectStore("cache");
+                const request = objectStore.get(CACHE_KEY);
+
+                request.onerror = () => reject("Error retrieving cached binary");
+                request.onsuccess = () => resolve(request.result ? request.result.data : null);
+            });
+        }
+
+        // Save binary to cache
+        async function saveBinaryToCache(db, data) {
+            return new Promise((resolve, reject) => {
+                const transaction = db.transaction(["cache"], "readwrite");
+                const objectStore = transaction.objectStore("cache");
+                const request = objectStore.put({ key: CACHE_KEY, data });
+
+                request.onerror = () => reject("Error saving binary to cache");
+                request.onsuccess = () => resolve();
+            });
+        }
+
+        // Check if binary is updated
+        async function checkIfUpdated() {
+            return new Promise((resolve, reject) => {
+                const xhr = new XMLHttpRequest();
+                xhr.open("HEAD", FILE_URL, true);
+
+                xhr.onload = () => {
+                    const serverLastModified = xhr.getResponseHeader("Last-Modified");
+                    const cachedLastModified = localStorage.getItem(LAST_MODIFIED_KEY);
+
+                    if (!serverLastModified || serverLastModified !== cachedLastModified) {
+                        localStorage.setItem(LAST_MODIFIED_KEY, serverLastModified);
+                        resolve(true);
+                    } else {
+                        resolve(false);
+                    }
+                };
+
+                xhr.onerror = () => reject("Error checking file version");
+                xhr.send();
+            });
+        }
+
+        // Download and decompress binary
+        function downloadAndDecompressBinary(callback) {
+            const xhr = new XMLHttpRequest();
+            xhr.open("GET", FILE_URL, true);
+            xhr.responseType = "arraybuffer";
+
+            xhr.onprogress = (event) => {
+                if (event.lengthComputable) {
+                    const percentComplete = (event.loaded / event.total) * 100;
+                    document.getElementById("progressBar").value = percentComplete;
+                }
+            };
+
+            xhr.onload = () => {
+                if (xhr.status === 200) {
+                    document.getElementById("progressText").innerText = "Decompressing image...";
+                    const decompressedData = pako.ungzip(new Uint8Array(xhr.response));
+                    callback(decompressedData);
+                }
+            };
+
+            xhr.onerror = () => {
+                document.getElementById("progressText").innerText = "Download failed!";
+            };
+
+            xhr.send();
+        }
+
+        async function loadEmulator(decompressedData) {
+            const progressText = document.getElementById("progressText");
+
+            const blob = new Blob([decompressedData], { type: "application/octet-stream" });
+            const imgUrl = URL.createObjectURL(blob);
+
+            progressText.innerText = "Starting emulator...";
+
+            emulator = new V86({
+                wasm_path: "https://download.valkey.io/try-me-valkey/vos/v86/v86.wasm",
+                memory_size: 512 * 1024 * 1024,
+                bios: { url: "https://download.valkey.io/try-me-valkey/vos/v86/bios/seabios.bin" },
+                filesystem: {
+                    baseurl: "https://download.valkey.io/try-me-valkey/8.1.0/fs/alpine-rootfs-flat",
+                    basefs: "https://download.valkey.io/try-me-valkey/8.1.0/fs/alpine-fs.json",
+                },
+                autostart: true,
+                bzimage_initrd_from_filesystem: true,
+                cmdline: "rw root=host9p rootfstype=9p rootflags=trans=virtio,cache=loose modules=virtio_pci tsc=reliable",
+                initial_state: { url: imgUrl },
+                disable_mouse: true,
+                disable_keyboard: true,
+                disable_speaker: true,
+            });
+
+            await new Promise(resolve => emulator.add_listener("emulator-ready", resolve));
+
+            const serialAdapter = new SerialAdapterXtermJS(document.getElementById('terminal-container'), emulator.bus);
+            serialAdapter.show();
+
+            document.getElementById("loadingContainer").style.display = "none";
+            document.getElementById("terminalWrapper").style.display = "flex";
+
+            if (emulator) {
+                resetInactivityTimer();
+                ["mousemove", "keydown", "touchstart"].forEach(event => {
+                    window.addEventListener(event, resetInactivityTimer);
+                });
+                
+                serialAdapter.term.onKey(() => resetInactivityTimer()); // Typing
+                serialAdapter.term.onData(() => resetInactivityTimer()); // Sending data
+                serialAdapter.term.onCursorMove(() => resetInactivityTimer()); // Mouse activity
+            };
+        }
+
+        let inactivityTimeout;
+        const INACTIVITY_LIMIT = 60*1000*10 //inactivity limit is 10 minutes
+
+        function resetInactivityTimer() {
+            if (!emulator) {
+                console.warn("Emulator is not initialized yet.");
+                return;
+            }
+
+            clearTimeout(inactivityTimeout);
+
+            inactivityTimeout = setTimeout(() => {
+                if (emulator.is_running()) {
+                        console.log("VM paused due to inactivity.");
+                        emulator.stop();
+                    }
+            }, INACTIVITY_LIMIT);
+
+            if (!emulator.is_running()) {
+                console.log("VM resumed");
+                emulator.run();
+            }
+        }
+
+        window.onload = function () {
+            const startButton = document.getElementById("startButton");
+            startButton.addEventListener("click", async () => {
+                document.getElementById("warningContainer").style.display = "none";
+                document.getElementById("loadingContainer").style.display = "block";
+                document.getElementById("progressText").innerText = "Preparing to load..."; 
+
+                const db = await openIndexedDB();
+
+                try {
+                    const needsDownload = await checkIfUpdated();
+
+                    if (needsDownload) {
+                        downloadAndDecompressBinary(async (decompressedData) => {
+                            await saveBinaryToCache(db, decompressedData);
+                            loadEmulator(decompressedData);
+                        });
+                    } else {
+                        const cachedBinary = await getCachedBinary(db);
+                        if (cachedBinary) {
+                            loadEmulator(cachedBinary);
+                        } else {
+                            downloadAndDecompressBinary(async (decompressedData) => {
+                                await saveBinaryToCache(db, decompressedData);
+                                loadEmulator(decompressedData);
+                            });
+                        }
+                    }
+                } catch (error) {
+                    console.error("Error loading binary: ", error);
+                    document.getElementById("progressText").innerText = "Failed to load binary.";
+                }
+            });
+        };
+    </script>
+{% endblock main_content %}