Yapay Zekayla Arama Destekli Kişisel Asistan Uygulaması Nasıl Oluşturulur

Bu yazıda size iki teknolojiyi ( ve ) nasıl birleştireceğinizi ve LangChain Anthropic arama destekli bir kişisel asistanın nasıl oluşturulacağını göstermek istiyoruz. Geliştiriciler için bir sonraki fırsat, her katılımcının en son teknolojisini kullanarak kendi oluşturma şansına sahip olduğu ile ortak hackathonumuzdur. Burada yapay zekanın giderek önemi artan bir uygulamasından bahsedeceğiz: . Hackathonlarımıza katılanlar tarafından giderek daha fazla yapay zeka ürünü oluşturuluyor. Google Cloud'un AI uygulamasını Google Cloud Vertex AI arama motorları Nedir? Arama destekli kişisel asistan, kullanıcılara gibi görevlerde yardımcı olmak için kullanan bir dijital asistandır. Bu asistanlar, çeşitli kaynaklardan veri toplamak ve analiz etmek için arama algoritmalarını kullanır ve bu verileri kullanıcılara yararlı ve kısa bir şekilde sunar. bilgi bulma, rezervasyon yapma, hatırlatıcı ayarlama ve mesaj gönderme arama motoru teknolojisini Arama destekli kişisel asistanların öne çıkan örnekleri , , ve . Bu asistanlar, doğru ve ilgili bilgileri sağlamak, görevleri tamamlamak ve kullanıcıyla etkileşimde bulunurken yanıtlarını geliştirmek için arama yeteneklerini etkili bir şekilde kullanır. Google Asistan Siri Alexa Cortana'dır Anthropic'ten Claude'la tanışın Anthropic, gelişmiş yapay zeka sistemleri geliştirmeye odaklanmış bir araştırma kuruluşudur. En son yarattıkları Claude, yardımsever, dürüst ve zararsız olacak şekilde tasarlanmış yeni nesil bir yapay zeka asistanıdır. Bu son teknoloji model, çeşitli görevlerde yüksek derecede güvenilirlik ve öngörülebilirlik sağlar. Claude'un temel özellikleri şunlardır: Çok yönlü konuşma ve metin işleme yetenekleri Kullanıcı güvenliğini ve gizliliğini birinci öncelik olarak korumak Claude'un birincil kullanım durumları şunlardır: Özetleme Aramak Yaratıcı ve işbirlikçi yazma Soru-Cevap Kodlama yardımı Bu özellikler, Claude'u çok çeşitli uygulamalar için ideal bir yapay zeka aracı haline getiriyor ve farklı alanlardaki kullanıcılara güç veriyor. LangChain'e Giriş LangChain, uçtan uca dil modeli uygulamaları oluşturmaya yönelik çok yönlü bir araçtır. Dil Öğrenme Modellerini (LLM'ler) oluşturma, yönetme ve dağıtma sürecini basitleştiren sağlam bir çerçeve sağlar. LLM'ler, çeşitli dillerde ve görevlerde insan benzeri metinleri anlamak, oluşturmak ve işlemek için tasarlanmış gelişmiş yapay zeka modelleridir. LangChain'in temel özellikleri şunları içerir: LLM'ler için istemlerin verimli yönetimi Karmaşık iş akışları için görev zincirleri oluşturma yeteneği Yapay zekaya durum ekleme, önceki etkileşimlerden gelen bilgileri hatırlamasına olanak sağlama Bu yetenekler, LangChain'i çeşitli uygulamalardaki dil modellerinin potansiyelinden yararlanmak için güçlü ve kullanıcı dostu bir platform haline getirir. Önkoşullar Python'un temel bilgisi Typecipt ve/veya React hakkında temel bilgi Anthropic'in Claude API'sine erişim SerpApi'nin Web Arama API'sine erişim Taslak Projenin Başlatılması Claude ve LangCHain ile Yapay Zeka Asistanı Uygulaması için Ön Uç Oluşturma Proje Dosyalarının Yazılması AI Asistan Uygulamasını Test Etme Tartışma Projenin Başlatılması app.py (Flask uygulaması giriş noktası) 🐍 : Başlamak için ortamınızda Flask'ın kurulu olduğundan emin olun. Bunu kullanarak yapabilirsiniz: Flask'ı Yükleyin pip pip install Flask : Projeniz için yeni bir dizin oluşturun ve ona gidin: Yeni bir dizin oluşturun mkdir claude-langchain cd claude-langchain : Python projeleriyle çalışırken sanal ortam kullanmak iyi bir uygulamadır. veya seçtiğiniz başka bir aracı kullanarak bir tane oluşturabilirsiniz: Sanal ortam oluşturun (isteğe bağlı) venv python -m venv venv source venv/bin/activate (Linux/Mac) venv\Scripts\activate (Windows) dosyası oluşturun: Flask uygulama kodunuzu yazmak için bir dosyası oluşturun: Bir main.py main.py touch app.py # Linux/Mac echo.>app.py # Windows : dosyasını favori kod düzenleyicinizde açın ve aşağıdaki kodu ekleyin: Flask uygulama kodunuzu yazın main.py from flask import Flask app = Flask(__name__) @app.route('/') def hello_world(): return 'Hello, World!' if __name__ == '__main__': app.run() : dosyasını kaydedin ve terminalinizde/komut isteminizde aşağıdaki komutu çalıştırın: Flask uygulamasını çalıştırın main.py python main.py : Tercih ettiğiniz web tarayıcısını açın ve adresine gidin. "Merhaba Dünya!" görmelisiniz. web sayfasında görüntülenir. Tarayıcınızı açın http://127.0.0.1:5000/ Ve bu kadar! Bir Flask projesini başarıyla başlattınız ve basit bir uygulama oluşturdunuz. .env 🌏 : Ortam değişkenlerini bir dosyasıyla kolayca yönetmek için paketini kullanacağız. Aynı zamanda kurulumunu da yapalım. Her iki paketi de kullanarak yükleyin: Python-dotenv ve langchain'i yükleyin .env python-dotenv langchain pip pip install python-dotenv langchain dosyası oluşturun: Projenizin kök dizininde bir dosyası oluşturun: Bir .env .env touch .env # Linux/Mac echo.>.env # Windows : dosyasını favori kod düzenleyicinizde açın ve ortam değişkenlerinizi ekleyin. Her değişken ANAHTAR=DEĞER biçiminde yeni bir satırda olmalıdır: Ortam değişkenleri ekleyin .env ANTHROPIC_API_KEY=sk-ant-xxxxxxxxxxxxxxxxx SERPAPI_API_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Lütfen hem modeli hem de web arama hizmeti için API anahtarına sahip olmanız gerektiğini unutmayın. Anthropic'in Claude SerpAPI'nin : kullanarak ortam değişkenlerini dosyasından yüklemek için dosyanızı değiştirin. dosyanızı aşağıdaki gibi güncelleyin: Ortam değişkenlerini yükleyin python-dotenv .env main.py main.py import os from flask import Flask from dotenv import load_dotenv load_dotenv() app = Flask(__name__) @app.route('/') def hello_world(): return 'Hello, World!' if __name__ == '__main__': app.run() Sürüm kontrolünde dosyasını : Sürüm kontrolünde gizli anahtarlar gibi hassas bilgilerin paylaşılmaması önemlidir. Git kullanıyorsanız dosyanıza aşağıdaki satırı ekleyin (eğer yoksa bir tane oluşturun): .env dikkate almayın .gitignore .env Artık Flask projeniz dosyasındaki ortam değişkenlerini kullanacak şekilde ayarlandı. Gerektiğinde daha fazla değişken ekleyebilir ve bunlara kullanarak erişebilirsiniz. dosyasını gizli tutmayı ve onu hiçbir zaman sürüm kontrolüne devretmeyi unutmayın. .env os.environ.get('KEY') .env Claude ve LangChain ile Yapay Zeka Asistanı Uygulaması için Ön Uç Oluşturma Bu eğitim, Node.js, npm, React ve Typescript hakkında temel bilgiye sahip olan orta düzey kullanıcılar için tasarlanmıştır. Stillendirme için Tailwind CSS ile birlikte bu teknolojileri içeren bir yığın kullanacağız. Bu yığın, sağlamlığı, çok yönlülüğü ve bu teknolojilere yönelik güçlü topluluk desteği nedeniyle seçildi. Ek olarak, uygulamamızın doğru, insan benzeri metin yanıtları oluşturmasına olanak tanıyacak iki güçlü yapay zeka teknolojisi olan Anthropic'in Claude modelini ve LangChain'i entegre edeceğiz. Node.js ve NPM'yi yükleme İşletim sisteminiz için Node.js yükleyicisini indirin. resmi siteden Node.js ve npm'yi yüklemek için kurulum talimatlarını izleyin. Çoğu kullanıcı için LTS (Uzun Süreli Destek) sürümü önerilir. Kurulduktan sonra terminalinizden Node.js ve npm sürümlerini kontrol ederek kurulumu doğrulayın: düğüm -v npm -v Proje Ortamını Kurma Create React Uygulamasını Yükleme yeni bir React.js uygulaması oluşturmamıza yardımcı olan bir komut satırı yardımcı programıdır. Bunu global olarak npm aracılığıyla kuracağız: Create React App (CRA), npm install -g create-react-app TypeScript ile Yeni Bir React Projesi Oluşturma adında yeni bir proje oluşturmak için CRA'yı TypeScript şablonuyla birlikte kullanacağız. ai-assistant-claude npx create-react-app ai-assistant-claude --template typescript Bu komut, mevcut dizinimizde adında, Typescript destekli yeni bir React uygulamasını barındıran yeni bir dizin oluşturur. ai-assistant-claude TailwindCSS'yi entegre etme TailwindCSS'yi yükleme Bu eğitimde izlenen adımlar dayanmaktadır. Daha güncel talimatlar için bu belgelere bakın. resmi Tailwind CSS belgelerine TailwindCSS'i yükleyerek ve kütüphaneyi projemizde başlatarak başlayacağız: npm install -D tailwindcss npx tailwindcss init Şablon Yollarını Yapılandırma Daha sonra şablon yollarımızı dosyasına ekleyerek yapılandırıyoruz. ekleyeceğiniz satırları belirtir: tailwind.config.js ++ /** @type {import('tailwindcss').Config} */ module.exports = { -- content: [], ++ content: [ ++ "./src/**/*.{js,jsx,ts,tsx}", ++ ], theme: { extend: {}, }, plugins: [], } Arka Rüzgar Yönergeleri Ekleme Son olarak, Tailwind katmanlarının her biri için yönergelerini dosyamıza ekleyeceğiz: @tailwind ./src/index.css @tailwind base; @tailwind components; @tailwind utilities; Ve işte! Tailwind CSS artık projemize entegre edildi. Gerekli Kitaplıkları Yükleme Kodlama kısmına geçmeden önce , , , gibi gerekli kütüphaneleri yükleyerek hazırlıklarımızı tamamlayalım. fontawesome react-markdown axios react-hook-form FontAwesome for Icons'ı Yükleme npm i --save @fortawesome/fontawesome-svg-core npm install --save @fortawesome/free-solid-svg-icons npm install --save @fortawesome/react-fontawesome Markdown İçeriğini Oluşturmak için React Markdown'ı Yükleme npm install --save react-markdown Bu adımlar tamamlandıktan sonra projeniz gerekli tüm araç ve kütüphanelerle kurulur. Daha sonra, doğru ve insan benzeri metin yanıtları oluşturmak için Anthropic'in Claude API'sini ve LangChain'i kullanan yapay zeka asistanı uygulamasını oluşturmaya başlayacağız. Sorun giderme Yükleme veya kurulum sırasında herhangi bir sorunla karşılaşırsanız, işte birkaç genel çözüm: Node.js veya npm ile ilgili sorunlar için bunları yeniden yüklemeyi deneyin veya resmi ve belgelerine bakın. Node.js npm Create React App ile ilgili sorun yaşıyorsanız yardım için bakın. CRA belgelerine Tailwind CSS sorunları için bakın. Tailwind CSS belgelerine Diğer sorunlar için ilgili kitaplıkların belgelerine bakın veya sorunlarınızı StackOverflow'a veya ilgili GitHub depolarına gönderin. Proje Dosyalarının Yazılması Bu bölümde daha önce başlattığımız Flask uygulamasına geri döneceğiz ve ve gibi yeni uç noktalar ekleyeceğiz. Bunlar, basit sohbet ve gelişmiş sohbet özelliklerimiz (ikincisi Google arama sonuçları tarafından desteklenmektedir) için uç noktalar olarak hizmet verecektir. /ask /search Gerekli modüllerimizi içe aktararak başlayalım: from flask import Flask, jsonify, request from dotenv import load_dotenv from langchain.chat_models import ChatAnthropic from langchain.chains import ConversationChain from langchain.agents import Tool from langchain.agents import AgentType from langchain.utilities import SerpAPIWrapper from langchain.agents import initialize_agent from langchain.memory import ConversationBufferMemory from langchain.prompts.chat import ( ChatPromptTemplate, MessagesPlaceholder, SystemMessagePromptTemplate, AIMessagePromptTemplate, HumanMessagePromptTemplate, ) load_dotenv() app = Flask(__name__) Yukarıdaki bölüm gerekli tüm paketleri içe aktarır ve Flask uygulamamızı başlatır. Arka Uç Geliştirme Temel Uç Noktaları Oluşturma Sunucumuzun düzgün çalışıp çalışmadığını test etmek için temel bir uç nokta ( ) oluşturarak başlayacağız: / @app.route('/') def hello_world(): return 'Hello, World!' Kök URL'yi ziyaret ettiğimizde, sunucumuzun beklendiği gibi çalıştığını belirten "Merhaba Dünya!" yanıtını almalıyız. /ask Uç Noktasını oluşturma Bu uç nokta, uygulamamızın temel sohbet özelliği için mesajları işler. İstekten JSON verilerini okur, mesajları işler ve Anthropic'in Claude modelini ve LangChain'i kullanarak bir yanıt oluşturur. @app.route('/ask', methods=['POST']) def ask_assistant(): # The code for /ask endpoint goes here İstekten Mesajları Çıkarma Öncelikle herhangi bir verinin sağlanıp sağlanmadığını kontrol etmemiz ve mesajları buradan çıkarmamız gerekiyor. data = request.get_json() if not data: return jsonify({"error": "No data provided"}), 400 messages = data.get("message") Yanıtın Oluşturulması Aşağıdaki kod bölümü, LangChain'in modelini ve sohbetimizi yapılandırmak için kullanarak sohbet yanıtını oluşturur. Konuşma geçmişi kullanılarak saklanır. ChatAnthropic() ChatPromptTemplate ConversationBufferMemory llm = ChatAnthropic() input = "" message_list = [] for message in messages: if message['role'] == 'user': message_list.append( HumanMessagePromptTemplate.from_template(message['content']) ) input = message['content'] elif message['role'] == 'assistant': message_list.append( AIMessagePromptTemplate.from_template(message['content']) ) # Adding SystemMessagePromptTemplate at the beginning of the message_list message_list.insert(0, SystemMessagePromptTemplate.from_template( "The following is a friendly conversation between a human and an AI. The AI is talkative and " "provides lots of specific details from its context. The AI will respond with plain string, replace new lines with \\n which can be easily parsed and stored into JSON, and will try to keep the responses condensed, in as few lines as possible." )) message_list.insert(1, MessagesPlaceholder(variable_name="history")) message_list.insert(-1, HumanMessagePromptTemplate.from_template("{input}")) prompt = ChatPromptTemplate.from_messages(message_list) memory = ConversationBufferMemory(return_messages=True) conversation = ConversationChain(memory=memory, prompt=prompt, llm=llm) result = conversation.predict(input=input) Yanıtın Gönderilmesi Yanıtı oluşturduktan sonra sonuçtaki yeni satırları değiştirip onu bir JSON nesnesi olarak döndürüyoruz. print(result) return jsonify({"status": "success", "message": result}) /search Uç Noktasını oluşturma uç noktası benzer ancak daha ayrıntılı yanıtlar sağlamak için arama işlevini içerir. Bu özelliği eklemek için kullanıyoruz. /search /ask SerpAPIWrapper @app.route('/search', methods=['POST']) def search_with_assistant(): data = request.get_json() if not data: return jsonify({"error": "No data provided"}), 400 messages = data.get("message") llm = ChatAnthropic() # Get the last message with 'user' role user_messages = [msg for msg in messages if msg['role'] == 'user'] last_user_message = user_messages[-1] if user_messages else None # If there is no user message, return an error response if not last_user_message: return jsonify({"error": "No user message found"}), 400 input = last_user_message['content'] search = SerpAPIWrapper() tools = [ Tool( name = "Current Search", func=search.run, description="useful for when you need to answer questions about current events or the current state of the world" ), ] chat_history = MessagesPlaceholder(variable_name="chat_history") memory = ConversationBufferMemory(memory_key="chat_history", return_messages=True) agent_chain = initialize_agent( tools, llm, agent=AgentType.STRUCTURED_CHAT_ZERO_SHOT_REACT_DESCRIPTION, verbose=True, memory=memory, agent_kwargs = { "memory_prompts": [chat_history], "input_variables": ["input", "agent_scratchpad", "chat_history"] } ) result = agent_chain.run(input=input) print(result) return jsonify({"status": "success", "message": result}) Flask Uygulamasını Çalıştırma Son olarak Flask uygulamamızı çalıştırmak için standart ortak metni ekliyoruz. if __name__ == '__main__': app.run() Arka Ucu Test Etme Her şey yolunda giderse işte son arka uç kodumuz. from flask import Flask, jsonify, request from dotenv import load_dotenv from langchain.chat_models import ChatAnthropic from langchain.chains import ConversationChain from langchain.agents import Tool from langchain.agents import AgentType from langchain.utilities import SerpAPIWrapper from langchain.agents import initialize_agent from langchain.memory import ConversationBufferMemory from langchain.prompts.chat import ( ChatPromptTemplate, MessagesPlaceholder, SystemMessagePromptTemplate, AIMessagePromptTemplate, HumanMessagePromptTemplate, ) load_dotenv() app = Flask(__name__) @app.route('/') def hello_world(): return 'Hello, World!' @app.route('/ask', methods=['POST']) def ask_assistant(): data = request.get_json() if not data: return jsonify({"error": "No data provided"}), 400 messages = data.get("message") llm = ChatAnthropic() input = "" message_list = [] for message in messages: if message['role'] == 'user': message_list.append( HumanMessagePromptTemplate.from_template(message['content']) ) input = message['content'] elif message['role'] == 'assistant': message_list.append( AIMessagePromptTemplate.from_template(message['content']) ) # Adding SystemMessagePromptTemplate at the beginning of the message_list message_list.insert(0, SystemMessagePromptTemplate.from_template( "The following is a friendly conversation between a human and an AI. The AI is talkative and " "provides lots of specific details from its context. The AI will respond with plain string, replace new lines with \\n which can be easily parsed and stored into JSON, and will try to keep the responses condensed, in as few lines as possible." )) message_list.insert(1, MessagesPlaceholder(variable_name="history")) message_list.insert(-1, HumanMessagePromptTemplate.from_template("{input}")) prompt = ChatPromptTemplate.from_messages(message_list) memory = ConversationBufferMemory(return_messages=True) conversation = ConversationChain(memory=memory, prompt=prompt, llm=llm) result = conversation.predict(input=input) print(result) return jsonify({"status": "success", "message": result}) @app.route('/search', methods=['POST']) def search_with_assistant(): data = request.get_json() if not data: return jsonify({"error": "No data provided"}), 400 messages = data.get("message") llm = ChatAnthropic() # Get the last message with 'user' role user_messages = [msg for msg in messages if msg['role'] == 'user'] last_user_message = user_messages[-1] if user_messages else None # If there is no user message, return an error response if not last_user_message: return jsonify({"error": "No user message found"}), 400 input = last_user_message['content'] search = SerpAPIWrapper() tools = [ Tool( name = "Current Search", func=search.run, description="useful for when you need to answer questions about current events or the current state of the world" ), ] chat_history = MessagesPlaceholder(variable_name="chat_history") memory = ConversationBufferMemory(memory_key="chat_history", return_messages=True) agent_chain = initialize_agent( tools, llm, agent=AgentType.STRUCTURED_CHAT_ZERO_SHOT_REACT_DESCRIPTION, verbose=True, memory=memory, agent_kwargs = { "memory_prompts": [chat_history], "input_variables": ["input", "agent_scratchpad", "chat_history"] } ) result = agent_chain.run(input=input) print(result) return jsonify({"status": "success", "message": result}) if __name__ == '__main__': app.run() Şimdi uygulamamızı test edelim. Bu komutla arka uç uygulamasını çalıştırın, ayrıca lütfen sanal ortamımızın etkinleştirildiğinden emin olun. flask run Terminalimiz bu çıktıyı döndürürse her şeyin yoluna gireceğini bileceğiz. Daha fazla uzatmadan, iki uç noktamızı, ve test edelim. İkisini birbirinden ayırmak için her birine benzer payload gönderelim. REST API test ve dokümantasyon yazılımınızı açın veya yalnızca cURL'yi kullanın. Ancak bu derste kullanacağım. /ask /search Insomnia'yı Öncelikle uç noktasını aşağıdaki payload ile çağıralım. Diyelim ki " " adlı video oyununun devamı hakkında soru sordum. Yanlış cevap verecektir. Devam filmi hakkında henüz bir duyuru yapılmayan modelin 2021 yılı sonu itibarıyla eğitim kesintisi olması nedeniyle bu beklenen bir durumdur. /ask The Legend of Zelda: Breath of the Wild uç noktasına ne dersiniz? Kodumuzu daha önce fark ettiyseniz, bu uç nokta Agent kullanan daha karmaşık bir zincirle yönetiliyor. /search Agent'ı kullanarak, daha önce gösterdiğimiz gibi kendi kusurlarına sahip olan kendi modelinden daha fazla araç sağlayarak, yapay zekaya karar vermede daha fazla güç verebiliriz. uç noktasının nasıl çalıştığını göstermek için, onu öncekiyle aynı veri yüküyle çağıralım. /search Bu sefer işe yaradı! Kaputun altında nasıl çalışıyor? terminalimizdeki çıktıya bakalım. İlginçtir ki, bu sefer yapay zeka modeli hemen yanıt vermedi, ancak yanıt vermek için ne yapılması gerektiği konusunda 'düşünüyor' gibi görünüyordu. Web arama sonucunda "Haber aramasına göre The Legend of Zelda: Tears of the Kingdom adlı devam filmi duyurulmuş gibi görünüyor" gözlemini yaptıktan sonra cevap vermeye karar verdi. Yani bu mantıkla uç noktasını kullanmamız gerekmez mi? daha doğru ve dolayısıyla daha akıllı olduğu için mi? Pek değil. Normalde, sohbet robotu tabanlı bir uygulamada, botun önceki konuşmaların içeriğini koruması beklenir, böylece konuşmanın tüm içeriğini 'hatırlıyor'muş gibi yanıtlar verebilir. Bakalım uç noktası bunu yapabilecek mi? /search /search uç noktasının az önce sorduğumuz şeyi hatırlayıp hatırlamadığını test edelim. /search Bunun nedeni, LangChain kütüphanesinin geçmiş konuşmaları saklamak için kullanılabilecek bellek zinciri özelliğine sahip olmasına rağmen, web sunucusu ve bunun üzerine inşa edilen REST API hizmetinin doğası gereği durum bilgisiz olmasıdır. Bu, web sunucusunun her isteği yeni bir istek olarak ele alacağı anlamına gelir. Ama daha önceki konuşmaları payload olarak dahil etmedik mi? Bu iyi bir soru. LangChain'de kullanılan Aracı zincirinin şu anda hem kullanıcının hem de yapay zekanın istek ve yanıtlarından oluşan oluşturulmuş istemlerin işlenmesini desteklemediği ortaya çıktı. Bunu esas olarak model için örnek konuşmalar sağlamak ve modeli istediğimiz yanıta göre daha da ayarlamak için kullanırız. Ajan ise tek bir talimat alarak çalışır ve düşünce zincirlerini onun etrafında geliştirir. Bu nedenle görüşmelerimiz ne kadar uzun olursa olsun temsilci yalnızca en son talebe yanıt verecektir. Farkı görmek için uç noktamızı test edelim. /ask Bu sefer, geçmiş konuşmalarımızı ek bağlam olarak kullanarak cevap verdi! Artık AI Assistant uygulamamızı oluşturmak için her iki uç noktaya da ihtiyacımız olduğunu fark ettik. Peki hem modası geçmiş ama her zaman hatırla uç noktasını unutkan ama kapsamlı ve güncel uç noktasıyla nasıl birleştireceğiz? Elbette ön ucu oluşturarak! /ask /search Ön Ucu Geliştirme Uygulama.tsx proje dizinine geri dönelim. Bu projede, giriş noktası dosyası ile başlayarak React bileşenlerimizi değiştirmeye başlayacağız. ai-assistant-claude App.tsx import React from 'react'; import logo from './logo.svg'; import './App.css'; import { ChatClient } from './ChatClient'; function App() { return ( ); } export default App; Yukarıdaki kod parçasında bir sonraki adımda oluşturulacak olan bileşenini içe aktarıyoruz. Daha sonra öğesinin içine bileşenini ekliyoruz. Bu, React bileşenlerini kullanan AI asistan uygulamamızın yapısını ayarlar. ChatClient ChatClient.tsx import React, { useState } from 'react'; import { ChatInput } from './ChatInput'; import { ChatHistory } from './ChatHistory'; export interface Message { content: string; role: string; } export const ChatClient: React.FC = () => { const [messages, setMessages] = useState >([]); const [isLoading, setIsLoading] = useState(false) const handleSimpleChat = (message: string) => { // Send the message and past chat history to the backend // Update messages state with the new message let newMessages = [...messages, { content: message, role: 'user' }] setMessages(newMessages); let postData = { message: newMessages } setIsLoading(true) fetch('/ask', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(postData), }) .then((response) => response.json()) .then((data) => { if (data.status === "success") { setMessages([...newMessages, { content: data.message, role: 'assistant' }]) } setIsLoading(false) console.log('Success:', data); }) .catch((error) => { console.error('Error:', error); setIsLoading(false) }); }; const handleAdvancedChat = (message: string) => { // Trigger AI agent with Google Search functionality // Update messages state with the new message and AI response let newMessages = [...messages, { content: message, role: 'user' }] setMessages(newMessages); let postData = { message: newMessages } setIsLoading(true) fetch('/search', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(postData), }) .then((response) => response.json()) .then((data) => { if (data.status === "success") { setMessages([...newMessages, { content: data.message, role: 'assistant' }]) } console.log('Success:', data); setIsLoading(false) }) .catch((error) => { console.error('Error:', error); setIsLoading(false) }); }; return ( AI Assistant with Claude and LangChain ); }; Bu bileşen, yapay zeka asistanımız için birincil kullanıcı arayüzü görevi görür. Gösterildiği gibi, konuşma geçmişini görüntülemek için bir bileşeni ve metin girişi için bir bileşeni içerir. ChatHistory ChatInput Bileşen, bileşeninden gelen girişi işler, bu girişi kullanarak arka uca istekler gönderir ve ardından bir yükleme durumu görüntüler. İstek başarılı bir şekilde işlenirse bileşen, arka uçtan alınan yanıtı da gösterecektir. ChatInput ChatHistory.tsx import React from 'react'; import { ReactMarkdown } from 'react-markdown/lib/react-markdown'; import { Message } from './ChatClient'; interface ChatHistoryProps { messages: Array ; isLoading: boolean } export const ChatHistory: React.FC = ({ messages, isLoading }) => { return ( {messages.map((message, index) => ( {message.content} ))} {isLoading && ( {/* Put your desired loading content here */} Thinking... )} ); }; Neyse ki TailwindCSS, basit animasyonlar için gibi yerleşik yardımcı sınıflar sunar. Bu sınıf, bir isteğin yanıt beklediğini zarif bir şekilde belirtmeye yardımcı olur. Bu bileşende mesajların konumlandırılmasını da "kullanıcı" ve "asistan"dan ayırıyoruz. animate-pulse ChatInput.tsx import React, { useState } from 'react'; interface ChatInputProps { onSimpleChat: (message: string) => void; onAdvancedChat: (message: string) => void; } export const ChatInput: React.FC = ({ onSimpleChat, onAdvancedChat }) => { const [input, setInput] = useState(''); const handleInputChange = (event: React.ChangeEvent ) => { setInput(event.target.value); }; const handleSubmit = (handler: (message: string) => void) => { handler(input); setInput(''); }; return ( handleSubmit(onSimpleChat)} className="ml-2 px-4 py-2 font-semibold text-gray-600 bg-white dark:text-gray-400 dark:bg-gray-800 border border-gray-300 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none" > Ask handleSubmit(onAdvancedChat)} className="ml-2 px-4 py-2 font-semibold text-white bg-blue-500 border border-blue-600 rounded-md hover:bg-blue-400 focus:outline-none" > Ask and Search ); }; Son olarak metin girişimize iki buton ekledik. İlk düğme, girişi herhangi bir ek geliştirme olmadan AI modelini kullanarak işleyen uç noktasına göndermek için kullanılır. /ask Bu uç nokta bağlama duyarlıdır. Uygun bir şekilde "Sor ve Ara" olarak adlandırılan ikinci düğme, girişi uç noktasına gönderir. Bu düğme, girdiyi yapay zeka modeli aracılığıyla işlemenin yanı sıra, durum gerektiriyorsa yapay zeka odaklı bir web aramasını da tetikler. /search indeks.html  -- React App ++ Claude AI Assistant You need to enable JavaScript to run this app. tag. To begin the development, run `npm start` or `yarn start`. To create a production bundle, use `npm run build` or `yarn build`. --> Son dokunuş olarak, sayfasındaki uygulamamızın başlığını " " yerine " " olarak değiştirerek güncelliyoruz. index.html React App Claude AI Assistant paket.json { "name": "ai-assistant-claude", "version": "0.1.0", "private": true, ++ "proxy": "http://localhost:5000", "dependencies": { Son olarak dosyasına proxy konfigürasyonunu ekleyip olarak ayarlıyoruz. Bu, farklı bağlantı noktalarının kullanılmasından kaynaklanan CORS sınırlamalarını atlamamıza yardımcı olur. package.json http://localhost:5000 AI Asistan Uygulamasını Test Etme Teste başlamak için öncelikle arka uç uygulamasının (claude-langchain) zaten çalıştığından emin olun. Ardından dizini ön uç uygulamaya (ai-assistant-claude) değiştirin ve aşağıdaki komutu kullanarak uygulamayı başlatın: npm start Uygulamanın oluşturulması biraz zaman alabilir. Hazır olduğunda tarayıcınızda konumunda otomatik olarak açılacaktır. localhost:3000 Hem bağlam farkındalığını hem de arama özelliğini test edelim! Öncelikle son Yakuza oyununun devamı olan ve henüz 2021 yılında çıkacağı duyurulmayan başka bir video oyununa bakalım. Ayrıca bu oyunda önceki oyunlardan sevilen karakter Kazuma Kiryu'nun bulunup bulunmadığını da soracağız. Bunu yapmak için " " düğmesini tıklayın. SEGA'nın Sor Düşünmek için birkaç saniye verin... Şaşırtıcı bir şekilde yapay zeka yanlış yanıt verdi. Yakuza: Like a Dragon gerçekten de en son Yakuza oyunudur ancak başrolde farklı bir kahraman olan Ichiban Kasuga yer almaktadır. Soruyu yeniden yazalım ve bu kez " " butonunu kullanalım. Sor ve Ara Artık yapay zekanın internette arama yapması gerekip gerekmediğine karar vermesi daha uzun sürdü. Bir web aramasının gerekli olduğunu belirledikten ve tatmin edici bir yanıt bulduktan sonra, bilgiyi müşteriye/ön uca geri gönderdi. Bu sefer, gerçekten de baş kahraman olarak Kazuma Kiryu'nun yer aldığı "Ejderha Gaiden Gibi: Adını Silinen Adam" başlığını geri getiriyor. Büyüleyici, değil mi? Geniş Dil Modeli tarafından desteklenen aracı, mevcut kaynaklar (arama) göz önüne alındığında hangi eylemlerin gerekli olduğunu tahmin eder ve tatmin edici bir yanıt sağlar. LangChain modeli, istemleri (modele yönelik talimatlar) ve aracılar ve araçlar gibi diğer özellikleri bağlamayı ve "zincirlemeyi" kolaylaştırır. Çözüm Bu uygulamayı oluşturmaktan ve bu teknolojiler hakkında bilgi edinmekten keyif aldığınızı umuyoruz. Daha derine inmek isteyenler için, ve için tamamlanmış projeye erişebilirsiniz. ön uç arka uç Ortaklarımızın gerçekleştirdiği en son teknolojilerle tasarım yapmak istiyorsanız bir sonraki yapay zeka mücadelesinde bize katılın! *please see lablab.ai for all terms and conditions