heimoshuiyu/chatgpt-api-web
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 1 Wiki Activity

support logprobs

Browse Source
This commit is contained in:
黑墨水鱼
2024-02-23 19:00:20 +08:00
parent d01d7c747b
commit c9c51a85cf
6 changed files with 143 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/app.tsx
View File

@@ -2,7 +2,7 @@ import { IDBPDatabase, openDB } from "idb";
import { useEffect, useState } from "preact/hooks";
import "./global.css";
import { calculate_token_length, Message } from "./chatgpt";
import { calculate_token_length, Logprobs, Message } from "./chatgpt";
import getDefaultParams from "./getDefaultParam";
import ChatBOX from "./chatbox";
import models, { defaultModel } from "./models";
@@ -15,6 +15,7 @@ export interface ChatStoreMessage extends Message {
token: number;
example: boolean;
audio: Blob | null;
logprobs: Logprobs | null;
}
export interface TemplateAPI {
@@ -63,6 +64,7 @@ export interface ChatStore {
image_gen_api: string;
image_gen_key: string;
json_mode: boolean;
logprobs: boolean;
}
const _defaultAPIEndpoint = "https://api.openai.com/v1/chat/completions";
@@ -84,7 +86,8 @@ export const newChatStore = (
toolsString = "",
image_gen_api = "https://api.openai.com/v1/images/generations",
image_gen_key = "",
json_mode = false
json_mode = false,
logprobs = true
): ChatStore => {
return {
chatgpt_api_web_version: CHATGPT_API_WEB_VERSION,
@@ -124,6 +127,7 @@ export const newChatStore = (
image_gen_key: image_gen_key,
json_mode: json_mode,
tts_format: tts_format,
logprobs,
};
};
@@ -285,7 +289,8 @@ export function App() {
chatStore.toolsString,
chatStore.image_gen_api,
chatStore.image_gen_key,
chatStore.json_mode
chatStore.json_mode,
chatStore.logprobs
)
);
setSelectedChatIndex(newKey as number);

34
src/chatbox.tsx
View File

@@ -22,6 +22,7 @@ import ChatGPT, {
Message as MessageType,
MessageDetail,
ToolCall,
Logprobs,
} from "./chatgpt";
import Message from "./message";
import models from "./models";
@@ -82,15 +83,29 @@ export default function ChatBOX(props: {
const allChunkMessage: string[] = [];
const allChunkTool: ToolCall[] = [];
setShowGenerating(true);
const logprobs: Logprobs = {
content: [],
};
for await (const i of client.processStreamResponse(response)) {
chatStore.responseModelName = i.model;
responseTokenCount += 1;
// skip if choice is empty (e.g. azure)
if (!i.choices[0]) continue;
const c = i.choices[0];
allChunkMessage.push(i.choices[0].delta.content ?? "");
const tool_calls = i.choices[0].delta.tool_calls;
// skip if choice is empty (e.g. azure)
if (!c) continue;
const logprob = c?.logprobs?.content[0]?.logprob;
if (logprob !== undefined) {
logprobs.content.push({
token: c.delta.content ?? "",
logprob,
});
console.log(c.delta.content, logprob);
}
allChunkMessage.push(c.delta.content ?? "");
const tool_calls = c.delta.tool_calls;
if (tool_calls) {
for (const tool_call of tool_calls) {
// init
@@ -149,6 +164,7 @@ export default function ChatBOX(props: {
chatStore.cost += cost;
addTotalCost(cost);
console.log("save logprobs", logprobs);
const newMsg: ChatStoreMessage = {
role: "assistant",
content,
@@ -156,6 +172,7 @@ export default function ChatBOX(props: {
token: responseTokenCount,
example: false,
audio: null,
logprobs,
};
if (allChunkTool.length > 0) newMsg.tool_calls = allChunkTool;
@@ -210,6 +227,7 @@ export default function ChatBOX(props: {
data.usage.completion_tokens ?? calculate_token_length(msg.content),
example: false,
audio: null,
logprobs: data.choices[0]?.logprobs,
});
setShowGenerating(false);
};
@@ -257,7 +275,10 @@ export default function ChatBOX(props: {
try {
setShowGenerating(true);
const response = await client._fetch(chatStore.streamMode);
const response = await client._fetch(
chatStore.streamMode,
chatStore.logprobs
);
const contentType = response.headers.get("content-type");
if (contentType?.startsWith("text/event-stream")) {
await _completeWithStreamMode(response);
@@ -306,6 +327,7 @@ export default function ChatBOX(props: {
token: calculate_token_length(inputMsg.trim()),
example: false,
audio: null,
logprobs: null,
});
// manually calculate token length
@@ -972,6 +994,7 @@ export default function ChatBOX(props: {
hide: false,
example: false,
audio: null,
logprobs: null,
});
update_total_tokens();
setInputMsg("");
@@ -1066,6 +1089,7 @@ export default function ChatBOX(props: {
hide: false,
example: false,
audio: null,
logprobs: null,
});
update_total_tokens();
setChatStore({ ...chatStore });

23
src/chatgpt.ts
View File

@@ -35,6 +35,16 @@ interface Choices {
index: number;
delta: Delta;
finish_reason: string | null;
logprobs: Logprobs | null;
}
export interface Logprobs {
content: LogprobsContent[];
}
interface LogprobsContent {
token: string;
logprob: number;
}
export interface StreamingResponseChunk {
@@ -85,6 +95,7 @@ export interface FetchResponse {
message: Message | undefined;
finish_reason: "stop" | "length";
index: number | undefined;
logprobs: Logprobs | null;
}[];
}
@@ -174,7 +185,7 @@ class Chat {
this.json_mode = json_mode;
}
_fetch(stream = false) {
_fetch(stream = false, logprobs = false) {
// perform role type check
let hasNonSystemMessage = false;
for (const msg of this.messages) {
@@ -208,6 +219,7 @@ class Chat {
model: this.model,
messages,
stream,
logprobs,
presence_penalty: this.presence_penalty,
frequency_penalty: this.frequency_penalty,
};
@@ -253,15 +265,6 @@ class Chat {
});
}
async fetch(): Promise<FetchResponse> {
const resp = await this._fetch();
const j = await resp.json();
if (j.error !== undefined) {
throw JSON.stringify(j.error);
}
return j;
}
async *processStreamResponse(resp: Response) {
const reader = resp?.body?.pipeThrough(new TextDecoderStream()).getReader();
if (reader === undefined) {

16
src/logprob.tsx Normal file
View File

@@ -0,0 +1,16 @@
import React from "react";
const logprobToColor = (logprob: number) => {
// 将logprob转换为百分比
const percent = Math.exp(logprob) * 100;
// 计算颜色值
// 绿色的RGB值为(0, 255, 0)，红色的RGB值为(255, 0, 0)
const red = Math.round(255 * (1 - percent / 100));
const green = Math.round(255 * (percent / 100));
const color = `rgb(${red}, ${green}, 0)`;
return color;
};
export default logprobToColor;

22
src/message.tsx
View File

@@ -9,6 +9,7 @@ import { MessageDetail } from "./messageDetail";
import { MessageToolCall } from "./messageToolCall";
import { MessageToolResp } from "./messageToolResp";
import { EditMessage } from "./editMessage";
import logprobToColor from "./logprob";
export const isVailedJSON = (str: string): boolean => {
try {
@@ -32,6 +33,7 @@ export default function Message(props: Props) {
const [showEdit, setShowEdit] = useState(false);
const [showCopiedHint, setShowCopiedHint] = useState(false);
const [renderMarkdown, setRenderWorkdown] = useState(false);
const [renderColor, setRenderColor] = useState(false);
const DeleteIcon = () => (
<button
onClick={() => {
@@ -125,7 +127,21 @@ export default function Message(props: Props) {
{
// only show when content is string or list of message
// this check is used to avoid rendering tool call
chat.content && getMessageText(chat)
chat.content &&
(chat.logprobs && renderColor
? chat.logprobs.content
.filter((c) => c.token)
.map((c) => (
<div
style={{
color: logprobToColor(c.logprob),
display: "inline",
}}
>
{c.token}
</div>
))
: getMessageText(chat))
}
</div>
)}
@@ -200,6 +216,10 @@ export default function Message(props: Props) {
<label className="dark:text-white">{Tr("render")}</label>
<input type="checkbox" checked={renderMarkdown} />
</span>
<span onClick={(event: any) => setRenderColor(!renderColor)}>
<label className="dark:text-white">{Tr("color")}</label>
<input type="checkbox" checked={renderColor} />
</span>
</div>
)}
</div>

101
src/settings.tsx
View File

@@ -47,45 +47,54 @@ const SelectModel = (props: {
setChatStore: (cs: ChatStore) => void;
help: string;
}) => {
let shouldIUseCustomModel: boolean = true
let shouldIUseCustomModel: boolean = true;
for (const model in models) {
if (props.chatStore.model === model) {
shouldIUseCustomModel = false
shouldIUseCustomModel = false;
}
}
const [useCustomModel, setUseCustomModel] = useState(shouldIUseCustomModel);
return (
<Help help={props.help}>
<label className="m-2 p-2">Model</label>
<span onClick={() => {
setUseCustomModel(!useCustomModel);
}} className="m-2 p-2">
<span
onClick={() => {
setUseCustomModel(!useCustomModel);
}}
className="m-2 p-2"
>
<label>{Tr("Custom")}</label>
<input className="" type="checkbox" checked={useCustomModel} />
</span>
{
useCustomModel ?
<input
className="m-2 p-2 border rounded focus w-32 md:w-fit"
value={props.chatStore.model} onChange={(event: any) => {
const model = event.target.value as string;
props.chatStore.model = model;
props.setChatStore({ ...props.chatStore });
}} /> : <select
className="m-2 p-2"
value={props.chatStore.model}
onChange={(event: any) => {
const model = event.target.value as string;
props.chatStore.model = model;
props.chatStore.maxTokens = getDefaultParams('max', models[model].maxToken);
props.setChatStore({ ...props.chatStore });
}}
>
{Object.keys(models).map((opt) => (
<option value={opt}>{opt}</option>
))}
</select>
}
{useCustomModel ? (
<input
className="m-2 p-2 border rounded focus w-32 md:w-fit"
value={props.chatStore.model}
onChange={(event: any) => {
const model = event.target.value as string;
props.chatStore.model = model;
props.setChatStore({ ...props.chatStore });
}}
/>
) : (
<select
className="m-2 p-2"
value={props.chatStore.model}
onChange={(event: any) => {
const model = event.target.value as string;
props.chatStore.model = model;
props.chatStore.maxTokens = getDefaultParams(
"max",
models[model].maxToken
);
props.setChatStore({ ...props.chatStore });
}}
>
{Object.keys(models).map((opt) => (
<option value={opt}>{opt}</option>
))}
</select>
)}
</Help>
);
};
@@ -118,14 +127,14 @@ const Input = (props: {
chatStore: ChatStore;
setChatStore: (cs: ChatStore) => void;
field:
| "apiKey"
| "apiEndpoint"
| "whisper_api"
| "whisper_key"
| "tts_api"
| "tts_key"
| "image_gen_api"
| "image_gen_key";
| "apiKey"
| "apiEndpoint"
| "whisper_api"
| "whisper_key"
| "tts_api"
| "tts_key"
| "image_gen_api"
| "image_gen_key";
help: string;
}) => {
const [hideInput, setHideInput] = useState(true);
@@ -225,13 +234,13 @@ const Number = (props: {
chatStore: ChatStore;
setChatStore: (cs: ChatStore) => void;
field:
| "totalTokens"
| "maxTokens"
| "maxGenTokens"
| "tokenMargin"
| "postBeginIndex"
| "presence_penalty"
| "frequency_penalty";
| "totalTokens"
| "maxTokens"
| "maxGenTokens"
| "tokenMargin"
| "postBeginIndex"
| "presence_penalty"
| "frequency_penalty";
readOnly: boolean;
help: string;
}) => {
@@ -275,7 +284,7 @@ const Number = (props: {
const Choice = (props: {
chatStore: ChatStore;
setChatStore: (cs: ChatStore) => void;
field: "streamMode" | "develop_mode" | "json_mode";
field: "streamMode" | "develop_mode" | "json_mode" | "logprobs";
help: string;
}) => {
return (
@@ -319,7 +328,8 @@ export default (props: {
location.pathname +
`?key=${encodeURIComponent(
props.chatStore.apiKey
)}&api=${encodeURIComponent(props.chatStore.apiEndpoint)}&mode=${props.chatStore.streamMode ? "stream" : "fetch"
)}&api=${encodeURIComponent(props.chatStore.apiEndpoint)}&mode=${
props.chatStore.streamMode ? "stream" : "fetch"
}&model=${props.chatStore.model}&sys=${encodeURIComponent(
props.chatStore.systemMessageContent
)}`;
@@ -467,6 +477,7 @@ export default (props: {
help="流模式，使用 stream mode 将可以动态看到生成内容，但无法准确计算 token 数量，在 token 数量过多时可能会裁切过多或过少历史消息"
{...props}
/>
<Choice field="logprobs" help="返回每个Token的概率" {...props} />
<Choice
field="develop_mode"
help="开发者模式，开启后会显示更多选项及功能"