ChatGPT搭建AI网站实战

1.概述
ChatGPT是一款基于GPT-3.5架构的大型语言模型，它能够进行自然语言处理和生成对话等任务。作为一款智能化的聊天机器人，ChatGPT有着广泛的应用场景，如在线客服、智能助手、个性化推荐等。今天笔者给大家分享一下如何使用ChatGPT的API模型快速搭建一个AI网站。

2.内容
在实战中，我发现ChatGPT的最大优势在于其自然流畅的对话交互能力。ChatGPT能够自动理解用户的意图和提出的问题，并针对性地给出回答和建议。同时，它还可以基于已有的上下文信息生成更加丰富的回复，从而实现更加自然和贴近人类的交互效果。

下面我将分享一些关于如何使用ChatGPT的实战经验，大概流程如下所示：

在这里插入图片描述

在使用ChatGPT前，我们需要对数据进行预处理。预处理的目的是将原始文本转换为模型可以理解的格式。具体来说，需要进行的预处理步骤包括：分词、标记化、向量化等。这些步骤都可以使用常见的NLP工具库来实现，如NLTK、spaCy、transformers等。在预处理完数据后，我们需要使用训练数据来训练ChatGPT模型。通常情况下，我们会使用一些优秀的深度学习框架来实现模型的训练，如PyTorch、TensorFlow等。在模型训练过程中，我们需要设置一些超参数，如学习率、批量大小、模型深度等。在模型训练完成后，我们需要对模型进行评估。评估的目的是了解模型的性能和表现，从而决定是否需要进行进一步的调整和优化。常见的模型评估指标包括：准确率、召回率、F1值等。在完成模型训练和评估后，我们需要将ChatGPT应用到实际场景中。通常情况下，我们需要将ChatGPT集成到我们的应用程序中，如在线客服、智能助手等。在部署过程中，我们需要考虑一些问题，如性能、可靠性、安全性等。

3.如何使用ChatGPT快速实现一个AI网站呢？
使用ChatGPT实现一个AI网站，大概步骤如下所示：

在这里插入图片描述

首先，您需要确定您的AI网站将用于哪些目的和哪些受众。您的目标可能是提供在线客服、智能问答、语音识别、自动翻译等功能。您的受众可能是您的客户、读者、访问者等。通过明确您的目标和受众，您可以更好地规划您的网站架构和设计。要构建一个AI网站，您需要选择一个Web开发框架。常用的Web开发框架包括Django、Flask、Express等。这些框架提供了许多常见的功能和模板，可以帮助您更快速地开发网站，并提高开发效率。集成ChatGPT是实现AI网站的关键步骤。您可以使用Python或JavaScript等编程语言来调用ChatGPT API并将其嵌入到您的Web应用程序中。这样，您的网站就可以通过ChatGPT提供更好的用户体验和服务。例如，用户可以通过与ChatGPT交互来获取问题的答案、进行语音交互等。

为了让用户能够更好地与ChatGPT交互，您需要创建一个用户友好的界面。您可以使用HTML、CSS、JavaScript等技术来设计和创建您的用户界面。您需要考虑到用户的需求和体验，并确保您的界面简洁、易用、美观等。为了让ChatGPT能够准确地回答用户的问题，您需要对ChatGPT进行训练。您可以使用自然语言处理技术来训练ChatGPT，以便它能够理解和响应用户的问题。您可以使用开源的数据集和算法来训练ChatGPT，并优化模型以提高精度和效率。

在将您的网站部署到生产环境之前，您需要对它进行测试和优化。您应该检查所有功能并确保它们能够正常运行，同时还应该优化性能和用户体验，以提高用户满意度。您可以使用自动化测试工具来测试您的网站，并使用性能分析工具来识别瓶颈和优化点。您可以收集用户反馈并进行改进，以不断改善您的网站。

