叫板GPT-4的Gemini，我做了一個(gè)聊天網(wǎng)頁(yè)，可

叫板GPT-4的Gemini，我做了一個(gè)聊天網(wǎng)頁(yè)，可圖片輸入，附教程

看效果：

簡(jiǎn)介

Gemini 是谷歌研發(fā)的最新一代大語(yǔ)言模型，目前有三個(gè)版本，被稱為中杯、大杯、超大杯，Gemini Ultra 號(hào)稱可與GPT-4一較高低：

Gemini Nano(預(yù)覽訪問(wèn)) 為設(shè)備端體驗(yàn)而構(gòu)建的最高效模型,支持離線使用場(chǎng)景。
Gemini Pro（已推出）性能最佳的模型,具有各種文本和圖像推理任務(wù)的功能。
Gemini Ultra（預(yù)覽訪問(wèn)）將于2024年初推出，用于大規(guī)模高度復(fù)雜文本和圖像推理任務(wù)的最強(qiáng)大模型。

Gemini Pro在八項(xiàng)基準(zhǔn)測(cè)試中的六項(xiàng)上超越了GPT-3.5，被譽(yù)為“市場(chǎng)上最強(qiáng)大的免費(fèi)聊天AI工具”。

本文，我們使用的是 Gemini Pro，Pro有兩個(gè)模型：

gemini-pro:針對(duì)僅文本提示進(jìn)行了優(yōu)化。
gemini-pro-vision:針對(duì)文本和圖像提示進(jìn)行了優(yōu)化。

API 免費(fèi)！

Google這次確實(shí)給力，API直接免費(fèi)開放，只要申請(qǐng)就給！

如何本地執(zhí)行腳本或開發(fā)一個(gè)前端頁(yè)面，順利白嫖Google的Gemini呢？

先去 https://ai.google.dev/ 創(chuàng)建Gemini API key

順便說(shuō)一句，感興趣可以去深入學(xué)習(xí)一下文檔：https://ai.google.dev/docs

Gemini 構(gòu)建應(yīng)用程序所需的所有信息都可以在這個(gè)網(wǎng)站查到，包括Python、Android(Kotlin)、Node.js 和 Swift的支持文檔。

我們直接看Python 快速入門指南：

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

更省事兒的是直接從這個(gè)官方示例中copy代碼：

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

核心代碼

本地運(yùn)行腳本，代碼其實(shí)簡(jiǎn)單到離譜，6行足矣。

注：網(wǎng)絡(luò)要暢通

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

文本對(duì)話

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)

運(yùn)行一下：

圖片也可以作為輸入，比如讓Gemini評(píng)價(jià)一下我的頭像

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(["請(qǐng)?jiān)u價(jià)一下這張照片", img])
response.resolve()
print(response.text)

運(yùn)行一下：

做個(gè)網(wǎng)頁(yè)版

網(wǎng)頁(yè)版可以使用streamlit或者Gradio實(shí)現(xiàn)，Gradio 本公眾號(hào)寫過(guò)，包括如何將項(xiàng)目免費(fèi)部署到huggingface。需要了解更多：可以參考我這篇文章騰訊的這個(gè)算法，我搬到了網(wǎng)上，隨便玩！

也可以部署到自己的服務(wù)器，加個(gè)域名就OK了

這里參考了這位大佬的代碼：https://github.com/meryemsakin/GeminiGradioApp

我修改了源代碼中GOOGLE_API_KEY獲取方式并加了登陸認(rèn)證，還做了一點(diǎn)中文翻譯

代碼如下：

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="請(qǐng)?jiān)谶@里提問(wèn)···"
)
run_button_component=gr.Button()
temperature_component=gr.Slider(
    minimum=0,
    maximum=1.0,
    value=0.4,
    step=0.05,
    label="Temperature",
    info=(
        "Temperature 控制令牌選擇的隨機(jī)程度 "
        "較低的Temperature適用于期望獲得真實(shí)或正確回答的提示, "
        "而較高的Temperature可以導(dǎo)致更多樣化或意外的結(jié)果 "
    ))
max_output_tokens_component=gr.Slider(
    minimum=1,
    maximum=2048,
    value=1024,
    step=1,
    label="Token limit",
    info=(
        "Token 限制確定每個(gè)提示可以獲得的最大文本輸出量 "
        "每個(gè) Token 大約為四個(gè)字符，默認(rèn)值為 2048 "
    ))

