Hugging Face's logo

Spaces:
SpiderDevelopment
/
chatt
Running

App Files Community
SpiderDevelopment commited on
Commit
3d35b27
·
verified ·
1 Parent(s): 79ccb5f

Create app.py

Browse files
Files changed (1) hide show
  1. app.py +226 -0
app.py ADDED
@@ -0,0 +1,226 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import os
2
+ from flask import Flask, render_template
3
+ from flask_socketio import SocketIO, send
4
+ from pyngrok import ngrok
5
+
6
+ # Initialize Flask app and SocketIO
7
+ app = Flask(__name__)
8
+ app.config['SECRET_KEY'] = 'secret!'
9
+ socketio = SocketIO(app)
10
+
11
+ # HTML template for the chat
12
+ chat_html = '''
13
+ <!DOCTYPE html>
14
+ <html>
15
+ <head>
16
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
17
+ <link rel="preconnect" href="https://fonts.googleapis.com">
18
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
19
+ <link href="https://fonts.googleapis.com/css2?family=Chakra+Petch:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
20
+ <style>
21
+ body {
22
+ background-color: #1e1e1e;
23
+ color: #dcdcdc;
24
+ font-family: 'Roboto', sans-serif;
25
+ margin: 0;
26
+ padding: 0;
27
+ display: flex;
28
+ justify-content: center;
29
+ align-items: center;
30
+ height: 100vh;
31
+ overflow-x: hidden;
32
+ }
33
+
34
+ .all {
35
+ width: 90%;
36
+ max-width: 600px;
37
+ margin-top: 50px;
38
+ }
39
+
40
+ #header {
41
+ font-size: 40px;
42
+ margin-bottom: 10px;
43
+ text-align: center;
44
+ color: #7289da;
45
+ font-family: "Chakra Petch", sans-serif;
46
+ font-weight: 700;
47
+ font-style: normal;
48
+ }
49
+
50
+ #messages {
51
+ margin-bottom: 20px;
52
+ padding: 10px;
53
+ border: 1px solid #555;
54
+ background-color: #2c2f33;
55
+ overflow-y: auto;
56
+ border-radius: 5px;
57
+ height: 300px;
58
+ box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
59
+ }
60
+
61
+ .message {
62
+ margin: 5px 0;
63
+ padding: 10px;
64
+ border-radius: 5px;
65
+ max-width: 70%;
66
+ word-wrap: break-word;
67
+ box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
68
+ }
69
+
70
+ .sent {
71
+ background-color: #7289da;
72
+ color: #ffffff;
73
+ align-self: flex-end;
74
+ margin-left: auto;
75
+ text-align: right;
76
+ }
77
+
78
+ .received {
79
+ background-color: #36393f;
80
+ color: #ffffff;
81
+ align-self: flex-start;
82
+ margin-right: auto;
83
+ }
84
+
85
+ #myMessage {
86
+ width: calc(100% - 100px);
87
+ padding: 10px;
88
+ height: 40px;
89
+ border-radius: 5px;
90
+ border: none;
91
+ background-color: #40444b;
92
+ color: #dcdcdc;
93
+ font-size: 15px;
94
+ margin-right: 10px;
95
+ outline: none;
96
+ }
97
+
98
+ #sendbutton {
99
+ width: 40px;
100
+ height: 40px;
101
+ border: none;
102
+ border-radius: 5px;
103
+ background-color: #7289da;
104
+ color: #ffffff;
105
+ cursor: pointer;
106
+ display: flex;
107
+ justify-content: center;
108
+ align-items: center;
109
+ outline: none;
110
+ transition: background-color 0.3s;
111
+ }
112
+
113
+ #sendbutton:hover {
114
+ background-color: #5a6b9f;
115
+ }
116
+
117
+ #imageUpload {
118
+ display: none;
119
+ }
120
+
121
+ .input-container {
122
+ display: flex;
123
+ align-items: center;
124
+ background-color: #2c2f33;
125
+ padding: 10px;
126
+ border-radius: 5px;
127
+ box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
128
+ }
129
+
130
+ .fa-paperclip {
131
+ font-size: 20px;
132
+ color: #7289da;
133
+ cursor: pointer;
134
+ margin-right: 10px;
135
+ }
136
+
137
+ .fa-paperclip:hover {
138
+ color: #5a6b9f;
139
+ }
140
+ </style>
141
+ <title>Spider-Chat</title>
142
+ <script src="https://cdn.socket.io/4.0.1/socket.io.min.js"></script>
143
+ <script type="text/javascript">
144
+ document.addEventListener('DOMContentLoaded', (event) => {
145
+ var socket = io.connect(window.location.href);
146
+
147
+ function sendMessage(message) {
148
+ if (message.trim() !== '') {
149
+ socket.send(message);
150
+ }
151
+ }
152
+
153
+ socket.on('message', function(msg) {
154
+ var messageElement = document.createElement('div');
155
+ messageElement.classList.add('message', 'received');
156
+ messageElement.innerHTML = "<strong>User:</strong> " + msg;
157
+ document.getElementById('messages').appendChild(messageElement);
158
+ document.getElementById('messages').scrollTop = document.getElementById('messages').scrollHeight;
159
+ });
160
+
161
+ document.getElementById('sendbutton').onclick = function() {
162
+ var msg = document.getElementById('myMessage').value;
163
+ sendMessage(msg);
164
+ };
165
+
166
+ document.getElementById('myMessage').addEventListener('keydown', function(event) {
167
+ if (event.key === 'Enter') {
168
+ var msg = document.getElementById('myMessage').value;
169
+ sendMessage(msg);
170
+ }
171
+ });
172
+
173
+ document.getElementById('filebutton').onclick = function() {
174
+ document.getElementById('imageUpload').click();
175
+ };
176
+
177
+ document.getElementById('imageUpload').addEventListener('change', function(event) {
178
+ const file = event.target.files[0];
179
+ if (file) {
180
+ sendImage(file);
181
+ }
182
+ });
183
+
184
+ function sendImage(file) {
185
+ const reader = new FileReader();
186
+ reader.onload = function(event) {
187
+ const imageData = event.target.result;
188
+ sendMessage(imageData);
189
+ };
190
+ reader.readAsDataURL(file);
191
+ }
192
+ });
193
+ </script>
194
+ </head>
195
+ <body>
196
+ <div class="all">
197
+ <div id="header">Spider-Chat</div>
198
+ <div id="messages"></div>
199
+ <div class="input-container">
200
+ <label for="imageUpload" class="fas fa-paperclip"></label>
201
+ <input type="file" id="imageUpload" accept="image/*">
202
+ <input id="myMessage" placeholder="Type here" autocomplete="off">
203
+ <button id="sendbutton"><i class="fas fa-paper-plane"></i></button>
204
+ </div>
205
+ </div>
206
+ </body>
207
+ </html>
208
+
209
+
210
+ '''
211
+
212
+ @app.route('/')
213
+ def chat():
214
+ return chat_html
215
+
216
+ @socketio.on('message')
217
+ def handleMessage(msg):
218
+ print('Message: ' + msg)
219
+ send(msg, broadcast=True)
220
+
221
+ # Start ngrok to expose the app
222
+ url = ngrok.connect(5000)
223
+ print(' * Tunnel URL:', url)
224
+
225
+ if __name__ == '__main__':
226
+ socketio.run(app, port=5000, allow_unsafe_werkzeug=True)