当您准备好将您的网站部署到生产环境时，您需要选择一个合适的Web服务器和数据库。常用的Web服务器包括Apache、Nginx等，常用的数据库包括MySQL、PostgreSQL等。您还需要选择一个合适的云服务提供商，如AWS、Google Cloud等，并将您的应用程序部署到云服务器上。一旦您的网站部署到生产环境，您需要进行定期的维护和升级。您应该定期备份您的数据并更新您的应用程序以确保安全性和稳定性。您还应该持续地优化您的用户体验和功能，以满足用户的需求和期望。

4.基于promptable快速实现
如果你不懂算法，那么可以通过在promptable 快速建立prompt，然后部署生成一个PromptID，通过这个PromptID直接调用OpenAI的接口得到模型输出的结果。操作如下：

4.1 编写一个hook模块
用来调用OpenAI的接口，获取输出结果，实现代码如下所示：

import { addMessage, getHistoryString } from "@/utils/chatHistory";
import React, { useEffect } from "react";

export const useChatGpt = (message, promptId, chatHistory) => {
  // Send user meesage to api, meesage and prompt in body
  // then update state value with response
  //   console.log("Hook api call", message, promptId);
  const [data, setData] = React.useState("");
  const [isLoading, setIsLoading] = React.useState(false);
  const [isError, setIsError] = React.useState(false);
  const [history, setHistory] = React.useState(chatHistory);
  const [isSuccess, setIsSuccess] = React.useState(false);

  const fetchData = async () => {
    setIsLoading(true);
    try {
      const response = await fetch("/api/chatgpt", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          message,
          promptId,
          chatHistory: getHistoryString(chatHistory),
        }),
      }).then((res) => res.json());
      if (response.reply) {
        console.log("Hook api call response", response.reply);
        setData(response.reply);
        setIsSuccess(true);
        setHistory(addMessage(chatHistory, response.reply, "agent"));
      } else {
        setIsError(true);
      }
    } catch (error) {
      setIsError(true);
    }
    setIsLoading(false);
  };

  useEffect(() => {
    setIsError(false);
    setIsSuccess(false);
    if (message) {
      fetchData();
    }
  }, [message]);

  useEffect(() => {
    setHistory(chatHistory);
  }, [chatHistory]);

  useEffect(() => {
    if (promptId) {
      setIsError(false);
      setIsSuccess(false);
      setHistory([]);
    }
  }, [promptId]);

  return {
    data,
    isLoading,
    isError,
    history,
    isSuccess,
  };
};

4.2 编写一个页面组件
通过编写一个页面组件，用来实现与后台接口服务交互使用，该模块用来调用模型并得到输出结果，实现代码如下所示：

import { useChatGpt } from "@/hook/useChatGpt";
import { addMessage } from "@/utils/chatHistory";
import { Button, TextField } from "@mui/material";
import React, { useEffect } from "react";
import { ChatHistoryFrame } from "./ChatHistoryFrame";

const promptId = "xxxxxx"; // 通过Prompt自动生成获取ID

export const ChatContainer = () => {
  const [pendingMessage, setPendingMessage] = React.useState("");
  const [message, setMessage] = React.useState("");
  const [chatHistory, setChatHistory] = React.useState([]);
  const { isLoading, history, isSuccess, isError } = useChatGpt(
    message,
    promptId,
    chatHistory
  );

  useEffect(() => {
    if (isSuccess || isError) {
      setMessage("");
    }
  }, [isSuccess, isError]);

  return (
    <div id="chat-container">
        <h1>MOVIE to emoji</h1>
      </a>
      <ChatHistoryFrame chatHistory={chatHistory} isLoading={isLoading} />
      <div id="chat-input">
        <TextField
          type="text"
          onChange={(e) => {
            setPendingMessage(e.target.value);
          }}
        />
        <Button
          style={{
            backgroundColor: "black",
            width: "80px",
          }}
          variant="contained"
          onClick={() => {
            setMessage(pendingMessage);
            setChatHistory(addMessage(history || [], pendingMessage, "user"));
          }}
        >
          Send
        </Button>
        <Button
          style={{
            color: "black",
            width: "80px",
            borderColor: "black",
          }}
          variant="outlined"
          onClick={() => {
            setMessage("");
            setChatHistory([]);
          }}
        >
          Clear
        </Button>
      </div>
    </div>
  );
};

