Spaces:

znation
/

visualization-studio

Running

App Files Files Community

znation HF Staff commited on 30 days ago

Commit

04b34c7

1 Parent(s): d2e7d62

first prompt vibe coded

Browse files

Files changed (2) hide show

index.html +175 -8
style.css +201 -16

index.html CHANGED Viewed

@@ -3,17 +3,184 @@
 	<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>

 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width" />
+		<title>Parquet Visualization Studio</title>
 		<link rel="stylesheet" href="style.css" />
+		<script src="https://cdn.jsdelivr.net/npm/@duckdb/duckdb-wasm@latest/dist/duckdb-mvp.wasm.js"></script>
+		<script src="https://cdn.jsdelivr.net/npm/@duckdb/duckdb-wasm@latest/dist/duckdb-browser-mvp.worker.js"></script>
+		<script type="module" src="https://cdn.jsdelivr.net/npm/@duckdb/duckdb-wasm@latest/dist/duckdb-browser-mvp.worker.js"></script>
 	</head>
 	<body>
+		<div class="container">
+			<h1>📊 Parquet Visualization Studio</h1>
+			<p class="subtitle">Query parquet files using SQL with DuckDB WASM</p>
+			<form id="queryForm">
+				<div class="form-group">
+					<label for="parquetUrl">Parquet File URL</label>
+					<input
+						type="text"
+						id="parquetUrl"
+						placeholder="https://example.com/data.parquet"
+						required
+					/>
+				</div>
+				<div class="form-group">
+					<label for="sqlQuery">SQL Query</label>
+					<textarea
+						id="sqlQuery"
+						rows="4"
+						placeholder="SELECT * FROM data LIMIT 10"
+						required
+					></textarea>
+				</div>
+				<button type="submit" id="submitBtn">Run Query</button>
+			</form>
+			<div id="status" class="status"></div>
+			<div id="resultsContainer" class="results-container" style="display: none;">
+				<h2>Results</h2>
+				<div id="results" class="results"></div>
+			</div>
 		</div>
+		<script type="module">
+			import * as duckdb from 'https://cdn.jsdelivr.net/npm/@duckdb/duckdb-wasm@latest/+esm';
+			let db = null;
+			let conn = null;
+			// Initialize DuckDB
+			async function initDuckDB() {
+				const JSDELIVR_BUNDLES = duckdb.getJsDelivrBundles();
+				const bundle = await duckdb.selectBundle(JSDELIVR_BUNDLES);
+				const worker_url = URL.createObjectURL(
+					new Blob([`importScripts("${bundle.mainWorker}");`], { type: 'text/javascript' })
+				);
+				const worker = new Worker(worker_url);
+				const logger = new duckdb.ConsoleLogger();
+				db = new duckdb.AsyncDuckDB(logger, worker);
+				await db.instantiate(bundle.mainModule, bundle.pthreadWorker);
+				URL.revokeObjectURL(worker_url);
+				conn = await db.connect();
+			}
+			// Update status message
+			function setStatus(message, type = 'info') {
+				const statusEl = document.getElementById('status');
+				statusEl.textContent = message;
+				statusEl.className = `status status-${type}`;
+				statusEl.style.display = 'block';
+			}
+			// Render results as HTML table
+			function renderResults(result) {
+				const resultsContainer = document.getElementById('resultsContainer');
+				const resultsEl = document.getElementById('results');
+				resultsContainer.style.display = 'block';
+				if (!result || result.numRows === 0) {
+					resultsEl.innerHTML = '<p class="no-results">No results found.</p>';
+					return;
+				}
+				// Get column names and rows
+				const columns = result.schema.fields.map(field => field.name);
+				const rows = result.toArray();
+				// Build HTML table
+				let tableHtml = '<div class="table-wrapper"><table><thead><tr>';
+				// Add headers
+				columns.forEach(col => {
+					tableHtml += `<th>${escapeHtml(col)}</th>`;
+				});
+				tableHtml += '</tr></thead><tbody>';
+				// Add rows
+				rows.forEach(row => {
+					tableHtml += '<tr>';
+					columns.forEach(col => {
+						const value = row[col];
+						tableHtml += `<td>${escapeHtml(String(value ?? ''))}</td>`;
+					});
+					tableHtml += '</tr>';
+				});
+				tableHtml += '</tbody></table></div>';
+				tableHtml += `<p class="row-count">Showing ${result.numRows} row(s)</p>`;
+				resultsEl.innerHTML = tableHtml;
+			}
+			// Escape HTML to prevent XSS
+			function escapeHtml(text) {
+				const div = document.createElement('div');
+				div.textContent = text;
+				return div.innerHTML;
+			}
+			// Handle form submission
+			async function handleSubmit(e) {
+				e.preventDefault();
+				const parquetUrl = document.getElementById('parquetUrl').value.trim();
+				const sqlQuery = document.getElementById('sqlQuery').value.trim();
+				const submitBtn = document.getElementById('submitBtn');
+				if (!parquetUrl || !sqlQuery) {
+					setStatus('Please provide both a parquet URL and SQL query.', 'error');
+					return;
+				}
+				try {
+					submitBtn.disabled = true;
+					submitBtn.textContent = 'Running...';
+					setStatus('Initializing DuckDB...', 'info');
+					// Initialize DuckDB if not already done
+					if (!db) {
+						await initDuckDB();
+					}
+					setStatus('Loading parquet file...', 'info');
+					// Register the parquet file from URL
+					await db.registerFileURL(
+						'data.parquet',
+						parquetUrl,
+						duckdb.DuckDBDataProtocol.HTTP,
+						false
+					);
+					setStatus('Executing query...', 'info');
+					// Execute the query
+					const result = await conn.query(sqlQuery.replace(/\bdata\b/gi, "'data.parquet'"));
+					setStatus('Query completed successfully!', 'success');
+					// Render results
+					renderResults(result);
+				} catch (error) {
+					console.error('Error:', error);
+					setStatus(`Error: ${error.message}`, 'error');
+					document.getElementById('resultsContainer').style.display = 'none';
+				} finally {
+					submitBtn.disabled = false;
+					submitBtn.textContent = 'Run Query';
+				}
+			}
+			// Set up event listeners
+			document.getElementById('queryForm').addEventListener('submit', handleSubmit);
+			// Initialize on load
+			setStatus('Ready to query parquet files!', 'success');
+		</script>
 	</body>
 </html>

