参加完全球开发者大会之后,我一个小前端尝试使用了一些AI模型

简介: 参加完全球开发者大会之后,我一个小前端尝试使用了一些AI模型

前言

3月23日 的时候,我去参加了 GDC(全球开发者先锋大会) 。在现场,听了几个大佬的前沿分享,感觉受益良多。同时也看到了一些很有意思的东西:

比如说这个机械狗

image.png

还有马斯克的“火星车”

image.png

以及最近火爆出圈的支持 200W token 上下文的大语言模型 kimi

image.png

然后在主会场听了一个关于 魔搭社区 的一个分享

image.png

image.png

image.png

听完之后,我理解魔搭上有很多开源的 AI 模型以及数据集,以及它依托了阿里云平台的算力,可以让开发者快速的在魔搭平台去体验这些模型和微调这些模型。

后面我去另外一些分会场听讲座的时候,发现很多创业公司都是说他们依托于魔搭做了什么什么事情,我就想这魔搭是不是投了很多广告还是说这个活动是他赞助的哈哈哈。但这里只是猜测罢了,大家听听就算了。

听完回来之后,我就想自己试一下魔搭这个平台,看看上面有什么好玩的东西。

模型Demo体验

image.png

进入魔搭社区之后,发现上面已经有 3000 多个模型,我们就挑一些自己感兴趣的来玩一下。

我们先来尝试一下 百川2-13B-对话模型 这个大语言模型,它是百川智能推出的新一代开源大语言模型,采用 2.6 万亿 Tokens 的高质量语料训练。

复制一下这里的示例代码。然后进入到 Notebook 中,就可以快速体验这个模型。

image.png

进入到 Notebook 之后,新建一个 baichuan.py 文件,填入如下代码。

from http import HTTPStatus
from dashscope import Generation
import dashscope


# 可根据下方'开通DashScope并创建API-KEY'文档获取API-KEY进行填充

dashscope.api_key = 'API-KEY'

def call_with_messages():
    messages = [
        {'role': 'user', 'content': '你是什么'}]
    gen = Generation()
    response = gen.call(
        'baichuan2-13b-chat-v1',
        messages=messages,
        result_format='message',  # set the result is message format.
    )
    print(response)

if __name__ == '__main__':
    call_with_messages()

然后先安装一下相关依赖, pip install dashscope ,然后控制台运行 python3 baichuan.py 可以看到,模型已经成功跑起来。

image.png

模型API体验

在魔搭平台上,有一些模型已经提供了 API 接口,我们可以直接拿到调用(套娃)。这里我选了三个,分别是:

  • 通义-文本生成图像大模型-中英文-通用领域
  • GPT-3诗词生成模型-中文-large
  • GPT-3夸夸机器人-中文-large

以诗词生成模型为例,打开之后就可以看到自己的 token 以及调用的示例代码:

image.png

我们来做一个简单的前端页面,然后来调用一下诗词生成接口来试试效果:

import { Button, Form, Input } from "antd";
import React, { useState } from "react";
import { axios } from "../../api/index";
const API_URL =
  "/moda/api-inference/v1/models/iic/nlp_gpt3_poetry-generation_chinese-large";

const headers = {
  Authorization: "Bearer your-token",
};
const Poem = () => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const [result, setResult] = useState("");
  const handleClick = async () => {
    const { text } = await form.validateFields();
    setLoading(true);
    try {
      const res = await axios.post(
        API_URL,
        {
          input: text,
        },
        {
          headers,
        }
      );
      if (res.data.Data.text) {
        setResult(res.data.Data.text);
      }
    } finally {
      setLoading(false);
    }
  };
  return (
    <div>
      <Form form={form}>
        <Form.Item
          name="text"
          label="提示词"
          rules={[{ required: true, message: "提示词不可为空" }]}
        >
          <Input.TextArea maxLength={75} showCount />
        </Form.Item>
      </Form>
      <Button loading={loading} onClick={handleClick} type="primary">
        生成
      </Button>
      <h4>{result}</h4>
    </div>
  );
};

export default Poem;

这个页面很简单,点击之后拿到输入框的值去调用接口而已,没有特别需要交代的地方。唯一注意的是需要配置一下转发:

proxy: {
  "/moda": {
    target: "https://api-inference.modelscope.cn",
    changeOrigin: true,
    rewrite: (path) => path.replace(/^\/moda/, ""),
  },
}

下面来试试效果:

image.png

还有一个彩虹屁的模型:

image.png

不过我觉得这彩虹屁的效果也不咋地😓

