参加完全球开发者大会之后,我一个小前端尝试使用了一些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 爆火的时代,尝试一下各种模型还是挺有意思的。如果你觉得有意思的话,点点关注点点赞吧~

相关文章
|
7天前
|
机器学习/深度学习 人工智能 自然语言处理
当大火的文图生成模型遇见知识图谱,AI画像趋近于真实世界
本文介绍了阿里云机器学习PAI团队开发的名为ARTIST的中文文图生成模型,该模型融合了知识图谱信息,能够生成更加符合常识的图像。ARTIST基于Transformer架构,将文图生成任务分为图像矢量量化和文本引导的图像序列生成两个阶段。在第一阶段,模型使用VQGAN对图像进行矢量量化;在第二阶段,通过GPT模型并结合知识图谱中的实体知识来生成图像序列。在MUGE中文文图生成评测基准上,ARTIST表现出色,其生成效果优于其他模型。此外,EasyNLP框架提供了简单易用的接口,用户可以基于公开的Checkpoint进行少量领域相关的微调,实现各种艺术创作。
|
1天前
|
人工智能 NoSQL atlas
Fireworks AI和MongoDB:依托您的数据,借助优质模型,助力您开发高速AI应用
我们欣然宣布MongoDB与 Fireworks AI 正携手合作让客户能够利用生成式人工智能 (AI)更快速、更高效、更安全地开展创新活动
|
4天前
|
人工智能 vr&ar
[译][AI Research] AI 模型中的“it”是数据集
模型效果的好坏,最重要的是数据集,而不是架构,超参数,优化器。
|
6天前
|
机器学习/深度学习 人工智能 自然语言处理
大模型和传统ai的区别
在人工智能(AI)领域,大模型一直是一个热议的话题。从之前的谷歌 DeepMind、百度 Big. AI等,再到今天的百度GPT-3,人工智能技术经历了从“有”到“大”的转变。那么,大模型与传统 ai的区别在哪里?这对未来人工智能发展会产生什么影响?
|
6天前
|
人工智能 监控 安全
在园区引入AI大模型
5月更文挑战第5天
13 0
|
7天前
|
存储 机器学习/深度学习 人工智能
RAG:AI大模型联合向量数据库和 Llama-index,助力检索增强生成技术
RAG:AI大模型联合向量数据库和 Llama-index,助力检索增强生成技术
RAG:AI大模型联合向量数据库和 Llama-index,助力检索增强生成技术
|
8天前
|
机器学习/深度学习 人工智能 自然语言处理
对大模型和AI的认识与思考
2023年,笔者也参与了各种学习和实践,从大语言模型、多模态算法,文生图(Stable Diffusion)技术,到prompt工程实践和搭建文生图(Stable Diffusion)webui实操环境。在此对谈谈对大模型和AI的认识与思考,是为总结。5月更文挑战第3天
30 1
|
13天前
|
机器学习/深度学习 人工智能
超越Sora极限,120秒超长AI视频模型诞生!
【5月更文挑战第1天】 StreamingT2V技术突破AI视频生成界限,实现120秒超长连贯视频,超越Sora等传统模型。采用自回归方法,结合短期记忆的条件注意模块和长期记忆的外观保持模块,保证内容连贯性和动态性。在实际应用中,展示出优秀的动态性、连贯性和图像质量,但仍有优化空间,如处理复杂场景变化和连续性问题。[链接](https://arxiv.org/abs/2403.14773)
30 3
|
17天前
|
人工智能 数据安全/隐私保护
Sora超逼真视频引恐慌!Nature刊文警示AI视频模型,或在2024年颠覆科学和社会
【4月更文挑战第27天】OpenAI公司的新型AI工具Sora能根据文字提示生成超逼真视频,引发关注。尽管已有类似产品,如Runway的Gen-2和谷歌的Lumiere,Sora以其高质量生成效果领先。该技术的进步可能导致2024年全球政治格局的颠覆,同时带来虚假信息的挑战。OpenAI已组建“红队”评估风险,但虚假视频识别仍是难题。尽管有水印解决方案,其有效性尚不确定。Sora在教育、医疗和科研等领域有潜力,但也对创意产业构成威胁。
27 2
|
17天前
|
人工智能 数据库 芯片
【报告介绍】中国AI大模型产业:发展现状与未来展望
【4月更文挑战第27天】中国AI大模型产业快速发展,受益于政策支持、技术创新及市场需求,已在电商等领域广泛应用,展现巨大潜力。但面临算力瓶颈、技术局限和数据不足等挑战。未来,AI大模型将向通用化与专用化发展,开源趋势将促进小型开发者参与,高性能芯片升级也将助力产业进步。[报告下载链接](http://download.people.com.cn/jiankang/nineteen17114578641.pdf)
35 2