json-toon-parser 1.0.1 → 1.1.1

package/README.md

@@ -7,8 +7,20 @@
 npm install -g json-toon-parser
 ```
 
+## Quick Start - Web UI
+After installation, start the web server:
+```bash
+json-toon serve
+```
+Then open your browser to `http://localhost:3000` and start converting JSON to TOON with a beautiful interface!
+
 ## CLI Usage
 ```bash
+# Start web UI server (recommended for easy usage)
+json-toon serve
+# Or with custom port:
+json-toon serve --port 8080
+
 # Compare JSON with TOON format
 json-toon compare data.json
 
@@ -38,12 +50,14 @@ const toonString = jsonToToon({ hello: "world" });
 
 ## Features
 
+- 🌐 **Web UI** - Beautiful web interface for easy conversion
 - ✅ Convert JSON to TOON format
 - 📊 Compare token efficiency between formats
 - 💾 Auto-save TOON files with timestamps
 - 🔧 CLI tool for easy usage
 - 📦 Programmatic API for Node.js
 - 🎯 TypeScript support with full type definitions
+- ⚡ Real-time conversion with live stats
 
 ## API
 
@@ -80,11 +94,11 @@ Format comparison result for display.
 ============================================================
 COMPARISON RESULTS
 ============================================================
-JSON Tokens:     150
-TOON Tokens:     95
-Token Savings:   55
-Efficiency:      36.67% reduction
-Output File:     output/data_2024-01-15T10-30-45.toon
+JSON Tokens:     24890
+TOON Tokens:     10204
+Token Savings:   14686
+Efficiency:      59.00% reduction
+Output File:     output/data_DateTime.toon
 ============================================================
 ```
 
@@ -103,9 +117,3 @@ Output File:     output/data_2024-01-15T10-30-45.toon
 ## License
 
 MIT © Bhushan Chaudhari
-
-## Links
-
-- [GitHub Repository](https://github.com/bhushan44/json-toon-parser)
-- [Report Issues](https://github.com/bhushan44/json-toon-parser/issues)
-- [NPM Package](https://www.npmjs.com/package/json-toon-parser)

package/dist/cli.js

@@ -1,11 +1,16 @@
 #!/usr/bin/env node
 import { Command } from "commander";
 import { compareFile, convertFile, formatResult, updateJsonFile } from "./index.js";
+import { spawn } from "node:child_process";
+import { fileURLToPath } from "node:url";
+import path from "node:path";
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
 const program = new Command();
 program
     .name("json-toon")
     .description("Compare and convert JSON to TOON format")
-    .version("1.0.0");
+    .version("1.0.1");
 program
     .command("compare")
     .description("Compare JSON file with TOON format")
@@ -58,5 +63,21 @@ program
         process.exit(1);
     }
 });
+program
+    .command("serve")
+    .description("Start web UI server for JSON to TOON conversion")
+    .option("-p, --port <port>", "Port number", "3000")
+    .action((options) => {
+    const serverPath = path.join(__dirname, "server.js");
+    const env = { ...process.env, PORT: options.port };
+    const serverProcess = spawn("node", [serverPath], {
+        env,
+        stdio: "inherit",
+    });
+    serverProcess.on("error", (error) => {
+        console.error("Failed to start server:", error.message);
+        process.exit(1);
+    });
+});
 program.parse();
 //# sourceMappingURL=cli.js.map

package/dist/cli.js.map

