Spaces:

AnthoneoJ
/

semantic-similarity

Runtime error

App Files Files Community

AnthoneoJ commited on Aug 6, 2023

Commit

cac59f2

1 Parent(s): 1fcfb9b

Upload 14 files

Browse files

Files changed (14) hide show

.eslintrc.cjs +20 -0
.gitignore +24 -0
index.html +13 -0
package-lock.json +0 -0
package.json +27 -0
public/vite.svg +1 -0
src/App.css +108 -0
src/App.jsx +150 -0
src/assets/react.svg +1 -0
src/components/progress.jsx +10 -0
src/index.css +87 -0
src/main.jsx +10 -0
src/worker.js +120 -0
vite.config.js +7 -0

.eslintrc.cjs ADDED Viewed

	@@ -0,0 +1,20 @@

+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+  settings: { react: { version: '18.2' } },
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

.gitignore ADDED Viewed

	@@ -0,0 +1,24 @@

+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+node_modules
+dist
+dist-ssr
+*.local
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

index.html ADDED Viewed

	@@ -0,0 +1,13 @@

+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Semantic Similarity - Vite + React</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

package-lock.json ADDED Viewed

The diff for this file is too large to render. See raw diff

package.json ADDED Viewed

	@@ -0,0 +1,27 @@

+{
+  "name": "react-semantic-similarity",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@xenova/transformers": "^2.5.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "^18.2.7",
+    "@vitejs/plugin-react": "^4.0.3",
+    "eslint": "^8.45.0",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.3",
+    "vite": "^4.4.5"
+  }
+}

public/vite.svg ADDED Viewed

src/App.css ADDED Viewed

	@@ -0,0 +1,108 @@

