File size: 3,974 Bytes
dc44dbb |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 |
import gradio as gr
demo = gr.Blocks()
with demo:
gr.Markdown(
"""
# Project Documentation with Mermaid Diagrams
This example demonstrates how to combine regular Markdown with Mermaid diagrams for better visualization.
## System Architecture
Below is an overview of our system's architecture:
```mermaid
graph LR
User[User] --> Frontend[Web Frontend]
Frontend --> API[API Gateway]
API --> Auth[Authentication Service]
API --> DataService[Data Processing Service]
DataService --> DB[(Database)]
DataService --> ML[Machine Learning Engine]
ML --> Model[(Model Storage)]
style User fill:#f9f,stroke:#333,stroke-width:2px
style Frontend fill:#bbf,stroke:#333,stroke-width:2px
style API fill:#bfb,stroke:#333,stroke-width:2px
style DataService fill:#fbb,stroke:#333,stroke-width:2px
```
## Data Processing Workflow
The data goes through the following steps before reaching the end user:
1. Collection from various sources
2. Cleaning and preprocessing
3. Feature extraction
4. Analysis and model application
5. Results formatting
## User Journey
```mermaid
sequenceDiagram
participant U as User
participant F as Frontend
participant A as API
participant D as Database
U->>F: Login Request
F->>A: Authenticate
A->>D: Verify Credentials
D-->>A: User Validated
A-->>F: Auth Token
F-->>U: Login Success
U->>F: Request Data
F->>A: Get Data (with token)
A->>D: Query Data
D-->>A: Return Results
A-->>F: Formatted Data
F-->>U: Display Results
```
## Decision Process
When handling requests, our system follows this decision tree:
```mermaid
flowchart TD
A[New Request] --> B{Authenticated?}
B -->|Yes| C{Request Type}
B -->|No| D[Return 401]
C -->|Data Query| E[Process Query]
C -->|Update| F{Has Permission?}
C -->|Delete| G{Is Admin?}
F -->|Yes| H[Apply Update]
F -->|No| I[Return 403]
G -->|Yes| J[Execute Delete]
G -->|No| K[Return 403]
E --> L[Return Data]
H --> M[Return Success]
J --> N[Return Success]
style A fill:#98fb98,stroke:#333
style D fill:#ff9999,stroke:#333
style I fill:#ff9999,stroke:#333
style K fill:#ff9999,stroke:#333
style M fill:#98fb98,stroke:#333
style N fill:#98fb98,stroke:#333
```
## State Diagram
Our application transitions through these states:
```mermaid
stateDiagram-v2
[*] --> Initialization
Initialization --> Ready
Ready --> Processing: New Request
Processing --> Error: Exception
Processing --> Complete: Success
Error --> Ready: Reset
Complete --> Ready: Reset
Ready --> Shutdown: Exit Command
Shutdown --> [*]
```
## Additional Resources
For more information about our system, please check:
- [API Documentation](https://example.com/api-docs)
- [User Guide](https://example.com/user-guide)
- [Admin Dashboard](https://example.com/admin)
"""
)
if __name__ == "__main__":
demo.launch()
|