Spaces:

MarkTheArtist
/

json-validator

Running

App Files Files Community

MarkTheArtist commited on Apr 9, 2025

Commit

f2bcf38

verified ·

1 Parent(s): 1231edd

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +410 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Json Validator
-emoji: 👁
-colorFrom: gray
-colorTo: purple
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: json-validator
+emoji: 🐳
+colorFrom: purple
+colorTo: red
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

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

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>JSON Formatter & Validator</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        .json-key {
+            color: #9CDCFE;
+        }
+        .json-value {
+            color: #CE9178;
+        }
+        .json-string {
+            color: #CE9178;
+        }
+        .json-number {
+            color: #B5CEA8;
+        }
+        .json-boolean {
+            color: #569CD6;
+        }
+        .json-null {
+            color: #569CD6;
+        }
+        .json-punctuation {
+            color: #D4D4D4;
+        }
+        .error-line {
+            background-color: rgba(255, 0, 0, 0.1);
+            position: relative;
+        }
+        .error-line::after {
+            content: attr(data-error);
+            position: absolute;
+            left: 0;
+            bottom: -20px;
+            color: #ff6b6b;
+            font-size: 12px;
+            font-family: monospace;
+        }
+        #jsonInput {
+            min-height: 200px;
+            font-family: 'Courier New', Courier, monospace;
+        }
+        #formattedJson {
+            min-height: 200px;
+            font-family: 'Courier New', Courier, monospace;
+            white-space: pre-wrap;
+        }
+        .copy-btn {
+            transition: all 0.2s;
+        }
+        .copy-btn:hover {
+            transform: scale(1.1);
+        }
+        .copy-btn.copied {
+            color: #4CAF50;
+        }
+    </style>
+</head>
+<body class="bg-gray-900 text-gray-100 min-h-screen">
+    <div class="container mx-auto px-4 py-8">
+        <header class="mb-8 text-center">
+            <h1 class="text-4xl font-bold mb-2 bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 bg-clip-text text-transparent">
+                JSON Formatter & Validator
+            </h1>
+            <p class="text-gray-400">Paste, format, validate and beautify your JSON data</p>
+        </header>
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+            <!-- Input Section -->
+            <div class="bg-gray-800 rounded-lg shadow-lg overflow-hidden">
+                <div class="bg-gray-700 px-4 py-3 flex justify-between items-center">
+                    <h2 class="font-semibold">
+                        <i class="fas fa-code mr-2 text-purple-400"></i> Input JSON
+                    </h2>
+                    <div class="flex space-x-2">
+                        <button id="clearInput" class="text-gray-400 hover:text-white transition-colors" title="Clear">
+                            <i class="fas fa-trash-alt"></i>
+                        </button>
+                        <button id="minifyBtn" class="text-gray-400 hover:text-white transition-colors" title="Minify">
+                            <i class="fas fa-compress-alt"></i>
+                        </button>
+                        <button id="beautifyBtn" class="text-gray-400 hover:text-white transition-colors" title="Beautify">
+                            <i class="fas fa-expand-alt"></i>
+                        </button>
+                        <button id="validateBtn" class="text-green-400 hover:text-green-300 transition-colors" title="Validate">
+                            <i class="fas fa-check-circle"></i>
+                        </button>
+                    </div>
+                </div>
+                <div class="p-4 relative">
+                    <textarea id="jsonInput" class="w-full bg-gray-700 border border-gray-600 rounded p-3 text-gray-200 focus:outline-none focus:ring-2 focus:ring-purple-500 resize-none" placeholder='Paste your JSON here...'></textarea>
+                    <div id="inputError" class="text-red-400 text-sm mt-2 hidden"></div>
+                </div>
+            </div>
+            <!-- Output Section -->
+            <div class="bg-gray-800 rounded-lg shadow-lg overflow-hidden">
+                <div class="bg-gray-700 px-4 py-3 flex justify-between items-center">
+                    <h2 class="font-semibold">
+                        <i class="fas fa-eye mr-2 text-blue-400"></i> Formatted JSON
+                    </h2>
+                    <div class="flex space-x-2">
+                        <button id="copyBtn" class="copy-btn text-gray-400 hover:text-white transition-colors" title="Copy to Clipboard">
+                            <i class="fas fa-copy"></i>
+                        </button>
+                        <button id="downloadBtn" class="text-gray-400 hover:text-white transition-colors" title="Download">
+                            <i class="fas fa-download"></i>
+                        </button>
+                    </div>
+                </div>
+                <div class="p-4">
+                    <div id="formattedJson" class="w-full bg-gray-700 border border-gray-600 rounded p-3 overflow-auto"></div>
+                    <div id="validationResult" class="mt-4 p-3 rounded hidden">
+                        <div class="flex items-start">
+                            <div class="flex-shrink-0">
+                                <i id="validationIcon" class="fas fa-check-circle text-2xl"></i>
+                            </div>
+                            <div class="ml-3">
+                                <h3 id="validationTitle" class="text-lg font-medium"></h3>
+                                <div id="validationDetails" class="mt-1 text-sm"></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Sample JSON Buttons -->
+        <div class="mt-8">
+            <h3 class="text-xl font-semibold mb-4 text-center">Try with sample JSON</h3>
+            <div class="flex flex-wrap justify-center gap-3">
+                <button data-sample='{"name":"John","age":30,"city":"New York"}' class="sample-btn px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded transition-colors">
+                    Simple Object
+                </button>
+                <button data-sample='[{"id":1,"name":"Alice","active":true},{"id":2,"name":"Bob","active":false},{"id":3,"name":"Charlie","active":true}]' class="sample-btn px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded transition-colors">
+                    Array of Objects
+                </button>
+                <button data-sample='{"products":[{"id":"A1","price":19.99,"inStock":true},{"id":"B2","price":29.99,"inStock":false}],"totalItems":2}' class="sample-btn px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded transition-colors">
+                    Nested Objects
+                </button>
+                <button data-sample='{"error":"Invalid JSON","line":3,"position":12}' class="sample-btn px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded transition-colors">
+                    Invalid JSON
+                </button>
+            </div>
+        </div>
+        <!-- Features Section -->
+        <div class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-6">
+            <div class="bg-gray-800 p-6 rounded-lg shadow-lg">
+                <div class="text-blue-400 text-2xl mb-3">
+                    <i class="fas fa-check-double"></i>
+                </div>
+                <h3 class="text-xl font-semibold mb-2">Real-time Validation</h3>
+                <p class="text-gray-400">Instantly validate your JSON syntax and highlight errors with detailed messages.</p>
+            </div>
+            <div class="bg-gray-800 p-6 rounded-lg shadow-lg">
+                <div class="text-purple-400 text-2xl mb-3">
+                    <i class="fas fa-paint-brush"></i>
+                </div>
+                <h3 class="text-xl font-semibold mb-2">Beautiful Formatting</h3>
+                <p class="text-gray-400">Format your JSON with syntax highlighting, proper indentation and line breaks.</p>
+            </div>
+            <div class="bg-gray-800 p-6 rounded-lg shadow-lg">
+                <div class="text-green-400 text-2xl mb-3">
+                    <i class="fas fa-exchange-alt"></i>
+                </div>
+                <h3 class="text-xl font-semibold mb-2">Convert & Minify</h3>
+                <p class="text-gray-400">Easily convert between formatted and minified JSON with a single click.</p>
+            </div>
+        </div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const jsonInput = document.getElementById('jsonInput');
+            const formattedJson = document.getElementById('formattedJson');
+            const validateBtn = document.getElementById('validateBtn');
+            const beautifyBtn = document.getElementById('beautifyBtn');
+            const minifyBtn = document.getElementById('minifyBtn');
+            const clearInput = document.getElementById('clearInput');
+            const copyBtn = document.getElementById('copyBtn');
+            const downloadBtn = document.getElementById('downloadBtn');
+            const inputError = document.getElementById('inputError');
+            const validationResult = document.getElementById('validationResult');
+            const validationIcon = document.getElementById('validationIcon');
+            const validationTitle = document.getElementById('validationTitle');
+            const validationDetails = document.getElementById('validationDetails');
+            const sampleBtns = document.querySelectorAll('.sample-btn');
+            // Initialize with empty state
+            clearInput.click();
+            // Sample JSON buttons
+            sampleBtns.forEach(btn => {
+                btn.addEventListener('click', function() {
+                    const sample = this.getAttribute('data-sample');
+                    jsonInput.value = sample;
+                    formatAndValidate();
+                });
+            });
+            // Clear input
+            clearInput.addEventListener('click', function() {
+                jsonInput.value = '';
+                formattedJson.innerHTML = '';
+                inputError.classList.add('hidden');
+                validationResult.classList.add('hidden');
+            });
+            // Beautify JSON
+            beautifyBtn.addEventListener('click', function() {
+                formatAndValidate(true);
+            });
+            // Minify JSON
+            minifyBtn.addEventListener('click', function() {
+                try {
+                    const jsonObj = JSON.parse(jsonInput.value);
+                    jsonInput.value = JSON.stringify(jsonObj);
+                    formatAndValidate();
+                } catch (e) {
+                    showError(e.message);
+                }
+            });
+            // Validate JSON
+            validateBtn.addEventListener('click', function() {
+                formatAndValidate();
+            });
+            // Copy to clipboard
+            copyBtn.addEventListener('click', function() {
+                if (!formattedJson.textContent.trim()) return;
+                navigator.clipboard.writeText(formattedJson.textContent).then(() => {
+                    copyBtn.classList.add('copied');
+                    copyBtn.innerHTML = '<i class="fas fa-check"></i>';
+                    setTimeout(() => {
+                        copyBtn.classList.remove('copied');
+                        copyBtn.innerHTML = '<i class="fas fa-copy"></i>';
+                    }, 2000);
+                });
+            });
+            // Download JSON
+            downloadBtn.addEventListener('click', function() {
+                if (!formattedJson.textContent.trim()) return;
+                const blob = new Blob([formattedJson.textContent], { type: 'application/json' });
+                const url = URL.createObjectURL(blob);
+                const a = document.createElement('a');
+                a.href = url;
+                a.download = 'formatted.json';
+                document.body.appendChild(a);
+                a.click();
+                document.body.removeChild(a);
+                URL.revokeObjectURL(url);
+            });
+            // Auto-format when typing (with debounce)
+            let typingTimer;
+            jsonInput.addEventListener('input', function() {
+                clearTimeout(typingTimer);
+                typingTimer = setTimeout(() => {
+                    formatAndValidate();
+                }, 800);
+            });
+            // Main formatting and validation function
+            function formatAndValidate(beautify = true) {
+                inputError.classList.add('hidden');
+                validationResult.classList.add('hidden');
+                try {
+                    if (!jsonInput.value.trim()) {
+                        formattedJson.innerHTML = '';
+                        return;
+                    }
+                    const jsonObj = JSON.parse(jsonInput.value);
+                    const formatted = beautify ? JSON.stringify(jsonObj, null, 2) : JSON.stringify(jsonObj);
+                    // Update input if we're minifying
+                    if (!beautify) {
+                        jsonInput.value = formatted;
+                    }
+                    // Syntax highlight
+                    formattedJson.innerHTML = syntaxHighlight(formatted);
+                    // Show validation success
+                    showValidationSuccess(jsonObj);
+                } catch (e) {
+                    showError(e.message);
+                }
+            }
+            // Show error message
+            function showError(message) {
+                inputError.textContent = message;
+                inputError.classList.remove('hidden');
+                // Try to extract line number from error message
+                const lineMatch = message.match(/position (\d+)/);
+                if (lineMatch) {
+                    const position = parseInt(lineMatch[1]);
+                    highlightErrorLine(position);
+                }
+                // Show validation error
+                validationResult.classList.remove('hidden');
+                validationResult.className = 'mt-4 p-3 rounded bg-red-900/30 border border-red-700';
+                validationIcon.className = 'fas fa-times-circle text-2xl text-red-400';
+                validationTitle.textContent = 'Invalid JSON';
+                validationDetails.innerHTML = `<p class="text-red-300">${message}</p>`;
+            }
+            // Show validation success
+            function showValidationSuccess(jsonObj) {
+                validationResult.classList.remove('hidden');
+                validationResult.className = 'mt-4 p-3 rounded bg-green-900/30 border border-green-700';
+                validationIcon.className = 'fas fa-check-circle text-2xl text-green-400';
+                validationTitle.textContent = 'Valid JSON';
+                // Count properties
+                let propertyCount = 0;
+                if (Array.isArray(jsonObj)) {
+                    propertyCount = jsonObj.length;
+                    validationDetails.innerHTML = `
+                        <p class="text-green-300">✓ Valid JSON array with ${propertyCount} items</p>
+                        <p class="text-green-300 mt-1">✓ ${typeof jsonObj} (${getTypeDetails(jsonObj)})</p>
+                    `;
+                } else if (jsonObj && typeof jsonObj === 'object') {
+                    propertyCount = Object.keys(jsonObj).length;
+                    validationDetails.innerHTML = `
+                        <p class="text-green-300">✓ Valid JSON object with ${propertyCount} properties</p>
+                        <p class="text-green-300 mt-1">✓ ${typeof jsonObj} (${getTypeDetails(jsonObj)})</p>
+                    `;
+                } else {
+                    validationDetails.innerHTML = `
+                        <p class="text-green-300">✓ Valid JSON value</p>
+                        <p class="text-green-300 mt-1">✓ ${typeof jsonObj} (${getTypeDetails(jsonObj)})</p>
+                    `;
+                }
+            }
+            // Get type details for validation message
+            function getTypeDetails(value) {
+                if (value === null) return 'null';
+                if (Array.isArray(value)) return 'array';
+                if (typeof value === 'object') return 'object';
+                return typeof value;
+            }
+            // Highlight error line in input
+            function highlightErrorLine(position) {
+                // This is a simplified approach - a more complete solution would need a proper textarea line calculator
+                const lines = jsonInput.value.substr(0, position).split('\n');
+                const lineNumber = lines.length;
+                // Scroll to the line
+                const lineHeight = 20; // Approximate line height
+                jsonInput.scrollTop = (lineNumber - 3) * lineHeight;
+                // Highlight the line (this is a basic approach)
+                inputError.textContent += ` (near line ${lineNumber})`;
+            }
+            // Syntax highlighting for JSON
+            function syntaxHighlight(json) {
+                if (!json) return '';
+                json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+                return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function(match) {
+                    let cls = 'json-value';
+                    let style = '';
+                    if (/^"/.test(match)) {
+                        if (/:$/.test(match)) {
+                            cls = 'json-key';
+                            match = match.replace(/:$/, '');
+                            style = ' style="color: #9CDCFE;"';
+                        } else {
+                            cls = 'json-string';
+                        }
+                    } else if (/true|false/.test(match)) {
+                        cls = 'json-boolean';
+                    } else if (/null/.test(match)) {
+                        cls = 'json-null';
+                    } else if (/^-?\d+\.?\d*([eE][+\-]?\d+)?$/.test(match)) {
+                        cls = 'json-number';
+                    }
+                    return '<span class="' + cls + '"' + style + '>' + match + '</span>';
+                })
+                .replace(/([{}[\],:])/g, function(match) {
+                    return '<span class="json-punctuation">' + match + '</span>';
+                });
+            }
+        });
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=MarkTheArtist/json-validator" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>