# Please install OpenAI SDK first: `pip3 install openai`

from openai import OpenAI

client = OpenAI(api_key="<DeepSeek API Key>", base_url="https://api.deepseek.com")

response = client.chat.completions.create(
    model="deepseek-chat",
    messages=[
        {"role": "system", "content": "You are a helpful assistant"},
        {"role": "user", "content": "Hello"},
    ],
    stream=False
)

print(response.choices[0].message.content)

from flask import Flask, request, jsonify
from flask_cors import CORS
from openai import OpenAI
import json

app = Flask(__name__)
cors = CORS(app)  # 這將允許所有域的跨域請求

# 配置OpenAI客戶端
openai_client = OpenAI(api_key="你的deepseek的key", base_url="https://api.deepseek.com")

# 系統(tǒng)提示（用于OpenAI API交互）
system_prompt = "你是一位唐朝大詩人李白，你只能回答李白相關的問題，超出李白范圍的友好提示。"

# 用戶內容（這里可以固定，也可以從GET請求的參數中獲取，但為了簡化，我們固定它）
# 注意：在實際應用中，用戶內容應該從請求參數中安全地獲取和處理
# user_content = "輸出一首關于月亮的李白風格的詩"

@app.route('/generate_text/<user_content>', methods=['GET'])
def generate_text(user_content):
    try:
        # 與OpenAI API交互，生成文本
        response = openai_client.chat.completions.create(
            model="deepseek-chat",
            messages=[
                {"role": "system", "content": system_prompt},
                {"role": "user", "content": user_content},
            ],
            stream=False
        )
        
        # 從響應中提取生成的文本（這里假設響應結構是已知的）
        generated_text = response.choices[0].message.content

        # 默認輸出的是編碼值：\u300a\u6708\u4e0b\u72ec\u914c\u300b
        
        # 返回生成的文本作為API的響應
        #return jsonify(json.loads(json.dumps({"generated_text": generated_text})))
        return jsonify({"generated_text": generated_text})
    except Exception as e:
        # 在出現異常時返回錯誤信息
        return jsonify({"error": str(e)}), 500

if __name__ == '__main__':
    app.run(debug=True)

<template>
	<div class="chat-interface">
		<el-card shadow="hover">
		<div class="chat-history">
			<div v-for="(message, index) in messages" :key="index" class="chat-message">
			<div :class="{'message-user': message.type === 'user', 'message-bot': message.type === 'bot'}">
				<span class="avatar" :style="{ backgroundColor: message.type === 'user' ? '#409EFF' : '#F56C6C' }">
					{{ message.type === 'user' ? '我' : '李白' }}
				</span>
				<div class="content">
				{{ message.content }}
				</div>
			</div>
			</div>
		</div>
		<div class="input-area">
			<el-input v-model="userInput" placeholder="輸入你的問題" class="input-box" clearable></el-input>
			<el-button type="primary" @click="sendMessage" :loading="loadingFlag">發(fā)送</el-button>
		</div>
		</el-card>
	</div>
</template>

<script setup lang="ts" name="batchPortfolio">
import { ref } from 'vue';
import axios from 'axios';

const loadingFlag=ref(false)
const userInput = ref('');
const messages: { type: 'user' | 'bot'; content: string }[]= ref([]);

const sendMessage = async () => {
	if (userInput.value.trim()) {
		messages.value.push({ type: 'user', content: `${userInput.value}` });

		loadingFlag.value=true;
		const response = await axios.get(`http://127.0.0.1:5000/generate_text/${userInput.value}`);
		loadingFlag.value=false;
		// 機器人回復
		setTimeout(() => {
			messages.value.push({ type: 'bot', content: `${response.data.generated_text}` });
		}, 100);
		
		// // 模擬機器人回復
		// setTimeout(() => {
		// 	messages.value.push({ type: 'bot', content: `機器人回復: ${userInput.value.split(' ').join(' ')} 的回復` });
		// }, 1000);

		userInput.value = '';
	}
};

</script>

<style scoped lang="scss">
.chat-interface {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  background-color: #fff;
}

.chat-history {
  padding: 16px;
  overflow-y: auto;
  max-height: 400px;
  border-bottom: 1px solid #ebeef5;
}

.chat-message {
  margin-bottom: 16px;
  align-items: center;
}

.message-user {
  display: flex;
  align-items: center;
  justify-content: flex-end;

	line-height: 40px;
	text-align: center;
	color: #fff;
}
.message-bot {
  display: flex;
  align-items: center;

	line-height: 40px;
	text-align: center;
	color: #fff;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 12px;
}

.message-user .avatar {
  background-color: #409EFF;
}

.message-bot .avatar {
  background-color: #F56C6C;
}

.content {
  max-width: calc(100% - 52px); /* 40px avatar + 12px margin */
  padding: 8px 16px;
  border-radius: 4px;
  background-color: #f0f0f0;
  color: #333;
}

.message-bot .content {
  background-color: #fff3e0;
  justify-content: flex-start;
}

.message-user .content {
  background-color: #e6f7ff;
}

.input-area {
  display: flex;
  padding: 16px;
  border-top: 1px solid #ebeef5;
}

.input-box {
  flex: 1;
  border-radius: 4px;
}

.el-button {
  margin-left: 12px;
}


</style>