Hugging Face's logo

Spaces:
Keiraj
/
Simple
Sleeping

App Files Community
Keira commited on
Commit
5ea8fbd
·
1 Parent(s): 1bab590

Add application file

Browse files
Files changed (3) hide show
  1. .DS_Store +0 -0
  2. README.md +115 -8
  3. app.py +69 -1
.DS_Store CHANGED
Binary files a/.DS_Store and b/.DS_Store differ
 
README.md CHANGED
@@ -1,11 +1,118 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
  ---
2
- title: Simple
3
- emoji: 🌍
4
- colorFrom: green
5
- colorTo: pink
6
- sdk: docker
7
- pinned: false
8
- license: mit
 
 
 
9
  ---
10
 
11
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+
2
+ # Sentiment Checker (Docker + Hugging Face Spaces)
3
+
4
+ A minimal interactive web app that performs sentiment analysis using a Hugging Face model.
5
+ Users can type text, click a button, and instantly receive a prediction.
6
+
7
+ ---
8
+
9
+ ## 🚀 Live Concept
10
+
11
+ - Type text into a box
12
+ - Click **Check**
13
+ - Get sentiment (POSITIVE / NEGATIVE)
14
+
15
  ---
16
+
17
+ ## 🧠 Why This Project Exists
18
+
19
+ Machine learning apps often fail to run across different environments due to:
20
+ - dependency conflicts
21
+ - mismatched library versions
22
+ - complex setup requirements
23
+
24
+ This project demonstrates how Docker solves these issues and enables seamless deployment on Hugging Face Spaces.
25
+
26
  ---
27
 
28
+ ## 🧰 Tech Stack
29
+
30
+ - Python
31
+ - FastAPI
32
+ - Transformers (by Hugging Face)
33
+ - Docker
34
+
35
+ ---
36
+
37
+ ## 📁 Project Structure
38
+
39
+ ```
40
+
41
+ .
42
+ ├── app.py
43
+ ├── requirements.txt
44
+ └── Dockerfile
45
+
46
+ ````
47
+
48
+ ---
49
+
50
+ ## ⚙️ How It Works
51
+
52
+ 1. The frontend is a simple HTML page served by FastAPI
53
+ 2. User input is sent to the `/predict` endpoint
54
+ 3. A pre-trained sentiment model processes the text
55
+ 4. The result is returned and displayed instantly
56
+
57
+ ---
58
+
59
+ ## 🐳 Docker Setup
60
+
61
+ ### Build the image
62
+ ```bash
63
+ docker build -t sentiment-app .
64
+ ````
65
+
66
+ ### Run the container
67
+
68
+ ```bash
69
+ docker run -p 7860:7860 sentiment-app
70
+ ```
71
+
72
+ Then open: [http://localhost:7860](http://localhost:7860)
73
+
74
+ ---
75
+
76
+ ## 🤗 Deployment (Hugging Face Spaces)
77
+
78
+ This app is designed to run on Hugging Face Spaces using Docker.
79
+
80
+ Steps:
81
+
82
+ 1. Create a new Space
83
+ 2. Select **Docker** as the SDK
84
+ 3. Upload project files
85
+ 4. The app will automatically build and deploy
86
+
87
+ ---
88
+
89
+ ## 💡 Why Docker Matters
90
+
91
+ Without Docker:
92
+
93
+ * Manual installation of dependencies
94
+ * Version conflicts (e.g., Torch, Transformers)
95
+ * Inconsistent results across machines
96
+
97
+ With Docker:
98
+
99
+ * Reproducible environment
100
+ * One-step deployment
101
+ * Works the same everywhere
102
+
103
+ ---
104
+
105
+ ## ⚠️ Notes
106
+
107
+ * The first run may take longer due to model download
108
+ * Subsequent requests are much faster
109
+
110
+ ---
111
+
112
+ ## ✅ Key Takeaway
113
+
114
+ 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.
115
+
116
+ ```
117
+
118
+ ---
app.py CHANGED
@@ -10,13 +10,81 @@ html = """
10
  <html>
11
  <head>
12
  <title>Sentiment Checker</title>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
13
  </head>
14
  <body>
15
  <h2>Sentiment Checker</h2>
 
16
  <input id="text" placeholder="Type something..." size="40"/>
17
  <button onclick="send()">Check</button>
18
  <p id="result"></p>
19
-
20
  <script>
21
  async function send() {
22
  const text = document.getElementById("text").value;
 
10
  <html>
11
  <head>
12
  <title>Sentiment Checker</title>
13
+ <style>
14
+ /* Full page layout */
15
+ body {
16
+ margin: 0;
17
+ height: 100vh;
18
+ display: flex;
19
+ flex-direction: column;
20
+ align-items: center;
21
+ justify-content: center;
22
+
23
+ /* Pink gradient background */
24
+ background: linear-gradient(135deg, #ff9ecb, #ffcce6, #ffe6f2);
25
+ font-family: Arial, sans-serif;
26
+ }
27
+
28
+ /* Title (Google-style spacing) */
29
+ h2 {
30
+ font-size: 48px;
31
+ margin-bottom: 30px;
32
+ color: #fff;
33
+ letter-spacing: 1px;
34
+ }
35
+
36
+ /* Search container */
37
+ .search-box {
38
+ display: flex;
39
+ align-items: center;
40
+ background: white;
41
+ border-radius: 50px;
42
+ padding: 10px 15px;
43
+ width: 500px;
44
+ box-shadow: 0 4px 20px rgba(0,0,0,0.1);
45
+ }
46
+
47
+ /* Input field */
48
+ .search-box input {
49
+ border: none;
50
+ outline: none;
51
+ flex: 1;
52
+ font-size: 16px;
53
+ padding: 10px;
54
+ border-radius: 50px;
55
+ }
56
+
57
+ /* Button */
58
+ .search-box button {
59
+ border: none;
60
+ background: #ff69b4;
61
+ color: white;
62
+ padding: 10px 18px;
63
+ border-radius: 25px;
64
+ cursor: pointer;
65
+ font-weight: bold;
66
+ }
67
+
68
+ /* Button hover */
69
+ .search-box button:hover {
70
+ background: #ff4fa3;
71
+ }
72
+
73
+ /* Result text */
74
+ #result {
75
+ margin-top: 25px;
76
+ font-size: 20px;
77
+ color: white;
78
+ }
79
+ </style>
80
  </head>
81
  <body>
82
  <h2>Sentiment Checker</h2>
83
+ <div class="search-box">
84
  <input id="text" placeholder="Type something..." size="40"/>
85
  <button onclick="send()">Check</button>
86
  <p id="result"></p>
87
+ </div>
88
  <script>
89
  async function send() {
90
  const text = document.getElementById("text").value;