main.py

from nicegui import ui
import os
from huggingface_hub import InferenceClient
from dotenv import load_dotenv

load_dotenv()


@ui.page("/", dark=True)
def home():
    ui.add_head_html(
        """
        <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
        <style>
            html, body {
                height: 100vh !important;
                width: 100vw !important;
                margin: 0 !important;
                padding: 0 !important;
                overflow: hidden !important; /* Remove all scrollbars */
            }
            .custom-bg, .result-bg {
                min-height: 100vh;
                min-width: 100vw;
                height: 100vh;
                width: 100vw;
                background-image: url('https://i.postimg.cc/SNvvVYPR/polyscape-1.png');
                background-size: cover;
                background-position: center;
                background-repeat: no-repeat;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .no-scrollbar {
                scrollbar-width: none; /* Firefox */
                -ms-overflow-style: none; /* IE 10+ */
            }
            .no-scrollbar::-webkit-scrollbar { /* Chrome, Safari, Opera */
                display: none;
            }
        </style>
        """
    )
    ui.page_title("AskMe.ai - Career Discovery")
    with ui.element("div").classes("custom-bg"):
        with (
            ui.card()
            .classes("p-8 rounded-lg shadow-lg")
            .style(
                "background-color: rgba(44, 52, 54, 0.7); min-height:20vh; align-items:center;"
            )
        ):
            ui.label("AskMe.ai").classes("text-h2 mb-8").style(
                "color: #A7C080; font-family: monospace;"
            )
            ui.label("Interested in knowing where you might end up?").classes(
                "text-h5 mb-8"
            ).style("color: #859289; font-family: monospace;")
            ui.image("static/better_arrow.gif").classes("mb-4").style(
                "width: 200px; height: auto;"
            )
            ui.button("Get started", on_click=lambda: ui.navigate.to("/login")).classes(
                "self-center mt-4 w-1/2 h-4"
            ).style("background-color: #3C4841 !important; color: #A7C080 !important;")


