Werk:AI mit Arnie/Bot Deployment
In diesem Video sehen wir uns an, wie wir diesen Chatbot verwenden können, bzw. wie wir ihn „deployen“ können. Wir können ihn in Websites einbauen, aber auch als eine Standalone-App hier tatsächlich verwenden, mit einem kleinen Interface. Also, wie funktioniert das Ganze? Das allerallererste, was wir machen müssen, ist natürlich, diesen Chatbot oder den Chatflow erstmal zu speichern. Dafür gehen wir auf diese Einstellungen, und hier müssen wir jetzt die Dinge eingeben. Also, Copy auf "Simple Chatbot Template". Das ist nicht ein guter Name für die Pipeline. Ich würde sagen, LLM Master. Danach Pipeline Description: "Simple Chatbot with OpenAI LLM" ist okay, können wir aber auch LLM Master nennen, wenn wir wollen.
Und jetzt können wir hier entweder "Deploy Changes" klicken oder "Deploy as". Wir klicken erstmal "Deploy Changes". Die Pipeline ist jetzt abgedatet, das heißt, wir haben einen neuen Namen. Jetzt können wir „Deploy as", wieder "Chatbot Automation" oder "Search". Das können wir auch hier oben nochmal schließen, denn das bekommen wir auch hier: "Pipeline Deployment". Und daneben "Deploy as", wieder "Chatbot Automation" oder "Search". Und wir verwenden das jetzt erstmal als Search. Das heißt, wir klicken auf Search. Wir können unserem Ding einen Namen geben, natürlich wieder mal LLM Master. Wir wollen natürlich die ganze Pipeline haben und nicht nur hier Knowledge Base. Pipeline Name: LLM Master passt auch. Wir wollen Input und Output haben. Wir klicken jetzt "Save". Wir können natürlich auch hier oben "Export" klicken. Und auch hier können wir einfach nur "Deploy" klicken.
Danach bekommen wir hier diese URL, und auf dieser URL können wir unseren kleinen Chatbot laufen lassen. Das heißt, diese URL können wir kopieren. Der funktioniert jetzt ganz einfach in einem leeren Chat. Siehst du hier: "Ask anything"? Welche Arten von Fine-Tuning gibt es? Und du siehst es, wir bekommen auch hier wieder die Antwort: das vollständige Fine-Tuning, das Parameter-effiziente Fine-Tuning, das Prefix-Fine-Tuning, LoRA-Fine-Tuning, Instruction-Tuning, Reinforcement Learning, Continual Learning. Das ist jetzt natürlich sehr, sehr cool, und wir bekommen sogar Follow-Questions*. Das heißt, welcher Ansatz bietet die beste Lösung? Welche Techniken umfasst Parameter-effizientes Fine-Tuning? Wir bekommen einfach die Antworten ganz, ganz, ganz spezifisch auf oder von unserem Wissen natürlich raus. Als separate Application. Hier diese URL, die können wir weiterschicken an alle Leute, die wir wollen. Das heißt, jeder kann mit unserem Chatbot umgehen.
*Follow-up Questions
Aber Achtung! Natürlich bezahlen wir hier danach natürlich unsere API-Kosten. Das heißt, all diese Dinge werden durchsucht. Aber bei unserer Pipeline drinnen müssen wir natürlich immer noch die API-Kosten decken. Erstmal übernimmt das Vector Shift, ich glaube, für so einen Dollar in etwa. Danach fragen sie dich, ob du einen Plan willst. Wenn du das nicht willst, wie gesagt, kannst du einen OpenAI API Key reinholen. Und natürlich kannst du diesen Chatbot auch in Websites einbauen. Und hier siehst du das schon: "Embed Code for Websites", „Use this code snippet to deploy search in your applications“. Dieser Code funktioniert auf vielen, vielen verschiedenen Webseiten. Der funktioniert auf Wix, auf Squarespace, auf Framer, auf Webflow und auf WordPress. Ich denke, der sollte auch funktionieren in einem einfachen HTML-Code.
Also kopiere ich das, und wir werden jetzt diesen Code einfach mal einbauen in eine einfache Webseite. Ich habe hier eine wunderschöne Webseite ganz, ganz kurz zusammengezimmert mit Chat-GPT-AI, mit Arni your Mail. Also, ganz, ganz dumm und einfach aufgebaut. Wir können hergehen, wir können in den Body reingehen, neue Zeile, wir klicken hier ganz einfach "Insert", also Steuerung-V. Ich klicke mal auf Play, dann sollte dieser Chatbot tatsächlich hier komplett drinnen sein in dieser Webseite. Du siehst das, das ist jetzt natürlich riesengroß, und wir können ja mal fragen: "Was ist ein LLM?" Fragezeichen. Und ich kann das Ganze abschicken. Das heißt, hier wird einfach der gesamte Chatbot hier tatsächlich mit eingebaut. Ein LLM, oder Large Language Model, ist ein geschrittliches KI-Modell, und so weiter.
Wir bekommen natürlich auch weitere Antwortmöglichkeiten, die wir hier drücken können. Und wir haben unseren Chatbot auf einer externen Webseite gehostet. Wie gesagt, das verwendet man generell als Unterabteilung und nicht direkt in eine solche Webseite. Das sieht natürlich relativ doof aus, wie wir es hier gemacht haben. Das ist natürlich eher für den Einbau in eine separate Abteilung in WordPress, in Webflow, in Wix oder sonst wo.
Und jetzt kommt das Coolste, zumindest meiner Meinung nach: Wir können das auch als kompletten separaten Standalone-Chatbot hier publizieren, genauso wie ein ChatGPT-Interface. Das heißt, wir haben danach tatsächlich unser eigenes cooles Interface, das wir verwenden können. Und wir können es auch integrieren in Webseiten, dass es Sinn macht, also als kleine Chatbubble, als kleiner Chatbot. Und zusätzlich können wir das Ding sogar noch integrieren in WhatsApp und wo du auch immer willst.
Und jetzt würde ich dir zeigen, wie das funktioniert. Wir schließen dieses Fenster nochmal ganz, ganz kurz. Wir gehen natürlich wieder auf "Deploy as". Das ist jetzt keine Automation – über Automationen sprechen wir danach nochmal – aber wir klicken auf "Chatbot", nicht mehr "Search", sondern "Chatbot". Wir haben jetzt einen Searchbot gemacht, deshalb sieht das hier auch so aus. Wir können das natürlich einbauen als separate Seite auf WordPress, z.B. Aber wir wollen ja natürlich einen Chatbot haben. Also drücken wir auf "Chatbot". Und hier bekommen wir jetzt viele, viele Dinge, die wir machen können.
Die Beschreibung natürlich wieder mal: "LLM Master". Komm schon, das machen wir wieder schnell Copy-Paste. Das soll auch hier der LLM Master sein. Die Pipeline. Die Pipeline können wir genauso lassen, wie sie ist. Wir wollen natürlich immer noch Input und Output haben, und wir klicken "Save". Als nächstes brauchen wir die Funktionalitäten. Und du siehst, das sieht jetzt schon richtig, richtig gut eigentlich. Aber natürlich können wir das noch hübscher machen.
Bei den Funktionalitäten können wir dem Ding einen Namen geben. Das sollte natürlich vielleicht nicht "Vector Shift" heißen, sondern "LLM Assistant". Danach hier die Beschreibung. Die Beschreibung könnte natürlich auch sein: "Hilft mit LLM-Fragen". Du siehst hier den Username. Das ist "User". Also, die Leute, die Dinge hier reintippen, die werden "User" genannt. Ich denke, das passt schon so. Wenn du das spezialisieren willst, meinetwegen. Du, ich will – ich mag die Dinge gerne lieber, wenn man die Leute duzt. Wie heißt der Bot? "Assistent", "LLM Assistant". Das könnte passen. Dieser Bot könnte aber auch "Dein Assistent" heißen.
Danach eine Welcome Message. Also, sobald man reinkommt: Was soll der Bot sagen? "Hey, lass mich wissen, wie ich dir helfen kann." Du siehst immer, wie die ganzen Dinge hier starten – das ist jetzt also die erste Message, die die Leute bekommen. Danach die Error Message, wenn es einen Fehler geben sollte. Die lassen wir jetzt einfach mal. Einen Disclaimer-Text, wenn wir denn einen Disclaimer haben wollen. Z.B.: "Achtung, LLMs können Fehler machen." Könnten wir z.B. so einfügen. Und jetzt kannst du natürlich noch das da machen: "Show Welcome Image". Willst du eines dabei haben? Ja, nein, vielleicht. "Keep Chat Open". Soll das Ding offen sein oder geschlossen? Wir können das geschlossen lassen oder offen – völlig egal. Ich lasse das jetzt einfach mal geöffnet hier.
"Allow to Stop Generations". Will man das hier tatsächlich einschalten? Ich würde sagen, das können wir auf alle Fälle einschalten. "Allow to Clear Chat". Das können wir unseren Usern natürlich auch erlauben. "Powered by Vector Shift". Das müssen wir hier aktuell eingestellt lassen. Das heißt, dieses Ding hier unten: "Powered by Vector Shift". Das kannst du nur wegmachen, wenn du einen Plan verwendest, wo du bezahlen musst. Und danach "Generate Follow-up Questions". Das heißt, das Ding, das gibt natürlich diese Beispielfragen, wenn wir die denn dazu haben wollen. Das ist natürlich legitim. Können wir so lassen.
"Number of AI Generated Questions". Die können wir hochstellen, können wir runterstellen. Wir können die, wie gesagt, auch komplett ausschalten. Kannst du machen, wie du willst. Und danach: "Suggest Initial Prompts". Wir können auch hier starten, z.B.: "Erstmal: Was ist ein LLM? Welche Arten des Fine-Tuning gibt es?" Hier musst du natürlich spezifisch sein, was halt eben die Leute gerne wissen wollen. Und die Dinge poppen dann hier ganz genauso aus.
Und zum Schluss noch das Styling. Das heißt, wie sollte dein Chatbot aussehen, im Optimalfall? Du kannst hier viele Dinge anpassen. Die URL kannst du umändern. Die Assistent-URL kannst du ändern. Die Launch-URL kannst du umändern. Die Farbe hier der verschiedenen Bars – meinetwegen willst du das oben dunkler haben, heller, was weiß ich. Du kannst hier die Dinge anpassen, wie sie für dich hübsch sind. Willst du die Hintergrundfarbe etwas anders haben? Die sollte rosa sein jetzt natürlich. Input-Message-Color könnten wir auch umändern, wenn du magst. Output-Message-Color könnten wir auch wieder umändern auf komplett Weiß, meinetwegen. Danach: Accent-Color. Will ich so lassen. Und die Texte schwarz, passen schon gut. Auch das ist okay. Und Frontstyle reicht hier. Ich denke, hier die Funktionalitäten haben wir jetzt wunderhübsch. Was denkst du?
Sobald der Bot für dich hübsch ist, können wir das speichern. Und das Save. Danach gehen wir auf "Export". Und jetzt können wir das wirklich einbauen in viele, viele verschiedene Dinge. Jetzt ist das schon natürlich deployed. Das heißt, wir können diese URL verwenden, um mit unserem Chat zu kommunizieren. Ich will das einfach mal kopieren. Wir öffnen das in einem neuen Browser. Wir fügen das ein. Und du siehst, wir haben hier unseren LLM-Assistenten. Der sieht ganz genauso aus wie ChatGPT eigentlich. Wir können hier Fragen stellen. Es tut mir leid, dass ich immer die gleichen Fragen stelle – ich bin zu faul, hier noch mehr nachzudenken – aber hier bekommen wir genau dasselbe Interface wie ein ChatGPT.
Wir können sogar neue Chats hier verwenden, danach fragen: "Was ist ein LLM?" Wir bekommen immer unsere Begrüßungsnachricht: "Hey, wie kann ich helfen?" Wir können zwischen den Chats wechseln. Hier haben wir nicht die hübsche Farbe, weil das jetzt nicht in einer Webseite integriert ist. Die hübschen Farben bekommen wir nur in einer Webseite. Aber du siehst, wir haben hier unser eigenes ChatGPT entwickelt, trainiert an speziellen Daten. Diesen Link können wir Leuten zuschicken. Sie können mit diesem Ding chatten, wie viel sie auch immer wollen. Sie können Dinge fragen: "Welche LLMs gibt es?" Sei spezifisch. Ich denke, wir bekommen auch hier relativ gute Antworten. Ja, das Ding listet uns wirklich ziemlich viele Dinge auf: GPT-4, PaLM, LLaMA, Vikuna, BLOOM, LaMDA, Alpaca, GLM, WizardCoder und viele, viele mehr.
Und wenn uns etwas nicht gefällt, können wir das bearbeiten. Wir können es löschen. Wir können hier wirklich arbeiten wie in ChatGPT. Diese Willkommensmessage, die könnten wir vielleicht noch etwas anpassen, denn dieser Assistent fragt mich ganz schön oft, wie er mir helfen kann. Aber, wie gesagt, das kannst du natürlich alles anpassen. Also, wir haben hier eine komplette, funktionsfähige Application gebaut. Diese Application ist auch imstande, als Searchbar zu dienen – und zwar in anderen Webseiten. Und auch als Standalone-Searchbar. Und gleichzeitig können wir diesen Chatbot natürlich auch noch einbetten in Webseiten.
Hier unten finden wir den Code-Snippet, den wir einfügen können in Wix, in Squarespace, in Framer, in Webflow, in WordPress – und natürlich auch in ganz, ganz einfachen HTML-Code. Wir kopieren das. Jetzt sehen wir uns an, wie ein solcher Chatbot aussehen würde auf einer solchen einfachen HTML-Webseite. Um das zu sehen, löschen wir natürlich das Ding hier raus. Wir fügen diesen Code hier rein. Dieser Code ist danach speziell eben "Chatbot", ein kleines Popup-Fenster, das hier unten aufpoppt.
Du siehst, wir haben es jetzt aufgepoppt. Schon. Das Ding ist mittlerweile natürlich relativ groß. Wir könnten es natürlich auch umbauen, wie wir vorhin gesehen haben, dass er natürlich erstmal klein ist. Hier, aber der Chatbot funktioniert wunderbar. Wir haben den auch jetzt so hübsch, wie wir ihn vorhin hatten. Also: "Welche Arten des Fine-Tuning gibt es?" Wir können auch hier Fragen stellen. Wollen wir stoppen, klicken wir auf "Stop". Und wir haben die Antwort. Nicht? Ich kann immer noch andere Fragen stellen: "Bist du GPT" Fragezeichen. "Ja, ich basiere auf GPT-Technologie." Du siehst, unser Assistent funktioniert wunderbar. Und wir bekommen hier die Vorschläge für unsere nächsten Prompts, die wir eventuell stellen könnten. Und natürlich könntest du diese Vorschläge auch ausstellen, wenn dir die nicht gefallen.
Wir können diesen Chatbot natürlich hier auch schließen. Dann ist er klein. Klicken wir drauf, ist er wieder groß. Wir können den Chat clean machen, also "Clear Chat". Wir können auf Informationen gehen. Hier siehst du: "Achtung, LLMs können Fehler machen." Das heißt, wir haben unseren Chatbot hier wirklich super, super elegant integriert. Der Chatbot sieht so aus, wenn er startet, ist da aufgepoppt. Du hast vorhin gesehen, wir können ihn auch so lassen, dass die Webseite so aussieht und dass er erst aufpoppt, wenn man eben draufklickt. Aber generell haben wir einen Chatbot, der funktioniert. Und zwar auf Webseiten und überall eigentlich. Denn du hast auch hier die Möglichkeit, das als Standalone-App zu verwenden, das als Searchbar sozusagen zu verwenden und zusätzlich noch das da: WhatsApp und SMS.
Du kannst das natürlich auch laufen lassen in WhatsApp und SMS-Support über Twilio. Wenn du hier mehr erfahren willst, dann verwendet man natürlich die Webhook-URL von Twilio. Mehr Informationen bekommst du hier. Das Ding können wir uns öffnen. Hier haben wir danach die API-Requests, die wir verwenden würden, z.B. in Twilio. Hier ist die Dokumentation. Ich muss gestehen, ich bin kein absoluter Experte mit Twilio und mit WhatsApp, aber man muss ganz einfach nur diesen zwei, drei Schritten folgen. Und dann hat man das ganze Ding auch sofort in WhatsApp laufen.
Ich muss dazu sagen, ich persönlich verwende das nicht, weil ich nicht unbedingt auch noch für Twilio und für die ganzen Dinge bezahlen will. Aber wenn du sowieso schon mit WhatsApp-Bots etwas rumwursteln willst, dann machst du ganz einfach nur diese drei Schritte hier: Step 1: die Navigation, Step 2, danach Step 3, und du hast das ganze Ding. Denn wir bekommen hier Zugriff über die API von Vector Shift. Das ist wirklich so einfach. Die Twilio-Account-Details hier unten rein, den Twilio-Account-Token da rein, auf "Save", und das Ganze war’s.
Du bekommst auch einen API-Endpoint. Und dieser API-Endpoint, der läuft z.B. in Python. Das da ist der API-Endpoint von Python. Hier bekommst du den gesamten Code. Das könntest du z.B. in Google Colab laufen lassen. Du weißt natürlich, wie Google Colab funktioniert, also werde ich dir das nicht mal zeigen. Es ist ganz einfach nur Copy-Insert. Also Copy klicken, hier in Google Colab einfügen, dann kannst du auch dieses Ding laufen lassen, z.B. in Google Colab. Du musst natürlich deinen API-Key reinpacken. Du kannst das in JavaScript laufen lassen. Auch hier ganz, ganz genau das gleiche Konzept.
Und du kannst das alles wirklich probieren. Und auch hier wieder das Gleiche: der Code, um den Chatbot laufen zu lassen, den Chatbot zu fetchen und die Konversation zu löschen. Du bekommst den Code. Du kannst das reinkopieren. Und du kannst sogar auf Slack gehen. Das heißt, wenn du das in Slack laufen willst, dann verbindest du hier deinen Slack-Account oder gibst deinen Slack-Token hier ein, und das Ganze war’s.
Das heißt, wir haben jetzt einen Chatbot, der laufen kann in Slack, in SMS, in WhatsApp, als Standalone-App, als Standalone-Searchbar, als Searchbar in Webseiten, als Chatbubble, die aufpoppt, in allen Webseiten, die du dir wirklich nur vorstellen kannst. Dieser Chatbot kann überall integriert werden. Das ist ein KI-Agent. Dieser KI-Agent kann machen, was du willst. Dieser KI-Agent hat Custom Knowledge und vieles, vieles mehr.
Und im nächsten Video will ich dir noch ein paar Einsatzmöglichkeiten zeigen. Denn hier gibt es natürlich noch viele, viele weitere Felder. Wir könnten auch noch Function Calling einbauen mit vielen verschiedenen Tools. Also, das ist eine ganz, ganz, ganz breite Plattform. Die allermeisten werden wahrscheinlich einen Chatbot verwenden, der so oder so ähnlich aufgebaut ist. Und deshalb sehen wir uns im nächsten Video.
Du hast jetzt einen KI-Agenten, den du so gut wie überall einsetzen kannst. Völlig egal, was du machst, und du kannst ihn trainieren, völlig egal, an welchen Daten. Und du hast alles Schritt für Schritt nachgemacht – hoffe ich zumindest. Falls es dich interessiert, falls du auch einen solchen KI-Agenten haben willst, dann kannst du das ab jetzt natürlich Schritt für Schritt nachbauen.