# main application file initializing the gradio based ui and calling other # standard imports import os # external imports from fastapi import FastAPI import markdown import gradio as gr from uvicorn import run from gradio_iframe import iFrame # internal imports from backend.controller import interference from explanation.markup import color_codes # global Variables and js/css # creating FastAPI app and getting color codes app = FastAPI() coloring = color_codes() # defining custom css and js for certain environments css = """ .examples {text-align: start;} .seperatedRow {border-top: 1rem solid;}", """ # custom js to force lightmode in custom environments if os.environ["HOSTING"].lower() != "spaces": js = """ function () { gradioURL = window.location.href if (!gradioURL.endsWith('?__theme=light')) { window.location.replace(gradioURL + '?__theme=light'); } } """ else: js = "" # different functions to provide frontend abilities # function to load markdown files def load_md(path): # CREDIT: official python-markdown documentation ## see https://python-markdown.github.io/reference/) with open(path, "r", encoding="utf-8") as file: text = file.read() return markdown.markdown(text) # function to display the system prompt info def system_prompt_info(sys_prompt_txt): # display the system prompt using the Gradio Info component gr.Info(f"The system prompt was set to:\n {sys_prompt_txt}") # function to display the xai info def xai_info(xai_radio): # display the xai method using the Gradio Info component if xai_radio != "None": gr.Info(f"The XAI was set to:\n {xai_radio}") else: gr.Info("No XAI method was selected.") def model_info(model_radio): # displays the selected model using the Gradio Info component gr.Info(f"The following model was selected:\n {model_radio} ") # ui interface based on Gradio Blocks # see https://www.gradio.app/docs/interface) with gr.Blocks( css=css, js=js, title="Thesis Webapp Showcase", head="", ) as ui: # header row with markdown based text with gr.Row(): # markdown component to display the header gr.Markdown(""" # Thesis Demo - AI Chat Application with GODEL Interpretability powered by shap and attention visualization, ### Select between tabs below for the different views. """) # ChatBot tab used to chat with the AI chatbot with gr.Tab("AI ChatBot"): with gr.Row(): # markdown component to display the header of the current tab gr.Markdown(""" ### ChatBot Demo Chat with the AI ChatBot using the textbox below. Manipulate the settings in the row above, including the selection of the model, the system prompt and the XAI method. **See Explanations in the accordion above the chat.** """) # row with columns for the different settings with gr.Row(equal_height=True): # column that takes up 3/4 of the row with gr.Column(scale=2): # textbox to enter the system prompt system_prompt = gr.Textbox( label="System Prompt", info="Set the models system prompt, dictating how it answers.", # default system prompt is set to this in the backend placeholder=( "You are a helpful, respectful and honest assistant. Always" " answer as helpfully as possible, while being safe." ), ) # column that takes up 1/4 of the row with gr.Column(scale=1): # checkbox group to select the xai method xai_selection = gr.Radio( ["None", "SHAP", "Attention"], label="Interpretability Settings", info="Select a Interpretability Implementation to use.", value="None", interactive=True, show_label=True, ) # column that takes up 1/4 of the row with gr.Column(scale=1): # checkbox group to select the xai method model_selection = gr.Radio( ["GODEL", "Mistral"], label="Model Settings", info="Select a Model to use.", value="GODEL", interactive=True, show_label=True, ) # calling info functions on inputs/submits for different settings system_prompt.submit(system_prompt_info, [system_prompt]) xai_selection.input(xai_info, [xai_selection]) model_selection.input(model_info, [model_selection]) # row with chatbot ui displaying "conversation" with the model with gr.Row(equal_height=True): # group to display components closely together with gr.Group(elem_classes="border: 1px solid black;"): # accordion to display the normalized input explanation with gr.Accordion(label="Input Explanation", open=False): gr.Markdown(""" The explanations are based on 10 buckets that range between the lowest negative value (1 to 5) and the highest positive attribution value (6 to 10). **The legend shows the color for each bucket.** *HINT*: This works best in light mode. """) xai_text = gr.HighlightedText( color_map=coloring, label="Input Explanation", show_legend=True, show_label=False, ) # out of the box chatbot component with avatar images # see documentation: https://www.gradio.app/docs/chatbot chatbot = gr.Chatbot( layout="panel", show_copy_button=True, avatar_images=("./public/human.jpg", "./public/bot.jpg"), ) # extenable components for extra knowledge with gr.Accordion(label="Additional Knowledge", open=False): gr.Markdown(""" *Hint:* Add extra knowledge to see GODEL work the best. Knowledge doesn't work mith Mistral and will be ignored. """) # textbox to enter the knowledge knowledge_input = gr.Textbox( value="", label="Knowledge", max_lines=5, info="Add additional context knowledge.", show_label=True, ) user_prompt = gr.Textbox( label="Input Message", max_lines=5, info=""" Ask the ChatBot a question. """, show_label=True, ) # row with columns for buttons to submit and clear content with gr.Row(elem_classes=""): with gr.Column(): # out of the box clear button which clearn the given components (see # see: https://www.gradio.app/docs/clearbutton) clear_btn = gr.ClearButton([user_prompt, chatbot]) with gr.Column(): # submit button that calls the backend functions on click submit_btn = gr.Button("Submit", variant="primary") # row with content examples that get autofilled on click with gr.Row(elem_classes="examples"): # examples util component # see: https://www.gradio.app/docs/examples gr.Examples( label="Example Questions", examples=[ [ "How does a black hole form in space?", ( "Black holes are created when a massive star's core" " collapses after a supernova, forming an object with" " gravity so intense that even light cannot escape." ), ], [ ( "Explain the importance of the Rosetta Stone in" " understanding ancient languages." ), ( "The Rosetta Stone, an ancient Egyptian artifact, was key" " in decoding hieroglyphs, featuring the same text in three" " scripts: hieroglyphs, Demotic, and Greek." ), ], ["Does money buy happiness?", ""], ], inputs=[user_prompt, knowledge_input], ) # explanations tab used to provide explanations for a specific conversation with gr.Tab("Explanations"): # row with markdown component to display the header of the current tab with gr.Row(): gr.Markdown(""" ### Get Explanations for Conversations Get additional explanations for the last conversation you had with the AI ChatBot. Depending on the selected XAI method, different explanations are available. """) # row that displays the generated explanation of the model (if applicable) with gr.Row(): # wraps the explanation html to display it statically xai_interactive = iFrame( label="Interactive Explanation", value=( '

