当前位置：首页 > news >正文

使用React和google gemini api 打造一个google gemini应用

news 来源：原创 2025/8/10 14:35:10

实现一个简单的聊天应用，用户可以通过输入问题或点击“Surprise me”按钮获取随机问题，并从后端API获取回答。

import { useState } from "react";
function App() {const [ value, setValue] = useState(""); // 存储用户输入的问题。const [error, setError] = useState(""); // 存储错误信息。const [chatHistory, setChatHistory] = useState([]); // 存储聊天记录，格式为一个数组，每个元素是一个包含 role（用户或模型）和 parts（消息内容）的对象。const surpriseOptions = ['Who won the latest Nobel Peace Prize?','Where does pizza come from?','Who do you make a sandwich?'] // 一个包含随机问题的数组const surprise = () => {const randomValue = surpriseOptions[Math.floor(Math.random() * surpriseOptions.length)];setValue(randomValue);} // 从 surpriseOptions 中随机选择一个问题，并将其设置为 value// getResponse 是一个异步函数，用于向后端API发送请求并获取回答const getResponse = async () => {if (!value){setError("Please enter a question");return;} // 如果 value 为空，设置错误信息并返回。try {const options = {method: 'POST',body: JSON.stringify({history: chatHistory,message: value}), // 转换为 JSON 字符串headers: {'Content-Type': 'application/json'}}const response = await fetch('http://localhost:8000/gemini', options); // 使用 fetch 发送POST请求，请求体包含 chatHistory 和用户输入的 valueconst data = await response.text();console.log(data);setChatHistory(oldChatHistory => [...oldChatHistory, {role: "user",parts: [{text: value}],},{role: "model",parts: [{text: data}],}]) // 将API返回的回答添加到 chatHistory 中setValue("") // 清空输入框}catch (error) {console.error(error);setError("Something went wrong! Please try again later.");} // 如果发生错误，设置错误信息}const clear = () => {setValue("")setError("")setChatHistory([])} // 清空输入框、错误信息和聊天记录。return (<div className="app"><p>What do you want to know?<button className="surprise" onClick={surprise} disabled={!chatHistory}>Surprise me</button></p><!-- 如果 disabled 为 true，按钮不可点击；如果 disabled 为 false，按钮可点击。 如果 chatHistory 为空（[]），它仍然是一个对象，而所有对象在布尔上下文中都被视为 true，!chatHistory 返回 false。
--><div className="input-container"><inputvalue={value}placeholder="When is Christmas...?"onChange={(e) => setValue(e.target.value)}/><!-- e.target.value 用于获取事件目标（通常是输入框、下拉框等表单元素）的当前值。它通常与 onChange 事件一起使用，以便在用户输入时实时获取输入内容。 -->{!error && <button onClick={getResponse}>Ask me</button>}{error && <button onClick={clear}>Clear</button>}</div>{error && <p>{error}</p>}<div className="search-result">{chatHistory.map((chatItem, _index) => <div key={_index}><p className="answer">{chatItem.role}: {chatItem.parts.map(part => part.text).join(" ")}</p></div>)}</div></div>);
}export default App;

渲染一个包含以下内容的界面：

一个标题和“Surprise me”按钮（仅在 chatHistory 不为空时可用）。
一个输入框和“Ask me”按钮（如果无错误）或“Clear”按钮（如果有错误）。
错误信息（如果有）。
聊天记录，每条记录显示用户问题和模型回答。

实现一个基于 Express 的 Node.js 服务器，用于与 Google 的 Generative AI 模型（Gemini）进行交互

