| | import gradio as gr |
| | from openai import OpenAI |
| | import docx2txt |
| | import PyPDF2 |
| | import time |
| | import os |
| | API_KEY = os.environ.get("API_KEY") |
| |
|
| | default_system_prompt = """ |
| | |
| | You are a friendly and supportive human-like assistant helping users explore their interests and potential career paths through a guided questionnaire. |
| | Ask the user each question one at a time, and allow them to respond either by choosing from given options or typing their own input. After receiving a reasonable response, continue to the next question until the survey is complete. |
| | At the end of the questionnaire, generate personalized career suggestions based on the user's responses. Your summary should: |
| | 1. Briefly reflect the user's key interests, strengths, preferences and user's basic information. |
| | 2. Brainstorm some unique ways of combinations of user's key interests, strengths, and preferences, and how these interdiscipline can be applied to their career trajectory. . |
| | 3. Recommend 3 potential careers that align well with their profile. |
| | 4. Suggest 5 university programs that match their interests and academic background and college characteristics preference. |
| | |
| | For each university/program: |
| | 1. Include a brief description of the program, and college characteristics preference. |
| | 2. Explain why it's a strong fit for the user. |
| | 3. Sort the programs by acceptance rate (from low to high). |
| | 4. Ensure at least one suggested school is realistic for guaranteed admission. |
| | |
| | Then ask follow up questions to encourage users to ask you more questions and more suggestions. Please encourage them to ask for a step-by-step road map for college application. Maybe also guide them to ask what other subjects that they should take in the future. |
| | When presenting the final recommendations, make your language friendly, encouraging, and logically consistent. Add a few well-placed emojis to keep the tone warm and engaging 😊🎓💡. |
| | |
| | 🔧 SECTION 1: What Do You Enjoy Doing? |
| | (1/20) What are you mostly drawn to? |
| | A. Solving problems |
| | B. Doing experiments |
| | C. Analyzing data |
| | D. Creating or designing things |
| | |
| | (2/20) Do you like writing, drawing, designing, or performing? |
| | A. Very much |
| | B. Somewhat |
| | C. Not really |
| | D. Not at all |
| | |
| | (3/20) Do you enjoy helping people learn, grow, or feel better? |
| | A. Very much |
| | B. Somewhat |
| | C. Not really |
| | D. Not at all |
| | |
| | (4/20) Are you motivated by leading, persuading, or organizing people for a common goal? |
| | A. Very much |
| | B. Somewhat |
| | C. Not really |
| | D. Not at all |
| | |
| | (5/20) Do you enjoy working with data, numbers, or detailed processes? |
| | A. Very much |
| | B. Somewhat |
| | C. Not really |
| | D. Not at all |
| | |
| | |
| | 💭 SECTION 2: What Kind of Work Feels Meaningful to You? |
| | (6/20) Think about a time you felt proud of your work — what were you doing? |
| | A. Finishing big projects |
| | B. Organizing an event |
| | C. Solving challenging problems |
| | D. Helping classmates |
| | |
| | (7/20) Do you prefer collaborating with others or working alone? |
| | A. Collaborating |
| | B. Working alone |
| | C. Balanced preference |
| | D. Depends on the task |
| | |
| | (8/20) Do you like structure and clear expectations, or do you thrive in flexibility and creativity? |
| | A. Strong structure |
| | B. Some structure |
| | C. Flexible, creative work |
| | D. Depends on context |
| | |
| | (9/20) What kind of praise or advice helps you do your best? |
| | A. Helpful tips and strategies |
| | B. Noticing my efforts |
| | C. Positive encouragement |
| | D. Quick and clear feedback |
| | |
| | (10/20) What kind of impact do you hope to make through your work? |
| | A. Empowering others through data |
| | B. Helping others learn and grow |
| | C. Solving problems that matter |
| | D. Creating or building something new |
| | |
| | 🧬 SECTION 3: How Do You Make Decisions and Process Information? |
| | (11/20) What helps you decide? |
| | A. I think about the facts and what makes the most sense |
| | B. I think about how people feel and what’s fair |
| | C. I use both facts and empathy |
| | D. I trust my instincts and experience |
| | |
| | (12/20) How do you get energized? |
| | A. Talking with others and sharing ideas out loud |
| | B. Quiet reflection and solo thinking |
| | C. I enjoy both depending on the situation |
| | D. I prefer observing first, then contributing |
| | |
| | (13/20) Do you prefer a detailed plan or flexibility? |
| | A. I like having a clear, step-by-step plan |
| | B. I prefer to stay open and adapt as I go |
| | C. I like having a plan but can adapt if needed |
| | D. I thrive on spontaneity and last-minute ideas |
| | |
| | (14/20) How do you solve problems? |
| | A. I rely on past experience |
| | B. I imagine new solutions |
| | C. I do both—learn from the past and explore new ideas |
| | D. I ask others and collaborate to find the best answer |
| | |
| | 🔎 SECTION 4: Your Strengths in Action |
| | (15/20) What compliments have you received? |
| | A. “You’re helpful” / “Great friend” |
| | B. “You explain things clearly” / “Good teacher” |
| | C. “You’re creative” / “You have great ideas” |
| | D. “You’re organized and reliable” |
| | |
| | (16/20) What tasks come naturally to you? |
| | A. Solving math problems |
| | B. Writing or storytelling |
| | C. Public speaking |
| | D. Organizing or planning tasks |
| | |
| | (17/20) What doesn’t feel like work to you? |
| | A. Creating (art, design, building) |
| | B. Solving puzzles or challenges |
| | C. Helping others |
| | D. Leading teams or projects |
| | |
| | (18/20) In a group project, what role fits you best? |
| | A. Leader |
| | B. Planner |
| | C. Researcher |
| | D. Presenter |
| | |
| | 🧩 SECTION 5: Career Environment Preferences |
| | (19/20) What environments do you prefer? |
| | A. Fast-paced and competitive |
| | B. Calm and predictable |
| | C. Flexible and collaborative |
| | D. Structured and professional |
| | |
| | (20/20)Which motivates you more? |
| | A. Competing and achieving goals |
| | B. Supporting others and shared values |
| | C. Learning and growing |
| | D. Recognition and influence |
| | |
| | """ |
| |
|
| | essay_system_prompt = """ |
| | You are a friendly and professional writing assistant. Your job is to guide the user step-by-step through writing a strong personal statement or optional essay. |
| | |
| | Intro: |
| | Hi there! Welcome to UniCue’s Writing Assistant. |
| | I’m Athena, your personal guide for crafting a standout university application essay. Let’s turn your ideas and experiences into a story that reflects you at your best. |
| | To get started, which type of essay are you working on? Personal Statement Or Optional Essays ? |
| | |
| | If Personal statements chosen: |
| | Great! Personal statements are your chance to show who you really are. |
| | From the info you shared, I see you're into swimming—awesome! That’s a powerful passion we can build on. |
| | Before we dive in, what tone do you want your essay to have? |
| | |
| | Warm and heartfelt |
| | Confident and ambitious |
| | Thoughtful and reflective |
| | Creative or playful |
| | |
| | If Optional essays chosen: |
| | Awesome! Optional essays are a great way to highlight different sides of your story. |
| | Which prompt are you focusing on? |
| | |
| | Why major/ Why school |
| | Overcoming Challenges |
| | Diversity or Community |
| | Creative or Open-Ended Essay |
| | """ |
| |
|
| | essay_system_prompt = """ |
| | You are a friendly and professional writing assistant. Your job is to guide the user step-by-step through writing a strong personal statement or optional essay. |
| | |
| | Intro: |
| | Hi there! Welcome to UniCue’s Writing Assistant. |
| | I’m Athena, your personal guide for crafting a standout university application essay. Let’s turn your ideas and experiences into a story that reflects you at your best. |
| | To get started, which type of essay are you working on? Personal Statement Or Optional Essays ? |
| | |
| | If Personal statements chosen: |
| | Great! Personal statements are your chance to show who you really are. |
| | From the info you shared, I see you're into swimming—awesome! That’s a powerful passion we can build on. |
| | Before we dive in, what tone do you want your essay to have? |
| | |
| | Warm and heartfelt |
| | Confident and ambitious |
| | Thoughtful and reflective |
| | Creative or playful |
| | |
| | If Optional essays chosen: |
| | Awesome! Optional essays are a great way to highlight different sides of your story. |
| | Which prompt are you focusing on? |
| | |
| | Why major/ Why school |
| | Overcoming Challenges |
| | Diversity or Community |
| | Creative or Open-Ended Essay |
| | """ |
| |
|
| | MODEL_NAME = "gpt-4o" |
| | DEFAULT_MAX_TOKENS = 2000 |
| | DEFAULT_TEMPERATURE = 0.7 |
| | DEFAULT_TOP_P = 0.95 |
| |
|
| | def convert_to_chatbot_format(history): |
| | result = [] |
| | user_msg = None |
| | for msg in history: |
| | if msg["role"] == "user": |
| | user_msg = msg["content"] |
| | elif msg["role"] == "assistant": |
| | result.append([user_msg, msg["content"]]) |
| | user_msg = None |
| | return result |
| |
|
| | def predict(message, history): |
| | client = OpenAI(api_key=API_KEY) |
| | messages = [{"role": "system", "content": default_system_prompt}] |
| | messages.extend(history if history else []) |
| | messages.append({"role": "user", "content": message}) |
| |
|
| | start_time = time.time() |
| | response = client.chat.completions.create( |
| | model=MODEL_NAME, |
| | messages=messages, |
| | max_tokens=DEFAULT_MAX_TOKENS, |
| | temperature=DEFAULT_TEMPERATURE, |
| | top_p=DEFAULT_TOP_P, |
| | 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 |
| | full_message += chunk.choices[0].delta.content |
| | current_time = time.time() |
| | if last_yield_time is None or (current_time - last_yield_time >= 0.25): |
| | chatbot_display = convert_to_chatbot_format(history + [ |
| | {"role": "user", "content": message}, |
| | {"role": "assistant", "content": full_message} |
| | ]) |
| | yield chatbot_display, history |
| | last_yield_time = current_time |
| |
|
| | if full_message: |
| | history.append({"role": "user", "content": message}) |
| | history.append({"role": "assistant", "content": full_message}) |
| | yield convert_to_chatbot_format(history), history |
| |
|
| | def predict_mini(message, history): |
| | client = OpenAI(api_key=API_KEY) |
| | messages = [{"role": "system", "content": essay_system_prompt}] |
| | messages.extend(history if history else []) |
| | messages.append({"role": "user", "content": message}) |
| |
|
| | start_time = time.time() |
| | response = client.chat.completions.create( |
| | model=MODEL_NAME, |
| | messages=messages, |
| | max_tokens=DEFAULT_MAX_TOKENS, |
| | temperature=DEFAULT_TEMPERATURE, |
| | top_p=DEFAULT_TOP_P, |
| | 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 |
| | full_message += chunk.choices[0].delta.content |
| | current_time = time.time() |
| | if last_yield_time is None or (current_time - last_yield_time >= 0.25): |
| | chatbot_display = convert_to_chatbot_format(history + [ |
| | {"role": "user", "content": message}, |
| | {"role": "assistant", "content": full_message} |
| | ]) |
| | yield chatbot_display, history |
| | last_yield_time = current_time |
| |
|
| | if full_message: |
| | history.append({"role": "user", "content": message}) |
| | history.append({"role": "assistant", "content": full_message}) |
| | yield convert_to_chatbot_format(history), history |
| |
|
| | def start_essay_intro(): |
| | intro_message = """Hi there! Welcome to UniCue’s Writing Assistant. |
| | I’m Athena, your personal guide for crafting a standout university application essay. Let’s turn your ideas and experiences into a story that reflects you at your best. |
| | To get started, which type of essay are you working on? Personal statement or optional essay?""" |
| | history = [{"role": "assistant", "content": intro_message}] |
| | return [[ "", intro_message ]], history |
| |
|
| |
|
| | def send_draft_to_chatbot(draft_text, history): |
| | prompt = f"Please review and provide feedback for the following personal statement:\n\n{draft_text}" |
| | yield from predict(prompt, history) |
| |
|
| | |
| | def send_fixed_message(fixed_message): |
| | def inner(*args): |
| | history = args[0] |
| | yield from predict(fixed_message, history) |
| |
|
| | return inner |
| |
|
| | def stop_chat(): |
| | return [], [], "", "" |
| |
|
| | def start_chat_fn(g, s, p, gen, sat, interests_list, dream_school): |
| |
|
| | if interests_list: |
| | interest_str = f"You mentioned you're interested in subjects like {', '.join(interests_list)}." |
| | else: |
| | interest_str = "You haven't selected any favorite subjects yet." |
| |
|
| | if sat: |
| | sat_str = f" You've also entered an SAT score of {sat}." |
| | else: |
| | sat_str = "" |
| | gender_str = f" and identify as {gen}" if gen != "Prefer not to say" else "" |
| | dream_str = f" Your dream school is {dream_school}." if dream_school else "" |
| | welcome = ( |
| | f"Welcome! I am the AI counselor Athena from UniCue! I know you're in grade {g}, from {s} in {p}{gender_str}. " |
| | f"""{interest_str}{sat_str}{dream_str} I will help you to find the perfect career path and interest for you! |
| | Let's begin with Section 1: What Do You Enjoy Doing? \n \n (1/20)What are you mostly drawn to? |
| | A. Solving problems |
| | B. Doing experiments |
| | C. Analyzing data |
| | D. Creating or designing things |
| | Please choose one of the options above. |
| | """ |
| | ) |
| | return ( |
| | gr.update(visible=False), |
| | gr.update(visible=True), |
| | gr.update(visible=False), |
| | [["", welcome]], |
| | [{"role": "assistant", "content": welcome}] |
| |
|
| | ) |
| |
|
| | def brainstorm_idea_message(history): |
| | user_prompt = "Can you help me brainstorm ideas for my personal statement?" |
| | history.append({"role": "user", "content": user_prompt}) |
| | yield from predict(user_prompt, history) |
| |
|
| | def fix_structure_message(history): |
| | user_prompt = "Can you help me improve the structure of my personal statement?" |
| | history.append({"role": "user", "content": user_prompt}) |
| | yield from predict(user_prompt, history) |
| |
|
| | def polish_writing_message(history): |
| | user_prompt = "Can you help polish and refine my draft?" |
| | history.append({"role": "user", "content": user_prompt}) |
| | yield from predict(user_prompt, history) |
| |
|
| | def extract_text_from_file(file): |
| | if file is None: |
| | return gr.update() |
| |
|
| | filepath = file.name |
| | text = "" |
| |
|
| | if filepath.endswith(".pdf"): |
| | with open(filepath, "rb") as f: |
| | reader = PyPDF2.PdfReader(f) |
| | for page in reader.pages: |
| | page_text = page.extract_text() |
| | if page_text: |
| | text += page_text |
| | elif filepath.endswith(".docx"): |
| | text = docx2txt.process(filepath) |
| |
|
| | return gr.update(value=text) |
| |
|
| | def should_disable_add_button(school, program, rate): |
| | if not school.strip() or not program.strip() or not rate.strip(): |
| | return gr.update(interactive=False) |
| | return gr.update(interactive=True) |
| |
|
| | with gr.Blocks(css=""" |
| | @import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@700&display=swap'); |
| | |
| | body, .gradio-container { |
| | background-color: #fff8dc !important; |
| | } |
| | |
| | #title { |
| | text-align: center; |
| | margin-top: 40px; |
| | margin-bottom: 30px; |
| | font-size: 80px; |
| | font-family: 'Fredoka', sans-serif; |
| | font-weight: 700; |
| | } |
| | |
| | #title .gradient-text { |
| | background: linear-gradient(90deg, #ff6ec4, #7873f5, #4ac29a); |
| | background-clip: text; |
| | -webkit-background-clip: text; |
| | color: transparent; |
| | -webkit-text-fill-color: transparent; |
| | } |
| | |
| | button.small-colored { |
| | font-size: 14px !important; |
| | padding: 8px 12px !important; |
| | border-radius: 8px; |
| | font-weight: bold; |
| | background-color: #a8e6cf; |
| | color: #000000; |
| | border: none; |
| | margin-bottom: 10px; |
| | width: 100%; |
| | } |
| | |
| | footer { display: none !important; } |
| | |
| | #spinner { |
| | display: flex; |
| | flex-direction: column; |
| | align-items: center; |
| | justify-content: center; |
| | height: 300px; |
| | font-family: 'Fredoka', sans-serif; |
| | font-size: 20px; |
| | font-weight: bold; |
| | gap: 20px; |
| | } |
| | |
| | .spinner-circle { |
| | border: 6px solid #f3f3f3; |
| | border-top: 6px solid #ff6ec4; |
| | border-right: 6px solid #7873f5; |
| | border-bottom: 6px solid #4ac29a; |
| | border-radius: 50%; |
| | width: 60px; |
| | height: 60px; |
| | animation: spin 1s linear infinite; |
| | } |
| | |
| | .typing-loader { |
| | display: inline-block; |
| | } |
| | |
| | .typing-loader .loader-text { |
| | color: #b19cd9; |
| | font-size: 24px; |
| | } |
| | |
| | .typing-loader .dot { |
| | animation: blink 1.4s infinite both; |
| | font-size: 32px; |
| | font-weight: bold; |
| | color: #4ac29a; |
| | } |
| | |
| | .typing-loader .dot:nth-child(2) { |
| | animation-delay: 0.2s; |
| | } |
| | .typing-loader .dot:nth-child(3) { |
| | animation-delay: 0.4s; |
| | } |
| | |
| | @keyframes spin { |
| | 0% { transform: rotate(0deg); } |
| | 100% { transform: rotate(360deg); } |
| | } |
| | |
| | @keyframes blink { |
| | 0% { opacity: 0.2; } |
| | 20% { opacity: 1; } |
| | 100% { opacity: 0.2; } |
| | } |
| | |
| | label { |
| | font-size: 18px !important; |
| | } |
| | input, select, textarea { |
| | font-size: 16px !important; |
| | } |
| | input[type="radio"] + span, select option { |
| | font-size: 14px !important; |
| | } |
| | |
| | div[data-testid="chatbot"] > div:first-child { |
| | font-size: 18px !important; |
| | font-weight: 600; |
| | color: #6a5acd; |
| | } |
| | |
| | div[data-testid="chatbot"] svg { |
| | display: none !important; |
| | } |
| | |
| | #subject_checkboxes input[type="checkbox"] + span { |
| | font-size: 14px !important; |
| | } |
| | |
| | #sidebar { |
| | background-color: #fff8f5; |
| | border-right: 2px solid #ffa500; |
| | padding-top: 20px; |
| | align-items: center; |
| | gap: 10px; |
| | height: 100%; |
| | } |
| | |
| | #interest-tab, |
| | #program-tab, |
| | #statement-tab { |
| | display: flex; |
| | flex-direction: column; |
| | align-items: center; |
| | background: none; |
| | justify-content: center; |
| | gap: 4px; /* 图标与文字间距 */ |
| | line-height: 1.2; |
| | } |
| | |
| | #interest-tab.selected, |
| | #program-tab.selected, |
| | #statement-tab.selected { |
| | color: #ff6600 !important; |
| | background-color: #fff2ec !important; |
| | border-left: 4px solid #ff6600 !important; |
| | } |
| | |
| | #school-card { |
| | background-color: #fdfdfd; |
| | border-radius: 12px; |
| | padding: 16px; |
| | box-shadow: 0px 1px 4px rgba(0,0,0,0.1); |
| | margin: 8px 0; |
| | } |
| | |
| | .card-grid { |
| | display: flex; |
| | flex-wrap: wrap; |
| | gap: 16px; |
| | margin-top: 20px; |
| | justify-content: flex-start; |
| | } |
| | |
| | .school-card { |
| | flex: 1 1 calc(50% - 16px); |
| | max-width: calc(50% - 16px); |
| | box-sizing: border-box; |
| | background-color: #ffffff; |
| | border-radius: 16px; |
| | box-shadow: 0 2px 6px rgba(0,0,0,0.1); |
| | padding: 16px; |
| | font-family: 'Fredoka', sans-serif; |
| | display: flex; |
| | flex-direction: column; |
| | justify-content: center; |
| | gap: 8px; |
| | } |
| | |
| | .school-card strong { |
| | font-size: 18px; |
| | font-weight: 700; |
| | color: #333333; |
| | } |
| | |
| | .school-card span { |
| | font-size: 16px; |
| | color: #444; |
| | } |
| | |
| | button.start-colored { |
| | font-size: 16px !important; |
| | padding: 12px 20px !important; |
| | border-radius: 10px; |
| | font-weight: bold; |
| | background: linear-gradient(90deg, #ff6ec4, #7873f5, #4ac29a); |
| | color: white; |
| | border: none; |
| | box-shadow: 0px 2px 6px rgba(0,0,0,0.2); |
| | transition: all 0.3s ease; |
| | } |
| | |
| | button.start-colored:hover { |
| | opacity: 0.9; |
| | transform: scale(1.02); |
| | } |
| | |
| | .send-btn { |
| | font-size: 18px !important; |
| | padding: 0 !important; |
| | width: 36px !important; |
| | height: 30px !important; |
| | min-width: 36px !important; |
| | min-height: 36px !important; |
| | background-color: #ffd6e7 !important; |
| | color: #333; |
| | border: none; |
| | border-radius: 6px; |
| | display: flex; |
| | align-items: center; |
| | justify-content: center; |
| | line-height: 1; |
| | } |
| | |
| | #upload-area { |
| | height: 100px; /* 你可以改成 80px、120px 等 */ |
| | border: 2px dashed #aaa; |
| | padding: 12px; |
| | display: flex; |
| | align-items: center; |
| | justify-content: center; |
| | font-size: 16px; |
| | background-color: #fafafa; |
| | } |
| | #upload-area:hover { |
| | background-color: #f0f8ff; |
| | border-color: #ff6600; |
| | cursor: pointer; |
| | } |
| | #upload-area span { |
| | display: none !important; |
| | } |
| | |
| | .bg-green { |
| | background-color: #99e699; |
| | } |
| | .bg-yellow { |
| | background-color: #ffd54d; |
| | } |
| | .bg-red { |
| | background-color: #ffb3b3; |
| | } |
| | |
| | .card-label { |
| | font-size: 16px; |
| | font-weight: bold; |
| | color: #333333; |
| | } |
| | |
| | .card-colon { |
| | font-size: 16px; |
| | font-weight: normal; |
| | margin-left: 2px; |
| | margin-right: 4px; |
| | color: #333333; |
| | } |
| | |
| | .card-value { |
| | font-size: 16px; |
| | color: #444444; |
| | font-family: "Roboto", "Inter", "Arial", sans-serif; |
| | } |
| | """) as demo: |
| |
|
| | selected_tab = gr.State(value="interest") |
| |
|
| | with gr.Row(): |
| | gr.Image( |
| | value="logo.png", |
| | show_label=False, |
| | show_download_button=False, |
| | height=150, |
| | width=150, |
| | container=False |
| | ) |
| |
|
| | with gr.Column(visible=True) as intro_page: |
| | grade = gr.Dropdown(choices=["9th and below", "10th", "11th", "12th"], label="Grade") |
| | school = gr.Textbox(label="High School") |
| | province = gr.Textbox(label="State") |
| | gender = gr.Radio(choices=["Female", "Male", "Other", "Prefer not to say"], label="Gender") |
| | sat_score = gr.Textbox(label="SAT Score (optional)", placeholder="e.g. 1450") |
| | interests = gr.CheckboxGroup( |
| | label="Subjects you’re interested in (optional)", |
| | choices=[ |
| | "Math", |
| | "Physics", |
| | "Chemistry", |
| | "Biology", |
| | "Geography", |
| | "History", |
| | "Literature", |
| | "Economics", |
| | "Politics", |
| | "Art", |
| | "Music", |
| | "Drama", |
| | "Engineering", |
| | "Psychology", |
| | "Philosophy", |
| | "Other" |
| | ], |
| |
|
| | elem_id="subject_checkboxes" |
| | ) |
| | dream_school = gr.Textbox(label="Dream School (optional)", placeholder="e.g. Stanford University") |
| | start_button = gr.Button("🚀 Start Chat", elem_classes="start-colored") |
| |
|
| | with gr.Column(visible=False) as loading_page: |
| | gr.HTML(""" |
| | <div id="spinner"> |
| | <div class="spinner-circle"></div> |
| | <div class="typing-loader"> |
| | <span class="loader-text">Preparing your personalized assistant</span> |
| | <span class="dot">.</span><span class="dot">.</span><span class="dot">.</span> |
| | </div> |
| | </div> |
| | """) |
| |
|
| | with gr.Row(visible=False) as main_chat: |
| | with gr.Column(scale=0, min_width=80, elem_id="sidebar"): |
| | interest_tab = gr.Button("🎯 Interest", elem_id="interest-tab", elem_classes=["selected"]) |
| | program_tab = gr.Button("🎓 Program", elem_id="program-tab") |
| | statement_tab = gr.Button("📝 Essay", elem_id="statement-tab") |
| |
|
| | with gr.Column(scale=4, elem_id="main-content") as main_area: |
| |
|
| | with gr.Column(visible=True) as interest_page: |
| | with gr.Row(): |
| | with gr.Column(scale=4): |
| | chatbot = gr.Chatbot(label="👩🎓 AI counselor: Athena") |
| | with gr.Column(): |
| | with gr.Row(): |
| | send_btn1 = gr.Button("📨 A", elem_classes=["send-btn"]) |
| | send_btn2 = gr.Button("📨 B", elem_classes=["send-btn"]) |
| | send_btn3 = gr.Button("📨 C", elem_classes=["send-btn"]) |
| | send_btn4 = gr.Button("📨 D", elem_classes=["send-btn"]) |
| |
|
| | msg = gr.Textbox( |
| | placeholder="Please input your answer as text if you think the options are not enough.", |
| | label=" Text Input ", |
| | lines=1, |
| | scale=16 |
| | ) |
| | with gr.Row(): |
| | send_btn5 = gr.Button(" Get your Interest Cue! ", elem_classes=["send-btn"], scale=16) |
| |
|
| | state = gr.State([]) |
| | msg.submit(fn=predict, inputs=[msg, state], outputs=[chatbot, state]).then( |
| | lambda: gr.update(value=""), inputs=[], outputs=[msg] |
| | ) |
| | send_btn1.click(fn=send_fixed_message("I’d like to choose A."), inputs=[state], |
| | outputs=[chatbot, state]) |
| | send_btn2.click(fn=send_fixed_message("I’ll go with B."), inputs=[state], |
| | outputs=[chatbot, state]) |
| | send_btn3.click(fn=send_fixed_message("I choose C."), inputs=[state], |
| | outputs=[chatbot, state]) |
| | send_btn4.click(fn=send_fixed_message("My choice is D."), inputs=[state], |
| | outputs=[chatbot, state]) |
| | send_btn5.click(fn=send_fixed_message( |
| | "I finished the survey. Can you recommend some related University and programs?"), |
| | inputs=[state], outputs=[chatbot, state]) |
| |
|
| | with gr.Column(visible=False) as program_page: |
| | gr.Markdown("## 🎓 Program Wishlist") |
| |
|
| | with gr.Column(): |
| | with gr.Row(): |
| | school_name = gr.Textbox(label="University Name", placeholder="e.g. University of Pennsylvania") |
| | program_name = gr.Textbox(label="Program Name", placeholder="e.g. Computer and Information Science") |
| | acceptance_rate = gr.Textbox(label="Acceptance rate", placeholder="e.g. 65%") |
| | add_button = gr.Button("✚️ Add Program Card", elem_classes="start-colored", interactive=False) |
| |
|
| | card_display = gr.HTML("") |
| | school_cards = gr.State([]) |
| | delete_trigger = gr.Textbox(visible=False, label=None, elem_id="delete_trigger") |
| |
|
| | def delete_school_card(delete_index, cards): |
| | cards = cards or [] |
| | delete_index = int(delete_index) |
| | if 0 <= delete_index < len(cards): |
| | cards.pop(delete_index) |
| |
|
| | html = "<div class='card-grid'>" |
| | for i, (s, p) in enumerate(cards): |
| | html += f""" |
| | <div class='school-card' id='card-{i}'> |
| | <div style="display: flex; justify-content: space-between; align-items: center;"> |
| | <strong>🏫 {s}</strong> |
| | <button class='delete-btn' data-index='{i}' style='background: none; border: none; font-size: 18px; cursor: pointer;'>❌</button> |
| | </div> |
| | <span>📘 {p}</span> |
| | </div> |
| | """ |
| | html += "</div>" |
| | return html, cards |
| |
|
| | delete_trigger.change( |
| | fn=delete_school_card, |
| | inputs=[delete_trigger, school_cards], |
| | outputs=[card_display, school_cards] |
| | ) |
| |
|
| |
|
| | def add_school_card(school, program, rate, cards): |
| | cards = cards or [] |
| | existing_entries = [(s.strip().lower(), p.strip().lower(), r.strip()) for s, p, r in cards] |
| |
|
| | if (school.strip().lower(), program.strip().lower()) in [(s, p) for s, p, _ in existing_entries]: |
| | return gr.update(), cards |
| |
|
| | cards.append((school, program, rate)) |
| |
|
| | html = "<div class='card-grid'>" |
| | for i, (s, p, r) in enumerate(cards): |
| | try: |
| | rate_num = float(r.strip('%')) |
| | except: |
| | rate_num = 50 |
| |
|
| | if rate_num > 80: |
| | bg_class = "bg-green" |
| | elif rate_num >= 40: |
| | bg_class = "bg-yellow" |
| | else: |
| | bg_class = "bg-red" |
| |
|
| | html += f""" |
| | <div class='school-card {bg_class}' id='card-{i}'> |
| | <div> |
| | <span class="card-label">🏫 <strong>University</strong></span><span class="card-colon">:</span> |
| | <span class="card-value">{s}</span> |
| | </div> |
| | |
| | <div> |
| | <span class="card-label">📘 <strong>Program</strong></span><span class="card-colon">:</span> |
| | <span class="card-value">{p}</span> |
| | </div> |
| | <div> |
| | <span class="card-label">📊 <strong>Acceptance rate</strong></span><span class="card-colon">:</span> |
| | <span class="card-value">{r}</span> |
| | </div> |
| | |
| | </div> |
| | """ |
| | html += "</div>" |
| | return html, cards |
| |
|
| | add_button.click( |
| | fn=add_school_card, |
| | inputs=[school_name, program_name, acceptance_rate, school_cards], |
| | outputs=[card_display, school_cards] |
| | ) |
| |
|
| | school_name.change(fn=should_disable_add_button, inputs=[school_name, program_name, acceptance_rate], |
| | outputs=add_button) |
| | program_name.change(fn=should_disable_add_button, inputs=[school_name, program_name, acceptance_rate], |
| | outputs=add_button) |
| | acceptance_rate.change(fn=should_disable_add_button, |
| | inputs=[school_name, program_name, acceptance_rate], outputs=add_button) |
| |
|
| | with gr.Column(visible=False) as statement_page: |
| | gr.Markdown("## 📝 Personal Statement Workspace") |
| |
|
| | with gr.Row(equal_height=True): |
| | with gr.Column(): |
| | upload_file = gr.File( |
| | label="📎", |
| | file_types=[".pdf", ".docx"], |
| | elem_id="upload-area" |
| | ) |
| |
|
| | |
| | user_draft = gr.Textbox( |
| | label="📄 Your Personal Statement Draft", |
| | lines=14, |
| | placeholder="Paste or write your draft here...", |
| | show_copy_button=True |
| | ) |
| | send_draft_btn = gr.Button("✉️ Send Draft to Assistant", elem_classes="small-colored") |
| |
|
| | upload_file.change( |
| | fn=extract_text_from_file, |
| | inputs=upload_file, |
| | outputs=user_draft |
| | ) |
| |
|
| | |
| | with gr.Column(): |
| | mini_chatbot = gr.Chatbot(label="💡 Writing Assistant") |
| | mini_input = gr.Textbox( |
| | placeholder="Ask for suggestions or improvements...", |
| | label="Message", |
| | lines=1 |
| | ) |
| | mini_state = gr.State([]) |
| |
|
| | send_draft_btn.click( |
| | fn=send_draft_to_chatbot, |
| | inputs=[user_draft, mini_state], |
| | outputs=[mini_chatbot, mini_state] |
| | ) |
| |
|
| | mini_input.submit(fn=predict_mini, inputs=[mini_input, mini_state], |
| | outputs=[mini_chatbot, mini_state]).then( |
| | lambda: gr.update(value=""), inputs=[], outputs=[mini_input] |
| | ) |
| |
|
| | with gr.Row(): |
| | brainstorm_btn = gr.Button("🧠 Brainstorm Ideas", elem_classes="small-colored") |
| | structure_btn = gr.Button("📚 Fix Structure", elem_classes="small-colored") |
| | polish_btn = gr.Button("✨ Polish Writing", elem_classes="small-colored") |
| |
|
| | brainstorm_btn.click( |
| | fn=brainstorm_idea_message, |
| | inputs=[mini_state], |
| | outputs=[mini_chatbot, mini_state] |
| | ) |
| |
|
| | structure_btn.click( |
| | fn=fix_structure_message, |
| | inputs=[mini_state], |
| | outputs=[mini_chatbot, mini_state] |
| | ) |
| |
|
| | polish_btn.click( |
| | fn=polish_writing_message, |
| | inputs=[mini_state], |
| | outputs=[mini_chatbot, mini_state] |
| | ) |
| |
|
| |
|
| | def switch_to_interest(): |
| | return ( |
| | gr.update(visible=True), |
| | gr.update(visible=False), |
| | gr.update(visible=False), |
| | gr.update(elem_classes=["selected"]), |
| | gr.update(elem_classes=[]), |
| | gr.update(elem_classes=[]), |
| | "interest" |
| | ) |
| |
|
| |
|
| | def switch_to_program(): |
| | return ( |
| | gr.update(visible=False), |
| | gr.update(visible=True), |
| | gr.update(visible=False), |
| | gr.update(elem_classes=[]), |
| | gr.update(elem_classes=["selected"]), |
| | gr.update(elem_classes=[]), |
| | "program" |
| | ) |
| |
|
| |
|
| | def switch_to_statement(): |
| | chatbot_display, history = start_essay_intro() |
| | return ( |
| | gr.update(visible=False), |
| | gr.update(visible=False), |
| | gr.update(visible=True), |
| | gr.update(elem_classes=[]), |
| | gr.update(elem_classes=[]), |
| | gr.update(elem_classes=["selected"]), |
| | "statement", |
| | chatbot_display, |
| | history |
| | ) |
| |
|
| | interest_tab.click( |
| | fn=switch_to_interest, |
| | inputs=[], |
| | outputs=[ |
| | interest_page, |
| | program_page, |
| | statement_page, |
| | interest_tab, |
| | program_tab, |
| | statement_tab, |
| | selected_tab |
| | ] |
| | ) |
| |
|
| | program_tab.click( |
| | fn=switch_to_program, |
| | inputs=[], |
| | outputs=[ |
| | interest_page, |
| | program_page, |
| | statement_page, |
| | interest_tab, |
| | program_tab, |
| | statement_tab, |
| | selected_tab |
| | ] |
| | ) |
| |
|
| | statement_tab.click( |
| | fn=switch_to_statement, |
| | inputs=[], |
| | outputs=[ |
| | interest_page, |
| | program_page, |
| | statement_page, |
| | interest_tab, |
| | program_tab, |
| | statement_tab, |
| | selected_tab, |
| | mini_chatbot, |
| | mini_state |
| | ] |
| | ) |
| |
|
| | def loading_to_main(): |
| | time.sleep(1) |
| | return gr.update(visible=False), gr.update(visible=True) |
| |
|
| |
|
| | start_button.click( |
| | fn=start_chat_fn, |
| | inputs=[grade, school, province, gender, sat_score, interests, dream_school], |
| | outputs=[intro_page, loading_page, main_chat, chatbot, state] |
| | ).then( |
| | fn=loading_to_main, |
| | inputs=[], |
| | outputs=[loading_page, main_chat] |
| | ) |
| |
|
| | demo.launch() |
| |
|
| | gr.HTML(""" |
| | <script> |
| | document.addEventListener('click', function(event) { |
| | if (event.target && event.target.matches('.delete-btn')) { |
| | const index = event.target.getAttribute('data-index'); |
| | const wrapper = document.querySelector('[id^="delete_trigger"]'); |
| | const textarea = wrapper ? wrapper.querySelector('textarea') : null; |
| | if (textarea) { |
| | textarea.value = index; |
| | textarea.dispatchEvent(new Event('input', { bubbles: true })); |
| | } |
| | } |
| | }); |
| | </script> |
| | """) |
