File size: 5,825 Bytes
56e08cb
8e764b1
 
 
a73dd24
 
8e764b1
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
56e08cb
8e764b1
a73dd24
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
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()