叫板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小時內與您取得聯系。

整合營銷服務商