[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"similar-google-gemini--live-api-web-console":3,"tool-google-gemini--live-api-web-console":64},[4,23,32,40,48,56],{"id":5,"name":6,"github_repo":7,"description_zh":8,"stars":9,"difficulty_score":10,"last_commit_at":11,"category_tags":12,"status":22},2268,"ML-For-Beginners","microsoft\u002FML-For-Beginners","ML-For-Beginners 是由微软推出的一套系统化机器学习入门课程，旨在帮助零基础用户轻松掌握经典机器学习知识。这套课程将学习路径规划为 12 周，包含 26 节精炼课程和 52 道配套测验，内容涵盖从基础概念到实际应用的完整流程，有效解决了初学者面对庞大知识体系时无从下手、缺乏结构化指导的痛点。\n\n无论是希望转型的开发者、需要补充算法背景的研究人员，还是对人工智能充满好奇的普通爱好者，都能从中受益。课程不仅提供了清晰的理论讲解，还强调动手实践，让用户在循序渐进中建立扎实的技能基础。其独特的亮点在于强大的多语言支持，通过自动化机制提供了包括简体中文在内的 50 多种语言版本，极大地降低了全球不同背景用户的学习门槛。此外，项目采用开源协作模式，社区活跃且内容持续更新，确保学习者能获取前沿且准确的技术资讯。如果你正寻找一条清晰、友好且专业的机器学习入门之路，ML-For-Beginners 将是理想的起点。",84991,2,"2026-04-05T10:45:23",[13,14,15,16,17,18,19,20,21],"图像","数据工具","视频","插件","Agent","其他","语言模型","开发框架","音频","ready",{"id":24,"name":25,"github_repo":26,"description_zh":27,"stars":28,"difficulty_score":29,"last_commit_at":30,"category_tags":31,"status":22},2181,"OpenHands","OpenHands\u002FOpenHands","OpenHands 是一个专注于 AI 驱动开发的开源平台，旨在让智能体（Agent）像人类开发者一样理解、编写和调试代码。它解决了传统编程中重复性劳动多、环境配置复杂以及人机协作效率低等痛点，通过自动化流程显著提升开发速度。\n\n无论是希望提升编码效率的软件工程师、探索智能体技术的研究人员，还是需要快速原型验证的技术团队，都能从中受益。OpenHands 提供了灵活多样的使用方式：既可以通过命令行（CLI）或本地图形界面在个人电脑上轻松上手，体验类似 Devin 的流畅交互；也能利用其强大的 Python SDK 自定义智能体逻辑，甚至在云端大规模部署上千个智能体并行工作。\n\n其核心技术亮点在于模块化的软件智能体 SDK，这不仅构成了平台的引擎，还支持高度可组合的开发模式。此外，OpenHands 在 SWE-bench 基准测试中取得了 77.6% 的优异成绩，证明了其解决真实世界软件工程问题的能力。平台还具备完善的企业级功能，支持与 Slack、Jira 等工具集成，并提供细粒度的权限管理，适合从个人开发者到大型企业的各类用户场景。",70612,3,"2026-04-05T11:12:22",[19,17,20,16],{"id":33,"name":34,"github_repo":35,"description_zh":36,"stars":37,"difficulty_score":10,"last_commit_at":38,"category_tags":39,"status":22},3074,"gpt4free","xtekky\u002Fgpt4free","gpt4free 是一个由社区驱动的开源项目，旨在聚合多种可访问的大型语言模型（LLM）和媒体生成接口，让用户能更灵活、便捷地使用前沿 AI 能力。它解决了直接调用各类模型时面临的接口分散、门槛高或成本昂贵等痛点，通过统一的标准将不同提供商的资源整合在一起。\n\n无论是希望快速集成 AI 功能的开发者、需要多模型对比测试的研究人员，还是想免费体验最新技术的普通用户，都能从中受益。gpt4free 提供了丰富的使用方式：既包含易于上手的 Python 和 JavaScript 客户端库，也支持部署本地图形界面（GUI），更提供了兼容 OpenAI 标准的 REST API，方便无缝替换现有应用后端。\n\n其技术亮点在于强大的多提供商支持架构，能够动态调度包括 Opus、Gemini、DeepSeek 等多种主流模型资源，并支持 Docker 一键部署及本地推理。项目秉持社区优先原则，在降低使用门槛的同时，也为贡献者提供了扩展新接口的便利框架，是探索和利用多样化 AI 资源的实用工具。",65970,"2026-04-04T01:02:03",[16,19,17],{"id":41,"name":42,"github_repo":43,"description_zh":44,"stars":45,"difficulty_score":10,"last_commit_at":46,"category_tags":47,"status":22},51,"gstack","garrytan\u002Fgstack","gstack 是 Y Combinator CEO Garry Tan 亲自开源的一套 AI 工程化配置，旨在将 Claude Code 升级为你的虚拟工程团队。面对单人开发难以兼顾产品战略、架构设计、代码审查及质量测试的挑战，gstack 提供了一套标准化解决方案，帮助开发者实现堪比二十人团队的高效产出。\n\n这套配置特别适合希望提升交付效率的创始人、技术负责人，以及初次尝试 Claude Code 的开发者。gstack 的核心亮点在于内置了 15 个具有明确职责的 AI 角色工具，涵盖 CEO、设计师、工程经理、QA 等职能。用户只需通过简单的斜杠命令（如 `\u002Freview` 进行代码审查、`\u002Fqa` 执行测试、`\u002Fplan-ceo-review` 规划功能），即可自动化处理从需求分析到部署上线的全链路任务。\n\n所有操作基于 Markdown 和斜杠命令，无需复杂配置，完全免费且遵循 MIT 协议。gstack 不仅是一套工具集，更是一种现代化的软件工厂实践，让单人开发者也能拥有严谨的工程流程。",64261,"2026-04-05T11:08:43",[17,16],{"id":49,"name":50,"github_repo":51,"description_zh":52,"stars":53,"difficulty_score":10,"last_commit_at":54,"category_tags":55,"status":22},193,"meilisearch","meilisearch\u002Fmeilisearch","Meilisearch 是一个开源的极速搜索服务，专为现代应用和网站打造，开箱即用。它能帮助开发者快速集成高质量的搜索功能，无需复杂的配置或额外的数据预处理。传统搜索方案往往需要大量调优才能实现准确结果，而 Meilisearch 内置了拼写容错、同义词识别、即时响应等实用特性，并支持 AI 驱动的混合搜索（结合关键词与语义理解），显著提升用户查找信息的体验。\n\nMeilisearch 特别适合 Web 开发者、产品团队或初创公司使用，尤其适用于需要快速上线搜索功能的场景，如电商网站、内容平台或 SaaS 应用。它提供简洁的 RESTful API 和多种语言 SDK，部署简单，资源占用低，本地开发或生产环境均可轻松运行。对于希望在不依赖大型云服务的前提下，为用户提供流畅、智能搜索体验的团队来说，Meilisearch 是一个高效且友好的选择。",56964,"2026-04-05T08:19:14",[13,17,14,20,16,18],{"id":57,"name":58,"github_repo":59,"description_zh":60,"stars":61,"difficulty_score":10,"last_commit_at":62,"category_tags":63,"status":22},4022,"awesome-claude-skills","ComposioHQ\u002Fawesome-claude-skills","awesome-claude-skills 是一个精心整理的开源资源库，旨在帮助用户挖掘和扩展 Claude AI 的潜力。它不仅仅是一份列表，更提供了实用的“技能（Skills）”模块，让 Claude 从单纯的文本生成助手，进化为能执行复杂工作流的智能代理。\n\n许多用户在使用 AI 时，常受限于其无法直接操作外部软件或处理特定格式文件的痛点。awesome-claude-skills 通过预设的工作流解决了这一问题：它不仅能教会 Claude 专业地处理 Word、PDF 等文档，进行代码开发与数据分析，还能借助 Composio 插件连接 Slack、邮箱及数百种常用应用，实现发送邮件、创建任务等自动化操作。这使得重复性任务变得标准化且可复用，极大提升了工作效率。\n\n无论是希望优化日常办公流程的普通用户、需要处理复杂文档的研究人员，还是寻求将 AI 深度集成到开发管线中的开发者，都能从中找到适合的解决方案。其独特的技术亮点在于“技能”的可定制性与强大的应用连接能力，让用户无需编写复杂代码，即可通过简单的配置让 Claude 具备跨平台执行真实任务的能力。如果你希望让 Claude",51312,"2026-04-05T19:04:23",[17,16],{"id":65,"github_repo":66,"name":67,"description_en":68,"description_zh":69,"ai_summary_zh":70,"readme_en":71,"readme_zh":72,"quickstart_zh":73,"use_case_zh":74,"hero_image_url":75,"owner_login":76,"owner_name":76,"owner_avatar_url":77,"owner_bio":78,"owner_company":79,"owner_location":79,"owner_email":79,"owner_twitter":80,"owner_website":81,"owner_url":82,"languages":83,"stars":100,"forks":101,"last_commit_at":102,"license":103,"difficulty_score":10,"env_os":104,"env_gpu":104,"env_ram":104,"env_deps":105,"category_tags":113,"github_topics":114,"view_count":10,"oss_zip_url":79,"oss_zip_packed_at":79,"status":22,"created_at":117,"updated_at":118,"faqs":119,"releases":120},2988,"google-gemini\u002Flive-api-web-console","live-api-web-console","A react-based starter app for using the Live API over websockets with Gemini","live-api-web-console 是一个基于 React 构建的开源启动应用，旨在帮助开发者快速接入并体验谷歌 Gemini 的 Live API。它通过 WebSocket 技术实现了前端与 AI 模型之间的实时双向通信，让多模态交互变得简单高效。\n\n在实际开发中，构建支持实时音频流、视频输入及低延迟响应的应用往往面临复杂的底层连接挑战。live-api-web-console 有效解决了这一痛点，它内置了成熟的音频播放与录制模块，支持麦克风、摄像头及屏幕捕获等多种媒体输入，并提供统一的日志视图辅助调试。开发者只需配置 API 密钥，即可立即运行并在此基础上扩展功能，无需从零搭建通信架构。\n\n这款工具主要面向前端工程师、AI 应用开发者及技术研究人员。如果你希望探索实时语音对话、动态数据可视化或结合谷歌搜索 grounding 能力的创新应用，live-api-web-console 提供了极佳的起点。其核心技术亮点在于封装了事件驱动的 WebSocket 客户端，简化了音视频数据的进出处理流程，并展示了如何灵活调用函数声明（Function Calling）来实现如自动生成","live-api-web-console 是一个基于 React 构建的开源启动应用，旨在帮助开发者快速接入并体验谷歌 Gemini 的 Live API。它通过 WebSocket 技术实现了前端与 AI 模型之间的实时双向通信，让多模态交互变得简单高效。\n\n在实际开发中，构建支持实时音频流、视频输入及低延迟响应的应用往往面临复杂的底层连接挑战。live-api-web-console 有效解决了这一痛点，它内置了成熟的音频播放与录制模块，支持麦克风、摄像头及屏幕捕获等多种媒体输入，并提供统一的日志视图辅助调试。开发者只需配置 API 密钥，即可立即运行并在此基础上扩展功能，无需从零搭建通信架构。\n\n这款工具主要面向前端工程师、AI 应用开发者及技术研究人员。如果你希望探索实时语音对话、动态数据可视化或结合谷歌搜索 grounding 能力的创新应用，live-api-web-console 提供了极佳的起点。其核心技术亮点在于封装了事件驱动的 WebSocket 客户端，简化了音视频数据的进出处理流程，并展示了如何灵活调用函数声明（Function Calling）来实现如自动生成图表等高级场景。作为官方提供的示例项目，它不仅代码结构清晰，还包含了多个分支演示案例，是学习和原型开发的理想选择。","# Live API - Web Console\n\nThis repository contains a react-based starter app for using the [Live API](\u003C[https:\u002F\u002Fai.google.dev\u002Fgemini-api](https:\u002F\u002Fai.google.dev\u002Fapi\u002Fmultimodal-live)>) over a websocket. It provides modules for streaming audio playback, recording user media such as from a microphone, webcam or screen capture as well as a unified log view to aid in development of your application.\n\n[![Live API Demo](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fgoogle-gemini_live-api-web-console_readme_649b2dfb98cb.png)](https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=J_q7JY1XxFE)\n\nWatch the demo of the Live API [here](https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=J_q7JY1XxFE).\n\n## Usage\n\nTo get started, [create a free Gemini API key](https:\u002F\u002Faistudio.google.com\u002Fapikey) and add it to the `.env` file. Then:\n\n```\n$ npm install && npm start\n```\n\nWe have provided several example applications on other branches of this repository:\n\nNew demos with GenAI SDK:\n\n- [demos\u002Fproactive-audio](https:\u002F\u002Fgithub.com\u002Fgoogle-gemini\u002Fmultimodal-live-api-web-console\u002Ftree\u002Fdemos\u002Fproactive-audio) - demonstrates the Live API's [proactive audio feature](https:\u002F\u002Fai.google.dev\u002Fgemini-api\u002Fdocs\u002Flive-guide#proactive-audio)\n\n\nOriginal demos:\n\n- [demos\u002FGenExplainer](https:\u002F\u002Fgithub.com\u002Fgoogle-gemini\u002Fmultimodal-live-api-web-console\u002Ftree\u002Fdemos\u002Fgenexplainer)\n- [demos\u002FGenWeather](https:\u002F\u002Fgithub.com\u002Fgoogle-gemini\u002Fmultimodal-live-api-web-console\u002Ftree\u002Fdemos\u002Fgenweather)\n- [demos\u002FGenList](https:\u002F\u002Fgithub.com\u002Fgoogle-gemini\u002Fmultimodal-live-api-web-console\u002Ftree\u002Fdemos\u002Fgenlist)\n\n## Example\n\nBelow is an example of an entire application that will use Google Search grounding and then render graphs using [vega-embed](https:\u002F\u002Fgithub.com\u002Fvega\u002Fvega-embed):\n\n```typescript\nimport { type FunctionDeclaration, SchemaType } from \"@google\u002Fgenerative-ai\";\nimport { useEffect, useRef, useState, memo } from \"react\";\nimport vegaEmbed from \"vega-embed\";\nimport { useLiveAPIContext } from \"..\u002F..\u002Fcontexts\u002FLiveAPIContext\";\n\nexport const declaration: FunctionDeclaration = {\n  name: \"render_altair\",\n  description: \"Displays an altair graph in json format.\",\n  parameters: {\n    type: SchemaType.OBJECT,\n    properties: {\n      json_graph: {\n        type: SchemaType.STRING,\n        description:\n          \"JSON STRING representation of the graph to render. Must be a string, not a json object\",\n      },\n    },\n    required: [\"json_graph\"],\n  },\n};\n\nexport function Altair() {\n  const [jsonString, setJSONString] = useState\u003Cstring>(\"\");\n  const { client, setConfig } = useLiveAPIContext();\n\n  useEffect(() => {\n    setConfig({\n      model: \"models\u002Fgemini-2.0-flash-exp\",\n      systemInstruction: {\n        parts: [\n          {\n            text: 'You are my helpful assistant. Any time I ask you for a graph call the \"render_altair\" function I have provided you. Dont ask for additional information just make your best judgement.',\n          },\n        ],\n      },\n      tools: [{ googleSearch: {} }, { functionDeclarations: [declaration] }],\n    });\n  }, [setConfig]);\n\n  useEffect(() => {\n    const onToolCall = (toolCall: ToolCall) => {\n      console.log(`got toolcall`, toolCall);\n      const fc = toolCall.functionCalls.find(\n        (fc) => fc.name === declaration.name\n      );\n      if (fc) {\n        const str = (fc.args as any).json_graph;\n        setJSONString(str);\n      }\n    };\n    client.on(\"toolcall\", onToolCall);\n    return () => {\n      client.off(\"toolcall\", onToolCall);\n    };\n  }, [client]);\n\n  const embedRef = useRef\u003CHTMLDivElement>(null);\n\n  useEffect(() => {\n    if (embedRef.current && jsonString) {\n      vegaEmbed(embedRef.current, JSON.parse(jsonString));\n    }\n  }, [embedRef, jsonString]);\n  return \u003Cdiv className=\"vega-embed\" ref={embedRef} \u002F>;\n}\n```\n\n## development\n\nThis project was bootstrapped with [Create React App](https:\u002F\u002Fgithub.com\u002Ffacebook\u002Fcreate-react-app).\nProject consists of:\n\n- an Event-emitting websocket-client to ease communication between the websocket and the front-end\n- communication layer for processing audio in and out\n- a boilerplate view for starting to build your apps and view logs\n\n## Available Scripts\n\nIn the project directory, you can run:\n\n### `npm start`\n\nRuns the app in the development mode.\\\nOpen [http:\u002F\u002Flocalhost:3000](http:\u002F\u002Flocalhost:3000) to view it in the browser.\n\nThe page will reload if you make edits.\\\nYou will also see any lint errors in the console.\n\n### `npm run build`\n\nBuilds the app for production to the `build` folder.\\\nIt correctly bundles React in production mode and optimizes the build for the best performance.\n\nThe build is minified and the filenames include the hashes.\\\nYour app is ready to be deployed!\n\nSee the section about [deployment](https:\u002F\u002Ffacebook.github.io\u002Fcreate-react-app\u002Fdocs\u002Fdeployment) for more information.\n\n_This is an experiment showcasing the Live API, not an official Google product. We’ll do our best to support and maintain this experiment but your mileage may vary. We encourage open sourcing projects as a way of learning from each other. Please respect our and other creators' rights, including copyright and trademark rights when present, when sharing these works and creating derivative work. If you want more info on Google's policy, you can find that [here](https:\u002F\u002Fdevelopers.google.com\u002Fterms\u002Fsite-policies)._\n","# Live API - Web 控制台\n\n此仓库包含一个基于 React 的入门应用，用于通过 WebSocket 使用 [Live API](\u003C[https:\u002F\u002Fai.google.dev\u002Fgemini-api](https:\u002F\u002Fai.google.dev\u002Fapi\u002Fmultimodal-live)>)。它提供了用于流式音频播放、录制用户媒体（例如来自麦克风、网络摄像头或屏幕捕获）的模块，以及统一的日志视图，以帮助您开发应用程序。\n\n[![Live API 演示](https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fgoogle-gemini_live-api-web-console_readme_649b2dfb98cb.png)](https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=J_q7JY1XxFE)\n\n在此观看 Live API 的演示：[这里](https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=J_q7JY1XxFE)。\n\n## 使用方法\n\n要开始使用，请先[创建一个免费的 Gemini API 密钥](https:\u002F\u002Faistudio.google.com\u002Fapikey)，并将其添加到 `.env` 文件中。然后执行以下命令：\n\n```\n$ npm install && npm start\n```\n\n我们在该仓库的其他分支中提供了一些示例应用：\n\n使用 GenAI SDK 的新演示：\n\n- [demos\u002Fproactive-audio](https:\u002F\u002Fgithub.com\u002Fgoogle-gemini\u002Fmultimodal-live-api-web-console\u002Ftree\u002Fdemos\u002Fproactive-audio) - 展示了 Live API 的[主动音频功能](https:\u002F\u002Fai.google.dev\u002Fgemini-api\u002Fdocs\u002Flive-guide#proactive-audio)\n\n\n原始演示：\n\n- [demos\u002FGenExplainer](https:\u002F\u002Fgithub.com\u002Fgoogle-gemini\u002Fmultimodal-live-api-web-console\u002Ftree\u002Fdemos\u002Fgenexplainer)\n- [demos\u002FGenWeather](https:\u002F\u002Fgithub.com\u002Fgoogle-gemini\u002Fmultimodal-live-api-web-console\u002Ftree\u002Fdemos\u002Fgenweather)\n- [demos\u002FGenList](https:\u002F\u002Fgithub.com\u002Fgoogle-gemini\u002Fmultimodal-live-api-web-console\u002Ftree\u002Fdemos\u002Fgenlist)\n\n## 示例\n\n以下是整个应用的示例，该应用将使用 Google 搜索进行知识增强，然后使用 [vega-embed](https:\u002F\u002Fgithub.com\u002Fvega\u002Fvega-embed) 渲染图表：\n\n```typescript\nimport { type FunctionDeclaration, SchemaType } from \"@google\u002Fgenerative-ai\";\nimport { useEffect, useRef, useState, memo } from \"react\";\nimport vegaEmbed from \"vega-embed\";\nimport { useLiveAPIContext } from \"..\u002F..\u002Fcontexts\u002FLiveAPIContext\";\n\nexport const declaration: FunctionDeclaration = {\n  name: \"render_altair\",\n  description: \"以 JSON 格式显示 Altair 图表。\",\n  parameters: {\n    type: SchemaType.OBJECT,\n    properties: {\n      json_graph: {\n        type: SchemaType.STRING,\n        description:\n          \"要渲染的图表的 JSON 字符串表示。必须是字符串，而不是 JSON 对象。\",\n      },\n    },\n    required: [\"json_graph\"],\n  },\n};\n\nexport function Altair() {\n  const [jsonString, setJSONString] = useState\u003Cstring>(\"\");\n  const { client, setConfig } = useLiveAPIContext();\n\n  useEffect(() => {\n    setConfig({\n      model: \"models\u002Fgemini-2.0-flash-exp\",\n      systemInstruction: {\n        parts: [\n          {\n            text: '你是我有用的助手。每当我请求你绘制图表时，请调用我提供的 \"render_altair\" 函数。无需询问更多信息，只需根据你的判断做出最佳选择。',\n          },\n        ],\n      },\n      tools: [{ googleSearch: {} }, { functionDeclarations: [declaration] }],\n    });\n  }, [setConfig]);\n\n  useEffect(() => {\n    const onToolCall = (toolCall: ToolCall) => {\n      console.log(`收到工具调用`, toolCall);\n      const fc = toolCall.functionCalls.find(\n        (fc) => fc.name === declaration.name\n      );\n      if (fc) {\n        const str = (fc.args as any).json_graph;\n        setJSONString(str);\n      }\n    };\n    client.on(\"toolcall\", onToolCall);\n    return () => {\n      client.off(\"toolcall\", onToolCall);\n    };\n  }, [client]);\n\n  const embedRef = useRef\u003CHTMLDivElement>(null);\n\n  useEffect(() => {\n    if (embedRef.current && jsonString) {\n      vegaEmbed(embedRef.current, JSON.parse(jsonString));\n    }\n  }, [embedRef, jsonString]);\n  return \u003Cdiv className=\"vega-embed\" ref={embedRef} \u002F>;\n}\n```\n\n## 开发\n\n该项目使用 [Create React App](https:\u002F\u002Fgithub.com\u002Ffacebook\u002Fcreate-react-app) 引导启动。\n项目包括：\n\n- 一个事件驱动的 WebSocket 客户端，以简化 WebSocket 和前端之间的通信\n- 用于处理音频输入和输出的通信层\n- 一个用于开始构建您的应用和查看日志的样板视图\n\n## 可用脚本\n\n在项目目录中，您可以运行以下命令：\n\n### `npm start`\n\n以开发模式运行应用。\\\n打开 [http:\u002F\u002Flocalhost:3000](http:\u002F\u002Flocalhost:3000) 即可在浏览器中查看。\n\n如果您进行编辑，页面将会重新加载。\\\n您还会在控制台中看到任何 lint 错误。\n\n### `npm run build`\n\n将应用构建为生产版本，并输出到 `build` 文件夹。\\\n它会在生产模式下正确打包 React，并优化构建以获得最佳性能。\n\n构建文件会被压缩，文件名会包含哈希值。\\\n您的应用已准备好部署！\n\n有关更多信息，请参阅关于[部署](https:\u002F\u002Ffacebook.github.io\u002Fcreate-react-app\u002Fdocs\u002Fdeployment)的部分。\n_这是一个展示 Live API 的实验性项目，并非 Google 的官方产品。我们将尽最大努力支持和维护这个实验，但实际效果可能因人而异。我们鼓励开源项目，以便相互学习。请在分享这些作品及创作衍生作品时，尊重我们及其他创作者的权利，包括版权和商标权。如需了解更多 Google 的相关政策，可访问[此处](https:\u002F\u002Fdevelopers.google.com\u002Fterms\u002Fsite-policies)。_","# Live API Web Console 快速上手指南\n\n本指南帮助中国开发者快速搭建基于 React 的 Google Live API 网页控制台，实现音频流、摄像头\u002F屏幕捕获及实时日志查看功能。\n\n## 环境准备\n\n在开始之前，请确保您的开发环境满足以下要求：\n\n*   **操作系统**：Windows, macOS 或 Linux\n*   **Node.js**：建议安装 LTS 版本 (v18 或更高)\n*   **包管理器**：npm (随 Node.js 安装) 或 yarn\n*   **API 密钥**：需要拥有 Google Gemini API Key\n    *   获取地址：[https:\u002F\u002Faistudio.google.com\u002Fapikey](https:\u002F\u002Faistudio.google.com\u002Fapikey)\n    *   *注意：由于网络环境限制，访问 Google AI Studio 可能需要特定的网络配置。*\n\n## 安装步骤\n\n1.  **克隆项目代码**\n    ```bash\n    git clone https:\u002F\u002Fgithub.com\u002Fgoogle-gemini\u002Fmultimodal-live-api-web-console.git\n    cd multimodal-live-api-web-console\n    ```\n\n2.  **配置 API 密钥**\n    在项目根目录下创建 `.env` 文件，并填入您的 API Key：\n    ```bash\n    echo \"REACT_APP_GEMINI_API_KEY=你的_API_KEY_在此\" > .env\n    ```\n    *(注：如果 `.env` 文件中变量名不同，请参考项目实际示例文件，通常为 `REACT_APP_` 开头)*\n\n3.  **安装依赖并启动**\n    为了获得更快的下载速度，建议临时使用国内镜像源（如淘宝镜像）安装依赖：\n    ```bash\n    # 使用 npm 默认安装\n    npm install\n\n    # 或者使用国内镜像加速安装\n    npm install --registry=https:\u002F\u002Fregistry.npmmirror.com\n\n    # 启动开发服务器\n    npm start\n    ```\n\n4.  **访问应用**\n    浏览器自动打开或手动访问：[http:\u002F\u002Flocalhost:3000](http:\u002F\u002Flocalhost:3000)\n\n## 基本使用\n\n启动成功后，您将看到一个包含音频控制、媒体输入选择和统一日志视图的基础界面。\n\n### 核心功能模块\n*   **音频流**：内置模块支持实时音频播放与录制。\n*   **媒体捕获**：支持调用麦克风、摄像头或进行屏幕共享。\n*   **日志监控**：统一的日志面板用于调试 WebSocket 通信和 API 响应。\n\n### 简单代码示例\n以下是一个集成 Google 搜索 grounding 并使用 `vega-embed` 渲染图表的最小化应用逻辑示例（参考自官方 Demo）：\n\n```typescript\nimport { type FunctionDeclaration, SchemaType } from \"@google\u002Fgenerative-ai\";\nimport { useEffect, useRef, useState, memo } from \"react\";\nimport vegaEmbed from \"vega-embed\";\nimport { useLiveAPIContext } from \"..\u002F..\u002Fcontexts\u002FLiveAPIContext\";\n\nexport const declaration: FunctionDeclaration = {\n  name: \"render_altair\",\n  description: \"Displays an altair graph in json format.\",\n  parameters: {\n    type: SchemaType.OBJECT,\n    properties: {\n      json_graph: {\n        type: SchemaType.STRING,\n        description:\n          \"JSON STRING representation of the graph to render. Must be a string, not a json object\",\n      },\n    },\n    required: [\"json_graph\"],\n  },\n};\n\nexport function Altair() {\n  const [jsonString, setJSONString] = useState\u003Cstring>(\"\");\n  const { client, setConfig } = useLiveAPIContext();\n\n  useEffect(() => {\n    setConfig({\n      model: \"models\u002Fgemini-2.0-flash-exp\",\n      systemInstruction: {\n        parts: [\n          {\n            text: 'You are my helpful assistant. Any time I ask you for a graph call the \"render_altair\" function I have provided you. Dont ask for additional information just make your best judgement.',\n          },\n        ],\n      },\n      tools: [{ googleSearch: {} }, { functionDeclarations: [declaration] }],\n    });\n  }, [setConfig]);\n\n  useEffect(() => {\n    const onToolCall = (toolCall: ToolCall) => {\n      console.log(`got toolcall`, toolCall);\n      const fc = toolCall.functionCalls.find(\n        (fc) => fc.name === declaration.name\n      );\n      if (fc) {\n        const str = (fc.args as any).json_graph;\n        setJSONString(str);\n      }\n    };\n    client.on(\"toolcall\", onToolCall);\n    return () => {\n      client.off(\"toolcall\", onToolCall);\n    };\n  }, [client]);\n\n  const embedRef = useRef\u003CHTMLDivElement>(null);\n\n  useEffect(() => {\n    if (embedRef.current && jsonString) {\n      vegaEmbed(embedRef.current, JSON.parse(jsonString));\n    }\n  }, [embedRef, jsonString]);\n  return \u003Cdiv className=\"vega-embed\" ref={embedRef} \u002F>;\n}\n```\n\n### 进阶演示\n项目其他分支提供了更多高级用例，您可以切换分支查看：\n*   **主动音频 (Proactive Audio)**: `demos\u002Fproactive-audio`\n*   **生成式解释器**: `demos\u002FGenExplainer`\n*   **天气查询**: `demos\u002FGenWeather`\n*   **列表生成**: `demos\u002FGenList`","一位前端开发者正在构建一个支持实时语音交互和屏幕共享的 AI 辅导应用，需要快速验证 Gemini Live API 的多模态流式传输能力。\n\n### 没有 live-api-web-console 时\n- **通信逻辑复杂**：开发者需手动编写 WebSocket 连接代码来处理音频流的二进制分片与组装，极易出现丢包或延迟问题。\n- **调试黑盒**：缺乏统一的日志视图，难以实时追踪“用户说话 -AI 思考 -AI 回复”的全链路状态，排查错误如同盲人摸象。\n- **媒体处理繁琐**：必须从头实现麦克风录音、浏览器音频播放及屏幕捕获的逻辑，耗费大量时间在基础基建而非业务创新上。\n- **原型迭代缓慢**：每次调整系统指令或测试新模型（如 gemini-2.0-flash-exp），都需要重新编译部署，无法即时看到效果。\n\n### 使用 live-api-web-console 后\n- **开箱即用的连接**：直接复用其基于 React 的事件发射器客户端，瞬间打通 WebSocket 通信，稳定处理双向音频流。\n- **全景可观测性**：利用内置的统一日志面板，清晰监控每一个工具调用（Function Call）和服务器响应，开发效率倍增。\n- **模块化媒体支持**：直接集成现成的录音、播放和屏幕共享模块，只需关注业务逻辑，无需重复造轮子。\n- **敏捷实验环境**：通过修改配置文件即可热切换模型参数或测试“主动音频”等新特性，配合官方示例分支快速落地创意。\n\nlive-api-web-console 将原本数周的底层通信与媒体处理工作压缩至几小时，让开发者能专注于打造真正的多模态智能体验。","https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fgoogle-gemini_live-api-web-console_649b2dfb.png","google-gemini","https:\u002F\u002Foss.gittoolsai.com\u002Favatars\u002Fgoogle-gemini_49f2a16f.jpg","Get started building with the Gemini API",null,"googleaidevs","https:\u002F\u002Fai.google.dev\u002Fgemini-api\u002Fdocs","https:\u002F\u002Fgithub.com\u002Fgoogle-gemini",[84,88,92,96],{"name":85,"color":86,"percentage":87},"TypeScript","#3178c6",81,{"name":89,"color":90,"percentage":91},"SCSS","#c6538c",16.7,{"name":93,"color":94,"percentage":95},"HTML","#e34c26",1.9,{"name":97,"color":98,"percentage":99},"CSS","#663399",0.4,2509,720,"2026-04-03T06:39:44","Apache-2.0","未说明",{"notes":106,"python":107,"dependencies":108},"该项目是基于 React 的前端应用，运行环境需要 Node.js 和 npm。无需 Python 或 GPU。使用前需在 .env 文件中配置免费的 Gemini API Key。主要功能包括通过 WebSocket 连接 Live API、音频流播放、麦克风\u002F摄像头\u002F屏幕录制以及日志查看。","不需要",[109,110,111,112],"react","@google\u002Fgenerative-ai","vega-embed","create-react-app",[16],[115,116],"gemini","gemini-api","2026-03-27T02:49:30.150509","2026-04-06T05:17:53.221973",[],[]]