feat: update the polished prompt

components/SummaryResult.tsx

@@ -3,6 +3,7 @@ import { ActionsAfterResult } from "~/components/ActionsAfterResult";
 import Sentence from "~/components/Sentence";
 import { useToast } from "~/hooks/use-toast";
 import { formatSummary } from "~/utils/formatSummary";
+import Markdown from "marked-react";
 
 export let isSecureContext = false;
 
@@ -14,10 +15,12 @@ export function SummaryResult({
   currentVideoUrl,
   currentVideoId,
   summary,
+  shouldShowTimestamp,
 }: {
   currentVideoUrl: string;
   currentVideoId: string;
   summary: string;
+  shouldShowTimestamp?: boolean;
 }) {
   const { toast } = useToast();
   const { summaryArray, formattedSummary } = formatSummary(summary);
@@ -50,17 +53,23 @@ export function SummaryResult({
         className="mx-auto mt-6 max-w-3xl cursor-copy rounded-xl border-2 bg-white p-4 text-lg leading-7 shadow-md transition hover:bg-gray-50"
         onClick={handleCopy}
       >
-        {summaryArray.map((sentence, index) => (
-          <div key={index}>
-            {sentence.length > 0 && (
-              <Sentence
-                videoId={currentVideoId}
-                videoUrl={currentVideoUrl}
-                sentence={sentence}
-              />
-            )}
+        {shouldShowTimestamp ? (
+          summaryArray.map((sentence, index) => (
+            <div key={index}>
+              {sentence.length > 0 && (
+                <Sentence
+                  videoId={currentVideoId}
+                  videoUrl={currentVideoUrl}
+                  sentence={sentence}
+                />
+              )}
+            </div>
+          ))
+        ) : (
+          <div className="markdown-body">
+            <Markdown>{summary}</Markdown>
           </div>
-        ))}
+        )}
       </div>
       <ActionsAfterResult
         curVideo={currentVideoUrl}

lib/openai/prompt.ts

@@ -50,9 +50,11 @@ export function getSystemPrompt(promptConfig: PromptConfig) {
   return shouldShowTimestamp ? promptWithTimestamp : betterPrompt;
 }
 export function getUserSubtitlePrompt(title: string, transcript: any) {
-  return `标题: "${title
-    ?.replace(/\n+/g, " ")
-    .trim()}"\n视频字幕: "${limitTranscriptByteLength(transcript)
+  const videoTitle = title?.replace(/\n+/g, " ").trim();
+  const videoTranscript = limitTranscriptByteLength(transcript)
     .replace(/\n+/g, " ")
-    .trim()}"`;
+    .trim();
+  const language = `zh-CN`;
+  const instruction = `\n\nInstructions: Your output should use the following template:\n### Summary\n### Highlights\n- [Emoji] Bulletpoint\n\nYour task is to summarise the text I have given you in up to seven concise bullet points, starting with a short highlight. Choose an appropriate emoji for each bullet point. Use the text above: {{Title}} {{Transcript}}.\n\n\nReply in ${language} Language.`;
+  return `Title: "${videoTitle}"\nTranscript: "${videoTranscript}"${instruction}`;
 }

package.json

@@ -36,6 +36,7 @@
     "get-video-id": "^3.6.5",
     "lemonsqueezy.ts": "^0.1.6",
     "lucide-react": "^0.122.0",
+    "marked-react": "^1.3.2",
     "next": "latest",
     "next-themes": "^0.2.1",
     "node-html-parser": "^6.1.4",

pages/[...slug].tsx

@@ -178,6 +178,7 @@ export const Home: NextPage<{
           summary={summary}
           currentVideoUrl={currentVideoUrl}
           currentVideoId={currentVideoId}
+          shouldShowTimestamp={shouldShowTimestamp}
         />
       )}
     </div>

pages/_app.tsx

@@ -18,6 +18,7 @@ import { cn } from "~/lib/utils";
 import Footer from "../components/Footer";
 import Header from "../components/Header";
 import "../styles/globals.css";
+import "../styles/markdown.css";
 
 const fontSans = FontSans({
   subsets: ["latin"],

pages/api/sumup.ts

@@ -62,12 +62,9 @@ export default async function handler(
     const payload = {
       model: "gpt-3.5-turbo",
       messages: [
-        {
-          role: ChatGPTAgent.system,
-          content: systemPrompt,
-        },
-        { role: ChatGPTAgent.user, content: examplePrompt.input },
-        { role: ChatGPTAgent.assistant, content: examplePrompt.output },
+        // { role: ChatGPTAgent.system, content: systemPrompt },
+        // { role: ChatGPTAgent.user, content: examplePrompt.input },
+        // { role: ChatGPTAgent.assistant, content: examplePrompt.output },
         { role: ChatGPTAgent.user, content: userPrompt },
       ],
       temperature: 0.5,