freddyaboulton's picture
Upload folder using huggingface_hub
dc44dbb verified
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()