Spaces:

Keiraj
/

Simple

Sleeping

App Files Files Community

Keira commited on Apr 30

Commit

b646cf8

1 Parent(s): b1312fc

Add application file

Browse files

Files changed (3) hide show

.DS_Store +0 -0
app.py +64 -68
readthis.md +117 -0

.DS_Store CHANGED Viewed

Binary files a/.DS_Store and b/.DS_Store differ

app.py CHANGED Viewed

@@ -11,85 +11,81 @@ html = """
 <head>
     <title>Sentiment Checker</title>
     <style>
-    /* Full page layout */
-body {
-    margin: 0;
-    height: 100vh;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    /* Pink gradient background */
-    background: linear-gradient(135deg, #ff9ecb, #ffcce6, #ffe6f2);
-    font-family: Arial, sans-serif;
-}
-/* Title (Google-style spacing) */
-h2 {
-    font-size: 48px;
-    margin-bottom: 30px;
-    color: #fff;
-    letter-spacing: 1px;
-}
-/* Search container */
-.search-box {
-    display: flex;
-    align-items: center;
-    background: white;
-    border-radius: 50px;
-    padding: 10px 15px;
-    width: 500px;
-    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
-}
-/* Input field */
-.search-box input {
-    border: none;
-    outline: none;
-    flex: 1;
-    font-size: 16px;
-    padding: 10px;
-    border-radius: 50px;
-}
-/* Button */
-.search-box button {
-    border: none;
-    background: #ff69b4;
-    color: white;
-    padding: 10px 18px;
-    border-radius: 25px;
-    cursor: pointer;
-    font-weight: bold;
-}
-/* Button hover */
-.search-box button:hover {
-    background: #ff4fa3;
-}
-/* Result text */
-#result {
-    margin-top: 25px;
-    font-size: 20px;
-    color: white;
-}
     </style>
 </head>
 <body>
     <h2>Sentiment Checker</h2>
     <div class="search-box">
-    <input id="text" placeholder="Type something..." size="40"/>
-    <button onclick="send()">Check</button>
     <p id="result"></p>
-</div>
     <script>
         async function send() {
             const text = document.getElementById("text").value;
             const res = await fetch(`/predict?text=${encodeURIComponent(text)}`);
             const data = await res.json();
             document.getElementById("result").innerText =
                 data[0].label + " (" + data[0].score.toFixed(2) + ")";
         }

 <head>
     <title>Sentiment Checker</title>
     <style>
+        body {
+            margin: 0;
+            height: 100vh;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            background: linear-gradient(135deg, #ff9ecb, #ffcce6, #ffe6f2);
+            font-family: Arial, sans-serif;
+        }
+        h2 {
+            font-size: 48px;
+            margin-bottom: 30px;
+            color: white;
+        }
+        .search-box {
+            display: flex;
+            align-items: center;
+            background: white;
+            border-radius: 50px;
+            padding: 10px 15px;
+            width: min(500px, 90vw);
+            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
+        }
+        .search-box input {
+            border: none;
+            outline: none;
+            flex: 1;
+            font-size: 16px;
+            padding: 10px;
+        }
+        .search-box button {
+            border: none;
+            background: #ff69b4;
+            color: white;
+            padding: 10px 18px;
+            border-radius: 25px;
+            cursor: pointer;
+            font-weight: bold;
+        }
+        .search-box button:hover {
+            background: #ff4fa3;
+        }
+        #result {
+            margin-top: 20px;
+            font-size: 22px;
+            color: white;
+            text-align: center;
+        }
     </style>
 </head>
 <body>
     <h2>Sentiment Checker</h2>
     <div class="search-box">
+        <input id="text" placeholder="Type something..." />
+        <button onclick="send()">Check</button>
+    </div>
     <p id="result"></p>
     <script>
         async function send() {
             const text = document.getElementById("text").value;
             const res = await fetch(`/predict?text=${encodeURIComponent(text)}`);
             const data = await res.json();
             document.getElementById("result").innerText =
                 data[0].label + " (" + data[0].score.toFixed(2) + ")";
         }

readthis.md ADDED Viewed

	@@ -0,0 +1,117 @@

+# Sentiment Checker (Docker + Hugging Face Spaces)
+A minimal interactive web app that performs sentiment analysis using a Hugging Face model.
+Users can type text, click a button, and instantly receive a prediction.
+---
+## 🚀 Live Concept
+- Type text into a box
+- Click **Check**
+- Get sentiment (POSITIVE / NEGATIVE)
+---
+## 🧠 Why This Project Exists
+Machine learning apps often fail to run across different environments due to:
+- dependency conflicts
+- mismatched library versions
+- complex setup requirements
+This project demonstrates how Docker solves these issues and enables seamless deployment on Hugging Face Spaces.
+---
+## 🧰 Tech Stack
+- Python
+- FastAPI
+- Transformers (by Hugging Face)
+- Docker
+---
+## 📁 Project Structure
+```
+.
+├── app.py
+├── requirements.txt
+└── Dockerfile
+````
+---
+## ⚙️ How It Works
+1. The frontend is a simple HTML page served by FastAPI
+2. User input is sent to the `/predict` endpoint
+3. A pre-trained sentiment model processes the text
+4. The result is returned and displayed instantly
+---
+## 🐳 Docker Setup
+### Build the image
+```bash
+docker build -t sentiment-app .
+````
+### Run the container
+```bash
+docker run -p 7860:7860 sentiment-app
+```
+Then open: [http://localhost:7860](http://localhost:7860)
+---
+## 🤗 Deployment (Hugging Face Spaces)
+This app is designed to run on Hugging Face Spaces using Docker.
+Steps:
+1. Create a new Space
+2. Select **Docker** as the SDK
+3. Upload project files
+4. The app will automatically build and deploy
+---
+## 💡 Why Docker Matters
+Without Docker:
+* Manual installation of dependencies
+* Version conflicts (e.g., Torch, Transformers)
+* Inconsistent results across machines
+With Docker:
+* Reproducible environment
+* One-step deployment
+* Works the same everywhere
+---
+## ⚠️ Notes
+* The first run may take longer due to model download
+* Subsequent requests are much faster
+---
+## ✅ Key Takeaway
+Docker enables reliable, reproducible deployment of machine learning applications, making it easy to share and run apps on platforms like Hugging Face Spaces without additional setup.
+```