叫板GPT-4的Gemini，我做了一个聊天网页，可

叫板GPT-4的Gemini，我做了一个聊天网页，可图片输入，附教程

看效果：

简介

Gemini 是谷歌研发的最新一代大语言模型，目前有三个版本，被称为中杯、大杯、超大杯，Gemini Ultra 号称可与GPT-4一较高低：

Gemini Nano(预览访问) 为设备端体验而构建的最高效模型,支持离线使用场景。
Gemini Pro（已推出）性能最佳的模型,具有各种文本和图像推理任务的功能。
Gemini Ultra（预览访问）将于2024年初推出，用于大规模高度复杂文本和图像推理任务的最强大模型。

Gemini Pro在八项基准测试中的六项上超越了GPT-3.5，被誉为“市场上最强大的免费聊天AI工具”。

本文，我们使用的是 Gemini Pro，Pro有两个模型：

gemini-pro:针对仅文本提示进行了优化。
gemini-pro-vision:针对文本和图像提示进行了优化。

API 免费！

Google这次确实给力，API直接免费开放，只要申请就给！

如何本地执行脚本或开发一个前端页面，顺利白嫖Google的Gemini呢？

先去 https://ai.google.dev/ 创建Gemini API key

顺便说一句，感兴趣可以去深入学习一下文档：https://ai.google.dev/docs

Gemini 构建应用程序所需的所有信息都可以在这个网站查到，包括Python、Android(Kotlin)、Node.js 和 Swift的支持文档。

我们直接看Python 快速入门指南：

https://ai.google.dev/tutorials/python_quickstart

更省事儿的是直接从这个官方示例中copy代码：

https://github.com/google/generative-ai-docs/blob/main/site/en/tutorials/python_quickstart.ipynb

核心代码

本地运行脚本，代码其实简单到离谱，6行足矣。

注：网络要畅通

# 先安装google-generativeai
pip install -q -U google-generativeai

文本对话

import google.generativeai as genai
GOOGLE_API_KEY='这里填写上一步获取的api'
genai.configure(api_key=GOOGLE_API_KEY)
model=genai.GenerativeModel('gemini-pro')
response=model.generate_content("你好")
print(response.text)

运行一下：

图片也可以作为输入，比如让Gemini评价一下我的头像

import PIL.Image
import google.generativeai as genai
img=PIL.Image.open('img.png')
GOOGLE_API_KEY='这里填写上一步获取的api'
genai.configure(api_key=GOOGLE_API_KEY)
model=genai.GenerativeModel('gemini-pro-vision')
response=model.generate_content(["请评价一下这张照片", img])
response.resolve()
print(response.text)

运行一下：

做个网页版

网页版可以使用streamlit或者Gradio实现，Gradio 本公众号写过，包括如何将项目免费部署到huggingface。需要了解更多：可以参考我这篇文章腾讯的这个算法，我搬到了网上，随便玩！

也可以部署到自己的服务器，加个域名就OK了

这里参考了这位大佬的代码：https://github.com/meryemsakin/GeminiGradioApp

我修改了源代码中GOOGLE_API_KEY获取方式并加了登陆认证，还做了一点中文翻译

代码如下：

import time
from typing import List, Tuple, Optional

import google.generativeai as genai
import gradio as gr
from PIL import Image

print("google-generativeai:", genai.__version__)

TITLE="""<h1 align="center">Gemini App</h1>"""
SUBTITLE="""<h2 align="center">仅做试玩，不定期下线</h2>"""
GOOGLE_API_KEY='这里填写上一步获取的api'

AVATAR_IMAGES=(
    None,
    "image.png"
)


def preprocess_stop_sequences(stop_sequences: str) -> Optional[List[str]]:
    if not stop_sequences:
        return None
    return [sequence.strip() for sequence in stop_sequences.split(",")]


def user(text_prompt: str, chatbot: List[Tuple[str, str]]):
    return "", chatbot + [[text_prompt, None]]


