cc4-embedded-system 3.0.1 → 3.1.0

package/README.md

@@ -1,19 +1,25 @@
 # CC4EmbeddedSystem V3
-This version based on [html-minifier-next](https://github.com/j9t/html-minifier-next) and rewrite [lwIP makefsdata](https://github.com/m-labs/lwip/tree/master/src/apps/httpd/makefsdata), run on localhost, default port: ```3000```.
+- This version based on [html-minifier-next](https://github.com/j9t/html-minifier-next) and rewrite [lwIP makefsdata](https://github.com/m-labs/lwip/tree/master/src/apps/httpd/makefsdata), run on localhost, default port: ```3000```.
+- This tool is deployed on [npm package](https://www.npmjs.com/package/cc4-embedded-system).
 
-![](./Screenshot/v3.0.0.png)
+![](./Screenshot/v3.1.0.png)
 
 ## Structure
 ```text
 CC4EmbeddedSystem/
 ├── src/
 │   ├── gui.ts        // Express server & CLI entry point
+│   │   ├── utils.ts  // To get latest tool version
 │   └── makefsdata.ts // Core C code generation & minification logic
 ├── public/
 │   └── index.html    // Web GUI dashboard
+├── Sereenshot/
+│   └── v3.1.0.png    // Demo image
+├── node_modules/     // Required submodules during development
 ├── dist/             // Compiled JavaScript output (Auto-generated)
-├── tsconfig.json     // TypeScript configuration
-└── package.json      // Project configuration & dependencies
+├── package.json      // Project configuration & dependencies
+├── package-lock.json // Project configuration & dependencies
+└── tsconfig.json     // TypeScript configuration
 ```
 
 ## Commands

package/dist/gui.js

@@ -57,17 +57,24 @@
  * THE SOFTWARE.
  * ==============================================================================
  */
-// modern ESM
 import express from 'express';
 import open from 'open';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
-import fs from 'node:fs';
 import { runMakeFsData } from './makefsdata.js';
+import { getPackageVersion } from './utils.js';
+import { execSync } from 'node:child_process';
+import os from 'node:os';
+// prevent socket errors
+process.on('uncaughtException', (err) => {
+    if (err.code === 'EADDRINUSE')
+        return;
+    console.error('⚠️ Uncaught Error:', err);
+});
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 const app = express();
-// port default: 3000
+// port set by command
 let PORT = parseInt(process.env.PORT || '3000', 10);
 const portArgIndex = process.argv.indexOf('--port');
 if (portArgIndex !== -1 && process.argv[portArgIndex + 1]) {
@@ -76,25 +83,38 @@ if (portArgIndex !== -1 && process.argv[portArgIndex + 1]) {
         PORT = parsedPort;
 }
 let server;
+let shutdownTimer = null;
 app.use(express.json());
 app.use(express.static(path.join(__dirname, '../public')));
-// get current version
-const getPackageVersion = () => {
-    try {
-        const pkg = JSON.parse(fs.readFileSync('./package.json', 'utf8'));
-        return pkg.version || "0.0.0";
-    }
-    catch {
-        return "3.0.0";
+const cancelShutdown = () => {
+    if (shutdownTimer) {
+        clearTimeout(shutdownTimer);
+        shutdownTimer = null;
+        // console.log('🛡️ Shutdown cancelled (keep alive)');
     }
 };
 app.get('/api/version', (_req, res) => {
+    cancelShutdown();
     res.json({ version: getPackageVersion() });
 });
-// main
+app.post('/api/shutdown', (_req, res) => {
+    res.json({ success: true });
+    if (!shutdownTimer) {
+        shutdownTimer = setTimeout(() => {
+            console.log('👋 Window closed, shutting down ...');
+            process.exit(0);
+        }, 2000);
+    }
+});
+app.post('/api/cancel-shutdown', (_req, res) => {
+    cancelShutdown();
+    res.json({ success: true });
+});
 app.post('/api/build', async (req, res) => {
-    // get minifyOpts
+    cancelShutdown();
     const { inputPath, outputPath, minifyOpts } = req.body;
+    console.log(`[Build] Input: ${inputPath}`);
+    console.log(`[Build] Output: ${outputPath}`);
     const opts = {
         inputDir: inputPath,
         outputFile: outputPath,
@@ -106,40 +126,83 @@ app.post('/api/build', async (req, res) => {
         minifyOpts: minifyOpts
     };
     try {
-        await runMakeFsData(opts);
-        await open(path.dirname(outputPath));
-        res.json({ success: true });
+        // get stats
+        const stats = await runMakeFsData(opts);
+        try {
+            await open(path.dirname(path.resolve(outputPath)));
+        }
+        catch (e) {
+            // ignore open folder error
+        }
+        // return stats
+        res.json({
+            success: true,
+            stats: stats // originalSize, compressedSize, filesCount
+        });
     }
     catch (error) {
         res.json({ success: false, message: error.message });
     }
 });
-app.post('/api/shutdown', (_req, res) => {
-    console.log('👋 Window closed, shutting down ...');
-    res.json({ success: true });
-    setTimeout(() => { process.exit(0); }, 500);
-});
 app.post('/api/change-port', (req, res) => {
+    cancelShutdown();
     const parsedPort = parseInt(req.body.newPort, 10);
     if (isNaN(parsedPort) || parsedPort < 1 || parsedPort > 65535) {
         res.json({ success: false, message: 'Invalid port number.' });
         return;
     }
     res.json({ success: true });
-    // restart
     setTimeout(() => {
         if (server) {
-            server.closeAllConnections();
-            server.close(() => {
-                PORT = parsedPort;
-                server = app.listen(PORT, () => {
+            try {
+                server.closeAllConnections();
+                server.close(() => {
+                    PORT = parsedPort;
+                    startServer();
                     console.log(`🔄 Server successfully restarted on port ${PORT}`);
                 });
-            });
+            }
+            catch (e) {
+                startServer();
+            }
         }
     }, 100);
 });
-server = app.listen(PORT, async () => {
-    console.log(`✨ GUI Server started! Opening in browser...`);
-    await open(`http://localhost:${PORT}`);
+app.get('/api/browse', (req, res) => {
+    const isDir = req.query.type === 'dir';
+    const platform = os.platform();
+    let command = '';
+    try {
+        if (platform === 'win32') { // Windows: Powershell + OpenFileDialog
+            if (isDir)
+                command = `powershell -Command "Add-Type -AssemblyName System.Windows.Forms; $f = New-Object System.Windows.Forms.OpenFileDialog; $f.CheckFileExists = $false; $f.CheckPathExists = $true; $f.FileName = 'Select Folder'; $f.ValidateNames = $false; if($f.ShowDialog() -eq 'OK'){ Split-Path $f.FileName }"`;
+            else
+                command = `powershell -Command "Add-Type -AssemblyName System.Windows.Forms; $f = New-Object System.Windows.Forms.OpenFileDialog; $f.Filter = 'C Files (*.c)|*.c|All Files (*.*)|*.*'; if($f.ShowDialog() -eq 'OK'){ $f.FileName }"`;
+        }
+        else if (platform === 'darwin') { // macOS: darwin
+            if (isDir)
+                command = `osascript -e 'POSIX path of (choose folder with prompt "Select Input Directory")'`;
+            else
+                command = `osascript -e 'POSIX path of (choose file with prompt "Select Output File")'`;
+        }
+        else { // Linux: Zenity
+            if (isDir)
+                command = `zenity --file-selection --directory --title="Select Input Directory"`;
+            else
+                command = `zenity --file-selection --title="Select Output File"`;
+        }
+        const result = execSync(command).toString().trim();
+        res.json({ success: true, path: result || null });
+    }
+    catch (e) {
+        res.json({ success: true, path: null });
+    }
 });
+const startServer = () => {
+    server = app.listen(PORT, () => {
+        console.log(`✨ GUI Server started on http://localhost:${PORT}`);
+    });
+};
+// main run
+startServer();
+open(`http://localhost:${PORT}`);

package/dist/makefsdata.js

@@ -60,20 +60,12 @@
 import fs from 'node:fs';
 import path from 'node:path';
 import { minify } from 'html-minifier-next';
+import { getPackageVersion } from './utils.js';
 // ----------------------------------------------------------------------
 // 1. Configs & Version Recovery
 // ----------------------------------------------------------------------
 const TCP_MSS = 1460;
 const LWIP_VERSION = "1.3.1"; // this makefsdata.ts is based on lwIP v1.3.1
-const getPackageVersion = () => {
-    try {
-        const pkg = JSON.parse(fs.readFileSync('./package.json', 'utf8'));
-        return pkg.version || "0.0.0";
-    }
-    catch {
-        return "v3.0.0";
-    }
-};
 // html-minifier-next options
 const COMPRESS_OPTS_DEFAULT = {
     collapseWhitespace: true,
@@ -195,9 +187,6 @@ function bufferToHexCArray(buf) {
         out += '\n';
     return out;
 }
-// ----------------------------------------------------------------------
-// 4. export API
-// ----------------------------------------------------------------------
 export async function runMakeFsData(opts) {
     console.log(`🚀 CC4EmbeddedSystem V3: Starting makefsdata compilation...`);
     // checkers
@@ -214,6 +203,8 @@ export async function runMakeFsData(opts) {
         fs.mkdirSync(outDir, { recursive: true });
     const allFiles = getFilesRecursive(opts.inputDir, opts.processSubs);
     const fileEntries = [];
+    let totalOriginalSize = 0;
+    let totalCompressedSize = 0;
     if (allFiles.length === 0)
         throw new Error(`Input directory is empty! Please put your web files (.html, .css, etc.) into:\n${path.resolve(opts.inputDir)}`);
     // html-minifier-next options
@@ -223,15 +214,18 @@ export async function runMakeFsData(opts) {
         const relativePath = '/' + path.relative(opts.inputDir, filePath).replace(/\\/g, '/');
         const ext = path.extname(filePath).toLowerCase();
         let content = fs.readFileSync(filePath);
+        const originalFileSize = content.length;
+        totalOriginalSize += originalFileSize;
         if (['.html', '.htm', '.css', '.js'].includes(ext)) {
             const minifiedStr = await minify(content.toString('utf8'), activeCompressOpts);
             if (typeof minifiedStr === 'string') {
                 content = Buffer.from(minifiedStr, 'utf8');
-                console.log(`📦 Minified: ${relativePath}`);
+                console.log(`📦 Minified: ${relativePath} (${originalFileSize} -> ${content.length} bytes)`);
             }
         }
         else
             console.log(`📄 Copied: ${relativePath}`);
+        totalCompressedSize += content.length;
         // generate header
         const headerData = opts.includeHttpHeader ? generateHttpHeaders(filePath, content.length, opts) : { parts: [], totalBuffer: Buffer.alloc(0) };
         const nameBuffer = Buffer.from(relativePath + '\0', 'utf8');
@@ -318,5 +312,11 @@ export async function runMakeFsData(opts) {
         cOutput += `#define FS_ROOT file_${rootNode.varName}\n#define FS_NUMFILES ${fileEntries.length + 1}\n`;
         fs.writeFileSync(opts.outputFile, cOutput);
         console.log(`\n✨ Success! Output written to: ${opts.outputFile}`);
+        return {
+            originalSize: totalOriginalSize,
+            compressedSize: totalCompressedSize,
+            filesCount: fileEntries.length
+        };
     }
+    throw new Error("No files processed.");
 }

package/dist/utils.js

@@ -0,0 +1,73 @@
+/*
+ * ==============================================================================
+ * CC4EmbeddedSystem V3 (makefsdata)
+ * Copyright (c) 2026 LunaticGhoulPiano / Emile Su
+ * Licensed under the MIT License.
+ * ==============================================================================
+ *
+ * This software integrates concepts, logic, and minification processes derived
+ * from the following open-source projects. We deeply appreciate their work:
+ *
+ * ------------------------------------------------------------------------------
+ * 1. lwIP (Lightweight TCP/IP stack)
+ * Repository: https://github.com/m-labs/lwip
+ * Copyright (c) 2001-2004 Swedish Institute of Computer Science.
+ * All rights reserved.
+ * * Redistribution and use in source and binary forms, with or without modification,
+ * are permitted provided that the following conditions are met:
+ * * 1. Redistributions of source code must retain the above copyright notice,
+ * this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright notice,
+ * this list of conditions and the following disclaimer in the documentation
+ * and/or other materials provided with the distribution.
+ * 3. The name of the author may not be used to endorse or promote products
+ * derived from this software without specific prior written permission.
+ * * THIS SOFTWARE IS PROVIDED BY THE AUTHOR ``AS IS'' AND ANY EXPRESS OR IMPLIED
+ * WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
+ * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT
+ * SHALL THE AUTHOR BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+ * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT
+ * OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING
+ * IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY
+ * OF SUCH DAMAGE.
+ *
+ * ------------------------------------------------------------------------------
+ * 2. html-minifier-next
+ * Repository: https://github.com/j9t/html-minifier-next
+ * Copyright (c) Jens Oliver Meiert (html-minifier-next)
+ * Copyright (c) Daniel Ruf (html-minifier-terser)
+ * Copyright (c) Juriy "kangax" Zaytsev (html-minifier)
+ * * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ * * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ * * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ * ==============================================================================
+ */
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+export const getPackageVersion = () => {
+    try {
+        const pkgPath = path.join(__dirname, '../package.json');
+        const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf8'));
+        return pkg.version || "LTS";
+    }
+    catch (error) {
+        return "LTS";
+    }
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cc4-embedded-system",
-  "version": "3.0.1",
+  "version": "3.1.0",
   "description": "A modern typescript version of makefsdata based on html-minifier-next and lwIP v1.3.1",
   "bin": {
     "cc4es": "./dist/gui.js"

package/public/index.html

@@ -5,24 +5,40 @@
     <title>CC4EmbeddedSystem V3</title>
     <style>
         body { font-family: 'Consolas', monospace; background: #1e1e1e; color: #d4d4d4; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; }
-        .container { background: #252526; padding: 30px 40px; border-radius: 8px; border: 1px solid #333; width: 500px; box-shadow: 0 4px 20px rgba(0,0,0,0.5); }
+        .container { background: #252526; padding: 30px 40px; border-radius: 8px; border: 1px solid #333; width: 550px; box-shadow: 0 4px 20px rgba(0,0,0,0.5); }
         h2 { color: #569cd6; margin-top: 0; display: flex; justify-content: center; align-items: center; gap: 12px; }
         .github-link { color: #d4d4d4; display: flex; align-items: center; transition: color 0.2s; text-decoration: none; }
         .github-link:hover { color: #ffffff; }
         .form-group { margin-bottom: 20px; }
         label { display: block; font-weight: bold; margin-bottom: 8px; color: #9cdcfe; }
-        input[type="text"] { width: 100%; padding: 10px; background: #3c3c3c; border: 1px solid #555; border-radius: 4px; color: #d4d4d4; box-sizing: border-box; font-family: 'Consolas', monospace; }
+        
+        /* Input */
+        .input-row { display: flex; gap: 8px; }
+        input[type="text"] { flex: 1; padding: 10px; background: #3c3c3c; border: 1px solid #555; border-radius: 4px; color: #d4d4d4; box-sizing: border-box; font-family: 'Consolas', monospace; }
         input[type="text"]:focus { outline: none; border-color: #569cd6; }
         input::placeholder { color: #888; }
+        
+        /* Browse */
+        .btn-browse { width: auto; padding: 0 15px; background: #3a3d41; font-size: 13px; border: 1px solid #555; color: #d4d4d4; cursor: pointer; border-radius: 4px; }
+        .btn-browse:hover { background: #45494e; }
+
         button { width: 100%; padding: 12px; background: #0e639c; color: white; border: none; border-radius: 4px; font-size: 16px; font-weight: bold; cursor: pointer; transition: 0.2s; font-family: 'Consolas', monospace; }
         button:hover { background: #1177bb; }
         
-        /* Additional settings' styles */
+        /* Advanced Settings */
         details { background: #1e1e1e; padding: 12px; border-radius: 4px; border: 1px solid #444; margin-bottom: 20px; }
         summary { cursor: pointer; color: #c586c0; font-weight: bold; outline: none; user-select: none; }
         .options-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 15px; }
         .checkbox-label { display: flex; align-items: center; font-weight: normal; color: #cccccc; cursor: pointer; font-size: 14px; margin-bottom: 0; }
         .checkbox-label input { margin-right: 8px; cursor: pointer; accent-color: #0e639c; }
+
+        /* Compression Stats Panel */
+        .stats-panel { background: #1e1e1e; border: 1px solid #444; border-radius: 4px; padding: 15px; margin-bottom: 20px; display: none; }
+        .stats-title { color: #4ec9b0; font-size: 14px; margin-bottom: 10px; border-bottom: 1px solid #333; padding-bottom: 5px; font-weight: bold; }
+        .stats-info { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 5px; }
+        .bar-container { background: #444; height: 18px; border-radius: 9px; overflow: hidden; margin: 10px 0; position: relative; border: 1px solid #555; }
+        .bar-fill { background: #0e639c; height: 100%; width: 0%; transition: width 0.6s cubic-bezier(0.1, 0.7, 1.0, 0.1); }
+        .bar-text { position: absolute; width: 100%; text-align: center; font-size: 10px; line-height: 18px; color: #fff; text-shadow: 1px 1px 2px #000; font-weight: bold; }
     </style>
 </head>
 <body>
@@ -39,22 +55,27 @@
     
     <div class="form-group">
         <label>Input Directory</label>
-        <input type="text" id="inputPath" placeholder="e.g., ./input_webpages">
+        <div class="input-row">
+            <input type="text" id="inputPath" placeholder="e.g., C:\Project\web">
+            <button type="button" class="btn-browse" onclick="handleBrowse('inputPath', 'dir')">Brows ...</button>
+        </div>
     </div>
 
     <div class="form-group">
         <label>Output File (fsdata.c)</label>
-        <input type="text" id="outputPath" placeholder="e.g., ./output_fsdata.c">
+        <div class="input-row">
+            <input type="text" id="outputPath" placeholder="e.g., ./fsdata.c">
+            <button type="button" class="btn-browse" onclick="handleBrowse('outputPath', 'file')">Brows ...</button>
+        </div>
     </div>
 
     <details>
         <summary>⚙️ Advanced Settings</summary>
-        
         <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid #444;">
             <label style="margin-bottom: 0;">GUI Server Port</label>
             <div style="display: flex; gap: 8px;">
                 <input type="number" id="guiPort" style="width: 80px; padding: 6px; background: #3c3c3c; border: 1px solid #555; border-radius: 4px; color: #d4d4d4; text-align: center; font-family: 'Consolas', monospace;" min="1" max="65535">
-                <button type="button" onclick="changePort()" style="width: auto; padding: 6px 12px; font-size: 14px; background: #007acc;">Apply</button>
+                <button type="button" onclick="changePort()" style="width: auto; padding: 6px 12px; font-size: 14px; background: #007acc; border: none; border-radius: 4px; color: white; cursor: pointer;">Apply</button>
             </div>
         </div>
 
@@ -73,6 +94,19 @@
         </div>
     </details>
 
+    <div id="statsPanel" class="stats-panel">
+        <div class="stats-title">📊 Compression Analysis</div>
+        <div class="stats-info">
+            <span>Compressed: <span id="compSize" style="color: #9cdcfe;">0</span> KB</span>
+            <span>Original: <span id="origSize" style="color: #ce9178;">0</span> KB</span>
+        </div>
+        <div class="bar-container">
+            <div id="barFill" class="bar-fill"></div>
+            <div id="barText" class="bar-text">0% Saved</div>
+        </div>
+        <div id="savingsInfo" style="font-size: 11px; color: #6a9955; text-align: center;"></div>
+    </div>
+
     <button onclick="startBuild()">Generate C Code</button>
 </div>
 
@@ -80,53 +114,51 @@
     let isRedirecting = false;
     document.getElementById('guiPort').value = window.location.port || '80';
 
-    // get package.json version
+    async function handleBrowse(targetId, type) {
+        try {
+            const res = await fetch(`/api/browse?type=${type}`);
+            const data = await res.json();
+            if (data.success && data.path) {
+                document.getElementById(targetId).value = data.path;
+            }
+        }
+        catch (e) {
+            console.error('Failed to open system dialog', e);
+        }
+    }
+
     window.addEventListener('DOMContentLoaded', async () => {
+        await fetch('/api/cancel-shutdown', { method: 'POST' });
         try {
             const res = await fetch('/api/version');
             const data = await res.json();
             if (data.version) document.getElementById('app-title-text').innerText = `CC4EmbeddedSystem V3 (${data.version})`;
         }
-        catch (error) {
-            console.error('Can\'t get package.json version!', error);
-        }
+        catch (error) { console.error('Can\'t get version!', error); }
     });
 
     async function changePort() {
         const newPort = document.getElementById('guiPort').value.trim();
-        const currentPort = window.location.port || '80';
-
-        if (!newPort || newPort === currentPort) return;
-
+        if (! newPort) return;
+        
         const res = await fetch('/api/change-port', {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify({ newPort })
         });
-
+        
         const result = await res.json();
         if (result.success) {
-            isRedirecting = true; 
-            
-            // 0.5s restart server and redirect
-            setTimeout(() => {
-                window.location.href = `${window.location.protocol}//${window.location.hostname}:${newPort}`;
-            }, 500);
+            isRedirecting = true;
+            setTimeout(() => { window.location.href = `${window.location.protocol}//${window.location.hostname}:${newPort}`; }, 500);
         }
-        else alert('❌ Failed to change port: \n' + result.message);
     }
 
-    // run
     async function startBuild() {
         const inPath = document.getElementById('inputPath').value.trim();
         const outPath = document.getElementById('outputPath').value.trim();
+        if (! inPath || ! outPath) { alert('❌ Paths required.'); return; }
 
-        if (! inPath || ! outPath) {
-            alert('❌ Compile Error: \nBoth Input Directory and Output File paths are required.');
-            return;
-        }
-
-        // get all checkboxes
         const minifyOptions = {
             collapseWhitespace: document.getElementById('opt-collapseWhitespace').checked,
             removeComments: document.getElementById('opt-removeComments').checked,
@@ -143,24 +175,46 @@
         const res = await fetch('/api/build', {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ 
-                inputPath: inPath, 
-                outputPath: outPath,
-                minifyOpts: minifyOptions
-            })
+            body: JSON.stringify({ inputPath: inPath, outputPath: outPath, minifyOpts: minifyOptions })
         });
-
         const result = await res.json();
 
-        if (result.success) alert('✨ Success: \nC Array successfully generated at ' + outPath);
-        else alert('❌ Compile Error: \n' + result.message);
+        if (result.success) {
+            // visualize
+            if (result.stats) {
+                const panel = document.getElementById('statsPanel');
+                panel.style.display = 'block';
+
+                const { originalSize, compressedSize } = result.stats;
+                const origKB = (originalSize / 1024).toFixed(2);
+                const compKB = (compressedSize / 1024).toFixed(2);
+                
+                // ratio: the saved percentage
+                const ratio = originalSize > 0 ? (((originalSize - compressedSize) / originalSize) * 100).toFixed(1) : 0;
+                // compressedRatio: the remainings percentage
+                const compressedRatio = (100 - ratio).toFixed(1);
+
+                document.getElementById('origSize').innerText = origKB;
+                document.getElementById('compSize').innerText = compKB;
+                document.getElementById('barText').innerText = `${ratio}% Size Reduced`;
+                
+                // actual used percentage
+                setTimeout(() => {
+                    document.getElementById('barFill').style.width = compressedRatio + '%';
+                }, 50);
+
+                document.getElementById('savingsInfo').innerText = `✨ Total saved: ${(origKB - compKB).toFixed(2)} KB`;
+            }
+
+            alert('✨ Success! C Code generated at ' + outPath);
+        } else {
+            alert('❌ Error: ' + result.message);
+        }
     }
     
-    // listen close window
     window.addEventListener('beforeunload', () => {
         if (! isRedirecting) navigator.sendBeacon('/api/shutdown');
     });
 </script>
-
 </body>
 </html>

package/src/gui.ts

@@ -59,19 +59,26 @@
  * ==============================================================================
  */
 
-// modern ESM
 import express from 'express'; 
 import open from 'open';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
-import fs from 'node:fs';
 import { runMakeFsData, MakeFsDataOptions } from './makefsdata.js'; 
+import { getPackageVersion } from './utils.js';
+import { execSync } from 'node:child_process';
+import os from 'node:os';
+
+// prevent socket errors
+process.on('uncaughtException', (err: any) => {
+    if (err.code === 'EADDRINUSE') return; 
+    console.error('⚠️ Uncaught Error:', err);
+});
 
 const __filename: string = fileURLToPath(import.meta.url);
 const __dirname: string = path.dirname(__filename);
 const app = express();
 
-// port default: 3000
+// port set by command
 let PORT: number = parseInt(process.env.PORT || '3000', 10);
 const portArgIndex = process.argv.indexOf('--port');
 if (portArgIndex !== -1 && process.argv[portArgIndex + 1]) {
@@ -80,29 +87,47 @@ if (portArgIndex !== -1 && process.argv[portArgIndex + 1]) {
 }
 
 let server: any;
+let shutdownTimer: NodeJS.Timeout | null = null;
 
 app.use(express.json());
 app.use(express.static(path.join(__dirname, '../public')));
 
-// get current version
-const getPackageVersion = (): string => {
-    try {
-        const pkg = JSON.parse(fs.readFileSync('./package.json', 'utf8'));
-        return pkg.version || "0.0.0";
-    }
-    catch {
-        return "3.0.0";
+const cancelShutdown = () => {
+    if (shutdownTimer) {
+        clearTimeout(shutdownTimer);
+        shutdownTimer = null;
+        // console.log('🛡️ Shutdown cancelled (keep alive)');
     }
 };
 
-app.get('/api/version', (_req: express.Request, res: express.Response) => {
+app.get('/api/version', (_req, res) => {
+    cancelShutdown();
     res.json({ version: getPackageVersion() });
 });
 
-// main
-app.post('/api/build', async (req: express.Request, res: express.Response) => {
-    // get minifyOpts
+app.post('/api/shutdown', (_req, res) => {
+    res.json({ success: true });
+    
+    if (! shutdownTimer) {
+        shutdownTimer = setTimeout(() => {
+            console.log('👋 Window closed, shutting down ...');
+            process.exit(0);
+        }, 2000); 
+    }
+});
+
+app.post('/api/cancel-shutdown', (_req, res) => {
+    cancelShutdown();
+    res.json({ success: true });
+});
+
+app.post('/api/build', async (req: express.Request, res: express.Response): Promise<void> => {
+    cancelShutdown();
     const { inputPath, outputPath, minifyOpts } = req.body;
+    
+    console.log(`[Build] Input: ${inputPath}`);
+    console.log(`[Build] Output: ${outputPath}`);
+
     const opts: MakeFsDataOptions = {
         inputDir: inputPath,
         outputFile: outputPath,
@@ -115,22 +140,29 @@ app.post('/api/build', async (req: express.Request, res: express.Response) => {
     };
 
     try {
-        await runMakeFsData(opts);
-        await open(path.dirname(outputPath));
-        res.json({ success: true });
+        // get stats
+        const stats = await runMakeFsData(opts);
+
+        try {
+            await open(path.dirname(path.resolve(outputPath)));
+        }
+        catch (e) {
+            // ignore open folder error
+        }
+
+        // return stats
+        res.json({ 
+            success: true, 
+            stats: stats // originalSize, compressedSize, filesCount
+        });
     }
     catch (error: any) {
         res.json({ success: false, message: error.message });
     }
 });
 
-app.post('/api/shutdown', (_req: express.Request, res: express.Response) => {
-    console.log('👋 Window closed, shutting down ...');
-    res.json({ success: true });
-    setTimeout(() => { process.exit(0); }, 500);
-});
-
 app.post('/api/change-port', (req: express.Request, res: express.Response): void => {
+    cancelShutdown();
     const parsedPort = parseInt(req.body.newPort, 10);
     
     if (isNaN(parsedPort) || parsedPort < 1 || parsedPort > 65535) {
@@ -140,21 +172,56 @@ app.post('/api/change-port', (req: express.Request, res: express.Response): void
 
     res.json({ success: true });
 
-    // restart
     setTimeout(() => {
         if (server) {
-            server.closeAllConnections(); 
-            server.close(() => {
-                PORT = parsedPort;
-                server = app.listen(PORT, () => {
+            try {
+                server.closeAllConnections(); 
+                server.close(() => {
+                    PORT = parsedPort;
+                    startServer();
                     console.log(`🔄 Server successfully restarted on port ${PORT}`);
                 });
-            });
+            }
+            catch (e) {
+                startServer();
+            }
         }
     }, 100);
 });
 
-server = app.listen(PORT, async () => {
-    console.log(`✨ GUI Server started! Opening in browser...`);
-    await open(`http://localhost:${PORT}`);
-});
+app.get('/api/browse', (req, res) => {
+    const isDir = req.query.type === 'dir';
+    const platform = os.platform();
+    let command = '';
+
+    try {
+        if (platform === 'win32') { // Windows: Powershell + OpenFileDialog
+            if (isDir) command = `powershell -Command "Add-Type -AssemblyName System.Windows.Forms; $f = New-Object System.Windows.Forms.OpenFileDialog; $f.CheckFileExists = $false; $f.CheckPathExists = $true; $f.FileName = 'Select Folder'; $f.ValidateNames = $false; if($f.ShowDialog() -eq 'OK'){ Split-Path $f.FileName }"`;
+            else command = `powershell -Command "Add-Type -AssemblyName System.Windows.Forms; $f = New-Object System.Windows.Forms.OpenFileDialog; $f.Filter = 'C Files (*.c)|*.c|All Files (*.*)|*.*'; if($f.ShowDialog() -eq 'OK'){ $f.FileName }"`;
+        } 
+        else if (platform === 'darwin') { // macOS: darwin
+            if (isDir) command = `osascript -e 'POSIX path of (choose folder with prompt "Select Input Directory")'`;
+            else command = `osascript -e 'POSIX path of (choose file with prompt "Select Output File")'`;
+        } 
+        else { // Linux: Zenity
+            if (isDir) command = `zenity --file-selection --directory --title="Select Input Directory"`;
+            else command = `zenity --file-selection --title="Select Output File"`;
+        }
+
+        const result = execSync(command).toString().trim();
+        res.json({ success: true, path: result || null });
+    }
+    catch (e) {
+        res.json({ success: true, path: null });
+    }
+});
+
+const startServer = () => {
+    server = app.listen(PORT, () => {
+        console.log(`✨ GUI Server started on http://localhost:${PORT}`);
+    });
+};
+
+// main run
+startServer();
+open(`http://localhost:${PORT}`);

package/src/makefsdata.ts

@@ -61,6 +61,7 @@
 import fs from 'node:fs';
 import path from 'node:path';
 import { minify } from 'html-minifier-next';
+import { getPackageVersion } from './utils.js';
 
 // ----------------------------------------------------------------------
 // 1. Configs & Version Recovery
@@ -68,16 +69,6 @@ import { minify } from 'html-minifier-next';
 const TCP_MSS: number = 1460;
 const LWIP_VERSION: string = "1.3.1"; // this makefsdata.ts is based on lwIP v1.3.1
 
-const getPackageVersion = (): string => {
-    try {
-        const pkg = JSON.parse(fs.readFileSync('./package.json', 'utf8'));
-        return pkg.version || "0.0.0";
-    }
-    catch {
-        return "v3.0.0";
-    }
-};
-
 // html-minifier-next options
 const COMPRESS_OPTS_DEFAULT = {
     collapseWhitespace: true,
@@ -232,7 +223,14 @@ function bufferToHexCArray(buf: Buffer): string {
 // ----------------------------------------------------------------------
 // 4. export API
 // ----------------------------------------------------------------------
-export async function runMakeFsData(opts: MakeFsDataOptions): Promise<void> {
+
+export interface BuildStats {
+    originalSize: number;
+    compressedSize: number;
+    filesCount: number;
+}
+
+export async function runMakeFsData(opts: MakeFsDataOptions): Promise<BuildStats> {
     console.log(`🚀 CC4EmbeddedSystem V3: Starting makefsdata compilation...`);
     
     // checkers
@@ -251,6 +249,8 @@ export async function runMakeFsData(opts: MakeFsDataOptions): Promise<void> {
 
     const allFiles = getFilesRecursive(opts.inputDir, opts.processSubs);
     const fileEntries: FileEntry[] = [];
+    let totalOriginalSize = 0;
+    let totalCompressedSize = 0;
 
     if (allFiles.length === 0) throw new Error(`Input directory is empty! Please put your web files (.html, .css, etc.) into:\n${path.resolve(opts.inputDir)}`);
 
@@ -263,16 +263,21 @@ export async function runMakeFsData(opts: MakeFsDataOptions): Promise<void> {
         const ext = path.extname(filePath).toLowerCase();
         let content = fs.readFileSync(filePath);
 
+        const originalFileSize = content.length;
+        totalOriginalSize += originalFileSize;
+
         if (['.html', '.htm', '.css', '.js'].includes(ext)) {
             const minifiedStr = await minify(content.toString('utf8'), activeCompressOpts);
 
             if (typeof minifiedStr === 'string') {
                 content = Buffer.from(minifiedStr, 'utf8');
-                console.log(`📦 Minified: ${relativePath}`);
+                console.log(`📦 Minified: ${relativePath} (${originalFileSize} -> ${content.length} bytes)`);
             }
         }
         else console.log(`📄 Copied: ${relativePath}`);
 
+        totalCompressedSize += content.length;
+
         // generate header
         const headerData = opts.includeHttpHeader ? generateHttpHeaders(filePath, content.length, opts) : { parts: [], totalBuffer: Buffer.alloc(0) };
         const nameBuffer = Buffer.from(relativePath + '\0', 'utf8');
@@ -373,5 +378,13 @@ export async function runMakeFsData(opts: MakeFsDataOptions): Promise<void> {
         cOutput += `#define FS_ROOT file_${rootNode.varName}\n#define FS_NUMFILES ${fileEntries.length + 1}\n`;
         fs.writeFileSync(opts.outputFile, cOutput);
         console.log(`\n✨ Success! Output written to: ${opts.outputFile}`);
+
+        return {
+            originalSize: totalOriginalSize,
+            compressedSize: totalCompressedSize,
+            filesCount: fileEntries.length
+        };
     }
+
+    throw new Error("No files processed.");
 }

package/src/utils.ts

@@ -0,0 +1,76 @@
+/*
+ * ==============================================================================
+ * CC4EmbeddedSystem V3 (makefsdata)
+ * Copyright (c) 2026 LunaticGhoulPiano / Emile Su
+ * Licensed under the MIT License.
+ * ==============================================================================
+ *
+ * This software integrates concepts, logic, and minification processes derived 
+ * from the following open-source projects. We deeply appreciate their work:
+ *
+ * ------------------------------------------------------------------------------
+ * 1. lwIP (Lightweight TCP/IP stack)
+ * Repository: https://github.com/m-labs/lwip
+ * Copyright (c) 2001-2004 Swedish Institute of Computer Science.
+ * All rights reserved.
+ * * Redistribution and use in source and binary forms, with or without modification,
+ * are permitted provided that the following conditions are met:
+ * * 1. Redistributions of source code must retain the above copyright notice,
+ * this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright notice,
+ * this list of conditions and the following disclaimer in the documentation
+ * and/or other materials provided with the distribution.
+ * 3. The name of the author may not be used to endorse or promote products
+ * derived from this software without specific prior written permission.
+ * * THIS SOFTWARE IS PROVIDED BY THE AUTHOR ``AS IS'' AND ANY EXPRESS OR IMPLIED
+ * WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
+ * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT
+ * SHALL THE AUTHOR BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+ * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT
+ * OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING
+ * IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY
+ * OF SUCH DAMAGE.
+ *
+ * ------------------------------------------------------------------------------
+ * 2. html-minifier-next
+ * Repository: https://github.com/j9t/html-minifier-next
+ * Copyright (c) Jens Oliver Meiert (html-minifier-next)
+ * Copyright (c) Daniel Ruf (html-minifier-terser)
+ * Copyright (c) Juriy "kangax" Zaytsev (html-minifier)
+ * * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ * * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ * * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ * ==============================================================================
+ */
+
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+export const getPackageVersion = (): string => {
+    try {
+        const pkgPath = path.join(__dirname, '../package.json');
+        const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf8'));
+        return pkg.version || "LTS";
+    }
+    catch (error) {
+        return "LTS";
+    }
+};