---
import Layout from '../layouts/Layout.astro';
import { SemanticVisualization } from '../components/react/SemanticVisualization';
---

<Layout title="NounVerse - Semantic View">
  <div class="space-y-6">
    <div>
      <h1 class="text-4xl font-bold bg-gradient-to-r from-blue-500 to-purple-600 bg-clip-text text-transparent mb-4">
        Nouns Semantic Visualization
      </h1>
      <p class="text-gray-300 mb-4">
        Explore Nouns NFTs based on their semantic similarity using vector embeddings with exponentially adjusted 
        spacing. Similar nouns are pushed slightly apart while distant nouns are pulled closer together for better visualization.
      </p>
    </div>

    <div class="bg-blue-800 border border-blue-600 rounded-lg p-4">
      <h3 class="font-medium text-blue-200 mb-2">How it works</h3>
      <p class="text-sm text-blue-100">
        Each Noun is represented by a vector embedding capturing its visual features. We calculate cosine similarity 
        and apply an exponential distance adjustment: close nodes (high similarity) are pushed apart using e^(2x), 
        while distant nodes (low similarity) are pulled together using e^(-x), creating a more balanced layout that 
        prevents overcrowding of similar items.
      </p>
    </div>

    <div class="bg-green-800 border border-green-600 rounded-lg p-4">
      <h3 class="font-medium text-green-200 mb-2">Interaction Guide</h3>
      <ul class="text-sm text-green-100 space-y-1">
        <li>• <strong>Click</strong> a noun to highlight its similarity connections</li>
        <li>• <strong>Drag</strong> nodes to reposition them</li>
        <li>• <strong>Zoom</strong> in/out and pan around the visualization</li>
        <li>• Adjust <strong>similarity threshold</strong> to show more or fewer connections</li>
        <li>• Change <strong>max nouns</strong> to include more data in the visualization</li>
        <li>• <strong>Colors</strong> represent different noun categories</li>
      </ul>
    </div>

    <SemanticVisualization client:load />
  </div>
</Layout>