Initial sentiment analyzer demo

README.md

@@ -1,10 +1,20 @@
 ---
-title: Sentiment Simple
-emoji: 🖼️
-colorFrom: yellow
-colorTo: red
-sdk: static
+title: Simple Sentiment Analyzer
+emoji: 🎭
+colorFrom: blue
+colorTo: indigo
+sdk: gradio
+sdk_version: 4.44.0
+app_file: app.py
 pinned: false
+license: mit
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Simple Sentiment Analyzer
+
+Analyze sentiment of any English sentence. Output percentages for:
+- Positive
+- Negative
+- Neutral
+
+Built with Gradio and Hugging Face Transformers.

app.py

@@ -0,0 +1,75 @@
+import gradio as gr
+from transformers import pipeline
+
+# Load sentiment analysis pipeline
+classifier = pipeline(
+    "sentiment-analysis",
+    model="distilbert-base-uncased-finetuned-sst-2-english",
+    return_all_scores=True
+)
+
+def analyze_sentiment(text):
+    """Analyze sentiment and return percentages."""
+    if not text.strip():
+        return {"Positive": 0, "Negative": 0, "Neutral": 0}, ""
+    
+    results = classifier(text)[0]
+    
+    # Convert to percentage format
+    sentiment_map = {}
+    for r in results:
+        label = r['label']
+        score = r['score'] * 100
+        if label == 'POSITIVE':
+            sentiment_map['Positive'] = round(score, 2)
+        elif label == 'NEGATIVE':
+            sentiment_map['Negative'] = round(score, 2)
+    
+    # Add neutral if needed (for models that only have pos/neg)
+    if 'Neutral' not in sentiment_map:
+        sentiment_map['Neutral'] = round(100 - sentiment_map.get('Positive', 0) - sentiment_map.get('Negative', 0), 2)
+    
+    # Create summary text
+    dominant = max(sentiment_map, key=sentiment_map.get)
+    summary = f"**Dominant: {dominant} ({sentiment_map[dominant]}%)**"
+    
+    return sentiment_map, summary
+
+# Create Gradio interface
+with gr.Blocks(title="Simple Sentiment Analyzer") as demo:
+    gr.Markdown("# 🎭 Simple Sentiment Analyzer")
+    gr.Markdown("Enter a sentence to see sentiment breakdown with percentages.")
+    
+    with gr.Row():
+        with gr.Column():
+            text_input = gr.Textbox(
+                label="Input Text",
+                placeholder="Type your sentence here...",
+                lines=4
+            )
+            analyze_btn = gr.Button("Analyze", variant="primary")
+        
+        with gr.Column():
+            output_json = gr.Label(label="Sentiment Scores (%)", num_top_classes=3)
+            summary_md = gr.Markdown()
+    
+    analyze_btn.click(
+        fn=analyze_sentiment,
+        inputs=text_input,
+        outputs=[output_json, summary_md]
+    )
+    
+    # Example inputs
+    gr.Examples(
+        examples=[
+            "I absolutely love this product! It's amazing!",
+            "This is terrible. I hate it.",
+            "The weather is okay today.",
+            "The movie was okay, nothing special but not bad either.",
+            "Best day ever! Everything went perfectly!"
+        ],
+        inputs=text_input
+    )
+
+if __name__ == "__main__":
+    demo.launch()

index.html

@@ -1,57 +1,351 @@
 <!DOCTYPE html>
