从想法到现实：如何构建自己的个人 AI 助理 Web 应用程序。是否希望拥有一个像托尼·斯塔克饰演的贾维斯那样的个人人工智能助理？或者《钢铁侠星期五》来帮助完成任务、回答问题并陪伴在身边？
很庆幸生活在这个时代，本文将把这个科幻梦想变成了现实！算是很少的一部分，一个雏形。在本文中，将展示如何使用 Python FastAPI、ReactJS 和 GPT-3 语言模型构建自己的 AI 助手。
将看到人工智能助手的演示，并探索系统设计和架构。将详细介绍后端和前端的工作原理，以便更好地了解幕后所发生的一切。
从想法到实现：将梦幻般的人工智能助手变成有形的网络应用程序！在之前的文章《掌握AI摘要技术解锁个人第二大脑》中，探索了如何使用 Python 和 ChatGPT 创建人工智能驱动的第二大脑。第二个大脑能够根据用户提供的上下文数据来记住和组织信息。
在这篇文章中，通过实际构建一个个人人工智能助理来将事情提升到一个新的水平，可以用自然语言与它交谈、倾听和提问。
此外，借助 GPT-3 和网络抓取的强大功能，该人工智能助手可以提供超出用户提供的上下文数据的更多见解和答案。
人工智能助手的交互方式
先来看下这个简单版本的 JARVIS 所涉及的步骤：
- 将鼠标悬停在
说些什么按钮上 - 录音开始
- 对着麦克风说出你的问题
- 将鼠标光标移离按钮
- 后端魔法奇迹发生了！
- 人工智能助手通过扬声器向你说出答案
- 还可以在用户界面中获得问题/答案的文本记录
系统设计和架构一览
从这里开始将注意力转移到技术细节上。将系统分解为多个组件，它会是这样的：
- GPT-3 作为大型语言模型 (LLM)
- Llama-Index 用于向量化上下文数据并将其传递给 GPT-3
- Python FastAPI 服务器与经过训练的 LLM 模型进行交互
- ReactJS 和 ChakraUI 构建前端 UI
- 用于语音输入的 Webkit SpeechRecognition 库
- 用于文本转语音的 Webkit SpeechSynthesisUtterance 库
如果把所有这些放在一起，系统就是这样的。
从左到右、从上到下阅读系统设计图。
现在对系统的工作原理有了更全面的了解，接下来将按照前端和后端实现逐步深入的介绍。
后端：为 AI 助手提供支持
在过去的几个月里，ChatGPT 毫不夸张地说已经占领了世界。可以要求它做作业、准备演示文稿、编写 SQL 查询、编写代码、书写商务邮件、生成逼真的图像和视频等等。
尽管它可以做所有这些不同的事情，但当问它有关生活的问题时，它仍然会很挣扎。如你昨天吃了什么？上周你见到了谁？你的咖啡买了吗？
ChatGPT 无法回答这些问题，因为它无法了解你的个人生活。需要向其提供个人数据，它才能提供帮助。这就是以下内容的用武之地：
- 包含日记条目的文本文件
- Llama Index 用于读取此文本文件、矢量化数据并将其作为上下文传递给 GPT-3
这两者的结合使 GPT-3 能够回答对个人生活的任何问题。
首先，需要日志中存在数据，GPT-3 才能提供帮助。
第一步是根据这些数据训练 GPT-3 模型。接下来，将经过训练的模型保存在服务器上。
from llama_index import GPTSimpleVectorIndex, SimpleDirectoryReader
# Load data from the journal text file
documents = SimpleDirectoryReader("./data").load_data()
# Create a simple vector index
index = GPTSimpleVectorIndex(documents)
index.save_to_disk("generated_index.json")
# Create an infinite loop asking for user input and then breaking out of the loop when the response is empty
while True:
query = input("Ask a question: ")
if not query:
print("Goodbye")
break
# query the index with the question and print the result
result = index.query(query)
print(result)
现在，构建一个非常简单的 FastAPI 端点来与这个保存的模型进行交互。端点逻辑很简单：
- 传递来自WEB应用程序的用户问题
- 向保存的 GPT-3 模型提问
- 以 JSON 格式将答案返回给客户端
from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware
from llama_index import GPTSimpleVectorIndex
app = FastAPI()
# Define allowed origins
origins = [
"http://localhost:3000",
"http://localhost:5000",
"http://localhost:8000",
"http://localhost:8080",
]
# Add CORS middleware
app.add_middleware(
CORSMiddleware,
allow_origins=origins,
allow_credentials=True,
allow_methods=["*"],
allow_headers=["*"],
)
@app.get("/answers")
async def get_answer(question: str):
index = GPTSimpleVectorIndex.load_from_disk("generated_index.json")
answer = index.query(question)
return {"answer": answer.response}
此后，由前端负责将数据呈现给用户。
前端：将 AI 助手带入生活
用户与WEB应用程序交互，基本上有 4 个任务：
- 通过麦克风将用户的问题转化为文字
- 通过 API 调用将问题传递给服务器
- 将来自服务器的答案从文本转换为语音，并通过用户的扬声器产生输出
- 在进行语音转文本和文本转语音时向用户显示文字记录
import React, { useState, useEffect } from "react";
import { Button, VStack, Center, Heading, Box, Text } from "@chakra-ui/react";
function App() {
const [transcript, setTranscript] = useState("");
const [answer, setAnswer] = useState("");
const [isRecording, setIsRecording] = useState(false);
const [buttonText, setButtonText] = useState("Say Something");
const [recognitionInstance, setRecognitionInstance] = useState(null);
useEffect(() => {
const recognition = new window.webkitSpeechRecognition();
recognition.continuous = true;
recognition.interimResults = true;
recognition.lang = "en-US";
recognition.onresult = (event) => {
let interimTranscript = "";
let finalTranscript = "";
for (let i = event.resultIndex; i < event.results.length; i++) {
const transcript = event.results[i][0].transcript;
if (event.results[i].isFinal) {
finalTranscript += transcript + " ";
} else {
interimTranscript += transcript;
}
}
setTranscript(finalTranscript);
};
setRecognitionInstance(recognition);
}, []);
const recordAudio = () => {
setAnswer("");
setButtonText("Recording...");
setIsRecording(!isRecording);
recognitionInstance.start();
};
const stopAudio = async () => {
setButtonText("Say Something");
setIsRecording(!isRecording);
recognitionInstance.stop();
const response = await fetch(
`http://127.0.0.1:8000/answers?question=${transcript}`
);
const data = await response.json();
setAnswer(data["answer"]);
const utterance = new SpeechSynthesisUtterance(data["answer"]);
window.speechSynthesis.speak(utterance);
};
return (
<Box
bg="black"
h="100vh"
display="flex"
justifyContent="center"
alignItems="center"
padding="20px"
>
<Center>
<VStack spacing={12}>
<Heading color="red.500" fontSize="8xl">
👋 I am your personal assistant 🤖
</Heading>
<Button
colorScheme="red"
width="300px"
height="150px"
onMouseOver={recordAudio}
onMouseLeave={stopAudio}
fontSize="3xl"
>
{buttonText}
</Button>
{transcript && (
<Text color="whiteAlpha.500" fontSize="2xl">
Question: {transcript}
</Text>
)}
{answer && (
<Text color="white" fontSize="3xl">
<b>Answer:</b> {answer}
</Text>
)}
</VStack>
</Center>
</Box>
);
}
export default App;
关于语音部分，也可以借助AI来实现不同的声音，这里就不展开了。
题外话
当下这个大数据时代不掌握一门编程语言怎么跟的上脚本呢？当下最火的编程语言Python前景一片光明！如果你也想跟上时代提升自己那么请看一下.
感兴趣的小伙伴，赠送全套Python学习资料，包含面试题、简历资料等具体看下方。
👉CSDN大礼包🎁：全网最全《Python学习资料》免费赠送🆓！（安全链接，放心点击）
一、Python所有方向的学习路线
Python所有方向的技术点做的整理，形成各个领域的知识点汇总，它的用处就在于，你可以按照下面的知识点去找对应的学习资源，保证自己学得较为全面。
二、Python必备开发工具
工具都帮大家整理好了，安装就可直接上手！
三、最新Python学习笔记
当我学到一定基础，有自己的理解能力的时候，会去阅读一些前辈整理的书籍或者手写的笔记资料，这些笔记详细记载了他们对一些技术点的理解，这些理解是比较独到，可以学到不一样的思路。
四、Python视频合集
观看全面零基础学习视频，看视频学习是最快捷也是最有效果的方式，跟着视频中老师的思路，从基础到深入，还是很容易入门的。
五、实战案例
纸上得来终觉浅，要学会跟着视频一起敲，要动手实操，才能将自己的所学运用到实际当中去，这时候可以搞点实战案例来学习。
六、面试宝典
简历模板
👉CSDN大礼包🎁：全网最全《Python学习资料》免费赠送🆓！（安全链接，放心点击）
若有侵权，请联系删除
4781
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
