zip-wheel-explorer

simonw · web-flow · commit 429eb8850b5f · 2024-11-19T11:08:21.000-08:00
Created first version using a Claude 3.5 Haiku prompt similar to this:

&gt; web app with an input box to paste in a URL to a zip or .tar.gz or wheel file - it then uses fetch() to fetch that binary file and uses the necessary JavaScript libraries to unzip it and then shows a list of the files in that package, clicking each of those shows the content of that file

But had to edit a lot - to use jsdelivr for example, and to remove the .tar.gz support which didn't work.
diff --git a/zip-wheel-explorer.html b/zip-wheel-explorer.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Package File Browser</title>
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+<style>
+body {
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  margin: 2rem;
+  max-width: 800px;
+  margin: 0 auto;
+}
+input, textarea {
+  font-size: 16px;
+  width: 100%;
+  margin-bottom: 1rem;
+  padding: 0.5rem;
+  box-sizing: border-box;
+}
+#fileList, #fileContent {
+  border: 1px solid #ddd;
+  padding: 1rem;
+  margin-top: 1rem;
+}
+pre {
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  background-color: #f4f4f4;
+  padding: 1rem;
+  max-height: 400px;
+  overflow-y: auto;
+}
+</style>
+</head>
+<body>
+<h1>Package File Browser</h1>
+<input type="text" id="urlInput" placeholder="Paste URL to .zip, .tar.gz, or .whl file">
+<button onclick="fetchAndUnpackFile()">Unpack File</button>
+<p>Try a wheel from PyPI like: <code>https://files.pythonhosted.org/packages/ae/8f/e0661dd3077b7343419ddb5ff840f6bcf571e8d11d8acb031e1b167de79c/llm_mistral-0.8-py3-none-any.whl</code> (<a href="#" onclick="document.getElementById('urlInput').value='https://files.pythonhosted.org/packages/ae/8f/e0661dd3077b7343419ddb5ff840f6bcf571e8d11d8acb031e1b167de79c/llm_mistral-0.8-py3-none-any.whl'; fetchAndUnpackFile(); return false">try it</a>)</p>
+<div id="fileList" style="display: none"></div>
+<div id="fileContent" style="display: none"></div>
+
+<script src="https://cdn.jsdelivr.net/npm/jszip@3.10.1/dist/jszip.min.js"></script>
+<script>
+async function fetchAndUnpackFile() {
+    const url = document.getElementById('urlInput').value;
+    const fileListEl = document.getElementById('fileList');
+    const fileContentEl = document.getElementById('fileContent');
+    
+    fileListEl.innerHTML = 'Downloading file...';
+    fileContentEl.innerHTML = '';
+
+    try {
+        const response = await fetch(url);
+        const arrayBuffer = await response.arrayBuffer();
+        const files = await extractFiles(arrayBuffer, url);
+        fileListEl.style.display = 'block';
+        fileListEl.innerHTML = '<h3>Files in package:</h3>';
+        files.forEach((file, index) => {
+            const fileEl = document.createElement('div');
+            fileEl.textContent = file.name;
+            fileEl.style.cursor = 'pointer';
+            fileEl.onclick = () => {
+                fileContentEl.style.display = 'block';
+                fileContentEl.innerHTML = `<h3>${file.name}</h3><pre>${file.content}</pre>`;
+            };
+            fileListEl.appendChild(fileEl);
+        });
+    } catch (error) {
+        fileListEl.innerHTML = `Error: ${error.message}`;
+        console.error(error);
+    }
+}
+
+async function extractFiles(arrayBuffer, url) {
+    const files = [];
+
+    if (url.endsWith('.zip')) {
+        const zip = await JSZip.loadAsync(arrayBuffer);
+        for (const [name, file] of Object.entries(zip.files)) {
+            const content = await file.async('text');
+            files.push({ name, content });
+        }
+    } else if (url.endsWith('.tar.gz')) {
+        alert('tar not supported yet');
+    } else if (url.endsWith('.whl')) {
+        // Wheel files are zip files with a specific structure
+        const zip = await JSZip.loadAsync(arrayBuffer);
+        for (const [name, file] of Object.entries(zip.files)) {
+            const content = await file.async('text');
+            files.push({ name, content });
+        }
+    } else {
+        throw new Error('Unsupported file type');
+    }
+
+    return files;
+}
+</script>
+</body>
+</html>
