diff --git a/README-en.md b/README-en.md deleted file mode 100644 index 2a879fc..0000000 --- a/README-en.md +++ /dev/null @@ -1,62 +0,0 @@ -# 🤖 Memebot: Discord Meme Management System - -Memebot is a project that combines a **Discord Bot** and a **Web Frontend interface** to provide an efficient and customizable platform for community members to store, manage, and use their meme images. - -## 🎯 Project Goals - -* Provide an efficient Discord bot implemented in **Go** that can trigger meme output based on keywords. -* Build a **React + TypeScript** driven web interface to facilitate users in viewing, uploading, and managing memes and their custom aliases. -* Implement a **Many-to-Many** relationship model: one image can have multiple aliases, and one alias can also correspond to multiple images. - ---- - -## 🏗️ System Architecture (Topology) - -The project utilizes a microservice concept, dividing the functionality into three main components: the Discord Bot, the Web Backend (API), and the Web Frontend, all interacting with a shared Database/Storage. - -
-    -
- - ---- - -## 🤖 Discord Bot Features - -The bot is responsible for two main functions: image management and automated responses. - -### 1. Image Trigger and Response - -* **Trigger Mechanism:** The bot monitors chat messages. Once it detects that the message content contains any pre-defined **Alias**, it triggers a response. -* **Matching Algorithm:** For high-efficiency, real-time matching across a large set of aliases, we will use the **Aho-Corasick algorithm**. -* **Output Logic:** If the alias `` is matched, the bot will **randomly select** and send one image associated with that `` to the channel. - -### 2. Discord Commands (Slash Commands) - -| Command | Description | -| :--- | :--- | -| `/image upload` | Uploads an image. **Must include an image attachment** (JPG/PNG/GIF). The bot generates a unique **Image ID** (e.g., `670bc00e94fd77cf6852afc7`) and stores it. | -| `/image link alias: image: ` | Adds or links an `` to the specified ``. | - ---- - -## 🌐 Web Frontend Interface - -The interface is built using **React + TypeScript** with **Tailwind CSS** to provide a user-friendly, visual management tool that is more convenient than using Discord commands alone. - -### Page Layout and Functions - -* **Navbar:** Displays the Bot's name on the left and contains **[Upload Image]** and **[Login]** buttons on the right. -* **Left Sidebar:** Serves as a **Table of Contents** for all **Aliases**. The last entry is for "**Images without aliases**". -* **Search Bar:** Located at the top of the right content area, featuring **real-time feedback** search functionality. -* **Content Area:** Displays image thumbnails grouped by their corresponding Alias. - -### 1. 🔎 View and Management (Find) - -* **Image Preview:** Clicking any image thumbnail will open a **floating window (Modal)**. -* **Image Information:** The modal will display the image, its uploader, upload time, and all associated Aliases. -* **Editing Features:** Users can edit Aliases or delete the image from this modal (login required). - -### 2. ⬆️ Upload Image - -Clicking the **[Upload Image]** button opens a modal for submission: \ No newline at end of file diff --git a/README.md b/README.md index a52ef4c..0f43930 100644 --- a/README.md +++ b/README.md @@ -1,104 +1,9 @@ -{%hackmd @penguin71630/theme %} +# Meme Bot Frontend -# Go Final Project - -主題：Discord 機器人，功能是存放一些梗圖，然後讓 Discord user 可以自行新增圖片、自定義 alias、根據 alias 叫出圖片。 - -除了 Discord bot 之外，還會有一個前端的網頁可以方便使用者查看、編輯這些圖片。 - - - -## Topology -
- -
- - -## Discord Bot Command (Draft) - -圖片與 alias 的對應：多對多，一張圖片可以有很多 aliases，一個 alias 也可以對應到很多張圖片。 - -輸出圖片是被動觸發的：只要在使用者的聊天訊息偵測到特定關鍵詞（聊天訊息包含任意一個 alias，以第一個匹配成功的為主，匹配方式我們打算使用 Aho-Corasick algorithm 因為我們準備 ICPC 的時候學過），假設該 alias 是 ``，bot 會從含有該 `` 的圖片隨機挑選一個輸出。 - -在 Discord 對話框輸入 `/image upload` 並附上一個圖片檔（可以是 JPG/PNG/GIF），bot 會為這張圖片生成隨機一個唯一的 ID（例：`670bc00e94fd77cf6852afc7`），並將這個圖片存在 Database。 - -在 Discord 對話框輸入 `/image link alias: image: `，會為該圖片新增一個 alias。 - - - -## Web Backend API (Draft) - -- `GET /api/image/`：取得某張圖片檔案。 -- `GET /api/image-list`：列出 db 內所有圖片檔案名稱。 -- `GET /api/alias-list`：列出 db 內所有 alias。 -- `/auth/gen-access-url`：預計使用 token-JWT exchange based authentication 來作為使用後端 API 的身分驗證。 - -其實應該還要有很多，還沒想清楚。 - - -## Web Frontend - -除了 Discord bot 之外，預計用 React + TypeScript（CSS 用 Tailwind）寫一個前端網頁。 - -前端網頁大概長這樣： -``` -Memebot [Upload-Image] [Login] ---------------------------------------------------------------- -[ sadge ] ( Search Bar ) -[ 不要吼我啦 ] -[ 什麼都願意做 ] Alias: 什麼都願意做 -[ 好時代來臨力 ] [ 方形圖片框1 ] [ 方形圖片框2 ] [ 方形圖片框3 ] -[ 野獸 ] [ 方形圖片框4 ] -[ poop ] -[ rrrrr ] Alias: 好時代來臨力 -[ 讓我看看 ] [ 方形圖片框1 ] [ 方形圖片框2 ] -[ 我愛慕虛榮啦 ] -[ 一輩子 ] Alias: 野獸 -[ 是又怎樣 ] [ 方形圖片框1 ] [ 方形圖片框2 ] [ 方形圖片框3 ] -[ Img w/o alias ] -``` - -上方是 Navbar： -- Navbar 左側是我們的 Bot 名稱。 -- Navbar 右側是功能按鈕，目前只有 Upload Image、Login。 - -### Find - -- 左側 sidebar 是所有 aliases 的 table of content。類似 HackMD、mdBook 瀏覽某篇文章的功能。 - - 最後一列是「尚未有暱稱的圖片」。 -- 右側緊接在 Navbar 底下是 search bar - - search bar 是即時反饋，使用者不需要按 enter 就會自動列出符合當前條件的圖片們。 -- 右側在 search bar 下方是各個 alias 對應的圖片們。 - - 點一下圖片之後，會跳出一個浮動視窗，顯示這張圖片以及圖片相關資訊（包含誰upload 這張圖片、什麼時候 upload 這張圖片、alias 有哪些），以及可以在這裡編輯 alias、刪除圖片。 - -### Upload Image - -使用者按下這個按鈕之後，跳出一個浮動視窗： - -``` -====================================== -| |--------------------------------| | -| | | | -| | | | -| | Drag your image here | | -| | | | -| | | | -| |--------------------------------| | -| | -| Aliases of this image: | -| [ alias_01 ] | -| [ alias_02 ] | -| [+] [ (Add a new alias) ] | -| | -| | -====================================== -``` - -### Login - -驗證當前操作前端的 Discord User，未登入的話只能使用查看相關的操作，不能編輯、上傳、刪除。 - -這個有空再來做。 +2025 Golang Final Project +https://hackmd.io/@penguin71630/go-final-project +Note: +- View API document: `make viewapi`