4.3 ChatGPT核心模块
编写一个调用ChatGPT接口逻辑的核心模块，用来与API交互得到输出结果，具体实现细节如下：

import { PromptableApi } from "promptable";
import { Configuration, OpenAIApi } from "openai";
import GPT3Tokenizer from "gpt3-tokenizer";

const configuration = new Configuration({
  apiKey: process.env.OPENAI_API_KEY,
});
const openai = new OpenAIApi(configuration);
const tokenizer = new GPT3Tokenizer({ type: "gpt3" });

const chatgpt = async (req, res) => {
  const { message, promptId, chatHistory } = req.body;
  console.log("api call entry", message, promptId);
  if (!message) {
    res.status(400).json({ error: "Message is required" });
    return;
  }
  if (!promptId) {
    res.status(400).json({ error: "Prompt ID is required" });
    return;
  }
  // call prompt ai api and openai api
  const reply = await getReply(message, promptId, chatHistory || "");
  res.status(200).json({ reply });
  return;
};

const getReply = async (message, promptId, chatHistory) => {
  // get prompt from prompt ai api based on promptId
  if (!promptId) {
    throw new Error("Prompt ID is required");
  }
  const promptDeployment = await PromptableApi.getActiveDeployment({
    promptId: promptId,
  });
  console.log("prompt deployment", promptDeployment);
  if (!promptDeployment) {
    throw new Error("Prompt deployment not found");
  }
  // replace prompt with message

  const beforeChatHistory = promptDeployment.text.replace("{{input}}", message);

  const numTokens = countBPETokens(beforeChatHistory);
  const afterChatHistory = beforeChatHistory.replace(
    "{{chat history}}",
    chatHistory
  );

  const finalPromptText = leftTruncateTranscript(
    afterChatHistory,
    4000 - numTokens
  );

  const revisedPrompt = {
    ...promptDeployment,
    text: finalPromptText,
  };

  console.log("revised prompt", revisedPrompt);
  // call openai api
  const response = await openai.createCompletion({
    model: revisedPrompt.config.model,
    prompt: revisedPrompt.text,
    temperature: revisedPrompt.config.temperature,
    max_tokens: revisedPrompt.config.max_tokens,
    top_p: 1.0,
    frequency_penalty: 0.0,
    presence_penalty: 0.0,
    stop: revisedPrompt.config.stop,
  });
  console.log("openai response", response.data);
  if (response.data.choices && response.data.choices.length > 0) {
    return response.data.choices[0].text;
  } else {
    return "I'm sorry, I don't understand.";
  }
};

function countBPETokens(text) {
  const encoded = tokenizer.encode(text);
  return encoded.bpe.length;
}

function leftTruncateTranscript(text, maxTokens) {
  const encoded = tokenizer.encode(text);
  const numTokens = encoded.bpe.length;
  const truncated = encoded.bpe.slice(numTokens - maxTokens);
  const decoded = tokenizer.decode(truncated);
  return decoded;
}

export default chatgpt;

4.4 使用依赖
最后，我们工程所使用的依赖包，如下所示：

"dependencies": {
    "@emotion/react": "^11.10.5",
    "@emotion/styled": "^11.10.5",
    "@mui/material": "^5.11.6",
    "@next/font": "13.1.6",
    "eslint": "8.32.0",
    "eslint-config-next": "13.1.6",
    "gpt3-tokenizer": "^1.1.5",
    "next": "13.1.6",
    "openai": "^3.2.1",
    "promptable": "^0.0.5",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  }

