diff --git a/package.json b/package.json
index 00210d5..592ab9c 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
     "dependencies": {
         "eslint": "^9.9.0",
         "eslint-plugin-vue": "^9.27.0",
+        "pyodide": "^0.26.2",
         "vue": "^3.4.37",
         "vue-router": "4"
     },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 775fd7a..fc915be 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,9 +14,9 @@ importers:
       eslint-plugin-vue:
         specifier: ^9.27.0
         version: 9.27.0(eslint@9.9.0)
-      rd-a:
-        specifier: 'file:'
-        version: file:(typescript@5.5.4)
+      pyodide:
+        specifier: ^0.26.2
+        version: 0.26.2
       vue:
         specifier: ^3.4.37
         version: 3.4.38(typescript@5.5.4)
@@ -729,12 +729,13 @@ packages:
     resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}
 
+  pyodide@0.26.2:
+    resolution: {integrity: sha512-8VCRdFX83gBsWs6XP2rhG8HMaB+JaVyyav4q/EMzoV8fXH8HN6T5IISC92SNma6i1DRA3SVXA61S1rJcB8efgA==}
+    engines: {node: '>=18.0.0'}
+
   queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
 
-  'rd-a@file:':
-    resolution: {directory: '', type: directory}
-
   resolve-from@4.0.0:
     resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
     engines: {node: '>=4'}
@@ -877,6 +878,18 @@ packages:
     resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
     engines: {node: '>=0.10.0'}
 
+  ws@8.18.0:
+    resolution: {integrity: sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==}
+    engines: {node: '>=10.0.0'}
+    peerDependencies:
+      bufferutil: ^4.0.1
+      utf-8-validate: '>=5.0.2'
+    peerDependenciesMeta:
+      bufferutil:
+        optional: true
+      utf-8-validate:
+        optional: true
+
   xml-name-validator@4.0.0:
     resolution: {integrity: sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==}
     engines: {node: '>=12'}
@@ -1515,18 +1528,14 @@ snapshots:
 
   punycode@2.3.1: {}
 
-  queue-microtask@1.2.3: {}
-
-  rd-a@file:(typescript@5.5.4):
+  pyodide@0.26.2:
     dependencies:
-      eslint: 9.9.0
-      eslint-plugin-vue: 9.27.0(eslint@9.9.0)
-      vue: 3.4.38(typescript@5.5.4)
-      vue-router: 4.4.3(vue@3.4.38(typescript@5.5.4))
+      ws: 8.18.0
     transitivePeerDependencies:
-      - jiti
-      - supports-color
-      - typescript
+      - bufferutil
+      - utf-8-validate
+
+  queue-microtask@1.2.3: {}
 
   resolve-from@4.0.0: {}
 
@@ -1650,6 +1659,8 @@ snapshots:
 
   word-wrap@1.2.5: {}
 
+  ws@8.18.0: {}
+
   xml-name-validator@4.0.0: {}
 
   yocto-queue@0.1.0: {}
diff --git a/public/micropip-0.6.0-py3-none-any.whl b/public/micropip-0.6.0-py3-none-any.whl
new file mode 100644
index 0000000..06d0c89
Binary files /dev/null and b/public/micropip-0.6.0-py3-none-any.whl differ
diff --git a/public/packaging-24.1-py3-none-any.whl b/public/packaging-24.1-py3-none-any.whl
new file mode 100644
index 0000000..7db6e56
Binary files /dev/null and b/public/packaging-24.1-py3-none-any.whl differ
diff --git a/src/router/router.ts b/src/router/router.ts
index c9225d6..60530db 100644
--- a/src/router/router.ts
+++ b/src/router/router.ts
@@ -13,6 +13,18 @@ const routes = [
     }, {
         path: '/source',
         component: () => import('@/views/source/source.vue')
+    }, {
+        path: '/tools',
+        children: [
+            {
+                path: 'acacia',
+                component: () => import('@/views/tools/AcaciaMCView.vue')
+            },
+            {
+                path: 'rssearch',
+                component: () => import('@/views/tools/RSSearchView.vue')
+            }
+        ]
     }
 ]
 
