低代码开发能与视频对话的AI聊天应用（含前后端代码）

最新推荐文章于 2025-03-14 09:18:59 发布
最新推荐文章于 2025-03-14 09:18:59 发布
阅读量1.7k 收藏 24
点赞数 29
分类专栏： AWS技术 文章标签： 人工智能 亚马逊云科技 aws 科技 ai 云计算 语言模型
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_66628975/article/details/145788069
版权

在本篇文章中，我会构建一个基于生成式AI的应用，让大家能利用生成式AI的能力和视频交互，并且几乎不需要编写任何代码。

在本篇文章中，我将展示如何构建一个简单的AI应用，它可以总结冗长的YouTube视频并使其可交互，同样的方式大家可以应用到B站视频等。海外的开发者经常观看YouTube视频，目的包括学习、娱乐和工作。因为是从事IT行业，开发者有时候没有时间看完整个视频，但又非常想了解视频中提到的关键内容，以便进一步深入研究自己感兴趣的部分。今天大家可以可以利用这个应用来实现这个需求。

例如在下图中，我就用了这个应用总结了Matt Wood（亚马逊云科技AI副总裁）在亚马逊洛杉矶峰会上的1.5小时主题演讲，AI总结并生成内容的整个过程不到一分钟。然后我们就可以围绕自己感兴趣的关键点向AI提问，并通过对话进行深入探讨。

架构设计方案

AI视频交互助手架构详解

以下是整个云端解决方案的流程图 

  1. 用户输入一个YouTube视频URL，让AI助手进行总结。
  2. Streamlit应用底层代码会提取URL，解析出视频ID，并调用YouTube API获取视频的转录文本。
  3. 应用从转录文本中构建一个提示词，并将其传递给Amazon Bedrock，使用预定义的模型进行内容总结。
  4. Bedrock根据提示词总结转录文本，并将响应回复返回给用户。
  5. 如果用户有后续问题，应用使用Langchain构建对话记忆，并基于原始转录内容回答用户的后续提问。

项目实操前提准备

如果大家对亚马逊云科技的生成式AI技术栈不熟悉，我建议先学习相关内容，然后再回来开始本项目的搭建。我们在动手之前，可以对以下组件进行了深入学习和了解，方便我们开始本篇文章中的项目。

  1. 在us-east-1区域设置Amazon Bedrock访问权限，并为Anthropic Claude 3模型启用访问权限。我选择这个AI大语言模型，因为它的最大Token数为200k，这让我能够在不增加我们的AI应用复杂度的情况下处理最长达3小时的视频转录文本。
  2. 在自己喜欢的代码IDE中安装Amazon Q Developer扩展。我使用的是Visual Studio Code。
  3. 熟悉Streamlit框架，以便部署AI Python应用——利用该框架的网页项目发布流程仅需一分钟。

代码组成部分

作为一名云端方案设计者，我认为理解各组件如何协同工作，以及了解模块修改对整体解决方案的影响是非常重要。我们应该对生成式AI应用的整体逻辑和架构有较好的理解，然而除了代码，我们还需要编写代码使其运行。因此在本方案中，我想利用AI代码生成助手Amazon Q，测试其如何帮助我最大程度地减少代码编写工作。通过多次迭代和参考大量现有示例，这个过程其实并不难。

代码主要由以下三个组件组成：

  1. bedrock.py：负责与LLM交互，创建Bedrock运行环境，进行内容总结，并利用LangChain管理聊天历史记录。
  2. utilities.py：负责获取视频转录文本，并基于转录内容构建提示词。
  3. app.py：主应用，负责与用户交互，包括接收视频URL、返回摘要、管理聊天会话等。

Bedrock模块详解

首先我向Amazon Q提出了这个问题：

write a python function that sets up a conversational AI system using the Amazon Bedrock service and the Claude language model (claude3). The AI can engage in a back-and-forth conversation with a user, maintaining context and providing relevant responses based on the prompt template and conversation history and then return the conversation with the user

它为我生成了示例代码，我只需进行少量调整，就能使其能够在Streamlit环境中运行。最终代码如下所示：

