• AI By Brett
  • Posts
  • Create AI Learning app with OpenAI,Streamlit and Eleven Labs

Create AI Learning app with OpenAI,Streamlit and Eleven Labs

Create Your First AI App

Author

bretton gitonga
March 14, 2024

Exploring the Learner App: Your Interactive Learning Companion

In an era where technology and education intersect more than ever, the Learner app emerges as a beacon of innovation for students and educators alike. Built on Streamlit and integrating OpenAI's cutting-edge AI models, this app is designed to transform your learning materials into an interactive, accessible, and engaging educational journey. Let's dive into the details of this powerful tool.

Introduction to the Learner App

The Learner app is not just another educational tool; it's a gateway to maximizing the potential of your learning materials. By leveraging AI to query documents, this app offers personalized assistance, making the search for information not only efficient but also intuitive.

Core Components of the Learner App

Streamlit Framework

At its core, the Learner app utilizes Streamlit, a popular open-source app framework that is beloved for its simplicity and efficiency in turning data scripts into shareable web apps. This choice ensures a smooth user experience and easy access to the app's features.

OpenAI Integration

The heart of the Learner app's functionality lies in its integration with OpenAI's models. By employing Llama Index and OpenAI services, the app can understand and process natural language queries, offering responses that are both relevant and insightful.

A key feature of the Learner app is its ability to index and search documents. Whether it's PDFs stored in a directory or articles online, the app consolidates these materials, making them searchable through a VectorStoreIndex powered by a service context optimized for learning assistance.

Customized User Interface

The Learner app goes beyond functionality to ensure an appealing visual and auditory experience. Custom icons for users and assistants, alongside a dedicated logo, create a welcoming and personalized interface. Furthermore, the app incorporates CSS styles for chat messages, enhancing the readability and aesthetics of interactions.

How the Learner App Works

  1. Setup and Configuration: Upon launching, the app sets up its environment, including the Streamlit page configuration and OpenAI API keys, ensuring a secure and optimized performance.

  2. Loading and Indexing Data: The app begins by loading documents from specified directories and web URLs. These documents are then indexed, creating a searchable database that forms the foundation of the app's query capabilities.

  3. Service Context Creation: To tailor the AI's response to educational queries, the app sets up a service context with predefined settings, ensuring that the AI assistance provided is both appropriate and effective.

  4. Interactive Chat Interface: At the heart of the app is its chat interface, where users can input their questions. This interface is not only functional but also visually engaging, with custom styling for messages and the inclusion of audio responses for an enriched learning experience.

  5. Text-to-Speech Functionality: Recognizing the diverse needs of learners, the app incorporates text-to-speech technology, converting the AI assistant's text responses into audio. This feature supports accessibility and caters to different learning preferences.

SET UP AND INSTALLATION

pip install llama-index
pip install streamlit
pip install llama-index-readers-web

THE CODE

Imports

import streamlit as st
from llama_index.llms.openai import OpenAI
import openai
from llama_index.core import VectorStoreIndex, SimpleDirectoryReader, ServiceContext
from llama_index.readers.web import SimpleWebPageReader
import requests
import tempfile

ICONS

user_icon = "./icons/student.png"
assistant_icon = "./icons/assistant1.png"
logo = "./icons/logoass.png"

STREAMLIT SET UP

# streamlit app config
st.set_page_config(
    page_title="Learner",
    page_icon="",
    layout="centered",
    initial_sidebar_state="auto",
)

st.title = "Learning Helper"
with st.container() as title_container:
    st.info("Ability to query all your documents")

st.image("./icons/logoass.png")

CSS

st.markdown(
    """
<style>
    .title-container {
    font-family: Arial, sans-serif;
    
    }
    .block-container {
        padding-top: 32px;
        padding-bottom: 32px;
        padding-left: 0;
        padding-right: 0;
    }

    .main-header {
        font-size: 24px;
    }

    /* Add your chat message styles here */
    .chat-message {
        border-radius: 25px;
        padding: 10px;
        margin-bottom: 10px; /* Add space below each message */
        color: white;
    }

    .user-message {
        background-color: #002651; /* Light blue background for user messages */
        color: white;
    }

    .assistant-message {
        background-color: #581b98; /* Light purple background for assistant messages */
    }

    /* Additional styles to space out audio elements */
    .audio-container {
        margin-top: 5px; /* Add space above the audio player */
        margin-bottom: 15px; /* Add space below the audio player */
    }
</style>
""",
    unsafe_allow_html=True,
)

