Update app.py

app.py

@@ -1,76 +1,336 @@
 import gradio as gr
 from openai import OpenAI
 import os
+import time
 
-# 修复格式问题的预测函数
+# 存储用户回答的全局字典
+user_profile = {
+    "mode": None,
+    "age": None,
+    "degree": None,
+    "interests": None,
+    "mbti": None,
+    "specific_career": None  # 用于Backward模式时存储具体职业方向
+}
+
+# 问题列表
+base_questions = [
+    ("mode", "你是否有心仪的职业方向？\n- 如果有，请回复'是'（Backward模式：我们将帮你设计实现该目标的路径）\n- 如果没有，请回复'否'（Forward模式：我们将根据你的背景推荐合适的职业）"),
+    ("age", "你的年龄范围是？（例如：'18岁以下'，'18-21岁'，'21-25岁'，'25-29岁'，'30岁以上'）"),
+    ("degree", "你目前的学历是什么？（例如：'本科在读'，'本科毕业'，'硕士在读'，'博士'）"),
+    ("interests", "请列出几个你的兴趣爱好，用逗号分隔。（例如：编程，心理学，设计）"),
+    ("mbti", "你的MBTI人格类型是什么？（例如：INFP，INTJ，ENFP等）如果不知道，可以回复'不知道'")
+]
+
+# 全局变量存储当前问题索引和问题列表
+current_q_index = 0
+questions = base_questions.copy()
+
+# 默认值
+system_prompt_default = "你是一位专业的职业规划顾问，帮助学生规划他们的职业路径。"
+model_default = "gpt-4o"
+temp_default = 0.7
+top_p_default = 0.95
+token_default = 2000
+
+# 函数：生成系统提示
+def generate_system_prompt():
+    mode = user_profile["mode"]
+    age = user_profile["age"] 
+    degree = user_profile["degree"]
+    interests = user_profile["interests"]
+    mbti = user_profile["mbti"]
+    specific_career = user_profile.get("specific_career")
+    
+    if mode and "是" in mode:  # Backward 模式
+        prompt = f"""
+你是一位专业的职业规划顾问，使用"Backward Design"方法帮助学生规划他们的职业路径。
+
+学生个人资料:
+- 年龄: {age}
+- 学历: {degree}
+- 兴趣爱好: {interests}
+- MBTI类型: {mbti}
+- 目标职业: {specific_career}
+
+请分析学生提出的职业方向：
+1. 提供该职业的简要分析
+2. 列出该领域排名靠前的组织/公司
+3. 分析该职业所需的技能和能力
+4. 描述职业发展和上升空间
+
+然后，基于学生的学术背景，请提供以下方面的具体建议：
+1. 专业选择建议（是否需要转专业、双学位等）
+2. 推荐的选课方向及理由
+3. 需要学习的关键技能
+4. 必要的资格认证或考试
+5. 如何利用学校资源（社团、项目、教授等）
+6. 实习和经验积累策略（包括人脉拓展建议）
+7. 简历优化建议
+
+最后，请用Markdown格式提供清晰的职业路线图，格式如下：
+```
+📍 现在: [当前状态]
+🎓 [时间点]: [建议行动，如选修特定课程]
+💼 [时间点]: [建议行动，如申请实习]
+📄 [时间点]: [建议行动，如获取认证]
+🚀 [时间点]: [建议行动，如目标职位申请]
+```
+"""
+    else:  # Forward 模式
+        prompt = f"""
+你是一位专业的职业规划顾问，使用"Forward Design"方法帮助学生探索适合的职业路径。
+
+学生个人资料:
+- 年龄: {age}
+- 学历: {degree}
+- 兴趣爱好: {interests}
+- MBTI类型: {mbti}
+
+请根据学生的背景和个人资料进行分析：
+1. 总结学生的优势和劣势
+2. 分析学生的性格特点和职业适配性
+3. 基于学生的学历背景、兴趣爱好和性格特点，推荐6个可能适合的职业大方向
+
+请以对话形式呈现，让学生从这6个方向中选择1-2个他们最感兴趣的方向。
+
+当学生选择了特定方向后，请进一步推荐3个具体职业，并针对每个职业提供：
+1. 职业描述和日常工作内容
+2. 该职业对学生的适合度分析
+3. 入行门槛和要求
+4. 详细的准备步骤，包括：
+   - 推荐的选课方向
+   - 必要的技能培训
+   - 资格认证或考试
+   - 如何利用学校资源
+   - 实习和经验积累建议
+   - 简历优化方向
+
+最后，为学生选择的职业方向提供一个清晰的Markdown格式职业路线图：
+```
+📍 现在: [当前状态]
+🎓 [时间点]: [建议行动，如选修特定课程]
+💼 [时间点]: [建议行动，如申请实习]
+📄 [时间点]: [建议行动，如获取认证]
+🚀 [时间点]: [建议行动，如目标职位申请]
+```
+"""
+    return prompt
+
+# 预测函数
 def predict(message, history):
