Transform your data requests into perfect SQL queries
+
+
+
+
+
Database Structure
+
+
Loading database metadata...
+
+
+
+
+
Select Tables & Columns
+
+
+
Tables
+
+
+
+
Columns
+
+
+
+
+
+
+
Data Transformations
+
+
+
+
+
+
+
+
+
+
+
+
+
Custom Request
+
+
+
+
+
+
+
Generated Query
+
+
Your SQL query will appear here...
+
+
+
+
+
+
+
SQL Genie - Making database queries magical
+
index.scroll
Changed around line 1
+ buildHtml
+ baseUrl https://sqlgenie.scroll.pub
+ metaTags
+ editButton /edit.html
+ title SQL Genie - Intelligent Query Builder
+ style.css
+ body.html
+ script.js
prompt.json
Changed around line 1
+ {
+ "id": "msg_016WXsHnwiYSoY1nzSJMMLKk",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "Let me create a website for your SQL query builder app with GPT integration.\n\n---domain---\nsqlgenie.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://sqlgenie.scroll.pub\nmetaTags\neditButton /edit.html\ntitle SQL Genie - Intelligent Query Builder\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n\n
SQL Genie
\n
Transform your data requests into perfect SQL queries
';\n \n // Create table selections\n Object.keys(metadata.tables).forEach(tableName => {\n const tableDiv = document.createElement('div');\n tableDiv.innerHTML = `\n \n `;\n tableList.appendChild(tableDiv);\n });\n}\n\nfunction setupEventListeners() {\n // Table selection handler\n document.getElementById('table-list').addEventListener('change', function(e) {\n if (e.target.type === 'checkbox') {\n updateColumnSelection(e.target);\n }\n });\n\n // Transform button handlers\n document.querySelectorAll('.transform-btn').forEach(btn => {\n btn.addEventListener('click', function() {\n handleTransformation(this.dataset.type);\n });\n });\n\n // Copy button handler\n document.getElementById('copy-btn').addEventListener('click', function() {\n const queryText = document.querySelector('#query-result code').textContent;\n navigator.clipboard.writeText(queryText)\n .then(() => alert('Query copied to clipboard!'))\n .catch(err => console.error('Failed to copy:', err));\n });\n\n // Custom input handler\n let timeout;\n document.getElementById('custom-input').addEventListener('input', function() {\n clearTimeout(timeout);\n timeout = setTimeout(() => generateQuery(), 1000);\n });\n}\n\nfunction updateColumnSelection(tableCheckbox) {\n const columnList = document.getElementById('column-list');\n if (tableCheckbox.checked) {\n // Mock columns for demo\n const columns = ['id', 'name', 'email', 'created_at'];\n columns.forEach(col => {\n const colDiv = document.createElement('div');\n colDiv.innerHTML = `\n \n `;\n columnList.appendChild(colDiv);\n });\n } else {\n // Remove columns for unchecked table\n const tableColumns = columnList.querySelectorAll(`[data-table=\"${tableCheckbox.value}\"]`);\n tableColumns.forEach(col => col.parentElement.parentElement.remove());\n }\n}\n\nfunction handleTransformation(type) {\n const configDiv = document.getElementById('transformation-config');\n configDiv.innerHTML = ''; // Clear previous config\n\n switch(type) {\n case 'sort':\n configDiv.innerHTML = `\n \n \n `;\n break;\n // Add other transformation types as needed\n }\n\n generateQuery();\n}\n\nfunction generateQuery() {\n // Collect all selections and transformations\n const selections = {\n tables: Array.from(document.querySelectorAll('input[name=\"table\"]:checked'))\n .map(cb => cb.value),\n columns: Array.from(document.querySelectorAll('input[name=\"column\"]:checked'))\n .map(cb => `${cb.dataset.table}.${cb.value}`),\n customInput: document.getElementById('custom-input').value\n };\n\n // In a real application, this would call the ChatGPT API\n // For demo, just show a mock query\n const mockQuery = `SELECT ${selections.columns.join(', ')}\nFROM ${selections.tables.join(' JOIN ')}\nWHERE /* conditions based on custom input: ${selections.customInput} */`;\n\n document.querySelector('#query-result code').textContent = mockQuery;\n}\n\n---end---\n\nThis implementation creates a beautiful, responsive SQL query builder interface with the following features:\n\n1. Clean, modern design with smooth gradients and shadows\n2. Responsive layout that works on all devices\n3. Interactive table and column selection\n4. Transformation options with configurable settings\n5. Custom input field for natural language requests\n6. Copy-to-clipboard functionality\n7. Real-time query generation (mock implementation)\n\nThe domain name \"sqlgenie.scroll.pub\" reflects the magical nature of transforming natural language into SQL queries.\n\nTo make this fully functional, you would need to:\n\n1. Connect to a real database to get metadata\n2. Implement the ChatGPT API integration\n3. Add more transformation options\n4. Implement proper error handling\n5. Add input validation\n6. Add loading states\n7. Implement proper security measures\n\nThe current implementation includes mock data and functionality to demonstrate the user interface and interactions."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 372,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2975
+ }
+ }
readme.scroll
Changed around line 1
+ # sqlgenie.scroll.pub
+
+ website generated by Claude from prompt: I want a simple app, that takes a metadata for a database. Assume that this is linked to the webpage data. Then it shows options to select which tables and columns to select. Then it gives options to do various data transformations, and has a text input for custom requests. Then this information is conveyd to chatgpt api, which is tasked to form an SQL query based on the inputs. On the backend side the gpt needs a system prompt to define what it needs to do