但是当我调用文生图模型时,直接就报错了:

image.png

可能是部署API的机器太多人调用了,在官网成功调用过一次,至于效果如何大家自行评价吧

image.png

一种外部调用算法模型的方式

如果你已经在利用魔搭的机器资源跑起来一个模型,但是魔搭起的机器好像外面是访问不到的。也就是说,比如我起了一个文生图的模型,想给我的前端页面调用,这个时候应该怎么解决呢?下面介绍一种外部调用模型的方式。

这里以OFA图像描述-中文-电商领域-base这个模型为例,

image.png

这个模型用于输入一张图片,然后模型输出这张图片的描述。

具体的实现流程先看一下这张图:

image.png

这里会有三个端:

  1. 前端:上传图片,以及展示图片的解析结果
  2. node :就是后端,接收到图片之后,生成一条任务入库,其中任务表的DDL语句如下:
CREATE TABLE `missions` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`status` int(4) DEFAULT '0',
`src` varchar(255) DEFAULT NULL,
`content` mediumtext,
`update_time` timestamp NULL DEFAULT CURRENT_TIMESTAMP,
`create_time` timestamp NULL DEFAULT CURRENT_TIMESTAMP,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=12 DEFAULT CHARSET=utf8mb4;

其中 status 字段是任务的状态,未执行是 0 ,执行完成是 1content 是任务的执行结果,也就是模型的输出。

  1. 算法:轮训向 node 端获取待执行的任务,然后进行模型推理,推理完成之后,更新任务的状态。

这里我为了方便,通信都是使用轮训来完成,如果想达到更好的效率,可以通过 WebSocket 。下面来看看各端的具体实现

前端

前端实现逻辑十分简单,就是普通的上传图片,然后轮训获取任务的状态:

// 上传图片
const handleFileChange = (e) => {
    const file = e.target.files[0];
    const formData = new FormData();
    formData.append("file", file);
    setLoading(true);
    axios.post(`${BASE_URL}/aigc/upload`, formData).then((res) => {
      setUrl(res.data.data);
      setId(res.data.id);
    });
  };

// 获取任务执行结果

  useEffect(() => {
    if (!id) {
      clearInterval(interval.current);
      return;
    }
    interval.current = setInterval(() => {
      axios.get(`${BASE_URL}/aigc/getResultById/${id}`).then((res) => {
        if (res.data.content) {
          clearInterval(interval.current);
          setResult(res.data.content);
          setLoading(false);
        }
      });
    }, 1000);
    return () => {
      clearInterval(interval.current);
    };
  }, [id]);

后端

后端这里提供几个接口:

第一个是上传图片接口,或者说是创建任务的接口,使用到的是 multer 这个库来接收上传的图片,把图片写入到静态资源目录中,并往数据库中添一条记录。

js

复制代码

const upload = multer();
router.post("/upload", upload.single("file"), async (req, res) => {
  const file = req.file;
  const timestamp = Date.now();
  const ext = path.extname(file.originalname);
  const newName = `${timestamp}${ext}`;
  const filePath = path.join(UPLOAD_PATH, newName);

  fs.writeFile(filePath, file.buffer, (err) => {
    if (err) {
      console.error("写入文件时出错:", err);
      res.json({ data: false });
      return;
    }
    const url = `http://your-ip:3000/upload/${newName}`;
    connection.query(
      "INSERT INTO missions (src) VALUES (?)",
      [url],
      (err, results) => {
        if (err) {
          console.error("上传失败:", err);
          res.status(500).send("插入失败");
          return;
        }
        res.json({ data: url, id: results.insertId }); // 返回查询结果
      }
    );
  });
});

然后就是获取一条待执行的任务的接口,从数据库中查询一条 status0 的记录出来,这个接口供算法端调用:

router.get("/getMission", async (req, res) => {
  const sql = "SELECT * FROM missions WHERE status = 0 LIMIT 1";
  connection.query(sql, (err, result) => {
    if (err) {
      console.error("查询数据时出错:", err);
      res.json(false);
      return;
    }
    if (result.length === 0) {
      console.log("没有找到status为0的任务");
      res.json(false);
      return;
    }
    console.log("找到status为0的任务:", result[0]);
    res.json(result[0]);
  });
});

再提供一个更新接口,算法模型推理完之后,把结果更新到数据库中:

