챗팅창 화면 꾸미기 예시 코드입니다. 아래 화면과 같은 결과를 확인할 수 있습니다.
챗팅창 화면 꾸미기 파이썬 코드
flask라이브러리를 설치해야합니다. (pip install flask)
아래 언어생성 모델과 연동하면 나만의 챗봇이 만들어 지겠습니다.
from flask import Flask, render_template from flask_socketio import SocketIO, send app = Flask(__name__) app.config['SECRET_KEY'] = 'secret!' socketio = SocketIO(app) @app.route('/') def index(): return render_template('designed-chat02.html') @socketio.on('message') def handleMessage(msg): print('Message: ' + msg) send(msg, broadcast=True) if __name__ == '__main__': socketio.run(app, debug=True, host='0.0.0.0', port=5000, allow_unsafe_werkzeug=True)
챗팅창 화면 꾸미기 html 코드
templates폴더에 designed-chat02.html 를 생성하고 아래 코드를 붙여 넣습니다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Chat App</title> <style> body { font-family: Arial, sans-serif; background-color: #f1f0f0; margin: 0; padding: 20px; } h1 { color: #333; } #chat-container { max-width: 600px; margin: 0 auto; background-color: #fff; border-radius: 5px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); overflow: hidden; } #chat-header { background-color: #4e8cff; color: #fff; padding: 10px; font-size: 18px; font-weight: bold; } #chat-messages { padding: 10px; max-height: 400px; overflow-y: scroll; } .message { margin-bottom: 10px; } .message-sender { font-weight: bold; margin-bottom: 5px; } .message-text { padding: 8px 12px; border-radius: 10px; max-width: 70%; word-wrap: break-word; } .message-text.sent { background-color: #4e8cff; color: #fff; float: right; clear: both; } .message-text.received { background-color: #f1f0f0; color: #333; float: left; clear: both; } #chat-input-container { display: flex; align-items: center; padding: 10px; border-top: 1px solid #ccc; } #message-input { flex-grow: 1; border: none; outline: none; padding: 8px; font-size: 14px; } #send-button { background-color: #4e8cff; color: #fff; border: none; outline: none; padding: 8px 15px; font-size: 14px; cursor: pointer; } </style> </head> <body> <div id="chat-container"> <div id="chat-header">My Chat Bot</div> <div id="chat-messages"> <!-- Messages will be dynamically added here --> </div> <div id="chat-input-container"> <input type="text" id="message-input" placeholder="Please enter a message"> <button id="send-button">Send</button> </div> </div> </body> </html> <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/3.1.3/socket.io.min.js"></script> <script type="text/javascript"> var socket = io(); function sendMessage() { var messageInput = document.getElementById('message-input'); var message = messageInput.value.trim(); if (message !== '') { socket.emit('message', message); appendMessage(message, 'sent'); // Use 'sent' class for sent messages messageInput.value = ''; } } function appendMessage(message, type) { var chatMessages = document.getElementById('chat-messages'); var messageElement = document.createElement('div'); messageElement.classList.add('message'); messageElement.innerHTML = ` <div class="message-text ${type}">${message}</div> `; chatMessages.appendChild(messageElement); chatMessages.scrollTop = chatMessages.scrollHeight; } socket.on('message', function(msg) { appendMessage(msg, 'received'); // Use 'received' class for received messages }); var input = document.getElementById("message-input"); input.addEventListener("keyup", function(event) { if (event.keyCode === 13) { event.preventDefault(); sendMessage(); } }); var sendButton = document.getElementById("send-button"); sendButton.addEventListener("click", sendMessage); </script>
flask를 사용한 코드는 django로 포팅해야만 배포가능하다 생각했습니다만 gunicorn 이라는 것이 있군요. 소스코드는 그대로 두시고 실행 명령어만 gunicorn을 사용하면 됩니다. 심지어 worker라는 것이 있어 여러 개 프로세스가 동시에 실행되고, 문제 생기면 worker단위로 재시작하는 군요. 상세내용은 아래 링크를 참조하시기 바랍니다.
Chat GPT로 챗봇 만들기
Vertex AI로 챗봇 만들기
Google AI studio(Gemini) 로 챗봇 구현
Claude로 챗봇 만들기
챗팅창 화면 꾸미기
gunicorn을 이용한 배포 방법