Erstellung einer anpassbaren GUI-App für die Open-Assistant-API
Inhaltsverzeichnis
- Einleitung
- Architekturdiagramm der App
- Code-Erklärung und -Ausführung
- Verwendung von Streamlit
- Einrichten der virtuellen Umgebung
- Installation der erforderlichen Pakete
- Konfiguration der Streamlit-Seite
- Erstellung des App-Headers und der Benutzeroberfläche
- Verarbeitung der Benutzereingabe
- Definition der Sprachkette
- Generierung der Antworten
- Anzeige der Benutzer- und Assistenten-Nachrichten
- Erweiterte Funktionen und nächste Schritte
Erstellung einer Chatbot-App mit Open Assistant und Streamlit
In diesem Artikel werde ich Ihnen zeigen, wie Sie eine Chatbot-App erstellen können, die von Open Assistant und Streamlit-Technologie unterstützt wird. Wir werden die Architekturdiagramme erläutern, den Code Schritt für Schritt erklären und Ihnen eine detaillierte Anleitung geben, wie Sie die App auf Ihrem eigenen Computer ausführen können. Am Ende dieses Artikels werden Sie in der Lage sein, eine funktionsfähige Chatbot-App zu erstellen und mit Open Assistant-KI zu interagieren.
Einleitung
Chatbots sind in der heutigen digitalen Welt immer populärer geworden und finden Anwendung in verschiedenen Bereichen wie Kundenservice, E-Commerce und Unterhaltung. Diese KI-Modelle können Gespräche mit Benutzern führen und intelligente Antworten generieren.
In diesem Artikel werden wir Open Assistant verwenden, eine fortschrittliche Sprachmodellplattform, um einen Chatbot zu erstellen. Open Assistant basiert auf dem Konzept der Transfer Learning und kann für verschiedene Aufgaben des maschinellen Lernens verwendet werden. Streamlit ist ein Python-Paket, mit dem Sie benutzerfreundliche UIs für Datenanalyseanwendungen erstellen können.
Architekturdiagramm der App
Zuerst werfen wir einen Blick auf das Architekturdiagramm unserer Chatbot-App. Die App besteht aus einem Front-End und einem Back-End. Im Back-End verwenden wir Open Assistant als unser Sprachmodell, das die Antworten generiert. Im Front-End verwenden wir Streamlit, um Benutzereingaben entgegenzunehmen und die Antworten des Sprachmodells anzuzeigen. Die Kommunikation zwischen dem Front-End und dem Back-End erfolgt über die Streamlit Chat-Schnittstelle. Das folgende Diagramm veranschaulicht die Architektur der App.