import boto3
from langchain.prompts import PromptTemplate
from langchain.chains import ConversationChain
from langchain.memory import ConversationBufferMemory
from langchain_community.chat_models import BedrockChat
import streamlit as st

from botocore.config import Config
retry_config = Config(
        region_name = 'us-east-1',
        retries = {
            'max_attempts': 10,
            'mode': 'standard'
        }
)

def bedrock_chain():
    ACCESS_KEY = st.secrets["ACCESS_KEY"]
    SECRET_KEY = st.secrets["SECRET_KEY"]
    session = boto3.Session(
        aws_access_key_id=ACCESS_KEY,
        aws_secret_access_key=SECRET_KEY
    )
    
    bedrock_runtime = session.client("bedrock-runtime", config=retry_config)
       
    model_id = "anthropic.claude-3-sonnet-20240229-v1:0"
    model_kwargs =  { 
        "max_tokens": 2048,  # Claude-3 use “max_tokens” However Claud-2 requires “max_tokens_to_sample”.
        "temperature": 0.0,
        "top_k": 250,
        "top_p": 1,
        "stop_sequences": ["\n\nHuman"],
    }
    model = BedrockChat(
        client=bedrock_runtime,
        model_id=model_id,
        model_kwargs=model_kwargs,
    )
    
    prompt_template = """System: TThe following is a video transcript. I want you to provide a comprehensive summary of this text and then list the key points. The entire summary should be around 400 word. 

    Current conversation:
    {history}

    User: {input}
    Bot:"""
    prompt = PromptTemplate(
        input_variables=["history", "input"], template=prompt_template
    )

    memory = ConversationBufferMemory(human_prefix="User", ai_prefix="Bot")
    conversation = ConversationChain(
        prompt=prompt,
        llm=model,
        verbose=True,
        memory=memory,
    )
    return conversation

工具函数模块详解

我让Amazon Q为我构建了以下三个函数代码：

  1. 从YouTube URL获取视频ID
  2. 根据视频ID获取视频转录文本
  3. 从转录文本生成提示词

代码如下所示：

import logging
from youtube_transcript_api import YouTubeTranscriptApi

logger = logging.getLogger()
logger.setLevel("INFO")

def get_video_id_from_url(youtube_url):
    logger.info("Inside get_video_id_from_url ..")

    watch_param = 'watch?v='
    video_id = youtube_url.split('/')[-1].strip()
    if video_id == '':
        video_id = youtube_url.split('/')[-2].strip()
    if watch_param in video_id:
        video_id = video_id[len(watch_param):]

    logger.info("video_id")
    logger.info(video_id)
    return video_id

def get_transcript(video_id):
    logger.info("Inside get_transcript ..")

    transcript = YouTubeTranscriptApi.get_transcript(video_id)
    logger.info("transcript")
    logger.info(transcript)
    return transcript

def generate_prompt_from_transcript(transcript):
    logger.info("Inside generate_prompt_from_transcript ..")

    prompt = "Summarize the following video:\n"
    for trans in transcript:
        prompt += " " + trans.get('text', '')
    
    logger.info("prompt")
    logger.info(prompt)
    return prompt

Streamlit应用模块详解

app.py是Streamlit网页前端应用代码，它提供用户界面，让用户可以输入视频URL进行摘要，并与视频内容进行对话。
在这个文件中，大部分代码涉及用户会话管理、UI设计以及如何呈现应用的交互逻辑。其中最核心的函数是handle_input()，它负责检测用户输入（是摘要请求还是后续提问）、返回对应的摘要或聊天回复，并相应地重置用户状态。

import logging
from youtube_transcript_api import YouTubeTranscriptApi

logger = logging.getLogger()
logger.setLevel("INFO")

def get_video_id_from_url(youtube_url):
    logger.info("Inside get_video_id_from_url ..")

    watch_param = 'watch?v='
    video_id = youtube_url.split('/')[-1].strip()
    if video_id == '':
        video_id = youtube_url.split('/')[-2].strip()
    if watch_param in video_id:
        video_id = video_id[len(watch_param):]

    logger.info("video_id")
    logger.info(video_id)
    return video_id