-<html>
-    <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-        <title>Gradio-Lite: Serverless Gradio Running Entirely in Your Browser</title>
-        <meta name="description" content="Gradio-Lite: Serverless Gradio Running Entirely in Your Browser">
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Simple Sentiment Analyzer</title>
+    <script src="https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.0.0/dist/transformers.min.js"></script>
+    <style>
+        * { box-sizing: border-box; }
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            max-width: 720px;
+            margin: 0 auto;
+            padding: 2rem 1rem;
+            background: #f8fafc;
+            color: #0f172a;
+            line-height: 1.6;
+        }
+        .container {
+            background: white;
+            border-radius: 16px;
+            padding: 2.5rem;
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+        }
+        h1 {
+            font-size: 2rem;
+            font-weight: 700;
+            margin: 0 0 0.5rem;
+            text-align: center;
+            color: #1e293b;
+        }
+        .subtitle {
+            text-align: center;
+            color: #64748b;
+            margin-bottom: 2rem;
+        }
+        .input-group {
+            margin-bottom: 1.5rem;
+        }
+        label {
+            display: block;
+            font-weight: 500;
+            margin-bottom: 0.5rem;
+            color: #334155;
+        }
+        textarea {
+            width: 100%;
+            min-height: 120px;
+            padding: 1rem;
+            border: 2px solid #e2e8f0;
+            border-radius: 10px;
+            font-size: 1rem;
+            font-family: inherit;
+            resize: vertical;
+            transition: border-color 0.2s;
+        }
+        textarea:focus {
+            outline: none;
+            border-color: #3b82f6;
+        }
+        .btn {
+            width: 100%;
+            padding: 1rem;
+            background: linear-gradient(135deg, #3b82f6, #6366f1);
+            color: white;
+            border: none;
+            border-radius: 10px;
+            font-size: 1.1rem;
+            font-weight: 600;
+            cursor: pointer;
+            transition: transform 0.1s, box-shadow 0.2s;
+        }
+        .btn:hover:not(:disabled) {
+            transform: translateY(-1px);
+            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
+        }
+        .btn:active:not(:disabled) {
+            transform: translateY(0);
+        }
+        .btn:disabled {
+            opacity: 0.6;
+            cursor: not-allowed;
+        }
+        .results {
+            margin-top: 2rem;
+            padding-top: 1.5rem;
+            border-top: 1px solid #e2e8f0;
+            display: none;
+        }
+        .results.visible {
+            display: block;
+            animation: fadeIn 0.3s ease;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .sentiment-bar {
+            margin-bottom: 1rem;
+        }
+        .bar-header {
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 0.4rem;
+            font-size: 0.95rem;
+        }
+        .bar-label {
+            font-weight: 600;
+            text-transform: capitalize;
+        }
+        .bar-value {
+            font-weight: 700;
+            color: #3b82f6;
+        }
+        .bar-track {
+            height: 14px;
+            background: #e2e8f0;
+            border-radius: 7px;
+            overflow: hidden;
+        }
+        .bar-fill {
+            height: 100%;
+            border-radius: 7px;
+            transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+        .bar-fill.positive { background: linear-gradient(90deg, #22c55e, #16a34a); }
+        .bar-fill.negative { background: linear-gradient(90deg, #ef4444, #dc2626); }
+        .bar-fill.neutral { background: linear-gradient(90deg, #f59e0b, #d97706); }
+        .summary {
+            text-align: center;
+            margin-top: 1.5rem;
+            padding: 1rem;
+            background: #f1f5f9;
+            border-radius: 10px;
+            font-size: 1.1rem;
+            font-weight: 600;
+        }
+        .examples {
+            margin-top: 2rem;
+            padding-top: 1.5rem;
+            border-top: 1px solid #e2e8f0;
+        }
+        .example-btn {
+            display: inline-block;
+            margin: 0.3rem;
+            padding: 0.5rem 1rem;
+            background: #f1f5f9;
+            border: 1px solid #e2e8f0;
+            border-radius: 8px;
+            font-size: 0.85rem;
+            color: #475569;
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+        .example-btn:hover {
+            background: #e2e8f0;
+            border-color: #3b82f6;
+            color: #3b82f6;
+        }
+        .loading {
+            display: inline-block;
+            width: 18px;
+            height: 18px;
+            border: 2px solid #ffffff50;
+            border-top-color: white;
+            border-radius: 50%;
+            animation: spin 0.8s linear infinite;
+            margin-right: 0.5rem;
+            vertical-align: middle;
+        }
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+        .loading-text {
+            display: none;
+        }
+        .btn.loading .btn-text { display: none; }
+        .btn.loading .loading-text { display: inline; }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>🎭 Simple Sentiment Analyzer</h1>
+        <p class="subtitle">Enter any English sentence to see sentiment breakdown with percentages</p>
+        
+        <div class="input-group">
+            <label for="textInput">Input Text</label>
+            <textarea id="textInput" placeholder="Type your sentence here..."></textarea>
+        </div>
+        
+        <button class="btn" id="analyzeBtn">
+            <span class="btn-text">Analyze Sentiment</span>
+            <span class="loading-text"><span class="loading"></span> Analyzing...</span>
+        </button>
+        
+        <div class="results" id="results">
+            <div class="sentiment-bar">
+                <div class="bar-header">
+                    <span class="bar-label">Positive</span>
+                    <span class="bar-value" id="positiveVal">0%</span>
+                </div>
+                <div class="bar-track">
+                    <div class="bar-fill positive" id="positiveBar" style="width: 0%"></div>
+                </div>
+            </div>
+            <div class="sentiment-bar">
+                <div class="bar-header">
+                    <span class="bar-label">Negative</span>
+                    <span class="bar-value" id="negativeVal">0%</span>
+                </div>
+                <div class="bar-track">
+                    <div class="bar-fill negative" id="negativeBar" style="width: 0%"></div>
+                </div>
+            </div>
+            <div class="sentiment-bar">
+                <div class="bar-header">
+                    <span class="bar-label">Neutral</span>
+                    <span class="bar-value" id="neutralVal">0%</span>
+                </div>
+                <div class="bar-track">
+                    <div class="bar-fill neutral" id="neutralBar" style="width: 0%"></div>
+                </div>
+            </div>
+            <div class="summary" id="summary"></div>
+        </div>
+        
+        <div class="examples">
+            <label>Try examples:</label>
+            <div>
+                <button class="example-btn" onclick="setExample('I absolutely love this product! It is amazing!')">Love it!</button>
+                <button class="example-btn" onclick="setExample('This is terrible. I hate it.')">Hate it</button>
+                <button class="example-btn" onclick="setExample('The weather is okay today.')">Neutral</button>
+                <button class="example-btn" onclick="setExample('The movie was okay, nothing special but not bad.')">Mixed</button>
+                <button class="example-btn" onclick="setExample('Best day ever! Everything went perfectly!')">Very Positive</button>
+            </div>
+        </div>
+    </div>
 
-        <script type="module" crossorigin src="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.js"></script>
-        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.css" />
-
-        <style>
-            html, body {
-                margin: 0;
-                padding: 0;
-                height: 100%;
+    <script>
+        let classifier = null;
+        let isModelLoading = false;
+        
+        async function loadModel() {
+            if (classifier || isModelLoading) return;
+            isModelLoading = true;
+            
+            try {
+                classifier = await Transformers.pipeline(
+                    'sentiment-analysis',
+                    'Xenova/distilbert-base-uncased-finetuned-sst-2-english',
+                    { device: 'auto' }
+                );
+            } catch (e) {
+                console.error('Model load error:', e);
+                alert('Failed to load model. Please refresh and try again.');
+            } finally {
+                isModelLoading = false;
             }
-        </style>
-    </head>
-    <body>
-        <gradio-lite>
-            <gradio-file name="app.py" entrypoint>
-import gradio as gr
-
-from filters import as_gray
-
-def process(input_image):
-    output_image = as_gray(input_image)
-    return output_image
-
-demo = gr.Interface(
-    process,
-    "image",
-    "image",
-    examples=["lion.jpg", "logo.png"],
-)
-
-demo.launch()
-            </gradio-file>
-
-            <gradio-file name="filters.py">
-from skimage.color import rgb2gray
-
-def as_gray(image):
-    return rgb2gray(image)
-            </gradio-file>
-
-            <gradio-file name="lion.jpg" url="https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/test_data/lion.jpg" />
-            <gradio-file name="logo.png" url="https://raw.githubusercontent.com/gradio-app/gradio/main/guides/assets/logo.png" />
-
-            <gradio-requirements>
-# Same syntax as requirements.txt
-scikit-image
-            </gradio-requirements>
-        </gradio-lite>
-    </body>
+        }
+        
+        // Pre-load model on page load
+        loadModel();
+        
+        function setExample(text) {
+            document.getElementById('textInput').value = text;
+        }
+        
+        function updateBars(scores) {
+            const positive = scores.Positive || 0;
+            const negative = scores.Negative || 0;
+            const neutral = scores.Neutral || 0;
+            
+            document.getElementById('positiveVal').textContent = positive.toFixed(1) + '%';
+            document.getElementById('negativeVal').textContent = negative.toFixed(1) + '%';
+            document.getElementById('neutralVal').textContent = neutral.toFixed(1) + '%';
+            
+            document.getElementById('positiveBar').style.width = positive + '%';
+            document.getElementById('negativeBar').style.width = negative + '%';
+            document.getElementById('neutralBar').style.width = neutral + '%';
+        }
+        
+        function getDominant(scores) {
+            let dominant = 'Neutral';
+            let maxScore = scores.Neutral || 0;
+            if ((scores.Positive || 0) > maxScore) {
+                dominant = 'Positive';
+                maxScore = scores.Positive;
+            }
+            if ((scores.Negative || 0) > maxScore) {
+                dominant = 'Negative';
+                maxScore = scores.Negative;
+            }
+            return { dominant, score: maxScore };
+        }
+        
+        async function analyze() {
+            const text = document.getElementById('textInput').value.trim();
+            if (!text) return;
+            
+            const btn = document.getElementById('analyzeBtn');
+            const results = document.getElementById('results');
+            
+            btn.classList.add('loading');
+            btn.disabled = true;
+            
+            // Ensure model is loaded
+            if (!classifier) {
+                await loadModel();
+            }
+            
+            try {
+                const result = await classifier(text);
+                const scores = {};
+                
+                for (const r of result) {
+                    const label = r.label;
+                    const score = (r.score * 100).toFixed(1);
+                    if (label === 'POSITIVE') scores.Positive = parseFloat(score);
+                    else if (label === 'NEGATIVE') scores.Negative = parseFloat(score);
+                }
+                
+                // Calculate neutral
+                scores.Neutral = parseFloat((100 - (scores.Positive || 0) - (scores.Negative || 0)).toFixed(1));
+                if (scores.Neutral < 0) scores.Neutral = 0;
+                
+                updateBars(scores);
+                
+                const { dominant, score } = getDominant(scores);
+                document.getElementById('summary').innerHTML = 
+                    `Dominant: <span style="color: #3b82f6">${dominant}</span> (${score}%)`;
+                
+                results.classList.add('visible');
+            } catch (e) {
+                console.error('Analysis error:', e);
+                alert('Analysis failed. Please try again.');
+            } finally {
+                btn.classList.remove('loading');
+                btn.disabled = false;
+            }
+        }
+        
+        document.getElementById('analyzeBtn').addEventListener('click', analyze);
+        document.getElementById('textInput').addEventListener('keydown', (e) => {
+            if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                analyze();
+            }
+        });
+    </script>
+</body>
 </html>

requirements.txt

@@ -0,0 +1,3 @@
+gradio>=4.0
+transformers>=4.30
+torch>=2.0