Upload 5 files

app.py

@@ -0,0 +1,176 @@
+"""
+Flask backend for the chat assistance website.
+
+This application provides API endpoints for processing chat screenshots,
+manual text input, and generating response suggestions.
+"""
+import os
+import base64
+import json
+from flask import Flask, request, jsonify, send_file
+from flask_cors import CORS
+from werkzeug.utils import secure_filename
+from dotenv import load_dotenv
+from img2chat import img2chat
+from chat_analysis import get_suggestion
+
+# Load environment variables
+load_dotenv()
+
+# Initialize Flask app
+app = Flask(__name__)
+CORS(app)  # Enable CORS for all routes
+
+# Configure upload folder for images
+UPLOAD_FOLDER = 'uploads'
+ALLOWED_EXTENSIONS = {'png', 'jpg', 'jpeg', 'gif'}
+app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
+app.config['MAX_CONTENT_LENGTH'] = 16 * 1024 * 1024  # 16MB max upload size
+
+# Create uploads directory if it doesn't exist
+os.makedirs(UPLOAD_FOLDER, exist_ok=True)
+
+def allowed_file(filename):
+    """Check if the file extension is allowed"""
+    return '.' in filename and \
+           filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS
+
+def generate_response(chat_text):
+    """
+    Generate response suggestions based on chat text.
+    
+    Uses the get_suggestion function from chat_analysis.py to generate
+    response suggestions based on the provided chat text.
+    
+    Args:
+        chat_text (str): The chat text to analyze
+        
+    Returns:
+        dict: Analysis and response suggestions
+    """
+    # Get suggestion from chat_analysis module
+    suggestion_text = get_suggestion(chat_text)
+    
+    # Parse the XML response to extract suggestion and example
+    # The response format is expected to be:
+    # <suggestion>Suggestion text</suggestion><example>Example text</example>
+    
+    analysis = "分析中..."
+    suggestion = suggestion_text
+    
+    # Simple parsing of XML tags (could be improved with proper XML parsing)
+    if "<suggestion>" in suggestion_text and "</suggestion>" in suggestion_text:
+        start_idx = suggestion_text.find("<suggestion>") + len("<suggestion>")
+        end_idx = suggestion_text.find("</suggestion>")
+        analysis = suggestion_text[start_idx:end_idx].strip()
+    
+    if "<example>" in suggestion_text and "</example>" in suggestion_text:
+        start_idx = suggestion_text.find("<example>") + len("<example>")
+        end_idx = suggestion_text.find("</example>")
+        suggestion = suggestion_text[start_idx:end_idx].strip()
+    
+    return {
+        "analysis": analysis,
+        "suggestion": suggestion
+    }
+
+@app.route('/', methods=['GET'])
+def index():
+    """Serve the main HTML page"""
+    return send_file('index.html')
+
+@app.route('/api/health', methods=['GET'])
+def health_check():
+    """Health check endpoint"""
+    return jsonify({"status": "ok"})
+
+@app.route('/api/process-image', methods=['POST'])
+def process_image():
+    """
+    Process a chat screenshot and return analysis and suggestions.
+    
+    Accepts an image file or a base64 encoded image string.
+    """
+    try:
+        # Check if the post request has the file part
+        if 'file' in request.files:
+            file = request.files['file']
+            if file.filename == '':
+                return jsonify({"error": "No selected file"}), 400
+                
+            if file and allowed_file(file.filename):
+                filename = secure_filename(file.filename)
+                filepath = os.path.join(app.config['UPLOAD_FOLDER'], filename)
+                file.save(filepath)
+                
+                # Convert file to base64 for processing
+                with open(filepath, "rb") as image_file:
+                    base64_image = base64.b64encode(image_file.read()).decode('utf-8')
+                image_url = f"data:image/{filepath.split('.')[-1]};base64,{base64_image}"
+                
+                # Process the image
+                chat_text = img2chat(image_url)
+                
+                # Generate response suggestions
+                response_data = generate_response(chat_text)
+                
+                # Return the results
+                return jsonify({
+                    "chat_text": chat_text,
+                    "analysis": response_data["analysis"],
+                    "suggestion": response_data["suggestion"]
+                })
+            else:
+                return jsonify({"error": "File type not allowed"}), 400
+                
+        # Check if base64 image was provided
+        elif 'image_data' in request.json:
+            image_data = request.json['image_data']
+            
+            # Process the image
+            chat_text = img2chat(image_data)
+            
+            # Generate response suggestions
+            response_data = generate_response(chat_text)
+            
+            # Return the results
+            return jsonify({
+                "chat_text": chat_text,
+                "analysis": response_data["analysis"],
+                "suggestion": response_data["suggestion"]
+            })
+            
+        else:
+            return jsonify({"error": "No image provided"}), 400
+            
+    except Exception as e:
+        return jsonify({"error": str(e)}), 500
+
+@app.route('/api/process-text', methods=['POST'])
+def process_text():
+    """
+    Process manually entered chat text and return analysis and suggestions.
+    """
+    try:
+        data = request.json
+        
+        if not data or 'chat_text' not in data:
+            return jsonify({"error": "No chat text provided"}), 400
+            
+        chat_text = data['chat_text']
+        
+        # Generate response suggestions
+        response_data = generate_response(chat_text)
+        
+        # Return the results
+        return jsonify({
+            "analysis": response_data["analysis"],
+            "suggestion": response_data["suggestion"]
+        })
+        
+    except Exception as e:
+        return jsonify({"error": str(e)}), 500
+
+if __name__ == '__main__':
+    port = int(os.environ.get('PORT', 8080))
+    app.run(host='0.0.0.0', port=port, debug=True) 

