Upload 3 files
Browse files- app.py +134 -0
- assets/custom.css +137 -0
app.py
ADDED
@@ -0,0 +1,134 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
import gradio as gr
|
2 |
+
import requests
|
3 |
+
import time
|
4 |
+
import ast
|
5 |
+
import os
|
6 |
+
|
7 |
+
## Adding the Theme here ##
|
8 |
+
|
9 |
+
wordlift_theme = gr.themes.Soft(
|
10 |
+
primary_hue=gr.themes.Color(
|
11 |
+
c50="#007AFF",
|
12 |
+
c100="rgba(0, 122, 255, 0.2)",
|
13 |
+
c200="#007AFF",
|
14 |
+
c300="rgba(0, 122, 255, 0.32)",
|
15 |
+
c400="rgba(0, 122, 255, 0.32)",
|
16 |
+
c500="rgba(0, 122, 255, 1.0)",
|
17 |
+
c600="rgba(0, 122, 255, 1.0)",
|
18 |
+
c700="rgba(0, 122, 255, 0.32)",
|
19 |
+
c800="rgba(0, 122, 255, 0.32)",
|
20 |
+
c900="#007AFF",
|
21 |
+
c950="#007AFF",
|
22 |
+
),
|
23 |
+
secondary_hue=gr.themes.Color(
|
24 |
+
c50="#576b95",
|
25 |
+
c100="#576b95",
|
26 |
+
c200="#576b95",
|
27 |
+
c300="#576b95",
|
28 |
+
c400="#576b95",
|
29 |
+
c500="#576b95",
|
30 |
+
c600="#576b95",
|
31 |
+
c700="#576b95",
|
32 |
+
c800="#576b95",
|
33 |
+
c900="#576b95",
|
34 |
+
c950="#576b95",
|
35 |
+
),
|
36 |
+
neutral_hue=gr.themes.Color(
|
37 |
+
name="gray",
|
38 |
+
c50="#f9fafb",
|
39 |
+
c100="#f3f4f6",
|
40 |
+
c200="#e5e7eb",
|
41 |
+
c300="#d1d5db",
|
42 |
+
c400="#B2B2B2",
|
43 |
+
c500="#808080",
|
44 |
+
c600="#636363",
|
45 |
+
c700="#515151",
|
46 |
+
c800="#393939",
|
47 |
+
c900="#272727",
|
48 |
+
c950="#171717",
|
49 |
+
),
|
50 |
+
radius_size=gr.themes.sizes.radius_sm,
|
51 |
+
).set(
|
52 |
+
button_primary_background_fill="#2196F3",
|
53 |
+
button_primary_background_fill_dark="#2196F3",
|
54 |
+
button_primary_background_fill_hover="#007AFF",
|
55 |
+
button_primary_border_color="#2196F3",
|
56 |
+
button_primary_border_color_dark="#2196F3",
|
57 |
+
button_primary_text_color="#FFFFFF",
|
58 |
+
button_primary_text_color_dark="#FFFFFF",
|
59 |
+
button_secondary_background_fill="#F2F2F2",
|
60 |
+
button_secondary_background_fill_dark="#2B2B2B",
|
61 |
+
button_secondary_text_color="#393939",
|
62 |
+
button_secondary_text_color_dark="#FFFFFF",
|
63 |
+
# background_fill_primary="#F7F7F7",
|
64 |
+
# background_fill_primary_dark="#1F1F1F",
|
65 |
+
block_title_text_color="*primary_500",
|
66 |
+
block_title_background_fill="*primary_100",
|
67 |
+
input_background_fill="#F6F6F6",
|
68 |
+
)
|
69 |
+
|
70 |
+
# _________________________________________________________________#
|
71 |
+
|
72 |
+
|
73 |
+
def main():
|
74 |
+
# Load CSS
|
75 |
+
css_path = os.path.join(os.getcwd(), "assets", "custom.css")
|
76 |
+
app = gr.Interface(fn=response, inputs=[msg, chatbot], outputs=[msg, chatbot], server_name="localhost")
|
77 |
+
app.load_css(css_path)
|
78 |
+
app.launch(share=True, inline=True)
|
79 |
+
|
80 |
+
def bot(user_message, history):
|
81 |
+
# POST request to the API
|
82 |
+
response = requests.post(
|
83 |
+
'https://langchain-cd369f3121.wolf.jina.ai/ask',
|
84 |
+
headers={'accept': 'application/json', 'Content-Type': 'application/json'},
|
85 |
+
json={"input": user_message, "envs": {}}
|
86 |
+
)
|
87 |
+
# Extract the bot's response from the API response
|
88 |
+
data_str = response.json()['result']
|
89 |
+
|
90 |
+
# Print out the response status and content for debugging
|
91 |
+
print("Response status:", response.status_code)
|
92 |
+
print("Response content:", response.content)
|
93 |
+
|
94 |
+
# Try to parse the response as a tuple
|
95 |
+
try:
|
96 |
+
data = ast.literal_eval(data_str)
|
97 |
+
# Check if the parsed data is a tuple with sources
|
98 |
+
if isinstance(data, tuple) and len(data) == 2:
|
99 |
+
bot_message = data[0]
|
100 |
+
sources = ', '.join(data[1])
|
101 |
+
# Update the chat history with the bot's response and sources
|
102 |
+
history.append([user_message, f"{bot_message} (Ref: {sources})"])
|
103 |
+
else:
|
104 |
+
raise ValueError # Not a tuple with sources, treat it as a plain text message
|
105 |
+
except (SyntaxError, ValueError):
|
106 |
+
# The response is just a plain text message
|
107 |
+
bot_message = data_str
|
108 |
+
# Update the chat history with the bot's response
|
109 |
+
history.append([user_message, bot_message])
|
110 |
+
|
111 |
+
return history
|
112 |
+
|
113 |
+
#gr.Chatbot.postprocess = postprocess
|
114 |
+
|
115 |
+
with open("/Users/cyberandy/Documents/GitHub/langchain-wl-chat/wl-chat/assets/custom.css", "r", encoding="utf-8") as f:
|
116 |
+
customCSS = f.read()
|
117 |
+
|
118 |
+
with gr.Blocks(css=customCSS, theme=wordlift_theme) as demo:
|
119 |
+
chatbot = gr.Chatbot(elem_id="chuanhu_chatbot").style(height="100%")
|
120 |
+
msg = gr.Textbox(label=" 🪄", placeholder="Type a message to the bot and press enter").style(container=False)
|
121 |
+
clear = gr.Button("🧹 Start fresh")
|
122 |
+
|
123 |
+
response = msg.submit(bot, [msg, chatbot], [chatbot], queue=False)
|
124 |
+
response.then(lambda: gr.update(interactive=True), None, [msg], queue=False)
|
125 |
+
|
126 |
+
clear.click(lambda: None, None, chatbot, queue=False)
|
127 |
+
|
128 |
+
#demo = gr.Interface(fn=bot, inputs=msg, outputs=chatbot, theme="dark", title="WL-Chat", description="A chatbot to interact with WordLift's blog.")
|
129 |
+
|
130 |
+
demo.queue()
|
131 |
+
demo.launch(share=True, inline=True)
|
132 |
+
|
133 |
+
if __name__ == "__main__":
|
134 |
+
main()
|
assets/custom.css
ADDED
@@ -0,0 +1,137 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
:root {
|
2 |
+
--chatbot-color-light: #F3F3F3;
|
3 |
+
--chatbot-color-dark: #121111;
|
4 |
+
}
|
5 |
+
|
6 |
+
/* status_display */
|
7 |
+
#status_display {
|
8 |
+
display: flex;
|
9 |
+
min-height: 2.5em;
|
10 |
+
align-items: flex-end;
|
11 |
+
justify-content: flex-end;
|
12 |
+
}
|
13 |
+
|
14 |
+
#status_display p {
|
15 |
+
font-size: .85em;
|
16 |
+
font-family: monospace;
|
17 |
+
color: var(--body-text-color-subdued);
|
18 |
+
}
|
19 |
+
|
20 |
+
|
21 |
+
|
22 |
+
/* usage_display */
|
23 |
+
#usage_display {
|
24 |
+
height: 1em;
|
25 |
+
}
|
26 |
+
|
27 |
+
#usage_display p {
|
28 |
+
padding: 0 1em;
|
29 |
+
font-size: .85em;
|
30 |
+
font-family: monospace;
|
31 |
+
color: var(--body-text-color-subdued);
|
32 |
+
}
|
33 |
+
|
34 |
+
/* list */
|
35 |
+
ol:not(.options),
|
36 |
+
ul:not(.options) {
|
37 |
+
padding-inline-start: 2em !important;
|
38 |
+
}
|
39 |
+
|
40 |
+
/* Thank @Keldos-Li for fixing it */
|
41 |
+
/* Light mode (default) */
|
42 |
+
#chuanhu_chatbot {
|
43 |
+
background-color: var(--chatbot-color-light) !important;
|
44 |
+
color: #000000 !important;
|
45 |
+
}
|
46 |
+
|
47 |
+
[data-testid="bot"] {
|
48 |
+
background-color: #FFFFFF !important;
|
49 |
+
}
|
50 |
+
|
51 |
+
[data-testid="user"] {
|
52 |
+
background-color: #95EC69 !important;
|
53 |
+
}
|
54 |
+
|
55 |
+
/* Dark mode */
|
56 |
+
.dark #chuanhu_chatbot {
|
57 |
+
background-color: var(--chatbot-color-dark) !important;
|
58 |
+
color: #FFFFFF !important;
|
59 |
+
}
|
60 |
+
|
61 |
+
.dark [data-testid="bot"] {
|
62 |
+
background-color: #2C2C2C !important;
|
63 |
+
}
|
64 |
+
|
65 |
+
.dark [data-testid="user"] {
|
66 |
+
background-color: #26B561 !important;
|
67 |
+
}
|
68 |
+
|
69 |
+
#chuanhu_chatbot {
|
70 |
+
height: 100%;
|
71 |
+
min-height: 400px;
|
72 |
+
}
|
73 |
+
|
74 |
+
[class *="message"] {
|
75 |
+
border-radius: var(--radius-xl) !important;
|
76 |
+
border: none;
|
77 |
+
padding: var(--spacing-xl) !important;
|
78 |
+
font-size: var(--text-md) !important;
|
79 |
+
line-height: var(--line-md) !important;
|
80 |
+
min-height: calc(var(--text-md)*var(--line-md) + 2*var(--spacing-xl));
|
81 |
+
min-width: calc(var(--text-md)*var(--line-md) + 2*var(--spacing-xl));
|
82 |
+
}
|
83 |
+
|
84 |
+
[data-testid="bot"] {
|
85 |
+
max-width: 85%;
|
86 |
+
border-bottom-left-radius: 0 !important;
|
87 |
+
}
|
88 |
+
|
89 |
+
[data-testid="user"] {
|
90 |
+
max-width: 85%;
|
91 |
+
width: auto !important;
|
92 |
+
border-bottom-right-radius: 0 !important;
|
93 |
+
}
|
94 |
+
|
95 |
+
/* Table */
|
96 |
+
table {
|
97 |
+
margin: 1em 0;
|
98 |
+
border-collapse: collapse;
|
99 |
+
empty-cells: show;
|
100 |
+
}
|
101 |
+
|
102 |
+
td,
|
103 |
+
th {
|
104 |
+
border: 1.2px solid var(--border-color-primary) !important;
|
105 |
+
padding: 0.2em;
|
106 |
+
}
|
107 |
+
|
108 |
+
thead {
|
109 |
+
background-color: rgba(175, 184, 193, 0.2);
|
110 |
+
}
|
111 |
+
|
112 |
+
thead th {
|
113 |
+
padding: .5em .2em;
|
114 |
+
}
|
115 |
+
|
116 |
+
/* Inline code */
|
117 |
+
#chuanhu_chatbot code {
|
118 |
+
display: inline;
|
119 |
+
white-space: break-spaces;
|
120 |
+
border-radius: 6px;
|
121 |
+
margin: 0 2px 0 2px;
|
122 |
+
padding: .2em .4em .1em .4em;
|
123 |
+
background-color: rgba(175, 184, 193, 0.2);
|
124 |
+
}
|
125 |
+
|
126 |
+
/* Code block */
|
127 |
+
#chuanhu_chatbot pre code {
|
128 |
+
display: block;
|
129 |
+
overflow: auto;
|
130 |
+
white-space: pre;
|
131 |
+
background-color: hsla(0, 0%, 0%, 80%) !important;
|
132 |
+
border-radius: 10px;
|
133 |
+
padding: 1.4em 1.2em 0em 1.4em;
|
134 |
+
margin: 1.2em 2em 1.2em 0.5em;
|
135 |
+
color: #FFF;
|
136 |
+
box-shadow: 6px 6px 16px hsla(0, 0%, 0%, 0.2);
|
137 |
+
}
|