Ai tarafından Steve Job ile Konuşma yapabilir
Genel tasarım
Her şeyden önce, AI tarafından oynanan ünlülerle sohbet etmek için bir uygulama yapmayı umuyoruz.Uygulamanın çekirdeği GPT kullanıyor. AI'nın hangi ünlüyü oynayacağını seçmek mümkün.
bağlamı al
Bu bir sohbet olduğundan, sohbetin sorunsuz ilerlemesi için bağlamı anlamamız gerekir. AI'nın bağlamı nasıl anlayacağı, burada kullanılan çözüm, tüm sohbet bağlamını her seferinde bir bilgi istemi olarak gpt modeline iletmektir.
AI'nın rol yapma durumuna girmesine nasıl izin verilir?
GPT çok güçlüdür, bunu yalnızca istemin başında söylememiz gerekir: xxx olduğunuzu farz edin.
Backend (arka uç) Kodları
Burada, arka uç hizmetleri oluşturmak için ekspres kullanıyoruz
npm i express npm i cors // Ön uç aynı kaynak politikasını çöz npm i body-parser // http gerekli biçimini ayrıştırini dosyası açın ve ekleyin
const express = require('express');
const cors = require('cors')
const bodyParser = require('body-parser')
const app = express();
app.use(cors())
app.use(bodyParser.json())
app.post('/chat_ai', async (req, res) => {
const prompt = req.body.prompt;
const openAiRes = await requestOpenAi(prompt);
const data = { chat_res: openAiRes };
res.send(data);
});
app.listen(8111, () => {
console.log('Server is running at http://localhost:8111')
})Daha sonra GPT'yi çağırmak için openAI tarafından resmi olarak sağlanan npm paketini kullanıyoruz.npm i openai
async function requestOpenAi(prompt) {
const OpenAi = require("openai")
const { Configuration, OpenAIApi } = OpenAi
const configuration = new Configuration({
organization: "xx",
apiKey: "xx",
});
const openai = new OpenAIApi(configuration);
const response = await openai.createCompletion({
model: "text-davinci-003",
prompt: prompt,
temperature: 0.9,
max_tokens: 500,
top_p: 1,
frequency_penalty: 0.0,
presence_penalty: 0.6,
});
const resText = response.data.choices[0].text;
return resText;
}Bunlar arasında oranization ve apiKey aşağıdaki iki yerde bulunabilir:https://beta.openai.com/account/org-settings
https://beta.openai.com/account/api-keys
Frontend Kodları
Kullanıcı arabirimini oluşturmak için react + bootstrap kullanın
npx create-react-app ai-frontend npm i sass npm i bootstrapAğ istek yöntemini özelleştirin ve ağ ile ilgili genel mantık burada işlenebilir
export function customFetch(input: string, init?: RequestInit): Promise<Response> {
input = "http://localhost:8111" + input;
const url = input;
const headers_value = { ...(init?.headers), "Content-Type": "application/json" };
init = { ...init, headers: headers_value }
return fetch(url, init);
}Sıradaki ana iş mantığımızİlk görüntülerde gösterildiği gibi, toplam 2 giriş öğemiz ve 1 çıkış öğemiz var. 2 giriş öğesi, AI tarafından oynanan ünlüyü ve giriş sohbet içeriğini seçmek için kullanılır ve 1 çıkış öğesi 1'dir. Konuşmalarımız.
function App() {
function listItem(data, index) {
console.log("listItem index:" + index + " data: " + data);
const isMe = data.startsWith("Me: ");
return <li className={['list-group-item', 'chat_item', isMe ? "me" : null].join(' ')} key={index}>{data}</li>
}
function listRole(data, index) {
console.log("listRole index:" + index + " data: " + data);
return <option value = {data} > {data}</option>
}
return (
<div className='root'>
<div className="App">
<ul className='list-group chat_list'>
{chatList.map((data, index) => listItem(data, index))}
</ul>
<div className='row chat_input'>
<select class="form-select select_role" aria-label="role selector" onChange={onRoleSelect} >
<option selected>select role</option>
{roleList.map((data, index) => listRole(data, index))}
</select>
<input type="text" className="form-control col" id="chat_input" placeholder="please input" value={inputValue} onChange={handleChange} />
<button className="btn btn-primary col-md-auto send_btn" onClick={sendClick}>send</button>
</div>
</div>
</div>
);
}Ardından, iki giriş öğesi ve bir çıkış öğesi için durumları tanımlar ve bunları ui bileşeniyle ilişkilendiririz:const [chatList, setChatList] = useReducer((olddata, newdata) => {
if (newdata === "clear") {
return [];
}
return olddata.concat(newdata)
}, [])
const [inputValue, setInputValue] = useState("");
const [role, setRole] = useState("");
function onRoleSelect(event) {
console.log("select value is" + event.target.value);
if ("select role" === event.target.value) {
setRole("")
}
setRole(event.target.value)
setChatList("clear")
}
const handleChange = (event) => {
console.log("input value is" + event.target.value);
setInputValue(event.target.value);
}Ayrıca bir ünlünün kimliğine bürünmek için bir dizi seçenek tanımlayınlet roleList = ["AI", "Steve Jobs", "Donald John Trump", "Ma Yun", "Ray Dalio"];
function genChatName(role) {
return role + ": "
}Ardından, tıklama olayı işlenecektir.Önce seçilip seçilmediğini kontrol edecek ve yapay zekanın hangi ünlüyü oynatmasına izin verecek ve ardından giriş içeriğini "Me: xxx" biçiminde biçimlendirip sohbette görüntüleyecektir. arka ucu listeleyin ve isteyin. Arka ucu istemeden önce bir istem oluşturulması gerekiyor.Başlangıçta da belirtildiği gibi bağlamı gerçekleştirmenin yolu, tüm sohbet içeriğini bir istem olarak birleştirip GPT'ye iletmektir. Bu nedenle, ilgili istemi chatList aracılığıyla oluşturmamız gerekiyor. İstek tamamlandıktan sonra sonuç chatList'te görüntülenebilir. function sendClick() {
if (role === "") {
alert("please select a role to chat with you")
return
}
const fullInput = genChatName("Me") + inputValue;
let newList = chatList.concat(fullInput);
setChatList(fullInput)
submit(genPrompt(newList));
}
function submit(text) {
const api = "/chat_ai";
const body = { prompt: text, role: genChatName(role)}
customFetch(api, {body: JSON.stringify(body), method: "POST"}).then(async (res) => {
const data = await res.json();
setChatList(genChatName(role) + data.chat_res)
}).catch((e) => {
console.error(e);
})
}
function genPrompt(chatList) {
let prompt = genTopic(role);
chatList.forEach(e => {
prompt=prompt + e + "\n";
});
prompt = prompt + genChatName(role);
return prompt;
}Sonunda
openAI, chatGPT'yi başlattığından beri, genel dil modelinin gücünü gördük.GPT modeli temelinde giderek daha fazla fikir ortaya çıkıyor ve giderek daha fazla uygulama entegre GPT özelliklerine sahip. Daha fazla uygulama katmanı geliştiricisine yenilik fırsatları getirecek olan yeni nesil GPT modelinin gelişini sabırsızlıkla bekliyoruz.
