搭建一個chatgpt網頁聊天界面

起

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

折騰

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

準備好api后，我們去github上找到“Chanzhaoyu/chatgpt-web”這個項目，可以看到關于項目的詳細介紹，還有部署方式，我們這里用docker部署，比較方便。

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

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

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

確認無誤后，點擊“提交”，過一會兒容器創建好后就可以訪問你服務器IP+端口，來和chatgpt愉快的聊天了。

總結

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

看效果：

簡介

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配置，域名注冊、域名解析等等，蠻麻煩的，這里就不展開了。

在線咨詢

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

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

搭建一個chatgpt網頁聊天界面

起

折騰

總結

簡介

API 免費！

核心代碼

您的項目需求