feature: ai prompt to create vis

Now let's take the project in a different direction. Instead of having a dropdown of choices to create 2D plots, let's give the user a text box in which to enter a prompt for
an LLM. From the user's perspective, they can ask for any visualization they want on top of the Parquet file. The LLM is given a system prompt telling it to output a Vega-Lite
spec implementing the user's prompt. We can then display the resulting Vega-Lite. In order to implement the LLM, use Hugging Face Inference Providers. Follow the example at
https://huggingface.co/docs/inference-providers/en/index?javascript-clients=fetch#javascript.

index.html

@@ -51,19 +51,25 @@
 			<div id="status" class="status"></div>
 
 			<div id="visualizationSection" class="visualization-section" style="display: none;">
-				<h2>Visualization</h2>
+				<h2>Create Visualization</h2>
 				<div class="form-group">
-					<label for="xColSelect">X Axis</label>
-					<select id="xColSelect">
-						<option value="">-- Select X column --</option>
-					</select>
+					<label for="hfToken">Hugging Face Token (required for LLM)</label>
+					<input
+						type="password"
+						id="hfToken"
+						placeholder="Enter your HF token with Inference Providers permission"
+					/>
+					<small>Get a token from <a href="https://huggingface.co/settings/tokens" target="_blank">HF Settings</a> with "Make calls to Inference Providers" permission</small>
 				</div>
 				<div class="form-group">
-					<label for="yColSelect">Y Axis</label>
-					<select id="yColSelect">
-						<option value="">-- Select Y column --</option>
-					</select>
+					<label for="vizPrompt">Describe the visualization you want</label>
+					<textarea
+						id="vizPrompt"
+						rows="3"
+						placeholder="e.g., Show a scatter plot of price vs quantity, Create a bar chart showing count by category..."
+					></textarea>
 				</div>
+				<button type="button" id="generateVizBtn">Generate Visualization</button>
 				<div id="vizContainer" class="viz-container"></div>
 			</div>
 
@@ -164,7 +170,7 @@
 					}));
 
 					setStatus(`Detected ${columnInfo.length} columns`, 'success');
-					buildVisualizationDropdown();
+					showVisualizationSection();
 
 				} catch (error) {
 					console.error('Error detecting columns:', error);
@@ -173,127 +179,14 @@
 				}
 			}
 