No Graphic' " to Display (Yet)

" ), show_label=True, height="400px", ) # functions to trigger the controller ## takes information for the chat and the xai selection ## returns prompt, history and xai data ## see backend/controller.py for more information submit_btn.click( interference, [ user_prompt, chatbot, knowledge_input, system_prompt, xai_selection, model_selection, ], [user_prompt, chatbot, xai_interactive, xai_text], ) # function triggered by the enter key user_prompt.submit( interference, [ user_prompt, chatbot, knowledge_input, system_prompt, xai_selection, model_selection, ], [user_prompt, chatbot, xai_interactive, xai_text], ) # final row to show legal information ## - credits, data protection and link to the License with gr.Tab(label="About"): # load about.md markdown gr.Markdown(value=load_md("public/about.md")) with gr.Accordion(label="Credits, Data Protection, License"): # load credits and dataprotection markdown gr.Markdown(value=load_md("public/credits_dataprotection_license.md")) # mount function for fastAPI Application app = gr.mount_gradio_app(app, ui, path="/") # launch function to launch the application if __name__ == "__main__": # use standard gradio launch option for hgf spaces if os.environ["HOSTING"].lower() == "spaces": # set password to deny public access ui.launch(auth=("htw", "berlin@123")) # otherwise run the application on port 8080 in reload mode ## for local development, uses Docker for Prod deployment run("main:app", port=8080, reload=True)