diff --git a/src/views/tools/AcaciaMCView.vue b/src/views/tools/AcaciaMCView.vue
new file mode 100644
index 0000000..b409338
--- /dev/null
+++ b/src/views/tools/AcaciaMCView.vue
@@ -0,0 +1,176 @@
+<script setup lang="ts">
+/**
+ * A demo of Redstone Search page.
+ *
+ * @component RDSerachView
+ * @description AcaciaMC Demo 页面
+ * @props ???
+ * @event ???
+ *
+ * know problems:
+ * - 真的应该用url-polyfill吗？
+ */
+
+import { ref, Ref, onMounted } from "vue";
+
+import { loadPyodide, PyodideInterface } from "pyodide";
+const pyodide: Ref<PyodideInterface | null> = ref(null);
+const micropip = ref(null);
+
+type OutputFile = { ["name"]: string, ["content"]: string };
+const sourceCode = ref("");
+const outputs: Ref<OutputFile[]> = ref([]);
+const errText = ref("");
+
+const pyEnvSetup = async () => {
+  const _pyodide = await loadPyodide();
+  // 神必东西自带的micropip自己装不了还要我手动装
+  await _pyodide.loadPackage("micropip-0.6.0-py3-none-any.whl");
+  await _pyodide.loadPackage("packaging-24.1-py3-none-any.whl");
+  const _micropip = _pyodide.pyimport("micropip");
+  await _micropip.install("acaciamc");
+  pyodide.value = _pyodide;
+  micropip.value = _micropip;
+}
+
+const compileAcacia = async () => {
+  const impl = async (sourceCode: string) => {
+    const _pyodide = pyodide.value;
+    if (!_pyodide) return { outs: [], err: "Pyodide not loaded" };
+    // const _micropip = micropip.value;
+    const srcPath = "src.aca";
+    const outDirPath = "build";
+    let outs: OutputFile[] = [];
+    let err = "";
+
+    // FS API Reference: https://emscripten.org/docs/api_reference/Filesystem-API.html?highlight=isfile#id2
+
+    // 将源代码写入文件, 并清空输出文件夹
+    _pyodide.FS.writeFile(srcPath, sourceCode);
+    _pyodide.runPython(`
+import shutil, os
+shutil.rmtree("${outDirPath}", ignore_errors=True)
+os.makedirs("${outDirPath}")
+  `);
+
+    // 运行 Acacia 编译器
+    let errStr = "";
+    _pyodide.setStderr({ batched: (text: string) => errStr += text });
+    try {
+      _pyodide.runPython(`
+from acaciamc import cli
+cli.run(cli.build_argparser().parse_args(["${srcPath}", "-o", "${outDirPath}"]))
+        `);
+      // 读取build文件夹下的所有文件（深层）
+      outs = await _pyodide.runPythonAsync(`
+import os
+outs = []
+os.chdir("${outDirPath}")
+for root, dirs, files in os.walk("."):
+  for file in files:
+    with open(os.path.join(root, file), 'r') as f:
+      content = f.read()
+      file_path = os.path.join(root, file)
+      if file_path.startswith("./"):
+        file_path = file_path[2:]
+      outs.append({"name": file_path, "content": content})
+outs
+      `).then((outs) => outs.toJs());
+    } catch (e: any) {
+      if (errStr) e = errStr;
+      err = e;
+    }
+    return { outs: outs, err: err };
+  }
+  const {outs, err} = await impl(sourceCode.value);
+  if(err) console.error(err); 
+  errText.value = err.toString();
+  outputs.value = outs;
+};
+
+onMounted(() =>
+  Promise.all([
+    pyEnvSetup(),
+  ]),
+);
+</script>
+
+<template>
+  <div id="page">
+    <h1>在线Acacia编译器 demo</h1>
+    <div id="container" v-if="pyodide != null">
+      <a href="https://github.com/CBerJun/AcaciaMC">{{"https://github.com/CBerJun/AcaciaMC"}} 原作者: CBerJun</a>
+      <h2>源代码</h2>
+      <textarea id="source-code" v-model="sourceCode" rows="15" cols="60"></textarea>
+      <button @click="compileAcacia">编译</button>
+      <div class="output" v-for="output in outputs">
+        <h2>{{ output.name }}</h2>
+        <pre>{{ output.content }}</pre>
+      </div>
+      <pre class="error" v-if="errText">{{ errText }}</pre>
+    </div>
+    <div v-else>
+      <h2>正在加载...</h2>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+#page {
+  width: 100vw;
+  height: 100vh;
+  overflow-y: scroll;
+  color: white;
+  background: #202020;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+  Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+}
+
+#container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+}
+
+#container a {
+  color: white;
+}
+
+#source-code {
+  font-size: 1.2em;
+}
+
+.output {
+  width: 50%;
+  min-width: 300px;
+}
+
+/* 
+.output h2{
+  background: black;
+} */
+
+.output pre{
+  font-size: 1em;
+  background: black;
+  width: 100%;
+  min-height: 40vh;
+}
+
+.error {
+  font-size: 1em;
+  background: #220000;
+  color: red;
+  padding: 20px;
+  border: 2px solid #833;
+  border-radius: 10px;
+}
+</style>
diff --git a/src/views/tools/RSSearchView.vue b/src/views/tools/RSSearchView.vue
new file mode 100644
index 0000000..690c231
--- /dev/null
+++ b/src/views/tools/RSSearchView.vue
@@ -0,0 +1,193 @@
+<script setup lang="ts">
+/**
+ * A demo of Redstone Search page.
+ *
+ * @component RDSerachView
+ * @description 红石图寻 Demo 页面
+ * @props {string} text - The text to be displayed on the button.
+ * @event click - Triggered when the button is clicked.
+ *
+ * know problems:
+ * - 真的应该用url-polyfill吗？
+ */
+
+import { Ref, ref, onMounted } from "vue";
+
+// TODO: Awaiting for globalConfig injection
+// const { API_URL: api_base_str = "/api/" } = inject("globalConfig");
+const apiBaseStr = "https://api.rsdaily.com/v2/";
+
+// API URLs
+const apiBaseUrl = new URL("redstonesearch/", apiBaseStr);
+const apiNewQuizUrl = new URL("newquiz", apiBaseUrl);
+const apiQuizImgUrl = new URL("quizimg", apiBaseUrl);
+const apiQuizCheckUrl = new URL("quizcheck", apiBaseUrl);
+
+// API endpoint functions
+const apiFetchNewQuiz = async () => {
+  const url = new URL(apiNewQuizUrl);
+  url.searchParams.set("t", Date.now().toString());
+  return (
+    fetch(url)
+      .then((res) => res.json())
+      .then((data) => data.id) || null
+  );
+};
+
+const apiFetchQuizImage = async (quiz_id: string) => {
+  const url = new URL(apiQuizImgUrl);
+  url.searchParams.set("id", quiz_id);
+  return fetch(url).then((res) => res.blob()) || null;
+};
+
+const apiCheckAnswer = async (quiz_id: string, ans_link: string) => {
+  const url = new URL(apiQuizCheckUrl);
+  url.searchParams.set("id", quiz_id);
+  url.searchParams.set("ans", ans_link);
+  return (
+    fetch(url)
+      .then((res) => res.json())
+      .then((data) => data.score) || null
+  );
+};
+
+// refs
+const quiz_id: Ref<string | null> = ref(null);
+const quiz_img: Ref<string | null> = ref(null);
+const ans_link = ref("");
+const score = ref(0);
+
+// async status
+const AsyncStatus = Object.freeze({
+  notInited: Symbol("notInited"),
+  inProgress: Symbol("in_progress"),
+  done: Symbol("done"),
+  error: Symbol("error"),
+});
+
+// init a new quiz
+const loadingStatus = ref(AsyncStatus.notInited);
+const newQuiz = async () => {
+  loadingStatus.value = AsyncStatus.inProgress;
+
+  const res = await (async () => {
+    const id = await apiFetchNewQuiz();
+    if (id == null) return false;
+
+    const img_blob = await apiFetchQuizImage(id);
+    if (img_blob == null) return false;
+
+    quiz_id.value = id;
+    quiz_img.value = URL.createObjectURL(img_blob);
+    return true;
+  })();
+
+  loadingStatus.value = res ? AsyncStatus.done : AsyncStatus.error;
+};
+
+// check a quiz
+const checkingStatus = ref(AsyncStatus.notInited);
+const check = async () => {
+  if (loadingStatus.value != AsyncStatus.done || quiz_id.value === null)
+    return;
+  checkingStatus.value = AsyncStatus.inProgress;
+  const checked_score = await apiCheckAnswer(quiz_id.value, ans_link.value);
+  if (checked_score >= 0 && checked_score <= 100) {
+    score.value = checked_score;
+    checkingStatus.value = AsyncStatus.done;
+  } else {
+    checkingStatus.value = AsyncStatus.error;
+  }
+};
+
+// init
+onMounted(newQuiz);
+</script>
+
+<template>
+  <div id="page">
+    <div id="container">
+      <h1>红石图寻 demo</h1>
+      <p>API URL: {{ apiBaseUrl }}</p>
+      <img class="quiz-img" v-if="quiz_img" :src="quiz_img" />
+      <div class="bar">
+        <span>{{ `相似度：${score}%` }}</span>
+        <button @click="newQuiz">
+          {{
+            (() => {
+              switch (loadingStatus) {
+                case AsyncStatus.inProgress:
+                  return "Loading...";
+                case AsyncStatus.error:
+                  return "Error";
+                default:
+                  return "New";
+              }
+            })()
+          }}
+        </button>
+      </div>
+      <div class="bar">
+        <input v-bind:value="ans_link" />
+        <button @click="check">
+          {{
+            (() => {
+              switch (checkingStatus) {
+                case AsyncStatus.inProgress:
+                  return "Checking...";
+                case AsyncStatus.error:
+                  return "Error";
+                default:
+                  return "Check";
+              }
+            })()
+          }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+#page {
+  width: 100%;
+  height: 100%;
+  overflow-y: scroll;
+}
+
+#container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+}
+
+.quiz-img {
+  width: 50vw;
+}
+
+.bar {
+  width: 50vw;
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  gap: 10px;
+  height: 30px;
+}
+
+.bar :first-child {
+  flex-grow: 1;
+}
+
+.bar button {
+  background: #505050;
+  border-radius: 5px;
+  border: 1px solid #a0a0a0;
+  color: white;
+}
+
+.bar button :hover {
+  background: #404040;
+  color: #f0f0f0;
+}
+</style>
diff --git a/vite.config.ts b/vite.config.ts
index 2fb3bb3..690b01c 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,9 +1,34 @@
+import { copyFile, mkdir } from "fs/promises";
+import { join } from "path";
+
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import path from 'path'
 
 export default defineConfig({
-  plugins: [vue()],
+  optimizeDeps: { exclude: ["pyodide"] }, // For Pyodide
+  plugins: [
+    { // For Pyodide
+      name: "vite-plugin-pyodide",
+      generateBundle: async () => {
+        const assetsDir = "dist/assets";
+        await mkdir(assetsDir, { recursive: true });
+        const files = [
+          "pyodide-lock.json",
+          "pyodide.asm.js",
+          "pyodide.asm.wasm",
+          "python_stdlib.zip",
+        ];
+        for (const file of files) {
+          await copyFile(
+            join("node_modules/pyodide", file),
+            join(assetsDir, file)
+          );
+        }
+      },
+    },
+    vue(),
+  ],  
   resolve: {
     alias: {
       '@': path.resolve(__dirname, './src'),