+    global current_q_index, questions
+    
+    # 如果是第一次交互，重置问题索引和用户资料
+    if not history:
+        current_q_index = 0
+        for key in user_profile:
+            user_profile[key] = None
+        questions = base_questions.copy()
+    
+    # 处理当前问题的回答
+    if current_q_index > 0 and current_q_index <= len(questions):
+        key = questions[current_q_index - 1][0]
+        user_profile[key] = message.strip()
+        
+        # 如果模式是Backward(是)且刚刚回答了模式��题，添加额外的具体职业方向问题
+        if key == "mode" and "是" in user_profile["mode"]:
+            questions.insert(1, ("specific_career", "请具体描述你想要从事的职业方向。"))
+    
+    # 如果还有问题要问
+    if current_q_index < len(questions):
+        question = questions[current_q_index][1]
+        current_q_index += 1
+        return question
+    
+    # 所有问题都回答完了，生成个性化回复
     try:
         # 初始化OpenAI客户端
         api_key = os.environ.get("API_TOKEN")
         if not api_key:
-            return history + [["错误：API密钥未设置", ""]]
+            return "错误：API密钥未设置，请在Space设置中添加名为API_TOKEN的Secret。"
             
         client = OpenAI(api_key=api_key)
         
-        # 构建消息列表，包含历史记录
-        messages = [{"role": "system", "content": "你是一个有用的AI助手。"}]
+        # 生成系统提示
+        system_prompt = generate_system_prompt()
         
-        # 添加历史消息
-        for user_msg, bot_msg in history:
-            messages.append({"role": "user", "content": user_msg})
-            messages.append({"role": "assistant", "content": bot_msg})
+        # 构建消息
+        messages = [
+            {"role": "system", "content": system_prompt},
+            {"role": "user", "content": f"根据我提供的信息，请给我职业规划建议。我的回答是：{user_profile}. {message}"}
+        ]
         
-        # 添加当前用户消息
-        messages.append({"role": "user", "content": message})
-        
-        # 非流式调用
+        # 调用API
         response = client.chat.completions.create(
-            model="gpt-4o",
+            model=model_default,
             messages=messages,
-            max_tokens=1000,
-            temperature=0.7,
+            max_tokens=token_default,
+            temperature=temp_default,
+            top_p=top_p_default,
             stream=False
         )
         
-        bot_response = response.choices[0].message.content
-        
-        # 返回新的历史记录，添加当前交互
-        return history + [[message, bot_response]]
+        return response.choices[0].message.content
     except Exception as e:
-        # 出错时也保持正确的格式
-        return history + [[message, f"发生错误: {str(e)}"]]
+        return f"发生错误: {str(e)}"
 
-# 创建简化版界面
+# 创建自定义界面
 with gr.Blocks(css="""
+    body {
+        background-color: #1e1e1e;
+        color: #ffffff;
+    }
+
+    .gradio-container {
+        font-family: 'Segoe UI', sans-serif;
+    }
+
+    .gr-chatbot {
+        background-color: transparent !important;
+    }
+
+    .message.user {
+        background-color: #cce6ff !important;   /* Much lighter blue */
+        color: #000000 !important;
+        border-radius: 10px !important;
+        padding: 10px;
+        margin: 6px;
+    }
+
+    .message.bot {
+        background-color: #99ccff !important;   /* Lighter blue */
+        color: #000000 !important;
+        border-radius: 10px !important;
+        padding: 10px;
+        margin: 6px;
+    }
+
+    .gr-button {
+        border-radius: 8px;
+    }
+
     #custom-send {
         background-color: #ec4899 !important;
         color: white !important;
         border-radius: 999px !important;
         padding: 10px 24px !important;
         font-weight: bold;
+        box-shadow: 0 0 10px #ec4899;
+        transition: all 0.3s ease-in-out;
     }
-    
+
+    #custom-send:hover {
+        background-color: #d63384 !important;
+        box-shadow: 0 0 12px #ec4899;
+    }
+
+    textarea, input {
+        background-color: #ffe4f1 !important;
+        color: #5e2c49 !important;
+        border: 1px solid #ec4899 !important;
+    }
+
     footer {
         display: none !important;
     }
 """) as demo:
-    gr.HTML("""
-    <div style='text-align: center; margin-bottom: 10px;'>
-    <h1 style='color:white; font-size: 28px; margin-bottom: 6px;'>🎓 AI Career Assistant</h1>
-    </div>
+
+    with gr.Row():
+        gr.HTML("""
+        <div style='display: flex; align-items: center; justify-content: center; gap: 20px; margin-bottom: 10px;'>
+        <!-- 左侧动图 -->
+         <img src='https://media3.giphy.com/media/v1.Y2lkPTc5MGI3NjExMmFucGwxbmNsd3J5NXV0Y282NXNtMzNsZW5jMm4wNWh6c2dqbXIwdiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/l41m18LjqpzxUr2WA/giphy.gif' width='200' style='border-radius: 12px; box-shadow: 0 0 10px #ec4899;'>
+
+        <!-- 右侧标题 -->
+       <div style='text-align: left;'>
+        <h1 style='color:white; font-size: 36px; margin-bottom: 6px;'>🎓 AI职业规划助手</h1>
+        <p style='font-size: 18px; font-weight:bold; color:#ec4899; margin-top: 0;margin-left: 150px'>让梦想照进现实 💖</p>
+       </div>
+       </div>
+        """)
+        
+    # 添加说明文本
+    gr.Markdown("""
+    **📝 个性化职业规划助手**
+    
+    我将通过5个简单问题了解你的背景，然后为你提供量身定制的职业规划建议。
+    
+    **两种模式：**
+    - **Forward模式**：如果你还不确定职业方向，我会根据你的背景推荐合适的职业
+    - **Backward模式**：如果你已有明确职业目标，我会帮你规划实现该目标的路径
+    
+    请回答下面的问题，开始你的职业规划之旅！
     """)
     
-    chatbot = gr.Chatbot()
-    msg = gr.Textbox(placeholder="输入你的问题...", show_label=False)
-    clear = gr.Button("清除对话")
+    # 创建聊天界面
+    chatbot = gr.Chatbot(
+        height=500,
+        bubble_full_width=False,
+        show_label=False,
+        show_copy_button=True
+    )
+    
+    # 输入框和按钮
+    with gr.Row():
+        with gr.Column(scale=8):
+            msg = gr.Textbox(
+                placeholder="请在这里输入你的回答...",
+                show_label=False,
+                container=False
+            )
+        
+        with gr.Column(scale=1):
+            submit_btn = gr.Button("🚀 发送", elem_id="custom-send")
+    
+    # 重置按钮
+    with gr.Row():
+        reset_btn = gr.Button("🔄 重新开始")
+    
+    # 处理事件
+    submit_btn.click(
+        fn=lambda message, history: ("", history + [[message, None]]),
+        inputs=[msg, chatbot],
+        outputs=[msg, chatbot],
+        queue=False
+    ).then(
+        fn=predict,
+        inputs=[chatbot.get_value()[-1][0], chatbot.get_value()[:-1]],
+        outputs=[chatbot.get_value()[-1][1]]
+    )
+    
+    msg.submit(
+        fn=lambda message, history: ("", history + [[message, None]]),
+        inputs=[msg, chatbot],
+        outputs=[msg, chatbot],
+        queue=False
+    ).then(
+        fn=predict,
+        inputs=[chatbot.get_value()[-1][0], chatbot.get_value()[:-1]],
+        outputs=[chatbot.get_value()[-1][1]]
+    )
+    
+    # 重置功能
+    def reset_conversation():
+        global current_q_index, questions
+        current_q_index = 0
+        questions = base_questions.copy()
+        for key in user_profile:
+            user_profile[key] = None
+        return []
     
-    send_btn = gr.Button("发送", elem_id="custom-send")
+    reset_btn.click(
+        fn=reset_conversation,
+        inputs=None,
+        outputs=chatbot,
+        queue=False
+    )
     
-    # 重要：正确处理输入和状态
-    msg.submit(predict, [msg, chatbot], [chatbot]).then(
-        lambda: "", None, msg)
-    send_btn.click(predict, [msg, chatbot], [chatbot]).then(
-        lambda: "", None, msg)
-    clear.click(lambda: None, None, chatbot)
+    # 当页面加载时自动触发第一个问题
+def auto_first_question():
+    global current_q_index
+    current_q_index = 1 # 设为1因为会返回第0个问题
+    return questions[0][1]
 
-demo.launch()
+# 自动触发第一个问题
+demo.load(auto_first_question, inputs=None, outputs=chatbot, show_progress=False)