-			// Populate X and Y axis dropdowns with columns
-			function buildVisualizationDropdown() {
-				const xColSelect = document.getElementById('xColSelect');
-				const yColSelect = document.getElementById('yColSelect');
+			// Show visualization section after dataset is loaded
+			function showVisualizationSection() {
 				const vizSection = document.getElementById('visualizationSection');
-
-				// Clear existing options except first
-				xColSelect.innerHTML = '<option value="">-- Select X column --</option>';
-				yColSelect.innerHTML = '<option value="">-- Select Y column --</option>';
-
-				// Populate both dropdowns with all visualizable columns (numeric or text)
-				columnInfo.forEach(col => {
-					const isNumeric = isNumericType(col.type);
-					const isText = isTextType(col.type);
-
-					if (isNumeric || isText) {
-						const xOption = document.createElement('option');
-						xOption.value = col.name;
-						xOption.textContent = `${col.name} (${col.type})`;
-						xColSelect.appendChild(xOption);
-
-						const yOption = document.createElement('option');
-						yOption.value = col.name;
-						yOption.textContent = `${col.name} (${col.type})`;
-						yColSelect.appendChild(yOption);
-					}
-				});
-
-				// Find first valid pair and pre-select it
-				let firstValidPair = null;
-				for (let i = 0; i < columnInfo.length && !firstValidPair; i++) {
-					const xCol = columnInfo[i];
-					const xIsNumeric = isNumericType(xCol.type);
-					const xIsText = isTextType(xCol.type);
-
-					if (!xIsNumeric && !xIsText) continue;
-
-					for (let j = 0; j < columnInfo.length; j++) {
-						if (i === j) continue; // Skip same column
-
-						const yCol = columnInfo[j];
-						const yIsNumeric = isNumericType(yCol.type);
-						const yIsText = isTextType(yCol.type);
-
-						// Valid combinations: at least one must be numeric
-						if ((xIsNumeric && yIsNumeric) ||
-							(xIsNumeric && yIsText) ||
-							(xIsText && yIsNumeric)) {
-							firstValidPair = { x: xCol.name, y: yCol.name };
-							break;
-						}
-					}
-				}
-
-				if (firstValidPair) {
-					// Pre-select the first valid pair
-					xColSelect.value = firstValidPair.x;
-					yColSelect.value = firstValidPair.y;
-					vizSection.style.display = 'block';
-
-					// Render the visualization immediately
-					renderVisualization(firstValidPair.x, firstValidPair.y, 'scatter');
-				} else if (columnInfo.length > 0) {
+				if (columnInfo.length > 0) {
 					vizSection.style.display = 'block';
 				} else {
 					vizSection.style.display = 'none';
-					setStatus('No valid column combinations found for visualization', 'error');
-				}
-			}
-
-			// Render visualization using Vega-Lite
-			async function renderVisualization(xCol, yCol, chartType) {
-				const vizContainer = document.getElementById('vizContainer');
-				vizContainer.innerHTML = ''; // Clear previous
-
-				if (chartType === 'unsupported') {
-					setStatus(`Error: Unsupported column type combination. X column type: ${columnInfo.find(c => c.name === xCol)?.type}, Y column type: ${columnInfo.find(c => c.name === yCol)?.type}`, 'error');
-					return;
-				}
-
-				try {
-					setStatus('Fetching data for visualization...', 'info');
-
-					// Fetch data (limit to reasonable amount for visualization)
-					const query = `SELECT "${xCol}", "${yCol}" FROM 'data.parquet' LIMIT 1000`;
-					const result = await conn.query(query);
-					const data = result.toArray();
-
-					setStatus('Rendering visualization...', 'info');
-
-					let spec;
-
-					if (chartType === 'scatter') {
-						// Scatter plot: determine type for each axis based on column type
-						const xColInfo = columnInfo.find(c => c.name === xCol);
-						const yColInfo = columnInfo.find(c => c.name === yCol);
-
-						const xType = isNumericType(xColInfo.type) ? 'quantitative' : 'nominal';
-						const yType = isNumericType(yColInfo.type) ? 'quantitative' : 'nominal';
-
-						spec = {
-							$schema: 'https://vega.github.io/schema/vega-lite/v5.json',
-							description: `Scatter plot of ${xCol} vs ${yCol}`,
-							data: { values: data },
-							mark: 'point',
-							encoding: {
-								x: { field: xCol, type: xType },
-								y: { field: yCol, type: yType }
-							},
-							width: 600,
-							height: 400
-						};
-					}
-
-					// Render using vega-embed
-					await vegaEmbed('#vizContainer', spec);
-					setStatus('Visualization rendered successfully!', 'success');
-
-				} catch (error) {
-					console.error('Error rendering visualization:', error);
-					setStatus(`Error rendering visualization: ${error.message}`, 'error');
+					setStatus('No columns found in dataset', 'error');
 				}
 			}
 
@@ -345,90 +238,117 @@
 				}
 			});
 
