Code for SimHash Demo: ======================== import React, { useState, useEffect } from 'react'; import _ from 'lodash'; const SimHashDemo = () => { const [text1, setText1] = useState("This is a sample text about machine learning and algorithms."); const [text2, setText2] = useState("This is a similar text about machine learning and algorithms."); const [numBits, setNumBits] = useState(64); const [simHash1, setSimHash1] = useState(""); const [simHash2, setSimHash2] = useState(""); const [hammingDistance, setHammingDistance] = useState(0); const [similarityPercentage, setSimilarityPercentage] = useState(0); const [showExplanation, setShowExplanation] = useState(false); // Examples for quick comparison const examples = [ { title: "Nearly identical", text1: "This is a sample text about machine learning and algorithms.", text2: "This is a sample text about machine learning and algorithms", }, { title: "Similar content", text1: "This is a sample text about machine learning and algorithms.", text2: "This is similar content discussing machine learning algorithms.", }, { title: "Same topic, different wording", text1: "This is a sample text about machine learning and algorithms.", text2: "Machine learning algorithms are the subject of this example.", }, { title: "Different topics", text1: "This is a sample text about machine learning and algorithms.", text2: "The weather in London is quite rainy during the spring season.", } ]; // SimHash implementation const computeSimHash = (text, bits = 64) => { if (!text || text.trim() === "") return "0".repeat(bits); // Tokenize the text into words and filter out empty tokens const tokens = text.toLowerCase().split(/\s+/).filter(token => token.length > 0); // Initialize a vector of zeros with the specified length const v = Array(bits).fill(0); // For each token, compute its hash and add/subtract from our vector for (const token of tokens) { // Use simple hash function (for demo purposes) const hash = simpleHash(token, bits); // Update the vector based on this token's hash for (let i = 0; i < bits; i++) { if ((hash & (1n << BigInt(i))) !== 0n) { v[i] += 1; } else { v[i] -= 1; } } } // Convert vector to final SimHash let simHashBinary = ""; for (let i = 0; i < bits; i++) { simHashBinary += v[i] >= 0 ? "1" : "0"; } return simHashBinary; }; // Simple hash function for strings (for demonstration) const simpleHash = (str, bits) => { let hash = 0n; for (let i = 0; i < str.length; i++) { hash = (hash * 31n + BigInt(str.charCodeAt(i))) % (2n ** BigInt(bits)); } return hash; }; // Compute Hamming distance between two binary strings const hammingDistanceBinary = (bin1, bin2) => { if (bin1.length !== bin2.length) return -1; let distance = 0; for (let i = 0; i < bin1.length; i++) { if (bin1[i] !== bin2[i]) distance++; } return distance; }; useEffect(() => { // Compute SimHash values when texts change const hash1 = computeSimHash(text1, numBits); const hash2 = computeSimHash(text2, numBits); setSimHash1(hash1); setSimHash2(hash2); // Calculate Hamming distance const distance = hammingDistanceBinary(hash1, hash2); setHammingDistance(distance); // Calculate similarity percentage const similarity = ((numBits - distance) / numBits) * 100; setSimilarityPercentage(similarity.toFixed(2)); }, [text1, text2, numBits]); // Show color-coded comparison of the SimHash values const renderComparisonBits = () => { if (!simHash1 || !simHash2) return null; return (

{Array.from({ length: numBits }).map((_, i) => ( {simHash1[i]} ))}
{Array.from({ length: numBits }).map((_, i) => ( {simHash2[i]} ))}

); }; return (

SimHash Interactive Demo

SimHash is a technique for quickly estimating how similar two sets or documents are. It converts documents into compact fingerprints where similar documents have similar fingerprints.

{showExplanation && (

How SimHash Works:

Break the document into features (words, phrases, etc.)
Hash each feature to get a fixed-length binary string
For each bit position, keep a running sum (positive when feature hash has 1, negative when 0)
Final fingerprint: 1 for positive sums, 0 for negative sums
Similar documents will have similar SimHash values (low Hamming distance)

The Hamming distance (number of bits that differ) between two SimHash values indicates document similarity - lower distances mean more similar documents.

)}

Text 1:

setText1(e.target.value)}
          />
        </div>
        <div>
          <label className="block mb-2 font-medium">Text 2:</label>
          <textarea
            className="w-full p-2 border rounded-md h-32"
            value={text2}
            onChange={(e) => setText2(e.target.value)}
          />
        </div>
      </div>
      
      <div className="mb-6">
        <label className="block mb-2 font-medium">Hash Size (bits): {numBits}</label>
        <input
          type="range"
          min="16"
          max="128"
          step="16"
          value={numBits}
          onChange={(e) => setNumBits(parseInt(e.target.value))}
          className="w-full"
        />
      </div>
      
      <div className="mb-6">
        <label className="block mb-2 font-medium">Quick Examples:</label>
        <div className="grid grid-cols-2 md:grid-cols-4 gap-2">
          {examples.map((example, index) => (
            <button
              key={index}
              className="px-3 py-2 text-sm bg-gray-100 hover:bg-gray-200 rounded-md transition"
              onClick={() => {
                setText1(example.text1);
                setText2(example.text2);
              }}
            >
              {example.title}
            </button>
          ))}
        </div>
      </div>
      
      <div className="p-4 bg-gray-50 rounded-md">
        <h2 className="text-xl font-bold mb-4">Results</h2>
        
        <div className="mb-4">
          <div className="flex items-center mb-2">
            <div className="font-medium w-48">Similarity:</div>
            <div className="flex-1">
              <div className="h-4 bg-gray-200 rounded-full overflow-hidden">
                <div 
                  className="h-full bg-blue-500" 
                  style={{width: `${similarityPercentage}%`}}
                ></div>
              </div>
            </div>
            <div className="ml-4 font-bold">{similarityPercentage}%</div>
          </div>
          
          <div className="flex items-center">
            <div className="font-medium w-48">Hamming Distance:</div>
            <div>{hammingDistance} bits differ (out of {numBits})</div>
          </div>
        </div>
        
        <div>
          <h3 className="font-medium mb-2">SimHash Fingerprints (Bit by Bit Comparison):</h3>
          {renderComparisonBits()}
          <div className="text-sm text-gray-600">
            <span className="inline-block bg-green-100 px-2 py-1 mr-2">Green</span> matching bits
            <span className="inline-block bg-red-100 px-2 py-1 ml-2">Red</span> differing bits
          </div>
        </div>
      </div>
      
      <div className="mt-6">
        <h3 className="font-bold mb-2">Applications of SimHash:</h3>
        <ul className="list-disc pl-5 space-y-1">
          <li>Near-duplicate detection in large document collections</li>
          <li>Web crawling (avoiding crawling similar pages)</li>
          <li>Plagiarism detection</li>
          <li>Finding similar code snippets</li>
          <li>Clustering similar documents</li>
        </ul>
      </div>
    </div>
  );
};

export default SimHashDemo;</article></body></html>