chat_analysis.py

@@ -0,0 +1,49 @@
+"""
+Chat analysis module for generating response suggestions.
+
+This module provides functionality to generate response suggestions
+using OpenAI's GPT models.
+"""
+
+from openai import OpenAI
+
+
+def get_suggestion(user_input):
+    """
+    Generate a response suggestion based on user input.
+    
+    This function uses OpenAI's GPT model to generate a response suggestion
+    for a given user input. The response is formatted in XML with suggestion
+    and example tags.
+    
+    Args:
+        user_input (str): The user's input message
+        
+    Returns:
+        str: The generated response suggestion
+    """
+    client = OpenAI()
+    
+    completion = client.chat.completions.create(
+        model="gpt-4o",
+        messages=[
+            {
+                "role": "system", 
+                "content": "你是一個可以提供尊重對方且讓提問者開心的回覆的助手，"
+                           "使用者將會輸入對方的問題，回覆時請撇除預設立場且一定要給出回復不要轉移話題，"
+                           "可以偏愛提問者，要強調出他特殊的魅力。請使用XML格式，"
+                           "生成針對使用者的應對建議，以及實際舉例來回覆使用者訊息，"
+                           "使用<suggestion>和<example>標記來格式化你的回覆，<example>不超過30字"
+            },
+            {"role": "user", "content": user_input}
+        ]
+    )
+    
+    return completion.choices[0].message.content
+
+
+if __name__ == "__main__":
+    # Example usage
+    dialogue = "你喜歡過除了我以外的異性嗎"
+    response = get_suggestion(dialogue)
+    print(response)

img2chat.py

