Spaces:

RobinsAIWorld
/

jsonic-v2

Running

File size: 33,488 Bytes

e912915

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Visual JSON Editor</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">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3b82f6',
                        secondary: '#1e40af',
                        dark: '#0f172a',
                        light: '#f8fafc'
                    }
                }
            }
        }
    </script>
    <style>
        .json-editor {
            min-height: 500px;
            max-height: 70vh;
            overflow-y: auto;
        }
        .json-item {
            transition: all 0.2s ease;
            border-left: 3px solid transparent;
        }
        .json-item:hover {
            background-color: #f1f5f9;
            border-left: 3px solid #3b82f6;
        }
        .json-item.selected {
            background-color: #dbeafe;
            border-left: 3px solid #3b82f6;
        }
        .json-item.dragging {
            opacity: 0.5;
            background-color: #dbeafe;
        }
        .json-item.drag-over {
            border-top: 2px dashed #3b82f6;
        }
        .json-key {
            font-weight: 600;
            color: #4338ca;
        }
        .json-value {
            color: #0f766e;
        }
        .json-bracket {
            color: #64748b;
        }
        .btn {
            transition: all 0.2s ease;
        }
        .btn:hover {
            transform: translateY(-2px);
        }
        .indent-line {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 1px;
            background-color: #cbd5e1;
        }
        .cursor-pointer {
            cursor: pointer;
        }
        .editable:focus {
            outline: 2px solid #3b82f6;
            border-radius: 4px;
        }
        .editable {
            min-width: 20px;
            display: inline-block;
        }
        .toolbar-btn {
            transition: all 0.2s;
        }
        .toolbar-btn:hover {
            background-color: #e2e8f0;
        }
        .toolbar-btn.active {
            background-color: #3b82f6;
            color: white;
        }
        .notification {
            transform: translateX(100%);
            transition: transform 0.3s ease;
        }
        .notification.show {
            transform: translateX(0);
        }
        .error-highlight {
            background-color: #fee2e2;
            border-left: 3px solid #ef4444;
        }
    </style>
