Spaces:
Running
Running
| import os | |
| from flask import Flask, render_template | |
| from flask_socketio import SocketIO, send | |
| from pyngrok import ngrok | |
| # Initialize Flask app and SocketIO | |
| app = Flask(__name__) | |
| app.config['SECRET_KEY'] = 'secret!' | |
| socketio = SocketIO(app) | |
| # HTML template for the chat | |
| chat_html = ''' | |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <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"> | |
| <style> | |
| body { | |
| background-color: #1e1e1e; | |
| color: #dcdcdc; | |
| font-family: 'Roboto', sans-serif; | |
| margin: 0; | |
| padding: 0; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| height: 100vh; | |
| overflow-x: hidden; | |
| } | |
| .all { | |
| width: 90%; | |
| max-width: 600px; | |
| margin-top: 50px; | |
| } | |
| #header { | |
| font-size: 40px; | |
| margin-bottom: 10px; | |
| text-align: center; | |
| color: #7289da; | |
| font-family: "Chakra Petch", sans-serif; | |
| font-weight: 700; | |
| font-style: normal; | |
| } | |
| #messages { | |
| margin-bottom: 20px; | |
| padding: 10px; | |
| border: 1px solid #555; | |
| background-color: #2c2f33; | |
| overflow-y: auto; | |
| border-radius: 5px; | |
| height: 300px; | |
| box-shadow: 0px 0px 10px rgba(0,0,0,0.5); | |
| } | |
| .message { | |
| margin: 5px 0; | |
| padding: 10px; | |
| border-radius: 5px; | |
| max-width: 70%; | |
| word-wrap: break-word; | |
| box-shadow: 0px 0px 5px rgba(0,0,0,0.5); | |
| } | |
| .sent { | |
| background-color: #7289da; | |
| color: #ffffff; | |
| align-self: flex-end; | |
| margin-left: auto; | |
| text-align: right; | |
| } | |
| .received { | |
| background-color: #36393f; | |
| color: #ffffff; | |
| align-self: flex-start; | |
| margin-right: auto; | |
| } | |
| #myMessage { | |
| width: calc(100% - 100px); | |
| padding: 10px; | |
| height: 40px; | |
| border-radius: 5px; | |
| border: none; | |
| background-color: #40444b; | |
| color: #dcdcdc; | |
| font-size: 15px; | |
| margin-right: 10px; | |
| outline: none; | |
| } | |
| #sendbutton { | |
| width: 40px; | |
| height: 40px; | |
| border: none; | |
| border-radius: 5px; | |
| background-color: #7289da; | |
| color: #ffffff; | |
| cursor: pointer; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| outline: none; | |
| transition: background-color 0.3s; | |
| } | |
| #sendbutton:hover { | |
| background-color: #5a6b9f; | |
| } | |
| #imageUpload { | |
| display: none; | |
| } | |
| .input-container { | |
| display: flex; | |
| align-items: center; | |
| background-color: #2c2f33; | |
| padding: 10px; | |
| border-radius: 5px; | |
| box-shadow: 0px 0px 10px rgba(0,0,0,0.5); | |
| } | |
| .fa-paperclip { | |
| font-size: 20px; | |
| color: #7289da; | |
| cursor: pointer; | |
| margin-right: 10px; | |
| } | |
| .fa-paperclip:hover { | |
| color: #5a6b9f; | |
| } | |
| </style> | |
| <title>Spider-Chat</title> | |
| <script src="https://cdn.socket.io/4.0.1/socket.io.min.js"></script> | |
| <script type="text/javascript"> | |
| document.addEventListener('DOMContentLoaded', (event) => { | |
| var socket = io.connect(window.location.href); | |
| function sendMessage(message) { | |
| if (message.trim() !== '') { | |
| socket.send(message); | |
| } | |
| } | |
| socket.on('message', function(msg) { | |
| var messageElement = document.createElement('div'); | |
| messageElement.classList.add('message', 'received'); | |
| messageElement.innerHTML = "<strong>User:</strong> " + msg; | |
| document.getElementById('messages').appendChild(messageElement); | |
| document.getElementById('messages').scrollTop = document.getElementById('messages').scrollHeight; | |
| }); | |
| document.getElementById('sendbutton').onclick = function() { | |
| var msg = document.getElementById('myMessage').value; | |
| sendMessage(msg); | |
| }; | |
| document.getElementById('myMessage').addEventListener('keydown', function(event) { | |
| if (event.key === 'Enter') { | |
| var msg = document.getElementById('myMessage').value; | |
| sendMessage(msg); | |
| } | |
| }); | |
| document.getElementById('filebutton').onclick = function() { | |
| document.getElementById('imageUpload').click(); | |
| }; | |
| document.getElementById('imageUpload').addEventListener('change', function(event) { | |
| const file = event.target.files[0]; | |
| if (file) { | |
| sendImage(file); | |
| } | |
| }); | |
| function sendImage(file) { | |
| const reader = new FileReader(); | |
| reader.onload = function(event) { | |
| const imageData = event.target.result; | |
| sendMessage(imageData); | |
| }; | |
| reader.readAsDataURL(file); | |
| } | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <div class="all"> | |
| <div id="header">Spider-Chat</div> | |
| <div id="messages"></div> | |
| <div class="input-container"> | |
| <label for="imageUpload" class="fas fa-paperclip"></label> | |
| <input type="file" id="imageUpload" accept="image/*"> | |
| <input id="myMessage" placeholder="Type here" autocomplete="off"> | |
| <button id="sendbutton"><i class="fas fa-paper-plane"></i></button> | |
| </div> | |
| </div> | |
| </body> | |
| </html> | |
| ''' | |
| def chat(): | |
| return chat_html | |
| def handleMessage(msg): | |
| print('Message: ' + msg) | |
| send(msg, broadcast=True) | |
| # Start ngrok to expose the app | |
| url = ngrok.connect(5000) | |
| print(' * Tunnel URL:', url) | |
| if __name__ == '__main__': | |
| socketio.run(app, port=5000, allow_unsafe_werkzeug=True) | |