fix: add redis cache

.example.env

@@ -1 +1,3 @@
 OPENAI_API_KEY=
+UPSTASH_REDIS_REST_URL=
+UPSTASH_REDIS_REST_TOKEN=

middleware.ts

@@ -0,0 +1,18 @@
+import { NextResponse } from "next/server";
+import type { NextFetchEvent, NextRequest } from "next/server";
+import { Redis } from "@upstash/redis";
+
+export async function middleware(req: NextRequest, ev: NextFetchEvent) {
+  const { bvId } = await req.json();
+  const redis = Redis.fromEnv();
+
+  const result = await redis.get<string>(bvId);
+  if (result) {
+    console.log("hit cache for ", bvId);
+    return NextResponse.json(result);
+  }
+}
+
+export const config = {
+  matcher: "/api/summarize",
+};

package.json

@@ -8,6 +8,7 @@
   "dependencies": {
     "@next/font": "^13.1.5",
     "@types/lodash": "^4.14.191",
+    "@upstash/redis": "^1.20.1",
     "@vercel/analytics": "^0.1.8",
     "clsx": "^1.2.1",
     "eventsource-parser": "^0.1.0",

pages/[...slug].tsx

@@ -3,7 +3,7 @@ import Head from "next/head";
 import Image from "next/image";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
-import { Toaster, toast } from "react-hot-toast";
+import { toast, Toaster } from "react-hot-toast";
 import { useLocalStorage } from "react-use";
 import Footer from "../components/Footer";
 import Header from "../components/Header";
@@ -48,13 +48,23 @@ export const Home: NextPage = () => {
       }
       router.replace(curUrl);
     }
+
+    const videoUrl = url ? url : curVideo;
+    const matchResult = videoUrl.match(/\/video\/([^\/\?]+)/);
+    let bvId: string | undefined;
+    if (matchResult) {
+      bvId = matchResult[1];
+    } else {
+      return toast.error("暂不支持此视频链接");
+    }
+
     setLoading(true);
     const response = await fetch("/api/summarize", {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
       },
-      body: JSON.stringify({ url: url ? url : curVideo, apiKey }),
+      body: JSON.stringify({ bvId, apiKey }),
     });
 
     if (!response.ok) {
@@ -68,22 +78,18 @@ export const Home: NextPage = () => {
       return;
     }
 
-    const data = response.body;
-    if (!data) {
+    // await readStream(response, setSummary);
+    const result = await response.json();
+    if (result.errorMessage) {
+      setLoading(false);
+      toast.error(result.errorMessage);
       return;
     }
-
-    const reader = data.getReader();
-    const decoder = new TextDecoder();
-    let done = false;
-
-    while (!done) {
-      const { value, done: doneReading } = await reader.read();
-      done = doneReading;
-      const chunkValue = decoder.decode(value);
-      setSummary((prev) => prev + chunkValue);
-    }
+    setSummary(result);
     setLoading(false);
+    setTimeout(() => {
+      window.scrollTo({ top: document.body.scrollHeight, behavior: "smooth" });
+    }, 10);
   };
 
   return (

pages/api/summarize.ts

@@ -1,4 +1,7 @@
-import { OpenAIStream } from "../../utils/OpenAIStream";
+import { NextResponse } from "next/server";
+import { Redis } from "@upstash/redis";
+import type { NextFetchEvent, NextRequest } from "next/server";
+import { OpenAIResult } from "../../utils/OpenAIResult";
 import { getChunckedTranscripts, getSummaryPrompt } from "../../utils/prompt";
 
 export const config = {
@@ -9,23 +12,20 @@ if (!process.env.OPENAI_API_KEY) {
   throw new Error("Missing env var from OpenAI");
 }
 
-export default async function handler(req: Request, res: Response) {
-  const { url, apiKey } = (await req.json()) as {
-    url?: string;
+export default async function handler(
+  req: NextRequest,
+  context: NextFetchEvent
+) {
+  const { bvId, apiKey } = (await req.json()) as {
+    bvId: string;
     apiKey?: string;
   };
 
-  if (!url) {
-    return new Response("No prompt in the request", { status: 500 });
+  if (!bvId) {
+    return new Response("No bvid in the request", { status: 500 });
   }
 
   try {
-    const matchResult = url.match(/\/video\/([^\/\?]+)/);
-    let bvId: string | undefined;
-    if (matchResult) {
-      bvId = matchResult[1];
-    }
-    // console.log("========url========", url, matchResult, bvId);
     const response = await fetch(
       `https://api.bilibili.com/x/web-interface/view?bvid=${bvId}`,
       {
@@ -37,7 +37,7 @@ export default async function handler(req: Request, res: Response) {
     const title = res.data?.title;
     const subtitleUrl = res.data?.subtitle?.list?.[0]?.subtitle_url;
     apiKey && console.log("========use user key========");
-    console.log("bvid_url", url);
+    console.log("bvid", bvId);
     console.log("subtitle_url", subtitleUrl);
     if (!subtitleUrl) {
       return new Response("No subtitle in the video", { status: 501 });
@@ -58,21 +58,28 @@ export default async function handler(req: Request, res: Response) {
     const prompt = getSummaryPrompt(title, text);
 
     const payload = {
-      model: 'text-davinci-003',
+      model: "text-davinci-003",
       prompt,
       temperature: 0.5,
       top_p: 1,
       frequency_penalty: 0,
       presence_penalty: 0,
       max_tokens: apiKey ? 400 : 300,
-      stream: true,
+      stream: false,
       n: 1,
     };
 
-    const stream = await OpenAIStream(payload, apiKey);
-    return new Response(stream);
+    const result = await OpenAIResult(payload, apiKey);
+    console.log("result", result);
+    const redis = Redis.fromEnv();
+    const data = await redis.set(bvId, result);
+    console.log(`bvId ${bvId} cached:`, data);
+
+    return NextResponse.json(result);
   } catch (error: any) {
     console.log(error);
-    return new Response(error);
+    return NextResponse.json({
+      errorMessage: error.message,
+    });
   }
 }