-			// Check if selected columns form a valid combination and render
-			function isValidCombination(xCol, yCol) {
-				if (!xCol || !yCol || xCol === yCol) return false;
-
-				const xColInfo = columnInfo.find(c => c.name === xCol);
-				const yColInfo = columnInfo.find(c => c.name === yCol);
-
-				if (!xColInfo || !yColInfo) return false;
+			// Generate Vega-Lite spec using LLM
+			async function generateVisualization(prompt, hfToken) {
+				const vizContainer = document.getElementById('vizContainer');
+				vizContainer.innerHTML = '';
 
-				const xIsNumeric = isNumericType(xColInfo.type);
-				const xIsText = isTextType(xColInfo.type);
-				const yIsNumeric = isNumericType(yColInfo.type);
-				const yIsText = isTextType(yColInfo.type);
+				try {
+					setStatus('Generating visualization with LLM...', 'info');
+
+					// Prepare column information for the LLM
+					const columnDescriptions = columnInfo.map(col => `- ${col.name}: ${col.type}`).join('\n');
+
+					// Create system prompt
+					const systemPrompt = `You are a data visualization assistant that generates Vega-Lite specifications.
+
+Available dataset columns:
+${columnDescriptions}
+
+Instructions:
+1. Generate a valid Vega-Lite v5 specification based on the user's request
+2. Use ONLY columns that exist in the dataset above
+3. The data will be provided as an array of objects in the "data.values" field
+4. Output ONLY the JSON specification, no explanations or markdown
+5. Do not include the data itself, just reference fields by name
+6. Include appropriate width and height (e.g., 600x400)
+7. Make sure the spec is complete and valid
+
+Output only the JSON spec starting with { and ending with }.`;
+
+					// Call HF Inference API
+					const response = await fetch(
+						"https://router.huggingface.co/v1/chat/completions",
+						{
+							method: "POST",
+							headers: {
+								Authorization: `Bearer ${hfToken}`,
+								"Content-Type": "application/json",
+							},
+							body: JSON.stringify({
+								model: "openai/gpt-4o-mini:fastest",
+								messages: [
+									{
+										role: "system",
+										content: systemPrompt
+									},
+									{
+										role: "user",
+										content: prompt
+									}
+								],
+								temperature: 0.7,
+								max_tokens: 2000
+							}),
+						}
+					);
 
-				// At least one must be numeric, and both must be numeric or text
-				return ((xIsNumeric || xIsText) && (yIsNumeric || yIsText) &&
-						(xIsNumeric || yIsNumeric));
-			}
+					if (!response.ok) {
+						throw new Error(`API request failed: ${response.status} ${response.statusText}`);
+					}
 
-			// Get error message for invalid column combination
-			function getInvalidCombinationError(xCol, yCol) {
-				if (!xCol || !yCol) {
-					return 'Please select both X and Y columns';
-				}
+					const data = await response.json();
+					const vegaSpec = data.choices[0].message.content;
 
-				if (xCol === yCol) {
-					return 'Cannot visualize a column against itself. Please select different columns for X and Y axes';
-				}
+					// Parse and validate the Vega-Lite spec
+					let spec;
+					try {
+						// Try to extract JSON if wrapped in markdown code blocks
+						let jsonStr = vegaSpec.trim();
+						if (jsonStr.startsWith('```')) {
+							jsonStr = jsonStr.replace(/```json\n?/g, '').replace(/```\n?/g, '');
+						}
+						spec = JSON.parse(jsonStr);
+					} catch (e) {
+						throw new Error(`Failed to parse LLM response as JSON: ${e.message}`);
+					}
 
-				const xColInfo = columnInfo.find(c => c.name === xCol);
-				const yColInfo = columnInfo.find(c => c.name === yCol);
+					// Fetch data for the visualization
+					setStatus('Fetching data for visualization...', 'info');
+					const query = `SELECT * FROM 'data.parquet' LIMIT 1000`;
+					const result = await conn.query(query);
+					const dataArray = result.toArray();
 
-				if (!xColInfo || !yColInfo) {
-					return 'Selected column not found';
-				}
+					// Inject data into the spec
+					spec.data = { values: dataArray };
 
-				const xIsNumeric = isNumericType(xColInfo.type);
-				const xIsText = isTextType(xColInfo.type);
-				const yIsNumeric = isNumericType(yColInfo.type);
-				const yIsText = isTextType(yColInfo.type);
+					// Render the visualization
+					setStatus('Rendering visualization...', 'info');
+					await vegaEmbed('#vizContainer', spec);
+					setStatus('Visualization generated successfully!', 'success');
 
-				if (xIsText && yIsText) {
-					return `Cannot visualize text × text. At least one axis must be numeric. X: ${xColInfo.type}, Y: ${yColInfo.type}`;
+				} catch (error) {
+					console.error('Error generating visualization:', error);
+					setStatus(`Error: ${error.message}`, 'error');
 				}
+			}
 
-				if (!xIsNumeric && !xIsText) {
-					return `X column type "${xColInfo.type}" is not supported. Please select a numeric or text column`;
-				}
+			// Handle generate visualization button
+			document.getElementById('generateVizBtn').addEventListener('click', async function() {
+				const prompt = document.getElementById('vizPrompt').value.trim();
+				const hfToken = document.getElementById('hfToken').value.trim();
 
-				if (!yIsNumeric && !yIsText) {
-					return `Y column type "${yColInfo.type}" is not supported. Please select a numeric or text column`;
+				if (!prompt) {
+					setStatus('Please enter a visualization prompt', 'error');
+					return;
 				}
 
-				return 'Invalid column combination';
-			}
-
-			// Handle X axis selection
-			document.getElementById('xColSelect').addEventListener('change', async function(e) {
-				const xCol = e.target.value;
-				const yCol = document.getElementById('yColSelect').value;
-
-				if (isValidCombination(xCol, yCol)) {
-					await renderVisualization(xCol, yCol, 'scatter');
-				} else if (xCol || yCol) {
-					// Show error and clear visualization
-					const errorMsg = getInvalidCombinationError(xCol, yCol);
-					setStatus(errorMsg, 'error');
-					document.getElementById('vizContainer').innerHTML = '';
+				if (!hfToken) {
+					setStatus('Please enter your Hugging Face token', 'error');
+					return;
 				}
-			});
 
-			// Handle Y axis selection
-			document.getElementById('yColSelect').addEventListener('change', async function(e) {
-				const yCol = e.target.value;
-				const xCol = document.getElementById('xColSelect').value;
-
-				if (isValidCombination(xCol, yCol)) {
-					await renderVisualization(xCol, yCol, 'scatter');
-				} else if (xCol || yCol) {
-					// Show error and clear visualization
-					const errorMsg = getInvalidCombinationError(xCol, yCol);
-					setStatus(errorMsg, 'error');
-					document.getElementById('vizContainer').innerHTML = '';
-				}
+				await generateVisualization(prompt, hfToken);
 			});
 
 			// Set up event listeners