03a496912f
Changes: - Added npm "overrides" section to package.json alongside existing pnpm overrides - Generated and tracked package-lock.json with security fixes applied - Removed web/package-lock.json from .gitignore to support npm users - Both npm and pnpm now enforce secure dependency versions This enables developers to use either pnpm or npm while maintaining consistent security posture across both package managers. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Fabric Web App
A user-friendly web interface for Fabric built with Svelte, Skeleton UI, and Mdsvex.
Alt: Screenshot of the Fabric web app dashboard showing pattern inputs and outputs.
Table of Contents
Installation
Note
Requires Node.js ≥18 and Fabric installed globally (
fabric --versionto check).
From the Fabric root directory:
Using npm:
./web/scripts/npm-install.sh
Or using pnpm (recommended for speed):
./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 and pnpm-install.sh
Running the App
Prerequisites
Start Fabric's server in a separate terminal:
fabric --serve
(This exposes Fabric's API at http://localhost:8080)
Launch the Svelte App
In the web/ directory:
Using npm:
npm run dev
Or using pnpm:
pnpm run dev
Visit 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
pbcopyandpbpaste(built-in) - Windows: Uses
pypercliplibrary (install withpip install pyperclip) - Linux: Uses
xclip(install withsudo apt-get install xclipor equivalent for your Linux distribution)
Key Features
- 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/:
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 (default port).
Obsidian Integration
Turn web/src/lib/content/ into an Obsidian vault for note-taking synced with Fabric patterns. It includes pre-configured .obsidian/ and templates/ folders.
Quick Setup
- Open Obsidian: File > Open folder as vault > Select
web/src/lib/content/ - To publish posts, move them to the posts directory (
web/src/lib/content/posts). - 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 for details on how to improve this content.