const PORT = 8000
const express = require('express') // Node.js 的 Web 框架，用于构建服务器。
const cors = require('cors') // 用于处理跨域资源共享（CORS），允许前端与后端跨域通信。const app = express()
app.use(cors()) // 启用 CORS 中间件，允许跨域请求。
app.use(express.json()) // 启用 JSON 解析中间件，以便服务器可以解析请求体中的 JSON 数据。require('dotenv').config()const { GoogleGenerativeAI } = require('@google/generative-ai') // Google 提供的 Generative AI SDK，用于与 Gemini 模型交互。const genAI = new GoogleGenerativeAI(process.env.GOOGLE_GEN_AI_KEY)// 定义一个 POST 路由 /gemini，用于接收前端发送的请求。
app.post('/gemini', async (req, res) => {const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash" });// 使用聊天历史记录初始化一个 Gemini 聊天会话。const chat = model.startChat({history: req.body.history}) // 从请求体中获取聊天历史记录。const msg = req.body.message // 从请求体中获取用户发送的消息。const result = await chat.sendMessage(msg) // 向 Gemini 模型发送用户的消息。const response = await result.responseconst text = response.text()res.send(text) // 将模型的响应文本发送回前端。
}
)// 启动服务器，监听指定的端口（PORT）。
app.listen(PORT, () => console.log(`Server running on port ${PORT}`))

使用React和google gemini api 打造一个google gemini应用

