update

app.py

@@ -1,44 +1,77 @@
 from fastapi import FastAPI
 from fastapi.responses import FileResponse
 from fastapi.staticfiles import StaticFiles
+from fastapi.middleware.cors import CORSMiddleware
 from transformers import pipeline
 import os
 import uvicorn
+import logging
+
+# Set up logging
+logging.basicConfig(level=logging.INFO)
+logger = logging.getLogger(__name__)
 
 # Set cache directory to a writable location
 cache_dir = "/tmp/hf_cache"
 os.environ["HF_HOME"] = cache_dir
 os.environ["HUGGINGFACE_HUB_CACHE"] = cache_dir
-os.environ["TRANSFORMERS_CACHE"] = cache_dir  # Add this for backward compatibility
+os.environ["TRANSFORMERS_CACHE"] = cache_dir
 
 # Create the cache directory if it doesn't exist
 if not os.path.exists(cache_dir):
     os.makedirs(cache_dir, exist_ok=True)
 
 app = FastAPI()
+
+# Add CORS middleware to allow frontend requests
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],  # Allow all origins (you can restrict this later)
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
 app.mount("/static", StaticFiles(directory="static"), name="static")
 
 # Load the zero-shot classification model with explicit cache directory
-classifier = pipeline(
-    "zero-shot-classification",
-    model="facebook/bart-large-mnli",
-    cache_dir=cache_dir
-)
+logger.info("Loading the model...")
+try:
+    classifier = pipeline(
+        "zero-shot-classification",
+        model="facebook/bart-large-mnli",
+        cache_dir=cache_dir
+    )
+    logger.info("Model loaded successfully!")
+except Exception as e:
+    logger.error(f"Error loading model: {str(e)}")
+    raise
 
 @app.get("/")
 async def index():
+    logger.info("Serving index.html")
     return FileResponse("static/index.html")
 
 @app.post("/classify")
 async def classify_text(data: dict):
+    logger.info(f"Received classify request with data: {data}")
     try:
         text = data.get("document")
         labels = data.get("labels")
         if not text or not labels:
+            logger.warning("Missing text or labels in request")
             return {"error": "Please provide both text and labels"}, 400
+        
+        # Convert labels to list if it's a string
+        if isinstance(labels, str):
+            labels = [label.strip() for label in labels.split(",")]
+        
+        logger.info(f"Classifying text: {text[:50]}... with labels: {labels}")
         result = classifier(text, labels, multi_label=False)
+        logger.info(f"Classification result: {result}")
         return {"labels": result["labels"], "scores": result["scores"]}, 200
     except Exception as e:
+        logger.error(f"Error during classification: {str(e)}")
         return {"error": str(e)}, 500
 
 if __name__ == "__main__":

static/index.html

@@ -15,7 +15,7 @@
             padding: 20px;
             display: flex;
             justify-content: center;
-            min-height: 100vh; /* Ensure background covers full height */
+            min-height: 100vh;
         }
         .container {
             max-width: 1000px;
@@ -124,14 +124,14 @@
         table {
             width: 100%;
             border-collapse: collapse;
-            background: linear-gradient(135deg, #000, #1a1a2e); /* Match body background */
+            background: linear-gradient(135deg, #000, #1a1a2e);
             border-radius: 8px;
             overflow: hidden;
         }
         th, td {
             padding: 12px;
             text-align: left;
-            color: #fff; /* White text for contrast with dark background */
+            color: #fff;
         }
         th {
             font-weight: bold;
@@ -140,7 +140,7 @@
             display: none;
             position: relative;
             height: 300px;
-            background: linear-gradient(135deg, #000, #1a1a2e); /* Match body background */
+            background: linear-gradient(135deg, #000, #1a1a2e);
             border-radius: 8px;
             padding: 10px;
         }
@@ -203,7 +203,7 @@
             <div class="labels-section">
                 <label>Labels:</label>
                 <input type="text" id="labels" placeholder="Enter labels (comma-separated)" value="mystery, drama, fantasy, history">
-                <button onclick="classifyText()">Classify</button>
+                <button id="classifyBtn">Classify</button>
             </div>
         </div>
         <div class="results">
@@ -238,35 +238,60 @@
             }
         });
 
+        document.getElementById("classifyBtn").addEventListener("click", classifyText);
+
         async function classifyText() {
             const textInput = document.getElementById('document').value;
             const labelsInput = document.getElementById('labels').value;
-            const labels = labelsInput.split(',').map(l => l.trim()).filter(l => l);
             const loadingElement = document.getElementById('loading');
             const chartContainer = document.querySelector('.chart-container');
 
-            if (!textInput || textInput === textarea.getAttribute('placeholder') || !labels.length) {
-                alert('Please enter both text and labels');
+            // Validate inputs
+            if (!textInput || textInput === textarea.getAttribute('placeholder')) {
+                alert('Please enter some text to classify.');
+                return;
+            }
+            if (!labelsInput) {
+                alert('Please enter at least one label.');
                 return;
             }
 
+            // Keep labels as a comma-separated string (as expected by the backend)
+            const labels = labelsInput.trim();
+            console.log("Sending request with text:", textInput.substring(0, 50) + "...");
+            console.log("Labels:", labels);
+
             loadingElement.style.display = 'block';
             chartContainer.style.display = 'none';
 
             try {
-                const response = await fetch('/classify', {  // Updated to relative path for FastAPI
+                const response = await fetch('/classify', {
                     method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ document: textInput, labels })
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({ document: textInput, labels: labels }),
                 });
 
-                if (!response.ok) throw new Error('Classification failed');
+                console.log("Response status:", response.status);
+
+                if (!response.ok) {
+                    const errorText = await response.text();
+                    throw new Error(`Classification failed with status ${response.status}: ${errorText}`);
+                }
 
                 const results = await response.json();
+                console.log("Received results:", results);
+
+                if (results.error) {
+                    throw new Error(results.error);
+                }
+
                 updateTable(results);
                 updateChart(results);
                 chartContainer.style.display = 'block';
             } catch (error) {
+                console.error("Error during classification:", error);
                 alert('Error: ' + error.message);
             } finally {
                 loadingElement.style.display = 'none';