Spaces:

ganna217
/

textclarity

Sleeping

App Files Files Community

ganna217 commited on 20 days ago

Commit

d6791c3

0 Parent(s):

Initial commit with all files for TexClarity

Browse files

Files changed (5) hide show

Dockerfile +17 -0
README.md +11 -0
app.py +45 -0
requirements.txt +3 -0
static/index.html +309 -0

Dockerfile ADDED Viewed

	@@ -0,0 +1,17 @@

+# Use the official Python image as the base
+FROM python:3.9-slim
+# Set the working directory inside the container
+WORKDIR /app
+# Copy all project files to the container
+COPY . /app
+# Install the required Python packages
+RUN pip install --no-cache-dir -r requirements.txt
+# Expose the port that FastAPI will run on
+EXPOSE 7860
+# Command to run the FastAPI application
+CMD ["uvicorn", "app:app", "--host", "0.0.0.0", "--port", "7860"]

README.md ADDED Viewed

	@@ -0,0 +1,11 @@

+# TexClarity
+TexClarity is a text classification app that uses zero-shot classification to categorize text into user-defined labels.
+## How to Use
+1. Enter your text in the textarea.
+2. Provide labels (comma-separated) in the labels field.
+3. Click "Classify" to see the results in a table and chart.
+## Setup
+This Space uses Docker to run a FastAPI backend with a static frontend.

app.py ADDED Viewed

	@@ -0,0 +1,45 @@

+from fastapi import FastAPI, Request
+from fastapi.responses import HTMLResponse
+from fastapi.staticfiles import StaticFiles
+from fastapi.templating import Jinja2Templates
+from transformers import pipeline
+import os
+import uvicorn
+app = FastAPI()
+# Mount the templates directory for serving HTML
+templates = Jinja2Templates(directory="templates")
+# Load the zero-shot classification model
+classifier = pipeline("zero-shot-classification", model="facebook/bart-large-mnli")
+# Route to serve index.html
+@app.get("/", response_class=HTMLResponse)
+async def index(request: Request):
+    return templates.TemplateResponse("index.html", {"request": request})
+# Route to handle text classification requests
+@app.post("/classify")
+async def classify_text(data: dict):
+    try:
+        text = data.get("document")
+        labels = data.get("labels")
+        if not text or not labels:
+            return {"error": "Please provide both text and labels"}, 400
+        # Perform classification
+        result = classifier(text, labels, multi_label=False)
+        response = {
+            "labels": result["labels"],
+            "scores": result["scores"]
+        }
+        return response, 200
+    except Exception as e:
+        return {"error": str(e)}, 500
+# Run the app on HF中国镜像站's required port
+if __name__ == "__main__":
+    port = int(os.environ.get("PORT", 7860))
+    uvicorn.run(app, host="0.0.0.0", port=port)

requirements.txt ADDED Viewed

	@@ -0,0 +1,3 @@

+fastapi
+uvicorn
+transformers

