app.py

import gradio as gr
from transformers import AutoTokenizer, AutoModelForSeq2SeqLM

# Load model and tokenizer
tokenizer = AutoTokenizer.from_pretrained("aaliyaan/t5-small-finetuned-career")
model = AutoModelForSeq2SeqLM.from_pretrained("aaliyaan/t5-small-finetuned-career")

# Function to generate a response from the model and maintain chat history
def chat_with_gpt(user_input, chat_history):
    # Tokenize the user input and generate response
    inputs = tokenizer(user_input, return_tensors="pt", padding=True, truncation=True, max_length=512)
    outputs = model.generate(**inputs, max_length=150, num_beams=5, early_stopping=True)
    response = tokenizer.decode(outputs[0], skip_special_tokens=True)

    # Update chat history with the new user input and response
    chat_history += f"You: {user_input}\nJobMatch AI: {response}\n"

    # Return updated chat history and clear input box
    return chat_history, ""

# Define the Gradio interface
def launch_gradio_interface():
    # Create the Gradio Blocks for the layout
    with gr.Blocks() as demo:
        # Title and description section
        gr.Markdown("<h1 style='color: #3A9FD6; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-weight: bold; text-align: center;'>JobMatch AI</h1>")
        gr.Markdown("<p style='font-size: 18px; color: #333; text-align: center;'>Your trusted career assistant. Ask any job-related question, and get expert advice!</p>")

        # Chat history display (above the input box)
        chat_history = gr.Textbox(
            label="Chat History",
            interactive=False,
            show_label=False,
            placeholder="Chat history will appear here...",
            lines=10,
            max_lines=20,
            elem_id="chat-history",
            value="",  # Initial empty chat history
            container=False  # To avoid any extra padding around this area
        )

        # User input and output textboxes
        with gr.Row():
            with gr.Column():
                user_input = gr.Textbox(
                    label="Ask JobMatch AI",
                    placeholder="Type your job-related question here...",
                    lines=2,
                    max_lines=4,
                    interactive=True,
                    elem_id="user-input-textbox",
                    show_label=False,
                    container=False
                )

        # Button to submit input
        submit_button = gr.Button("Submit", variant="primary")

        # Link the button with the function (updates chat history and clears input)
        submit_button.click(fn=chat_with_gpt, inputs=[user_input, chat_history], outputs=[chat_history, user_input])

        # Custom CSS styling
        demo.css = """
        /* Body and Container Styling */
        .gradio-container {
            background: linear-gradient(135deg, #FF9A8B, #FF6A00);  /* Gradient background with warm colors */
            border-radius: 15px;
            box-shadow: 0px 6px 30px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
            padding: 50px;
            width: 70%;  /* Adjust width for centering */
            margin: 0 auto;  /* Centering the container */
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Professional font */
        }

        /* Title Styling */
        .gradio-title {
            font-size: 36px;
            font-weight: 700;
            color: #ffffff;  /* White color for contrast */
            text-align: center;
            margin-bottom: 20px;
        }

        /* Description Styling */
        .gradio-description {
            font-size: 18px;
            color: #eeeeee;  /* Light gray text for description */
            text-align: center;
            margin-bottom: 30px;
        }

        /* Chat History Box Styling */
        #chat-history {
            font-size: 16px;
            border-radius: 12px;
            border: none;
            padding: 14px;
            background: rgba(255, 255, 255, 0.9);  /* Slight transparent white background */
            color: #444;
            margin-bottom: 20px;
            height: 300px;
            overflow-y: auto;
            font-family: 'Roboto', sans-serif;
            box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);  /* Soft shadow for chat history */
        }

        /* Input Textbox Styling */
        #user-input-textbox {
            font-size: 16px;
            border-radius: 10px;
            border: none;
            padding: 12px;
            width: 100%;
            margin-bottom: 15px;
            background-color: #FFFFFF;
            font-family: 'Roboto', sans-serif;
            transition: background-color 0.3s ease;  /* Smooth transition for hover effect */
        }

        #user-input-textbox:focus {
            background-color: #FFFFFF;  /* Light gray background on focus */
            border-color: #FF6A00;  /* Orange border on focus */
        }

        /* Submit Button Styling */
        .gradio-button {
            background-color: #3A9FD6;  /* Blue color for submit button */
            color: white;
            padding: 14px 28px;
            border-radius: 8px;
            box-shadow: 0px 6px 30px H000000; /* Soft shadow for depth */
            border: none;
            font-size: 18px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease-in-out;
        }

        .gradio-button:hover {
            background-color: #FF6A00;  /* Orange color on hover */
            transform: scale(1.05);  /* Slight button scaling on hover */
        }

        /* Adjust padding and margins */
        .gradio-block {
            padding: 0;
        }
        .gradio-row {
            margin-bottom: 25px;
        }
        """

    demo.launch()

launch_gradio_interface()