Upload 3 files

app.py

@@ -0,0 +1,134 @@
+import gradio as gr
+import requests
+import time
+import ast
+import os
+
+## Adding the Theme here ##
+
+wordlift_theme = gr.themes.Soft(
+    primary_hue=gr.themes.Color(
+        c50="#007AFF",
+        c100="rgba(0, 122, 255, 0.2)",
+        c200="#007AFF",
+        c300="rgba(0, 122, 255, 0.32)",
+        c400="rgba(0, 122, 255, 0.32)",
+        c500="rgba(0, 122, 255, 1.0)",
+        c600="rgba(0, 122, 255, 1.0)",
+        c700="rgba(0, 122, 255, 0.32)",
+        c800="rgba(0, 122, 255, 0.32)",
+        c900="#007AFF",
+        c950="#007AFF",
+    ),
+    secondary_hue=gr.themes.Color(
+        c50="#576b95",
+        c100="#576b95",
+        c200="#576b95",
+        c300="#576b95",
+        c400="#576b95",
+        c500="#576b95",
+        c600="#576b95",
+        c700="#576b95",
+        c800="#576b95",
+        c900="#576b95",
+        c950="#576b95",
+    ),
+    neutral_hue=gr.themes.Color(
+        name="gray",
+        c50="#f9fafb",
+        c100="#f3f4f6",
+        c200="#e5e7eb",
+        c300="#d1d5db",
+        c400="#B2B2B2",
+        c500="#808080",
+        c600="#636363",
+        c700="#515151",
+        c800="#393939",
+        c900="#272727",
+        c950="#171717",
+    ),
+    radius_size=gr.themes.sizes.radius_sm,
+).set(
+    button_primary_background_fill="#2196F3",
+    button_primary_background_fill_dark="#2196F3",
+    button_primary_background_fill_hover="#007AFF",
+    button_primary_border_color="#2196F3",
+    button_primary_border_color_dark="#2196F3",
+    button_primary_text_color="#FFFFFF",
+    button_primary_text_color_dark="#FFFFFF",
+    button_secondary_background_fill="#F2F2F2",
+    button_secondary_background_fill_dark="#2B2B2B",
+    button_secondary_text_color="#393939",
+    button_secondary_text_color_dark="#FFFFFF",
+    # background_fill_primary="#F7F7F7",
+    # background_fill_primary_dark="#1F1F1F",
+    block_title_text_color="*primary_500",
+    block_title_background_fill="*primary_100",
+    input_background_fill="#F6F6F6",
+)
+
+# _________________________________________________________________#
+
+
+def main():
+    # Load CSS
+    css_path = os.path.join(os.getcwd(), "assets", "custom.css")
+    app = gr.Interface(fn=response, inputs=[msg, chatbot], outputs=[msg, chatbot], server_name="localhost")
+    app.load_css(css_path)
+    app.launch(share=True, inline=True)
+
+def bot(user_message, history):
+    # POST request to the API
+    response = requests.post(
+        'https://langchain-cd369f3121.wolf.jina.ai/ask',
+        headers={'accept': 'application/json', 'Content-Type': 'application/json'},
+        json={"input": user_message, "envs": {}}
+    )
+    # Extract the bot's response from the API response
+    data_str = response.json()['result']
+
+    # Print out the response status and content for debugging
+    print("Response status:", response.status_code)
+    print("Response content:", response.content)
+
+    # Try to parse the response as a tuple
+    try:
+        data = ast.literal_eval(data_str)
+        # Check if the parsed data is a tuple with sources
+        if isinstance(data, tuple) and len(data) == 2:
+            bot_message = data[0]
+            sources = ', '.join(data[1])
+            # Update the chat history with the bot's response and sources
+            history.append([user_message, f"{bot_message} (Ref: {sources})"])
+        else:
+            raise ValueError  # Not a tuple with sources, treat it as a plain text message
+    except (SyntaxError, ValueError):
+        # The response is just a plain text message
+        bot_message = data_str
+        # Update the chat history with the bot's response
+        history.append([user_message, bot_message])
+
+    return history
+
+#gr.Chatbot.postprocess = postprocess
+
+with open("/Users/cyberandy/Documents/GitHub/langchain-wl-chat/wl-chat/assets/custom.css", "r", encoding="utf-8") as f:
+    customCSS = f.read()
+
+with gr.Blocks(css=customCSS, theme=wordlift_theme) as demo:
+    chatbot = gr.Chatbot(elem_id="chuanhu_chatbot").style(height="100%")
+    msg = gr.Textbox(label=" 🪄", placeholder="Type a message to the bot and press enter").style(container=False)
+    clear = gr.Button("🧹 Start fresh")
+
+    response = msg.submit(bot, [msg, chatbot], [chatbot], queue=False)
+    response.then(lambda: gr.update(interactive=True), None, [msg], queue=False)
+
+    clear.click(lambda: None, None, chatbot, queue=False)
+
+#demo = gr.Interface(fn=bot, inputs=msg, outputs=chatbot, theme="dark", title="WL-Chat", description="A chatbot to interact with WordLift's blog.")
+
+demo.queue()
+demo.launch(share=True, inline=True)
+
+if __name__ == "__main__":
+    main()