@@ -1 +1 @@
-{"version":3,"file":"cli.js","sourceRoot":"","sources":["../src/cli.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"cli.js","sourceRoot":"","sources":["../src/cli.ts"],"names":[],"mappings":"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"}

package/dist/server.d.ts

@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+export {};
+//# sourceMappingURL=server.d.ts.map

package/dist/server.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"server.d.ts","sourceRoot":"","sources":["../src/server.ts"],"names":[],"mappings":""}

package/dist/server.js

@@ -0,0 +1,96 @@
+#!/usr/bin/env node
+import http from "node:http";
+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);
+const PORT = process.env.PORT || 3000;
+const server = http.createServer((req, res) => {
+    // Set CORS headers
+    res.setHeader("Access-Control-Allow-Origin", "*");
+    res.setHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
+    res.setHeader("Access-Control-Allow-Headers", "Content-Type");
+    if (req.method === "OPTIONS") {
+        res.writeHead(200);
+        res.end();
+        return;
+    }
+    if (req.url === "/" || req.url === "/index.html") {
+        // Serve the HTML file
+        const htmlPath = path.join(__dirname, "..", "public", "index.html");
+        if (!fs.existsSync(htmlPath)) {
+            res.writeHead(404, { "Content-Type": "text/plain" });
+            res.end("HTML file not found");
+            return;
+        }
+        const html = fs.readFileSync(htmlPath, "utf-8");
+        res.writeHead(200, { "Content-Type": "text/html" });
+        res.end(html);
+    }
+    else if (req.url === "/api/convert" && req.method === "POST") {
+        // API endpoint for conversion
+        let body = "";
+        req.on("data", (chunk) => {
+            body += chunk.toString();
+        });
+        req.on("end", async () => {
+            try {
+                const { encode } = await import("@toon-format/toon");
+                const { encode: tokenize } = await import("gpt-3-encoder");
+                const jsonData = JSON.parse(body);
+                const toonOutput = encode(jsonData);
+                const jsonString = JSON.stringify(jsonData, null, 2);
+                const jsonTokens = tokenize(jsonString).length;
+                const toonTokens = tokenize(toonOutput).length;
+                const savings = jsonTokens - toonTokens;
+                const savingsPercentage = ((savings / jsonTokens) * 100).toFixed(2);
+                res.writeHead(200, { "Content-Type": "application/json" });
+                res.end(JSON.stringify({
+                    success: true,
+                    toonOutput,
+                    jsonTokens,
+                    toonTokens,
+                    savings,
+                    savingsPercentage,
+                }));
+            }
+            catch (error) {
+                res.writeHead(400, { "Content-Type": "application/json" });
+                res.end(JSON.stringify({
+                    success: false,
+                    error: error instanceof Error ? error.message : "Invalid JSON",
+                }));
+            }
+        });
+    }
+    else {
+        res.writeHead(404, { "Content-Type": "text/plain" });
+        res.end("Not Found");
+    }
+});
+server.listen(PORT, () => {
+    console.log(`
+╔═══════════════════════════════════════════════════════════╗
+║                                                           ║
+║   🚀  JSON-TOON Converter Server                         ║
+║                                                           ║
+║   Server running at: http://localhost:${PORT}              ║
+║                                                           ║
+║   📝  Open your browser and start converting!            ║
+║   ⚡  Real-time JSON to TOON conversion                  ║
+║   💾  Token efficiency analysis                          ║
+║                                                           ║
+║   Press Ctrl+C to stop the server                        ║
+║                                                           ║
+╚═══════════════════════════════════════════════════════════╝
+  `);
+});
+process.on("SIGINT", () => {
+    console.log("\n\n👋 Shutting down server...");
+    server.close(() => {
+        console.log("✅ Server stopped");
+        process.exit(0);
+    });
+});
+//# sourceMappingURL=server.js.map

