Spaces:
Sleeping
Sleeping
Update app.py
Browse files
app.py
CHANGED
@@ -30,27 +30,32 @@ def respond(message, history, system_message, max_tokens, temperature, top_p):
|
|
30 |
|
31 |
# ChatGPT-style UI with modern styling
|
32 |
css = """
|
|
|
|
|
|
|
|
|
|
|
33 |
.gradio-container {
|
34 |
max-width: 900px;
|
35 |
margin: auto;
|
36 |
-
|
37 |
-
color: white;
|
38 |
}
|
39 |
.chat-container {
|
40 |
display: flex;
|
41 |
flex-direction: column;
|
42 |
-
height:
|
43 |
-
overflow:
|
44 |
padding: 20px;
|
45 |
border-radius: 10px;
|
46 |
background: #1E1E1E;
|
47 |
}
|
48 |
.chat-message {
|
49 |
max-width: 75%;
|
50 |
-
padding:
|
51 |
-
margin
|
52 |
border-radius: 10px;
|
53 |
font-size: 16px;
|
|
|
54 |
}
|
55 |
.user-message {
|
56 |
background-color: #007AFF;
|
@@ -66,39 +71,28 @@ css = """
|
|
66 |
border: none;
|
67 |
color: white;
|
68 |
border-radius: 8px;
|
69 |
-
padding:
|
70 |
font-size: 16px;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
71 |
}
|
72 |
"""
|
73 |
|
74 |
with gr.Blocks(css=css) as demo:
|
75 |
gr.Markdown("""
|
76 |
<h1 style='text-align: center; color: #FFFFFF;'>💬 AI Chat Assistant</h1>
|
77 |
-
<p style='text-align: center;'>A sleek
|
78 |
""")
|
79 |
|
80 |
-
with gr.Row():
|
81 |
-
system_message = gr.Textbox(
|
82 |
-
value="You are a helpful and intelligent assistant.",
|
83 |
-
label="System Message",
|
84 |
-
interactive=True,
|
85 |
-
show_label=False,
|
86 |
-
)
|
87 |
-
|
88 |
-
with gr.Row():
|
89 |
-
max_tokens = gr.Slider(
|
90 |
-
minimum=1, maximum=2048, value=512, step=1, label="Max Tokens"
|
91 |
-
)
|
92 |
-
temperature = gr.Slider(
|
93 |
-
minimum=0.1, maximum=4.0, value=0.7, step=0.1, label="Temperature"
|
94 |
-
)
|
95 |
-
top_p = gr.Slider(
|
96 |
-
minimum=0.1, maximum=1.0, value=0.95, step=0.05, label="Top-p"
|
97 |
-
)
|
98 |
-
|
99 |
chatbot = gr.ChatInterface(
|
100 |
respond,
|
101 |
-
additional_inputs=[
|
|
|
102 |
)
|
103 |
|
104 |
demo.launch()
|
|
|
30 |
|
31 |
# ChatGPT-style UI with modern styling
|
32 |
css = """
|
33 |
+
body {
|
34 |
+
background-color: #121212;
|
35 |
+
color: white;
|
36 |
+
font-family: Arial, sans-serif;
|
37 |
+
}
|
38 |
.gradio-container {
|
39 |
max-width: 900px;
|
40 |
margin: auto;
|
41 |
+
padding: 20px;
|
|
|
42 |
}
|
43 |
.chat-container {
|
44 |
display: flex;
|
45 |
flex-direction: column;
|
46 |
+
height: 80vh;
|
47 |
+
overflow-y: auto;
|
48 |
padding: 20px;
|
49 |
border-radius: 10px;
|
50 |
background: #1E1E1E;
|
51 |
}
|
52 |
.chat-message {
|
53 |
max-width: 75%;
|
54 |
+
padding: 12px 16px;
|
55 |
+
margin: 8px 0;
|
56 |
border-radius: 10px;
|
57 |
font-size: 16px;
|
58 |
+
display: inline-block;
|
59 |
}
|
60 |
.user-message {
|
61 |
background-color: #007AFF;
|
|
|
71 |
border: none;
|
72 |
color: white;
|
73 |
border-radius: 8px;
|
74 |
+
padding: 12px;
|
75 |
font-size: 16px;
|
76 |
+
width: 100%;
|
77 |
+
}
|
78 |
+
.controls {
|
79 |
+
display: flex;
|
80 |
+
justify-content: center;
|
81 |
+
gap: 10px;
|
82 |
+
margin-top: 10px;
|
83 |
}
|
84 |
"""
|
85 |
|
86 |
with gr.Blocks(css=css) as demo:
|
87 |
gr.Markdown("""
|
88 |
<h1 style='text-align: center; color: #FFFFFF;'>💬 AI Chat Assistant</h1>
|
89 |
+
<p style='text-align: center;'>A sleek, modern chatbot experience.</p>
|
90 |
""")
|
91 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
92 |
chatbot = gr.ChatInterface(
|
93 |
respond,
|
94 |
+
additional_inputs=[],
|
95 |
+
textbox=gr.Textbox(placeholder="Type a message...", lines=1, interactive=True, elem_classes="input-box"),
|
96 |
)
|
97 |
|
98 |
demo.launch()
|