page update

terateams · Nov 23, 2023 · 8c87bb0 · 8c87bb0
1 parent 2cefd8c
commit 8c87bb0
Show file tree

Hide file tree

Showing 3 changed files with 210 additions and 11 deletions.
diff --git a/main.py b/main.py
@@ -25,6 +25,7 @@
 from graphviz import Digraph
 from concurrent.futures import ProcessPoolExecutor
 from fastapi import FastAPI, BackgroundTasks
+from fastapi.templating import Jinja2Templates
 import asyncio
 
 load_dotenv()
@@ -77,6 +78,7 @@ async def dispatch(self, request: Request, call_next: RequestResponseEndpoint) -
 
 executor = ProcessPoolExecutor()
 
+templates = Jinja2Templates(directory="templates")
 
 async def run_in_process(fn, *args):
     loop = asyncio.get_running_loop()
@@ -322,14 +324,8 @@ def create_mindmap_task(task):
         dot_path = output_path + ".dot"
         with open(dot_path, "w") as dot_file:
             dot_file.write(graph.source)
-
-        server_url = os.environ.get("GPTS_API_SERVER")
-        if server_url.endswith("/"):
-            server_url = server_url[:-1]
         task["status"] = "done"
         task["remark"] = "The task is completed, please access the URL information!"
-        task["image_url"] = f"{server_url}/assets/{fileuuid}.png"
-        task["dot_url"] = f"{server_url}/assets/{fileuuid}.dot"
         with open(os.path.join(DATA_DIR, f"{fileuuid}.json"), "w") as f:
             data = json.dumps(task)
             f.write(data)
@@ -380,10 +376,10 @@ async def generate_mindmap_task_add(background_tasks: BackgroundTasks, content:
             status="pending",
             image_url=f"{server_url}/assets/{taskid}.png",
             dot_url=f"{server_url}/assets/{taskid}.dot",
-            status_url=f"{server_url}/knowledge/mindmap/task/result/{taskid}",
-            remark="While the task is being processed, remember to save the URL information and access"
-                   " it later! You can show the user the image and dot file as well as a link to the task"
-                   " result URL for later delayed access.",
+            viz_url=f"{server_url}/knowledge/mindmap/task/viz/{taskid}",
+            status_url=f"{server_url}/knowledge/mindmap/task/result/view/{taskid}",
+            remark="When working on a task, remember to save the URL information for later access! "
+                   "You can display a link to the task status results to the user for later delayed access.",
         )
         with open(os.path.join(DATA_DIR, f"{taskid}.json"), "w") as f:
             data = json.dumps(task)
@@ -405,7 +401,42 @@ async def generate_mindmap_task_result(taskid: str):
     file_path = os.path.join(DATA_DIR, f"{taskid}.json")
     if not os.path.isfile(file_path):
         raise HTTPException(status_code=404, detail="File not found")
-    return FileResponse(file_path)
+
+    with open(file_path, "r") as f:
+        data = json.load(f)
+        return RestResult(code=0, msg="success", result=dict(data=data))
+
+
+@app.get("/knowledge/mindmap/task/result/view/{taskid}", summary="Get the mindmap generate task result",
+         description="Get the mindmap generate task result")
+async def mindmap_task_result_view(request: Request, taskid: str):
+    if not re.match(r'^[\w-]+$', taskid):
+        raise HTTPException(status_code=400, detail="Invalid task ID format")
+
+    file_path = os.path.join(DATA_DIR, f"{taskid}.json")
+    if not os.path.isfile(file_path):
+        raise HTTPException(status_code=404, detail="File not found")
+
+    with open(file_path, "r") as f:
+        data = json.load(f)
+    return templates.TemplateResponse("gen_mindmap_result.html", {"request": request, "data": data})
+
+
+@app.get("/knowledge/mindmap/task/viz/{taskid}", summary="Get the mindmap generate task result",
+         description="Get the mindmap generate task result")
+async def mindmap_vizview(request: Request, taskid: str):
+    if not re.match(r'^[\w-]+$', taskid):
+        raise HTTPException(status_code=400, detail="Invalid task ID format")
+
+    file_path = os.path.join(DATA_DIR, f"{taskid}.dot")
+    if not os.path.isfile(file_path):
+        raise HTTPException(status_code=404, detail="File not found")
+
+    with open(file_path, "r") as f:
+        dot_data = {
+            "dot_string": f.read()
+        }
+    return templates.TemplateResponse("graphviz_dot_view.html", {"request": request, "data": dot_data})
 
 
 if __name__ == "__main__":