stop_sequences_component=gr.Textbox(
    label="Add stop sequence",
    value="",
    type="text",
    placeholder="STOP, END",
    info=(
        "停止序列是一系列字符(包括空格),如果模型遇到它,會(huì)停止生成響應(yīng)"
        "該序列不作為響應(yīng)的一部分，"
        "可以添加多達(dá)5個(gè)停止序列"
    ))
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 意味著下一個(gè) token 從最可能的 3 個(gè) 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 作為下一個(gè) 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)

部署到服務(wù)器涉及Nginx配置，域名注冊(cè)、域名解析等等，蠻麻煩的，這里就不展開了。

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客服號(hào)碼。
真機(jī)實(shí)測(cè)，不用置疑。

效果圖截圖如下：

上述兩種方式都可以實(shí)現(xiàn)，本人親測(cè)！

如果你無(wú)法實(shí)現(xiàn)QQ在線聊天，給出的病因如下：

大部分應(yīng)該是你本地瀏覽器攔截的原因(不過(guò)一般攔截，都會(huì)有彈框提示你：要打開XXXXX.exe嗎？)；
小部分是對(duì)方QQ設(shè)置了禁止臨時(shí)會(huì)話權(quán)限;
極少數(shù)人，自己的設(shè)置有問(wèn)題。

只需要這么一句簡(jiǎn)單的html代碼，就可以實(shí)現(xiàn)QQ在線聊天！
具體PC端實(shí)現(xiàn)QQ聊天的原理和相關(guān)知識(shí)，可以參考”移動(dòng)web端對(duì)手機(jī)QQ的調(diào)用“進(jìn)行了解。

以上就是關(guān)于“ PC端頁(yè)面如何調(diào)用QQ進(jìn)行在線聊天？ ” 的全部?jī)?nèi)容。

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

　在網(wǎng)頁(yè)里實(shí)現(xiàn)文字聊天是比較容易的，但若要實(shí)現(xiàn)視頻聊天，就比較麻煩了。本文將實(shí)現(xiàn)一個(gè)純網(wǎng)頁(yè)版的視頻聊天和桌面分享的Demo，可直接在瀏覽器中運(yùn)行，不需要安裝任何插件。

一. 主要功能及支持平臺(tái)

1.本Demo的主要功能有

（1）一對(duì)一語(yǔ)音視頻聊天。

（2）遠(yuǎn)程桌面觀看。

（3）當(dāng)客戶端掉線時(shí)，會(huì)進(jìn)行自動(dòng)重連，當(dāng)網(wǎng)絡(luò)恢復(fù)后，重連成功。

2.支持的平臺(tái)

（1）支持的操作系統(tǒng)包括：Windows、信創(chuàng)國(guó)產(chǎn)Linux（銀河麒麟、統(tǒng)信UOS）、Android、iOS、Mac、鴻蒙OS。

（2）支持的CPU架構(gòu)：X86/X64、ARM、MIPS、Loongarch。

（3）支持幾乎所有的主流瀏覽器：Chrome、Edge、Firefox、Safari、360瀏覽器、QQ瀏覽器等。

（4）另外，我們測(cè)試過(guò)，使用APP套殼，在WebView控件中加載Demo頁(yè)面，也是可以正常視頻聊天的。

如此，可以在C/S架構(gòu)的客戶端或手機(jī)APP中嵌入WebView控件來(lái)引入視頻聊天或桌面分享功能的。

二. 開發(fā)環(huán)境

1. 服務(wù)端：

服務(wù)端開發(fā)環(huán)境是 Visual Sudio 2022 ，開發(fā)語(yǔ)言是 C# 。

2. Web端：

PC版Web開發(fā)環(huán)境是 VS Code 1.85 ，使用 vue 3。

手機(jī)版Web開發(fā)環(huán)境是 HBuilder 3.8.12，uni-app（導(dǎo)出H5）。

三. 運(yùn)行效果

此Demo的源碼分為三個(gè)部分，分別是服務(wù)端，PC端Web（橫版）和手機(jī)端Web（豎版）。接下來(lái)首先來(lái)看移動(dòng)端Web的運(yùn)行效果。

（1）首先是登錄界面，在登錄界面有三個(gè)輸入框，依次為服務(wù)器IP、用戶賬號(hào)和用戶密碼，在本Demo中，用戶賬號(hào)和用戶密碼均可隨便填寫。

