mirror of
https://github.com/danielmiessler/Fabric.git
synced 2026-01-09 06:18:06 -05:00
125 lines
3.7 KiB
Markdown
125 lines
3.7 KiB
Markdown
# Fabric Web App
|
|
|
|
A user-friendly web interface for [Fabric](https://github.com/danielmiessler/Fabric) built with [Svelte](https://svelte.dev/), [Skeleton UI](https://www.skeleton.dev/), and [Mdsvex](https://mdsvex.pngwn.io/).
|
|
|
|
|
|
*Alt: Screenshot of the Fabric web app dashboard showing pattern inputs and outputs.*
|
|
|
|
## Table of Contents
|
|
|
|
- [Fabric Web App](#fabric-web-app)
|
|
- [Table of Contents](#table-of-contents)
|
|
- [Installation](#installation)
|
|
- [Running the App](#running-the-app)
|
|
- [Prerequisites](#prerequisites)
|
|
- [Launch the Svelte App](#launch-the-svelte-app)
|
|
- [Streamlit UI](#streamlit-ui)
|
|
- [Key Features](#key-features)
|
|
- [Setup and Run](#setup-and-run)
|
|
- [Obsidian Integration](#obsidian-integration)
|
|
- [Quick Setup](#quick-setup)
|
|
- [Contributing](#contributing)
|
|
|
|
## Installation
|
|
|
|
> [!NOTE]
|
|
> Requires Node.js ≥18 and Fabric installed globally (`fabric --version` to check).
|
|
|
|
From the Fabric root directory:
|
|
|
|
**Using npm:**
|
|
|
|
```bash
|
|
./web/scripts/npm-install.sh
|
|
```
|
|
|
|
**Or using pnpm (recommended for speed):**
|
|
|
|
```bash
|
|
./web/scripts/pnpm-install.sh
|
|
```
|
|
|
|
These scripts install Svelte dependencies and patch PDF-to-Markdown libraries (e.g., pdfjs-dist, pdf-to-markdown). Link to scripts:[npm-install.sh](./scripts/npm-install.sh) and [pnpm-install.sh](./scripts/pnpm-install.sh)
|
|
|
|
## Running the App
|
|
|
|
### Prerequisites
|
|
|
|
Start Fabric's server in a separate terminal:
|
|
|
|
```bash
|
|
fabric --serve
|
|
```
|
|
|
|
(This exposes Fabric's API at <http://localhost:8080>)
|
|
|
|
### Launch the Svelte App
|
|
|
|
In the `web/` directory:
|
|
|
|
**Using npm:**
|
|
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
**Or using pnpm:**
|
|
|
|
```bash
|
|
pnpm run dev
|
|
```
|
|
|
|
Visit [http://localhost:5173](http://localhost:5173) (default port).
|
|
|
|
> [!TIP]
|
|
>
|
|
> Sync Svelte types if needed: `npx svelte-kit sync`
|
|
|
|
## Streamlit UI
|
|
|
|
For Python enthusiasts, this alternative UI excels at data visualization and chaining complex patterns. It supports clipboard ops across platforms (install pyperclip on Windows, xclip on Linux).
|
|
|
|
- **macOS**: Uses `pbcopy` and `pbpaste` (built-in)
|
|
- **Windows**: Uses `pyperclip` library (install with `pip install pyperclip`)
|
|
- **Linux**: Uses `xclip` (install with `sudo apt-get install xclip` or equivalent for your Linux distribution)
|
|
|
|
### Key Features
|
|
|
|
<!-- - Running and chaining patterns
|
|
- Managing pattern outputs
|
|
- Creating and editing patterns
|
|
- Analyzing pattern results -->
|
|
|
|
- Run and edit patterns with real-time previews.
|
|
- Analyze outputs with charts (via Matplotlib/Seaborn).
|
|
- Export results to Markdown or CSV.
|
|
|
|
### Setup and Run
|
|
|
|
From `web/`:
|
|
|
|
```bash
|
|
pip install -r requirements.txt #Or: pip install streamlit pandas matplotlib seaborn numpy python-dotenv pyperclip
|
|
streamlit run streamlit.py
|
|
```
|
|
|
|
Access at [http://localhost:8501](http://localhost:8501) (default port).
|
|
|
|
## Obsidian Integration
|
|
|
|
Turn `web/src/lib/content/` into an [Obsidian](https://obsidian.md) vault for note-taking synced with Fabric patterns. It includes pre-configured `.obsidian/` and `templates/` folders.
|
|
|
|
### Quick Setup
|
|
|
|
1. Open Obsidian: File > Open folder as vault > Select `web/src/lib/content/`
|
|
2. To publish posts, move them to the posts directory (`web/src/lib/content/posts`).
|
|
3. Use Fabric patterns to generate content directly in Markdown files.
|
|
|
|
> [!TIP]
|
|
>
|
|
> When creating new posts, make sure to include a date (YYYY-MM-DD), description, tags (e.g., #ai #patterns), and aliases for SEO. Only a date is needed to display a note. Embed images `()`, link patterns `([[pattern-name]])`, or code blocks for reusable snippets—all in standard Markdown.
|
|
|
|
## Contributing
|
|
|
|
Refer to the [Contributing Guide](/docs/CONTRIBUTING.md) for details on how to improve this content.
|