diff --git a/templates/gen_mindmap_result.html b/templates/gen_mindmap_result.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mindmap Display</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif; /* 使用易读字体 */
+            background-color: #f4f4f4; /* 轻微灰色背景 */
+            line-height: 1.6;
+            padding: 20px;
+        }
+
+        h1 {
+            color: #333;
+        }
+
+        .container {
+            max-width: 960px;
+            margin: auto;
+            background: #fff;
+            padding: 20px;
+            box-shadow: 0 5px 10px rgba(0,0,0,0.1); /* 给容器添加阴影 */
+        }
+
+        .image-container img {
+            max-width: 100%; /* 图片宽度自动适应容器 */
+            height: auto; /* 高度自动，保持图片比例 */
+            display: block; /* 防止图片下方留有空间 */
+            margin: 0 auto; /* 图片居中 */
+        }
+
+        a {
+            color: #06c;
+            text-decoration: none;
+        }
+
+        a:hover {
+            text-decoration: underline;
+        }
+
+        p {
+            color: #555;
+        }
+
+        .metadata {
+            background: #e9e9e9;
+            padding: 10px;
+            margin-bottom: 20px;
+        }
+
+        .metadata p {
+            margin: 0;
+            color: #333;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>Mindmap Information</h1>
+        <div class="metadata">
+            <p><strong>ID:</strong> {{ data.id }}</p>
+            <p><strong>Content:</strong> {{ data.content }}</p>
+            <p><strong>Created:</strong> {{ data.created }}</p>
+            <p><strong>Graphviz:</strong> <a href="{{ data.dot_url }}">Download</a> | <a href="{{ data.viz_url }}" target="_blank">View</a></p>
+            <p><strong>Status:</strong> {{ data.status }}</p>
+        </div>
+        <div class="image-container">
+            <a href="{{ data.image_url }}" target="_blank"><img src="{{ data.image_url }}" alt="Mindmap Image"></a>
+        </div>
+    </div>
+</body>
+</html>
diff --git a/templates/graphviz_dot_view.html b/templates/graphviz_dot_view.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Graphviz with Viz.js</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/viz.js/2.1.2/viz.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/viz.js/2.1.2/full.render.js"></script>
+    <style>
+        body {
+            font-family: 'Arial', sans-serif;
+            line-height: 1.6;
+            background-color: #f4f4f4;
+            padding: 20px;
+            color: #333;
+        }
+
+        #engine-select-box {
+            text-align: center;
+            margin-bottom: 20px;
+        }
+
+        h1 {
+            text-align: center;
+            color: #4a69bd;
+        }
+
+        #graph {
+            max-width: 1200px;
+            margin: auto;
+            background: white;
+            padding: 20px;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            overflow: auto;
+        }
+
+        svg {
+            width: 100%;
+            height: auto;
+            display: block;
+            margin: auto;
+        }
+    </style>
+</head>
+<body>
+    <h1>Graphviz Visualization with Viz.js</h1>
+
+    <div id="engine-select-box">
+        <label for="engine-select">Layout Engine:</label>
+        <select name="engine-select" id="engine-select">
+            <option value="dot">dot</option>
+            <option value="circo">circo</option>
+            <option value="fdp">fdp</option>
+            <option value="neato">neato</option>
+            <option value="osage">osage</option>
+            <option value="nop">nop</option>
+            <option value="nop1">nop1</option>
+            <option value="nop2">nop2</option>
+            <option value="twopi">twopi</option>
+            <option value="patchwork">patchwork</option>
+        </select>
+    </div>
+
+    <div id="graph"></div>
+
+    <script>
+        var dotString = `{{ data.dot_string | safe }}`;
+
+        // 函数：根据选定的引擎渲染图形
+        function renderGraph(engine) {
+            var viz = new Viz();
+            viz.renderSVGElement(dotString, {format: "svg", engine: engine})
+                .then(function(element) {
+                    var graphDiv = document.getElementById("graph");
+                    graphDiv.innerHTML = ''; // 清空旧图形
+                    graphDiv.appendChild(element);
+                })
+                .catch(error => {
+                    console.error(error);
+                    document.getElementById("graph").innerHTML = "Error rendering graph";
+                });
+        }
+
+        // 初始渲染
+        renderGraph("fdp");
+
+        // 事件监听器：当选择不同的布局引擎时重新渲染图形
+        document.getElementById("engine-select").addEventListener("change", function() {
+            var selectedEngine = this.value;
+            renderGraph(selectedEngine);
+        });
+    </script>
+</body>
+</html>