@ui.page("/login", dark=True)
def login():
    global user_data
    user_data = {}

    ui.add_head_html(
        """
        <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
        <style>
            html, body {
                height: 100vh !important;
                width: 100vw !important;
                margin: 0 !important;
                padding: 0 !important;
                overflow: hidden !important;
            }
            .custom-bg, .result-bg, .login-bg {
                min-height: 100vh;
                min-width: 100vw;
                height: 100vh;
                width: 100vw;
                background-image: url('https://i.postimg.cc/SNvvVYPR/polyscape-1.png');
                background-size: cover;
                background-position: center center;
                background-repeat: no-repeat;
                display: flex;
                align-items: center;
                justify-content: center;
                box-sizing: border-box;
            }
            .scrollable-card {
                max-height: 85vh;
                overflow-y: auto;
                scrollbar-width: thin;
                scrollbar-color: #A7C080 rgba(55, 65, 69, 0.3);
            }
            .scrollable-card::-webkit-scrollbar {
                width: 12px;
            }
            .scrollable-card::-webkit-scrollbar-track {
                background: rgba(55, 65, 69, 0.3);
                border-radius: 10px;
            }
            .scrollable-card::-webkit-scrollbar-thumb {
                background: #A7C080;
                border-radius: 10px;
            }
            .scrollable-card::-webkit-scrollbar-thumb:hover {
                background: #859289;
            }
            .section-header {
                color: #A7C080 !important;
                font-weight: bold !important;
                margin-top: 1.5rem !important;
                margin-bottom: 1rem !important;
            }
        </style>
        """
    )
    ui.page_title("Assessment")

    def collect_data():
        user_data["name"] = name.value
        user_data["age"] = age.value
        user_data["education_level"] = education_level.value
        user_data["field_of_study"] = field_of_study.value
        user_data["institution"] = institution.value
        user_data["career_stage"] = career_stage.value
        user_data["work_experience"] = work_experience.value
        user_data["skills"] = skills.value
        user_data["interests"] = interests.value
        user_data["personality_type"] = personality_type.value
        user_data["work_style"] = work_style.value
        user_data["career_goals"] = career_goals.value
        user_data["industry_preference"] = industry_preference.value
        user_data["work_environment"] = work_environment.value
        user_data["location_preference"] = location_preference.value
        user_data["salary_expectations"] = salary_expectations.value
        user_data["work_life_balance"] = work_life_balance.value
        user_data["learning_style"] = learning_style.value
        user_data["leadership_interest"] = leadership_interest.value
        user_data["risk_tolerance"] = risk_tolerance.value
        user_data["motivations"] = motivations.value
        user_data["challenges_faced"] = challenges_faced.value
        user_data["additional_info"] = additional_info.value
        ui.navigate.to("/result")

    with ui.element("div").classes("login-bg"):
        with (
            ui.card()
            .classes("p-6 rounded-lg shadow-lg scrollable-card")
            .style(
                "background-color: rgba(55, 65, 69, 0.9); width: 90%; max-width: 600px;"
            )
        ):
            ui.label("Career Discovery Assessment").classes("text-h4 mb-6").style(
                "color: #A7C080; text-align: center; font-family: monospace;"
            )

            # Personal Information
            ui.label("Personal Information").classes("section-header text-h6")
            name = ui.input("Full Name", placeholder="Enter your full name").classes(
                "w-full mb-4"
            )
            age = ui.input("Age", placeholder="Your age").classes("w-full mb-4")

            # Education Background
            ui.label("Education & Background").classes("section-header text-h6")
            education_level = ui.select(
                [
                    "High School",
                    "Bachelor's Degree",
                    "Master's Degree",
                    "PhD",
                    "Professional Certification",
                    "Self-taught",
                    "Other",
                ],
                label="Education Level",
            ).classes("w-full mb-4")

            field_of_study = ui.input(
                "Field of Study/Major",
                placeholder="e.g., Computer Science, Business, Arts, etc.",
            ).classes("w-full mb-4")
            institution = ui.input(
                "Institution Name", placeholder="Your school/university (optional)"
            ).classes("w-full mb-4")

            # Career Stage
            career_stage = ui.select(
                [
                    "Student",
                    "Recent Graduate",
                    "Entry Level (0-2 years)",
                    "Mid-level (3-7 years)",
                    "Senior Level (8+ years)",
                    "Career Changer",
                    "Returning to Workforce",
                ],
                label="Career Stage",
            ).classes("w-full mb-4")

            work_experience = (
                ui.textarea(
                    "Work Experience & Achievements",
                    placeholder="Describe your work experience, internships, projects, and key achievements",
                )
                .classes("w-full mb-4")
                .style("min-height: 80px;")
            )

            # Skills & Competencies
            ui.label("Skills & Competencies").classes("section-header text-h6")
            skills = (
                ui.textarea(
                    "Technical & Soft Skills",
                    placeholder="List your technical skills, programming languages, software proficiency, communication skills, leadership experience, etc.",
                )
                .classes("w-full mb-4")
                .style("min-height: 100px;")
            )

            # Interests & Personality
            ui.label("Interests & Personality").classes("section-header text-h6")
            interests = (
                ui.textarea(
                    "Personal Interests & Hobbies",
                    placeholder="What activities energize you? What do you enjoy doing in your free time?",
                )
                .classes("w-full mb-4")
                .style("min-height: 80px;")
            )

            personality_type = ui.select(
                [
                    "Extroverted - I gain energy from social interactions",
                    "Introverted - I prefer quiet, focused environments",
                    "Ambivert - I'm comfortable in both settings",
                    "Not sure",
                ],
                label="Personality Type",
            ).classes("w-full mb-4")

            work_style = ui.select(
                [
                    "Independent worker",
                    "Team collaborator",
                    "Leadership roles",
                    "Mix of all",
                    "Project-based work",
                    "Routine-oriented work",
                ],
                label="Preferred Work Style",
            ).classes("w-full mb-4")

            # Career Aspirations
            ui.label("Career Goals & Preferences").classes("section-header text-h6")
            career_goals = (
                ui.textarea(
                    "Short-term & Long-term Goals",
                    placeholder="Where do you see yourself in 2-5 years? What are your ultimate career aspirations?",
                )
                .classes("w-full mb-4")
                .style("min-height: 80px;")
            )

            industry_preference = ui.input(
                "Industry Interests",
                placeholder="Technology, Healthcare, Finance, Education, Creative Arts, Non-profit, etc.",
            ).classes("w-full mb-4")

            work_environment = ui.select(
                [
                    "Remote/Work from home",
                    "Office-based",
                    "Hybrid (mix of both)",
                    "Field work/Travel",
                    "Laboratory/Workshop",
                    "Outdoors",
                    "No strong preference",
                ],
                label="Preferred Work Environment",
            ).classes("w-full mb-4")

            # Practical Considerations
            ui.label("Practical Considerations").classes("section-header text-h6")
            location_preference = ui.input(
                "Geographic Preferences",
                placeholder="City, country, or remote work preferences",
            ).classes("w-full mb-4")

            salary_expectations = ui.select(
                [
                    "Entry-level salary is fine",
                    "Moderate salary expectations",
                    "High earning potential important",
                    "Salary not primary concern",
                    "Performance-based compensation preferred",
                ],
                label="Salary Expectations",
            ).classes("w-full mb-4")

            work_life_balance = ui.select(
                [
                    "Work-life balance is crucial",
                    "Willing to work long hours for career growth",
                    "Flexible schedule important",
                    "Standard 40-hour work week preferred",
                    "Project-based schedule preferred",
                ],
                label="Work-Life Balance Preference",
            ).classes("w-full mb-4")

            # Learning & Development
            ui.label("Learning & Growth").classes("section-header text-h6")
            learning_style = ui.select(
                [
                    "Hands-on/Practical learning",
                    "Theoretical/Academic learning",
                    "Visual learning",
                    "Learning through mentorship",
                    "Self-directed learning",
                    "Group learning environments",
                ],
                label="Preferred Learning Style",
            ).classes("w-full mb-4")

            leadership_interest = ui.select(
                [
                    "Very interested in leadership roles",
                    "Somewhat interested in leading",
                    "Prefer individual contributor roles",
                    "Open to leadership opportunities",
                    "Not interested in management",
                ],
                label="Interest in Leadership",
            ).classes("w-full mb-4")

            risk_tolerance = ui.select(
                [
                    "High risk tolerance - entrepreneurial ventures",
                    "Moderate risk tolerance",
                    "Low risk tolerance - stable positions preferred",
                    "Risk-neutral",
                    "Depends on the situation",
                ],
                label="Risk Tolerance",
            ).classes("w-full mb-4")

            # Motivations & Values
            ui.label("Motivations & Challenges").classes("section-header text-h6")
            motivations = (
                ui.textarea(
                    "What Motivates You?",
                    placeholder="What drives you professionally? Making impact, solving problems, helping others, financial success, creativity, etc.",
                )
                .classes("w-full mb-4")
                .style("min-height: 80px;")
            )

            challenges_faced = (
                ui.textarea(
                    "Current Challenges",
                    placeholder="What challenges are you facing in your career journey? What obstacles do you need help overcoming?",
                )
                .classes("w-full mb-4")
                .style("min-height: 80px;")
            )

            additional_info = (
                ui.textarea(
                    "Additional Information",
                    placeholder="Anything else you'd like to share that might help in providing better career guidance?",
                )
                .classes("w-full mb-6")
                .style("min-height: 60px;")
            )

            ui.button("Generate My Career Roadmap", on_click=collect_data).classes(
                "w-full bg-blue-500 text-white hover:bg-blue-600 py-3"
            ).style(
                "margin-top: 1rem; background: linear-gradient(135deg, #3C4841, #A7C080) !important;"
            )


