donald f703d9c7c2 feat: Add comprehensive UI/UX preview page (Phase 3)
Created preview.html with 4 main sections:

1. 5 Why Analysis Tool Interface
   - Input forms for Finding and Job Content
   - Multi-language selection (7 languages)
   - Sample 3-perspective analysis results
   - Interactive guidelines section

2. Analysis History Page
   - Sortable data table with filters
   - CSV import/export buttons
   - Pagination controls
   - Search and date filtering

3. Admin Dashboard
   - Statistics overview (4 key metrics)
   - User management table with CRUD operations
   - LLM API configuration interface
   - System settings panel
   - Audit logs viewer

4. Login Page
   - Modern gradient design
   - Remember me function
   - Forgot password link

Features:
- Fully responsive design
- Tailwind CSS styling
- Tab-based navigation
- Interactive elements
- Color-coded status indicators
- Professional UI/UX

Ready for user approval before Phase 4 development.

🤖 Generated with Claude Code
Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-05 18:41:11 +08:00

5 Why 根因分析器

這是一個基於 5 Why 方法論的根因分析工具,使用 Ollama API (qwen2.5:3b 模型) 進行智能分析。

功能特點

  • 使用 5 Why 方法進行深度根因分析
  • 從三個不同角度進行分析(流程面、系統面、管理面等)
  • 支援多語言輸出(繁中、簡中、英文、日文、韓文、越南文、泰文)
  • 提供執行要項指南
  • 邏輯雙向檢核
  • 產出永久性對策建議

技術架構

後端

  • Node.js + Express
  • Ollama API 整合
  • API URL: https://ollama_pjapi.theaken.com
  • 模型: qwen2.5:3b

前端

  • React 18
  • Vite
  • Tailwind CSS
  • 響應式設計

安裝與執行

1. 安裝依賴

npm install

2. 啟動應用(同時啟動前端和後端)

npm run dev

這會同時啟動:

3. 單獨啟動

如果需要單獨啟動:

# 只啟動後端
npm run server

# 只啟動前端
npm run client

4. 生產環境建置

npm run build

使用說明

  1. 填寫「Finding」具體描述問題現象使用 5W1H
  2. 填寫「工作內容」:說明您的職責範圍
  3. 選擇輸出語言
  4. 點擊「Find My 5 Why」進行分析
  5. 查看三個不同角度的分析結果
  6. 可以使用翻譯功能切換不同語言

API 端點

後端 API

  • GET /health - 健康檢查
  • GET /api/models - 列出可用的 Ollama 模型
  • POST /api/analyze - 執行 5 Why 分析
  • POST /api/translate - 翻譯分析結果

請求範例

// 分析請求
fetch('http://localhost:3001/api/analyze', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ prompt: '您的分析提示...' })
})

專案結構

5why/
├── server.js              # Express 後端服務器
├── package.json           # 專案配置
├── vite.config.js         # Vite 配置
├── tailwind.config.js     # Tailwind CSS 配置
├── postcss.config.js      # PostCSS 配置
├── index.html             # HTML 入口
└── src/
    ├── main.jsx           # React 入口
    ├── App.jsx            # 主應用組件
    ├── FiveWhyAnalyzer.jsx # 5 Why 分析器組件
    └── index.css          # 全局樣式

注意事項

  1. 確保 Ollama API 服務可用
  2. 後端服務必須先啟動才能進行分析
  3. 建議使用 Chrome 或 Firefox 瀏覽器以獲得最佳體驗
  4. 分析時間可能需要 30-60 秒,請耐心等待

環境要求

  • Node.js 16+
  • npm 或 yarn
  • 現代瀏覽器(支援 ES6+

授權

MIT License

Description
5 Why Root Cause Analysis Tool with Ollama API Integration
Readme 295 KiB
Languages
JavaScript 82.4%
HTML 12.6%
Python 4.4%
Batchfile 0.5%
CSS 0.1%