SET UP OPEN AI KEY

# setupOpenai key

openai.api_key = st.secrets.openaikey

Exploring the Learner App: Your Interactive Learning Companion

In an era where technology and education intersect more than ever, the Learner app emerges as a beacon of innovation for students and educators alike. Built on Streamlit and integrating OpenAI's cutting-edge AI models, this app is designed to transform your learning materials into an interactive, accessible, and engaging educational journey. Let's dive into the details of this powerful tool.

Introduction to the Learner App

The Learner app is not just another educational tool; it's a gateway to maximizing the potential of your learning materials. By leveraging AI to query documents, this app offers personalized assistance, making the search for information not only efficient but also intuitive.

Core Components of the Learner App

Streamlit Framework

At its core, the Learner app utilizes Streamlit, a popular open-source app framework that is beloved for its simplicity and efficiency in turning data scripts into shareable web apps. This choice ensures a smooth user experience and easy access to the app's features.

OpenAI Integration

The heart of the Learner app's functionality lies in its integration with OpenAI's models. By employing Llama Index and OpenAI services, the app can understand and process natural language queries, offering responses that are both relevant and insightful.

A key feature of the Learner app is its ability to index and search documents. Whether it's PDFs stored in a directory or articles online, the app consolidates these materials, making them searchable through a VectorStoreIndex powered by a service context optimized for learning assistance.

Customized User Interface

The Learner app goes beyond functionality to ensure an appealing visual and auditory experience. Custom icons for users and assistants, alongside a dedicated logo, create a welcoming and personalized interface. Furthermore, the app incorporates CSS styles for chat messages, enhancing the readability and aesthetics of interactions.

How the Learner App Works

  1. Setup and Configuration: Upon launching, the app sets up its environment, including the Streamlit page configuration and OpenAI API keys, ensuring a secure and optimized performance.

  2. Loading and Indexing Data: The app begins by loading documents from specified directories and web URLs. These documents are then indexed, creating a searchable database that forms the foundation of the app's query capabilities.

  3. Service Context Creation: To tailor the AI's response to educational queries, the app sets up a service context with predefined settings, ensuring that the AI assistance provided is both appropriate and effective.

  4. Interactive Chat Interface: At the heart of the app is its chat interface, where users can input their questions. This interface is not only functional but also visually engaging, with custom styling for messages and the inclusion of audio responses for an enriched learning experience.

  5. Text-to-Speech Functionality: Recognizing the diverse needs of learners, the app incorporates text-to-speech technology, converting the AI assistant's text responses into audio. This feature supports accessibility and caters to different learning preferences.

SET UP AND INSTALLATION

pip install llama-index
pip install streamlit
pip install llama-index-readers-web

THE CODE

Imports

import streamlit as st
from llama_index.llms.openai import OpenAI
import openai
from llama_index.core import VectorStoreIndex, SimpleDirectoryReader, ServiceContext
from llama_index.readers.web import SimpleWebPageReader
import requests
import tempfile

ICONS

user_icon = "./icons/student.png"
assistant_icon = "./icons/assistant1.png"
logo = "./icons/logoass.png"

STREAMLIT SET UP

# streamlit app config
st.set_page_config(
    page_title="Learner",
    page_icon="",
    layout="centered",
    initial_sidebar_state="auto",
)

st.title = "Learning Helper"
with st.container() as title_container:
    st.info("Ability to query all your documents")

st.image("./icons/logoass.png")

CSS

st.markdown(
    """
<style>
    .title-container {
    font-family: Arial, sans-serif;
    
    }
    .block-container {
        padding-top: 32px;
        padding-bottom: 32px;
        padding-left: 0;
        padding-right: 0;
    }

    .main-header {
        font-size: 24px;
    }

    /* Add your chat message styles here */
    .chat-message {
        border-radius: 25px;
        padding: 10px;
        margin-bottom: 10px; /* Add space below each message */
        color: white;
    }

    .user-message {
        background-color: #002651; /* Light blue background for user messages */
        color: white;
    }

    .assistant-message {
        background-color: #581b98; /* Light purple background for assistant messages */
    }

    /* Additional styles to space out audio elements */
    .audio-container {
        margin-top: 5px; /* Add space above the audio player */
        margin-bottom: 15px; /* Add space below the audio player */
    }
</style>
""",
    unsafe_allow_html=True,
)

