| AIGC |
|
|---|
🌐 Live Demo: https://weed33834.github.io/echo/ 📦 GitHub: https://github.com/weed33834/echo 📦 GitCode (canonical): https://gitcode.com/badhope/echo
Echo is not fortune-telling software. It is a hypothesis verification tool.
The results you get from BaZi, ZiWei, or LiuYao divination are essentially predictions. What Echo does is simple: it helps you record these predictions, set verification timepoints, and return later to review whether they came true. Over time, your "destiny credibility" accumulates, and you can see which system works better for you.
Core loop:
flowchart LR
A[🔮 Set Node<br/>设节点] --> B[⏳ Await Echo<br/>等回响]
B --> C[📖 Review<br/>复盘]
C -->|Match × 30 XP<br/>+ credibility| A
style A fill:#D4AF37,color:#1a1408
style B fill:#1A1A1A,color:#E8E6E3,stroke:#D4AF37
style C fill:#1A1A1A,color:#E8E6E3,stroke:#D4AF37
All divination results are visual representations of cultural algorithms and do not constitute any decision-making basis.
A complete round-trip takes about 3 minutes. Follow the loop Set → Await → Review.
- Open Me → Profile, enter your birth date & time.
- Echo derives your Day Master (日主) and the five-element distribution.
- This unlocks personalized advice everywhere (Dashboard, Graph, Compass).
- Go to Tools, pick one of the 18 engines (e.g. BaZi, LiuYao, Tarot).
- Fill the input form (mostly auto-filled from your profile).
- Tap Calculate → the result renders with a structured breakdown.
- On the result page, tap "Set verification" (设印证).
- Choose a future date when the prediction should manifest.
- Echo stores it as an assumption in your Echo Center.
sequenceDiagram
participant U as User
participant P as Tool Page
participant S as echo Store
participant E as Engine
U->>P: Fill inputConfig
P->>S: dispatch runTool(key, input)
S->>E: engines[key].calc(input)
E-->>S: rawResult
S-->>P: normalized result
U->>S: setVerification(date, claim)
S->>S: store assumption
- When the date arrives, open Echo Center.
- Mark the assumption 应验 (hit) or 未应验 (miss).
- Your Destiny Level rises and credibility stats update.
- Open Chat, configure a model in Settings → AI.
- Ask anything; the AI can call the 18 tools for you and search the web.
- Especially useful for cross-referencing multiple systems.
| Category | Tool | Description |
|---|---|---|
| Destiny | BaZi (八字) | Four pillars, day master, ten gods, luck cycles |
| Destiny | ZiWei (紫微) | 12 palaces, star transformations |
| Destiny | QiMen (奇门) | Nine-palace time board, eight gates |
| Destiny | LiuRen (六壬) | Four lessons, three transmissions |
| Divination | LiuYao (六爻) | Coin toss hexagram, six relations |
| Divination | MeiHua (梅花) | Time-based hexagram, ti-yong analysis |
| Divination | YaoQian (摇钱) | 64 hexagrams coin method (shake-to-divine) |
| Health | ZiWu (子午) | 12-hour meridian flow |
| Health | JieQi (节气) | Seasonal wellness, solar term guidance |
| Daily | HuangLi (黄历) | Daily auspicious/inauspicious, conflicts |
| Daily | JiRi (择吉日) | Event date selection |
| Daily | YunShi (运势) | Personalized daily fortune |
| Western | Astrology | Chart big three, planetary aspects |
| Western | Mayan Calendar | 260 kin, galactic tones |
| Western | Tarot | Major Arcana three-card spread |
| Western | Dream Interpretation | Dream keyword analysis |
| FengShui | FengShui Layout | Nine-palace flying stars |
| FengShui | Nameology | Three talents, five grids, 81 numbers |
- Supports DeepSeek / OpenAI / Claude / Qwen / Ollama local models
- Tool calling: AI can invoke 18 divination tools
- Web search: Tavily API integration for real-time information
- Security sandbox: parameter validation, timeout control, injection detection
- Knowledge retrieval: fortune-telling knowledge base + solar term awareness + few-shot examples
- Five elements radar chart (ECharts): metal/wood/water/fire/earth distribution
- Ten gods bar chart: strength comparison
- Seven-day fortune line chart + auspicious/inauspicious pie chart
- Five elements interaction network
- Daily advice matrix: diet / lifestyle / exercise / emotion
- Divination timeline: history visualization
- Tool usage statistics
- Luck cycles: ten-year major luck and annual flow
- SVG relationship network: center node + element nodes + tool nodes
- Interactive nodes: click elements for wellness advice
- Verification statistics and destiny level visualization
- Onboarding: 3-step guided tour for first-time visitors
- Particle starfield background (Canvas)
- Daily check-in + streak milestones
- Compatibility matching: dual BaZi comparison
- Share cards: Canvas poster generation
- Shake-to-divine: phone shake interaction
- Three-theme switching (XuanYe dark / Xuan paper light / auto by time of day)
- Font size scaling (compact / standard / relaxed)
- Fully responsive: 320px mobile → 4K display
Echo follows a layered, store-centric architecture. All UI reads/writes through Pinia; engines are pure functions with zero side effects.
flowchart TB
subgraph Presentation["Presentation Layer · 表现层"]
P1[Pages · 16 routes]
P2[EchoUI Components]
P3[ParticleBackground · Canvas]
end
subgraph State["State Layer · 状态层"]
S1[(Pinia Stores<br/>echo.js · chat.js)]
end
subgraph Service["Service Layer · 服务层"]
V1[ai.js · Multi-model SSE]
V2[tools.js · Scheduler]
V3[sandbox.js · Security]
V4[webSearch.js · Tavily]
end
subgraph Engine["Engine Layer · 引擎层"]
E1[engines.js · 18 pure fns]
E2[ResultRenderers]
end
P1 --> S1
P2 --> S1
S1 --> V2
V2 --> E1
E1 --> E2
E2 --> P1
V1 --> V3
V3 --> V1
P1 --> V1
src/
├── main.js # App entry
├── router/index.js # Router (Hash mode)
├── stores/
│ ├── echo.js # Destiny/history/profile/tools store
│ └── chat.js # AI chat/model config store
├── services/
│ ├── ai.js # Multi-model AI service (SSE streaming)
│ ├── tools.js # Tool scheduling and execution
│ ├── sandbox.js # Security sandbox
│ ├── webSearch.js # Tavily web search
│ ├── fortune.js # Fortune calculation service
│ └── notifications.js # Reminders and notifications
├── prompts/
│ └── system.js # System prompts/Few-shot/knowledge base
├── utils/
│ ├── engines.js # 18 divination engines (pure functions)
│ └── shareUtils.js # Share card poster generation
├── composables/
│ └── useShake.js # Shake detection composable
├── components/ # Base UI + feature components
├── pages/ # 16 route pages
├── mobile/ # Independent mobile subtree (/m/*)
└── designs/ # Design system (tokens v5 + themes)
Every engine implements the same shape, so adding a new one is a 3-step change:
// utils/engines.js
export const BAZI = {
inputConfig: { year: 'number', month: 'number', day: 'number', hour: 'number' },
calc(input) { /* pure → returns { result, wuxing, ... } */ }
}mindmap
root((Echo Stack))
Vue 3.5
JSX
Composition API
Pinia 4
Vue Router 5
Hash mode
Vite 8
ECharts 6
vue-echarts
Node 22
| Tech | Version | Purpose |
|---|---|---|
| Vue 3 | 3.5 | Framework (JSX + Composition API) |
| Pinia | 4.0 | State management |
| Vue Router | 5.2 | Routing (Hash mode) |
| Vite | 8.1 | Build tool |
| ECharts | 6.1 | Data visualization (radar/bar/line/pie) |
| vue-echarts | 8.0 | ECharts Vue 3 integration |
Self-implemented modules: Markdown renderer, SVG relationship network, Toast/Modal/Progress — no third-party UI library required.
Prerequisites: Node.js ≥ 22 (see
.nvmrc), npm ≥ 9
# Clone repository
git clone https://gitcode.com/badhope/echo.git
cd echo
# Install dependencies
npm install
# (Optional) Configure environment variables
cp .env.example .env # Fill in your API keys, or configure in-app Settings page
# Start dev server
npm run dev
# Build for production
npm run build
# Preview build
npm run previewOpen http://localhost:5173 in your browser.
- Go to the "Settings" page
- Enter your API Key in the "AI Chat" section
- Or enable "Use default model" for placeholder responses
- Supported providers: DeepSeek / OpenAI / Claude / Qwen / Ollama
Access #/admin for the admin panel (set a password in system config on first use).
Features: model management (preset/custom CRUD), prompt management, usage statistics, system config.
| Breakpoint | Scenario | Strategy |
|---|---|---|
| ≤480px | Mobile | Bottom TabBar, single column |
| 481-767px | Large phone | Two-column grid, compact spacing |
| 768-1023px | Tablet | Side navigation, dual panels |
| 1024-1279px | Small desktop | Side nav, three-column grid |
| 1280-1439px | Standard desktop | Five-column grid |
| ≥1440px | Wide / 4K | Max-width container, generous whitespace |
The five-element interaction (生克) underlies most engines and visualizations:
flowchart LR
木 -->|生 generates| 火
火 -->|生| 土
土 -->|生| 金
金 -->|生| 水
水 -->|生| 木
木 -.->|克 controls| 土
土 -.->|克| 水
水 -.->|克| 火
火 -.->|克| 金
金 -.->|克| 木
style 木 fill:#4A7C59,color:#fff
style 火 fill:#C44536,color:#fff
style 土 fill:#9B8568,color:#fff
style 金 fill:#C4B998,color:#1a1408
style 水 fill:#4A6FA5,color:#fff
Every external input is treated as untrusted data. The sandbox wraps both tool calls and AI output:
flowchart TD
A[User Input] --> B[sanitizeInput]
B --> C[detectInjection]
C --> D[AI]
D -->|tool call| E[validateArgs]
E --> F[executeWithTimeout]
F --> G[sanitizeToolResult]
G --> D
D -->|output| H[validateOutput]
H --> I[append safety notice]
| Level | Title | XP Threshold |
|---|---|---|
| 1 | Initiate | 0 |
| 2 | Gradual Awakening | 50 |
| 3 | Enlightenment | 200 |
| 4 | Profound | 500 |
| 5 | Clear Insight | 1,000 |
| 6 | Knowing Destiny | 2,000 |
| 7 | Deep Sight | 3,500 |
| 8 | True Nature | 5,000 |
| 9 | Reaching Truth | 6,500 |
| 10 | Harmony | 8,000 |
| 11 | Heavenly Revelation | 10,000 |
XP = match score × 30 + 10 (weighted by review match), check-in +5, guide completion +20
| Document | Description |
|---|---|
| SPEC.md | Technical spec (architecture / engines / design system / security) |
| CHANGELOG.md | Changelog |
| CONTRIBUTING.md | Contributing guide (dev setup / code style / commit conventions) |
| SECURITY.md | Security policy (vulnerability reporting / sandbox / guardrails) |
| .env.example | Environment variable template |
Issues and Pull Requests are welcome. Read CONTRIBUTING.md for development guidelines.
Adding a new divination engine takes 3 steps:
- Implement
{ inputConfig, calc }structure inengines.js - Register tool metadata in
TOOLSarray inecho.js - Associate engine in
ENGINESmap intools.js
All divination results in this project are visual representations of cultural algorithms and do not constitute any decision-making basis. The value of fortune-telling culture lies in inspiring thought and self-awareness, not in predicting the future accurately. Echo's core is the verification process of "set node → await echo → review", not whether a single prediction is accurate.
For health, legal, financial, and other sensitive topics, please consult professionals.
If this project inspires you, a Star is appreciated