static/index.html ADDED Viewed

	@@ -0,0 +1,309 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>TexClarity</title>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Griffy&display=swap" rel="stylesheet">
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            background: linear-gradient(135deg, #000, #1a1a2e);
+            color: #fff;
+            margin: 0;
+            padding: 20px;
+            display: flex;
+            justify-content: center;
+            min-height: 100vh; /* Ensure background covers full height */
+        }
+        .container {
+            max-width: 1000px;
+            width: 100%;
+        }
+        h1 {
+            font-family: 'Griffy', cursive;
+            font-size: 2em;
+            margin-bottom: 0;
+            margin-top: 10px;
+            position: absolute;
+            top: 20px;
+            left: 20px;
+            color: #fff;
+            text-align: left;
+            box-shadow: 0 0 5px rgba(78, 121, 230, 0.2);
+            padding: 5px 10px;
+            border-radius: 5px;
+            animation: glow 2s infinite;
+        }
+        @keyframes glow {
+            0% { box-shadow: 0 0 5px rgba(78, 121, 230, 0.2); }
+            50% { box-shadow: 0 0 8px rgba(78, 121, 230, 0.4); }
+            100% { box-shadow: 0 0 5px rgba(78, 121, 230, 0.2); }
+        }
+        h2 {
+            font-family: 'Verdana', sans-serif;
+            font-size: 1.8em;
+            font-weight: normal;
+            margin-top: 30px;
+        }
+        h1, h2 {
+            color: #fff;
+            text-align: left;
+        }
+        .input-section {
+            margin-top: 60px;
+            margin-bottom: 20px;
+        }
+        textarea {
+            width: 100%;
+            height: 250px;
+            padding: 15px;
+            margin-bottom: 10px;
+            border: none;
+            border-radius: 8px;
+            background: #e0e0e0;
+            color: #333;
+            font-size: 1.2em;
+            box-sizing: border-box;
+            box-shadow: 0 0 10px rgba(78, 121, 230, 0.3);
+            transition: box-shadow 0.3s;
+        }
+        textarea:focus {
+            box-shadow: 0 0 15px rgba(78, 121, 230, 0.6);
+        }
+        .labels-section {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            margin-bottom: 10px;
+        }
+        .labels-section label {
+            font-size: 1.2em;
+        }
+        input {
+            flex: 2;
+            padding: 15px;
+            border: 2px solid #4e79e6;
+            border-radius: 8px;
+            background: #e0e0e0;
+            color: #333;
+            font-size: 1.2em;
+            box-shadow: 0 0 8px rgba(78, 121, 230, 0.3);
+            transition: box-shadow 0.3s;
+        }
+        input:focus {
+            box-shadow: 0 0 8px rgba(78, 121, 230, 0.5);
+        }
+        button {
+            background: linear-gradient(135deg, #2c5aa0, #4e79e6);
+            color: #fff;
+            padding: 10px 20px;
+            border: none;
+            border-radius: 8px;
+            cursor: pointer;
+            font-size: 1.1em;
+            box-shadow: 0 0 15px rgba(78, 121, 230, 0.5);
+            animation: pulse 2s infinite;
+            transition: transform 0.2s;
+        }
+        button:hover {
+            transform: scale(1.05);
+            box-shadow: 0 0 20px rgba(78, 121, 230, 0.8);
+        }
+        @keyframes pulse {
+            0% { box-shadow: 0 0 15px rgba(78, 121, 230, 0.5); }
+            50% { box-shadow: 0 0 25px rgba(78, 121, 230, 0.8); }
+            100% { box-shadow: 0 0 15px rgba(78, 121, 230, 0.5); }
+        }
+        .results {
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+        }
+        table {
+            width: 100%;
+            border-collapse: collapse;
+            background: linear-gradient(135deg, #000, #1a1a2e); /* Match body background */
+            border-radius: 8px;
+            overflow: hidden;
+        }
+        th, td {
+            padding: 12px;
+            text-align: left;
+            color: #fff; /* White text for contrast with dark background */
+        }
+        th {
+            font-weight: bold;
+        }
+        .chart-container {
+            display: none;
+            position: relative;
+            height: 300px;
+            background: linear-gradient(135deg, #000, #1a1a2e); /* Match body background */
+            border-radius: 8px;
+            padding: 10px;
+        }
+        .loading {
+            position: fixed;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            color: #4e79e6;
+            font-size: 3.5em;
+            display: none;
+        }
+        .loading::after {
+            content: '...';
+            animation: dots 1.5s infinite;
+        }
+        @keyframes dots {
+            0% { content: '.'; }
+            33% { content: '..'; }
+            66% { content: '...'; }
+        }
+        @media (max-width: 768px) {
+            .container {
+                padding: 10px;
+            }
+            textarea, input, button {
+                font-size: 1em;
+            }
+            .labels-section {
+                flex-direction: column;
+                align-items: flex-start;
+            }
+            button {
+                width: 100%;
+            }
+            h1 {
+                font-size: 1.5em;
+                top: 10px;
+                left: 10px;
+            }
+            h2 {
+                margin-top: 20px;
+                font-size: 1.4em;
+            }
+            .input-section {
+                margin-top: 40px;
+            }
+            .loading {
+                font-size: 2.5em;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>TexClarity</h1>
+        <h2>Make your text analysis clearer</h2>
+        <div class="input-section">
+            <textarea id="document" placeholder="Enter your text here...">The fog hung low over the cobblestone streets of Victorian London, a shroud of mystery that seemed to whisper secrets in every shadowed corner. Eleanor, a young seamstress with a keen eye for detail, hurried through the damp alleys, her heart pounding as she clutched the letter in her trembling hands. It was no ordinary letter—it bore the seal of the elusive Lord Ashbourne, a man rumored to have ties to both the royal court and the city’s darkest underbelly. She had been summoned to his estate at midnight, an invitation that felt more like a command. The air grew colder as she approached the towering iron gates, their creak echoing like a warning. Inside, the grand hall was dimly lit, with portraits of stern ancestors glaring down as if they knew her every sin. Lord Ashbourne awaited her, his piercing gaze cutting through the gloom. "You have something I need," he said, his voice a low growl, "and I have something you want—your brother’s freedom." Eleanor’s breath caught in her throat. Her brother, Thomas, had vanished weeks ago, and whispers of his involvement in a smuggling ring had reached her ears. Could she trust this man, or was she stepping into a trap?</textarea>
+            <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>
+            </div>
+        </div>
+        <div class="results">
+            <table id="results-table">
+                <thead>
+                    <tr>
+                        <th>Label</th>
+                        <th>Score</th>
+                    </tr>
+                </thead>
+                <tbody></tbody>
+            </table>
+            <div class="chart-container">
+                <canvas id="resultsChart"></canvas>
+            </div>
+        </div>
+    </div>
+    <div id="loading" class="loading"></div>
+    <script>
+        let chartInstance = null;
+        const textarea = document.getElementById('document');
+        textarea.addEventListener('focus', function() {
+            if (this.value === this.getAttribute('placeholder')) {
+                this.value = '';
+            }
+        });
+        textarea.addEventListener('blur', function() {
+            if (!this.value) {
+                this.value = this.getAttribute('placeholder');
+            }
+        });
+        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');
+                return;
+            }
+            loadingElement.style.display = 'block';
+            chartContainer.style.display = 'none';
+            try {
+                const response = await fetch('/classify', {  // Updated to relative path for FastAPI
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ document: textInput, labels })
+                });
+                if (!response.ok) throw new Error('Classification failed');
+                const results = await response.json();
+                updateTable(results);
+                updateChart(results);
+                chartContainer.style.display = 'block';
+            } catch (error) {
+                alert('Error: ' + error.message);
+            } finally {
+                loadingElement.style.display = 'none';
+            }
+        }
+        function updateTable(results) {
+            const tbody = document.querySelector('#results-table tbody');
+            tbody.innerHTML = '';
+            results.labels.forEach((label, index) => {
+                const row = document.createElement('tr');
+                row.innerHTML = `<td>${label}</td><td>${results.scores[index].toFixed(3)}</td>`;
+                tbody.appendChild(row);
+            });
+        }
+        function updateChart(results) {
+            const ctx = document.getElementById('resultsChart').getContext('2d');
+            if (chartInstance) chartInstance.destroy();
+            chartInstance = new Chart(ctx, {
+                type: 'bar',
+                data: {
+                    labels: results.labels,
+                    datasets: [{
+                        label: 'Scores',
+                        data: results.scores,
+                        backgroundColor: '#4e79e6',
+                        borderColor: '#6a8de9',
+                        borderWidth: 1
+                    }]
+                },
+                options: {
+                    scales: { y: { beginAtZero: true, max: 1 } },
+                    plugins: { legend: { display: false } }
+                }
+            });
+        }
+    </script>
+</body>
+</html>