SET UP OPEN AI KEY

# setupOpenai key

openai.api_key = st.secrets.openaikey

SET UP LOADING DATA

# function to load and index data


@st.cache_resource(show_spinner=False)
def load_data():
    with st.spinner("Loading and indexing your documents"):

        directory_reader = SimpleDirectoryReader(input_dir="./data", recursive=True)
        docs_from_dir = directory_reader.load_data()

        # load web pages

        web_page_urls = [
            "https://www.coursera.org/articles/what-is-artificial-intelligence.html"
        ]

        web_reader = SimpleWebPageReader(html_to_text=True)
        docs_from_web = web_reader.load_data(web_page_urls)

        # combine
        docs = docs_from_dir + docs_from_web

        # create service context
        service_context = ServiceContext.from_defaults(
            llm=OpenAI(
                model="gpt-3.5-turbo",
                temperature=0.5,
                system_prompt="you are a learning assistent - provide content in an ordered form",
            )
        )

        # index
        index = VectorStoreIndex.from_documents(docs, service_context=service_context)

        return index


index = load_data()

CHATTING HISTORY

# chat history
if "messages" not in st.session_state:    st.session_state.messages = [    { "role": "assistant",            "content": "Ask me anything on your documents",            "audio": None,
  }    ]

# chat engine
if "chat_engine" not in st.session_state:    st.session_state.chat_engine = index.as_chat_engine(verbose=True)

TTS

# function tts
def text_to_speech(text):
    api_url = "https://api.elevenlabs.io/v1/text-to-speech/tzYzGF8QPOE4A9WGNE5h"
    headers = {
        "xi-api-key": st.secrets.elevenlabsapikey,
        "Content-Type": "application/json",
    }

    payload = {
        "text": text,
        "model_id": "eleven_multilingual_v2",
        "voice_settings": {"stability": 0.75, "similarity_boost": 0.75},
    }
    response = requests.post(api_url, json=payload, headers=headers)
    if response.status_code == 200:
        return response.content
    else:
        st.error("Failed to get audio from ElevenLabs: " + response.text)
        return None

Display Chat Messages

def display_chat_messages(messages):
    for message in messages:
        # Determine the CSS class based on the message role
        message_class = (
            "user-message" if message["role"] == "user" else "assistant-message"
        )

        # Display the message with styling
        col1, col2 = st.columns([1, 18], gap="small")
        with col1:
            st.image(message.get("icon", assistant_icon), width=30)  # Display the icon

        with col2:
            # Wrap the message content in a div with the appropriate class for styling
            st.markdown(
                f"""
            <div class="chat-message {message_class}">
                {message["content"]}
            </div>
            """,
                unsafe_allow_html=True,
            )

            # If there's audio, wrap it in a div with the audio-container class for spacing
            if message.get("audio"):
                st.markdown(
                    f"""
                <div class="audio-container">
                """,
                    unsafe_allow_html=True,
                )
                st.audio(message["audio"], format="audio/mp3")
                st.markdown(
                    f"""
                </div>
                """,
                    unsafe_allow_html=True,
                )


# Incorporate spinner around the response generation and TTS processing
if prompt := st.chat_input("Your question"):
    # Append the user message to the chat history first
    st.session_state.messages.append(
        {"role": "user", "content": prompt, "icon": user_icon}
    )

    # Use spinner while waiting for the assistant's response and processing TTS
    with st.spinner("Thinking..."):
        response = st.session_state.chat_engine.chat(
            prompt
        )  # Generate the assistant's response
        audio_content = text_to_speech(
            response.response
        )  # Generate audio from the response
        audio_path = None
        if audio_content:
            with tempfile.NamedTemporaryFile(delete=False, suffix=".mp3") as fp:
                fp.write(audio_content)
                fp.flush()
                audio_path = fp.name

    # Append the assistant's message and audio to the chat history after processing
    st.session_state.messages.append(
        {
            "role": "assistant",
            "content": response.response,
            "icon": assistant_icon,
            "audio": audio_path,
        }
    )

# Ensure to initialize `st.session_state.messages` at the beginning if not already done
if "messages" not in st.session_state:
    st.session_state.messages = []

# Display chat messages
display_chat_messages(st.session_state.messages)

Reply

or to participate.