Vsql/index.html at main · Virtualsql/Vsql · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194

<!DOCTYPE html>
<html lang="en">
      <link rel="icon" type="image/x-icon" href="https://grok.com/imagine/post/7af1dde1-7533-4d66-a808-66c32636c7b6">
<head>
    <link rel="icon" type="image/x-icon" href="IMG-20251002-WA0008.jpg">
    <meta name="google-site-verification" content="rrxHrk0vRqMoWXWt7JmF5VqC3i5Q9XdxJRypKETbLh0" />
    <meta name="google-site-verification" content="rrxHrk0vRqMoWXWt7JmF5VqC3i5Q9XdxJRypKETbLh0" />
    <meta name="google-site-verification" content="rrxHrk0vRqMoWXWt7JmF5VqC3i5Q9XdxJRypKETbLh0" />
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VSQL - HJK Inc</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: 'Arial', sans-serif;
        }

        header {
            background: linear-gradient(135deg, #667eea, #764ba2);
        }

        #queryResults {
            min-height: 100px;
        }

        #dataChart {
            max-width: 100%;
            height: 300px;
        }
    </style>
</head>
<body class="bg-gray-100 font-sans">
    <header class="bg-gradient-to-r from-indigo-500 to-purple-600 text-white py-16 text-center">
        <h1 class="text-4xl md:text-5xl font-bold">VSQL by HJK Inc</h1>
        <p class="mt-4 text-lg md:text-xl">An all-in-one database tool with ML visualization and SQL/NoSQL support</p>
    </header>

    <main class="max-w-6xl mx-auto p-6">
        <section class="bg-white rounded-lg shadow-lg p-6 mb-10">
            <h2 class="text-2xl font-semibold mb-4">About VSQL</h2>
            <p class="text-gray-700 mb-4">
                VSQL is a powerful, open-source database management tool designed for seamless integration of SQL and NoSQL databases with machine learning visualization capabilities. Built by HJK Inc, VSQL empowers developers, data scientists, and educators to query, analyze, and visualize data efficiently, even in offline environments using our Internet Learning Tech (ILT) framework for best.
            </p>
            <a href="https://github.com/hjk-inc/Vsql" class="inline-block bg-indigo-600 text-white py-2 px-4 rounded hover:bg-indigo-700">View on GitHub</a>
        </section>

        <section class="bg-white rounded-lg shadow-lg p-6 mb-10">
            <h2 class="text-2xl font-semibold mb-4">Key Features</h2>
            <ul class="list-none space-y-4">
                <li class="p-4 bg-gray-50 rounded">
                    <strong>Unified Database Access</strong>: Seamless support for SQL (MySQL, PostgreSQL, SQLite) and NoSQL (MongoDB, Redis) databases.
                </li>
                <li class="p-4 bg-gray-50 rounded">
                    <strong>ML Visualization</strong>: Integrated tools for clustering, regression, and data visualization using scikit-learn and matplotlib.
                </li>
                <li class="p-4 bg-gray-50 rounded">
                    <strong>Offline ILT Integration</strong>: Leverage pre-fetched data for offline querying with Intel oneAPI optimizations.
                </li>
                <li class="p-4 bg-gray-50 rounded">
                    <strong>Query Builder</strong>: Intuitive GUI for constructing complex SQL/NoSQL queries.
                </li>
                <li class="p-4 bg-gray-50 rounded">
                    <strong>Performance Benchmarking</strong>: Measure query execution time and resource usage.
                </li>
                <li class="p-4 bg-gray-50 rounded">
                    <strong>Python Integration</strong>: Full API support for NumPy, pandas, and other scientific libraries.
                </li>
            </ul>
        </section>

        <section class="bg-white rounded-lg shadow-lg p-6 mb-10">
            <h2 class="text-2xl font-semibold mb-4">Interactive Demo</h2>
            <p class="text-gray-700 mb-4">Try a simplified version of VSQL's query and visualization capabilities.</p>
            <div class="bg-gray-50 p-4 rounded">
                <h3 class="text-lg font-semibold">SQL Query Simulator</h3>
                <p class="text-gray-600 mb-2">Enter a SQL query to simulate results and visualization:</p>
                <input id="sqlQuery" type="text" placeholder="e.g., SELECT * FROM data WHERE value > 50" class="w-full p-2 border rounded mb-4" aria-label="SQL query input">
                <button onclick="runQuery()" class="bg-indigo-600 text-white py-2 px-4 rounded hover:bg-indigo-700">Run Query</button>
                <div id="queryResults" class="mt-4 p-4 bg-white border rounded"></div>
                <canvas id="dataChart" class="mt-4"></canvas>
            </div>
        </section>

        <section class="bg-white rounded-lg shadow-lg p-6 mb-10">
            <h2 class="text-2xl font-semibold mb-4">Explore HJK Inc Projects</h2>
            <ul class="list-none space-y-4">
                <li class="p-4 bg-gray-50 rounded">
                    <a href="https://github.com/hjk-inc/hjkai-" class="text-indigo-600 hover:underline">HJKAI</a>: Offline AI research assistant with ILT for educational use.
                </li>
                <li class="p-4 bg-gray-50 rounded">
                    <a href="https://hjk-inc.github.io/HJK-QUANTUM-/" class="text-indigo-600 hover:underline">HJK-QUANTUM-</a>: Quantum computing simulation environment.
                </li>
                <li class="p-4 bg-gray-50 rounded">
                    <a href="https://github.com/hjk-inc/Malware-with-python" class="text-indigo-600 hover:underline">Malware-with-python</a>: Ethical cybersecurity learning tools.
                </li>
            </ul>
            <div class="text-center mt-6">
                <a href="https://hjk-inc.github.io" class="inline-block bg-indigo-600 text-white py-2 px-4 rounded hover:bg-indigo-700">Visit HJK Inc</a>
            </div>
        </section>

        <section class="text-center">
            <h2 class="text-2xl font-semibold mb-4">Get Involved</h2>
            <p class="text-gray-700 mb-4">VSQL is open-source under the MIT License. Contribute to our mission of advancing educational technology!</p>
            <div class="space-x-4">
                <a href="https://github.com/hjk-inc/Vsql" class="inline-block bg-gray-800 text-white py-2 px-4 rounded hover:bg-gray-900">GitHub</a>
                <a href="https://x.com/HjkMaker" class="inline-block bg-blue-600 text-white py-2 px-4 rounded hover:bg-blue-700">Follow on X</a>
                <a href="mailto:godmy5154@gmail.com" class="inline-block bg-green-600 text-white py-2 px-4 rounded hover:bg-green-500">Contact Us</a>
            </div>
        </section>
    </main>

    <footer class="bg-gray-800 text-white text-center py-6">
        <p>&copy; 2025 HJK Inc. Built with ❤️ for open-source AI. | <a href="https://github.com/hjk-inc/Vsql" class="text-indigo-300 hover:underline">Source</a></p>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
    <script>
        const sampleData = [
            { id: 1, value: 60, category: "A" },
            { id: 2, value: 45, category: "B" },
            { id: 3, value: 75, category: "A" },
            { id: 4, value: 30, category: "C" },
        ];

        let chartInstance = null;

        function runQuery() {
            const query = document.getElementById("sqlQuery").value.trim();
            const resultsDiv = document.getElementById("queryResults");

            if (!query) {
                resultsDiv.innerHTML = "<p class='text-red-600'>Please enter a SQL query.</p>";
                return;
            }

            // Simulate SQL query processing
            let filteredData = sampleData;
            if (query.includes("WHERE")) {
                const match = query.match(/WHERE\s+value\s*>\s*(\d+)/i);
                if (match) {
                    const threshold = parseInt(match[1]);
                    filteredData = sampleData.filter(row => row.value > threshold);
                }
            }

            // Display results
            resultsDiv.innerHTML = `
                <p class='text-gray-700'>Query: ${query}</p>
                <pre class='bg-gray-100 p-2 rounded'>${JSON.stringify(filteredData, null, 2)}</pre>
            `;

            // Update chart
            if (chartInstance) {
                chartInstance.destroy();
            }
            const ctx = document.getElementById("dataChart").getContext("2d");
            chartInstance = new Chart(ctx, {
                type: "bar",
                data: {
                    labels: filteredData.map(row => `ID ${row.id}`),
                    datasets: [{
                        label: "Values",
                        data: filteredData.map(row => row.value),
                        backgroundColor: "rgba(102, 126, 234, 0.6)",
                        borderColor: "rgba(102, 126, 234, 1)",
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    scales: {
                        y: {
                            beginAtZero: true,
                            title: { display: true, text: "Value" }
                        },
                        x: {
                            title: { display: true, text: "Data Points" }
                        }
                    }
                }
            });
        }
    </script>
</body>
</html>
```


<xaiArtifact artifact_id="245442e6-cd98-4e60-b2eb-b9501aa24133" artifact_version_id="87aa22a3-3b78-42d5-8a7b-1d0070868663" title="README.md"