Code-Erklärung und -Ausführung
Bevor wir den Code besprechen, müssen Sie sicherstellen, dass Sie die erforderlichen Pakete installiert haben und eine virtuelle Umgebung eingerichtet haben, um Konflikte mit anderen Python-Installationen auf Ihrem Computer zu vermeiden. Nehmen Sie die folgenden Schritte zur Einrichtung der Umgebung vor:
- Erstellen Sie eine virtuelle Umgebung, um Ihre Python-Umgebung zu isolieren:
python -m venv myenv
- Aktivieren Sie die virtuelle Umgebung:
source myenv/bin/activate
- Installieren Sie die erforderlichen Pakete aus der
requirements.txt
-Datei: pip install -r requirements.txt
- Erstellen Sie eine
.env
-Datei und fügen Sie Ihren Open Assistant API-Token hinzu: OPEN_ASSISTANT_TOKEN=your-token
Wenn Sie diese Schritte ausgeführt haben, sind Sie bereit, den Code der Chatbot-App auszuführen. Öffnen Sie Ihr Terminal oder Ihre Befehlszeile und navigieren Sie zum Verzeichnis, in dem sich die hugging_chat.py
-Datei befindet. Geben Sie den folgenden Befehl ein, um die App auszuführen:
streamlit run hugging_chat.py
Sobald der Streamlit-Server gestartet wurde, können Sie die App in Ihrem Webbrowser anzeigen und mit dem Chatbot interagieren.
Verwendung von Streamlit
Streamlit ist ein leistungsstarkes Python-Paket, mit dem Sie benutzerfreundliche Webanwendungen erstellen können. In unserer Chatbot-App verwenden wir Streamlit, um das Front-End zu erstellen und Benutzereingaben entgegenzunehmen.
Der Code für das Erstellen der Streamlit-Seite sieht folgendermaßen aus:
import streamlit as st
# Titel der Seite
st.set_page_config(page_title='Chatbot-App mit Open Assistant', layout='wide')
# Seitenleiste
st.sidebar.title('Quick Links')
st.sidebar.markdown('📘 [Streamlit-Dokumentation](https://docs.streamlit.io/)')
st.sidebar.markdown('🔗 [Streamlit Chat](https://chat.streamlit.io/)')
st.sidebar.markdown('🤖 [Open Assistant](https://openassistant.org/)')
# Seitenbereich
st.header('Persönlicher Assistent')
Die Streamlit-Seite besteht aus einer Titelleiste und einer Seitenleiste. In der Titelleiste geben wir den Namen der Chatbot-App an. In der Seitenleiste fügen wir Quick Links hinzu, die auf die Streamlit-Dokumentation, den Streamlit-Chat und das Open Assistant-Projekt verweisen. Im Hauptbereich der Seite fügen wir einen Header hinzu, der den Benutzer auf den persönlichen Assistenten aufmerksam macht.
Einrichten der virtuellen Umgebung
Bevor Sie die Chatbot-App ausführen können, müssen Sie eine virtuelle Umgebung einrichten, um Ihre Python-Installation sauber zu halten. Gehen Sie folgendermaßen vor, um eine virtuelle Umgebung zu erstellen und zu aktivieren:
python3 -m venv myenv # Virtuelle Umgebung erstellen
source myenv/bin/activate # Virtuelle Umgebung aktivieren
Nach dem Aktivieren der virtuellen Umgebung sind Sie bereit, die erforderlichen Pakete zu installieren und den Code auszuführen.
Installation der erforderlichen Pakete
Um die Chatbot-App mit Open Assistant und Streamlit auszuführen, müssen Sie die folgenden Pakete installieren:
streamlit
llm-chains
huggingface-hub
python-dotenv
Verwenden Sie den folgenden Befehl, um die Pakete zu installieren:
pip install streamlit llm-chains huggingface-hub python-dotenv
Nach der Installation der Pakete sind Sie bereit, den Code der Chatbot-App auszuführen.
Konfiguration der Streamlit-Seite
In dieser Phase konfigurieren wir die Streamlit-Seite und legen Ressourcen wie den Seitentitel, das Layout und die Seitensidebar fest.
import streamlit as st
# Konfiguration der Streamlit-Seite
st.set_page_config(page_title='Chatbot-App mit Open Assistant', layout='wide')
# Anzeige der Seitenleiste
st.sidebar.title('Quick Links')
st.sidebar.markdown('📘 [Streamlit-Dokumentation](https://docs.streamlit.io/)')
st.sidebar.markdown('🔗 [Streamlit Chat](https://chat.streamlit.io/)')
st.sidebar.markdown('🤖 [Open Assistant](https://openassistant.org/)')
# Anzeige des App-Headers
st.header('Persönlicher Assistent')
Der Code definiert den Seitentitel, das Layout und die Seitensidebar. Wir verwenden Markdown, um Links in der Seitenleiste hinzuzufügen, die auf die Streamlit-Dokumentation, den Streamlit-Chat und das Open Assistant-Projekt verweisen. Der Header "Persönlicher Assistent" wird im Hauptbereich der Seite angezeigt.
Erstellung des App-Headers und der Benutzeroberfläche
Der App-Header ist der oberste Teil der Seite und stellt den persönlichen Assistenten dar. In der Benutzeroberfläche werden die Benutzereingaben entgegengenommen und die Antworten des Assistenten angezeigt.
import streamlit as st
# Anzeige des App-Headers
st.header('Persönlicher Assistent')
# Benutzer-Interface für die Eingabe
user_input = st.text_input('Stellen Sie Ihre Frage hier ein:')
# Benutzer-Interface für die Ausgabe
response = st.empty()
# Anzeige von Benutzereingabe und Assistenten-Antwort
if user_input:
with st.spinner('Die Antwort wird generiert...'):
response.markdown(f'**Benutzer**: {user_input}')
response.markdown(f'**Assistent**: Ich überprüfe Ihre Frage...')
Der Code erstellt den App-Header "Persönlicher Assistent" und das Benutzer-Interface für die Eingabe. Das Benutzer-Interface besteht aus einem Textfeld, in das der Benutzer seine Frage eingeben kann. Die Ausgabe des Assistenten wird in einem leeren Abschnitt angezeigt. Wenn der Benutzer eine Frage eingibt, wird die Antwort generiert und unter der Benutzereingabe angezeigt.
Verarbeitung der Benutzereingabe
Nachdem der Benutzer seine Frage eingegeben hat, müssen wir die Eingabe verarbeiten und eine Antwort generieren. Dazu verwenden wir die LLM-Kette von Open Assistant.
import llm_chains as lc
# LLM-Kette von Open Assistant laden
llm = lc.LLMChain('open_assistant')
# Funktion zur Generierung einer Antwort
def generate_response(question):
prompt = f'prompter: {question} assistant:'
response = llm(full_text=prompt, max_length=100)
return response.generated_string
# Verarbeitung der Benutzereingabe
if user_input:
with st.spinner('Die Antwort wird generiert...'):
answer = generate_response(user_input)
response.markdown(f'**Benutzer**: {user_input}')
response.markdown(f'**Assistent**: {answer}')
Der Code lädt die LLM-Kette von Open Assistant und enthält eine Funktion zur Generierung der Antwort. Die Funktion verwendet die Benutzereingabe als Eingabe für die LLM-Kette und generiert eine Antwort. Die Antwort wird dann unter der Benutzereingabe angezeigt.