📸 OCR - Extract Text from Images

❓ Graph Queen - Help & Documentation

🎯 Features

• Molecular-style Graph: Hover over nodes to see connections highlighted
• Node Creation: Type in text box and press Enter to create nodes
• Connect to Selected: Select nodes first, then create a new node to auto-connect
• Manual Connections: Toggle Connect Mode and click two nodes to create edges
• AI Auto-Connect: Automatically connect similar nodes using text similarity
• OCR Word Rectangles: Upload images to extract and position word nodes

⌨️ Keyboard Shortcuts

• Ctrl+S - Save graph to JSON file
• Ctrl+Z - Undo last action
• Ctrl+Shift+Z - Redo action
• Delete or Backspace - Delete selected nodes/edges
• Ctrl+Click - Multi-select nodes or edges

🖱️ Mouse Controls

• Click node: Select/deselect node
• Double-click node: Edit node label
• Click edge: Select/deselect edge (turns red when selected)
• Drag node: Reposition node in graph
• Hover node: Show label and highlight connections
• Ctrl+Click: Add to multi-selection (nodes or edges)

📊 ScribeOCR-Style Workflow (NEW!)

🎨 Enhanced Image + Word Box Visualization
Image and word boxes now zoom/pan with your graph! Click individual word boxes to create nodes.

1. Upload Image: Click "📸 OCR" → Choose Image File

2. Extract Text: Click "🔍 Run OCR" and wait for completion

3. Visualize Words: Click "👁️ Visualize Word Rectangles"

✨ Image appears as background layer
✨ Word boxes overlay on top (hover turns blue)
✨ Everything zooms/pans together!

4. Create Nodes: Two options:

• Click individual word boxes → Creates node immediately
• "Create Graph from All" → Converts all remaining boxes to nodes

5. Keep Background: Image stays visible while you work!

6. Clear Image: Click "🗑️ Clear Image" button when done

7. Connect & Export: Use Connect Mode, Auto-Connect, then Export

📊 Manual Graph Building

1. Click a few nodes to select them (they turn blue)

2. Type "Central Hub" in the text box at bottom

3. Press Enter - a new node will be created connected to all selected nodes!

4. Use "Auto-Connect Similar" to automatically link related words

5. Save your work with Ctrl+S or Export button

⚙️ Settings & Configuration

🎨 Graph Appearance

The graph uses a molecular-style visualization with:

• White circular nodes with black borders
• Steelblue selection color
• Light gray edges with subtle transparency
• Force-directed layout for automatic positioning

🔧 Force Simulation Parameters

• Link Distance: 150px between connected nodes
• Charge Strength: -300 (node repulsion)
• Collision Radius: 40px (prevents overlap)

🤖 AI Similarity Settings

The auto-connect feature uses two algorithms:

• Levenshtein Distance: Measures edit distance between words
• Cosine Similarity: Uses character bigrams for comparison
• Default Threshold: 60% similarity required
• Custom Threshold: Adjustable when running auto-connect

💾 Data Management

• Undo History: 50 states stored
• Export Format: JSON with metadata
• File Naming: graph_YYYY-MM-DD_HH-mm-ss.json

🔍 OCR Settings

• Engine: Tesseract.js (browser-based)
• Language: English (eng)
• Output: Word bounding boxes with coordinates
• PDF Support: First page extraction via PDF.js

🎨 Basil.js Text Graph Demo

Classic basil.js example: "Connecting All Words With Lines" - Type text in the boxes below and watch as every word from the left connects to every word on the right, creating an intricate network visualization!

Based on: basil.js tutorial "01_connecting_all_words_with_lines" - Every word from the left block connects to every word on the right, creating M × N connections. Try editing the text to see the network update in real-time!