@@ -0,0 +1,96 @@
+"""
+Function to convert an image of chat to structured text using OpenAI's GPT-4o model.
+
+This module provides a function to process chat screenshots and convert them
+into structured text format using OpenAI's vision capabilities.
+"""
+import os
+import base64
+from dotenv import load_dotenv
+from openai import OpenAI
+
+# Load environment variables from .env file
+load_dotenv()
+
+def encode_image(image_path):
+    """
+    Encode an image file to base64.
+    
+    Args:
+        image_path (str): Path to the image file
+        
+    Returns:
+        str: Base64 encoded image string
+    """
+    with open(image_path, "rb") as image_file:
+        return base64.b64encode(image_file.read()).decode("utf-8")
+
+def img2chat(image_input):
+    """
+    Convert a chat screenshot to structured text using OpenAI's GPT-4o model.
+
+    This function takes either an image path or a base64 encoded image string
+    and uses OpenAI's GPT-4o model to extract the conversation in a structured format.
+
+    Args:
+        image_input (str): Either a file path to an image, a URL, or a base64 encoded image
+
+    Returns:
+        str: The structured chat text extracted from the image
+    """
+    # Initialize OpenAI client with API key from environment variable
+    client = OpenAI(api_key=os.getenv("OPENAI_API_KEY"))
+    
+    # Determine if the input is a file path, URL, or base64 string
+    if os.path.isfile(image_input):
+        # It's a file path, encode it to base64
+        base64_image = encode_image(image_input)
+        image_url = f"data:image/jpeg;base64,{base64_image}"
+    elif image_input.startswith("data:image"):
+        # It's already a base64 data URL
+        image_url = image_input
+    elif image_input.startswith("http"):
+        # It's a URL
+        image_url = image_input
+    else:
+        # Assume it's a raw base64 string
+        image_url = f"data:image/jpeg;base64,{image_input}"
+
+    response = client.chat.completions.create(
+        model="gpt-4o",
+        messages=[
+            {
+                "role": "system",
+                "content": "你是一位善於將對話的聊天紀錄的截圖，還原成文本結構的聊天資訊的專家。"
+                           "對於收到的每一張截圖，請仔細閱讀他們的聊天紀錄，左側的訊息表示其他人傳的訊息、"
+                           "右邊則是用戶傳的訊息，將聊天紀錄的截圖轉換成文本格式的聊天。"
+                           "請依照訊息的時間順序，由舊到新的順序，使用XML的格式來輸出聊天紀錄，"
+                           "<usr>表示使用者的聊天對象的訊息、<self>表示使用者傳的訊息，"
+                           "最多只能有chat、usr這種二級結構，"
+                           "例如<chat><usr>你好你好</usr><usr>哈囉哈囉</usr></chat>\n\n"
+                           "務必要確保忠時的還原使用者的對話紀錄，並且忽略聊天室中像是圖片、音訊等非文字的資訊。"
+                           "並使用<chat></chat>為標記，包裹整段的聊天資訊。如果你解析不出任何訊息，輸出<chat></chat>就好。"
+            },
+            {
+                "role": "user",
+                "content": [
+                    {"type": "text", "text": "請分析這張聊天截圖並轉換成文本格式:"},
+                    {
+                        "type": "image_url",
+                        "image_url": {
+                            "url": image_url,
+                        }
+                    }
+                ]
+            }
+        ],
+        max_tokens=913,
+    )
+
+    return response.choices[0].message.content
+
+
+if __name__ == "__main__":
+    # Example usage with a file path
+    print("\nExample with file path:")
+    print(img2chat("tst_img/tst1.png"))

index.html

