[Day 22]打造一個聊天室(1)

2023 iThome 鐵人賽

DAY 22

Software Development

從開始到放棄的Flask系列第 22 篇

15th鐵人賽

arbin

團隊NUTC_IMAC_智慧星爆

2023-10-02 14:40:46

693 瀏覽

分享至

有了前面的一些基礎觀念，接著我打造一個自己的聊天室！在這個項目中，會運用到前面已經學到的一些基本Flask和JavaScript觀念，並結合OpenAI的功能，打造一個自己專屬的即時聊天應用程序。

接下來，我們將逐步引導您完成這個聊天室項目。我們將從Flask的基本設置開始，然後逐步構建前端和後端，最終實現一個完整的聊天室應用。我們將依下面的順序循序打造出一個聊天機器人：

設計聊天室的前端界面，包括消息顯示區域和輸入框
創建Flask應用程序和路由
使用JavaScript實現即時消息更新
整合OpenAI的語言模型，使機器人能夠參與聊天
處理用戶輸入，發送消息和接收機器人的回應

資料夾結構

ChatBot:.
│  app.py
│  Pipfile
│  
├─static
│      main.js
│      style.css
│
└─templates
      index.html

HTML架構

首先我們先到index.html，先透過建立基本的框架，並且一步一步的

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!-- 引入外部樣式表，使用Flask的url_for函數生成正確的URL -->
	<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css')}}">
	<!-- 引入jQuery庫 -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<!-- 引入Font Awesome圖標庫 -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
	<!-- 引入JavaScript文件 -->
	<script src="{{ url_for('static', filename='main.js' )}}"></script> 
	<title>ChatBOT</title>
</head>
<body>
	<div class="chat_bot_container">
		<div class="chat_bot_title-container">
			<!-- 聊天機器人的標題容器，包括圖片和標題 -->
			<img src="https://freelogopng.com/images/all_img/1681038242chatgpt-logo-png.png">
			<p>ChatBOT</p>
		</div>
		<div class="msg-container">
			<!-- 用於顯示聊天消息的容器 -->
		</div>
	
		<div class="chat-container">
			<form class="chat-form">
				<div class="chat-frame">
					<input type="text" class="chat-box" name="user_msg" autocomplete="off">
					<!-- 用戶輸入消息的文本輸入框 -->
					<button  class="chat-submit">
						<i class="fa-regular fa-paper-plane"></i>
					</button>
					<!-- 發送消息的按鈕 -->
				</div>
			</form>
		</div>
	</div>
</body>
</html>

有些不喜歡的東西可以換成自己喜歡的，像是發送消息的按鈕的圖案，機器人的圖片等等，我只是提供一個簡單的範例(我沒有什麼取名的天分，自己看了也有點頭痛
明天接著補充