</head>
<body class="bg-gray-100 min-h-screen p-4 md:p-8">
    <div class="max-w-6xl mx-auto">
        <header class="mb-8 text-center">
            <h1 class="text-3xl md:text-4xl font-bold text-gray-800 mb-2">Visual JSON Editor</h1>
            <p class="text-gray-600">Edit JSON with drag-and-drop and intuitive keyboard navigation</p>
        </header>

        <div class="bg-white rounded-xl shadow-lg overflow-hidden mb-8">
            <div class="p-4 bg-gray-50 border-b flex flex-wrap items-center justify-between gap-2">
                <div class="flex flex-wrap gap-2">
                    <button id="newBtn" class="btn bg-primary hover:bg-secondary text-white px-4 py-2 rounded-lg flex items-center gap-2">
                        <i class="fas fa-plus"></i> New
                    </button>
                    <button id="loadBtn" class="btn bg-gray-200 hover:bg-gray-300 px-4 py-2 rounded-lg flex items-center gap-2">
                        <i class="fas fa-folder-open"></i> Load
                    </button>
                    <button id="saveBtn" class="btn bg-gray-200 hover:bg-gray-300 px-4 py-2 rounded-lg flex items-center gap-2">
                        <i class="fas fa-save"></i> Save
                    </button>
                </div>
                
                <div class="flex flex-wrap gap-2">
                    <button id="undoBtn" class="btn bg-gray-200 hover:bg-gray-300 px-3 py-2 rounded-lg">
                        <i class="fas fa-undo"></i>
                    </button>
                    <button id="redoBtn" class="btn bg-gray-200 hover:bg-gray-300 px-3 py-2 rounded-lg">
                        <i class="fas fa-redo"></i>
                    </button>
                    <button id="formatBtn" class="btn bg-gray-200 hover:bg-gray-300 px-3 py-2 rounded-lg">
                        <i class="fas fa-indent"></i>
                    </button>
                    <button id="validateBtn" class="btn bg-gray-200 hover:bg-gray-300 px-3 py-2 rounded-lg">
                        <i class="fas fa-check-circle"></i>
                    </button>
                </div>
            </div>
            
            <div class="p-4 bg-gray-50 border-b flex flex-wrap gap-2">
                <div class="flex items-center gap-2 bg-white px-3 py-1 rounded-lg shadow-sm">
                    <span class="text-gray-600">Mode:</span>
                    <div class="flex gap-1">
                        <button id="viewModeBtn" class="toolbar-btn px-3 py-1 rounded-md">View</button>
                        <button id="editModeBtn" class="toolbar-btn px-3 py-1 rounded-md active">Edit</button>
                    </div>
                </div>
                
                <div class="flex items-center gap-2 bg-white px-3 py-1 rounded-lg shadow-sm">
                    <span class="text-gray-600">Indent:</span>
                    <div class="flex gap-1">
                        <button id="indentBtn" class="toolbar-btn px-3 py-1 rounded-md">2</button>
                        <button id="indentBtn4" class="toolbar-btn px-3 py-1 rounded-md">4</button>
                    </div>
                </div>
            </div>
            
            <div class="p-4 flex flex-col md:flex-row gap-4">
                <div class="w-full md:w-1/2">
                    <div class="bg-gray-50 rounded-lg p-4 mb-4">
                        <h2 class="text-lg font-semibold text-gray-700 mb-2">JSON Editor</h2>
                        <div id="jsonEditor" class="json-editor bg-white border rounded-lg p-4 font-mono min-h-[400px] relative">
                            <!-- JSON content will be rendered here -->
                        </div>
                    </div>
                    
                    <div class="bg-gray-50 rounded-lg p-4">
                        <h2 class="text-lg font-semibold text-gray-700 mb-2">JSON Output</h2>
                        <textarea id="jsonOutput" class="w-full h-40 font-mono text-sm p-3 border rounded-lg bg-white" readonly></textarea>
                        <div class="mt-2 flex justify-between">
                            <button id="copyBtn" class="btn bg-gray-200 hover:bg-gray-300 px-4 py-2 rounded-lg">
                                <i class="fas fa-copy"></i> Copy JSON
                            </button>
                            <button id="downloadBtn" class="btn bg-primary hover:bg-secondary text-white px-4 py-2 rounded-lg">
                                <i class="fas fa-download"></i> Download
                            </button>
                        </div>
                    </div>
                </div>
                
                <div class="w-full md:w-1/2">
                    <div class="bg-gray-50 rounded-lg p-4 h-full">
                        <h2 class="text-lg font-semibold text-gray-700 mb-2">Instructions</h2>
                        <div class="bg-white border rounded-lg p-4 h-[400px] overflow-y-auto">
                            <ul class="space-y-3 text-gray-700">
                                <li class="flex items-start">
                                    <i class="fas fa-mouse-pointer text-primary mt-1 mr-2"></i>
                                    <div>
                                        <span class="font-medium">Double-click</span> to edit any element
                                    </div>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-arrows-alt text-primary mt-1 mr-2"></i>
                                    <div>
                                        <span class="font-medium">Drag and drop</span> elements to reorganize
                                    </div>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-keyboard text-primary mt-1 mr-2"></i>
                                    <div>
                                        <span class="font-medium">Keyboard navigation:</span>
                                        <ul class="ml-5 mt-1 space-y-1">
                                            <li>• <span class="font-mono">Tab</span> / <span class="font-mono">Shift+Tab</span> to change indent level</li>
                                            <li>• <span class="font-mono">Enter</span> to create new element at same level</li>
                                            <li>• <span class="font-mono">Shift+Enter</span> to create child element</li>
                                            <li>• <span class="font-mono">Arrow keys</span> to navigate between elements</li>
                                            <li>• <span class="font-mono">Delete</span> to remove selected element</li>
                                        </ul>
                                    </div>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-paste text-primary mt-1 mr-2"></i>
                                    <div>
                                        <span class="font-medium">Paste JSON</span> to automatically parse and render
                                    </div>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-wrench text-primary mt-1 mr-2"></i>
                                    <div>
                                        <span class="font-medium">Auto-repair</span> fixes common JSON syntax errors
                                    </div>
                                </li>
                            </ul>
                            
                            <div class="mt-6 p-4 bg-blue-50 rounded-lg border border-blue-200">
                                <h3 class="font-semibold text-blue-800 mb-2">Try this sample JSON:</h3>
                                <pre class="text-sm bg-white p-3 rounded overflow-x-auto">{
  "name": "John Doe",
  "age": 30,
  "address": {
    "street": "123 Main St",
    "city": "Anytown"
  },
  "hobbies": [
    "reading",
    "swimming"
  ]
}</pre>
                                <button id="loadSampleBtn" class="mt-3 btn bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg">
                                    Load Sample
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="bg-white rounded-xl shadow-lg p-6">
            <h2 class="text-xl font-bold text-gray-800 mb-4">How It Works</h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div class="bg-blue-50 p-4 rounded-lg border border-blue-200">
                    <div class="text-blue-500 text-2xl mb-2">
                        <i class="fas fa-magic"></i>
                    </div>
                    <h3 class="font-bold text-lg mb-2">Visual Editing</h3>
                    <p class="text-gray-700">Easily edit JSON without worrying about brackets or indentation. Each element is visually represented for intuitive editing.</p>
                </div>
                <div class="bg-green-50 p-4 rounded-lg border border-green-200">
                    <div class="text-green-500 text-2xl mb-2">
                        <i class="fas fa-sync-alt"></i>
                    </div>
                    <h3 class="font-bold text-lg mb-2">Real-time Sync</h3>
                    <p class="text-gray-700">Changes in the visual editor are immediately reflected in the JSON output, and vice versa. Validate your JSON at any time.</p>
                </div>
                <div class="bg-purple-50 p-4 rounded-lg border border-purple-200">
                    <div class="text-purple-500 text-2xl mb-2">
                        <i class="fas fa-robot"></i>
                    </div>
                    <h3 class="font-bold text-lg mb-2">Auto-Repair</h3>
                    <p class="text-gray-700">Paste malformed JSON and our editor will attempt to automatically repair common syntax errors and structural issues.</p>
                </div>
            </div>
        </div>
        
        <div id="notification" class="notification fixed bottom-4 right-4 bg-white shadow-lg rounded-lg p-4 border-l-4 border-green-500 max-w-md">
            <div class="flex items-start">
                <i class="fas fa-check-circle text-green-500 text-xl mt-0.5 mr-3"></i>
                <div>
                    <h4 class="font-bold text-gray-800">Success!</h4>
                    <p class="text-gray-600 mt-1">Your JSON has been updated successfully.</p>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Sample JSON data
            const sampleJSON = {
                "name": "John Doe",
                "age": 30,
                "isStudent": false,
                "address": {
                    "street": "123 Main St",
                    "city": "Anytown",
                    "zipcode": "12345"
                },
                "hobbies": [
                    "reading",
                    "swimming",
                    "coding"
                ],
                "contact": {
                    "email": "[email protected]",
                    "phone": "555-1234"
                }
            };
            
            // DOM elements
            const jsonEditor = document.getElementById('jsonEditor');
            const jsonOutput = document.getElementById('jsonOutput');
            const loadSampleBtn = document.getElementById('loadSampleBtn');
            const notification = document.getElementById('notification');
            const copyBtn = document.getElementById('copyBtn');
            const downloadBtn = document.getElementById('downloadBtn');
            
            // Current state
            let jsonData = {};
            let selectedElement = null;
            let history = [];
            let historyIndex = -1;
            
            // Initialize with sample data
            loadJSON(sampleJSON);
            
            // Event listeners
            loadSampleBtn.addEventListener('click', () => {
                loadJSON(sampleJSON);
                showNotification('Sample JSON loaded successfully!');
            });
            
            copyBtn.addEventListener('click', () => {
                jsonOutput.select();
                document.execCommand('copy');
                showNotification('JSON copied to clipboard!');
            });
            
            downloadBtn.addEventListener('click', () => {
                const blob = new Blob([jsonOutput.value], { type: 'application/json' });
                const url = URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = url;
                a.download = 'data.json';
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
                URL.revokeObjectURL(url);
                showNotification('JSON file downloaded!');
            });
            
            // Load JSON data into the editor
            function loadJSON(data) {
                jsonData = JSON.parse(JSON.stringify(data)); // Deep copy
                renderEditor();
                updateOutput();
                saveToHistory();
            }
            
            // Render the JSON editor
            function renderEditor() {
                jsonEditor.innerHTML = '';
                renderElement(jsonEditor, jsonData, 0, 'root');
            }
            
            // Render a single JSON element
            function renderElement(container, data, depth, key = null, parentKey = null) {
                const wrapper = document.createElement('div');
                wrapper.className = 'json-item relative pl-6';
                wrapper.style.paddingLeft = `${depth * 20 + 8}px`;
                wrapper.dataset.key = key;
                wrapper.dataset.parent = parentKey;
                wrapper.dataset.depth = depth;
                
                // Add indent lines
                if (depth > 0) {
                    const indentLine = document.createElement('div');
                    indentLine.className = 'indent-line';
                    indentLine.style.left = `${depth * 20}px`;
                    wrapper.appendChild(indentLine);
                }
                
                // Create element content
                const content = document.createElement('div');
                content.className = 'flex items-start py-1';
                
                // Key
                if (key !== null && key !== 'root') {
                    const keyElement = document.createElement('span');
                    keyElement.className = 'json-key mr-2';
                    keyElement.textContent = `"${key}": `;
                    content.appendChild(keyElement);
                }
                
                // Value or children
                if (typeof data === 'object' && data !== null) {
                    if (Array.isArray(data)) {
                        // Array
                        const bracket = document.createElement('span');
                        bracket.className = 'json-bracket';
                        bracket.textContent = '[';
                        content.appendChild(bracket);
                        
                        wrapper.appendChild(content);
                        container.appendChild(wrapper);
                        
                        // Render array items
                        data.forEach((item, index) => {
                            renderElement(container, item, depth + 1, index, key);
                        });
                        
                        // Closing bracket
                        const closingWrapper = document.createElement('div');
                        closingWrapper.className = 'json-item relative pl-6';
                        closingWrapper.style.paddingLeft = `${depth * 20 + 8}px`;
                        closingWrapper.dataset.key = 'closing';
                        closingWrapper.dataset.parent = key;
                        closingWrapper.dataset.depth = depth;
                        
                        if (depth > 0) {
                            const indentLine = document.createElement('div');
                            indentLine.className = 'indent-line';
                            indentLine.style.left = `${depth * 20}px`;
                            closingWrapper.appendChild(indentLine);
                        }
                        
                        const closingContent = document.createElement('div');
                        closingContent.className = 'flex items-start py-1';
                        const closingBracket = document.createElement('span');
                        closingBracket.className = 'json-bracket';
                        closingBracket.textContent = ']';
                        closingContent.appendChild(closingBracket);
                        closingWrapper.appendChild(closingContent);
                        container.appendChild(closingWrapper);
                    } else {
                        // Object
                        const bracket = document.createElement('span');
                        bracket.className = 'json-bracket';
                        bracket.textContent = '{';
                        content.appendChild(bracket);
                        
                        wrapper.appendChild(content);
                        container.appendChild(wrapper);
                        
                        // Render object properties
                        Object.keys(data).forEach(propKey => {
                            renderElement(container, data[propKey], depth + 1, propKey, key);
                        });
                        
                        // Closing bracket
                        const closingWrapper = document.createElement('div');
                        closingWrapper.className = 'json-item relative pl-6';
                        closingWrapper.style.paddingLeft = `${depth * 20 + 8}px`;
                        closingWrapper.dataset.key = 'closing';
                        closingWrapper.dataset.parent = key;
                        closingWrapper.dataset.depth = depth;
                        
                        if (depth > 0) {
                            const indentLine = document.createElement('div');
                            indentLine.className = 'indent-line';
                            indentLine.style.left = `${depth * 20}px`;
                            closingWrapper.appendChild(indentLine);
                        }
                        
                        const closingContent = document.createElement('div');
                        closingContent.className = 'flex items-start py-1';
                        const closingBracket = document.createElement('span');
                        closingBracket.className = 'json-bracket';
                        closingBracket.textContent = '}';
                        closingContent.appendChild(closingBracket);
                        closingWrapper.appendChild(closingContent);
                        container.appendChild(closingWrapper);
                    }
                } else {
                    // Primitive value
                    const valueElement = document.createElement('span');
                    valueElement.className = 'json-value';
                    
                    if (typeof data === 'string') {
                        valueElement.textContent = `"${data}"`;
                    } else if (typeof data === 'boolean') {
                        valueElement.textContent = data.toString();
                    } else {
                        valueElement.textContent = data;
                    }
                    
                    content.appendChild(valueElement);
                    wrapper.appendChild(content);
                    container.appendChild(wrapper);
                }
                
                // Add event listeners for editing
                if (wrapper.dataset.key !== 'closing') {
                    wrapper.addEventListener('dblclick', () => editElement(wrapper));
                    wrapper.addEventListener('click', () => selectElement(wrapper));
                }
            }
            
            // Edit an element
            function editElement(element) {
                if (element.dataset.key === 'closing') return;
                
                const keyElement = element.querySelector('.json-key');
                const valueElement = element.querySelector('.json-value');
                
                if (keyElement) {
                    const keyText = keyElement.textContent.replace(/"/g, '').replace(':', '').trim();
                    const input = document.createElement('input');
                    input.type = 'text';
                    input.className = 'editable bg-yellow-100 px-1';
                    input.value = keyText;
                    keyElement.replaceWith(input);
                    input.focus();
                    
                    input.addEventListener('blur', () => {
                        const newKey = input.value;
                        updateKey(element, newKey);
                        input.replaceWith(keyElement);
                        keyElement.textContent = `"${newKey}": `;
                    });
                    
                    input.addEventListener('keydown', (e) => {
                        if (e.key === 'Enter') {
                            input.blur();
                        }
                    });
                }
                
                if (valueElement) {
                    const valueText = valueElement.textContent.replace(/"/g, '');
                    const input = document.createElement('input');
                    input.type = 'text';
                    input.className = 'editable bg-yellow-100 px-1';
                    input.value = valueText;
                    valueElement.replaceWith(input);
                    input.focus();
                    
                    input.addEventListener('blur', () => {
                        const newValue = parseValue(input.value);
                        updateValue(element, newValue);
                        input.replaceWith(valueElement);
                        valueElement.textContent = formatValue(newValue);
                    });
                    
                    input.addEventListener('keydown', (e) => {
                        if (e.key === 'Enter') {
                            input.blur();
                        }
                    });
                }
            }
            
            // Parse a value from string to appropriate type
            function parseValue(value) {
                if (value === 'true') return true;
                if (value === 'false') return false;
                if (value === 'null') return null;
                if (!isNaN(value) && value.trim() !== '') return Number(value);
                return value;
            }
            
            // Format a value for display
            function formatValue(value) {
                if (typeof value === 'string') return `"${value}"`;
                if (typeof value === 'boolean') return value.toString();
                if (value === null) return 'null';
                return value;
            }
            
            // Update a key
            function updateKey(element, newKey) {
                const parentKey = element.dataset.parent;
                const oldKey = element.dataset.key;
                
                if (parentKey === 'root') {
                    const newData = {};
                    Object.keys(jsonData).forEach(key => {
                        if (key === oldKey) {
                            newData[newKey] = jsonData[key];
                        } else if (key !== newKey) {
                            newData[key] = jsonData[key];
                        }
                    });
                    jsonData = newData;
                } else {
                    // Find parent in nested structure
                    const parent = findElementByKey(jsonData, parentKey);
                    if (parent && typeof parent === 'object') {
                        const newData = {};
                        Object.keys(parent).forEach(key => {
                            if (key === oldKey) {
                                newData[newKey] = parent[key];
                            } else if (key !== newKey) {
                                newData[key] = parent[key];
                            }
                        });
                        Object.keys(parent).forEach(key => delete parent[key]);
                        Object.assign(parent, newData);
                    }
                }
                
                element.dataset.key = newKey;
                updateOutput();
                saveToHistory();
            }
            
            // Update a value
            function updateValue(element, newValue) {
                const key = element.dataset.key;
                const parentKey = element.dataset.parent;
                
                if (parentKey === 'root') {
                    jsonData[key] = newValue;
                } else {
                    const parent = findElementByKey(jsonData, parentKey);
                    if (parent && typeof parent === 'object') {
                        parent[key] = newValue;
                    }
                }
                
                updateOutput();
                saveToHistory();
            }
            
            // Find an element by key in nested structure
            function findElementByKey(obj, key) {
                if (obj[key] !== undefined) return obj;
                
                for (let prop in obj) {
                    if (typeof obj[prop] === 'object' && obj[prop] !== null) {
                        const result = findElementByKey(obj[prop], key);
                        if (result) return result;
                    }
                }
                
                return null;
            }
            
            // Select an element
            function selectElement(element) {
                if (selectedElement) {
                    selectedElement.classList.remove('selected');
                }
                
                element.classList.add('selected');
                selectedElement = element;
            }
            
            // Update JSON output
            function updateOutput() {
                try {
                    jsonOutput.value = JSON.stringify(jsonData, null, 2);
                    jsonOutput.classList.remove('error-highlight');
                } catch (e) {
                    jsonOutput.value = 'Invalid JSON structure';
                    jsonOutput.classList.add('error-highlight');
                }
            }
            
            // Show notification
            function showNotification(message) {
                const notificationContent = notification.querySelector('p');
                notificationContent.textContent = message;
                notification.classList.add('show');
                
                setTimeout(() => {
                    notification.classList.remove('show');
                }, 3000);
            }
            
            // Save to history for undo/redo
            function saveToHistory() {
                // Remove future history if we're not at the end
                if (historyIndex < history.length - 1) {
                    history = history.slice(0, historyIndex + 1);
                }
                
                history.push(JSON.parse(JSON.stringify(jsonData)));
                historyIndex = history.length - 1;
            }
            
            // Undo action
            function undo() {
                if (historyIndex > 0) {
                    historyIndex--;
                    jsonData = JSON.parse(JSON.stringify(history[historyIndex]));
                    renderEditor();
                    updateOutput();
                    showNotification('Undo successful');
                }
            }
            
            // Redo action
            function redo() {
                if (historyIndex < history.length - 1) {
                    historyIndex++;
                    jsonData = JSON.parse(JSON.stringify(history[historyIndex]));
                    renderEditor();
                    updateOutput();
                    showNotification('Redo successful');
                }
            }
            
            // Event listeners for undo/redo
            document.getElementById('undoBtn').addEventListener('click', undo);
            document.getElementById('redoBtn').addEventListener('click', redo);
            
            // Format JSON
            document.getElementById('formatBtn').addEventListener('click', () => {
                updateOutput();
                showNotification('JSON formatted');
            });
            
            // Validate JSON
            document.getElementById('validateBtn').addEventListener('click', () => {
                try {
                    JSON.parse(jsonOutput.value);
                    showNotification('JSON is valid!');
                } catch (e) {
                    showNotification('Invalid JSON: ' + e.message);
                }
            });
        });
    </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=RobinsAIWorld/jsonic-v2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>