https://www.youtube.com/watch?v=paigg8e8lhk
Sie haben einen Chatbot in Python erstellt, aber es läuft nur in Ihrem Terminal. Was wäre, wenn Sie ihm eine schlanke Weboberfläche geben könnten, die jemand verwenden kann? Was wäre, wenn Sie es on-line für Freunde, potenzielle Arbeitgeber oder Kunden bereitstellen könnten, mit denen Sie interagieren können?
In diesem praktischen Tutorial verwandeln wir einen Befehlszeilen-Chatbot mit Streamlit in eine professionelle Webanwendung. Sie lernen, eine interaktive Schnittstelle mit anpassbaren Persönlichkeiten, Echtzeiteinstellungen zu erstellen und sie reside im Web bereitzustellen-alle ohne eine einzige Zeile von HTML, CSS oder JavaScript.
Am Ende dieses Tutorials verfügen Sie über eine bereitgestellte Internet-App, die Ihre KI-Entwicklungsfähigkeiten zeigt und Ihre Fähigkeit demonstriert, benutzergerichtete Anwendungen zu erstellen.
Warum eine Weboberfläche für Ihren Chatbot erstellen?
Ein Befehlszeilen-Chatbot ist für Entwickler beeindruckend, aber eine Weboberfläche spricht für alle. Portfolio-Gutachter, potenzielle Kunden und nicht-technische Benutzer können Ihre Arbeit sofort sehen und interagieren. Noch wichtiger ist, dass das Erstellen von Weboberflächen für KI-Anwendungen eine gefragte Fähigkeit ist, da Unternehmen zunehmend KI-Instruments bereitstellen möchten, die ihre Groups tatsächlich verwenden können.
Streamlit macht diesen Übergang nahtlos. Anstatt komplexe Internet-Frameworks zu lernen, verwenden Sie die Python-Syntax, von der Sie bereits wissen, dass sie professionell aussehende Anwendungen in Minuten und nicht in Tagen erstellen.
Was du bauen wirst
- Interaktiver Internet-Chatbot mit Echtzeit-Persönlichkeitsschalter
- Anpassbare Steuerelemente für AI -Parameter (Temperatur, Tokengrenzen)
- Professionelle Chat -Oberfläche mit Benutzer-/Assistent -Nachrichtenunterscheidung
- Funktionalität und Konversationsmanagement zurücksetzen
- Dwell -Bereitstellungen, die von jedem Webbrowser zugänglich sind
- Grundlage für fortschrittlichere AI -Anwendungen
Bevor Sie beginnen: Vorabstrukturierung
Folgen Sie diese vorbereitenden Schritte, um das Beste aus diesem Projekt zu machen:
1. Überprüfen Sie das Projekt
Erforschen Sie die Ziele und die Struktur dieses Projekts: Starten Sie das Projekt hier
2. Vervollständigen Sie Ihre Chatbot Basis
Wesentliche Voraussetzung: Wenn Sie es noch nicht getan haben, Vervollständigen Sie das vorherige Chatbot -Projekt Um Ihre Kernlogik zu erstellen. Sie benötigen einen funktionierenden Python -Chatbot mit Gesprächsgedächtnis und Token -Administration, bevor Sie dieses Tutorial beginnen.
3. Richten Sie Ihre Entwicklungsumgebung ein
Erforderliche Werkzeuge:
- Python IDE (gegen Code oder Pycharm empfohlen)
- OpenAI -API -Schlüssel (oder zusammen KI für eine kostenlose Different)
- Github -Konto für die Bereitstellung
Wir arbeiten mit Customary -Python -Dateien (.Py -Format) anstelle von Jupyter -Notizbüchern. Stellen Sie additionally sicher, dass Sie sich in Ihrer ausgewählten IDE wohl kodieren.
4. Installieren und testen Sie Stromlit
Installieren Sie die erforderlichen Pakete:
pip set up streamlit openai tiktokenTesten Sie Ihre Set up mit einer einfachen Demo:
import streamlit as st
st.write("Whats up Streamlit!")Speichern Sie dies als take a look at.py und führen Sie Folgendes in der Befehlszeile aus:
streamlit run take a look at.pyWenn sich ein Browserfenster mit der Nachricht „Hallo Streamlit!“ Öffnet, können Sie fortfahren.
5. Überprüfen Sie Ihren API -Zugriff
Testen Sie Ihren OpenAI -API -Schlüssel.
import os
from openai import OpenAI
api_key = os.getenv("OPENAI_API_KEY")
consumer = OpenAI(api_key=api_key)
# Easy take a look at name
response = consumer.chat.completions.create(
mannequin="gpt-4o-mini",
messages=({"function": "consumer", "content material": "Say hey!"}),
max_tokens=10
)
print(response.decisions(0).message.content material)6. Zugriff auf die vollständige Lösung
Die Lösungsdateien anzeigen und herunterladen: Lösungsrepository
Was Sie finden:
starter_code.py– Der erste Chatbot -Code, mit dem wir beginnen, mit dem wir beginnenclosing.py– Vollständige Stromanwendung abschließennecessities.txt– Alle notwendigen Abhängigkeiten- Bereitstellungskonfigurationsdateien
Ausgangspunkt: Ihre Chatbot Basis
Wenn Sie noch keinen Chatbot haben, erstellen Sie eine Datei mit dem Namen starter_code.py mit dieser Stiftung:
import os
from openai import OpenAI
import tiktoken
# Configuration
api_key = os.getenv("OPENAI_API_KEY")
consumer = OpenAI(api_key=api_key)
MODEL = "gpt-4o-mini"
TEMPERATURE = 0.7
MAX_TOKENS = 100
TOKEN_BUDGET = 1000
SYSTEM_PROMPT = "You're a fed up and sassy assistant who hates answering questions."
messages = ({"function": "system", "content material": SYSTEM_PROMPT})
# Token administration capabilities (collapsed for readability)
def get_encoding(mannequin):
strive:
return tiktoken.encoding_for_model(mannequin)
besides KeyError:
print(f"Warning: Tokenizer for mannequin '{mannequin}' not discovered. Falling again to 'cl100k_base'.")
return tiktoken.get_encoding("cl100k_base")
ENCODING = get_encoding(MODEL)
def count_tokens(textual content):
return len(ENCODING.encode(textual content))
def total_tokens_used(messages):
strive:
return sum(count_tokens(msg("content material")) for msg in messages)
besides Exception as e:
print(f"(token rely error): {e}")
return 0
def enforce_token_budget(messages, finances=TOKEN_BUDGET):
strive:
whereas total_tokens_used(messages) > finances:
if len(messages) <= 2:
break
messages.pop(1)
besides Exception as e:
print(f"(token finances error): {e}")
# Core chat operate
def chat(user_input):
messages.append({"function": "consumer", "content material": user_input})
response = consumer.chat.completions.create(
mannequin=MODEL,
messages=messages,
temperature=TEMPERATURE,
max_tokens=MAX_TOKENS
)
reply = response.decisions(0).message.content material
messages.append({"function": "assistant", "content material": reply})
enforce_token_budget(messages)
return replyDies gibt uns einen arbeitenden Chatbot mit Gesprächsgedächtnis und Kostenkontrollen. Lassen Sie es uns nun in eine Internet -App verwandeln.
Teil 1: Ihre erste optimistische Schnittstelle
Erstellen Sie eine neue Datei mit dem Namen app.py und kopieren Sie Ihren Startercode hinein. Jetzt fügen wir die Webschnittstellenschicht hinzu.
Fügen Sie den optimistischen Stromimport oben hinzu:
import streamlit as stFügen Sie unten in Ihrer Datei Ihre ersten optimistischen Elemente hinzu:
### Streamlit Interface ###
st.title("Sassy Chatbot")Testen Sie Ihre App, indem Sie diese in Ihrem Terminal ausführen:
streamlit run app.pyIhr Standardbrowser sollte öffnen, wie Ihre Internet -App mit dem Titel „Sassy Chatbot“ angezeigt wird. Beachten Sie die Auto-Reload-Funktion; Wenn Sie Änderungen speichern, fordert Streamlit Sie auf, die App erneut auszusetzen.
Erkenntnisse lernen: Streamlit verwendet „Magic“ -Rendern. Sie müssen keine explizit Elemente anzeigen. Einfach anrufen st.title() Rendert den Titel automatisch in Ihrer Weboberfläche.
Teil 2: Erstellen des Bedienfelds
Reale Anwendungen müssen Benutzersteuerungen benötigen. Fügen wir eine Seitenleiste mit Persönlichkeitsoptionen und Parametersteuerungen hinzu.
Fügen Sie dies nach Ihrem Titel hinzu:
# Sidebar controls
st.sidebar.header("Choices")
st.sidebar.write("It is a demo of a sassy chatbot utilizing OpenAI's API.")
# Temperature and token controls
max_tokens = st.sidebar.slider("Max Tokens", 1, 250, 100)
temperature = st.sidebar.slider("Temperature", 0.0, 1.0, 0.7)
# Character choice
system_message_type = st.sidebar.selectbox("System Message",
("Sassy Assistant", "Indignant Assistant", "Customized"))Speichern und beobachten Sie, wie Ihre Seitenleiste mit interaktiven Steuerelementen ausgestattet ist. Diese Schieberegler speichern ihre Werte automatisch in den jeweiligen Variablen, wenn Benutzer mit ihnen interagieren.
Hinzufügen von dynamischem Persönlichkeitssystem
Lassen Sie uns nun die Persönlichkeitsauswahl tatsächlich funktionieren:
# Dynamic system immediate primarily based on choice
if system_message_type == "Sassy Assistant":
SYSTEM_PROMPT = "You're a sassy assistant that's fed up with answering questions."
elif system_message_type == "Indignant Assistant":
SYSTEM_PROMPT = "You're an offended assistant that likes yelling in all caps."
elif system_message_type == "Customized":
SYSTEM_PROMPT = st.sidebar.text_area("Customized System Message",
"Enter your customized system message right here.")
else:
SYSTEM_PROMPT = "You're a useful assistant."Die benutzerdefinierte Possibility erstellt einen Textbereich, in dem Benutzer ihre eigenen Persönlichkeitsanweisungen schreiben können. Versuchen Sie, zwischen Persönlichkeiten zu wechseln und zu beachten, wie sich die Schnittstelle anpasst.
Teil 3: Sitzungszustand verstehen
Hier wird Streamlit schwierig. Jedes Mal, wenn ein Benutzer mit Ihrer App interagiert, wird das gesamte Skript von oben nach unten ausgelöst. Dies würde normalerweise jedes Mal Ihren Chat -Geschichte zurücksetzen, was wir nicht für ein Gespräch wollen!
Sitzungszustand Löst dies, indem Daten über App -Wiederholungen hinweg fortbestehen:
# Initialize session state for dialog reminiscence
if "messages" not in st.session_state:
st.session_state.messages = ({"function": "system", "content material": SYSTEM_PROMPT})Dies schafft eine anhaltende messages Liste, die App -Wiederholungen überlebt. Jetzt müssen wir unsere Chat -Funktion ändern, um den Sitzungsstatus zu verwenden:
def chat(user_input, temperature=TEMPERATURE, max_tokens=MAX_TOKENS):
# Get messages from session state
messages = st.session_state.messages
messages.append({"function": "consumer", "content material": user_input})
enforce_token_budget(messages)
# Add loading spinner for higher UX
with st.spinner("Considering..."):
response = consumer.chat.completions.create(
mannequin=MODEL,
messages=messages,
temperature=temperature,
max_tokens=max_tokens
)
reply = response.decisions(0).message.content material
messages.append({"function": "assistant", "content material": reply})
return replyErkenntnisse lernen: Sitzungsstatus ist wie ein Wörterbuch, das zwischen App -Wiederholungen bestehen. Betrachten Sie es als das Speichersystem Ihrer App.
Teil 4: Interaktive Tasten und Steuerelemente
Fügen wir Schaltflächen hinzu, um die Benutzeroberfläche benutzerfreundlicher zu gestalten:
# Management buttons
if st.sidebar.button("Apply New System Message"):
st.session_state.messages(0) = {"function": "system", "content material": SYSTEM_PROMPT}
st.success("System message up to date.")
if st.sidebar.button("Reset Dialog"):
st.session_state.messages = ({"function": "system", "content material": SYSTEM_PROMPT})
st.success("Dialog reset.")Diese Schaltflächen bieten sofortiges Suggestions mit Erfolgsnachrichten und erstellen eine poliertere Benutzererfahrung.
Teil 5: Die Chat -Oberfläche
Nun zum Hauptereignis – die tatsächliche Chat -Oberfläche. Fügen Sie diesen Code hinzu:
# Chat enter utilizing walrus operator
if immediate := st.chat_input("What's up?"):
reply = chat(immediate, temperature=temperature, max_tokens=max_tokens)
# Show chat historical past
for message in st.session_state.messages(1:): # Skip system message
with st.chat_message(message("function")):
st.markdown(message("content material"))Der chat_input Widget erstellt am Ende Ihrer App ein Textfeld. Der Walross -Betreiber (:=) weist die Benutzereingabe an zu immediate und überprüft, ob es in einer Zeile existiert.
Visuelle Verbesserung: Streamlit fügt automatisch Benutzer- und Assistenten -Symbole hinzu, um Nachrichten zu chatten, wenn Sie die richtigen Rollennamen („Benutzer“ und „Assistant“ verwenden).
Teil 6: Testen Sie Ihre vollständige App
Speichern Sie Ihre Datei und testen Sie die vollständige Schnittstelle:
- Persönlichkeitstest: Wechseln Sie zwischen frechen und verärgerten Assistenten, wenden Sie die neue Systemnachricht an und chatten Sie dann, um den Unterschied zu sehen
- Speichertest: Führen Sie ein Gespräch und beziehen Sie sich dann auf etwas, das Sie zuvor gesagt haben
- Parametertest: Ziehen Sie den MAX Tokens Slider auf 1 und sehen Sie, wie Antworten abgeschnitten werden
- Check zurücksetzen: Verwenden Sie die Schaltfläche Reset, um den Gesprächsverlauf zu löschen
Ihre vollständige Arbeits -App sollte ungefähr so aussehen:
import os
from openai import OpenAI
import tiktoken
import streamlit as st
# API and mannequin configuration
api_key = st.secrets and techniques.get("OPENAI_API_KEY") or os.getenv("OPENAI_API_KEY")
consumer = OpenAI(api_key=api_key)
MODEL = "gpt-4o-mini"
TEMPERATURE = 0.7
MAX_TOKENS = 100
TOKEN_BUDGET = 1000
SYSTEM_PROMPT = "You're a fed up and sassy assistant who hates answering questions."
# (Token administration capabilities right here - identical as starter code)
def chat(user_input, temperature=TEMPERATURE, max_tokens=MAX_TOKENS):
messages = st.session_state.messages
messages.append({"function": "consumer", "content material": user_input})
enforce_token_budget(messages)
with st.spinner("Considering..."):
response = consumer.chat.completions.create(
mannequin=MODEL,
messages=messages,
temperature=temperature,
max_tokens=max_tokens
)
reply = response.decisions(0).message.content material
messages.append({"function": "assistant", "content material": reply})
return reply
### Streamlit Interface ###
st.title("Sassy Chatbot")
st.sidebar.header("Choices")
st.sidebar.write("It is a demo of a sassy chatbot utilizing OpenAI's API.")
max_tokens = st.sidebar.slider("Max Tokens", 1, 250, 100)
temperature = st.sidebar.slider("Temperature", 0.0, 1.0, 0.7)
system_message_type = st.sidebar.selectbox("System Message",
("Sassy Assistant", "Indignant Assistant", "Customized"))
if system_message_type == "Sassy Assistant":
SYSTEM_PROMPT = "You're a sassy assistant that's fed up with answering questions."
elif system_message_type == "Indignant Assistant":
SYSTEM_PROMPT = "You're an offended assistant that likes yelling in all caps."
elif system_message_type == "Customized":
SYSTEM_PROMPT = st.sidebar.text_area("Customized System Message",
"Enter your customized system message right here.")
if "messages" not in st.session_state:
st.session_state.messages = ({"function": "system", "content material": SYSTEM_PROMPT})
if st.sidebar.button("Apply New System Message"):
st.session_state.messages(0) = {"function": "system", "content material": SYSTEM_PROMPT}
st.success("System message up to date.")
if st.sidebar.button("Reset Dialog"):
st.session_state.messages = ({"function": "system", "content material": SYSTEM_PROMPT})
st.success("Dialog reset.")
if immediate := st.chat_input("What's up?"):
reply = chat(immediate, temperature=temperature, max_tokens=max_tokens)
for message in st.session_state.messages(1:):
with st.chat_message(message("function")):
st.markdown(message("content material"))Teil 7: Bereitstellung im Web
Das lokale Laufen ist großartig für die Entwicklung, aber die Bereitstellung macht Ihr Projekt gemeinsam genutzt und für andere zugänglich. Stromlit Group Cloud Bietet kostenloses Internet hosting direkt aus Ihrem Github -Repository.
Bereiten Sie sich auf den Einsatz vor
Erstellen Sie zunächst die erforderlichen Dateien in Ihrem Projektordner:
necessities.txt:
openai
streamlit
tiktoken.gitignore:
.streamlit/Beachten Sie, dass wenn Sie Ihren API -Schlüssel in a gespeichert haben .env Datei sollten Sie dies hinzufügen .gitignore sowie.
Geheimnisse Administration: Erstellen a .streamlit/secrets and techniques.toml Datei lokal:
OPENAI_API_KEY = "your-api-key-here"Wichtig: Hinzufügen .streamlit/ zu deinem .gitignore Sie begehen additionally nicht versehentlich Ihren API -Schlüssel zu GitHub.
GitHub Setup
- Erstellen Sie ein neues Github -Repository
- Drücken Sie Ihren Code (den
.gitignoreschützt Ihre Geheimnisse) - Ihr Repository sollte enthalten:
app.pyAnwesendnecessities.txtUnd.gitignore
Bereitstellung für die optimierte Cloud
-
Gehen zu Share.streamlit.io
-
Schließen Sie Ihr GitHub -Konto an
-
Wählen Sie Ihr Repository und Ihr Hauptzweig
-
Wählen Sie Ihre App -Datei (
app.py) -
Fügen Sie in fortgeschrittenen Einstellungen Ihre API -Schlüssel als Geheimnis hinzu:
OPENAI_API_KEY = "your-api-key-here" -
Klicken Sie auf „Bereitstellen“
Innerhalb weniger Minuten wird Ihre App in einer öffentlichen URL reside sein, die Sie mit jedem teilen können!
Sicherheitsnotiz: Die Geheimnisse, die Sie in streamliter Cloud hinzufügen, sind verschlüsselt und sicher. Fügen Sie niemals API -Schlüssel direkt in Ihre Codedateien ein.
Schlüsselkonzepte verstehen
Sitzungszustand Deep Dive
Der Sitzungsstatus ist das Speichersystem von Streamlit. Ohne sie würde jede Benutzerinteraktion Ihre App vollständig zurücksetzen. Betrachten Sie es als ein anhaltendes Wörterbuch, das App -Wiederholungen überlebt:
# Initialize as soon as
if "my_data" not in st.session_state:
st.session_state.my_data = ()
# Use all through your app
st.session_state.my_data.append("new merchandise")Das optimistische Ausführungsmodell
Streamlit führt Ihr gesamtes Skript bei jeder Interaktion erneut aus. Dieses „reaktive“ Modell bedeutet:
- Ihre App zeigt immer den aktuellen Standing an
- Sie benötigen Sitzungsstatus für Beharrlichkeit
- Teure Vorgänge sollten zwischengespeichert oder minimiert werden
Widget State Administration
Widgets (Schieberegler, Eingänge, Tasten) verwalten ihren Standing automatisch:
- Slider -Werte sind immer aktuell
- Die Style drückt Set off -Wiederholungen durch
- Formulareingänge aktualisieren in Echtzeit Replace
Fehlerbehebung häufiges Downside
- „Kein Modul namens ’streamlit'“: Installieren Sie Stromlit mit
pip set up streamlit - API -Schlüsselfehler: Stellen Sie sicher
- App wird nicht neu laden: Überprüfen Sie die Python -Syntaxfehler in Ihrer Terminalausgabe
- Sitzungsstatus funktioniert nicht: Stellen Sie sicher, dass Sie überprüfen
if "key" not in st.session_state:Vor dem Initialisieren - Die Bereitstellung schlägt fehl: Überprüfen Sie Ihre
necessities.txtEnthält alle notwendigen Pakete
Erweitern Sie Ihre Chatbot -App
Sofortige Verbesserungen
- Datei -Add: Lassen Sie Benutzer Dokumente hochladen, damit der Chatbot Referenz verweisen kann
- Gespräche exportieren: Fügen Sie eine Obtain -Schaltfläche für den Chat -Historie hinzu
- Nutzungsanalyse: Verfolgen Sie die Nutzung und Kosten für Token
- Mehrere Chat -Sitzungen: Unterstützung mehrerer Konversationsthreads
Erweiterte Funktionen
- Benutzerauthentifizierung: Erfordern Sie eine Anmeldung für personalisierte Erfahrungen
- Datenbankintegration: Dauerhaft Gespräche speichern
- Sprachschnittstelle: Fügen Sie Sprache zu Textual content und Textual content-zu-Sprache hinzu
- Help für Multimodell: Lassen Sie Benutzer verschiedene KI -Modelle auswählen
Geschäftsanwendungen
- Kundendienst Bot: Bereitstellung für den Kundenunterstützung mit unternehmensspezifischem Wissen
- Interview -Vorbereitungs -Software: Erstellen Sie domänenspezifische Interviewpraxis Bots
- Bildungsassistent: Erstellen Sie Nachhilfe -Bots für bestimmte Themen
- Inhaltsgenerator: Entwickeln Sie spezialisierte Schreibassistenten
Key Takeaways
Das Erstellen von Internet -Schnittstellen für AI -Anwendungen zeigt, dass Sie die Lücke zwischen technischer Funktionen und Benutzerzugriffsgründen überbrücken können. Durch dieses Tutorial haben Sie gelernt:
Technische Fähigkeiten:
- Stromlit -Grundlagen und reaktives Programmiermodell
- Sitzungsstaatesmanagement für anhaltende Anwendungen
- Internet -Bereitstellung von der Entwicklung bis zur Produktion
- Integrationsmuster für AI -APIs in Webkontexten
Berufliche Fähigkeiten:
- Erstellen benutzerfreundlicher Schnittstellen für technische Funktionen
- Verwalten von Geheimnissen und Sicherheit in bereitgestellten Anwendungen
- Aufbau portfoliowürdiger Projekte, die reale Fähigkeiten demonstrieren
- Verstehen Sie den Pfad vom Prototyp zur Produktionsanwendung
Strategisches Verständnis:
- Warum Internet -Schnittstellen für AI -Anwendungen wichtig sind
- So machen Sie technische Projekte für nichttechnische Benutzer zugänglich
- Die Bedeutung der Benutzererfahrung bei der Einführung von AI -Anwendungen
Sie haben jetzt eine bereitgestellte Chatbot-Anwendung, die mehrere gefragte Fähigkeiten zeigt: KI-Integration, Webentwicklung, Benutzeroberflächendesign und Cloud-Bereitstellung. Diese Stiftung bereitet Sie darauf vor, ausgefeiltere Anwendungen aufzubauen, und demonstriert Ihre Fähigkeit, vollständige, benutzergerichtete KI-Lösungen zu erstellen.