@@ -0,0 +1,557 @@
+<!DOCTYPE html>
+<html lang="zh">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;700&display=swap" rel="stylesheet">
+    <title>聊天助手</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Sans', sans-serif;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            background-color: #f5f5f5;
+        }
+        
+        select {
+            width: 20%;
+            padding: 12px 15px;
+            font-size: 18px;
+            border: 1px solid #ddd;
+            border-radius: 8px;
+            background-color: #fafafa;
+            color: #333;
+            cursor: pointer;
+            box-sizing: border-box;
+        }
+        
+        select:focus {
+            border-color: #007bff;
+            outline: none;
+        }
+        
+        option {
+            padding: 10px;
+        }
+        
+        .chatbox {
+            height: fit-content;
+            width: 80%;
+            background-color: white;
+            border-radius: 20px;
+            margin-top: 10px;
+            margin-bottom: 10px;
+        }
+        
+        .myInputArea {
+            display: flex;
+            justify-content: center;
+            margin-top: 10px;
+        }
+        
+        .myMessageArea {
+            display: flex;
+            justify-content: flex-end;
+            margin-top: 10px;
+        }
+        
+        .GPTmessageArea {
+            display: flex;
+            justify-content: flex-start;
+            margin-top: 10px;
+        }
+        
+        .myMessageBox {
+            height: fit-content;
+            width: fit-content;
+            margin: 10px;
+            padding: 10px;
+            border-radius: 10px;
+            background-color: rgb(195, 252, 233);
+        }
+        
+        .GPTmessageBox {
+            height: fit-content;
+            width: fit-content;
+            margin: 10px;
+            padding: 10px;
+            border-radius: 10px;
+            background-color: rgb(252, 206, 238);
+        }
+        
+        .myInputBox {
+            height: fit-content;
+            width: 70%;
+            margin: 10px;
+            padding: 10px;
+            border-radius: 10px;
+            background-color: #f5f5f5;
+        }
+        
+        .addMessageButton {
+            width: 35px;
+            height: 35px;
+            font-size: 15px;
+            font-weight: bold;
+            border: solid 1px #a7a7a7;
+            border-radius: 10px;
+            background-color: white;
+            cursor: pointer;
+        }
+        
+        .sendMessageButton {
+            background-color: #007bff;
+            /* 藍色 */
+            color: white;
+            font-size: 16px;
+            padding: 10px 20px;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            transition: background 0.3s;
+        }
+        
+        .sendMessageButton:hover {
+            background-color: #0056b3;
+        }
+        
+        .addMessageButton:hover {
+            background-color: rgb(209, 209, 209);
+        }
+        
+        .messagePending {
+            margin-left: 5px;
+            width: 70%;
+            padding: 12px 15px;
+            font-size: 16px;
+            border: 2px solid #ccc;
+            border-radius: 8px;
+            background-color: #fafafa;
+            color: #333;
+            outline: none;
+            box-sizing: border-box;
+            transition: border 0.3s ease, box-shadow 0.3s ease;
+        }
+        
+        .messagePending:focus {
+            border-color: #007bff;
+            box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
+        }
+        
+        .messagePending::placeholder {
+            color: #888;
+            font-style: italic;
+        }
+        
+        #imgInputBox {
+            width: 100%;
+            border: solid 1px #a7a7a7;
+            border-radius: 10px;
+            height: 50px;
+        }
+        
+        #textInputBox {
+            margin-top: 10px;
+            width: 100%;
+            border: solid 1px #a7a7a7;
+            border-radius: 10px;
+            height: 200px;
+            padding: 10px;
+            overflow: auto;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="chatbox" class="chatbox">
+
+        <!--對話輸入框-->
+        <div class="myInputArea">
+            <div class="myInputBox">
+                <div id="imgInputBox">
+                    <div style="display: flex; justify-content: center; align-items: center; height: 100%;">
+                        <input type="file" id="imageUpload" accept="image/*" style="display: none;">
+                        <button onclick="document.getElementById('imageUpload').click()" style="padding: 5px 10px; background-color: #f0f0f0; border: 1px solid #ccc; border-radius: 5px; cursor: pointer;">選擇圖片</button>
+                        <span id="selectedFileName" style="margin-left: 10px; font-size: 14px;"></span>
+                    </div>
+                </div>
+                <div style="text-align: center;">
+                    或
+                </div>
+                <div id="textInputBox">
+                    <!--已建立的訊息填寫框-->
+                    <div style="display: flex;flex-wrap: nowrap;justify-content: end; margin-top: 10px;">
+                        <select id="character0" name="character">
+                            <option value="self">自己</option>
+                            <option value="usr">對方</option>
+                        </select>
+                        <input type="text" id="messagePending0" name="messagePending" class="messagePending">
+                    </div>
+
+                    <!--建立新的訊息填寫框-->
+                    <div style="display: flex;justify-content: end; margin-top: 10px;">
+                        <button class="addMessageButton" onclick="addMessageBox()">+</button>
+                    </div>
+                </div>
+                <!--傳送訊息-->
+                <div style="display: flex;justify-content: end;margin-top: 10px;">
+                    <button class="sendMessageButton" onclick="sendMessage()">傳送</button>
+                </div>
+            </div>
+        </div>
+
+        <!--對話紀錄-我方-->
+        <!--
+        <div class="myMessageArea">
+            <div class="myMessageBox">
+                <p>這是我傳的訊息或圖片</p>
+            </div>
+        </div>
+
+        
+        <div class="GPTmessageArea">
+            <div class="GPTmessageBox">
+                <p>這是GPT傳的訊息</p>
+            </div>
+        </div>
+        -->
+    </div>
+
+    <script>
+        let messageCount = 1; // 記錄訊息框數量
+        let selectedImage = null; // 儲存選擇的圖片
+
+        // 當頁面載入完成後，添加事件監聽器
+        document.addEventListener('DOMContentLoaded', function() {
+            // 為圖片上傳添加事件監聽器
+            const imageUpload = document.getElementById('imageUpload');
+            if (imageUpload) {
+                imageUpload.addEventListener('change', handleImageSelect);
+            }
+        });
+
+        // 處理圖片選擇
+        function handleImageSelect(event) {
+            const file = event.target.files[0];
+            if (file) {
+                selectedImage = file;
+                document.getElementById('selectedFileName').textContent = file.name;
+
+                // 選擇圖片後立即上傳，不需要額外的上傳按鈕
+                uploadImage();
+            }
+        }
+
+        // 上傳圖片到伺服器
+        function uploadImage() {
+            if (!selectedImage) {
+                alert('請先選擇一張圖片');
+                return;
+            }
+
+            const formData = new FormData();
+            formData.append('file', selectedImage);
+
+            // 暫時刪除 myInputArea
+            const myInputArea = document.querySelector(".myInputArea");
+            if (myInputArea) {
+                myInputArea.remove();
+            }
+
+            // 新增 myMessageArea (顯示上傳的圖片)
+            const chatbox = document.getElementById("chatbox");
+            const myMessageArea = document.createElement("div");
+            myMessageArea.className = "myMessageArea";
+            myMessageArea.innerHTML = `
+                <div class="myMessageBox">
+                    <p>上傳的圖片: ${selectedImage.name}</p>
+                </div>
+            `;
+            chatbox.appendChild(myMessageArea);
+
+            // 新增 GPTmessageArea (初始內容: 等待回應...)
+            const GPTmessageArea = document.createElement("div");
+            GPTmessageArea.className = "GPTmessageArea";
+            GPTmessageArea.innerHTML = `
+                <div class="GPTmessageBox">
+                    <p>(等待回應......)</p>
+                </div>
+            `;
+            chatbox.appendChild(GPTmessageArea);
+
+            // 發送 API 請求
+            fetch('/api/process-image', {
+                    method: 'POST',
+                    body: formData
+                })
+                .then(response => {
+                    if (!response.ok) {
+                        throw new Error(`HTTP error! Status: ${response.status}`);
+                    }
+                    return response.json();
+                })
+                .then(data => {
+                    console.log("Server Response:", data);
+
+                    // 確保回應包含 analysis 和 suggestion
+                    const analysis = data.analysis || "無分析";
+                    const suggestion = data.suggestion || "無建議";
+                    const chatText = data.chat_text || "";
+
+                    // 處理 chatText，去掉外層的 <chat> 標記
+                    let formattedChatText = chatText;
+                    if (formattedChatText.startsWith("<chat>") && formattedChatText.endsWith("</chat>")) {
+                        formattedChatText = formattedChatText.substring(6, formattedChatText.length - 7);
+                    }
+
+                    // 先顯示識別的聊天內容
+                    GPTmessageArea.innerHTML = `
+                    <div class="GPTmessageBox">
+                        <p><strong>識別的聊天內容：</strong><br>${formattedChatText}</p>
+                    </div>
+                    `;
+
+                    // 創建新的 GPTmessageArea 來顯示分析和建議
+                    const analysisArea = document.createElement("div");
+                    analysisArea.className = "GPTmessageArea";
+                    analysisArea.innerHTML = `
+                        <div class="GPTmessageBox">
+                            <p><strong>分析：</strong><br>${analysis}</p>
+                            <p><strong>建議回覆：</strong><br>${suggestion}</p>
+                        </div>
+                    `;
+                    chatbox.appendChild(analysisArea);
+                })
+                .catch(error => {
+                    console.error("Error uploading image:", error);
+                    GPTmessageArea.innerHTML = `
+                    <div class="GPTmessageBox">
+                        <p>（錯誤：無法取得回應）</p>
+                        <p>錯誤詳情：${error.message}</p>
+                    </div>
+                `;
+                })
+                .finally(() => {
+                    // 重新新增 myInputArea
+                    resetInputArea();
+                });
+        }
+
+        // 重設輸入區域
+        function resetInputArea() {
+            const chatbox = document.getElementById("chatbox");
+            const newMyInputArea = document.createElement("div");
+            newMyInputArea.className = "myInputArea";
+            newMyInputArea.innerHTML = `
+                <div class="myInputBox">
+                    <div id="imgInputBox">
+                        <div style="display: flex; justify-content: center; align-items: center; height: 100%;">
+                            <input type="file" id="imageUpload" accept="image/*" style="display: none;">
+                            <button onclick="document.getElementById('imageUpload').click()" style="padding: 5px 10px; background-color: #f0f0f0; border: 1px solid #ccc; border-radius: 5px; cursor: pointer;">選擇圖片</button>
+                            <span id="selectedFileName" style="margin-left: 10px; font-size: 14px;"></span>
+                        </div>
+                    </div>
+                    <div style="text-align: center;">
+                        或
+                    </div>
+                    <div id="textInputBox">
+                        <!--已建立的訊息填寫框-->
+                        <div style="display: flex;flex-wrap: nowrap;justify-content: end; margin-top: 10px;">
+                            <select id="character0" name="character">
+                                <option value="self">自己</option>
+                                <option value="usr">對方</option>
+                            </select>
+                            <input type="text" id="messagePending0" name="messagePending" class="messagePending">
+                        </div>
+
+                        <!--建立新的訊息填寫框-->
+                        <div style="display: flex;justify-content: end; margin-top: 10px;">
+                            <button class="addMessageButton" onclick="addMessageBox()">+</button>
+                        </div>
+                    </div>
+                    <!--傳送訊息-->
+                    <div style="display: flex;justify-content: end;margin-top: 10px;">
+                        <button class="sendMessageButton" onclick="sendMessage()">傳送</button>
+                    </div>
+                </div>
+            `;
+            chatbox.appendChild(newMyInputArea);
+
+            // 重新添加事件監聽器
+            const imageUpload = document.getElementById('imageUpload');
+            if (imageUpload) {
+                imageUpload.addEventListener('change', handleImageSelect);
+            }
+
+            // 重設選擇的圖片
+            selectedImage = null;
+            messageCount = 1;
+        }
+
+        // 添加新的訊息填寫框
+        function addMessageBox() {
+            const newMessageBox = document.createElement('div');
+            newMessageBox.style.display = "flex";
+            newMessageBox.style.justifyContent = "end";
+            newMessageBox.style.marginTop = "10px";
+
+            // 新增一個X按鈕
+            const deleteButton = document.createElement('button');
+            deleteButton.innerText = 'X';
+            deleteButton.style.marginRight = '10px';
+            deleteButton.style.cursor = 'pointer';
+            deleteButton.style.background = 'red';
+            deleteButton.style.color = 'white';
+            deleteButton.style.border = 'none';
+            deleteButton.style.borderRadius = '50%';
+            deleteButton.style.width = '25px';
+            deleteButton.style.height = '25px';
+            deleteButton.style.textAlign = 'center';
+            deleteButton.style.fontSize = '16px';
+
+            // 點擊刪除按鈕時刪除對應的訊息框
+            deleteButton.addEventListener('click', function() {
+                newMessageBox.remove();
+            });
+
+            // 設定新增訊息框的內容
+            newMessageBox.innerHTML = `
+                <select id="character${messageCount}" name="character">
+                    <option value="self">自己</option>
+                    <option value="usr">對方</option>
+                </select>
+                <input type="text" id="messagePending${messageCount}" name="messagePending" class="messagePending">
+            `;
+
+            // 在訊息框前插入X按鈕
+            newMessageBox.insertBefore(deleteButton, newMessageBox.firstChild);
+
+            // 把新的訊息框插入到#textInputBox
+            document.getElementById('textInputBox').insertBefore(newMessageBox, document.querySelector('.addMessageButton').parentNode);
+            messageCount++;
+        }
+
+        function sendMessage() {
+            let result = "<chat>";
+            let formattedMessage = ""; // 用於顯示在 myMessageArea 的格式化文字
+
+            for (let i = 0; i < messageCount; i++) {
+                try {
+                    const character = document.getElementById(`character${i}`);
+                    const messageElement = document.getElementById(`messagePending${i}`);
+                    if (!character || !messageElement) continue; // 跳過已刪除的元素
+
+                    const message = messageElement.value.trim();
+                    if (message) {
+                        result += `<${character.value}>${message}</${character.value}>`;
+                        formattedMessage += `${character.value === 'self' ? "您" : "對方"}: ${message}<br>`; // **換行**
+                    }
+                } catch (error) {
+                    console.warn(`Message box ${i} does not exist. Skipping.`);
+                    continue;
+                }
+            }
+            result += "</chat>";
+
+            // **1. 暫時刪除 myInputArea**
+            const myInputArea = document.querySelector(".myInputArea");
+            if (myInputArea) {
+                myInputArea.remove();
+            }
+
+            // **2. 新增 myMessageArea (符合提供的 HTML 結構)**
+            const chatbox = document.getElementById("chatbox");
+            const myMessageArea = document.createElement("div");
+            myMessageArea.className = "myMessageArea";
+            myMessageArea.innerHTML = `
+                <div class="myMessageBox">
+                    <p>${formattedMessage}</p>
+                </div>
+            `;
+            chatbox.appendChild(myMessageArea);
+
+            // **3. 新增 GPTmessageArea (初始內容: 等待回應...)**
+            const GPTmessageArea = document.createElement("div");
+            GPTmessageArea.className = "GPTmessageArea";
+            GPTmessageArea.innerHTML = `
+                <div class="GPTmessageBox">
+                    <p>(等待回應......)</p>
+                </div>
+            `;
+            chatbox.appendChild(GPTmessageArea);
+
+            // **4. 傳送 API 請求**
+            const data = {
+                chat_text: result
+            };
+            fetch('/api/process-text', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify(data)
+                })
+                .then(response => {
+                    if (!response.ok) {
+                        throw new Error(`HTTP error! Status: ${response.status}`);
+                    }
+                    return response.json();
+                })
+                .then(data => {
+                    console.log("Server Response:", data);
+
+                    // 確保回應包含 analysis 和 suggestion
+                    const analysis = data.analysis || "無分析";
+                    const suggestion = data.suggestion || "無建議";
+
+                    // 處理 result，去掉外層的 <chat> 標記
+                    let formattedChatText = result;
+                    if (formattedChatText.startsWith("<chat>") && formattedChatText.endsWith("</chat>")) {
+                        formattedChatText = formattedChatText.substring(6, formattedChatText.length - 7);
+                    }
+
+                    // 先顯示原始聊天文本
+                    GPTmessageArea.innerHTML = `
+                    <div class="GPTmessageBox">
+                        <p><strong>識別的聊天內容：</strong><br>${formattedChatText}</p>
+                    </div>
+                    `;
+
+                    // 創建新的 GPTmessageArea 來顯示分析和建議
+                    const analysisArea = document.createElement("div");
+                    analysisArea.className = "GPTmessageArea";
+                    analysisArea.innerHTML = `
+                        <div class="GPTmessageBox">
+                            <p><strong>分析：</strong><br>${analysis}</p>
+                            <p><strong>建議回覆：</strong><br>${suggestion}</p>
+                        </div>
+                    `;
+                    chatbox.appendChild(analysisArea);
+                })
+                .catch(error => {
+                    console.error("Error sending message:", error);
+                    GPTmessageArea.innerHTML = `
+                    <div class="GPTmessageBox">
+                        <p>（錯誤：無法取得回應）</p>
+                        <p>錯誤詳情：${error.message}</p>
+                    </div>
+                `;
+                })
+                .finally(() => {
+                    // 使用重設輸入區域函數
+                    resetInputArea();
+                });
+        }
+    </script>
+</body>
+
+</html>

requirements.txt

@@ -0,0 +1,6 @@
+flask==2.3.3
+flask-cors==4.0.0
+python-dotenv==1.0.0
+openai==1.3.0
+werkzeug==2.3.7
+gunicorn==21.2.0