github/Fabric
1
1
Fork 0
mirror of https://github.com/danielmiessler/Fabric.git synced 2026-01-09 14:28:01 -05:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1794 from starfish456/enhance-web-app-docs

Browse Source 
Enhance web app docs
This commit is contained in:
Kayvan Sylvan
2025-10-14 08:01:19 -07:00
committed by GitHub
parent a885f4b240 68d97ba454
commit 67e2a48c58
4 changed files with 98 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.vscode/settings.json vendored
View File

@@ -113,6 +113,7 @@
"matplotlib",
"mattn",
"mbed",
"Mdsvex",
"metacharacters",
"Miessler",
"modeline",
@@ -221,6 +222,7 @@
"a",
"br",
"code",
"details",
"div",
"em",
"h",
@@ -228,6 +230,7 @@
"img",
"module",
"p",
"summary",
"sup"
]
},

60
README.md
View File

@@ -174,10 +174,7 @@ Keep in mind that many of these were recorded when Fabric was Python-based, so r
- [`to_pdf` Installation](#to_pdf-installation)
- [`code_helper`](#code_helper)
- [pbpaste](#pbpaste)
- [Web Interface](#web-interface)
- [Installing](#installing)
- [Streamlit UI](#streamlit-ui)
- [Clipboard Support](#clipboard-support)
- [Web Interface (Fabric Web App)](#web-interface-fabric-web-app)
- [Meta](#meta)
- [Primary contributors](#primary-contributors)
- [Contributors](#contributors)
@@ -904,60 +901,9 @@ You can also create an alias by editing `~/.bashrc` or `~/.zshrc` and adding the
alias pbpaste='xclip -selection clipboard -o'
```
## Web Interface
## Web Interface (Fabric Web App)
Fabric now includes a built-in web interface that provides a GUI alternative to the command-line interface and an out-of-the-box website for those who want to get started with web development or blogging.
You can use this app as a GUI interface for Fabric, a ready to go blog-site, or a website template for your own projects.
The `web/src/lib/content` directory includes starter `.obsidian/` and `templates/` directories, allowing you to open up the `web/src/lib/content/` directory as an [Obsidian.md](https://obsidian.md) vault. You can place your posts in the posts directory when you're ready to publish.
### Installing
The GUI can be installed by navigating to the `web` directory and using `npm install`, `pnpm install`, or your favorite package manager. Then simply run the development server to start the app.
_You will need to run fabric in a separate terminal with the `fabric --serve` command._
**From the fabric project `web/` directory:**
```shell
npm run dev
## or ##
pnpm run dev
## or your equivalent
```
### Streamlit UI
To run the Streamlit user interface:
```bash
# Install required dependencies
pip install -r requirements.txt
# Or manually install dependencies
pip install streamlit pandas matplotlib seaborn numpy python-dotenv pyperclip
# Run the Streamlit app
streamlit run streamlit.py
```
The Streamlit UI provides a user-friendly interface for:
- Running and chaining patterns
- Managing pattern outputs
- Creating and editing patterns
- Analyzing pattern results
#### Clipboard Support
The Streamlit UI supports clipboard operations across different platforms:
- **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)
Fabric now includes a built-in web interface that provides a GUI alternative to the command-line interface. Refer to [Web App README](/web/README.md) for installation instructions and an overview of features.
## Meta

4
cmd/generate_changelog/incoming/1794.txt Normal file
View File

@@ -0,0 +1,4 @@
### PR [#1794](https://github.com/danielmiessler/Fabric/pull/1794) by [starfish456](https://github.com/starfish456): Enhance web app docs
- Remove duplicate content from the main readme and link to the web app readme
- Update table of contents with proper nesting and fix minor formatting issues

135
web/README.md
View File

@@ -1,83 +1,124 @@
# The Fabric Web App
# Fabric Web App
- [The Fabric Web App](#the-fabric-web-app)
- [Installing](#installing)
- [From Source](#from-source)
- [TL;DR: Convenience Scripts](#tldr-convenience-scripts)
- [Tips](#tips)
- [Obsidian](#obsidian)
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/).
This is a web app for Fabric. It was built using [Svelte][svelte], [SkeletonUI][skeleton], and [Mdsvex][mdsvex].
![Fabric Web App Preview](../docs/images/svelte-preview.png)
*Alt: Screenshot of the Fabric web app dashboard showing pattern inputs and outputs.*
The goal of this app is to not only provide a user interface for Fabric, but also an out-of-the-box website for those who want to get started with web development, blogging, or to just have a web interface for fabric. You can use this app as a GUI interface for Fabric, a ready to go blog-site, or a website template for your own projects.
## Table of Contents
![Preview](../docs/images/svelte-preview.png)
- [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)
## Installing
## Installation
There are a few days to install and run the Web UI.
> [!NOTE]
> Requires Node.js ≥18 and Fabric installed globally (`fabric --version` to check).
### From Source
From the Fabric root directory:
#### TL;DR: Convenience Scripts
To install the Web UI using `npm`, from the top-level directory:
**Using npm:**
```bash
./web/scripts/npm-install.sh
```
To use pnpm (preferred and recommended for a huge speed improvement):
**Or using pnpm (recommended for speed):**
```bash
./web/scripts/pnpm-install.sh
```
The app can be run by navigating to the `web` directory and using `npm install`, `pnpm install`, or your preferred package manager. Then simply run `npm run dev`, `pnpm run dev`, or your equivalent command to start the app. *You will need to run fabric in a separate terminal with the `fabric --serve` command.*
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)
Using npm:
## Running the App
### Prerequisites
Start Fabric's server in a separate terminal:
```bash
# Install the GUI and its dependencies
npm install
# Install PDF-to-Markdown components in this order
npm install -D patch-package
npm install -D pdfjs-dist
npm install -D github:jzillmann/pdf-to-markdown#modularize
fabric --serve
```
npx svelte-kit sync
(This exposes Fabric's API at <http://localhost:8080>)
# Now, with "fabric --serve" running already, you can run the GUI
### Launch the Svelte App
In the `web/` directory:
**Using npm:**
```bash
npm run dev
```
Using pnpm:
**Or using pnpm:**
```bash
# Install the GUI and its dependencies
pnpm install
# Install PDF-to-Markdown components in this order
pnpm install -D patch-package
pnpm install -D pdfjs-dist
pnpm install -D github:jzillmann/pdf-to-markdown#modularize
pnpm exec svelte-kit sync
# Now, with "fabric --serve" running already, you can run the GUI
pnpm run dev
```
## Tips
Visit [http://localhost:5173](http://localhost:5173) (default port).
When creating new posts make sure to include a date, description, tags, and aliases. Only a date is needed to display a note.
> [!TIP]
>
> Sync Svelte types if needed: `npx svelte-kit sync`
You can include images, tags to other articles, code blocks, and more all within your markdown files.
## Streamlit UI
## Obsidian
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).
If you choose to use Obsidian alongside this app,
you can design and order your vault however you like, though a `posts` folder should be kept in your vault to house any articles you'd like to post.
- **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)
[svelte]: https://svelte.dev/
[skeleton]: https://skeleton.dev/
[mdsvex]: https://mdsvex.pngwn.io/
### 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 `(![alt](path))`, 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.