def get_transcript(video_id):
    logger.info("Inside get_transcript ..")

    transcript = YouTubeTranscriptApi.get_transcript(video_id)
    logger.info("transcript")
    logger.info(transcript)
    return transcript

def generate_prompt_from_transcript(transcript):
    logger.info("Inside generate_prompt_from_transcript ..")

    prompt = "Summarize the following video:\n"
    for trans in transcript:
        prompt += " " + trans.get('text', '')
    
    logger.info("prompt")
    logger.info(prompt)
    return prompt

部署

在完成代码开发完成后，我们通过Streamlit非常简单的就部署这个应用并让其他人可以使用。这一平台让构建和部署生成式AI应用变得异常简单。

结论

AI代码助手极大的提升了该项目的开发效率，整个过程花了我几周时间，每周抽出一两个小时来开发。但如果没有AI助手，这个过程肯定会耗费更长的时间。总体来说，完成这个项目的时间大约是5-6小时。

在这篇文章中，我展示了如何结合Amazon Q、Amazon Bedrock和Streamlit构建一个简单的应用，实现YouTube视频摘要和交互式对话。我还演示了如何利用生成式AI加速开发过程，并使用Amazon Q快速生成可用于POC（概念性验证）的代码。

Langchain+FastApi+Vue前后端Ai对话(超详细)
qq_74929891的博客
01-18 1193
首先可以先看下作者的文章。
Ai智能体四：互动式 AI 聊天助手：前端实现
m0_69178550的博客
02-14 3660
本系统利用Vue 3和实现了一个高效、互动性强的 AI 聊天助手界面。通过集成历史消息管理、文件上传、向量存储等功能，提供了一个全面的对话平台，满足了用户在日常工作中的各种需求。
AI聊天前端界面 https://github.com/sdcb/chats
02-10
https://github.com/sdcb/chats
前端AI对话框项目设计与实现
警警的博客
02-13 5938
实现一个前端AI对话框项目需要综合运用前端技术（如HTML、CSS、JavaScript）和AI技术（如自然语言处理、机器学习模型）。以下是一个简化的示例，展示了如何使用SSE在前端和后端之间建立连接，并发送和接收消息。注意，这只是一个基础框架，你需要根据你的具体需求来填充和完善代码。这个指南提供了一个全面的框架，帮助你从头开始构建一个前端AI对话框应用。根据你的具体需求和资源，你可以调整这个框架来适应你的项目。实现一个前端AI对话框项目涉及多个步骤和技术栈的组合。
【Web前端】如何自己写一个AI聊天机器人——小爆AI（html+css+js源码实例）
m0_66957694的博客
07-05 3747
HTML+CSS+JavaScript前端开发人员，照样能够写出懂你的AI聊天机器人！
Spring AI 与前端技术融合：打造网页聊天 AI 的实战指南
weixin_60159567的博客
11-16 2107
在本篇本章中你可以学到如何使用SpringAI调用大模型以及添加记忆上下文,以及Vue的自定义指令和组合式函数,还有SSE消息实时推送,实现打字机效果
AI对话操作框架（仅前端效果）（个人学习记录）
oneday223的博客
01-23 603
【代码】AI对话操作框架（仅前端效果）
Spring AI调用OpenAI Stream简单实现一个上下文对话小助手（前后端代码）
10-30
本文将介绍如何利用Spring框架与OpenAI Stream API相结合，实现一个能够进行上下文对话的小助手，并提供相应的前后端代码实现。 首先，我们需要了解Spring框架的基本概念。Spring是一个开源的Java平台，它最初被...
码多多AI源码码多多ChatAI智能聊天系统PHP源码版,基于前后端分离架构以及Vue3、uni-app、ThinkPHP6.x
11-20
1. **前后端分离架构**：前后端分离是现代Web开发的主流模式，它将用户界面（前端）与服务器端逻辑（后端）分开，提高了开发效率和用户体验。前端负责展示和交互，而后端专注于数据处理和业务逻辑。这种架构使得...
AI人工智能 Python实现人机对话
09-21
【AI人工智能】 AI人工智能是当今科技领域的重要研究方向，涉及到机器学习、自然语言处理、计算机视觉等多个领域。本文主要关注的是使用Python实现人机对话的功能，这在人工智能的应用中占据了重要地位，如Windows...
基于 RNN、Transformer、Bert 和 GPT2 的对话系统_聊天机器人_python_代码_下载
06-18
通过Python编程，我们可以将这些模型应用到实际的对话系统开发中，创建出能理解语境、产生自然对话的ChatBot。在实际项目中，通常会结合多种模型的优势，例如使用BERT进行理解，GPT-2进行生成，以实现更好的效果。在...
微信小程序源码5-智能AI聊天（前端+后端+后台管理页面）
11-21
本套源码集成了一个智能AI聊天系统，旨在为用户提供智能化的交互体验，通过这套完整的前后端代码，学习者可以深入理解微信小程序开发的整个流程。 前端部分主要负责用户界面的设计与实现，它包括了小程序的页面布局...
用 100 行代码揭开 LLM 集成工具 LangChain 的神秘之处！
CSDN资讯
05-06 2662
整理 | 王子彧 责编 | 梦依丹出品 | CSDN（ID：CSDNnews）LangChain 是一个强大的程序框架，它允许用户围绕大型语言模型快速构建应用程序和管道。它直接与 OpenAI 的 GPT-3 和 GPT-3.5 模型以及 Hugging Face 的开源替代品（如 Google 的 flan-t5 模型）集成。除此之外，它还提供了一套工具、组件和接口，可简化创建由大型语言...
从 0 到 1：开发一个现代炫酷的 AI 聊天页面
源滚滚编程
01-12 2968
通过 Vue 3 和 Tailwind CSS，我们快速实现了一个现代、炫酷的 AI 聊天页面。这个页面不仅功能完善，而且界面美观，用户体验良好。如果你有真实的 AI 接口，可以轻松接入，实现更强大的功能。希望这篇文章对你有帮助！如果你有任何问题或建议，欢迎在评论区留言。别忘了。
一款开源高性能AI应用框架
05-04 970
前言LobeChat 是一个基于 Next.js 框架构建的 AI 会话应用，旨在提供一个 AI 生产力平台，使用户能够与 AI 进行自然语言交互。LobeChat应用架构LobeChat 的整体架构由前端、EdgeRuntime API、Agents 市场、插件市场和独立插件组成。这些组件相互协作，以提供完整的 AI 体验。前端架构LobeChat 的前端采用 Next.js 框架，利用其强大的...
SpringBoot+Vue+Uniapp搭建的Java版本的智能Ai对话系统
IT谢彪的博客
06-25 3020
SpringBoot+Vue+Uniapp搭建的Java版本的智能Ai对话系统
若依前后端分离版集成AI（通义千问）
最新发布
qq_55896432的博客
03-14 1770
文章会详细介绍前后端如何进行代码设计，后端调用AI接口后，采用推流的方式返回前端，并且将对话内容保存在数据库中。并不会和现在大多数文章一样，前端介绍草草结束，而是设计了完整的对话窗口，并且完成了流数据拼接和格式转换。也就是说，哪怕不用通义千问这个AI，也可以将前端页面集成到自己的系统里面。但是需要注意点是，我只集成了单轮对话，并且通过文生文的方式进调用。对于多轮对话和上传文件等功能没有实现，但是在对话窗口中预留了文件上传功能，能够正常保存，只是没有实现此功能罢了。
从零开始的AI聊天：如何制作一个AI聊天网页(附代码)
naozibuok的博客
02-17 2268
使用 Pydantic 定义一个数据模型 QuestionRequest，用来描述客户端请求的 JSON 数据格式。模型中只有一个字段 question，类型为字符串。当客户端发送请求时，FastAPI 会自动将请求体解析为这个数据模型，并验证其中的数据是否满足定义的格式和类型要求。如果数据格式不符合，会自动返回错误响应。model="ollama/model_name", # 指定要使用的 AI 模型名称（需替换为实际模型名）messages=[
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值