app.py

from groq import Groq
import os
import gradio as gr

def process_response(response):
    """
    Replace * patterns in the response with Markdown bold and adjust emphasis
    based on the number of * used.
    """
    def replace_asterisks(match):
        asterisks = len(match.group(1))  # Count the number of *
        text = match.group(2)  # The text inside the *
        if asterisks == 1:
            return f"**{text}**"  # Bold text
        elif asterisks == 2:
            return f"**{text}**"  # Slightly stronger bold
        elif asterisks >= 3:
            return f"<strong style='font-size: 1.25em;'>{text}</strong>"  # Larger text

    # Use regex to replace patterns like *text*, **text**, ***text***
    import re
    pattern = r"(\*+)([^\*]+)\1"  # Matches *text*, **text**, ***text***
    return re.sub(pattern, replace_asterisks, response)

def get_skill_recommendations(user_input):
    # Initialize Groq client
    client = Groq(api_key=os.environ.get("GROQ_API_KEY"))
    
    # Send request to the Groq API
    chat_completion = client.chat.completions.create(
        messages=[
            {
                "role": "user",
                "content": f"Suggest a skill-building path for: {user_input}"
            }
        ],
        model="llama-3.3-70b-versatile",
        stream=False,
    )
    
    # Process response to format bold text dynamically
    response = chat_completion.choices[0].message.content
    response = process_response(response)
    return response

# Define Gradio function
def skill_builder_interface(user_input):
    return get_skill_recommendations(user_input)

# Enhanced Gradio interface
interface = gr.Interface(
    fn=skill_builder_interface,
    inputs=gr.Textbox(
        label="🌟 Enter Your Details",
        placeholder="E.g., Bachelor's in Computer Science, interested in AI and Data Science.",
        lines=4,
    ),
    outputs=gr.Textbox(
        label="📋 Your Personalized Skill-Building Path",
        lines=12,
    ),
    title="🎓 SkillBuilderGPT: Your Personalized Skill Roadmap 🎓",
    description=(
        """
        <div style="text-align: center;">
            <h2>🚀 Welcome to SkillBuilderGPT!</h2>
            <p style="font-size: 16px; color: #555;">
                Discover personalized skill-building paths tailored to your background and career goals.
            </p>
            <p style="font-size: 16px; color: #555;">
                Enter your details, and we'll suggest courses, certifications, and projects that align with your future aspirations.
            </p>
        </div>
        """
    ),
    examples=[
        ["Bachelor's in Electrical Engineering, interested in Renewable Energy."],
        ["Completed Mechanical Engineering, aiming for a career in AI and Robotics."],
    ],
    allow_flagging="never",
    live=True,
)

# Add custom CSS for enhanced styling
css = """
body {
    font-family: 'Roboto', sans-serif;
    background: linear-gradient(to bottom, #ffffff, #f3f4f7);
    margin: 0;
    padding: 0;
}
.gradio-container {
    border: 2px solid #dddddd;
    border-radius: 12px;
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
    background-color: #ffffff;
    padding: 20px;
    max-width: 800px;
    margin: auto;
}
h1, h2, h3 {
    font-family: 'Roboto', sans-serif;
    color: #333333;
}
textarea, input[type="text"] {
    border: 1px solid #cccccc !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    padding: 12px !important;
    background-color: #f9f9f9;
}
footer {
    text-align: center;
    font-size: 14px;
    color: #777777;
    margin-top: 20px;
}
"""

interface.css = css

if __name__ == "__main__":
    interface.launch(server_name="0.0.0.0", server_port=7860)