Feature/Web Svelte GUI Enhancements: Pattern Descriptions, Tags, Favorites, Search Bar, Language Integration, PDF file conversion, etc #1309
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Enhanced Pattern Selection, Pattern Descriptions, New Pattern TAG System, Language Support and other WEB UI Improvements
This Cumulative PR adds several Web UI and functionality improvements to make pattern management and selection more intuitive and friction free:
Thanks to Jonatan, Daniel, John and others who built this web app. It's a super fondation to continue building upon.
🎥 Demo Video
https://youtu.be/bhwtWXoMASA
🌟 Key Features
1. Web UI and Pattern Selection Improvements
2. Multilingual Support System
(Note: translation of pattern section "titles" not 100% for Youtube, anybody?)
3. YouTube Integration Enhancement
4. Enhanced Tag Management Integration
The tag filtering system has been integrated into the Pattern Selection interface through several UI enhancements:
Dual-Position Tag Panel
Tag Selection Visibility
Improved User Experience
Technical Implementation
HOW TO USE
No change from existing process: from /web run fabric --serve or ./fabric --serve and run npm run dev from two different terminal windows.
These enhancements create a more intuitive and efficient pattern discovery experience, allowing users to quickly filter and find relevant patterns while maintaining a clean, modern interface.
5. Obsidian and Note integration
🛠 Technical Implementation
Language Support Architecture
YouTube Processing Enhancement
Pattern Descriptions and Tags Management
This document explains the complete workflow for managing pattern descriptions and tags, including how to process new patterns and maintain metadata.
System Overview
The pattern system follows this hierarchy:
~/.config/fabric/patterns/
directory: The source of truth for available patternspattern_extracts.json
: Contains first 500 words of each pattern for referencepattern_descriptions.json
: Stores pattern metadata (descriptions and tags)web/static/data/pattern_descriptions.json
: Web-accessible copy for the interfacePattern Processing Workflow
1. Adding New Patterns
~/.config/fabric/patterns/
The Python Script automatically:
2. Pattern Extract Creation
The script extracts first 500 words from each pattern's system.md file to:
3. Description and Tag Management
Pattern descriptions and tags are managed in pattern_descriptions.json:
{
"patterns": [
{
"patternName": "pattern_name",
"description": "[Description pending]",
"tags": []
}
]
}
Completing Pattern Metadata
Writing Descriptions
Check pattern_descriptions.json for "[Description pending]" entries
Reference pattern_extracts.json for context
How to update Pattern short descriptions (one sentence).
You can update your descriptions in pattern_descriptions.json manually or using LLM assistance (prefered approach).
Tell AI to look for "Description pending" entries in this file and write a short description based on the extract info in the pattern_extracts.json file. You can also ask your LLM to add tags for those newly added patterns, using other patterns tag assignments as example.
Managing Tags
File Synchronization
The script maintains synchronization between:
Pattern Updates (adding descriptions and tags)
It will add the pattern extracts for the new patterns in the pattern_extracts.json and create placeholders in the pattern_descriptions.json file to complete later (ie add your pattern descriptions and tags). You can complete this step manually or with AI.
Troubleshooting
If patterns are not showing in the web interface:
File Structure
fabric/
├── patterns/ # Pattern source files
├── PATTERN_DESCRIPTIONS/
│ ├── extract_patterns.py # Pattern processing script
│ ├── pattern_extracts.json # Pattern content references
│ └── pattern_descriptions.json # Pattern metadata
└── web/
└── static/
└── data/
└── pattern_descriptions.json # Web interface copy
PDF TO MARKDOWN CONVERSION IMPLEMENTATION
This document explains the new PDF to Markdown conversion implementation, detailing its functionality, installation process, and the file changes involved. See and clone from https://github.com/jzillmann/pdf-to-markdown/tree/modularize. The PDF conversion module has been integrated in the svelte web browser interface. Once installed, it will automatically detect pdf files in the chat interface and convert them to markdown automatically for llm processing.
Integration with Svelte
The integration approach focused on using the library's high-level API while maintaining SSR compatibility:
How it Works
The PDF to Markdown conversion is implemented as a separate module located in the
pdf-to-markdown
directory. It leverages thepdf-parse
library (likely viaPdfParser.ts
) to parse PDF documents and extract text content. The core logic resides inPdfPipeline.ts
, which orchestrates the PDF parsing and conversion process.Pdf-to-Markdown
is a folk frompdf.js
- Mozilla's PDF parsing & rendering platform which is used as a raw parserHere's a simplified breakdown of the process:
PdfParser.ts
usespdf-parse
to read the PDF file and extract text content from each page.PdfPipeline.ts
then converts the extracted and processed text content into Markdown format. This involves mapping PDF elements to Markdown syntax, attempting to preserve formatting like headings, lists, and basic text styles.PdfConversionService.ts
in theweb/src/lib/services
directory acts as a frontend service that utilizes thepdf-to-markdown
module. It provides aconvertToMarkdown
function that takes a File object (PDF file) as input, calls thepdf-to-markdown
module to perform the conversion, and returns the Markdown output as a string.ChatInput.svelte
component uses thePdfConversionService
to convert uploaded PDF files to Markdown before sending the content to the chat service for pattern processing.Installation
To use the PDF to Markdown conversion functionality, you need to ensure that the necessary dependencies are installed.
Navigate to the
pdf-to-markdown
directory:cd pdf-to-markdown
Install dependencies:
This will install the required dependencies for the
pdf-to-markdown
module, includingpdf-parse
and any other necessary libraries listed inpdf-to-markdown/package.json
.Build the
pdf-to-markdown
module:This command will build the TypeScript code in the
pdf-to-markdown
module and create the necessary JavaScript files in thebuild
directory.Ensure frontend dependencies are installed (web):
File Changes
The following files were added or modified to implement the PDF to Markdown conversion:
New files:
pdf-to-markdown/
: (New directory for the PDF to Markdown module)pdf-to-markdown/package.json
: Defines dependencies and build scripts for the PDF to Markdown module.pdf-to-markdown/tsconfig.json
: TypeScript configuration for the PDF to Markdown module.pdf-to-markdown/src/
: Source code directory for the PDF to Markdown module.pdf-to-markdown/src/index.ts
: Entry point of the PDF to Markdown module.pdf-to-markdown/src/PdfPipeline.ts
: Core logic for PDF to Markdown conversion pipeline.pdf-to-markdown/src/PdfParser.ts
: PDF parsing logic usingpdf-parse
.web/src/lib/services/PdfConversionService.ts
: (New file)pdf-to-markdown
module and exposeconvertToMarkdown
function.Modified files:
web/src/lib/components/chat/ChatInput.svelte
:PdfConversionService
in thereadFileContent
function to handle PDF files.readFileContent
to callpdfService.convertToMarkdown
for PDF files.These file changes introduce the new PDF to Markdown conversion functionality and integrate it into the chat input component of the web interface.
🎯 Usage Examples
1. Using Language Qualifiers
2. Global Settings
3. YouTube Analysis
💡 Key Benefits
Enhanced User Experience
Robust Implementation
Maintainable Architecture
YouTube Integration
🔄 Implementation Notes
State Management
Error Handling
Next Steps