（2）接下來(lái)是首頁(yè)界面，首頁(yè)界面有一個(gè)已連接的提示框，代表的意思是目前與服務(wù)端是連接狀態(tài)，當(dāng)因?yàn)榫W(wǎng)絡(luò)原因或者其他原因斷開時(shí)，則會(huì)提示已斷開連接。

（3）發(fā)起視頻聊天，輸入對(duì)方的賬號(hào)，然后點(diǎn)擊請(qǐng)求視頻會(huì)話按鈕即可向?qū)Ψ桨l(fā)起視頻聊天請(qǐng)求，對(duì)方接受請(qǐng)求和即可聊天了。

下圖是手機(jī)端視頻聊天效果：

注意：手機(jī)端是不支持分享自己的桌面的，但是移動(dòng)端可以觀看PC端桌面。

（4）接下來(lái)看看一下PC端的運(yùn)行效果。

登錄之后主頁(yè)界面，左上角是關(guān)于自己的一些信息，右邊窗口則是顯示連接對(duì)方的攝像頭或者桌面。

（4）下圖是在PC端觀看他人桌面。

輸入對(duì)方的賬號(hào)，然后點(diǎn)擊請(qǐng)求遠(yuǎn)程桌面，在對(duì)方同意后便可以觀看別人的屏幕了。

四. 服務(wù)端源碼說(shuō)明

注意，由于瀏覽器的限制，如果你要將Web端部署到公網(wǎng)上，需要使用HTTPS協(xié)議，否則無(wú)法訪問(wèn)攝像頭。

與之對(duì)應(yīng)的，服務(wù)端也需要使用到WSS協(xié)議，因此需要準(zhǔn)備一份SSL證書用于部署。如果你僅僅只是在本地運(yùn)行看一下效果，則無(wú)需準(zhǔn)備。

上圖為服務(wù)端初始化代碼，若不打算部署只是在瀏覽器中加載本地Demo頁(yè)面，則應(yīng)將上圖中的第六行注釋掉，并將第七行中MultimediaServerFactory.CreateMultimediaServer方法中的wssOption用null替換掉。

　　若打算將網(wǎng)站部署在服務(wù)器上，則需要將第五行X509Certificate2中的兩個(gè)參數(shù)分別修改為你證書的路徑和密碼。

五. Web端源碼說(shuō)明

本Demo的中的Web端包含兩套代碼，其中移動(dòng)端Web采用Uniapp進(jìn)行開發(fā)，PC端Web采用Vue框架進(jìn)行開發(fā)。為了便于理解，下面對(duì)源碼中的關(guān)鍵點(diǎn)進(jìn)行講解說(shuō)明，兩套代碼邏輯基本相同，因此這里不作區(qū)分。

1. 消息定義

在本Demo中，我們定義了10個(gè)消息類型，用于Web端之間進(jìn)行通信，其定義如下：

const informationTypes={
  // 視頻請(qǐng)求
  VideoRequest: 0,

  // 回復(fù)視頻請(qǐng)求的結(jié)果
  VideoResult: 1,

  // 通知對(duì)方 掛斷 視頻連接
  CloseVideo: 2,

  // 通知好友 網(wǎng)絡(luò)原因，導(dǎo)致 視頻中斷
  NetReasonCloseVideo: 3,

  // 通知對(duì)方(忙線中) 掛斷 視頻連接
  BusyLine: 4,

  // 遠(yuǎn)程桌面請(qǐng)求
  DesktopRequest: 5,

  // 回復(fù)遠(yuǎn)程桌面請(qǐng)求的結(jié)果
  DesktopResult: 6,

  // 主動(dòng)取消遠(yuǎn)程桌面請(qǐng)求
  CancelDesktop: 7,

  // 對(duì)方（主人端）主動(dòng)斷開遠(yuǎn)程桌面
  OwnerCloseDesktop: 8,

  // 客人端斷開遠(yuǎn)程桌面連接
  GuestCloseDesktop: 9
};

由于這些消息類型經(jīng)常會(huì)使用到，因此需要將其放到一個(gè)全局都能訪問(wèn)到的地方，在移動(dòng)端Web源碼中，它被放在了Vuex中。而在PC端Web源碼中，它放在src目錄下的omcs目錄下。

