Spaces:

TheGreatUnknown
/

Quantum-Equation-Explorer-LLML

Running

Quantum-Equation-Explorer-LLML / visualizations.js

Create visualizations.js

36057d5 verified over 1 year ago

2.86 kB

// Visualization configurations using Plotly.js
const defaultLayout = {
  paper_bgcolor: 'rgba(0,0,0,0)',
  plot_bgcolor: 'rgba(0,0,0,0)',
  font: {
    color: '#e0e0e0'
  },
  margin: {
    l: 40, r: 20, t: 20, b: 40
  }
};

function initializeVisualizations() {
  // Superposition visualization
  const superpositionData = [{
    y: quantumSystem.state.superposition.states,
    type: 'bar',
    marker: {
      color: '#6f42c1'
    }
  }];
  
  Plotly.newPlot('superposition', superpositionData, {
    ...defaultLayout,
    title: 'Quantum States'
  });

  // Gates visualization
  const gatesData = [{
    type: 'heatmap',
    z: [[1, 0], [0, 1]],
    colorscale: 'Viridis'
  }];

  Plotly.newPlot('gates', gatesData, {
    ...defaultLayout,
    title: 'Gate Operations'
  });

  // Search visualization
  const searchData = [{
    y: [0],
    type: 'scatter',
    mode: 'lines',
    line: {
      color: '#00acc1'
    }
  }];

  Plotly.newPlot('search', searchData, {
    ...defaultLayout,
    title: 'Search Probability'
  });

  // Walk visualization  
  const walkData = [{
    y: [0],
    type: 'scatter',
    mode: 'lines',
    line: {
      color: '#00acc1'
    }
  }];

  Plotly.newPlot('walks', walkData, {
    ...defaultLayout, 
    title: 'Quantum Walk'
  });

  updateStateDisplay();
}

function updateVisualizations() {
  const state = quantumSystem.getState();

  // Update superposition
  Plotly.update('superposition', {
    y: [state.state.superposition.states]
  });

  // Update gates
  const gateMatrix = state.state.gates.hadamard ? 
    [[1/Math.sqrt(2), 1/Math.sqrt(2)], [1/Math.sqrt(2), -1/Math.sqrt(2)]] :
    [[1, 0], [0, Math.exp(state.state.gates.phase)]];
  
  Plotly.update('gates', {
    z: [gateMatrix]
  });

  // Update search
  Plotly.extendTraces('search', {
    y: [[state.state.search.probability]]
  }, [0]);

  // Update walk
  if (state.state.walk.active) {
    Plotly.extendTraces('walks', {
      y: [[state.state.walk.position]]
    }, [0]);
  }

  updateStateDisplay();
}

function updateStateDisplay() {
  const state = quantumSystem.getState();
  
  // Update state display
  document.getElementById('state-display').innerHTML = `
    <pre>
    Superposition: ${state.state.superposition.active ? 'Active' : 'Inactive'}
    Gates: H=${state.state.gates.hadamard}, φ=${state.state.gates.phase.toFixed(2)}
    Search Iterations: ${state.state.search.iterations}
    Walk Position: ${state.state.walk.position.toFixed(2)}
    </pre>
  `;

  // Update metrics
  document.getElementById('metrics').innerHTML = `
    <pre>
    Coherence: ${state.metrics.coherence.toFixed(3)}
    Entanglement: ${state.metrics.entanglement.toFixed(3)}
    Efficiency: ${state.metrics.efficiency.toFixed(3)}
    </pre>
  `;
}

// Initialize visualizations when page loads
window.addEventListener('load', initializeVisualizations);

	// Visualization configurations using Plotly.js
	const defaultLayout = {
	paper_bgcolor: 'rgba(0,0,0,0)',
	plot_bgcolor: 'rgba(0,0,0,0)',
	font: {
	color: '#e0e0e0'
	},
	margin: {
	l: 40, r: 20, t: 20, b: 40
	}
	};

	function initializeVisualizations() {
	// Superposition visualization
	const superpositionData = [{
	y: quantumSystem.state.superposition.states,
	type: 'bar',
	marker: {
	color: '#6f42c1'
	}
	}];

	Plotly.newPlot('superposition', superpositionData, {
	...defaultLayout,
	title: 'Quantum States'
	});

	// Gates visualization
	const gatesData = [{
	type: 'heatmap',
	z: [[1, 0], [0, 1]],
	colorscale: 'Viridis'
	}];

	Plotly.newPlot('gates', gatesData, {
	...defaultLayout,
	title: 'Gate Operations'
	});

	// Search visualization
	const searchData = [{
	y: [0],
	type: 'scatter',
	mode: 'lines',
	line: {
	color: '#00acc1'
	}
	}];

	Plotly.newPlot('search', searchData, {
	...defaultLayout,
	title: 'Search Probability'
	});

	// Walk visualization
	const walkData = [{
	y: [0],
	type: 'scatter',
	mode: 'lines',
	line: {
	color: '#00acc1'
	}
	}];

	Plotly.newPlot('walks', walkData, {
	...defaultLayout,
	title: 'Quantum Walk'
	});

	updateStateDisplay();
	}

	function updateVisualizations() {
	const state = quantumSystem.getState();

	// Update superposition
	Plotly.update('superposition', {
	y: [state.state.superposition.states]
	});

	// Update gates
	const gateMatrix = state.state.gates.hadamard ?
	[[1/Math.sqrt(2), 1/Math.sqrt(2)], [1/Math.sqrt(2), -1/Math.sqrt(2)]] :
	[[1, 0], [0, Math.exp(state.state.gates.phase)]];

	Plotly.update('gates', {
	z: [gateMatrix]
	});

	// Update search
	Plotly.extendTraces('search', {
	y: [[state.state.search.probability]]
	}, [0]);

	// Update walk
	if (state.state.walk.active) {
	Plotly.extendTraces('walks', {
	y: [[state.state.walk.position]]
	}, [0]);
	}

	updateStateDisplay();
	}

	function updateStateDisplay() {
	const state = quantumSystem.getState();

	// Update state display
	document.getElementById('state-display').innerHTML = `
	<pre>
	Superposition: ${state.state.superposition.active ? 'Active' : 'Inactive'}
	Gates: H=${state.state.gates.hadamard}, φ=${state.state.gates.phase.toFixed(2)}
	Search Iterations: ${state.state.search.iterations}
	Walk Position: ${state.state.walk.position.toFixed(2)}
	</pre>
	`;

	// Update metrics
	document.getElementById('metrics').innerHTML = `
	<pre>
	Coherence: ${state.metrics.coherence.toFixed(3)}
	Entanglement: ${state.metrics.entanglement.toFixed(3)}
	Efficiency: ${state.metrics.efficiency.toFixed(3)}
	</pre>
	`;
	}

	// Initialize visualizations when page loads
	window.addEventListener('load', initializeVisualizations);