def bot(
    #google_key: str,
    image_prompt: Optional[Image.Image],
    temperature: float,
    max_output_tokens: int,
    stop_sequences: str,
    top_k: int,
    top_p: float,
    chatbot: List[Tuple[str, str]]
):

    text_prompt=chatbot[-1][0]
    genai.configure(api_key=GOOGLE_API_KEY)
    generation_config=genai.types.GenerationConfig(
        temperature=temperature,
        max_output_tokens=max_output_tokens,
        stop_sequences=preprocess_stop_sequences(stop_sequences=stop_sequences),
        top_k=top_k,
        top_p=top_p)

    if image_prompt is None:
        model=genai.GenerativeModel('gemini-pro')
        response=model.generate_content(
            text_prompt,
            stream=True,
            generation_config=generation_config)
        response.resolve()
    else:
        model=genai.GenerativeModel('gemini-pro-vision')
        response=model.generate_content(
            [text_prompt, image_prompt],
            stream=True,
            generation_config=generation_config)
        response.resolve()

    # streaming effect
    chatbot[-1][1]=""
    for chunk in response:
        for i in range(0, len(chunk.text), 10):
            section=chunk.text[i:i + 10]
            chatbot[-1][1] +=section
            time.sleep(0.01)
            yield chatbot


image_prompt_component=gr.Image(type="pil", label="Image", scale=1)
chatbot_component=gr.Chatbot(
    label='Gemini',
    bubble_full_width=False,
    avatar_images=AVATAR_IMAGES,
    scale=2
)
text_prompt_component=gr.Textbox(
    placeholder="你好！",
    label="请在这里提问···"
)
run_button_component=gr.Button()
temperature_component=gr.Slider(
    minimum=0,
    maximum=1.0,
    value=0.4,
    step=0.05,
    label="Temperature",
    info=(
        "Temperature 控制令牌选择的随机程度 "
        "较低的Temperature适用于期望获得真实或正确回答的提示, "
        "而较高的Temperature可以导致更多样化或意外的结果 "
    ))
max_output_tokens_component=gr.Slider(
    minimum=1,
    maximum=2048,
    value=1024,
    step=1,
    label="Token limit",
    info=(
        "Token 限制确定每个提示可以获得的最大文本输出量 "
        "每个 Token 大约为四个字符，默认值为 2048 "
    ))

stop_sequences_component=gr.Textbox(
    label="Add stop sequence",
    value="",
    type="text",
    placeholder="STOP, END",
    info=(
        "停止序列是一系列字符(包括空格),如果模型遇到它,会停止生成响应"
        "该序列不作为响应的一部分，"
        "可以添加多达5个停止序列"
    ))
top_k_component=gr.Slider(
    minimum=1,
    maximum=40,
    value=32,
    step=1,
    label="Top-K",
    info=(
        "Top-k 改变了模型为输出选择 token 的方式 "
        "Top-k 为 1 意味着所选 token 在模型词汇表中所有 token 中是最可能的(也称为贪心解码)"
        "而 top-k 为 3 意味着下一个 token 从最可能的 3 个 token 中选取(使用temperature)"
    ))
top_p_component=gr.Slider(
    minimum=0,
    maximum=1,
    value=1,
    step=0.01,
    label="Top-P",
    info=(
        "Top-p 改变了模型为输出选择 token 的方式 "
        "token 从最可能到最不可能选择,直到它们的概率之和等于 top-p 值 "
        "如果 token A、B 和 C 的概率分别为 0.3、0.2 和 0.1,top-p 值为 0.5 "
        "那么模型将选择 A 或 B 作为下一个 token(使用temperature) "
    ))

user_inputs=[
    text_prompt_component,
    chatbot_component
]

bot_inputs=[
    image_prompt_component,
    temperature_component,
    max_output_tokens_component,
    stop_sequences_component,
    top_k_component,
    top_p_component,
    chatbot_component
]

with gr.Blocks() as demo:
    gr.HTML(TITLE)
    gr.HTML(SUBTITLE)
    with gr.Column():
        with gr.Row():
            image_prompt_component.render()
            chatbot_component.render()
        text_prompt_component.render()
        run_button_component.render()
        with gr.Accordion("Parameters", open=False):
            temperature_component.render()
            max_output_tokens_component.render()
            stop_sequences_component.render()
            with gr.Accordion("Advanced", open=False):
                top_k_component.render()
                top_p_component.render()

    run_button_component.click(
        fn=user,
        inputs=user_inputs,
        outputs=[text_prompt_component, chatbot_component],
        queue=False
    ).then(
        fn=bot, inputs=bot_inputs, outputs=[chatbot_component],
    )

    text_prompt_component.submit(
        fn=user,
        inputs=user_inputs,
        outputs=[text_prompt_component, chatbot_component],
        queue=False
    ).then(
        fn=bot, inputs=bot_inputs, outputs=[chatbot_component],
    )