package/dist/server.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"server.js","sourceRoot":"","sources":["../src/server.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "json-toon-parser",
-  "version": "1.0.1",
-  "description": "Compare and convert JSON to TOON format with token efficiency analysis",
+  "version": "1.1.1",
+  "description": "Compare and convert JSON to TOON format with token efficiency analysis - Now with Web UI!",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "bin": {
@@ -10,12 +10,15 @@
   "type": "module",
   "scripts": {
     "build": "tsc",
-    "start": "npm run build && node dist/cli.js update data/data.json",
+    "start": "npm run build && node dist/server.js",
+    "serve": "npm run build && node dist/server.js",
+    "dev": "tsc && node dist/server.js",
     "prepublishOnly": "npm run build",
     "test": "echo \"No tests specified\" && exit 0"
   },
   "files": [
     "dist",
+    "public",
     "README.md",
     "LICENSE"
   ],
@@ -35,8 +38,10 @@
   "license": "MIT",
   "dependencies": {
     "@toon-format/toon": "^1.0.0",
+    "1.0.1": "^1.0.0",
+    "commander": "^12.0.0",
     "gpt-3-encoder": "^1.1.4",
-    "commander": "^12.0.0"
+    "json-toon-parser": "^1.0.1"
   },
   "devDependencies": {
     "@types/node": "^20.0.0",

package/public/index.html

@@ -0,0 +1,706 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>JSON to TOON Converter - Live Tool</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            padding: 20px;
+        }
+        
+        .container {
+            max-width: 1400px;
+            margin: 0 auto;
+            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+            border-radius: 24px;
+            box-shadow: 0 30px 60px rgba(0,0,0,0.5);
+            overflow: hidden;
+        }
+        
+        /* Header */
+        .header {
+            padding: 40px;
+            border-bottom: 1px solid rgba(255,255,255,0.1);
+            background: rgba(255,255,255,0.02);
+        }
+        
+        .header-content {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            flex-wrap: wrap;
+            gap: 20px;
+        }
+        
+        .brand {
+            display: flex;
+            align-items: center;
+            gap: 16px;
+        }
+        
+        .logo {
+            width: 50px;
+            height: 50px;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-radius: 12px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 24px;
+            box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
+        }
+        
+        .brand-text h1 {
+            font-size: 28px;
+            font-weight: 800;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+        
+        .brand-text p {
+            font-size: 14px;
+            color: #94a3b8;
+            margin-top: 4px;
+        }
+        
+        .actions {
+            display: flex;
+            gap: 12px;
+        }
+        
+        .btn {
+            padding: 12px 24px;
+            border-radius: 10px;
+            font-size: 14px;
+            font-weight: 600;
+            cursor: pointer;
+            border: none;
+            transition: all 0.3s ease;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+        
+        .btn-primary {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
+        }
+        
+        .btn-primary:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
+        }
+        
+        .btn-secondary {
+            background: rgba(255,255,255,0.1);
+            color: #e2e8f0;
+            border: 1px solid rgba(255,255,255,0.2);
+        }
+        
+        .btn-secondary:hover {
+            background: rgba(255,255,255,0.15);
+        }
+        
+        /* Main Content */
+        .main-content {
+            padding: 40px;
+        }
+        
+        /* Editor Section */
+        .editor-section {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 20px;
+            margin-bottom: 30px;
+        }
+        
+        .editor-panel {
+            background: rgba(255,255,255,0.03);
+            border: 1px solid rgba(255,255,255,0.1);
+            border-radius: 16px;
+            overflow: hidden;
+        }
+        
+        .panel-header {
+            padding: 20px;
+            background: rgba(255,255,255,0.05);
+            border-bottom: 1px solid rgba(255,255,255,0.1);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .panel-title {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            font-size: 16px;
+            font-weight: 700;
+            color: #ffffff;
+        }
+        
+        .title-icon {
+            font-size: 20px;
+        }
+        
+        .panel-actions {
+            display: flex;
+            gap: 8px;
+        }
+        
+        .icon-btn {
+            width: 32px;
+            height: 32px;
+            border-radius: 8px;
+            background: rgba(255,255,255,0.1);
+            border: none;
+            color: #94a3b8;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.3s ease;
+        }
+        
+        .icon-btn:hover {
+            background: rgba(255,255,255,0.15);
+            color: #e2e8f0;
+        }
+        
+        .panel-content {
+            padding: 0;
+        }
+        
+        textarea {
+            width: 100%;
+            height: 400px;
+            background: rgba(0,0,0,0.3);
+            border: none;
+            color: #e2e8f0;
+            padding: 20px;
+            font-family: 'Monaco', 'Courier New', monospace;
+            font-size: 14px;
+            line-height: 1.6;
+            resize: vertical;
+            outline: none;
+        }
+        
+        textarea::placeholder {
+            color: #64748b;
+        }
+        
+        /* Stats Section */
+        .stats-section {
+            background: rgba(255,255,255,0.03);
+            border: 1px solid rgba(255,255,255,0.1);
+            border-radius: 16px;
+            padding: 30px;
+            margin-bottom: 20px;
+        }
+        
+        .stats-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 20px;
+        }
+        
+        .stat-card {
+            background: rgba(255,255,255,0.05);
+            border: 1px solid rgba(255,255,255,0.1);
+            border-radius: 12px;
+            padding: 24px;
+            text-align: center;
+            transition: all 0.3s ease;
+        }
+        
+        .stat-card:hover {
+            background: rgba(255,255,255,0.08);
+            transform: translateY(-2px);
+        }
+        
+        .stat-icon {
+            font-size: 32px;
+            margin-bottom: 12px;
+        }
+        
+        .stat-value {
+            font-size: 36px;
+            font-weight: 800;
+            color: #ffffff;
+            margin-bottom: 8px;
+        }
+        
+        .stat-label {
+            font-size: 13px;
+            color: #94a3b8;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+        }
+        
+        .stat-card.highlight {
+            background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(5, 150, 105, 0.2) 100%);
+            border-color: rgba(16, 185, 129, 0.3);
+        }
+        
+        .stat-card.highlight .stat-value {
+            color: #10b981;
+        }
+        
+        /* Error/Success Messages */
+        .message {
+            padding: 16px 20px;
+            border-radius: 12px;
+            margin-bottom: 20px;
+            display: none;
+            align-items: center;
+            gap: 12px;
+            font-size: 14px;
+        }
+        
+        .message.show {
+            display: flex;
+        }
+        
+        .message-error {
+            background: rgba(239, 68, 68, 0.2);
+            border: 1px solid rgba(239, 68, 68, 0.3);
+            color: #fca5a5;
+        }
+        
+        .message-success {
+            background: rgba(16, 185, 129, 0.2);
+            border: 1px solid rgba(16, 185, 129, 0.3);
+            color: #6ee7b7;
+        }
+        
+        /* Sample Data Section */
+        .samples {
+            display: flex;
+            gap: 12px;
+            flex-wrap: wrap;
+            margin-bottom: 20px;
+        }
+        
+        .sample-btn {
+            padding: 10px 16px;
+            border-radius: 8px;
+            background: rgba(255,255,255,0.05);
+            border: 1px solid rgba(255,255,255,0.1);
+            color: #94a3b8;
+            font-size: 13px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+        
+        .sample-btn:hover {
+            background: rgba(255,255,255,0.1);
+            border-color: rgba(102, 126, 234, 0.5);
+            color: #667eea;
+        }
+        
+        /* Footer */
+        .footer {
+            padding: 30px 40px;
+            border-top: 1px solid rgba(255,255,255,0.1);
+            text-align: center;
+            color: #64748b;
+            font-size: 13px;
+        }
+        
+        .footer-links {
+            display: flex;
+            justify-content: center;
+            gap: 24px;
+            margin-top: 16px;
+        }
+        
+        .footer-link {
+            color: #94a3b8;
+            text-decoration: none;
+            transition: color 0.3s ease;
+        }
+        
+        .footer-link:hover {
+            color: #667eea;
+        }
+        
+        /* Responsive */
+        @media (max-width: 968px) {
+            .editor-section {
+                grid-template-columns: 1fr;
+            }
+            
+            .stats-grid {
+                grid-template-columns: repeat(2, 1fr);
+            }
+        }
+        
+        @media (max-width: 640px) {
+            .header-content {
+                flex-direction: column;
+                align-items: flex-start;
+            }
+            
+            .stats-grid {
+                grid-template-columns: 1fr;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <!-- Header -->
+        <div class="header">
+            <div class="header-content">
+                <div class="brand">
+                    <div class="logo">📦</div>
+                    <div class="brand-text">
+                        <h1>JSON to TOON Converter</h1>
+                        <p>Optimize your LLM token usage in real-time</p>
+                    </div>
+                </div>
+                <div class="actions">
+                    <button class="btn btn-primary" onclick="convertJson()">
+                        <span>⚡</span>
+                        <span>Convert</span>
+                    </button>
+                    <button class="btn btn-secondary" onclick="clearAll()">
+                        <span>🔄</span>
+                        <span>Clear</span>
+                    </button>
+                </div>
+            </div>
+        </div>
+        
+        <!-- Main Content -->
+        <div class="main-content">
+            <!-- Messages -->
+            <div id="errorMessage" class="message message-error">
+                <span>⚠️</span>
+                <span id="errorText"></span>
+            </div>
+            
+            <div id="successMessage" class="message message-success">
+                <span>✅</span>
+                <span>Conversion successful!</span>
+            </div>
+            
+            <!-- Sample Data -->
+            <div class="samples">
+                <span style="color: #94a3b8; font-size: 13px; font-weight: 600; margin-right: 8px;">Try samples:</span>
+                <button class="sample-btn" onclick="loadSample('simple')">Simple Object</button>
+                <button class="sample-btn" onclick="loadSample('array')">Array Data</button>
+                <button class="sample-btn" onclick="loadSample('nested')">Nested Structure</button>
+                <button class="sample-btn" onclick="loadSample('complex')">Complex Data</button>
+            </div>
+            
+            <!-- Editor Section -->
+            <div class="editor-section">
+                <!-- JSON Input -->
+                <div class="editor-panel">
+                    <div class="panel-header">
+                        <div class="panel-title">
+                            <span class="title-icon">{ }</span>
+                            <span>JSON Input</span>
+                        </div>
+                        <div class="panel-actions">
+                            <button class="icon-btn" onclick="copyJson()" title="Copy">📋</button>
+                            <button class="icon-btn" onclick="formatJson()" title="Format">✨</button>
+                        </div>
+                    </div>
+                    <div class="panel-content">
+                        <textarea id="jsonInput" placeholder='Paste your JSON here...'></textarea>
+                    </div>
+                </div>
+                
+                <!-- TOON Output -->
+                <div class="editor-panel">
+                    <div class="panel-header">
+                        <div class="panel-title">
+                            <span class="title-icon">⚡</span>
+                            <span>TOON Output</span>
+                        </div>
+                        <div class="panel-actions">
+                            <button class="icon-btn" onclick="copyToon()" title="Copy">📋</button>
+                            <button class="icon-btn" onclick="downloadToon()" title="Download">💾</button>
+                        </div>
+                    </div>
+                    <div class="panel-content">
+                        <textarea id="toonOutput" placeholder="TOON output will appear here..." readonly></textarea>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Stats Section -->
+            <div class="stats-section">
+                <div class="stats-grid">
+                    <div class="stat-card">
+                        <div class="stat-icon">📄</div>
+                        <div class="stat-value" id="jsonTokens">0</div>
+                        <div class="stat-label">JSON Tokens</div>
+                    </div>
+                    
+                    <div class="stat-card">
+                        <div class="stat-icon">⚡</div>
+                        <div class="stat-value" id="toonTokens">0</div>
+                        <div class="stat-label">TOON Tokens</div>
+                    </div>
+                    
+                    <div class="stat-card highlight">
+                        <div class="stat-icon">💰</div>
+                        <div class="stat-value" id="tokenSavings">0</div>
+                        <div class="stat-label">Tokens Saved</div>
+                    </div>
+                    
+                    <div class="stat-card highlight">
+                        <div class="stat-icon">📊</div>
+                        <div class="stat-value" id="savingsPercent">0%</div>
+                        <div class="stat-label">Efficiency Gain</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- Footer -->
+        <div class="footer">
+            <p>Made with ❤️ using json-toon-parser</p>
+            <div class="footer-links">
+                <a href="https://www.npmjs.com/package/json-toon-parser" class="footer-link" target="_blank">📦 NPM Package</a>
+                <a href="https://github.com/bhushan44/json-toon-parser" class="footer-link" target="_blank">⭐ GitHub</a>
+                <a href="#" class="footer-link">📖 Documentation</a>
+            </div>
+        </div>
+    </div>
+    
+    <!-- Include TOON library from CDN -->
+    <script type="module">
+        // Import TOON encoder
+        import { encode } from 'https://cdn.jsdelivr.net/npm/@toon-format/toon@1.0.0/+esm';
+        
+        // Make encode available globally
+        window.toonEncode = encode;
+        
+        // Simple tokenizer (GPT-3 approximation)
+        // This is a simplified version - for exact counts, you'd need the actual GPT-3 encoder
+        function countTokens(text) {
+            // Approximate token count: ~4 characters per token on average
+            // This is a rough estimate - actual GPT-3 tokenization is more complex
+            const words = text.split(/\s+/).length;
+            const chars = text.length;
+            const punctuation = (text.match(/[.,;:!?(){}[\]"']/g) || []).length;
+            
+            // Better approximation
+            return Math.ceil((chars / 4) + (punctuation * 0.5));
+        }
+        
+        window.countTokens = countTokens;
+        
+        // Sample data
+        window.samples = {
+            simple: {
+                name: "John Doe",
+                age: 30,
+                email: "john@example.com",
+                active: true
+            },
+            array: {
+                users: [
+                    { id: 1, name: "Alice", role: "admin" },
+                    { id: 2, name: "Bob", role: "user" },
+                    { id: 3, name: "Charlie", role: "moderator" }
+                ]
+            },
+            nested: {
+                company: {
+                    name: "Tech Corp",
+                    employees: [
+                        {
+                            id: 1,
+                            name: "Alice",
+                            department: {
+                                id: 10,
+                                name: "Engineering",
+                                location: "Building A"
+                            }
+                        }
+                    ],
+                    founded: 2020
+                }
+            },
+            complex: {
+                product: {
+                    id: "prod_123",
+                    name: "Awesome Product",
+                    price: 99.99,
+                    categories: ["electronics", "gadgets"],
+                    specs: {
+                        weight: "500g",
+                        dimensions: { width: 10, height: 5, depth: 2 },
+                        colors: ["black", "white", "blue"]
+                    },
+                    reviews: [
+                        { user: "Alice", rating: 5, comment: "Great!" },
+                        { user: "Bob", rating: 4, comment: "Good value" }
+                    ],
+                    inStock: true,
+                    metadata: {
+                        created: "2024-01-15",
+                        updated: "2024-01-20",
+                        tags: ["featured", "bestseller"]
+                    }
+                }
+            }
+        };
+        
+        console.log('TOON converter loaded successfully!');
+    </script>
+    
+    <script>
+        function showError(message) {
+            const errorEl = document.getElementById('errorMessage');
+            const errorText = document.getElementById('errorText');
+            errorText.textContent = message;
+            errorEl.classList.add('show');
+            
+            setTimeout(() => {
+                errorEl.classList.remove('show');
+            }, 5000);
+        }
+        
+        function showSuccess() {
+            const successEl = document.getElementById('successMessage');
+            successEl.classList.add('show');
+            
+            setTimeout(() => {
+                successEl.classList.remove('show');
+            }, 3000);
+        }
+        
+        function convertJson() {
+            const jsonInput = document.getElementById('jsonInput').value.trim();
+            
+            if (!jsonInput) {
+                showError('Please enter some JSON data');
+                return;
+            }
+            
+            try {
+                // Parse JSON
+                const jsonData = JSON.parse(jsonInput);
+                
+                // Convert to TOON
+                const toonOutput = window.toonEncode(jsonData);
+                
+                // Display TOON output
+                document.getElementById('toonOutput').value = toonOutput;
+                
+                // Calculate tokens
+                const jsonString = JSON.stringify(jsonData, null, 2);
+                const jsonTokens = window.countTokens(jsonString);
+                const toonTokens = window.countTokens(toonOutput);
+                const savings = jsonTokens - toonTokens;
+                const savingsPercent = ((savings / jsonTokens) * 100).toFixed(1);
+                
+                // Update stats
+                document.getElementById('jsonTokens').textContent = jsonTokens;
+                document.getElementById('toonTokens').textContent = toonTokens;
+                document.getElementById('tokenSavings').textContent = savings;
+                document.getElementById('savingsPercent').textContent = savingsPercent + '%';
+                
+                showSuccess();
+            } catch (error) {
+                showError('Invalid JSON: ' + error.message);
+            }
+        }
+        
+        function clearAll() {
+            document.getElementById('jsonInput').value = '';
+            document.getElementById('toonOutput').value = '';
+            document.getElementById('jsonTokens').textContent = '0';
+            document.getElementById('toonTokens').textContent = '0';
+            document.getElementById('tokenSavings').textContent = '0';
+            document.getElementById('savingsPercent').textContent = '0%';
+        }
+        
+        function formatJson() {
+            const jsonInput = document.getElementById('jsonInput').value.trim();
+            
+            if (!jsonInput) return;
+            
+            try {
+                const jsonData = JSON.parse(jsonInput);
+                document.getElementById('jsonInput').value = JSON.stringify(jsonData, null, 2);
+            } catch (error) {
+                showError('Cannot format invalid JSON');
+            }
+        }
+        
+        function copyJson() {
+            const jsonInput = document.getElementById('jsonInput');
+            jsonInput.select();
+            document.execCommand('copy');
+            showSuccess();
+        }
+        
+        function copyToon() {
+            const toonOutput = document.getElementById('toonOutput');
+            if (!toonOutput.value) {
+                showError('No TOON output to copy');
+                return;
+            }
+            toonOutput.select();
+            document.execCommand('copy');
+            showSuccess();
+        }
+        
+        function downloadToon() {
+            const toonOutput = document.getElementById('toonOutput').value;
+            
+            if (!toonOutput) {
+                showError('No TOON output to download');
+                return;
+            }
+            
+            const blob = new Blob([toonOutput], { type: 'text/plain' });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = `output_${new Date().toISOString().replace(/[:.]/g, '-')}.toon`;
+            document.body.appendChild(a);
+            a.click();
+            document.body.removeChild(a);
+            URL.revokeObjectURL(url);
+            
+            showSuccess();
+        }
+        
+        function loadSample(type) {
+            const sample = window.samples[type];
+            if (sample) {
+                document.getElementById('jsonInput').value = JSON.stringify(sample, null, 2);
+                convertJson();
+            }
+        }
+        
+        // Auto-convert on Enter (Ctrl+Enter)
+        document.getElementById('jsonInput').addEventListener('keydown', function(e) {
+            if (e.ctrlKey && e.key === 'Enter') {
+                convertJson();
+            }
+        });
+    </script>
+</body>
+</html>