assets/custom.css

@@ -0,0 +1,137 @@
+:root {
+    --chatbot-color-light: #F3F3F3;
+    --chatbot-color-dark: #121111;
+}
+
+/* status_display */
+#status_display {
+    display: flex;
+    min-height: 2.5em;
+    align-items: flex-end;
+    justify-content: flex-end;
+}
+
+#status_display p {
+    font-size: .85em;
+    font-family: monospace;
+    color: var(--body-text-color-subdued);
+}
+
+
+
+/* usage_display */
+#usage_display {
+    height: 1em;
+}
+
+#usage_display p {
+    padding: 0 1em;
+    font-size: .85em;
+    font-family: monospace;
+    color: var(--body-text-color-subdued);
+}
+
+/* list */
+ol:not(.options),
+ul:not(.options) {
+    padding-inline-start: 2em !important;
+}
+
+/* Thank @Keldos-Li for fixing it */
+/* Light mode (default) */
+#chuanhu_chatbot {
+    background-color: var(--chatbot-color-light) !important;
+    color: #000000 !important;
+}
+
+[data-testid="bot"] {
+    background-color: #FFFFFF !important;
+}
+
+[data-testid="user"] {
+    background-color: #95EC69 !important;
+}
+
+/* Dark mode */
+.dark #chuanhu_chatbot {
+    background-color: var(--chatbot-color-dark) !important;
+    color: #FFFFFF !important;
+}
+
+.dark [data-testid="bot"] {
+    background-color: #2C2C2C !important;
+}
+
+.dark [data-testid="user"] {
+    background-color: #26B561 !important;
+}
+
+#chuanhu_chatbot {
+    height: 100%;
+    min-height: 400px;
+}
+
+[class *="message"] {
+    border-radius: var(--radius-xl) !important;
+    border: none;
+    padding: var(--spacing-xl) !important;
+    font-size: var(--text-md) !important;
+    line-height: var(--line-md) !important;
+    min-height: calc(var(--text-md)*var(--line-md) + 2*var(--spacing-xl));
+    min-width: calc(var(--text-md)*var(--line-md) + 2*var(--spacing-xl));
+}
+
+[data-testid="bot"] {
+    max-width: 85%;
+    border-bottom-left-radius: 0 !important;
+}
+
+[data-testid="user"] {
+    max-width: 85%;
+    width: auto !important;
+    border-bottom-right-radius: 0 !important;
+}
+
+/* Table */
+table {
+    margin: 1em 0;
+    border-collapse: collapse;
+    empty-cells: show;
+}
+
+td,
+th {
+    border: 1.2px solid var(--border-color-primary) !important;
+    padding: 0.2em;
+}
+
+thead {
+    background-color: rgba(175, 184, 193, 0.2);
+}
+
+thead th {
+    padding: .5em .2em;
+}
+
+/* Inline code */
+#chuanhu_chatbot code {
+    display: inline;
+    white-space: break-spaces;
+    border-radius: 6px;
+    margin: 0 2px 0 2px;
+    padding: .2em .4em .1em .4em;
+    background-color: rgba(175, 184, 193, 0.2);
+}
+
+/* Code block */
+#chuanhu_chatbot pre code {
+    display: block;
+    overflow: auto;
+    white-space: pre;
+    background-color: hsla(0, 0%, 0%, 80%) !important;
+    border-radius: 10px;
+    padding: 1.4em 1.2em 0em 1.4em;
+    margin: 1.2em 2em 1.2em 0.5em;
+    color: #FFF;
+    box-shadow: 6px 6px 16px hsla(0, 0%, 0%, 0.2);
+}