Spaces:

AnthoneoJ
/

semantic-similarity

Runtime error

App Files Files Community

AnthoneoJ commited on Aug 6, 2023

Commit

1fcfb9b

1 Parent(s): 2a62878

Delete app

Browse files

Files changed (14) hide show

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

app/.eslintrc.cjs DELETED Viewed

@@ -1,20 +0,0 @@
-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 },
-    ],
-  },
-}

app/.gitignore DELETED Viewed

@@ -1,24 +0,0 @@
-# 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?

app/index.html DELETED Viewed

@@ -1,13 +0,0 @@
-<!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>

app/package-lock.json DELETED Viewed

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

app/package.json DELETED Viewed

@@ -1,27 +0,0 @@
-{
-  "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"
-  }
-}

app/public/vite.svg DELETED Viewed

app/src/App.css DELETED Viewed

@@ -1,108 +0,0 @@
-#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;
-}

app/src/App.jsx DELETED Viewed

@@ -1,150 +0,0 @@
-// 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

app/src/assets/react.svg DELETED Viewed

app/src/components/progress.jsx DELETED Viewed

@@ -1,10 +0,0 @@
-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>
-    );
-  }

app/src/index.css DELETED Viewed

@@ -1,87 +0,0 @@
-: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;
-  }
-}

app/src/main.jsx DELETED Viewed

@@ -1,10 +0,0 @@
-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>,
-)

app/src/worker.js DELETED Viewed

@@ -1,120 +0,0 @@
-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`.
-   */

app/vite.config.js DELETED Viewed

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