4.5 编写Prompt
在完成核心模块的后台逻辑编写后，可以访问Prompt后台，通过编写Prompt来获取ID，操作如下：
在这里插入图片描述

4.6 部署Prompt
完成Prompt编写后，我们就可以部署Prompt了，部署成功后会生成一个PromptID，如下图所示：

在这里插入图片描述

这里，在部署Prompt里面有参考代码实现，具体如下：

import axios from 'axios'


// 这里面的xxxxxxx是部署Prompt自动生成的ID，这里我用xxxxxxx替换了
const { data } = await axios.get('https://promptable.ai/api/prompt/xxxxxxx/deployment/active')

const prompt = data.inputs?.reduce((acc, input) => {
  // Replace input.value with your value!
  return acc.replaceAll(`{{${input.name}}}, ${input.value}`)
}, data.text)

const res = await axios.get('https://openai.com/v1/completions', {
  data: {
    // your prompt
    prompt,

    // your model configs from promptable
    config: {
      ...data.config,
      // add any other configs here
    }
  }
})

// Your completion!
console.log(res.data.choices[0].text)

4.7 ChatGPT实现的AI网站预览
最后，我们基于OpenAI最新的gpt-3.5-turbo模型，开发一个AI网站，效果如下：

在这里插入图片描述

这里为了节省token费用，通过点击“停止对话”按钮暂时输出了。因为使用OpenAI的接口是按照token来算费用的，英文字母算一个token，一个汉字算两个token，收费明细如下：
在这里插入图片描述

5.总结
本文介绍了如何使用ChatGPT来实现一个AI网站。通过选择合适的Web开发框架、集成ChatGPT、创建用户界面、训练ChatGPT、测试和优化、部署到生产环境以及进行维护和升级等步骤，您可以构建一个功能强大的AI网站，并提供更好的用户体验和服务。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/20249.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

开发环境搭建和创建STM32工程

开发环境搭建和创建STM32工程

目录 一、开发环境搭建 1. STM32CubeMX 2.Keil安装 二、创建STM32工程 一、开发环境搭建 1. STM32CubeMX ST公司出品 工具链接 https://www.st.com/zh/development-tools/stm32cubemx.html STM32CubeMX是一种图形工具&#xff0c;通过分步过程可以非常轻松地配置STM32微控制器和…
阅读更多...
【IIS搭建网站】如何使用本地电脑做服务器搭建web站点并公网访问

【IIS搭建网站】如何使用本地电脑做服务器搭建web站点并公网访问

目录 前言 Windows网页设置 Windows IIS功能设置 IIS网页访问测试 Cpolar内网穿透 下载安装Cpolar Cpolar云端设置 3.3 Cpolar本地设置 公网访问测试 结语 前言 在网上各种教程和介绍中&#xff0c;搭建网页都会借助各种软件的帮助&#xff0c;比如网页运行的Apache…
阅读更多...
字节面试挂在2面，复盘总结了经验，决定再战一次.....

字节面试挂在2面，复盘总结了经验，决定再战一次.....

先说下我基本情况&#xff0c;本科不是计算机专业&#xff0c;现在是学通信&#xff0c;然后做图像处理&#xff0c;可能面试官看我不是科班出身没有问太多计算机相关的问题&#xff0c;因为第一次找工作&#xff0c;字节的游戏专场又是最早开始的&#xff0c;就投递了&#xf…
阅读更多...
算法修炼之练气篇——练气十八层

算法修炼之练气篇——练气十八层

博主&#xff1a;命运之光 专栏&#xff1a;算法修炼之练气篇 前言&#xff1a;每天练习五道题&#xff0c;炼气篇大概会练习200道题左右&#xff0c;题目有C语言网上的题&#xff0c;也有洛谷上面的题&#xff0c;题目简单适合新手入门。&#xff08;代码都是命运之光自己写的…
阅读更多...
轻松搭建冒险岛服务器-冒险岛私服搭建详细教程

轻松搭建冒险岛服务器-冒险岛私服搭建详细教程

