♻️Refactor: 清除 mermaid

backend/agent/basicAgent.go

@@ -44,7 +44,7 @@ func CallWithMessage(llm llms.Model, ctx context.Context, prompt string) (respon
 	return response
 
 }
-func CallWithAgent(llm llms.Model, ctx context.Context, topic string, promptPath string,) (response string) {
+func CallWithAgent(llm llms.Model, ctx context.Context, topic string, promptPath string) (response string) {
 	content, err := os.ReadFile(promptPath)
 	if err != nil {
 		fmt.Printf("File err: %v", err)
@@ -67,13 +67,13 @@ func CallWithAgent(llm llms.Model, ctx context.Context, topic string, promptPath
 }
 
 func CallWithAgentDefined[T any](llm llms.Model, ctx context.Context, topic string, promptPath string, responseType T) (response T) {
-	
+
 	parse, err := outputparser.NewDefined(responseType)
 	if err != nil {
 		fmt.Printf("CreateParse err: %v", err)
 		return
 	}
-	
+
 	content, err := os.ReadFile(promptPath)
 	if err != nil {
 		fmt.Printf("File err: %v", err)
@@ -93,25 +93,25 @@ func CallWithAgentDefined[T any](llm llms.Model, ctx context.Context, topic stri
 	if err != nil {
 		fmt.Printf("Prompt err: %v", err)
 	}
-	
+
 	responseString, err := llms.GenerateFromSinglePrompt(
 		ctx,
 		llm,
 		"用户正在学习Go语言和React框架，你是用户的助手。\n"+prompt,
 	)
 
-	
-
 	if err != nil {
 		log.Fatal(err)
 	}
 
+	responseString = strings.TrimPrefix(responseString, "\n")
+	responseString = strings.TrimSuffix(responseString, "\n")
 
 	if !strings.Contains(responseString, "```json") {
-		responseString = "```json\n" + responseString + "```"
+		responseString = "```json\n" + responseString + "\n```"
 	}
 
-  	fmt.Printf("AI: %s\n\n",responseString)
+	// fmt.Printf("AI: %s\n\n", responseString)
 
 	response, err = parse.Parse(responseString)
 	if err != nil {
@@ -119,5 +119,7 @@ func CallWithAgentDefined[T any](llm llms.Model, ctx context.Context, topic stri
 		return
 	}
 
+	fmt.Printf("API:\n%v", response)
+
 	return response
 }

backend/handlers/agent.go

@@ -11,7 +11,6 @@ import (
 var files = []string{
 	".\\prompt\\card.txt",
 	".\\prompt\\guodegang.txt",
-	".\\prompt\\mermaid.txt",
 	".\\prompt\\quiz.txt",
 	".\\prompt\\scenario.txt",
 }
@@ -28,20 +27,14 @@ func GetGuodegang(llm llms.Model, ctx context.Context, topic string) (response r
 	return
 }
 
-func GetMermaid(llm llms.Model, ctx context.Context, topic string) (response response_struct.Mermaid) {
-	file := files[2]
-	response = agent.CallWithAgentDefined(llm, ctx, topic, file, response_struct.Mermaid{})
-	return
-}
-
 func GetQuiz(llm llms.Model, ctx context.Context, topic string) (response response_struct.Quiz) {
-	file := files[3]
+	file := files[2]
 	response = agent.CallWithAgentDefined(llm, ctx, topic, file, response_struct.Quiz{})
 	return
 }
 
 func GetScenario(llm llms.Model, ctx context.Context, topic string) (response response_struct.Scenario) {
-	file := files[4]
+	file := files[3]
 	response = agent.CallWithAgentDefined(llm, ctx, topic, file, response_struct.Scenario{})
 	return
 }

backend/main.go

@@ -69,13 +69,6 @@ func main() {
 			"message": message,
 		})
 	})
-	route.GET("/mermaid/:topic", func(c *gin.Context) {
-		topic := c.Param("topic")
-		message := handle.GetMermaid(llm, ctx, topic)
-		c.JSON(200, gin.H{
-			"message": message,
-		})
-	})
 	route.GET("/quiz/:topic", func(c *gin.Context) {
 		topic := c.Param("topic")
 		message := handle.GetQuiz(llm, ctx, topic)
@@ -93,5 +86,4 @@ func main() {
 
 	route.Run()
 
-	
 }

backend/prompt/mermaid.txt

@@ -1,6 +0,0 @@
-请为"{{.Knowledge}}"生成一个Mermaid思维导图或流程图，要求：
-1. 零未定义节点：所有节点（A[文本]、B(文本)等）必须在关系语句前先定义。
-2. 严格缩进与换行：使用2个空格缩进，每条关系语句独立成行。
-3. 括号与引号成对：所有()、[]、<>、""必须严格配对，无多余空格。
-4. 箭头方向明确：使用标准箭头 -->、---、-.-> 等，禁止使用 ->（不完整）或 =>（错误）。
-5. 避免中文直接嵌入：若需中文，确保用双引号包裹（如 A["开始"]），或建议用户使用英文标签。

backend/response_struct/allstruct.go

@@ -1,9 +0,0 @@
-package response_struct
-
-type AllStruct struct {
-	CardStruct		Card		`json:"card"`
-	GuodegangStruct Guodegang	`json:"guodegang"`
-	MermaidStruct 	Mermaid		`json:"mermaid"`
-	QuizStruct 		Quiz		`json:"quiz"`
-	ScenarioStruct 	Scenario	`json:"scenario"`
-}

backend/response_struct/mermaid.go

@@ -1,6 +0,0 @@
-package response_struct
-
-type Mermaid struct {
-	Type    string `json:"type"`
-	Content string `json:"content"`
-}

backend/utils/tool.go

@@ -1,26 +0,0 @@
-package utils
-
-import (
-	"encoding/json"
-	"fmt"
-
-	"github.com/tmc/langchaingo/outputparser"
-)
-
-// Parse parses the output of an LLM call.
-func (p outputparser.Defined[T)(T) Parse(text string) (T, error) {
-	var target T
-
-	// Removes '```json' and '```' from the start and end of the text.
-	const opening = "```json"
-	const closing = "```"
-	if text[:len(opening)] != opening || text[len(text)-len(closing):] != closing {
-		return target, nil
-		// return target, fmt.Errorf("input text should start with %s and end with %s", opening, closing)
-	}
-	parseableJSON := text[len(opening) : len(text)-len(closing)]
-	if err := json.Unmarshal([]byte(parseableJSON), &target); err != nil {
-		return target, fmt.Errorf("could not parse generated JSON: %w", err)
-	}
-	return target, nil
-}

frontend/src/App.tsx

@@ -1,18 +1,120 @@
+import { useState } from "react";
+import { ProgressBar, Label, Tabs } from "@heroui/react";
 import Card from "./components/Card";
 import Guodegang from "./components/Guodegang";
-import { Surface } from "@heroui/react";
+import Topic from "./components/Topic";
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
 function App() {
+  const [topic, setTopic] = useState('');
+  const [cardData, setCardData]: any = useState(null);
+  const [cardLoading, setCardLoading] = useState(false);
+  const [cardError, setCardError] = useState<string | null>(null);
+  const [guodegangData, setGuodegangData]: any = useState(null);
+  const [guodegangLoading, setGuodegangLoading] = useState(false);
+  const [guodegangError, setGuodegangError] = useState<string | null>(null);
+
+  const fetchData = async (topicToFetch: string) => {
+    setCardLoading(true);
+    setGuodegangLoading(true);
+    setCardError(null);
+    setGuodegangError(null);
+
+    const cardUrl = `http://localhost:8080/card/${encodeURIComponent(topicToFetch)}`;
+    const guodegangUrl = `http://localhost:8080/guodegang/${encodeURIComponent(topicToFetch)}`;
+
+    const abortController = new AbortController();
+    const timeoutId = setTimeout(() => abortController.abort(), 300000);
+
+    const fetchCard = async () => {
+      try {
+        const response = await fetch(cardUrl, { signal: abortController.signal });
+        if (!response.ok) throw new Error(`Card API failed: ${response.status}`);
+        const result = await response.json();
+        setCardData(result.message);
+      } catch (error) {
+        console.error("Error fetching card data:", error);
+        setCardError("Failed to load card data");
+      } finally {
+        setCardLoading(false);
+      }
+    };
+
+    const fetchGuodegang = async () => {
+      try {
+        const response = await fetch(guodegangUrl, { signal: abortController.signal });
+        if (!response.ok) throw new Error(`Guodegang API failed: ${response.status}`);
+        const result = await response.json();
+        setGuodegangData(result.message);
+      } catch (error) {
+        console.error("Error fetching guodegang data:", error);
+        setGuodegangError("Failed to load guodegang data");
+      } finally {
+        setGuodegangLoading(false);
+      }
+    };
+
+    Promise.allSettled([fetchCard(), fetchGuodegang()]).finally(() => {
+      clearTimeout(timeoutId);
+    });
+  };
+
+  const handleTopicSubmit = (newTopic: string) => {
+    setTopic(newTopic);
+    if (newTopic) {
+      fetchData(newTopic);
+    }
+  };
+
+  const cardLoaded = !cardLoading && !!cardData;
+  const guodegangLoaded = !guodegangLoading && !!guodegangData;
+
+  const progress = (() => {
+    if (!topic) return 0;
+    if (cardLoaded && guodegangLoaded) return 100;
+    if (cardLoaded || guodegangLoaded) return 50;
+    return 10;
+  })();
+
   return (
-    <>
+    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '20px' }}>
-      <Surface
+        <Topic onTopicSubmit={handleTopicSubmit}/>
-        className="flex min-w-[320px] flex-row gap-4 rounded-3xl p-6 flex-wrap justify-center"
+        {topic && (
-        variant="default"
+            <div className="w-64">
-      >
+                <ProgressBar value={progress} color="accent">
-        <Card topic="React Hooks" />
+                    <Label>Data Loading</Label>
-        <Guodegang topic="React Hooks" />
+                    <ProgressBar.Output />
-      </Surface>
+                    <ProgressBar.Track>
-    </>
+                        <ProgressBar.Fill />
+                    </ProgressBar.Track>
+                </ProgressBar>
+            </div>
+        )}
+        <div className="w-full max-w-8xl">
+            <Tabs className="w-full">
+                <Tabs.ListContainer>
+                    <Tabs.List aria-label="View options">
+                        <Tabs.Tab id="card">
+                            <Tabs.Separator />
+                            <Tabs.Indicator />
+                            📚 学习卡片
+                        </Tabs.Tab>
+                        <Tabs.Tab id="guodegang">
+                            <Tabs.Separator />
+                            <Tabs.Indicator />
+                            🎭 德云社讲解
+                        </Tabs.Tab>
+                    </Tabs.List>
+                </Tabs.ListContainer>
+                <Tabs.Panel id="card">
+                    <Card topic={topic} data={cardData} loading={cardLoading} error={cardError} />
+                </Tabs.Panel>
+                <Tabs.Panel id="guodegang">
+                    <Guodegang topic={topic} data={guodegangData} loading={guodegangLoading} error={guodegangError} />
+                </Tabs.Panel>
+            </Tabs>
+        </div>
+    </div>
   );
 }
 

frontend/src/components/Card.tsx

@@ -1,5 +1,4 @@
 import { Card } from "@heroui/react";
-import { useEffect, useState } from "react";
 
 interface KeyPointItem {
   point: string;
@@ -51,35 +50,12 @@ interface CardData {
 
 interface Props {
   topic: string;
+  data: CardData | null;
+  loading: boolean;
+  error: string | null;
 }
 
-export default function Default({ topic }: Props) {
+export default function Default({ topic, data, loading, error }: Props) {
-  const [data, setData] = useState<CardData | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    const fetchData = async () => {
-      try {
-        const response = await fetch(
-          `http://localhost:8080/card/${encodeURIComponent(topic)}`,
-        );
-        if (!response.ok) {
-          throw new Error("API Error");
-        }
-        const result = await response.json();
-        setData(result.message);
-        setError(null);
-      } catch (error) {
-        console.error("Failed to fetch data: ", error);
-        setError("Failed to load data. Please try again.");
-      } finally {
-        setLoading(false);
-      }
-    };
-    fetchData();
-  }, [topic]);
-
   if (loading) {
     return (
       <div className="w-full p-4 sm:p-6 md:max-w-2xl lg:max-w-4xl mx-auto">
@@ -100,6 +76,23 @@ export default function Default({ topic }: Props) {
     );
   }
 
+  if (!topic || !data) {
+    return (
+      <div className="w-full p-4 sm:p-6 md:max-w-2xl lg:max-w-4xl mx-auto">
+        <Card className="relative w-full max-w-2xl mx-auto bg-white shadow-xl rounded-2xl overflow-hidden border border-gray-100 p-8">
+          <div className="absolute upper-0 right-0 -mr-2 -mb-2 pointer-events-none select-none">
+            <span className="text-[10rem] opacity-80 blur-none">🧐</span>
+          </div>
+          <div className="text-center text-gray-600">
+            <div className="text-3xl mb-4">📚</div>
+            <div className="text-lg font-medium mb-2">学习卡片组件</div>
+            <div className="text-sm text-gray-500">输入主题后，这里将展示相关的核心知识点、常见误解和最佳实践</div>
+          </div>
+        </Card>
+      </div>
+    );
+  }
+
   return (
     <div className="w-full p-4 sm:p-6 md:max-w-2xl lg:max-w-4xl mx-auto">
       <Card className="relative w-full max-w-2xl mx-auto bg-white shadow-xl rounded-2xl overflow-hidden border border-gray-100">
@@ -118,7 +111,7 @@ export default function Default({ topic }: Props) {
             )}
           </div>
 
-          <Card.Description className="px-6 pb-6 space-y-6">
+          <div className="px-6 pb-6 space-y-6">
             <div>
               <h3 className="flex items-center text-lg font-semibold text-gray-700 mb-3">
                 <span className="mr-2"></span>
@@ -232,7 +225,7 @@ export default function Default({ topic }: Props) {
                 {data!.mnemonic.content}
               </p>
             </div>
-          </Card.Description>
+          </div>
         </div>
       </Card>
     </div>

frontend/src/components/Guodegang.tsx

@@ -1,5 +1,4 @@
 import { Card } from "@heroui/react";
-import { useEffect, useState } from "react";
 
 interface GuodegangData {
   name: string;
@@ -8,35 +7,12 @@ interface GuodegangData {
 
 interface Props {
   topic: string;
+  data: GuodegangData | null;
+  loading: boolean;
+  error: string | null;
 }
 
-export default function Guodegang({ topic }: Props) {
+export default function Guodegang({ topic, data, loading, error }: Props) {
-  const [data, setData] = useState<GuodegangData | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    const fetchData = async () => {
-      try {
-        const response = await fetch(
-          `http://localhost:8080/guodegang/${encodeURIComponent(topic)}`,
-        );
-        if (!response.ok) {
-          throw new Error("API Error");
-        }
-        const result = await response.json();
-        setData(result.message);
-        setError(null);
-      } catch (error) {
-        console.error("Failed to fetch data: ", error);
-        setError("Failed to load data. Please try again.");
-      } finally {
-        setLoading(false);
-      }
-    };
-    fetchData();
-  }, [topic]);
-
   if (loading) {
     return (
       <div className="w-full p-4 sm:p-6 md:max-w-2xl lg:max-w-4xl mx-auto">
@@ -57,6 +33,23 @@ export default function Guodegang({ topic }: Props) {
     );
   }
 
+  if (!topic || !data) {
+    return (
+      <div className="w-full p-4 sm:p-6 md:max-w-2xl lg:max-w-4xl mx-auto">
+        <Card className="relative w-full max-w-2xl mx-auto bg-white shadow-xl rounded-2xl overflow-hidden border border-gray-100 p-8">
+          <div className="absolute upper-0 right-0 -mr-2 -mb-2 pointer-events-none select-none">
+            <span className="text-[10rem] opacity-80 blur-none">🎤</span>
+          </div>
+          <div className="text-center text-gray-600">
+            <div className="text-3xl mb-4">🎭</div>
+            <div className="text-lg font-medium mb-2">德云社风格讲解</div>
+            <div className="text-sm text-gray-500">输入主题后，这里将用相声的生动语言为您讲解知识点</div>
+          </div>
+        </Card>
+      </div>
+    );
+  }
+
   return (
     <div className="w-full p-4 sm:p-6 md:max-w-2xl lg:max-w-4xl mx-auto">
       <Card className="relative w-full max-w-2xl mx-auto bg-white shadow-xl rounded-2xl overflow-hidden border border-gray-100">

frontend/src/components/Topic.tsx

@@ -0,0 +1,42 @@
+import { Input, Button } from '@heroui/react';
+import { useState } from 'react';
+
+interface Props {
+    onTopicSubmit: (topic: string) => void;
+}
+
+export default function Default({ onTopicSubmit }: Props) {
+    const [value, setValue] = useState('');
+
+    const handleSubmit = () => {
+        if (value.trim()) {
+            onTopicSubmit(value);
+        }
+    };
+
+    const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
+        if (e.key === 'Enter') {
+            handleSubmit();
+        }
+    };
+
+    return (
+        <div className="flex gap-2 items-center">
+            <Input 
+                aria-label="Name" 
+                className="w-64" 
+                placeholder="Please enter topic 🎉" 
+                value={value}
+                onChange={(e) => setValue(e.target.value)}
+                onKeyPress={handleKeyPress}
+            />
+            <Button 
+                variant="primary"
+                onPress={handleSubmit}
+                isDisabled={!value.trim()}
+            >
+                提交
+            </Button>
+        </div>
+    );
+}