Update app.py

app.py

@@ -3,13 +3,91 @@ from openai import OpenAI
 import os
 import time
 
-def predict(message, history, system_prompt, model, max_tokens, temperature, top_p):
+# Store user responses
+user_profile = {
+    "mode": None,
+    "age": None,
+    "degree": None,
+    "interests": None,
+    "mbti": None
+}
 
+questions = [
+    ("mode", "Do you already have a target career, or are you still exploring? (Reply with 'Forward' or 'Backward')"),
+    ("age", "What's your age range? (e.g., 'under 18', '18-21', '21-25', '25-29')"),
+    ("degree", "What is your current degree? (e.g., Bachelor's, Master's, PhD)"),
+    ("interests", "List a few of your interests, separated by commas. (e.g., Programming, Psychology, Design)"),
+    ("mbti", "What's your MBTI personality type? (e.g., INFP, INTJ, ENFP, etc.)")
+]
+
+current_q_index = 0
+
+# Defaults
+system_prompt_default = "You are a helpful and knowledgeable AI career assistant."
+model_default = "gpt-4o"
+temp_default = 0.7
+top_p_default = 0.95
+token_default = 2000
+
+# Placeholder to store setting values
+system_prompt_box = gr.Textbox(system_prompt_default)
+model_dropdown = gr.Dropdown(["gpt-4o", "gpt-4o-mini"], value=model_default)
+token_slider = gr.Slider(800, 4000, value=token_default)
+temp_slider = gr.Slider(0, 1, value=temp_default)
+top_p_slider = gr.Slider(0, 1, value=top_p_default)
+
+def predict(message, history):
+    global current_q_index
+
+    # Get values from global widgets
+    system_prompt = system_prompt_box.value
+    model = model_dropdown.value
+    max_tokens = token_slider.value
+    temperature = temp_slider.value
+    top_p = top_p_slider.value
+    
     # Initialize the OpenAI client
     client = OpenAI(
         api_key=os.environ.get("API_TOKEN"),
     )
 
+    if current_q_index > 0 and current_q_index <= len(questions):
+        key = questions[current_q_index - 1][0]
+        user_profile[key] = message.strip()
+
+    if current_q_index < len(questions):
+        question = questions[current_q_index][1]
+        current_q_index += 1
+        return question
+
+    # Profile-based response
+    mode = user_profile["mode"] or "Forward"
+    age = user_profile["age"]
+    degree = user_profile["degree"]
+    interests = user_profile["interests"]
+    mbti = user_profile["mbti"]
+
+    if "Forward" in mode:
+        system_prompt = system_prompt or f"""
+You are a career planning AI assistant. The student wants to explore suitable career options.
+Student profile:
+- Age: {age}
+- Degree: {degree}
+- Interests: {interests}
+- MBTI Type: {mbti}
+Please recommend several career paths based on this background, and describe entry requirements and preparation steps (courses, certifications, skills, etc.).
+"""
+    else:
+        system_prompt = system_prompt or f"""
+You are a career planning AI assistant. The student already has a target career.
+Student profile:
+- Age: {age}
+- Degree: {degree}
+- Interests: {interests}
+- MBTI Type: {mbti}
+Please reverse-design the career path based on this background, including required courses, skill preparation, school resources, and internship advice.
+"""
+
     # Start with the system prompt
     messages = [{"role": "system", "content": system_prompt}]
 
@@ -19,56 +97,123 @@ def predict(message, history, system_prompt, model, max_tokens, temperature, top
     # Add the current user message
     messages.append({"role": "user", "content": message})
 
-    # Record the start time
-    start_time = time.time()
-
-    # Streaming response
+    # Create streaming response
     response = client.chat.completions.create(
         model=model,
         messages=messages,
         max_tokens=max_tokens,
         temperature=temperature,
         top_p=top_p,
-        stop=None,
         stream=True
     )
 
     full_message = ""
-    first_chunk_time = None
     last_yield_time = None
 
     for chunk in response:
         if chunk.choices and chunk.choices[0].delta.content:
-            if first_chunk_time is None:
-                first_chunk_time = time.time() - start_time  # Record time for the first chunk
-
             full_message += chunk.choices[0].delta.content
             current_time = time.time()
-            chunk_time = current_time - start_time  # calculate the time delay of the chunk
-            print(f"Message received {chunk_time:.2f} seconds after request: {chunk.choices[0].delta.content}")  
-
+            
             if last_yield_time is None or (current_time - last_yield_time >= 0.25):
                 yield full_message
                 last_yield_time = current_time
 
     # Ensure to yield any remaining message that didn't meet the time threshold
     if full_message:
-        total_time = time.time() - start_time
-        # Append timing information to the response message
-        full_message += f" (First Chunk: {first_chunk_time:.2f}s, Total: {total_time:.2f}s)"
         yield full_message
 
-gr.ChatInterface(
-    fn=predict,
-    type="messages",
-    #save_history=True,
-    #editable=True,
-    additional_inputs=[
-        gr.Textbox("You are a helpful AI assistant.", label="System Prompt"),
-        gr.Dropdown(["gpt-4o", "gpt-4o-mini"], label="Model"),
-        gr.Slider(800, 4000, value=2000, label="Max Token"),
-        gr.Slider(0, 1, value=0.7, label="Temperature"),
-        gr.Slider(0, 1, value=0.95, label="Top P"),
-    ],
-    css="footer{display:none !important}"
-).launch()
+
+# Create the interface with custom styling
+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:
+
+    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 Career Exploration Assistant</h1>
+        <p style='font-size: 18px; font-weight:bold; color:#ec4899; margin-top: 0;margin-left: 150px'>Hi! Lets Make the Dream Comes True 💖</p>
+       </div>
+       </div>
+        """)
+        
+    gr.Markdown("**Let's chat! 💬** Ask me anything you want")
+    
+    gr.ChatInterface(
+        fn=predict,
+        chatbot=gr.Chatbot(height=500),
+        textbox=gr.Textbox(placeholder="Type your reply here..."),
+        submit_btn=gr.Button("🚀 Send", elem_id="custom-send")
+    )
+
+    with gr.Accordion("⚙️ Advanced Settings (Click to Show/Hide)", open=False):
+        gr.Markdown("#### Prompt & Model Settings")
+        system_prompt_box.render()
+        model_dropdown.render()
+        token_slider.render()
+        temp_slider.render()
+        top_p_slider.render()
+
+demo.launch()