File size: 2,918 Bytes
422cae6
 
 
 
d94240d
 
 
 
 
 
 
 
 
 
 
 
 
 
422cae6
e4f79b8
d94240d
614613a
 
 
 
e4f79b8
 
 
 
 
614613a
e4f79b8
 
 
 
 
 
614613a
e4f79b8
614613a
 
 
e4f79b8
614613a
e4f79b8
614613a
 
e4f79b8
614613a
 
 
e4f79b8
 
 
 
 
 
 
 
 
 
 
 
d94240d
 
422cae6
d94240d
422cae6
e4f79b8
 
422cae6
 
 
 
d94240d
422cae6
 
d94240d
422cae6
e4f79b8
 
 
 
 
 
 
422cae6
d94240d
 
 
 
 
 
 
 
 
 
 
 
 
 
 
422cae6
 
 
 
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
import gradio as gr
from utils import generate_response

# Define chatbot interaction function
def chat(user_input, chat_history):
    try:
        # Generate response
        response = generate_response(user_input)
        # Update chat history
        chat_history.append(("User", user_input))
        chat_history.append(("AI", response))
        # Format chat history for display
        formatted_history = "\n".join(
            [f"{role}: {message}" for role, message in chat_history]
        )
        return formatted_history, chat_history
    except Exception as e:
        return f"Error: {e}", chat_history

# Create Gradio interface with vertical alignment and background color
with gr.Blocks(css="""
    body {
        background-color: #121212;
        color: #f1f1f1;
        font-family: Arial, sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
    }
    .gradio-container {
        width: 100%;
        max-width: 600px;
        background-color: #1e1e1e;
        padding: 20px;
        border-radius: 10px;
    }
    .gradio-container .textbox, .gradio-container .button {
        background-color: #333;
        color: #f1f1f1;
        border: 1px solid #444;
        border-radius: 8px;
    }
    .gradio-container .textbox:focus, .gradio-container .button:focus {
        border-color: #007bff;
    }
    .gradio-container .button:hover {
        background-color: #007bff;
        cursor: pointer;
    }
    .textbox {
        margin-bottom: 15px;
    }
    #chatbox {
        height: 400px;
        overflow-y: auto;
        border: 2px solid #444;
        padding: 15px;
        border-radius: 8px;
        background-color: #2a2a2a;
        color: #f1f1f1;
        margin-bottom: 20px;
    }
""") as demo:
    gr.Markdown("## 🤖 Professional Groq Chatbot")
    gr.Markdown("Type your message below to chat with the AI!")

    # Define layout with vertical alignment
    with gr.Column():
        user_input = gr.Textbox(
            label="Your Message",
            placeholder="Ask me anything!",
            lines=2,
            interactive=True,
        )
        submit_button = gr.Button("Send")
        clear_button = gr.Button("Clear Chat")

        chatbot_output = gr.Textbox(
            label="Chat History",
            placeholder="AI's responses will appear here.",
            lines=15,
            interactive=False,
            elem_id="chatbox",
        )

    # State to hold chat history
    chat_history = gr.State([])

    # Button functionalities
    submit_button.click(
        fn=chat,
        inputs=[user_input, chat_history],
        outputs=[chatbot_output, chat_history],
    )

    clear_button.click(
        fn=lambda: ("", []),
        inputs=[],
        outputs=[chatbot_output, chat_history],
    )

# Launch locally
if __name__ == "__main__":
    demo.launch()