Capstone_v2/app3.py

import streamlit as st
from streamlit_option_menu import option_menu
from langchain.memory import ConversationBufferWindowMemory
from langchain_community.chat_message_histories import StreamlitChatMessageHistory
from app import qa_bot
memory_storage = StreamlitChatMessageHistory(key="chat_messages")
memory = ConversationBufferWindowMemory(memory_key="chat_history", human_prefix="User", chat_memory=memory_storage, k=3)\

if 'error' not in st.session_state:
    st.session_state['error'] = []

def app_intro():
  return """
  <div style='text-align: left; padding: 20px; border-radius: 10px;'>
  <h1 style='text-align: center; color: #333;'>NaturalViz : Data Exploration and Visualization with NLP </h1>
  <h2 style='text-align: center; color: #666;'>Demo for Lablab.ai Mixtral hackathon </h2>

  <p style='font-size: 18px; color: #444;'>Welcome to NaturalViz!  This app explores how Language Models (LLMs) can help you visualize data  just by talking to it!. we originaly wrote NaturalViz to use OpenAI functions but now have been fully converted to use  Mistral-8x7B-Instruct </p>

  <h3 style='color: #737373;'>Key Features: </h3>
  <ul>
    <li>Turn natural language  into Python code  for visualizations! ✨</li>
    <li>Chat with a friendly bot  to discover insights in your data. </li>
    <li>Made with Langchain 0.1.0. </li>
  </ul>

  <h3 style='color: #737373;'>Under the Hood: ⚙️</h3>
  <p style='font-size: 16px;'>This app uses the  <a href="https://huggingface.co/mistralai/Mixtral-8x7B-Instruct-v0.1">Mistral-8x7B-Instruct-v0.1 LLM</a> to understand your questions and create visualizations. </p>

  <h3 style='color: #737373;'>Get Started: </h3>
  <p style='font-size: 16px;'>Ask your data questions in plain language and let the magic happen! 🪄 The bot is here to help if you need it. Dataset used: <a href="https://www.kaggle.com/datasets/crawford/80-cereals">80 Cereals</a> </p>
  </div>
  """


def how_use_intro():
    return """
    <div style='text-align: left; padding: 20px; border-radius: 10px;'>
    <h2 style='text-align: center; color: #333;'>Unlock Insights with NaturalViz! 🌐🔍</h2>
    <br>
    <h3 style='color: #777;'>How to Use:</h3>
    <ul style='font-size: 16px; color: #555;'>
    <li><b>NLP-Driven Visualization:</b> Head to the first tab to explore NLP-driven data visualizations. Enter your queries in natural language, click "Submit," and witness dynamic and personalized visual insights generated by the power of Language Models.</li>
    <li><b>Data Exploration Chatbot:</b> In the second tab, engage with our chatbot. Ask questions about the dataset, request specific visualizations, and let the chatbot guide you through the exploration process using the latest advancements in natural language understanding.</li>
    <li><b>Code and Analysis:</b> Delve into the generated code and analysis in the dedicated code section for the NLP-driven visualization. Gain insights into the methodology and technical prowess behind the visualizations, showcasing the experimental nature of our approach.</li>
    </ul>
    <br>
    </div>
"""

def tab2():

    col1, col2 = st.columns([1, 2])
    with col1:
        st.image("image.jpg", use_column_width=True)
    with col2:
        st.markdown(app_intro(), unsafe_allow_html=True)
    st.markdown(how_use_intro(),unsafe_allow_html=True) 


    github_link = '[<img src="https://badgen.net/badge/icon/github?icon=github&label">](https://github.com/ethanrom)'
    huggingface_link = '[<img src="https://img.shields.io/badge/%F0%9F%A4%97%20Hugging%20Face-Spaces-blue">](https://huggingface.co/ethanrom)'

    st.write(github_link + '&nbsp;&nbsp;&nbsp;' + huggingface_link, unsafe_allow_html=True)
    
    st.markdown("<p style='font-size: 14px; color: #777;'>Disclaimer: This app is a proof-of-concept and may not be suitable for real-world decisions. During the Hackthon period usage information are being recorded using Langsmith</p>", unsafe_allow_html=True)

def tab1():
    st.header("🗣️ Chat")

    for i, msg in enumerate(memory_storage.messages):
        name = "user" if i % 2 == 0 else "assistant"
        st.chat_message(name).markdown(msg.content)

    if user_input := st.chat_input("User Input"):

        with st.chat_message("user"):
            st.markdown(user_input)

        with st.spinner("Generating Response..."):

            with st.chat_message("assistant"):
                chain = qa_bot()
                zeroshot_agent_chain = get_agent_chain()
                
                response = zeroshot_agent_chain({"input": user_input})

                answer = response['output']
                st.markdown(answer)

    
    if st.sidebar.button("Clear Chat History"):
        memory_storage.clear()

def main():
    st.set_page_config(page_title="Virtual Tutor", page_icon=":memo:", layout="wide")

    #os.environ['LANGCHAIN_TRACING_V2'] = "true"
    #os.environ['LANGCHAIN_API_KEY'] == st.secrets['LANGCHAIN_API_KEY']

    tabs = ["Chat","Audio"]

    with st.sidebar:

        current_tab = option_menu("Select a Tab", tabs, menu_icon="cast")

    tab_functions = {
    "Chat": tab1,
    "Audio": tab2,
    }

    if current_tab in tab_functions:
        tab_functions[current_tab]()

if __name__ == "__main__":
    main()