搭建一個(gè)chatgpt網(wǎng)頁聊天界面

起

最近c(diǎn)hatgpt很火啊，剛出來的時(shí)候沒怎么在意，后來試用了一下，在一些問題上它的回答還是蠻靠譜的，特別是用于翻譯方面的問題。于是想著自己搭一個(gè)用用，訪問起來方便些。

折騰

首先我們需要一臺(tái)服務(wù)器，得是國外的，國內(nèi)暫時(shí)沒法訪問，要是有代理的話可以試試。然后還需要準(zhǔn)備一個(gè)chatgpt賬號(hào)，有api也行。首先如果有賬號(hào)的話就去chatgpt管理頁面獲取個(gè)api，進(jìn)到首頁，點(diǎn)擊右上角頭像，下拉菜單中點(diǎn)擊“View API keys”，進(jìn)去新建個(gè)api即可，這個(gè)過程需要上網(wǎng)環(huán)境的支持，所以還是花點(diǎn)小錢直接買比較方便。

準(zhǔn)備好api后，我們?nèi)ithub上找到“Chanzhaoyu/chatgpt-web”這個(gè)項(xiàng)目，可以看到關(guān)于項(xiàng)目的詳細(xì)介紹，還有部署方式，我們這里用docker部署，比較方便。

方便的話打開docker的管理界面操作，沒有的話也可以參考docker項(xiàng)目的部署命令，我這里用寶塔的docker管理器演示，其他的管理器操作類似的。

來到“鏡像管理”界面，點(diǎn)擊“鏡像搜索”，在搜索框內(nèi)輸入“chenzhaoyu94/chatgpt-web”找到正確的鏡像拉取下來。

然后來到“容器列表”界面，點(diǎn)擊“創(chuàng)建容器”，“鏡像”選取剛才拉取的鏡像；“端口映射”容器端口是3002，外部端口選一個(gè)你開放了的端口不然訪問不了；“環(huán)境變量”里一般填一個(gè)OPENAI_API_KEY即你的chatgpt api 就可以了，當(dāng)然你需要設(shè)置其他的話就參考下官方文檔。

確認(rèn)無誤后，點(diǎn)擊“提交”，過一會(huì)兒容器創(chuàng)建好后就可以訪問你服務(wù)器IP+端口，來和chatgpt愉快的聊天了。

總結(jié)

現(xiàn)階段的ai已經(jīng)很厲害了，如果繼續(xù)發(fā)展下去的話可能好多人飯碗不保啊，不過總的來說還是會(huì)極大的助力我們的工作和生活，一個(gè)隨時(shí)隨地有問必答的助理在身邊以前想想就很科幻，現(xiàn)在在慢慢變成現(xiàn)實(shí)了。

看效果：

簡介

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

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

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

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

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

API 免費(fèi)！

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

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

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

順便說一句，感興趣可以去深入學(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í)簡單到離譜，6行足矣。

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

# 先安裝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)

運(yùn)行一下：

圖片也可以作為輸入，比如讓Gemini評價(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(["請?jiān)u價(jià)一下這張照片", img])
response.resolve()
print(response.text)

運(yùn)行一下：

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

網(wǎng)頁版可以使用streamlit或者Gradio實(shí)現(xiàn)，Gradio 本公眾號(hào)寫過，包括如何將項(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="請?jiā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配置，域名注冊、域名解析等等，蠻麻煩的，這里就不展開了。

在線咨詢

上一篇：項(xiàng)目上線流程
下一篇：先睹為快即將到來的HTML6

您的項(xiàng)目需求

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

整合營銷服務(wù)商

搭建一個(gè)chatgpt網(wǎng)頁聊天界面

起

折騰

總結(jié)

簡介

API 免費(fèi)！

核心代碼

您的項(xiàng)目需求

API 免費(fèi)！