@ui.page("/result", dark=True)
def result():
    global user_data

    ui.add_head_html(
        """
        <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
        <style>
            html, body {
                height: 100vh !important;
                width: 100vw !important;
                margin: 0 !important;
                padding: 0 !important;
                overflow: hidden !important; /* Remove all scrollbars */
            }
            .custom-bg, .result-bg {
                min-height: 100vh;
                min-width: 100vw;
                height: 100vh;
                width: 100vw;
                background-image: url('https://i.postimg.cc/SNvvVYPR/polyscape-1.png');
                background-size: cover;
                background-position: center;
                background-repeat: no-repeat;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .scrollable-result {
                max-height: 90vh;
                overflow-y: auto;
                scrollbar-width: thin;
                scrollbar-color: #A7C080 rgba(55, 65, 69, 0.3);
            }
            .scrollable-result::-webkit-scrollbar {
                width: 8px;
            }
            .scrollable-result::-webkit-scrollbar-track {
                background: rgba(55, 65, 69, 0.3);
                border-radius: 10px;
            }
            .scrollable-result::-webkit-scrollbar-thumb {
                background: #A7C080;
                border-radius: 10px;
            }
            .scrollable-result::-webkit-scrollbar-thumb:hover {
                background: #859289;
            }
        </style>
        """
    )
    ui.page_title("Your Career Roadmap")
    client = InferenceClient(
        provider="groq",
        api_key=os.environ.get("HF_TOKEN"),
    )

    # Enhanced prompt with all collected data
    enhanced_prompt = f"""
    As a professional career counselor and industry expert, please provide a comprehensive career roadmap and guidance for the following individual:

    PERSONAL PROFILE:
    Name: {user_data.get("name", "Not provided")}
    Age: {user_data.get("age", "Not provided")}
    Education: {user_data.get("education_level", "Not provided")} in {user_data.get("field_of_study", "Not provided")}
    Institution: {user_data.get("institution", "Not provided")}
    Career Stage: {user_data.get("career_stage", "Not provided")}

    EXPERIENCE & SKILLS:
    Work Experience: {user_data.get("work_experience", "Not provided")}
    Technical & Soft Skills: {user_data.get("skills", "Not provided")}

    PERSONALITY & PREFERENCES:
    Personal Interests: {user_data.get("interests", "Not provided")}
    Personality Type: {user_data.get("personality_type", "Not provided")}
    Work Style: {user_data.get("work_style", "Not provided")}
    Learning Style: {user_data.get("learning_style", "Not provided")}

    CAREER ASPIRATIONS:
    Career Goals: {user_data.get("career_goals", "Not provided")}
    Industry Preferences: {user_data.get("industry_preference", "Not provided")}
    Leadership Interest: {user_data.get("leadership_interest", "Not provided")}

    PRACTICAL CONSIDERATIONS:
    Work Environment Preference: {user_data.get("work_environment", "Not provided")}
    Location Preferences: {user_data.get("location_preference", "Not provided")}
    Salary Expectations: {user_data.get("salary_expectations", "Not provided")}
    Work-Life Balance: {user_data.get("work_life_balance", "Not provided")}
    Risk Tolerance: {user_data.get("risk_tolerance", "Not provided")}

    MOTIVATIONS & CHALLENGES:
    What Motivates Them: {user_data.get("motivations", "Not provided")}
    Current Challenges: {user_data.get("challenges_faced", "Not provided")}
    Additional Information: {user_data.get("additional_info", "Not provided")}

    Please provide a detailed response (800-1000 words) that includes:

    1. **Career Path Analysis**: Based on their background, skills, and preferences, what are the most suitable career paths?

    2. **Short-term Roadmap (6 months - 2 years)**: Specific actionable steps, skill development, networking strategies, and opportunities to pursue.

    3. **Long-term Vision (3-10 years)**: Career progression possibilities, leadership opportunities, and potential specializations.

    4. **Skill Development Plan**: What technical and soft skills should they prioritize? Include specific courses, certifications, or experiences.

    5. **Industry Insights**: Current market trends in their preferred industries, growth opportunities, and potential challenges.

    6. **Personalized Recommendations**: Tailored advice based on their unique combination of interests, skills, and goals.

    7. **Action Steps**: Concrete next steps they can take immediately to advance their career.

    Make the guidance practical, actionable, and inspiring while being realistic about challenges and opportunities in their chosen field.
    """

    completion = client.chat.completions.create(
        model="openai/gpt-oss-20b",
        messages=[
            {
                "role": "user",
                "content": enhanced_prompt,
            }
        ],
    )

    with ui.element("div").classes("result-bg"):
        with (
            ui.card()
            .classes("p-8 rounded-lg shadow-lg max-w-4xl")
            .style("height: 90vh; width: 95%; background-color: rgba(55, 65, 69, 0.9);")
        ):
            ui.label("Your Personalized Career Roadmap").classes("text-h4 mb-6").style(
                "color: #A7C080; text-align: center; font-family: monospace;"
            )

            with ui.element("div").classes("scrollable-result"):
                ui.markdown(completion.choices[0].message.content).classes(
                    "whitespace-pre-wrap text-white"
                ).style("line-height: 1.6;")

            # Add navigation buttons
            with ui.row().classes("w-full justify-center mt-6"):
                ui.button(
                    "Refine Assessment", on_click=lambda: ui.navigate.to("/login")
                ).classes("mx-2 px-6 py-2").style(
                    "background-color: #A7C080 !important; color: #2C3436 !important;"
                )


# if __name__ =={'__main__', '__mp_main__'}:
# import os
# port = int(os.environ.get('PORT', 8080))
ui.run(native=False, reload=False, favicon="static/favicon.svg")