style.css CHANGED Viewed

@@ -1,28 +1,213 @@
 body {
 	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
 h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+* {
+	box-sizing: border-box;
+	margin: 0;
+	padding: 0;
+}
 body {
 	padding: 2rem;
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif;
+	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+	min-height: 100vh;
+}
+.container {
+	max-width: 900px;
+	margin: 0 auto;
+	background: white;
+	padding: 2rem;
+	border-radius: 12px;
+	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
 }
 h1 {
+	font-size: 2rem;
+	margin-bottom: 0.5rem;
+	color: #1a202c;
 }
+.subtitle {
+	color: #718096;
+	font-size: 1rem;
+	margin-bottom: 2rem;
 }
+h2 {
+	font-size: 1.5rem;
+	margin-bottom: 1rem;
+	color: #2d3748;
+}
+.form-group {
+	margin-bottom: 1.5rem;
+}
+label {
+	display: block;
+	font-weight: 600;
+	margin-bottom: 0.5rem;
+	color: #2d3748;
+	font-size: 0.95rem;
+}
+input[type="text"],
+textarea {
+	width: 100%;
+	padding: 0.75rem;
+	border: 2px solid #e2e8f0;
+	border-radius: 8px;
+	font-size: 0.95rem;
+	font-family: 'Monaco', 'Courier New', monospace;
+	transition: border-color 0.2s, box-shadow 0.2s;
+}
+input[type="text"]:focus,
+textarea:focus {
+	outline: none;
+	border-color: #667eea;
+	box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
 }
+textarea {
+	resize: vertical;
+	min-height: 100px;
+}
+button[type="submit"] {
+	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+	color: white;
+	border: none;
+	padding: 0.875rem 2rem;
+	font-size: 1rem;
+	font-weight: 600;
+	border-radius: 8px;
+	cursor: pointer;
+	transition: transform 0.2s, box-shadow 0.2s;
+	width: 100%;
+}
+button[type="submit"]:hover:not(:disabled) {
+	transform: translateY(-2px);
+	box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+}
+button[type="submit"]:active:not(:disabled) {
+	transform: translateY(0);
+}
+button[type="submit"]:disabled {
+	opacity: 0.6;
+	cursor: not-allowed;
+}
+.status {
+	margin: 1.5rem 0;
+	padding: 1rem;
+	border-radius: 8px;
+	font-size: 0.95rem;
+	display: none;
+}
+.status-info {
+	background: #ebf8ff;
+	color: #2c5282;
+	border-left: 4px solid #4299e1;
+}
+.status-success {
+	background: #f0fff4;
+	color: #22543d;
+	border-left: 4px solid #48bb78;
+}
+.status-error {
+	background: #fff5f5;
+	color: #742a2a;
+	border-left: 4px solid #f56565;
+}
+.results-container {
+	margin-top: 2rem;
+	padding-top: 2rem;
+	border-top: 2px solid #e2e8f0;
+}
+.results {
+	margin-top: 1rem;
+}
+.table-wrapper {
+	overflow-x: auto;
+	border-radius: 8px;
+	border: 1px solid #e2e8f0;
+}
+table {
+	width: 100%;
+	border-collapse: collapse;
+	font-size: 0.9rem;
+}
+th {
+	background: #f7fafc;
+	padding: 0.75rem;
+	text-align: left;
+	font-weight: 600;
+	color: #2d3748;
+	border-bottom: 2px solid #e2e8f0;
+	white-space: nowrap;
+}
+td {
+	padding: 0.75rem;
+	border-bottom: 1px solid #e2e8f0;
+	color: #4a5568;
+}
+tr:last-child td {
+	border-bottom: none;
+}
+tr:hover {
+	background: #f7fafc;
+}
+.row-count {
+	margin-top: 1rem;
+	color: #718096;
+	font-size: 0.9rem;
+	font-style: italic;
+}
+.no-results {
+	color: #718096;
+	font-style: italic;
+	padding: 2rem;
+	text-align: center;
+}
+@media (max-width: 768px) {
+	body {
+		padding: 1rem;
+	}
+	.container {
+		padding: 1.5rem;
+	}
+	h1 {
+		font-size: 1.5rem;
+	}
+	button[type="submit"] {
+		padding: 0.75rem 1.5rem;
+	}
+	table {
+		font-size: 0.8rem;
+	}
+	th, td {
+		padding: 0.5rem;
+	}
 }