demo.queue(max_size=99).launch(auth=("用户名", "密码"),debug=True)

部署到服务器涉及Nginx配置，域名注册、域名解析等等，蛮麻烦的，这里就不展开了。

tml代码如下：

<a href="tencent://message/?uin=1234567&Site=Sambow&Menu=yes">QQ在线咨询</a>

或者是：

<a href="http://wpa.qq.com/msgrd?v=3&uin=1234567&site=qq&menu=yes">QQ咨询</a>

其中，上述HTML代码中的“1234567”指的是QQ客服号码。
真机实测，不用置疑。

效果图截图如下：

上述两种方式都可以实现，本人亲测！

如果你无法实现QQ在线聊天，给出的病因如下：

大部分应该是你本地浏览器拦截的原因(不过一般拦截，都会有弹框提示你：要打开XXXXX.exe吗？)；
小部分是对方QQ设置了禁止临时会话权限;
极少数人，自己的设置有问题。

只需要这么一句简单的html代码，就可以实现QQ在线聊天！
具体PC端实现QQ聊天的原理和相关知识，可以参考”移动web端对手机QQ的调用“进行了解。

以上就是关于“ PC端页面如何调用QQ进行在线聊天？ ” 的全部内容。

原文链接：https://me.csdn.net/qq_35393869

　在网页里实现文字聊天是比较容易的，但若要实现视频聊天，就比较麻烦了。本文将实现一个纯网页版的视频聊天和桌面分享的Demo，可直接在浏览器中运行，不需要安装任何插件。

一. 主要功能及支持平台

1.本Demo的主要功能有

（1）一对一语音视频聊天。

（2）远程桌面观看。

（3）当客户端掉线时，会进行自动重连，当网络恢复后，重连成功。

2.支持的平台

（1）支持的操作系统包括：Windows、信创国产Linux（银河麒麟、统信UOS）、Android、iOS、Mac、鸿蒙OS。

（2）支持的CPU架构：X86/X64、ARM、MIPS、Loongarch。

（3）支持几乎所有的主流浏览器：Chrome、Edge、Firefox、Safari、360浏览器、QQ浏览器等。

（4）另外，我们测试过，使用APP套壳，在WebView控件中加载Demo页面，也是可以正常视频聊天的。

如此，可以在C/S架构的客户端或手机APP中嵌入WebView控件来引入视频聊天或桌面分享功能的。

二. 开发环境

1. 服务端：

服务端开发环境是 Visual Sudio 2022 ，开发语言是 C# 。

2. Web端：

PC版Web开发环境是 VS Code 1.85 ，使用 vue 3。

手机版Web开发环境是 HBuilder 3.8.12，uni-app（导出H5）。

三. 运行效果

此Demo的源码分为三个部分，分别是服务端，PC端Web（横版）和手机端Web（竖版）。接下来首先来看移动端Web的运行效果。

（1）首先是登录界面，在登录界面有三个输入框，依次为服务器IP、用户账号和用户密码，在本Demo中，用户账号和用户密码均可随便填写。

（2）接下来是首页界面，首页界面有一个已连接的提示框，代表的意思是目前与服务端是连接状态，当因为网络原因或者其他原因断开时，则会提示已断开连接。

（3）发起视频聊天，输入对方的账号，然后点击请求视频会话按钮即可向对方发起视频聊天请求，对方接受请求和即可聊天了。

下图是手机端视频聊天效果：

注意：手机端是不支持分享自己的桌面的，但是移动端可以观看PC端桌面。

（4）接下来看看一下PC端的运行效果。

登录之后主页界面，左上角是关于自己的一些信息，右边窗口则是显示连接对方的摄像头或者桌面。

（4）下图是在PC端观看他人桌面。

输入对方的账号，然后点击请求远程桌面，在对方同意后便可以观看别人的屏幕了。

四. 服务端源码说明

注意，由于浏览器的限制，如果你要将Web端部署到公网上，需要使用HTTPS协议，否则无法访问摄像头。

与之对应的，服务端也需要使用到WSS协议，因此需要准备一份SSL证书用于部署。如果你仅仅只是在本地运行看一下效果，则无需准备。

上图为服务端初始化代码，若不打算部署只是在浏览器中加载本地Demo页面，则应将上图中的第六行注释掉，并将第七行中MultimediaServerFactory.CreateMultimediaServer方法中的wssOption用null替换掉。