+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+.textbox-container {
+  display: flex;
+  justify-content: center;
+  gap: 20px;
+  width: 800px;
+}
+.textbox-container>textarea, .textbox-container>.candidates-container {
+  width: 50%;
+}
+.candidate-line-container {
+  display: flex;
+  flex-direction: column;
+}
+.output-score {
+  font-size: 1.0em;
+  font-style: italic;
+}
+.progress-container {
+  position: relative;
+  font-size: 14px;
+  color: white;
+  background-color: #e9ecef;
+  border: solid 1px;
+  border-radius: 8px;
+  text-align: left;
+  overflow: hidden;
+}
+.progress-bar {
+  padding: 0 4px;
+  z-index: 0;
+  top: 0;
+  width: 1%;
+  height: 100%;
+  overflow: hidden;
+  background-color: #007bff;
+  white-space: nowrap;
+}
+.progress-text {
+  z-index: 2;
+}
+.selector-container {
+  display: flex;
+  gap: 20px;
+}
+.progress-bars-container {
+  padding: 8px;
+  height: 140px;
+}
+.container {
+  margin: 25px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+.card {
+  padding: 2em;
+}
+.read-the-docs {
+  color: #888;
+}

src/App.jsx ADDED Viewed

	@@ -0,0 +1,150 @@

+// Remember to import the relevant hooks
+import { useEffect, useRef, useState } from 'react'
+import Progress from './components/Progress';
+import './App.css'
+function App() {
+  // Model loading
+  const [ready, setReady] = useState(null);
+  const [disabled, setDisabled] = useState(false);
+  const [progressItems, setProgressItems] = useState([]);
+  // Reference and candidate sentences
+  const [referenceSentence, setReferenceSentence] = useState('Dumbledore lost the fight against Voldemort.');
+  const [candidateSentence1, setCandidateSentence1] = useState('I\'m sad that Voldemort won the battle.');
+  const [candidateSentence2, setCandidateSentence2] = useState('The evil prevailed.');
+  const [candidateSentence3, setCandidateSentence3] = useState('The good prevailed.');
+  // Similarity output
+  const [output_1, setOutput1] = useState('');
+  const [output_2, setOutput2] = useState('');
+  const [output_3, setOutput3] = useState('');
+  // Create a reference to the worker object.
+  const worker = useRef(null);
+  // We use the `useEffect` hook to setup the worker as soon as the `App` component is mounted.
+  useEffect(() => {
+    if (!worker.current) {
+      // Create the worker if it does not yet exist.
+      worker.current = new Worker(new URL('./worker.js', import.meta.url), {
+          type: 'module'
+      });
+    }
+    // Create a callback function for messages from the worker thread.
+    const onMessageReceived = (e) => {
+      switch (e.data.status) {
+        case 'initiate':
+          // Model file start load: add a new progress item to the list.
+          setReady(false);
+          setProgressItems(prev => [...prev, e.data]);
+          break;
+        case 'progress':
+          // Model file progress: update one of the progress items.
+          setProgressItems(
+            prev => prev.map(item => {
+              if (item.file === e.data.file) {
+                return { ...item, progress: e.data.progress }
+              }
+              return item;
+            })
+          );
+          break;
+        case 'done':
+          // Model file loaded: remove the progress item from the list.
+          setProgressItems(
+            prev => prev.filter(item => item.file !== e.data.file)
+          );
+          break;
+        case 'ready':
+          // Pipeline ready: the worker is ready to accept messages.
+          setReady(true);
+          break;
+        case 'update_1':
+          // Generation update: update the output text.
+          setOutput1(e.data.output);
+          break;
+        case 'update_2':
+          // Generation update: update the output text.
+          setOutput2(e.data.output);
+          break;
+        case 'update_3':
+          // Generation update: update the output text.
+          setOutput3(e.data.output);
+          break;
+        case 'complete':
+          // Generation complete: re-enable the "Compute" button
+          setDisabled(false);
+          break;
+      }
+    };
+    // Attach the callback function as an event listener.
+    worker.current.addEventListener('message', onMessageReceived);
+    // Define a cleanup function for when the component is unmounted.
+    return () => worker.current.removeEventListener('message', onMessageReceived);
+  });
+  const compute = () => {
+    setDisabled(true);
+    worker.current.postMessage({
+      refsent: referenceSentence,
+      cand1: candidateSentence1,
+      cand2: candidateSentence2,
+      cand3: candidateSentence3,
+    });
+  }
+  return (
+    <>
+      <h1>Semantic Similarity</h1>
+      <h2>Measure how similar two sentences are in meaning.</h2>
+      <div className='container'>
+        <div className='textbox-container'>
+          <textarea value={referenceSentence} rows={3} onChange={e => setReferenceSentence(e.target.value)}></textarea>
+          <div className='candidates-container'>
+            <div className='candidate-line-container'>
+              <input type='text' value={candidateSentence1} onChange={e => setCandidateSentence1(e.target.value)}></input>
+              <p className='output-score'>{output_1}</p>
+            </div>
+            <div className='candidate-line-container'>
+              <input type='text' value={candidateSentence2} onChange={e => setCandidateSentence2(e.target.value)}></input>
+              <p className='output-score'>{output_2}</p>
+            </div>
+            <div className='candidate-line-container'>
+              <input type='text' value={candidateSentence3} onChange={e => setCandidateSentence3(e.target.value)}></input>
+              <p className='output-score'>{output_3}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <button disabled={disabled} onClick={compute}>Compute</button>
+      <div className='progress-bars-container'>
+        {ready === false && (
+          <label>Loading models... (this only runs once)</label>
+        )}
+        {progressItems.map(data => (
+          <div key={data.file}>
+            <Progress text={data.file} percentage={data.progress}/>
+          </div>
+        ))}
+      </div>
+    </>
+  )
+}
+export default App

src/assets/react.svg ADDED Viewed

src/components/progress.jsx ADDED Viewed

	@@ -0,0 +1,10 @@

+export default function Progress({ text, percentage }) {
+    percentage = percentage ?? 0;
+    return (
+      <div className="progress-container">
+        <div className='progress-bar' style={{ 'width': `${percentage}%` }}>
+          {text} ({`${percentage.toFixed(2)}%`})
+        </div>
+      </div>
+    );
+  }

src/index.css ADDED Viewed

	@@ -0,0 +1,87 @@

+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+h1,
+h2 {
+  margin: 8px;
+}
+textarea {
+  font-size: 1.5em;
+  padding: 0.6em;
+}
+input {
+  font-size: 1.2em;
+  padding: 0.5em;
+}
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+button[disabled] {
+  cursor: not-allowed;
+}
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

src/main.jsx ADDED Viewed

	@@ -0,0 +1,10 @@

+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.jsx'
+import './index.css'
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)

src/worker.js ADDED Viewed

	@@ -0,0 +1,120 @@

