Spaces:

arvindk1
/

sentimentAnalysis

Running

App Files Files Community

arvindk1 commited on Jul 12, 2024

Commit

71a1747

verified ·

1 Parent(s): 90585e8

Update index.html

Browse files

Files changed (1) hide show

index.html +30 -4

index.html CHANGED Viewed

@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Transformers.js Sentiment Analysis</title>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/transformers/2.5.0/transformers.min.js"></script>
     <style>
         body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; }
         textarea { width: 100%; height: 100px; }
@@ -14,18 +14,39 @@
 </head>
 <body>
     <h1>Transformers.js Sentiment Analysis</h1>
-    <textarea id="input" placeholder="Enter text for sentiment analysis"></textarea>
     <button onclick="analyzeSentiment()">Analyze Sentiment</button>
     <div id="result"></div>
     <script>
         async function analyzeSentiment() {
             const input = document.getElementById('input').value;
             const result = document.getElementById('result');
             try {
-                // Load the sentiment analysis pipeline
-                const pipeline = await transformers.pipeline('sentiment-analysis');
                 // Perform sentiment analysis
                 const sentiment = await pipeline(input);
@@ -37,9 +58,14 @@
                     <p>Score: ${sentiment[0].score.toFixed(4)}</p>
                 `;
             } catch (error) {
                 result.innerHTML = `<p>Error: ${error.message}</p>`;
             }
         }
     </script>
 </body>
 </html>

     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Transformers.js Sentiment Analysis</title>
+    <script src="https://cdn.jsdelivr.net/npm/@xenova/transformers@2.5.0"></script>
     <style>
         body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; }
         textarea { width: 100%; height: 100px; }
 </head>
 <body>
     <h1>Transformers.js Sentiment Analysis</h1>
+    <textarea id="input" placeholder="Enter text for sentiment analysis">I love this movie! It's amazing!</textarea>
     <button onclick="analyzeSentiment()">Analyze Sentiment</button>
     <div id="result"></div>
     <script>
+        // Use the pipeline from Xenova's transformers package
+        let pipeline;
+        async function loadPipeline() {
+            try {
+                pipeline = await transformers.pipeline('sentiment-analysis');
+                document.querySelector('button').disabled = false;
+            } catch (error) {
+                console.error('Error loading pipeline:', error);
+                document.getElementById('result').innerHTML = `<p>Error: ${error.message}</p>`;
+            }
+        }
         async function analyzeSentiment() {
             const input = document.getElementById('input').value;
             const result = document.getElementById('result');
+            if (!input.trim()) {
+                result.innerHTML = '<p>Please enter some text to analyze.</p>';
+                return;
+            }
+            result.innerHTML = '<p>Analyzing...</p>';
             try {
+                if (!pipeline) {
+                    throw new Error('Pipeline not loaded. Please wait and try again.');
+                }
                 // Perform sentiment analysis
                 const sentiment = await pipeline(input);
                     <p>Score: ${sentiment[0].score.toFixed(4)}</p>
                 `;
             } catch (error) {
+                console.error('Error during sentiment analysis:', error);
                 result.innerHTML = `<p>Error: ${error.message}</p>`;
             }
         }
+        // Load the pipeline when the page loads
+        document.querySelector('button').disabled = true;
+        loadPipeline();
     </script>
 </body>
 </html>