　　若打算将网站部署在服务器上，则需要将第五行X509Certificate2中的两个参数分别修改为你证书的路径和密码。

五. Web端源码说明

本Demo的中的Web端包含两套代码，其中移动端Web采用Uniapp进行开发，PC端Web采用Vue框架进行开发。为了便于理解，下面对源码中的关键点进行讲解说明，两套代码逻辑基本相同，因此这里不作区分。

1. 消息定义

在本Demo中，我们定义了10个消息类型，用于Web端之间进行通信，其定义如下：

const informationTypes={
  // 视频请求
  VideoRequest: 0,

  // 回复视频请求的结果
  VideoResult: 1,

  // 通知对方 挂断 视频连接
  CloseVideo: 2,

  // 通知好友 网络原因，导致 视频中断
  NetReasonCloseVideo: 3,

  // 通知对方(忙线中) 挂断 视频连接
  BusyLine: 4,

  // 远程桌面请求
  DesktopRequest: 5,

  // 回复远程桌面请求的结果
  DesktopResult: 6,

  // 主动取消远程桌面请求
  CancelDesktop: 7,

  // 对方（主人端）主动断开远程桌面
  OwnerCloseDesktop: 8,

  // 客人端断开远程桌面连接
  GuestCloseDesktop: 9
};

由于这些消息类型经常会使用到，因此需要将其放到一个全局都能访问到的地方，在移动端Web源码中，它被放在了Vuex中。而在PC端Web源码中，它放在src目录下的omcs目录下。

2. 自定义消息处理器

在登录成功后的这个时机，通过调用多媒体管理器上的 SetCustomMessageReceivedCallback 方法，我们向 multimediaManager（多媒体管理器）注册一个回调函数，这个回调函数会在接收到其他用户或服务端的消息时被触发。

这个回调函数会接收一个对象类型的参数，其中包含了消息的类型和消息发起者的用户名数据，然后就可以根据消息的类型来完成自己的业务操作了。下图是本Demo中定义的消息处理器：

3. 一对一语音视频

在本Demo中，一对一语音视频聊天功能的实现逻辑简而言之就是：例如用户A想要与用户B视频聊天，那么用户A向用户B发送VideoRequest消息，在用户B收到来自用户A的VideoRequest消息时选择同意与否，并将携带用户B意愿数据的VideoResult消息发送用户A。

// 请求视频会话
const videoRequest=async ()=> {
  // ...
  multimediaManager.sendCustomMessage(targetUsername.value, InformationTypes.VideoRequest, null, null);
  // ...
};

// 响应视频会话
const videoResult=(flag)=> {
　　// ...
　　multimediaManager.sendCustomMessage(targetUsername.value, InformationTypes.VideoResult, [flag ? 1 : 0], "");
　　// ...
};

4. 桌面分享

与一对一语音视频聊天功能类似，实现桌面分享也是一方发起请求，一方进行回应。与语音视频对应的，桌面分享的请求的消息类型为DesktopRequest，响应的消息类型为DesktopResult。

5. 断网重连

在网络断开时，用户进入掉线状态（与服务器断开），每5秒会进行与服务器的重新连接。提前向多媒体管理器注入ConnectionInterrupted和ConnectionRebuildSucceed回调，能够在与媒体服务器断开和重新连接成功时做一些事情。

六. 如何在本地部署运行Web端

Web端包含两套代码，其中移动端Web的目录是H5MediaDemo_WebH5，PC端Web的目录是H5MediaDemo_WebPC。

1. 移动端web：

由于移动端web是采用uniapp开发的，而uniapp项目需要通过HBuilder X来运行，因此，你需要在电脑上安装一个HBuilder X，然后在HBuilderX中打开运行——>运行到浏览器，然后选择一个浏览器就可以运行起来了，如下图：

2. PC端web：

PC端采用Vue3开发的，需要依赖NodeJS环境，因此，你需要在电脑上安装一个NodeJS（建议安装长期维护版）。在安装完后，通过在命令行窗口输入node -v和npm - v来检查是否安装成功：

确定安装成功后，通过命令行进入到H5MediaDemo_WebPC的项目根目录，然后输入npm run dev即可将项目运行起来。

在线咨询

上一篇：2023年郑州前端培训机构排名中，实力最强的总是这几
下一篇：Javascript数组系列四之数组的转换与排序So

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商