实现一个简单的聊天应用，用户可以通过输入问题或点击“Surprise me”按钮获取随机问题，并从后端API获取回答。 import { useState } from "react"; function App() {const [ value, setValue] useState(""); // 存储用户输入的问题…...

编程日记 2025/8/10 14:35:10

为什么Django能有效防御CSRF攻击？

在当今这个互联网高度发达的时代，Web安全问题层出不穷，其中跨站请求伪造（CSRF，Cross-Site Request Forgery）就是一个比较常见的威胁。攻击者利用用户的身份信息，发送恶意请求，改变用户的属性或执…...

编程日记 2025/8/10 1:07:27

一、字符类函数 1，ASCII(c)和CHR(i)字符串和ascii码互转换 SQL> select ascii(Z) ,ascii(H),ascii( A) from dual;ASCII(Z) ASCII(H) ASCII(A) ---------- ---------- ----------90 72 32SQL> select chr(90),chr(72),chr(65) from dual;C…...

编程日记 2025/8/10 1:24:01

【Visio使用教程】

Visio使用教程 1. Visio 的基本介绍1.1 Visio 是什么？核心特点： 1.2 主要功能与应用场景典型用途：行业应用： 1.3 版本与兼容性1.4 Visio下载1.5 安装 2. Visio 的界面与基础操作2.1 界面布局详解2.2 创建新文档与模板选择2.3 形状…...

编程日记 2025/8/10 14:31:50

蓝桥杯修剪灌木

问题描述爱丽丝要完成一项修剪灌木的工作。有 N 棵灌木整齐的从左到右排成一排。爱丽丝在每天傍晩会修剪一棵灌木, 让灌木的高度变为 0 厘米。爱丽丝修剪灌木的顺序是从最左侧的灌木开始, 每天向右修剪一棵灌木。当修剪了最右侧的灌木后, 她会调转方向, 下一天开始向左修…...

编程日记 2025/8/5 15:46:29

HTML中滚动加载的实现

设置div的overflow属性，可以使得该div具有滚动效果，下面以div中包含的是table来举例。当table的元素较多，以至于超出div的显示范围的话，观察下该div元素的以下3个属性： clientHeight是div的显示高度，scrol…...

编程日记 2025/8/9 20:09:40

bbbbb

import java.util.ArrayList; import java.util.List; public class KthPermutation { public static String getPermutation(int n, int k) { // 计算阶乘 int[] factorial new int[n]; factorial[0] 1; for (int i 1; i < n; i) …...

编程日记 2025/8/9 10:51:11

Linux文件

1.Open函数高频使用的Linux系统调用：open write read close Linux自带的工具：man手册： man 1是普通的shell命令，比如ls man 2是系统调用函数，比如open，write说明在Linux系统库的定义： int o…...

编程日记 2025/8/10 14:31:49

kafka指北

为自己总结一下kafka指北，会持续更新。创作不易，转载请注明出处。目录集群controller选举过程broker启动流程主题创建副本分布ISRleader副本选举机制LEO 生产数据流程同步发送和异步发送分区策略ack应答生产者发送消息的幂等性跨分区幂等性问题&…...

编程日记 2025/8/8 12:02:56

Linux安装部署Elasticsearch8 全过程记录

一、安装 Elasticsearch8 1、下载访问 Elasticsearch 官方网站（Download Elasticsearch | Elastic）。在下载页面找到 Elasticsearch 8 的 Linux 版本（.tar.gz 格式）下载链接，点击下载。下载Elasticsearch8&…...

编程日记 2025/8/6 2:01:31

ESP32（3）UDP通信

对于 lwIP 的 Socket 的使用方式，它与文件操作非常相似。在文件操作中，我们首先打开文件，然后进行读/写操作，最后关闭文件。在TCP/IP网络通信中，也存在着相同的操作流程，但所使用的接口不再是文件描述符或 …...

编程日记 2025/8/10 14:31:07

汽车机械钥匙升级一键启动的优点

汽车机械钥匙升级一键启动的优点主要包括： 便捷性：一键启动功能的引入极大地提升了用车便捷性。车主无需翻找钥匙，只需在车辆感应范围内轻触启动键，即可轻松发动汽车。安全性：移动管家专车专用一键启动系统配备了防…...

编程日记 2025/8/9 8:41:37

【matlab例程】三维下的TDOA定位和EKF轨迹滤波例程，TDOA的锚点数量可自定义（订阅专栏后可获得完整代码）

本文所述的MATLAB例程实现了TDOA定位和扩展卡尔曼滤波（EKF）来提高位置估计的准确性，并通过可视化结果进行分析。文章目录运行结果MATLAB代码程序讲解关键步骤和功能步骤解释注意事项总结运行结果三维轨迹：三维误差曲线： RMSE曲线：命令行输出内容：...

编程日记 2025/8/9 1:21:02

个人blog系统前后端分离前端js后端go

系统设计： 1.使用语言：前端使用vue，并使用axios向后端发送数据。后端使用的是go的gin框架，并使用grom连接数据库实现数据存储读取。 2.设计结构： 最终展示：仅展示添加模块，其他模块基本相似前…...

编程日记 2025/8/6 20:16:25

OSG简介

OSG OpenSceneGraph (简称 OSG) 是一个开源的高性能3D图形库。作用它为开发者提供了一个强大的API，处理和渲染复杂的3D图形。特点 OSG基于OpenGL构建，提供了对现代图形技术的支持，如着色器、纹理映射、光照模型等高级特性。跨平台支…...

编程日记 2025/8/4 1:15:20

社区版Uos20.9从源码编译QT5.15.2

主要是在这个文章上学的究极保姆式教你如何在Ubuntu上源码安装Qt5.15.2_ubuntu安装qt5.15.2-CSDN博客但原文上在环境变量的配置上真用在 uso上好像不行，要加一些引号和$号。原文的测试编译代码也有些问题，include上少了类。略作修改，在UOS社…...

编程日记 2025/8/10 14:35:08

AI学习第二天--大模型压缩（量化、剪枝、蒸馏、低秩分解）

目录 1. 量化：压缩大象的“脂肪” 比喻技术逻辑 2. 剪枝：修剪大象的“无效毛发” 比喻技术逻辑 3. 知识蒸馏：让大象“师从巨象” 比喻技术逻辑 4. 低秩分解：把大象“折叠成纸偶” 比喻技术逻辑 5. 推理优化&#…...

编程日记 2025/8/10 14:29:12

C++ —— 线程同步（互斥锁）

C —— 线程同步（互斥锁） 线程同步互斥锁（互斥量）测试代码mutex互斥锁线程同步线程同步：多线程协同工作，协商如何使用共享资源。 C11线程同步包含三部分内容： 互斥锁（互斥量&…...

编程日记 2025/8/10 14:29:10

相对路径跳转和绝对路径跳转有什么区别？

在 Vue 3 中使用路由跳转时，相对路径跳转和绝对路径跳转在使用方式、适用场景等方面存在明显区别，以下为你详细介绍： 定义绝对路径跳转：指的是使用完整的路径来进行路由导航，路径以 / 开头，无论当前处于…...

编程日记 2025/8/10 14:29:09

Flume详解——介绍、部署与使用

1. Flume 简介 Apache Flume 是一个专门用于高效地收集、聚合、传输大量日志数据的分布式、可靠的系统。它特别擅长将数据从各种数据源（如日志文件、消息队列等）传输到 HDFS、HBase、Kafka 等大数据存储系统。特点： 可扩展&#xff1…...

编程日记 2025/8/6 10:19:08

笔记类AI应用体验

笔记类AI应用体验叮当好记视频一键转笔记， 祝你学习效率起飞 IMAGet笔记印象笔记（Evernote）：Notion：Trilium Notes：二、开始搭建三、搭建步骤四、创建博客 Obsidian：案例让ai帮我执行大模型学习…...

编程日记 2025/8/10 14:31:08

Mysql篇——SQL优化

本篇将带领各位了解一些常见的sql优化方法，学到就是赚到，一起跟着练习吧~ SQL优化准备工作准备的话我们肯定是需要一张表的，什么表都可以，这里先给出我的表结构（表名：userinfo） 通过sql查看…...

编程日记 2025/8/10 14:31:49

【css酷炫效果】纯CSS实现故障文字特效

【css酷炫效果】纯CSS实现故障文字特效缘创作背景html结构css样式完整代码基础版进阶版(3D效果) 效果图想直接拿走的老板，链接放在这里：https://download.csdn.net/download/u011561335/90492053 缘创作随缘，不定时更新。创作背景刚…...

编程日记 2025/8/10 14:34:29

【Java】链表（LinkedList）（图文版）

本博客总结了Java当中链表的实现，以及相关方法的使用，在最后附带了一些常见链表相关处理技巧，希望对你有帮助！ ps：可拷贝到IDEA上自行测试，代码全部完成测试。一.链表概述 1.什么是链表？ 链…...

编程日记 2025/8/10 14:35:09

审批工作流系统xFlow

WorkFlow-审批流程系统该项目为完全开源免费项目可用于学习或搭建初始化审批流程系统希望有用的小伙伴记得点个免费的star gitee仓库地址仿钉钉飞书工作审批流系统介绍前端技术栈: vue3 ts vite arcodesign eslint 后端技术栈:springbootspring mvc mybatis mavenmysq…...

编程日记 2025/8/10 14:34:28

UNION，UNION ALL 的详细用法

目录一、基本概念二、核心区别三、语法使用规则四、代码实演示 4.1 两张表字段相同，字段顺序也相同 4.2 两张表字段相同。但字段顺序不同 4.3 两张表存在相同字段，但一张表字段多，一张表字段少一、基本概念操作符功能描述去重处…...

编程日记 2025/8/10 11:23:30

Java 集合遍历过程中修改数据触发 Fail-Fast 机制，导致报ConcurrentModificationException异常

Java Fail-Fast 机制 Fail-Fast 机制是 Java 集合框架中的一种错误检测机制，用于在遍历集合时检测结构修改。如果在迭代器创建之后，集合被修改（例如添加或删除元素），并且这种修改不是通过迭代器自身的 remove() 方法进…...

编程日记 2025/8/4 1:18:11

Javascript 日期相关计算

1、获取当前日期的前一天 // 获取当前日期let today new Date();today.setDate(today.getDate() - 1);// 转换为本地日期字符串格式let yesterdayStr today.toISOString().slice(0, 10);console.log(yesterdayStr); // 例如: "2023-04-03" (格式取决于地区设置) 2…...

编程日记 2025/8/10 6:35:03

自动驾驶背后的数学：特征提取中的线性变换与非线性激活

在上一篇博客「自动驾驶背后的数学：从传感器数据到控制指令的函数嵌套」—— 揭秘人工智能中的线性函数、ReLU 与复合函数中，我们初步探讨了自动驾驶技术中从传感器数据到控制指令的函数嵌套流程，其中提到了特征提取模块对传感器数据进行线性…...

编程日记 2025/8/10 14:35:10

DNS解析查询工具

dig命令 1 常用命令命令：dig 您的域名（示例：dig www.baidu.com） 2、根据解析记录查询，比如MX，CNAME，NS，PTR等，只需将类型加在命令后面即可。示例：dig bai…...

编程日记 2025/8/10 10:32:15

【eNSP实战】（续）一个AC多个VAP的实现—将隧道转发改成直接转发

在一个AC多个VAP的实现—CAPWAP隧道转发此篇文章配置的基础上，将隧道转发改成直接转发一、改成直接转发需要改动的配置 （一）将连接AP的接口改成trunk口，并允许vlan100、101、102通过 [AC1]interface GigabitEthernet 0/0/8 …...

编程日记 2025/8/10 2:28:21

解决远程卡在下载vscode-server的问题，一键安装脚本

vscode-server 下载与安装脚本 vscode-server一键安装脚本简介此脚本用于下载并安装指定提交 ID 和架构的 VS Code Server。用户可以选择不同的架构，并输入对应的 VS Code 提交 ID 来下载和安装 vscode-server。VS Code提交ID可以在VS Code界面“帮助>关于…...

编程日记 2025/8/10 14:33:36

【unity实战】用unity封装一个复杂全面且带不同射击模式的飞机大战射击系统

考虑到每个人基础可能不一样，且并不是所有人都有同时做2D、3D开发的需求，所以我把【零基础入门unity游戏开发】分为成了C#篇、unity通用篇、unity3D篇、unity2D篇。【C#篇】：主要讲解C#的基础语法，包括变量、数据类型、运算符、流程控制、面向对象等，适合没有编程基础的…...

编程日记 2025/8/6 12:40:40

LeetCode[42] 接雨水

动态规划 left_max[i] height[i]左侧的最高高度right_max[i] height[i]右侧的最高高度height[i]能接多少水？min(left_max[i], right_max[i])-height[i] class Solution { public:int trap(vector<int>& height) {int len height.size();vector<in…...

编程日记 2025/8/10 14:31:06

c++ 基础题目lambda

1. auto lambda = [](double x) { return static_cast<int>(x); }; 是匿名函数对象 ,不可直接声明 a.可以赋值给一个与其类型兼容的 std::function 类型的对象 std::function<int(int, int)> lambda = [](int x, int y) { return x + y; }; b.使用具体的 lambda …...

编程日记 2025/8/3 1:18:28

RTSP/Onvif安防视频EasyNVR平台 vs.多协议接入视频汇聚EasyCVR平台：设备分组的区别

EasyNVR安防视频云平台是旭帆科技TSINGSEE青犀旗下支持RTSP/Onvif协议接入的安防监控流媒体视频云平台。平台具备视频实时监控直播、云端录像、云存储、录像检索与回看、告警等视频能力，能对接入的视频流进行处理与多端分发，包括RTSP、RTMP、HTTP-FLV、W…...

编程日记 2025/8/10 1:24:30

网络编程套接字【端口号/TCPUDP/网络字节序/socket编程接口/UDPTCP网络实验】

网络编程套接字 0. 前言1. 认识端口号2. 认识TCP和UDP协议3. 网络字节序4. socket编程接口5. 实现一个简单的UDP网络程序5.1 需求分析5.2 头文件准备5.3 服务器端设计5.4 客户端设计5.5 本地测试5.6 跨网络测试5.7 UDP小应用——客户端输入命令，服务器端执行 6. 地址…...

编程日记 2025/8/10 13:17:19

【C语言预编译处理精选题】

C语言预编译处理精选题一、选择易错题1.1 纯文本替换，注意优先级！1.2 再来一道文本替换，别马虎1.3 宏定义的替换1.4带参数宏定义的空格问题1.5 " "的include1.6 条件编译1.7 预编译概念二、填空易错题2.1 注意两个连续的 i2.2 异…...

编程日记 2025/8/8 5:46:03

云钥科技工业相机定制服务，助力企业实现智能智造

在工业自动化、智能制造和机器视觉快速发展的今天，工业相机作为核心感知设备，其性能直接决定了检测精度、生产效率和产品质量。然而，标准化工业相机往往难以满足复杂多样的应用场景需求，‌工业相机定制‌逐渐成为企业突破技术瓶颈…...

编程日记 2025/8/9 11:03:03

用了Cline和华为云的大模型，再也回不去了

这两年AI火热，受影响最大的还是程序员群体，因为编程语言是高度形式化的，完全可以用BNF等形式精确地定义，不像自然语言那样，容易出现歧义。另外开源是软件界的潮流，GitHub上有海量的开源代码可供AI来训练&am…...

编程日记 2025/8/9 13:55:31

vs2017版本与arcgis10.1的ArcObject SDK for .NET兼容配置终结解决方案

因电脑用的arcgis10.1,之前安装的vs2010正常能使用AO和AE，安装vs2017后无法使用了，在重新按照新版本arcgis engine或者arcObject费时费力，还需要重新查找资源。用vs2017与arc10.1的集成主要两个问题，1：安装后vs中没有…...

编程日记 2025/8/8 19:09:39

Java对接微信支付全过程详解

🧑 博主简介：CSDN博客专家，历代文学网（PC端可以访问：https://literature.sinhy.com/#/?__c1000，移动端可微信小程序搜索“历代文学”）总架构师，15年工作经验，精通Java编…...

编程日记 2025/8/9 1:18:40

微软 System Center Configuration Manager（SCCM）的组件文件

微软 System Center Configuration Manager（SCCM）或 Microsoft Endpoint Configuration Manager（MECM）的组件文件，属于企业级设备管理工具的一部分。以下是具体说明： C:\Windows\CCM\smsswd.exe C:\Windows\CCM\tsmanager.exe smsswd.exe 和 tsmanager.exe 是 Micros…...

编程日记 2025/8/6 1:13:39

C语言和C++到底有什么关系？

C 读作“C 加加”，是“C Plus Plus”的简称。顾名思义，C 就是在 C 语言的基础上增加了新特性，玩出了新花样，所以才说“Plus”，就像 Win11 和 Win10、iPhone 15 和 iPhone 15 Pro 的关系。 C 语言是 1972 年由美国贝…...

编程日记 2025/8/6 13:43:26

10.PE导出表

一：定位导出表 PIMAGE_NT_HEADERS->OptionalHeader->DataDirectory[0] typedef struct _IMAGE_DATA_DIRECTORY {DWORD VirtualAddress; // 导出表的RVADWORD Size; // 导出表大小（没用） } IMAGE_DATA_DIRECTORY, *PIMAGE_DATA_DIRECTORY; 该结构的Vi…...

编程日记 2025/8/9 17:15:43

springBoot中不添加依赖 , 手动生成一个token ,并校验token,在统一拦截器中进行校验 (使用简单 , 但是安全性会低一点)

要在 Spring Boot 里实现接口统一拦截并校验 Token，可以借助 Spring 的拦截器机制。下面是具体的实现步骤和代码示例。 1. 创建 Token 工具类 import java.nio.charset.StandardCharsets; import java.security.MessageDigest; import java.security.NoSuchAlgori…...

编程日记 2025/8/8 21:05:49

VSCode C/C++ 环境搭建指南

一、前言 Visual Studio Code（简称 VSCode）是一款轻量级且功能强大的跨平台代码编辑器，凭借丰富的插件生态和高度的可定制性，深受开发者喜爱。对于 C/C 开发者而言，在 VSCode 中搭建开发环境，能够获得灵活…...

编程日记 2025/8/9 22:03:00

ES6（4） Map 集合详解

1. Map 集合简介 Map 是 ES6 提供的一种新的键值对数据结构，与普通对象（Object）不同，Map 的键可以是任意类型（包括对象、函数等）。 2. 创建 Map 集合可以使用 new Map() 创建一个 Map，并在括…...

编程日记 2025/8/5 11:10:24

DeepSeek私有化部署与安装浏览器插件内网穿透远程访问实战

文章目录前言1. 本地部署OllamaDeepSeek2. Page Assist浏览器插件安装与配置3. 简单使用演示4. 远程调用大模型5. 安装内网穿透6. 配置固定公网地址前言最近，国产AI大模型Deepseek成了网红爆款，大家纷纷想体验它的魅力。但随着热度的攀升&#xff0c…...

编程日记 2025/8/9 8:07:47

【设计模式】建造者模式

三、建造者模式 3.3 建造者模式建造者(Builder) 模式也称构建器模式、构建者模式或生成器模式，同工厂模式或原型模式一样，也是一种创建型模式。建造者模式比较复杂，不太常用，但这并不表示不需要了解和掌握该模式。建造者模式…...

编程日记 2025/8/8 7:37:42

实现一个简单的聊天应用，用户可以通过输入问题或点击“Surprise me”按钮获取随机问题，并从后端API获取回答。

实现一个基于 Express 的 Node.js 服务器，用于与 Google 的 Generative AI 模型（Gemini）进行交互

相关文章：