开源项目教程:基于Gemini的Live API Web Console

开源项目教程:基于Gemini的Live API Web Console

multimodal-live-api-web-console A react-based starter app for using the Multimodal Live API over websockets with Gemini multimodal-live-api-web-console 项目地址: https://gitcode.com/gh_mirrors/mu/multimodal-live-api-web-console

1. 项目介绍

本项目是基于React的开源项目,旨在提供一个使用Gemini Live API的Web Console。Gemini Live API是Google开发的一种多模态API,可以通过WebSocket进行通信,支持音频播放、用户媒体录制以及统一日志视图等功能,以辅助开发者构建自己的应用程序。

2. 项目快速启动

首先,确保您的开发环境中已经安装了Node.js。

  1. 克隆项目到本地:

    git clone https://github.com/google-gemini/multimodal-live-api-web-console.git
    cd multimodal-live-api-web-console
    
  2. 创建一个免费的Gemini API密钥,并将其添加到项目根目录下的.env文件中。

  3. 安装项目依赖并启动开发服务器:

    npm install
    npm start
    

    运行后,在浏览器中打开http://localhost:3000查看应用。

  4. 项目构建: 当开发完成后,构建项目以用于生产环境:

    npm run build
    

3. 应用案例和最佳实践

以下是一个使用Live API调用并渲染图表的简单示例:

import { useEffect, useRef, useState } from 'react';
import vegaEmbed from 'vega-embed';
import { useLiveAPIContext } from '../../contexts/LiveAPIContext';

const declaration = {
  name: 'render_altair',
  description: '显示一个Altair图表,以JSON格式传递。',
  parameters: {
    type: 'object',
    properties: {
      json_graph: {
        type: 'string',
        description: '图表的JSON字符串表示。必须是字符串,而不是JSON对象'
      }
    },
    required: ['json_graph']
  }
};

export function Altair() {
  const [jsonString, setJSONString] = useState('');
  const { client, setConfig } = useLiveAPIContext();

  useEffect(() => {
    setConfig({
      model: 'models/gemini-2.0-flash-exp',
      systemInstruction: {
        parts: [
          {
            text: '你是我的助手。每次我要求你绘制图表时,调用我提供的"render_altair"函数。不要询问更多信息,只需根据你的最佳判断。'
          }
        ]
      },
      tools: [
        {
          googleSearch: {}
        },
        {
          functionDeclarations: [declaration]
        }
      ]
    });
  }, [setConfig]);

  useEffect(() => {
    const onToolCall = (toolCall) => {
      console.log('收到工具调用', toolCall);
      const fc = toolCall.functionCalls.find((fc) => fc.name === declaration.name);
      if (fc) {
        const str = fc.args.json_graph;
        setJSONString(str);
      }
    };
    client.on('toolcall', onToolCall);
    return () => {
      client.off('toolcall', onToolCall);
    };
  }, [client]);

  const embedRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (embedRef.current && jsonString) {
      vegaEmbed(embedRef.current, JSON.parse(jsonString));
    }
  }, [embedRef, jsonString]);

  return <div className="vega-embed" ref={embedRef} />;
}

4. 典型生态项目

目前,本项目生态中的一些典型案例包括:

  • GenExplainer:使用Live API进行解释生成的示例。
  • GenWeather:使用Live API生成天气信息的示例。
  • GenList:使用Live API生成列表的示例。

开发者可以参考这些示例,结合自己的需求,构建更加复杂的应用程序。

multimodal-live-api-web-console A react-based starter app for using the Multimodal Live API over websockets with Gemini multimodal-live-api-web-console 项目地址: https://gitcode.com/gh_mirrors/mu/multimodal-live-api-web-console

创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

凤瑶熠Paulette

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值