router.post("/updateMission", (req, res) => {
  const { content, id } = req.body;
  const sql = "UPDATE missions SET status = ?, content = ? WHERE id = ?";
  connection.query(sql, [1, content, id], (err, result) => {
    if (err) {
      console.error("更新数据时出错:", err);
      res.status(500).send("更新数据时出错");
      return;
    }
    if (result.affectedRows === 0) {
      console.log(`没有找到ID为${id}的任务`);
      res.status(404).send(`没有找到ID为${id}的任务`);
      return;
    }
    console.log(`成功更新ID为${id}的任务`);
    res.send(`成功更新ID为${id}的任务`);
  });
});

最后提供一个查询任务的接口,供前端调用,获取任务的执行结果:

router.get("/getResultById/:id", async (req, res) => {
  const id = req.params.id;
  const sql = "SELECT * FROM missions WHERE id = ?";
  connection.query(sql, [id], (err, result) => {
    if (err || result.length === 0) {
      console.log("没找到");
      res.json(false);
      return;
    }
    res.json(result[0]);
  });
});

算法

算法这里就主要做三件事情:

  1. 获取任务
  2. 模型推理
  3. 更新任务结果

具体代码实现如下:

import time
from modelscope.pipelines import pipeline
from modelscope.utils.constant import Tasks
from modelscope.outputs import OutputKeys
import requests

# 模型推理
def process_image_and_update_result(image_url,image_id):
    img_captioning = pipeline(Tasks.image_captioning, model='damo/ofa_image-caption_muge_base_zh', model_revision='v1.0.1')
    result = img_captioning(image_url)
    caption = result[OutputKeys.CAPTION]
    update_result_function(caption,image_id)


# 更新任务结果
def update_result_function(caption, image_id):
    try:
        url = "http://your-ip:3000/aigc/updateMission"
        data = {
            "content": caption,
            "id": image_id
        }
        response = requests.post(url, json=data)
        if response.status_code == 200:
            print("结果更新成功")
        else:
            print(f"结果更新失败,状态码:{response.status_code}")
    except Exception as e:
        print(f"调用接口出错:{e}")


# 获取任务
def get_image_url_function():
    try:
        response = requests.get("http://your-ip:3000/aigc/getMission")
        if response.status_code == 200:
            data = response.json()
            print(data)
            if data == False:
                return None, None
            image_url = data.get("src")
            image_id = data.get("id")
            return image_url,image_id
        else:
            return None
    except Exception as e:
        print(f"接口请求出错:{e}")
        return None
    return None

# 轮训获取
while True:
    image_url,image_id = get_image_url_function()
    if image_url:
        process_image_and_update_result(image_url,image_id)
    else:
        print("未获取到图片路径,1秒后重试...")
    time.sleep(1)

最后,来一起看一下整条链路运行的结果,整个调用的过程我就不录制 GIF 了,大概整个过程耗时 20S 左右。

image.png

最后

以上就是本文的全部内容,在如今这个 AIGC 爆火的时代,尝试一下各种模型还是挺有意思的。如果你觉得有意思的话,点点关注点点赞吧~

