app.py

import gradio as gr
from graph import init_my_graph, state
import argparse
from utils import init_flickr, flickr_get_image
print(gr.__version__)

def chat_interface(user_input, history):
    global state
    # Update the state with the user's question
    state["question"] = user_input
    
    # Create conversation history from Gradio's history
    history = history[-10:]

    conversation_history = "".join(
        f"\nQ: {msg['content']}" if msg['role'] == 'user' else f"\nA: {msg['content']}"
        for msg in history
    )
    state["conversation"] = conversation_history

    # state = graph.invoke(state)
    # print(state)
    # return state["answer"]
    message = ""
    for msg, mt in graph.stream(state, stream_mode="messages"):
        if mt["langgraph_node"] == "generate":
            message += msg.content
            if message.count("|") == 0:
                if len(message)>5:
                    yield message, ""
                else:
                    yield "Thinking...", ""
            elif message.count("|") == 1:
                yield "Thinking...", ""
            else:
                message_id = message.split("|")
                yield message_id[-1], message_id[1].strip()
        else:
            yield "Thinking...",""

def update_image(image_id):
    if image_id:
        return gr.update(label=image_id, visible=True, value=flickr_get_image(flickr, image_id))
    else:
        return gr.update(visible=False)

# Load the HTML for description
html_file = "data/description.html"
with open(html_file, "r") as file:
    description_content = file.read()
html_file = "data/logo.html"
with open(html_file, "r") as file:
    logo_content = file.read()

html_content = """
<div style="display: flex; align-items: center; justify-content: center; gap: 10px;">
    <a href="https://www.rau.ac.uk/" target="_blank" title="Visit RAU">
        <img src="https://media.glide.mailplus.co.uk/prod/images/gm_fit_300x450/69e4af470b53-uniroyal-agriculturalfull.png" 
             alt="RAU Logo" style="height: 50px; width: auto; max-width: 100px;">
    </a>
    <div style="width: 1px; height: 50px; background-color: black;"></div>
    <a href="https://www.nhm.ac.uk" target="_blank" title="Visit NHM">
        <img src="https://www.nhm.ac.uk/content/dam/nhm-www/press-office/MicrosoftTeams-image%20(4)%20(1).png" 
             alt="NHM Logo" style="height: 50px; width: auto; max-width: 100px;">
    </a>
</div>
"""

example_questions = ["What is your favourite flower?",
                     "What is the purpose of an herbarium in the 19th century?",
                    "Can you describe the oldest specimen in your collection?",
                    "Did you collect any plant specimen after 1850?",
                    "What plants did you collect near Bath, UK?",
                    "What plants have you found in the northernmost part of Britain?"]

placeholder_html = '''<div style="text-align: left; font-size: 18px; font-family: Arial, sans-serif; max-width: 600px; line-height: 1.5;">
    <h2 style="font-size: 24px">Welcome to Royal Agricultural University!</h2>
    <p>
        I am Samuel Pickworth Woodward, a dedicated 19th-century botanist and paleontologist, 
        passionate about the study of plants and herbaria. My fascination lies in exploring the vast diversity of plant life and preserving it for future generations 
        through meticulous herbaria collections.  
    </p>
    <p>
        You can ask me any questions related to herbarium. Click on the questions below to get started quickly,  
        or ask your own question!
    </p>
</div>
'''

# Main interface
with gr.Blocks(css="""
    .full-screen {
        height: 90vh;
        display: flex;
        flex-direction: row; 
        box-sizing: border-box;
    }
    .chat-container {
        height: 90vh;
        box-sizing: border-box;
    }
""") as chat:
    im_display = gr.State("")

    with gr.Row(elem_classes="full-screen"): 
        with gr.Column(scale=3, elem_classes="chat-container"):  
            chatbot = gr.Chatbot(
                height="75vh",
                show_copy_button=True,
                show_copy_all_button=True,
                placeholder=placeholder_html,
                type="messages")
            gr.ChatInterface(
                chat_interface,
                type="messages",
                chatbot=chatbot,
                examples=example_questions,
                cache_examples=False,
                additional_outputs=[im_display]
            )
        with gr.Column(scale=1): 
            gr.HTML(description_content)
            displayed_image = gr.Image(visible=False)
    # with gr.Row():
    #     gr.Markdown(html_content)

    im_display.change(fn=update_image, inputs=im_display, outputs=[displayed_image])

if __name__ == "__main__":
    # Set up argument parser
    parser = argparse.ArgumentParser(description="Initialize and launch Gradio app with custom settings.")
    parser.add_argument('--model', type=str, default="gpt-4o", help="The model to use.")
    parser.add_argument('--metadata', type=str, default="data/my_metadata_correctname.csv", help="Path to the metadata file.")
    parser.add_argument('--prompt', type=str, default="data/prompt_rag_geo_gradio_img.txt", help="Path to the prompt file.")
    parser.add_argument('--debug', type=bool, default=False, help="Enable or disable debugging.")
    # Parse the arguments
    args = parser.parse_args()

    # Initialize the graph using the parsed arguments
    graph = init_my_graph(model=args.model, metadata=args.metadata, prompt=args.prompt, debug=args.debug)
    # flickr init
    flickr = init_flickr()
    # Launch the Gradio app
    chat.launch(share=False, ssr_mode=False)