2. 自定義消息處理器

在登錄成功后的這個(gè)時(shí)機(jī)，通過(guò)調(diào)用多媒體管理器上的 SetCustomMessageReceivedCallback 方法，我們向 multimediaManager（多媒體管理器）注冊(cè)一個(gè)回調(diào)函數(shù)，這個(gè)回調(diào)函數(shù)會(huì)在接收到其他用戶或服務(wù)端的消息時(shí)被觸發(fā)。

這個(gè)回調(diào)函數(shù)會(huì)接收一個(gè)對(duì)象類型的參數(shù)，其中包含了消息的類型和消息發(fā)起者的用戶名數(shù)據(jù)，然后就可以根據(jù)消息的類型來(lái)完成自己的業(yè)務(wù)操作了。下圖是本Demo中定義的消息處理器：

3. 一對(duì)一語(yǔ)音視頻

在本Demo中，一對(duì)一語(yǔ)音視頻聊天功能的實(shí)現(xiàn)邏輯簡(jiǎn)而言之就是：例如用戶A想要與用戶B視頻聊天，那么用戶A向用戶B發(fā)送VideoRequest消息，在用戶B收到來(lái)自用戶A的VideoRequest消息時(shí)選擇同意與否，并將攜帶用戶B意愿數(shù)據(jù)的VideoResult消息發(fā)送用戶A。

// 請(qǐng)求視頻會(huì)話
const videoRequest=async ()=> {
  // ...
  multimediaManager.sendCustomMessage(targetUsername.value, InformationTypes.VideoRequest, null, null);
  // ...
};

// 響應(yīng)視頻會(huì)話
const videoResult=(flag)=> {
　　// ...
　　multimediaManager.sendCustomMessage(targetUsername.value, InformationTypes.VideoResult, [flag ? 1 : 0], "");
　　// ...
};

4. 桌面分享

與一對(duì)一語(yǔ)音視頻聊天功能類似，實(shí)現(xiàn)桌面分享也是一方發(fā)起請(qǐng)求，一方進(jìn)行回應(yīng)。與語(yǔ)音視頻對(duì)應(yīng)的，桌面分享的請(qǐng)求的消息類型為DesktopRequest，響應(yīng)的消息類型為DesktopResult。

5. 斷網(wǎng)重連

在網(wǎng)絡(luò)斷開時(shí)，用戶進(jìn)入掉線狀態(tài)（與服務(wù)器斷開），每5秒會(huì)進(jìn)行與服務(wù)器的重新連接。提前向多媒體管理器注入ConnectionInterrupted和ConnectionRebuildSucceed回調(diào)，能夠在與媒體服務(wù)器斷開和重新連接成功時(shí)做一些事情。

六. 如何在本地部署運(yùn)行Web端

Web端包含兩套代碼，其中移動(dòng)端Web的目錄是H5MediaDemo_WebH5，PC端Web的目錄是H5MediaDemo_WebPC。

1. 移動(dòng)端web：

由于移動(dòng)端web是采用uniapp開發(fā)的，而uniapp項(xiàng)目需要通過(guò)HBuilder X來(lái)運(yùn)行，因此，你需要在電腦上安裝一個(gè)HBuilder X，然后在HBuilderX中打開運(yùn)行——>運(yùn)行到瀏覽器，然后選擇一個(gè)瀏覽器就可以運(yùn)行起來(lái)了，如下圖：

2. PC端web：

PC端采用Vue3開發(fā)的，需要依賴NodeJS環(huán)境，因此，你需要在電腦上安裝一個(gè)NodeJS（建議安裝長(zhǎng)期維護(hù)版）。在安裝完后，通過(guò)在命令行窗口輸入node -v和npm - v來(lái)檢查是否安裝成功：

確定安裝成功后，通過(guò)命令行進(jìn)入到H5MediaDemo_WebPC的項(xiàng)目根目錄，然后輸入npm run dev即可將項(xiàng)目運(yùn)行起來(lái)。

在線咨詢

上一篇：2023年鄭州前端培訓(xùn)機(jī)構(gòu)排名中，實(shí)力最強(qiáng)的總是這幾
下一篇：Javascript數(shù)組系列四之?dāng)?shù)組的轉(zhuǎn)換與排序So

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

叫板GPT-4的Gemini，我做了一個(gè)聊天網(wǎng)頁(yè)，可