Added Documentation

Type-32 · Feb 27, 2024 · daed774 · daed774
1 parent d4145c9
commit daed774
Show file tree

Hide file tree

Showing 20 changed files with 657 additions and 38 deletions.
diff --git a/app.vue b/app.vue
@@ -52,17 +52,7 @@ onBeforeMount(() => {
                 </div>
             </dialog>
             <NuxtPage/>
-            <footer class="footer p-10 bg-neutral text-neutral-content mt-20">
-                <aside>
-                    <svg width="50" height="50" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" class="fill-current"><path d="M22.672 15.226l-2.432.811.841 2.515c.33 1.019-.209 2.127-1.23 2.456-1.15.325-2.148-.321-2.463-1.226l-.84-2.518-5.013 1.677.84 2.517c.391 1.203-.434 2.542-1.831 2.542-.88 0-1.601-.564-1.86-1.314l-.842-2.516-2.431.809c-1.135.328-2.145-.317-2.463-1.229-.329-1.018.211-2.127 1.231-2.456l2.432-.809-1.621-4.823-2.432.808c-1.355.384-2.558-.59-2.558-1.839 0-.817.509-1.582 1.327-1.846l2.433-.809-.842-2.515c-.33-1.02.211-2.129 1.232-2.458 1.02-.329 2.13.209 2.461 1.229l.842 2.515 5.011-1.677-.839-2.517c-.403-1.238.484-2.553 1.843-2.553.819 0 1.585.509 1.85 1.326l.841 2.517 2.431-.81c1.02-.33 2.131.211 2.461 1.229.332 1.018-.21 2.126-1.23 2.456l-2.433.809 1.622 4.823 2.433-.809c1.242-.401 2.557.484 2.557 1.838 0 .819-.51 1.583-1.328 1.847m-8.992-6.428l-5.01 1.675 1.619 4.828 5.011-1.674-1.62-4.829z"></path></svg>
-                    <p>{{ $t('main.footer.org') }}<br>{{ $t('main.footer.org_desc') }}<br><b>{{ $t("role.assistant") }}</b> {{ $t('main.footer.built-with-love') }}</p>
-                </aside>
-                <nav>
-                    <h6 class="footer-title">{{ $t('main.footer.nav.links') }}</h6>
-                    <a href="https://ko-fi.com/type32" class="link link-hover">{{ $t('main.footer.nav.links.kofi-support') }}</a>
-                    <a href="https://github.com/Type-32" class="link link-hover">{{ $t('main.footer.nav.links.view-github') }}</a>
-                </nav>
-            </footer>
+
         </NuxtLayout>
     </html>
 </template>

diff --git a/components/MenuTreeLister.vue b/components/MenuTreeLister.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+const props = defineProps({
+    list: []
+})
+</script>
+
+<template>
+    <ul>
+        <li v-for="(list, listIndex) in props.list" :key="listIndex">
+            <NuxtLink v-if="list.children == null" :to="`${list._path}`" class="group">
+                <span>{{list.title}}</span>
+                <span v-if="list.badge != null" class="badge badge-sm font-mono null">{{list.badge}}</span>
+            </NuxtLink>
+            <details open v-else>
+                <summary class="group"><span v-if="list.icon != null">{{list.icon}}</span>{{list.title}}</summary>
+                <MenuTreeLister :list="list.children"/>
+            </details>
+        </li>
+    </ul>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/components/PageFooter.vue b/components/PageFooter.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+    <footer class="footer p-10 bg-neutral text-neutral-content mt-20">
+        <aside>
+            <svg width="50" height="50" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" class="fill-current"><path d="M22.672 15.226l-2.432.811.841 2.515c.33 1.019-.209 2.127-1.23 2.456-1.15.325-2.148-.321-2.463-1.226l-.84-2.518-5.013 1.677.84 2.517c.391 1.203-.434 2.542-1.831 2.542-.88 0-1.601-.564-1.86-1.314l-.842-2.516-2.431.809c-1.135.328-2.145-.317-2.463-1.229-.329-1.018.211-2.127 1.231-2.456l2.432-.809-1.621-4.823-2.432.808c-1.355.384-2.558-.59-2.558-1.839 0-.817.509-1.582 1.327-1.846l2.433-.809-.842-2.515c-.33-1.02.211-2.129 1.232-2.458 1.02-.329 2.13.209 2.461 1.229l.842 2.515 5.011-1.677-.839-2.517c-.403-1.238.484-2.553 1.843-2.553.819 0 1.585.509 1.85 1.326l.841 2.517 2.431-.81c1.02-.33 2.131.211 2.461 1.229.332 1.018-.21 2.126-1.23 2.456l-2.433.809 1.622 4.823 2.433-.809c1.242-.401 2.557.484 2.557 1.838 0 .819-.51 1.583-1.328 1.847m-8.992-6.428l-5.01 1.675 1.619 4.828 5.011-1.674-1.62-4.829z"></path></svg>
+            <p>{{ $t('main.footer.org') }}<br>{{ $t('main.footer.org_desc') }}<br><b>{{ $t("role.assistant") }}</b> {{ $t('main.footer.built-with-love') }}</p>
+        </aside>
+        <nav>
+            <h6 class="footer-title">{{ $t('main.footer.nav.links') }}</h6>
+            <a href="https://ko-fi.com/type32" class="link link-hover">{{ $t('main.footer.nav.links.kofi-support') }}</a>
+            <a href="https://github.com/Type-32" class="link link-hover">{{ $t('main.footer.nav.links.view-github') }}</a>
+        </nav>
+    </footer>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/content/docs/cn/API/_dir.yml b/content/docs/cn/API/_dir.yml
@@ -0,0 +1,2 @@
+title: '开发者API'
+navigation.icon: '💻'
diff --git a/content/docs/cn/API/usage.md b/content/docs/cn/API/usage.md
@@ -0,0 +1,98 @@
+---
+title: "API使用"
+author: "W"
+---
+
+# MoodHelper API 使用指南
+
+欢迎使用 MoodHelper API 使用指南！ 我们的 API 允许您将 MoodHelper 的功能集成到您自己的应用程序中，从而提供一种无缝的方式来实时访问我们的聊天机器人的响应。 下面，我们提供了一个 TypeScript 代码片段，演示如何从 MoodHelper API 获取流式响应，确保您的应用程序可以与我们的服务有效交互。
+
+## 🚀 快速开始使用 MoodHelper API
+
+MoodHelper API 的设计简单且易于使用。 要与 API 进行通信，您需要向端点“https://moodhelper.crtl-prototype-studios.cn/api/v1/chat”发送 POST 请求。 该请求包含用户的消息并指定应以流式传输响应。
+
+## 📜 TypeScript 集成
+
+下面是一个简化的 TypeScript 示例，可帮助您入门：
+
+```typescript
+// Define the structure for the messages array
+interface Message {
+  role: string;
+  content: string;
+}
+
+// Initialize variables to manage API communication states
+let messages: Message[] = [{ role: "user", content: "Hello!" }];
+let awaitingResponse: boolean = false;
+let generatingResponse: boolean = false;
+let errorOccurred: boolean = false;
+let activeResponse: string = '';
+
+// Function to handle streaming the response from the API
+async function stream() {
+    awaitingResponse = true;
+    generatingResponse = false;
+    activeResponse = ''; // Reset active response
+
+    try {
+        const response = await fetch('https://moodhelper.crtl-prototype-studios.cn/api/v1/chat', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ messages, stream: true }), // Ensure stream is true
+        });
+
+        if (!response.ok) throw new Error('Network response was not ok.');
+
+        const reader = response.body?.getReader();
+        if (!reader) throw new Error('Failed to get reader from response body.');
+
+        awaitingResponse = false;
+        generatingResponse = true;
+
+        // Stream the response
+        while (true) {
+            const { done, value } = await reader.read();
+            if (done) break;
+            activeResponse += new TextDecoder("utf-8").decode(value);
+        }
+
+        generatingResponse = false;
+        messages.push({ role: 'assistant', content: activeResponse });
+    } catch (error) {
+        errorOccurred = true;
+        generatingResponse = false;
+        console.error('An error occurred:', error);
+    } finally {
+        awaitingResponse = generatingResponse = false;
+    }
+}
+```
+
+### 📘 API 端点详细信息
+
+- **端点：** `https://moodhelper.crtl-prototype-studios.cn/api/v1/chat`
+- **方法：** POST
+- **内容类型：** `application/json`
+- **身体参数：**
+  - `messages`：消息对象数组，其中每个对象都有一个`角色`（`用户`或`系统`）和`内容`（消息文本）。
+  - `stream`：必须设置为 `true` 才能启用流响应的布尔值。
+
+### 💡 使用 API 的技巧
+
+- 确保“stream”参数始终为“true”以接收流式响应。
+- 如果需要，“messages”数组可以包含多条消息，但通常您一次会发送一条用户消息。
+- 处理 UI 中的“errorOccurred”、“awaitingResponse”和“generateResponse”状态，以向用户提供反馈（例如，加载指示器或错误消息）。
+- 始终将您的请求正文编码为 JSON 并设置适当的内容类型。
+
+## 🛠 故障排除
+
+- **常见错误：** 检查网络问题，确保 API 端点 URL 正确，并验证您的请求正文格式是否正确。
+- **调试：** 使用 `console.log` 语句来调试您的函数并捕获 try-catch 块中的任何错误。
+- **API 速率限制：** 请注意可能适用于您使用 API 的任何速率限制，以避免被暂时阻止。
+
+## 📚 进一步阅读
+
+有关使用 TypeScript 与 API 集成以及处理流式响应的更多详细信息，请考虑探索有关 JavaScript/TypeScript 异步编程以及使用 Fetch API 的其他资源。
+
+我们希望本指南可以帮助您在项目中有效地利用 MoodHelper API。 祝您编码愉快，我们迫不及待地想看看您构建的内容！
diff --git a/content/docs/cn/getting-started.md b/content/docs/cn/getting-started.md
@@ -0,0 +1,52 @@
+---
+title: "开始使用"
+author: "D & W"
+---
+
+# 🚀 MoodHelper 入门
+
+欢迎来到 MoodHelper，它是您应对复杂情绪和生活挑战的最佳伴侣！ 🌈 无论您感到不知所措、需要一些建议，还是只是想分享您的想法，MoodHelper 都会在这里倾听您的每一步并为您提供支持。 让我们深入探讨如何充分利用 MoodHelper 体验。
+
+使用 MoodHelper 开始您的旅程就像馅饼一样简单，并且充满了可能性。 您可以按照以下方式开始：
+
+1. **访问 MoodHelper：** 只需打开您的网络浏览器并访问 MoodHelper URL。 您将看到一个友好的界面，准备开始对话。
+
+2. **发起对话：** 随意分享您的想法。 MoodHelper 旨在理解广泛的情绪和主题。 首先输入类似“我今天感觉有点焦虑”之类的内容，然后看看对话会将您引向何方。
+
+3. **探索您的情绪：** MoodHelper 可能会要求您详细说明或选择最能描述您当前心情的表情符号。 这不仅仅是要找到问题的根源；还要解决问题。 这是关于一起探索你们的情感世界。
+
+## 🌟 丰富的功能来增强您的体验
+
+MoodHelper 具有多种功能，旨在让您的互动既有用又愉快：
+
+- **核心同理心：** MoodHelper 以温暖人心的同理心开始每次对话，承认并验证您的感受。 这是一个安全的空间，每一种情感都受到尊重。
+
+- **动态对话流程：** 聊天机器人会适应您的对话方向，提供与您的具体情况产生共鸣的见解、建议和反思。
+
+- **实用提示和技巧：** 无论是管理压力、处理人际冲突，还是只是寻找放松的方法，MoodHelper 都会为您提供量身定制的可行建议。
+
+- **资源中心：** 发现精选的文章、视频和工具，以进一步支持您的情绪健康之旅。
+
+- **持续支持：** MoodHelper 鼓励您保持对话开放。 每当您需要有人倾诉时，请随时回来。 我们 24/7 都在这里。
+
+###🌱一起成长
+
+MoodHelper 不仅仅是克服当下的时刻； 这是关于个人成长和理解的。 每次互动都是一个更多了解自己并建立更强大的应对机制的机会。 反思所给出的建议，尝试新的策略，并观察你的适应能力如何增强。
+
+### 💬 互动元素带来更丰富的体验
+
+为了让您的聊天更具吸引力，MoodHelper 包含互动元素：
+
+- **表情符号选择：**通过表情符号表达您的感受。 这是一种有趣且直观的方式来传达您的心情，而不需要所有正确的词语。
+
+- **反馈循环：** 您的输入有助于 MoodHelper 的发展。 分享您对所提供建议的想法，并让我们知道什么对您有效。 您的反馈是我们持续改进的动力。
+
+### 📚 准备好后深入研究
+
+感到好奇吗？ MoodHelper 提供深入资源的链接，以便更深入地研究情绪健康主题。 从管理焦虑到建立自尊，总有更多东西可以按照您自己的节奏探索。
+
+## 💌 临别赠言
+
+请记住，MoodHelper 不仅仅是一个聊天机器人；它是一个帮助您管理情绪的聊天机器人。 它是您情感幸福之旅的伴侣。 每一次对话都是迈向理解、接受和成长的一步。 我们很高兴能成为您旅程的一部分，并迫不及待地想看看它会走向何方。
+
+感谢您选择 MoodHelper。 祝您更聪明、更有韧性！ 🌟
diff --git a/content/docs/cn/selfhosted/_dir.yml b/content/docs/cn/selfhosted/_dir.yml
@@ -0,0 +1,2 @@
+title: '自部署'
+navigation.icon: '☁️'
diff --git a/content/docs/cn/selfhosted/install-via-docker.md b/content/docs/cn/selfhosted/install-via-docker.md
@@ -0,0 +1,79 @@
+---
+title: "用Docker部署"
+author: "D & W"
+---
+
+# MoodHelper 聊天机器人安装指南
+
+欢迎使用 MoodHelper 安装指南！ 本页面将引导您完成使用 Docker 启动并运行您自己的 MoodHelper 实例的步骤，Docker 是一个功能强大的平台，可以帮助您轻松部署应用程序。 无论您是 IT 专业人士还是技术爱好者，这些说明都旨在帮助您轻松入门。
+
+## 🐳 Docker 安装概述
+
+Docker 是一组平台即服务产品，它使用操作系统级虚拟化以称为容器的包形式交付软件。 容器之间相互隔离，并捆绑自己的软件、库和配置文件； 他们可以通过明确的渠道相互沟通。 对于 MoodHelper，我们将使用 Docker 容器来封装其环境和依赖项，以便轻松跨不同系统进行部署。
+
+## 🚀 开始使用
+
+在开始安装之前，请确保您的系统上安装了 Docker。 如果没有，请访问 [官方 Docker 文档](https://docs.docker.com/get-docker/) 进行设置。 Docker 准备就绪后，您可以继续安装 MoodHelper。
+
+### 📦安装方法
+
+使用 Docker 部署 MoodHelper 有两种主要方法：
+
+1. **通过 Portainer 部署**（推荐给那些喜欢 GUI 方法的人）
+2. **Docker Pull & Up**（对于那些熟悉命令行的人）
+
+## 🌐 使用 Docker 部署 MoodHelper
+
+以下是这两种方法的分步指南：
+
+### 1. 通过 Portainer 部署
+
+Portainer 是一款多功能容器管理工具，可以通过用户友好的 Web 界面轻松部署和管理 Docker 容器。
+
+- **第 1 步：** 登录到您的 Portainer 仪表板。
+- **第 2 步：** 导航到“容器”部分，然后单击“添加容器”。
+- **第 3 步：** 在“图像”字段中，输入 `type32/moodhelper-nuxt:latest`。
+- **第 4 步：** 向下滚动到“Env”并添加上面列出的环境变量。
+- **第 5 步：** 将容器上的端口“3000”映射到主机上所需的端口。
+- **第 6 步：** 单击“部署容器”以启动您的 MoodHelper 实例。
+
+### 2. Docker 拉起
+
+对于那些喜欢命令行的人，请按照下列步骤操作：
+
+- **第 1 步：** 打开您的终端。
+- **第 2 步：** 通过运行以下命令拉取 MoodHelper 镜像：
+   ````
+   docker pull type32/moodhelper-nuxt：最新
+   ````
+- **步骤 3：** 使用必要的环境变量和端口映射启动容器：
+   ````
+   docker run -d -p YOUR_EXTERNAL_PORT_HERE:3000 \
+   -e NUXT_OPENAI_API_KEY=YOUR_OPENAI_API_KEY_HERE \
+   -e NUXT_PUBLIC_API_MODEL=YOUR_ENDPOINT_MODEL_NAME_HERE \
+   -e NUXT_PUBLIC_AI_ENDPOINT=您的_CUSTOM_ENDPOINT_HERE \
+   -e NUXT_PUBLIC_SITE_URL=您的网站的S_PUBLIC_URL \
+   -e NUXT_PUBLIC_SITE_NAME=您的网站的S_PUBLIC_NAME \
+   -e NUXT_API_RATE_LIMIT=50 \
+   -e NUXT_API_WINDOW_DURATION=15 \
+   --name mudhelper type32/moodhelper-nuxt:最新
+   ````
+
+如有必要，请将“YOUR_EXTERNAL_PORT_HERE”替换为您所需的端口映射。 确保您选择的端口已打开并且在您的网络上可用。
+
+## 🎉 恭喜！
+
+您已成功部署 MoodHelper！ 在 Web 浏览器中导航到“http://localhost:3000”（或您的自定义映射端口）以访问您的 MoodHelper 实例。
+
+### 🔧 故障排除
+
+如果您在安装过程中遇到任何问题，这里有一些提示：
+- 确保 Docker 正在您的系统上运行。
+- 检查您正在使用的端口是否尚未被使用。
+- 验证所有环境变量是否设置正确。
+
+### 📚 进一步帮助
+
+有关 Docker 及其命令的更多详细信息，请访问 [Docker 文档](https://docs.docker.com/)。 如果您需要 MoodHelper 的帮助或有任何疑问，请随时联系我们的支持团队。
+
+感谢您选择心情助手！ 我们很高兴您能与新的聊天机器人伴侣一起开始您的情感健康之旅。
diff --git a/content/docs/en/API/_dir.yml b/content/docs/en/API/_dir.yml
@@ -0,0 +1,2 @@
+title: 'API'
+navigation.icon: '📁'