相关文章
|
5天前
|
前端开发 JavaScript API
(前端3D模型开发)网页三维CAD中加载和保存STEP模型
本文介绍了如何使用`mxcad3d`库在网页上实现STEP格式三维模型的导入与导出。首先,通过官方教程搭建基本项目环境,了解核心对象如MxCAD3DObject、Mx3dDbDocument等的使用方法。接着,编写了加载和保存STEP模型的具体代码,包括HTML界面设计和TypeScript逻辑实现。最后,通过运行项目验证功能,展示了从模型加载到保存的全过程。此外,`mxcad3d`还支持多种其他格式的三维模型文件操作。
|
5天前
|
人工智能 安全 测试技术
EXAONE 3.5:LG 推出的开源 AI 模型,采用 RAG 和多步推理能力降低模型的幻觉问题
EXAONE 3.5 是 LG AI 研究院推出的开源 AI 模型,擅长长文本处理,能够有效降低模型幻觉问题。该模型提供 24 亿、78 亿和 320 亿参数的三个版本,支持多步推理和检索增强生成技术,适用于多种应用场景。
41 9
EXAONE 3.5:LG 推出的开源 AI 模型,采用 RAG 和多步推理能力降低模型的幻觉问题
|
7天前
|
机器学习/深度学习 人工智能
SNOOPI:创新 AI 文本到图像生成框架,提升单步扩散模型的效率和性能
SNOOPI是一个创新的AI文本到图像生成框架,通过增强单步扩散模型的指导,显著提升模型性能和控制力。该框架包括PG-SB和NASA两种技术,分别用于增强训练稳定性和整合负面提示。SNOOPI在多个评估指标上超越基线模型,尤其在HPSv2得分达到31.08,成为单步扩散模型的新标杆。
47 10
SNOOPI:创新 AI 文本到图像生成框架,提升单步扩散模型的效率和性能
|
7天前
|
人工智能 搜索推荐 开发者
Aurora:xAI 为 Grok AI 推出新的图像生成模型,xAI Premium 用户可无限制访问
Aurora是xAI为Grok AI助手推出的新图像生成模型,专注于生成高逼真度的图像,特别是在人物和风景图像方面。该模型支持文本到图像的生成,并能处理包括公共人物和版权形象在内的多种图像生成请求。Aurora的可用性因用户等级而异,免费用户每天能生成三张图像,而Premium用户则可享受无限制访问。
44 11
Aurora:xAI 为 Grok AI 推出新的图像生成模型,xAI Premium 用户可无限制访问
|
11天前
|
人工智能 编解码 网络架构
GenCast:谷歌DeepMind推出的AI气象预测模型
GenCast是由谷歌DeepMind推出的革命性AI气象预测模型,基于扩散模型技术,提供长达15天的全球天气预报。该模型在97.2%的预测任务中超越了全球顶尖的中期天气预报系统ENS,尤其在极端天气事件的预测上表现突出。GenCast能在8分钟内生成预报,显著提高预测效率,并且已经开源,包括代码和模型权重,支持更广泛的天气预报社区和研究。
88 14
GenCast:谷歌DeepMind推出的AI气象预测模型
|
9天前
|
存储 人工智能 PyTorch
【AI系统】模型转换流程
本文详细介绍了AI模型在不同框架间的转换方法,包括直接转换和规范式转换两种方式。直接转换涉及从源框架直接生成目标框架的模型文件,而规范式转换则通过一个中间标准格式(如ONNX)作为桥梁,实现模型的跨框架迁移。文中还提供了具体的转换流程和技术细节,以及模型转换工具的概览,帮助用户解决训练环境与部署环境不匹配的问题。
22 5
【AI系统】模型转换流程
|
12天前
|
机器学习/深度学习 存储 人工智能
EfficientTAM:Meta AI推出的视频对象分割和跟踪模型
EfficientTAM是Meta AI推出的轻量级视频对象分割和跟踪模型,旨在解决SAM 2模型在移动设备上部署时的高计算复杂度问题。该模型采用非层次化Vision Transformer(ViT)作为图像编码器,并引入高效记忆模块,以降低计算复杂度,同时保持高质量的分割结果。EfficientTAM在多个视频分割基准测试中表现出与SAM 2相当的性能,具有更快的处理速度和更少的参数,特别适用于移动设备上的视频对象分割应用。
31 9
EfficientTAM:Meta AI推出的视频对象分割和跟踪模型
|
9天前
|
机器学习/深度学习 存储 人工智能
【AI系统】模型转换基本介绍
模型转换技术旨在解决深度学习模型在不同框架间的兼容性问题,通过格式转换和图优化,将训练框架生成的模型适配到推理框架中,实现高效部署。这一过程涉及模型格式转换、计算图优化、算子统一及输入输出支持等多个环节,确保模型能在特定硬件上快速、准确地运行。推理引擎作为核心组件,通过优化阶段和运行阶段,实现模型的加载、优化和高效执行。面对不同框架的模型文件格式和网络结构,推理引擎需具备高度的灵活性和兼容性,以支持多样化的应用场景。
25 4
【AI系统】模型转换基本介绍
|
9天前
|
机器学习/深度学习 人工智能 算法
【AI系统】模型压缩基本介绍
模型压缩旨在通过减少存储空间、降低计算量和提高计算效率,降低模型部署成本,同时保持模型性能。主要技术包括模型量化、参数剪枝、知识蒸馏和低秩分解,广泛应用于移动设备、物联网、在线服务系统、大模型及自动驾驶等领域。
36 4
【AI系统】模型压缩基本介绍
|
9天前
|
机器学习/深度学习 存储 人工智能
【AI系统】模型剪枝
本文概述了模型剪枝的概念、方法及流程,旨在通过移除神经网络中冗余或不重要的参数,实现模型规模的减小和效率的提升。剪枝不仅有助于降低模型的存储和计算需求,还能增强模型的泛化能力。文章详细介绍了剪枝的定义、分类、不同阶段的剪枝流程,以及多种剪枝算法,如基于参数重要性的方法、结构化剪枝、动态剪枝和基于优化算法的全局剪枝策略。通过这些方法,可以在保持模型性能的同时,显著提高模型的计算速度和部署灵活性。
19 2
【AI系统】模型剪枝