cyberandy commited on
Commit
90712a8
·
1 Parent(s): 20f1c7e

Upload 3 files

Browse files
Files changed (2) hide show
  1. app.py +134 -0
  2. 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
+ }