diff --git a/README.md b/README.md index d47a38954..a317a5649 100644 --- a/README.md +++ b/README.md @@ -3,7 +3,7 @@

ChatGPT Next Web

-One-Click to deploy your own ChatGPT web UI. +One-Click to deploy well-designed ChatGPT web UI on Vercel. 一键免费部署你的私人 ChatGPT 网页应用。 diff --git a/app/api/openai/route.ts b/app/api/openai/route.ts index cc51dbfc9..3477fc270 100644 --- a/app/api/openai/route.ts +++ b/app/api/openai/route.ts @@ -6,6 +6,7 @@ async function makeRequest(req: NextRequest) { const api = await requestOpenai(req); const res = new NextResponse(api.body); res.headers.set("Content-Type", "application/json"); + res.headers.set("Cache-Control", "no-cache"); return res; } catch (e) { console.error("[OpenAI] ", req.body, e); @@ -16,7 +17,7 @@ async function makeRequest(req: NextRequest) { }, { status: 500, - }, + } ); } } diff --git a/app/components/input-range.module.scss b/app/components/input-range.module.scss new file mode 100644 index 000000000..5a555a457 --- /dev/null +++ b/app/components/input-range.module.scss @@ -0,0 +1,7 @@ +.input-range { + border: var(--border-in-light); + border-radius: 10px; + padding: 5px 15px 5px 10px; + font-size: 12px; + display: flex; +} diff --git a/app/components/input-range.tsx b/app/components/input-range.tsx new file mode 100644 index 000000000..a8ee9532b --- /dev/null +++ b/app/components/input-range.tsx @@ -0,0 +1,37 @@ +import * as React from "react"; +import styles from "./input-range.module.scss"; + +interface InputRangeProps { + onChange: React.ChangeEventHandler; + title?: string; + value: number | string; + className?: string; + min: string; + max: string; + step: string; +} + +export function InputRange({ + onChange, + title, + value, + className, + min, + max, + step, +}: InputRangeProps) { + return ( +
+ {title || value} + +
+ ); +} diff --git a/app/components/settings.tsx b/app/components/settings.tsx index a14f6473d..ed1c28ee5 100644 --- a/app/components/settings.tsx +++ b/app/components/settings.tsx @@ -32,6 +32,7 @@ import { UPDATE_URL } from "../constant"; import { SearchService, usePromptStore } from "../store/prompt"; import { requestUsage } from "../requests"; import { ErrorBoundary } from "./error"; +import { InputRange } from "./input-range"; function SettingItem(props: { title: string; @@ -274,8 +275,7 @@ export function Settings(props: { closeSettings: () => void }) { title={Locale.Settings.FontSize.Title} subTitle={Locale.Settings.FontSize.SubTitle} > - void }) { (config.fontSize = Number.parseInt(e.currentTarget.value)), ) } - > + > @@ -407,8 +407,7 @@ export function Settings(props: { closeSettings: () => void }) { title={Locale.Settings.HistoryCount.Title} subTitle={Locale.Settings.HistoryCount.SubTitle} > - void }) { (config.historyMessageCount = e.target.valueAsNumber), ) } - > + > void }) { title={Locale.Settings.Temperature.Title} subTitle={Locale.Settings.Temperature.SubTitle} > - void }) { )), ); }} - > + > void }) { title={Locale.Settings.PresencePenlty.Title} subTitle={Locale.Settings.PresencePenlty.SubTitle} > - void }) { )), ); }} - > + > diff --git a/app/components/ui-lib.module.scss b/app/components/ui-lib.module.scss index 10163e993..95091cd0a 100644 --- a/app/components/ui-lib.module.scss +++ b/app/components/ui-lib.module.scss @@ -149,6 +149,7 @@ background-color: var(--white); color: var(--black); resize: none; + min-width: 50px; } @media only screen and (max-width: 600px) { @@ -159,4 +160,4 @@ max-height: 50vh; } } -} +} \ No newline at end of file diff --git a/app/requests.ts b/app/requests.ts index 8462f2694..987434ed4 100644 --- a/app/requests.ts +++ b/app/requests.ts @@ -9,7 +9,7 @@ const makeRequestParam = ( options?: { filterBot?: boolean; stream?: boolean; - }, + } ): ChatRequest => { let sendMessages = messages.map((v) => ({ role: v.role, @@ -46,11 +46,10 @@ function getHeaders() { export function requestOpenaiClient(path: string) { return (body: any, method = "POST") => - fetch("/api/openai", { + fetch("/api/openai?_vercel_no_cache=1", { method, headers: { "Content-Type": "application/json", - "Cache-Control": "no-cache", path, ...getHeaders(), }, @@ -77,7 +76,7 @@ export async function requestUsage() { .getDate() .toString() .padStart(2, "0")}`; - const ONE_DAY = 24 * 60 * 60 * 1000; + const ONE_DAY = 2 * 24 * 60 * 60 * 1000; const now = new Date(Date.now() + ONE_DAY); const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1); const startDate = formatDate(startOfMonth); @@ -85,7 +84,7 @@ export async function requestUsage() { const [used, subs] = await Promise.all([ requestOpenaiClient( - `dashboard/billing/usage?start_date=${startDate}&end_date=${endDate}`, + `dashboard/billing/usage?start_date=${startDate}&end_date=${endDate}` )(null, "GET"), requestOpenaiClient("dashboard/billing/subscription")(null, "GET"), ]); @@ -125,7 +124,7 @@ export async function requestChatStream( onMessage: (message: string, done: boolean) => void; onError: (error: Error, statusCode?: number) => void; onController?: (controller: AbortController) => void; - }, + } ) { const req = makeRequestParam(messages, { stream: true, @@ -214,7 +213,7 @@ export const ControllerPool = { addController( sessionIndex: number, messageId: number, - controller: AbortController, + controller: AbortController ) { const key = this.key(sessionIndex, messageId); this.controllers[key] = controller; diff --git a/app/styles/globals.scss b/app/styles/globals.scss index 6492b000a..53902d935 100644 --- a/app/styles/globals.scss +++ b/app/styles/globals.scss @@ -159,19 +159,11 @@ input[type="checkbox"]:checked::after { input[type="range"] { appearance: none; - border: var(--border-in-light); - border-radius: 10px; - padding: 5px 15px 5px 10px; background-color: var(--white); color: var(--black); - - &::before { - content: attr(value); - font-size: 12px; - } } -input[type="range"]::-webkit-slider-thumb { +@mixin thumb() { appearance: none; height: 8px; width: 20px; @@ -180,11 +172,36 @@ input[type="range"]::-webkit-slider-thumb { cursor: pointer; transition: all ease 0.3s; margin-left: 5px; + border: none; +} + +input[type="range"]::-webkit-slider-thumb { + @include thumb(); +} + +input[type="range"]::-moz-range-thumb { + @include thumb(); +} + +input[type="range"]::-ms-thumb { + @include thumb(); +} + +@mixin thumbHover() { + transform: scaleY(1.2); + width: 24px; } input[type="range"]::-webkit-slider-thumb:hover { - transform: scaleY(1.2); - width: 24px; + @include thumbHover(); +} + +input[type="range"]::-moz-range-thumb:hover { + @include thumbHover(); +} + +input[type="range"]::-ms-thumb:hover { + @include thumbHover(); } input[type="number"],