想要拥有一个属于自己的冒险岛世界吗&#xff1f;想要一步步学习如何架设冒险岛服务器吗&#xff1f;本文将从如何选择服务器、安装系统、配置环境、搭建数据库、部署网站、上传文件、启动服务等8个方面&#xff0c;一步步为大家详细讲解冒险岛架设教程。让你轻松打造属于自己的…
阅读更多...
Git常用操作:基础命令、生成公钥、webhook同步

Git常用操作:基础命令、生成公钥、webhook同步

这里写目录标题 下载安装GIT基础命令克隆初始化与仓库建立连接下拉代码提交代码清空本地缓存 本地生成GIT公钥webhook&#xff08;本地-码云-服务器代码同步&#xff09; 下载安装GIT 此处只介绍windows系统下的安装&#xff0c;linux一般都是自带git&#xff08;自行百度&…
阅读更多...
Centos7安装Docker

Centos7安装Docker

0.安装Docker Docker 分为 CE 和 EE 两大版本。CE 即社区版&#xff08;免费&#xff0c;支持周期 7 个月&#xff09;&#xff0c;EE 即企业版&#xff0c;强调安全&#xff0c;付费使用&#xff0c;支持周期 24 个月。 Docker CE 分为 stable test 和 nightly 三个更新频道…
阅读更多...
Java设计模式 14-访问者模式

Java设计模式 14-访问者模式

访问者模式 这个模式用的很少&#xff0c;《设计模式》的作者评价为&#xff1a; 大多情况下&#xff0c;你不需要使用访问者模式&#xff0c;但是一旦需要使用它时&#xff0c;那就真的需要使用了 一、测评系统的需求 1)将观众分为男人和女人&#xff0c;对歌手进行测评&…
阅读更多...
多态与虚函数

多态与虚函数

多态与虚函数 多态的引入多态与虚函数多态编译时多态运行时多态 多态的原理静态联编和动态联编 多态的引入 学过C继承的话应该都知道在继承中存在一种菱形继承&#xff0c;假设存在一个类&#xff08;person&#xff09;&#xff0c;其派生出两个子类&#xff0c;分别是studen…
阅读更多...
ArcGIS栅格重采样与算法选择

ArcGIS栅格重采样与算法选择

本文介绍在ArcMap软件中&#xff0c;实现栅格图像重采样的具体操作&#xff0c;以及不同重采样方法的选择依据。 首先&#xff0c;如下图所示&#xff0c;是我们待重采样的栅格图像的属性界面。其中&#xff0c;可以看到此时栅格像元的边长为0.4867左右&#xff08;由于图层是地…
阅读更多...
【爬虫逆向】Python加密算法大揭秘：应用场景与实现技巧

【爬虫逆向】Python加密算法大揭秘：应用场景与实现技巧

前言&#xff1a;​ 在我们进行js逆向的时候. 总会遇见一些我们人类无法直接能理解的东西出现. 此时你看到的大多数是被加密过的密文.今天在这里教大家各种加密的逻辑。 Python助学大礼包点击跳转获取 目录 一、一切从MD5开始二、URLEncode和Base64三、对称加密四、非对称加密…
阅读更多...
JS逆向 -- 分析某站aid、cid、w_rid和sid的加密过程

JS逆向 -- 分析某站aid、cid、w_rid和sid的加密过程

接上节课内容 JS逆向 -- 分析某站buvid3和_uuid的加密过程 JS逆向 -- 分析某站b_lsid值加密过程 一、清除cookie信息&#xff0c;刷新网页&#xff0c;ctrlf搜索sid&#xff0c;这样找到的数据是在url里或者响应信息里面&#xff0c;全局搜索找到的一般都是在js里面的数据&a…
阅读更多...
Linux实操篇---常用的基本命令4（磁盘查看和分区类）

Linux实操篇---常用的基本命令4（磁盘查看和分区类）