+import { pipeline, env } from '@xenova/transformers';
+// Specify a custom location for models (defaults to '/models/').
+env.localModelPath = '/models/';
+// Disable the loading of remote models from the Hugging Face Hub:
+env.allowRemoteModels = false;
+// cache the model in the .cache directory in the current working directory
+env.cacheDir = './.cache';
+// Use the Singleton pattern to enable lazy construction of the pipeline.
+class SemanticSimilarityPipeline {
+  static task = 'feature-extraction'; // follow model's task
+  static model = 'Xenova/multi-qa-MiniLM-L6-cos-v1'; //https://huggingface.co/Xenova/multi-qa-MiniLM-L6-cos-v1
+  static instance = null;
+  static async getInstance(progress_callback = null) {
+    if (this.instance === null) {
+      this.instance = pipeline(this.task, this.model, { progress_callback });
+    }
+    return this.instance;
+  }
+}
+function dotProduct(a, b) {
+    if (a.length !== b.length) {
+        throw new Error('Both arguments must have the same length');
+    }
+    let result = 0;
+    for (let i = 0; i < a.length; i++) {
+        result += a[i] * b[i]
+    }
+    return result.toFixed(3);
+}
+// Listen for messages from the main thread
+self.addEventListener('message', async (event) => {
+    // Retrieve the similarity pipeline. When called for the first time,
+    // this will load the pipeline and save it for future use.
+    let extractor = await SemanticSimilarityPipeline.getInstance(x => {
+        // We also add a progress callback to the pipeline so that we can track model loading.
+        self.postMessage(x);
+    });
+    /* let extractor = await pipeline('feature-extraction', 'Xenova/multi-qa-MiniLM-L6-cos-v1', {
+        progress_callback: x => {
+            self.postMessage(x);
+        }
+     }); */
+    // Actually compute the similarity
+    let ref_embeddings = await extractor(event.data.refsent, {
+        pooling: 'mean',
+        normalize: true
+    });
+    console.log(ref_embeddings);
+    let cand1_embeddings = await extractor(event.data.cand1, {
+        pooling: 'mean',
+        normalize: true
+    });
+    let cand2_embeddings = await extractor(event.data.cand2, {
+        pooling: 'mean',
+        normalize: true
+    });
+    let cand3_embeddings = await extractor(event.data.cand3, {
+        pooling: 'mean',
+        normalize: true
+    });
+    let output_1 = dotProduct(ref_embeddings.data, cand1_embeddings.data);
+    let output_2 = dotProduct(ref_embeddings.data, cand2_embeddings.data);
+    let output_3 = dotProduct(ref_embeddings.data, cand3_embeddings.data);
+    // Send the output back to the main thread
+    self.postMessage({
+        status: 'update_1',
+        output: output_1
+    });
+    self.postMessage({
+        status: 'update_2',
+        output: output_2
+    });
+    self.postMessage({
+        status: 'update_3',
+        output: output_3
+    });
+    self.postMessage({
+        status: 'complete',
+    });
+  });
+  /**
+   * This JavaScript code is essentially using a machine learning model to perform semantic similarity tasks on some
+   * input data. It uses the library "@xenova/transformers" which is a JavaScript implementation similar to Hugging
+   * Face Transformers. It uses a specific model from Hugging Face ('Xenova/multi-qa-MiniLM-L6-cos-v1') to perform the
+   * task.
+Here is a breakdown of the script:
+1. **SemanticSimilarityPipeline class**: This is a singleton class, meaning it restricts the instantiation of a class
+to a single instance. It will create an instance of the pipeline using the specified task and model only if an
+instance does not already exist. This is done through the `getInstance` method. This method takes an optional
+progress_callback function, which would be called to report the progress of model loading.
+2. **The `message` event listener**: This is listening for messages sent from the main thread. The event object it
+receives contains the data for computing the semantic similarity. When a message is received, it retrieves the
+singleton instance of the SemanticSimilarityPipeline, performs the computation, and then sends the result back to
+the main thread using `postMessage`.
+3. **The `extractor` function call**: This uses the instance of the SemanticSimilarityPipeline to compute semantic
+similarity. It takes two arguments. The first one is a reference sentence (`event.data.refsent`). The second argument
+is an object that includes the candidate sentences (`cand1`, `cand2`, and `cand3`) and a callback function. This
+callback function is called after computing the similarity for each candidate sentence and it sends partial output
+back to the main thread.
+4. **Sending result back to the main thread**: After the semantic similarity computation is complete, the output is
+sent back to the main thread using `postMessage`.
+   */

vite.config.js ADDED Viewed

	@@ -0,0 +1,7 @@

+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})