PlainAdmin - Free Vanilla JS Bootstrap 5 Admin Dashboard Template

PlainAdmin is a free and open-source Vanilla JS admin dashboard template based on Bootstrap 5 that comes with 5 unique dashboard variations, 300+ essential dashboard components, pages, UI elements, charts, graphs, application UI pages, and more. to provide everything you need to build a data-rich backend or admin panel for almost any sort of web app.

🚀 View Demo

✨ Visit Website

⬇️ Download Now

📄 Documentation/Installation

⚡ PRO Version

It comes with a minimal UI design that suits almost any kind of web project and offers the best possible user experience. PlainAdmin comes with SCSS files, an organized codebase, gulp support for efficient workflow, rich documentation, and everything else that you can expect from a modern admin template.

PlainAdmin is built with vanilla Javascript (no jQuery), Bootstrap 5 and the simplest possible way to make it easy to maintain and easy to port your back-end projects.

👉 Check out our Admin Template for Tailwind CSS

If you are looking for a high-quality free admin template that comes with all essential dashboard components and features then, PlainAdmin is the perfect choice for you.

📄 Documentation

• Installation
• Quick Start
• Layout and Theme
• Colors
• Alerts
• Buttons
• Cards
• Tabs
• Forms
• Icons
• Tables
• Credits

Update Logs - 2.0 :

• Rebranded the entire template.
• Updated the style guide
• The sidebar menu icons have been updated.
• The overall design of the sidebar has been enhanced.
• The header menu icons have been updated.
• The design of the header dropdown has been updated.
• Additional buttons have been added to the Button Page.
• Updated essential dependencies
• The charts code has been adjusted to accommodate the updated version.
• UX and UI enhancements

Update Logs - 1.2 :

• Added Kanban (App) [PRO]
• Added File Manager (App) [PRO]
• Dependencies updated
• FullCalender updated

Update Logs - 1.1.2 :

• FullCalender updated
• Dependencies updates

Update Logs - 1.1.1 :

• Updated to v5.1.3 (Latest)
• Fixed minor bugs
• Changed primary color
• Multiple sidebar variations
• Improved UX
• Optimized codebase

Update Logs - 1.1 :

• Updated to Bootstrap 5.1.1
• Fixed minor bugs
• Enhanced the UI and Improved Typography

拼音發音評估系統

這是一個使用真實語音識別技術的拼音發音評估系統，可以準確評估用戶的普通話發音。

系統架構

系統由三部分組成：

1. 前端 HTML/JavaScript（已集成到 pinyin_course_advanced.html）
2. PHP 代理服務（sql/speech_integration.php）
3. Python 語音識別 API（speech_recognition_api.py）

安裝步驟

1. 安裝 Python 依賴

pip install -r requirements.txt

Windows 用戶注意事項：安裝 PyAudio 可能需要先安裝 Microsoft Visual C++ 14.0 或更高版本。也可以直接下載編譯好的 wheel 文件：

pip install https://download.lfd.uci.edu/pythonlibs/archived/PyAudio-0.2.11-cp39-cp39-win_amd64.whl

（根據您的 Python 版本選擇對應的 wheel 文件）

2. 啟動 Python API 服務

python speech_recognition_api.py

服務將在 http://localhost:5000 上運行，提供 /api/recognize 端點。

3. 配置 PHP

確保 PHP 已安裝 cURL 擴展。

4. 修改前端

已經將語音識別整合到 pinyin_course_advanced.html，發音評估將使用真實的語音識別技術。

API 文檔

語音識別 API

端點: http://localhost:5000/api/recognize

方法: POST

請求格式:

{
  "audio_data": "base64編碼的音頻數據",
  "target_texts": [
    {
      "text": "目標漢字文本",
      "pinyin": "目標拼音"
    }
  ],
  "language": "zh-TW"
}

響應格式:

{
  "success": true,
  "message": "識別成功",
  "data": {
    "accuracy": 85,
    "recognized_text": "識別出的文本",
    "details": [
      {
        "text": "目標文本",
        "pinyin": "拼音",
        "score": 85,
        "correct": true,
        "feedback": "發音良好，可以再注意一下聲調。",
        "details": {
          "accuracy": 85,
          "text_similarity": 90,
          "pinyin_similarity": 75,
          "recognized_text": "識別出的文本"
        }
      }
    ]
  }
}

故障排除

1. Python API 服務無法啟動

   • 檢查依賴庫是否安裝正確
   • 檢查端口 5000 是否被佔用

2. 語音識別失敗

   • 確保麥克風工作正常
   • 檢查音頻格式是否為 WAV
   • 確保錄音音量足夠大
   • 檢查網絡連接（語音識別使用 Google API）

3. PHP 無法連接到 Python API

   • 確保 Python API 服務正在運行
   • 檢查 URL 是否正確
   • 確保防火牆未阻止連接

注意事項

• 語音識別需要互聯網連接，因為使用了 Google 語音識別 API
• 錄音質量直接影響識別結果
• 評估結果的準確性取決於語音識別的準確性