一、磁盘查看和分区类 du查看文件和目录占用的磁盘空间 du&#xff1a;disk usage 磁盘占用情况 基本语法&#xff1a; du 目录/文件 显示目录下每个字母里的磁盘使用情况选项说明&#xff1a; 选项功能-h以人们较易阅读的GBytes&#xff0c;MBytes&#xff0c;KBytes等…
阅读更多...
【AIGC】阿里云服务器配置stable-diffusion-webui

【AIGC】阿里云服务器配置stable-diffusion-webui

阿里云服务器部署SD全流程, 正在更新&#xff01;&#xff01;&#xff01; 购买阿里云实例开始部署开始运行安装插件中文插件从civitai上下载模型, 加载并利用其绘图 购买阿里云实例 我感觉应该不止我一个&#xff0c;点进阿里云的官网后&#xff0c;发现里面的内容太多&…
阅读更多...
C++ 仿函数(一)

C++ 仿函数(一)

目录 一、仿函数是什么&#xff1f; 二、仿函数的特点 1.仿函数在使用时&#xff0c;可以像普通函数那样调用, 可以有参数&#xff0c;可以有返回值 2.仿函数超出普通函数的概念&#xff0c;可以有自己的状态 ​编辑3.仿函数可以作为参数传递。 三、谓词 一元谓词示例&a…
阅读更多...
Azure API 管理缺陷突出了 API 开发中的服务器端请求伪造风险

Azure API 管理缺陷突出了 API 开发中的服务器端请求伪造风险

微软最近修补了其 Azure API 管理服务中的三个漏洞&#xff0c;其中两个漏洞启用了服务器端请求伪造 (SSRF) 攻击&#xff0c;这些攻击可能允许黑客访问内部 Azure 资产。 概念验证漏洞用于突出开发人员在尝试为自己的 API 和服务实施基于黑名单的限制时可能犯的常见错误。 W…
阅读更多...
4月更新 | Visual Studio Code Python

4月更新 | Visual Studio Code Python

我们很高兴地宣布2023年4月版 Visual Studio Code 的 Python 和 Jupyter 扩展现已推出&#xff01; 此版本包括以下改进&#xff1a; Data Wrangler 可供 Visual Studio Code Insiders 使用移动符号重构Create Environment 按钮嵌入依赖文件扩展作者的环境 APIPython 环境的内…
阅读更多...
BTC交易费激增，LTC活跃地址数飙升! BRC-20爆火背后，区块链网络经历了什么？

BTC交易费激增，LTC活跃地址数飙升! BRC-20爆火背后，区块链网络经历了什么？

BRC-20 代币和 Ordinals 协议的日益普及推动了对比特币区块空间的需求&#xff0c;比特币区块链的费用已飙升至两年来的高点。 BRC-20代币标准在 Ordinals 协议上运行。Ordinals 允许用户通过将对数字艺术的引用写入基于比特币的小型交易中&#xff0c;来将数据嵌入比特币区块…
阅读更多...
MySQL体系架构

MySQL体系架构

一、 MySQL体系架构 MySQL体系架构可分为物理架构和逻辑架构。 1、MySQL物理体系架构 1.1 配置文件 auto.cnf: 配置了MySQL Server的UUIDmy.cnf: MySQL的配置文件 1.2 其他重要文件 -basedirdir_name: MySQL安装的二进制文件目录-datadirdir_name: MySQL的数据目录和-pid-…
阅读更多...
特征选择与特征提取

特征选择与特征提取

目录 一、 特征选择1、特征2、特征选择3、扩展——特征选择算法(有兴趣和精力可了解)拓展--完全搜索:拓展--启发式搜索:拓展--随机搜索:拓展--遗传算法: 二、 特征提取三、特征提取主要方法——PCA(主成分分析)1、PCA算法是如何实现的&#xff1f;PCA--零均值化&#xff08;中心…
阅读更多...
最新文章

Copyright @ 2022~2023